feat: autofocus name input when PlayerDialog is opened

client/src/components/admin/PlayerDialog.vue

@@ -1,7 +1,7 @@
 <template>
-  <ModalDialog v-if="show" :title="title" @close="emit('close')">
+  <ModalDialog :title="title" @close="emit('close')">
     <label class="player-dialog__label">Name</label>
-    <input class="player-dialog__input" v-model="player.name" size="40" />
+    <input id="player-dialog-name" 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="40" maxlength="4" />
     <label class="player-dialog__label">Authcode</label>
@@ -22,20 +22,23 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { onMounted, ref, watch } from 'vue'
 import { PlayerEdit } from '@/composables/engine.d'
 import type { Button } from '@/components/admin/PlayerModal'
 
 const props = defineProps<{
   title: string
-  show: boolean
   buttons: Array<Button>
   player: PlayerEdit
 }>()
 
 const emit = defineEmits(['close', 'submit'])
 const showId = ref(false)
-watch([props], () => { showId.value = false })  // reset visibility each time the dialog is shown
+onMounted(() => { 
+  window.setTimeout(() => {
+    document.getElementById('player-dialog-name')?.focus()
+  }, 0)
+})
 
 const generate = () => {
   props.player.authcode = ''

client/src/components/admin/PlayersTile.vue

@@ -21,7 +21,7 @@
         </tr>
       </table>
     </AdminTile>
-    <AdminPlayerDialog :show="showPlayerDialog" :title="playerDialogTitle" :buttons="playerDialogButtons"
+    <AdminPlayerDialog v-if="showPlayerDialog" :title="playerDialogTitle" :buttons="playerDialogButtons"
       :player="playerDialogPlayer" @close="showPlayerDialog = false" @submit="playerDialogSubmit" />
   </div>
 </template>