feat(game-lobby): display disclaimer for small screens (#853)

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

## Summary by CodeRabbit

- **New Features**
- Enhanced toast notifications to display warnings for small screens,
improving user feedback.
- Added localization support for small screen detection messages in
English and French.
  
- **Bug Fixes**
- Adjusted styling of toast notifications for better visibility across
different screen sizes.

- **Tests**
- Expanded test coverage to include scenarios for responsive behavior
related to screen size and toast notifications.

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

app/app.vue

@@ -8,7 +8,10 @@
       />
     </NuxtLayout>
 
-    <PrimeVueToast position="bottom-right"/>
+    <PrimeVueToast
+      class="!max-w-x-screen-9/10"
+      position="bottom-right"
+    />
 
     <NuxtPwaManifest/>
   </div>

app/pages/game-lobby.vue

@@ -39,6 +39,7 @@
 </template>
 
 <script setup lang="ts">
+import { breakpointsTailwind, useBreakpoints } from "@vueuse/core";
 import type { GameLobbyAdditionalCardsManagerExposed } from "~/components/pages/game-lobby/GameLobbyAdditionalCardsManager/game-lobby-additional-cards-manager.types";
 import GameLobbyAdditionalCardsManager from "~/components/pages/game-lobby/GameLobbyAdditionalCardsManager/GameLobbyAdditionalCardsManager.vue";
 import GameLobbyBeforeLeaveConfirmDialog from "~/components/pages/game-lobby/GameLobbyBeforeLeaveConfirmDialog/GameLobbyBeforeLeaveConfirmDialog.vue";
@@ -53,9 +54,11 @@ import GameLobbyPositionCoordinator from "~/components/pages/game-lobby/GameLobb
 import type { GameLobbyRolePickerExposed } from "~/components/pages/game-lobby/GameLobbyRolePicker/game-lobby-role-picker.types";
 import GameLobbyRolePicker from "~/components/pages/game-lobby/GameLobbyRolePicker/GameLobbyRolePicker.vue";
 import type { CreateGamePlayerDto } from "~/composables/api/game/dto/create-game/create-game-player/create-game-player.dto";
+import { usePrimeVueToasts } from "~/composables/prime-vue/usePrimeVueToasts";
 import { useAudioStore } from "~/stores/audio/useAudioStore";
 import { useCreateGameDtoStore } from "~/stores/game/create-game-dto/useCreateGameDtoStore";
 import { useGameStore } from "~/stores/game/useGameStore";
+import { BreakpointTypes } from "~/utils/enums/breakpoint.enums";
 
 const createGameDtoStore = useCreateGameDtoStore();
 const { resetCreateGameDto } = createGameDtoStore;
@@ -67,12 +70,17 @@ const { loadAllAudios } = audioStore;
 
 const { t } = useI18n();
 
+const { addInfoToast } = usePrimeVueToasts();
+
 const gameLobbyHeader = ref<GameLobbyHeaderExposed | null>(null);
 const gameLobbyRolePicker = ref<GameLobbyRolePickerExposed | null>(null);
 const gameLobbyOptionsHub = ref<GameLobbyOptionsHubExposed | null>(null);
 const gameLobbyPositionCoordinator = ref<GameLobbyPositionCoordinatorExposed | null>(null);
 const gameLobbyAdditionalCardsManager = ref<GameLobbyAdditionalCardsManagerExposed | null>(null);
 
+const breakpoints = useBreakpoints(breakpointsTailwind);
+const isSmallerThanMd = breakpoints.smaller(BreakpointTypes.MD);
+
 useHead({
   title: t("pages.gameLobby.startGame"),
   meta: [{ name: "description", content: t("pages.gameLobby.seoDescription") }],
@@ -155,8 +163,25 @@ function injectPlayerNamesFromQuery(): void {
   })));
 }
 
+function launchSmallScreenWarning(): void {
+  addInfoToast({
+    summary: t("pages.gameLobby.smallScreenDetected"),
+    detail: t("pages.gameLobby.smallScreenWarning"),
+    life: 7500,
+  });
+}
+
 resetCreateGameDto();
 resetGame();
 injectPlayerNamesFromQuery();
 loadAllAudios();
+
+onMounted(() => {
+  if (isSmallerThanMd.value) {
+    const delayInMs = 200;
+    setTimeout(() => {
+      launchSmallScreenWarning();
+    }, delayInMs);
+  }
+});
 </script>

modules/i18n/locales/en.json

@@ -420,7 +420,9 @@
     },
     "gameLobby": {
       "startGame": "Start a game",
-      "seoDescription": "Create a new game right now with the Werewolves Assistant."
+      "seoDescription": "Create a new game right now with the Werewolves Assistant.",
+      "smallScreenDetected": "Small screen detected",
+      "smallScreenWarning": "Even if the Assistant is responsive, it is recommended to use a larger screen for a better experience."
     },
     "game": {
       "loadingGame": "Loading game…",

modules/i18n/locales/fr.json

@@ -420,7 +420,9 @@
     },
     "gameLobby": {
       "startGame": "Lancer une partie",
-      "seoDescription": "Créer une nouvelle partie avec l'Assistant Loups-Garous"
+      "seoDescription": "Créer une nouvelle partie avec l'Assistant Loups-Garous",
+      "smallScreenDetected": "Small screen detected",
+      "smallScreenWarning": "Even if the Assistant is responsive, it is recommended to use a larger screen for a better experience."
     },
     "game": {
       "loadingGame": "Chargement de la partie…",

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

@@ -24,6 +24,16 @@ Feature: 🃏 Game Lobby Page
       | generator        | nuxt                                                       |
       | color-scheme     | dark                                                       |
 
+  Scenario: 🃏 Game Lobby page displays an info toast when small screen is detected
+    Given the user renders the app on the iPhone X
+    And the user is on game-lobby page
+    Then the toast with text "Even if the Assistant is responsive, it is recommended to use a larger screen for a better experience." should be visible
+
+  Scenario: 🃏 Game Lobby page doesn't display an info toast when medium or large screen is detected
+    Given the user renders the app on the iPad Mini
+    And the user is on game-lobby page
+    Then the toast with text "Even if the Assistant is responsive, it is recommended to use a larger screen for a better experience." should be hidden
+
   Scenario: 🃏 User adds a player
     Given the user is on game-lobby page
     Then the input with label "Player name" should be empty

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

@@ -7,4 +7,10 @@ Then(/^the toast with text "(?<text>.+)" should be visible$/u, async function(th
   const toastsContainer = this.page.locator(".p-toast").first();
 
   await expect(toastsContainer.getByRole("alert").getByText(text)).toBeVisible();
+});
+
+Then(/^the toast with text "(?<text>.+)" should be hidden$/u, async function(this: CustomWorld, text: string): Promise<void> {
+  const toastsContainer = this.page.locator(".p-toast").first();
+
+  await expect(toastsContainer.getByRole("alert").getByText(text)).toBeHidden();
 });

tests/acceptance/features/playwright/step-definitions/viewports/playwright-viewports.when-steps.ts

@@ -0,0 +1,7 @@
+import { When } from "@cucumber/cucumber";
+import type { CustomWorld } from "@tests/acceptance/shared/types/word.types";
+import { devices } from "playwright-core";
+
+When(/^the user renders the app on the (?<device>iPhone X|iPad Mini)$/u, async function(this: CustomWorld, device: string): Promise<void> {
+  await this.page.setViewportSize(devices[device].viewport);
+});