feat: add new player

client/src/components/ModalDialog.vue

@@ -68,7 +68,7 @@ const emit = defineEmits(['close'])
 
   &__footer {
     display: flex;
-    justify-content: end;
+    // justify-content: end;
     margin: 24px 16px;
   }
 

client/src/components/admin/PlayerDialog.vue

@@ -1,16 +1,17 @@
 <template>
   <ModalDialog v-if="show" :title="title" @close="emit('close')">
     <label class="player-dialog__label">Name</label>
-    <input class="player-dialog__input" v-model="player.name" size="20" />
+    <input class="player-dialog__input" v-model="player.name" size="40" />
     <label class="player-dialog__label">Score</label>
-    <input class="player-dialog__input" v-model="player.score" size="20" maxlength="4" />
+    <input class="player-dialog__input" v-model="player.score" size="40" maxlength="4" />
     <label class="player-dialog__label">Authcode</label>
-    <input class="player-dialog__input" v-model="player.authcode" size="20" maxlength="6" />
+    <input class="player-dialog__input" v-model="player.authcode" size="40" maxlength="6" />
     <div class="player-dialog__id-container" @click="showId = true">
       <span class="player-dialog__id" :class="{ 'player-dialog__id__show': showId }">{{ player.id }}</span>
     </div>
     <template v-slot:footer>
-      <Button @click="emit('submit')">{{ buttonText }}</Button>
+      <Button v-for="button in buttons" :key="button.id" class="player-dialog__button" :border="button.primary"
+        @click="emit('submit', button.id)">{{ button.name }}</Button>
     </template>
   </ModalDialog>
 </template>
@@ -19,10 +20,16 @@
 import { ref, watch } from 'vue'
 import { PlayerEdit } from '@/composables/engine.d'
 
+type Button = {
+  id: string
+  name: string
+  primary?: boolean
+}
+
 const props = defineProps<{
   title: string
   show: boolean
-  buttonText: string
+  buttons: Array<Button>
   player: PlayerEdit
 }>()
 
@@ -58,5 +65,9 @@ watch([props], () => { showId.value = false })  // reset visibility each time th
       visibility: visible;
     }
   }
+
+  &__button ~ &__button {
+    margin-left: 16px;
+  }
 }
 </style>

client/src/components/admin/PlayersTile.vue

@@ -21,14 +21,8 @@
         </tr>
       </table>
     </AdminTile>
-    <AdminPlayerDialog
+    <AdminPlayerDialog :show="showPlayerDialog" :title="playerDialogTitle" :buttons="playerDialogButtons"
-      :show="showPlayerDialog"
+      :player="playerDialogPlayer" @close="showPlayerDialog = false" @submit="playerDialogSubmit" />
-      :title="playerDialogTitle"
-      :button-text="playerDialogButtonText"
-      :player="playerDialogPlayer"
-      @close="showPlayerDialog = false"
-      @submit="playerDialogSubmit"
-    />
   </div>
 </template>
 
@@ -37,11 +31,14 @@ import { computed, ref } from 'vue'
 import useI18n from '@/composables/useI18n'
 import useDateFormatter from '@/composables/useDateFormatter';
 import type { GameInfo, PlayerEdit } from '@/composables/engine.d'
+import EngineDebugVue from '../EngineDebug.vue';
+import useEngine from '~~/src/composables/useEngine';
+import { EmitFlags } from 'typescript';
 
 const props = defineProps<{
   gameinfo: GameInfo
 }>()
-// const emit = defineEmits(['update'])
+const emit = defineEmits(['update'])
 
 const { $t } = useI18n({
   name: { en: 'Name', de: 'Name' },
@@ -58,28 +55,42 @@ const players = computed(() => {
 const showPlayerDialog = ref(false)
 const playerDialogPlayer = ref({} as PlayerEdit)
 const playerDialogTitle = ref('')
-const playerDialogButtonText = ref('')
+type ButtonAction = 'cancel' | 'create' | 'edit' | 'delete'
+type Button = {
+  id: ButtonAction
+  name: string
+  primary?: boolean
+}
+const playerDialogButtons = ref([] as Array<Button>)
 const addPlayer = () => {
   showPlayerDialog.value = true
   playerDialogTitle.value = 'Add new player'
-  playerDialogButtonText.value = 'Create Player'
+  playerDialogButtons.value = [
+    { id: 'create', name: 'Create Player', primary: true },
+    { id: 'cancel', name: 'Cancel', primary: false },
+  ],
   playerDialogPlayer.value = {
-    id: 'asdfasf',
+    id: '',
     name: '',
     score: 0,
     authcode: '',
   }
 }
-const editPlayer = (player: PlayerEdit) => {
-  showPlayerDialog.value = true
-  playerDialogTitle.value = 'Add new player'
-  playerDialogButtonText.value = 'Create Player'
-  playerDialogPlayer.value = player
-}
 
-const playerDialogSubmit = () => {
+
+const playerDialogSubmit = async (action: ButtonAction): Promise<void> => {
   showPlayerDialog.value = false
-  console.log(playerDialogPlayer.value)
+  switch (action) {
+    case 'cancel':
+      break
+    case 'create':
+    case 'edit':
+      await useEngine().savePlayer(playerDialogPlayer.value)
+      emit('update')
+      break
+    case 'delete':
+      break
+  }
 }
 </script>
 

client/src/composables/engine.d.ts

@@ -10,7 +10,7 @@ export type Player = {
 export type Players = Array<Player>
 
 export type PlayerEdit = Player & {
-  authcode?: string
+  authcode: string
 }
 
 export type PlayerInfo = PlayerEdit & {

client/src/composables/engine/gamemaster.ts

@@ -1,5 +1,5 @@
 import { EngineContext } from '@/composables/useEngine'
-import type { GameInfo } from '@/composables/engine.d'
+import type { GameInfo, PlayerEdit } from '@/composables/engine.d'
 import { useUserinfoStore } from "@/stores/UserinfoStore"
 
 export async function collectQuotes(this: EngineContext): Promise<void> {
@@ -59,3 +59,15 @@ export async function setGameName(this: EngineContext, name: string): Promise<vo
     name,
   })
 }
+
+export async function savePlayer(this: EngineContext, player: PlayerEdit): Promise<void> {
+  const userInfoStore = useUserinfoStore()
+  await this.callApi('/api/savePlayer', {
+    g: userInfoStore.gameId,
+    id: player.id,
+    name: player.name,
+    score: player.score.toString(),
+    authcode: player.authcode,
+  })
+}
+

client/src/composables/useEngine.ts

@@ -3,9 +3,9 @@ import { callApi, QueryParams } from '@/composables/engine/callApi'
 import { start, stop } from '@/composables/engine/startStop'
 import { fetchUpdate } from '@/composables/engine/fetchUpdate'
 import { loadQuotes, getQuotesRef, deleteQuote, saveQuote } from '@/composables/engine/quotes'
-import { collectQuotes, startGame, continueGame, resetGame, finishGame, fetchGameInfo, setGameLang, setGameName } from '@/composables/engine/gamemaster'
+import { collectQuotes, startGame, continueGame, resetGame, finishGame, fetchGameInfo, setGameLang, setGameName, savePlayer } from '@/composables/engine/gamemaster'
 import { saveSelection } from '@/composables/engine/play'
-import type { Quotes, GameInfo } from '@/composables/engine.d'
+import type { Quotes, GameInfo, PlayerEdit } from '@/composables/engine.d'
 
 export interface EngineContext {
     isActive: boolean
@@ -39,6 +39,7 @@ export interface useEngine {
     fetchGameInfo: () => Promise<GameInfo>
     setGameLang: (lang: string) => Promise<void>
     setGameName: (name: string) => Promise<void>
+    savePlayer: (player: PlayerEdit) => Promise<void>
 }
 
 export default (): useEngine => {
@@ -75,5 +76,6 @@ export default (): useEngine => {
         fetchGameInfo: () => fetchGameInfo.apply(context),
         setGameLang: (lang: string) => setGameLang.apply(context, [lang]),
         setGameName: (name: string) => setGameName.apply(context, [name]),
+        savePlayer: (player: PlayerEdit) => savePlayer.apply(context, [player]),
     }
 }