feat(game-lobby): auto-focus on player name input (#860)

.gitignore

@@ -2,6 +2,7 @@
 .output
 .data
 .nuxt
+.nuxt-test-cucumber
 .nitro
 .cache
 dist

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

@@ -9,6 +9,7 @@
           id="player-name-input"
           v-model="inputValue"
           aria-labelledby="player-name-input-help"
+          :autofocus="!isOnTouchDevice"
           :class="{ 'p-invalid': doesPlayerNameExistInGame }"
           :disabled="isInputDisabled"
           :maxlength="MAX_PLAYER_NAME_LENGTH"
@@ -55,12 +56,15 @@ import { 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";
+import { useDevice } from "~/composables/misc/useDevice";
 import { useCreateGameDtoStore } from "~/stores/game/create-game-dto/useCreateGameDtoStore";
 
 const { t } = useI18n();
 
 const createGameDtoStore = useCreateGameDtoStore();
 
+const { isOnTouchDevice } = useDevice();
+
 const { createGameDto } = storeToRefs(createGameDtoStore);
 
 const inputValue = defineModel<string>({ required: true });

app/composables/misc/useDevice.ts

@@ -0,0 +1,17 @@
+import type { ComputedRef } from "vue";
+
+type UseDevice = {
+  isOnTouchDevice: ComputedRef<boolean>;
+};
+
+function useDevice(): UseDevice {
+  const isOnTouchDevice = computed<boolean>(() => "ontouchstart" in window || navigator.maxTouchPoints > 0);
+
+  return {
+    isOnTouchDevice,
+  };
+}
+
+export {
+  useDevice,
+};

config/eslint/flat-configs/eslint.global-config.mjs

@@ -8,6 +8,7 @@ const ESLINT_GLOBAL_CONFIG = Object.freeze({
     globals: {
       window: READONLY,
       process: READONLY,
+      navigator: READONLY,
       Buffer: READONLY,
       defineNuxtConfig: READONLY,
       defineNuxtPlugin: READONLY,

modules/i18n/i18n.config.ts

@@ -7,6 +7,7 @@ export default defineI18nConfig(() => {
   return {
     legacy: false,
     locale: runtimeConfig.public.defaultLocale,
+    defaultLocale: runtimeConfig.public.defaultLocale,
     messages: {
       fr,
       en,

nuxt.config.ts

@@ -89,6 +89,7 @@ export default defineNuxtConfig({
   },
   i18n: {
     vueI18n: "./modules/i18n/i18n.config.ts",
+    defaultLocale: process.env.NUXT_PUBLIC_DEFAULT_LOCALE,
     locales: [
       {
         code: "fr",
@@ -102,10 +103,7 @@ export default defineNuxtConfig({
     strategy: "no_prefix",
   },
   image: {
-    domains: [
-      "antoinezanardi.fr",
-      "appspot.com",
-    ],
+    domains: ["werewolves-assistant.com"],
   },
   linkChecker: {
     enabled: false,

tests/acceptance/features/game-lobby/features/game-lobby.feature

@@ -10,6 +10,7 @@ Feature: 🃏 Game Lobby Page
     And the heading with name "Add player names with the input above" should be visible
     And the button with name "Random composition" should be visible
     And the button with name "Start game" should be visible
+    And the input with label "Player name" should be focused
     And the page should match or creates the missing snapshot with name "Game Lobby Page without players"
 
   Scenario: 🃏 Game Lobby page has valid head title and SEO tags

tests/acceptance/features/playwright/step-definitions/inputs/playwright-inputs.then-steps.ts

@@ -21,4 +21,8 @@ Then(/^the input with label "(?<label>.+?)" should be empty$/u, async function(t
 
 Then(/^the input with label "(?<label>.+?)" should have placeholder "(?<placeholder>.+?)"$/u, async function(this: CustomWorld, label: string, placeholder: string): Promise<void> {
   await expect(this.page.getByLabel(label)).toHaveAttribute("placeholder", placeholder);
+});
+
+Then(/^the input with label "(?<label>.+?)" should be focused$/u, async function(this: CustomWorld, label: string): Promise<void> {
+  await expect(this.page.getByLabel(label)).toBeFocused();
 });

tests/acceptance/features/support/hooks.ts

@@ -11,11 +11,28 @@ import type { CustomWorld } from "@tests/acceptance/shared/types/word.types";
 
 const { beforeEach, afterEach, afterAll, setup } = createTest({
   runner: "cucumber",
+  buildDir: ".nuxt-test-cucumber",
   server: true,
+  browserOptions: {
+    type: "chromium",
+    launch: {
+      headless: true,
+      env: {
+        NUXT_PUBLIC_WEREWOLVES_ASSISTANT_API_BASE_URL: WEREWOLVES_ASSISTANT_SANDBOX_API_BASE_URL,
+        NUXT_PUBLIC_DEFAULT_LOCALE: I18N_TEST_LOCALE,
+        NUXT_SITE_URL: "http://127.0.0.1:4000",
+        NUXT_SITE_NAME: "Werewolves Assistant",
+        NUXT_SITE_ENV: "test",
+        NUXT_SITE_DESCRIPTION: "The perfect tool for game masters of the Werewolves of Miller's Hollow™",
+      },
+    },
+  },
   rootDir: fileURLToPath(new URL("../../../..", import.meta.url)),
   nuxtConfig: {
     i18n: {
       defaultLocale: I18N_TEST_LOCALE,
+      skipSettingLocaleOnNavigate: true,
+      locales: [{ code: "en", language: "en-US" }],
     },
     runtimeConfig: {
       public: {