feat: add ability to edit players

client/src/components/admin/PlayerDialog.vue

@@ -10,7 +10,7 @@
       <span class="player-dialog__id" :class="{ 'player-dialog__id__show': showId }">{{ player.id }}</span>
     </div>
     <template v-slot:footer>
-      <Button v-for="button in buttons" :key="button.id" class="player-dialog__button" :border="button.primary"
+      <Button v-for="button in buttons" :key="button.id" class="player-dialog__button" :border="['primary', 'caution'].indexOf(button.type) >= 0"
         @click="emit('submit', button.id)">{{ button.name }}</Button>
     </template>
   </ModalDialog>
@@ -19,12 +19,7 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue'
 import { PlayerEdit } from '@/composables/engine.d'
-
-type Button = {
-  id: string
-  name: string
-  primary?: boolean
-}
+import type { Button } from '@/components/admin/PlayerModal'
 
 const props = defineProps<{
   title: string

client/src/components/admin/PlayerModal.d.ts

@@ -0,0 +1,9 @@
+export type ButtonType = 'primary' | 'caution' | 'normal'
+
+export type Button = {
+  id: string
+  name: string
+  type: ButtonType
+}
+
+export type ButtonAction = 'cancel' | 'create' | 'edit' | 'delete'

client/src/components/admin/PlayersTile.vue

@@ -8,16 +8,16 @@
           <th class="players-tile__table-head">{{ $t('score') }}</th>
           <th class="players-tile__table-head">{{ $t('last-logged-in') }}</th>
         </tr>
-        <tr v-for="player in players" class="players-tile__row" :key="player.id">
-          <td>
+        <tr v-for="player in players" class="players-tile__row" :key="player.id" @click="editPlayer(player)">
+          <td class="players-tile__cell">
             {{ player.name }}
             <div v-if="player.role === 'gamemaster'" class="players-tile__is-gamemaster">
               <Icon name="crown" />
             </div>
           </td>
-          <td>{{ player.numQuotes }}</td>
-          <td>{{ player.score }}</td>
-          <td>{{ player.lastLoggedIn === 0 ? '-' : datetime(player.lastLoggedIn) }}</td>
+          <td class="players-tile__cell">{{ player.numQuotes }}</td>
+          <td class="players-tile__cell">{{ player.score }}</td>
+          <td class="players-tile__cell">{{ player.lastLoggedIn === 0 ? '-' : datetime(player.lastLoggedIn) }}</td>
         </tr>
       </table>
     </AdminTile>
@@ -30,10 +30,9 @@
 import { computed, ref } from 'vue'
 import useI18n from '@/composables/useI18n'
 import useDateFormatter from '@/composables/useDateFormatter';
+import useEngine from '@/composables/useEngine';
 import type { GameInfo, PlayerEdit } from '@/composables/engine.d'
-import EngineDebugVue from '../EngineDebug.vue';
-import useEngine from '~~/src/composables/useEngine';
-import { EmitFlags } from 'typescript';
+import type { Button, ButtonAction } from '@/components/admin/PlayerModal'
 
 const props = defineProps<{
   gameinfo: GameInfo
@@ -55,19 +54,13 @@ const players = computed(() => {
 const showPlayerDialog = ref(false)
 const playerDialogPlayer = ref({} as PlayerEdit)
 const playerDialogTitle = 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'
   playerDialogButtons.value = [
-    { id: 'create', name: 'Create Player', primary: true },
-    { id: 'cancel', name: 'Cancel', primary: false },
+    { id: 'create', name: 'Create Player', type: 'primary' },
+    { id: 'cancel', name: 'Cancel', type: 'normal' },
   ],
   playerDialogPlayer.value = {
     id: '',
@@ -77,6 +70,17 @@ const addPlayer = () => {
   }
 }
 
+const editPlayer = async (player: PlayerEdit): Promise<void> => {
+  showPlayerDialog.value = true
+  playerDialogTitle.value = 'Edit player'
+  playerDialogButtons.value =[
+    { id: 'edit', name: 'Save', type: 'primary' },
+    { id: 'delete', name: 'Delete', type: 'caution' },
+  ]
+  playerDialogPlayer.value = {
+    ...player,
+  }
+}
 
 const playerDialogSubmit = async (action: ButtonAction): Promise<void> => {
   showPlayerDialog.value = false
@@ -102,18 +106,26 @@ const playerDialogSubmit = async (action: ButtonAction): Promise<void> => {
   }
 
   &__table {
-    margin: 0 0 16px -12px;
-    border-collapse: separate;
-    border-spacing: 12px 0;
+    margin: 0 0 16px 0;
+    border-spacing: 0;
   }
 
   &__table-head {
     text-align: left;
-    margin: 8px;
+    padding-right: 8px;
   }
 
   &__row {
     height: 24px;
+    cursor: pointer;
+
+    &:hover {
+      background-color: #606060;
+    }
+  }
+
+  &__cell {
+    padding-right: 8px;
   }
 
   &__is-gamemaster {