feat(game-lobby): auto-focus on player name input even after changing…

… page (#873)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **New Features**
- Introduced automatic focus on the player name input field when the
game lobby component is mounted, improving user experience.
  
- **Bug Fixes**
- Enhanced error handling for scenarios where the player name input
reference is not defined.

- **Tests**
- Expanded test coverage for the player name input handling, ensuring
robust functionality across different device types.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

app/components/pages/game-lobby/GameLobbyHeader/GameLobbyPlayerInput/GameLobbyPlayerInput.vue

@@ -7,6 +7,7 @@
       <PrimeVueFloatLabel>
         <PrimeVueInputText
           id="player-name-input"
+          ref="playerNameInput"
           v-model="inputValue"
           aria-labelledby="player-name-input-help"
           :autofocus="!isOnTouchDevice"
@@ -52,7 +53,7 @@
 <script lang="ts" setup>
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { storeToRefs } from "pinia";
-import { computed } from "vue";
+import { type ComponentPublicInstance, computed } from "vue";
 
 import { MAX_PLAYERS_IN_GAME } from "~/composables/api/game/constants/game.constants";
 import { MAX_PLAYER_NAME_LENGTH } from "~/composables/api/game/constants/player/player.constants";
@@ -69,6 +70,8 @@ const { createGameDto } = storeToRefs(createGameDtoStore);
 
 const inputValue = defineModel<string>({ required: true });
 
+const playerNameInput = ref<ComponentPublicInstance | null>(null);
+
 const doesPlayerNameExistInGame = computed<boolean>(() => createGameDto.value.players.some(({ name }) => name === inputValue.value.trim()));
 
 const hasPlayerNameReachedMaxLength = computed<boolean>(() => inputValue.value.trim().length >= MAX_PLAYER_NAME_LENGTH);
@@ -92,5 +95,16 @@ const playerNameInputHelpText = computed<string>(() => {
   return t("components.GameLobbyPlayerInput.pleaseEnterPlayerName");
 });
 
+function focusOnPlayerNameInput(): void {
+  if (!playerNameInput.value) {
+    throw createError("Player name input is not defined");
+  }
+  if (!isOnTouchDevice.value) {
+    (playerNameInput.value.$el as HTMLElement).focus();
+  }
+}
+
+onMounted(focusOnPlayerNameInput);
+
 defineExpose({ isAddButtonDisabled });
 </script>