Release v1.32.0 (#828)

## Release v1.32.0 ### 🚀 Features * **audio**: audio settings in local storage * **game-lobby**: all game lobby is responsive * **game-lobby**: auto-focus on player name input * **game-lobby**: auto-focus on player name input even after changing page * **game-lobby**: display disclaimer for small screens * **game-lobby**: game options confirm step in lobby * **game**: all game screens are responsive * **game**: game over screens are responsive * **misc-pages**: responsive for canceled game and not found game pages * **nuxt**: set route announcer * **nuxt**: typecheck on hooks and ci ### 🐛 Bug Fixes * **deps**: update dependency @primevue/themes to ^4.0.6 * **deps**: update dependency @primevue/themes to ^4.0.7 * **deps**: update dependency primevue to ^4.0.6 * **deps**: update dependency primevue to ^4.0.7 * **game-events**: icon animation null instance handler * **pwa**: remove redirect fallback ### 🔩 Refactor * **primevue**: use new accordion component * **primevue**: use new tab components ### ✅ Tests * **scapegoat**: acceptance tests ### 🔁 CI * **node**: use last node version in ci ### 🧹 Chore * **deps**: update commitlint monorepo to ^19.5.0 * **deps**: update dependency @cucumber/cucumber to ^11.0.1 * **deps**: update dependency @cucumber/cucumber to v11 * **deps**: update dependency @faker-js/faker to ^9.0.1 * **deps**: update dependency @nuxt/test-utils to ^3.14.2 * **deps**: update dependency @nuxtjs/i18n to ^8.5.2 * **deps**: update dependency @nuxtjs/i18n to ^8.5.3 * **deps**: update dependency @nuxtjs/robots to ^4.1.7 * **deps**: update dependency @primevue/nuxt-module to ^4.0.6 * **deps**: update dependency @primevue/nuxt-module to ^4.0.7 * **deps**: update dependency @stylistic/eslint-plugin to ^2.8.0 * **deps**: update dependency @types/qs to ^6.9.16 * **deps**: update dependency @vueuse/core to ^11.1.0 * **deps**: update dependency @vueuse/nuxt to ^11.1.0 * **deps**: update dependency circle-progress.vue to ^3.2.2 * **deps**: update dependency husky to ^9.1.6 * **deps**: update dependency msw to ^2.4.3 * **deps**: update dependency msw to ^2.4.4 * **deps**: update dependency msw to ^2.4.5 * **deps**: update dependency msw to ^2.4.6 * **deps**: update dependency msw to ^2.4.7 * **deps**: update dependency msw to ^2.4.8 * **deps**: update dependency node to v22.9.0 * **deps**: update dependency sass to ^1.79.1 * **deps**: update dependency semantic-release to ^24.1.1 * **deps**: update dependency tailwindcss to ^3.4.11 * **deps**: update dependency tailwindcss to ^3.4.12 * **deps**: update dependency tsx to ^4.19.1 * **deps**: update dependency type-fest to ^4.26.1 * **deps**: update dependency typescript to ^5.6.2 * **deps**: update dependency vue to ^3.5.4 * **deps**: update dependency vue to ^3.5.5 * **deps**: update dependency vue to ^3.5.6 * **deps**: update dependency vue-router to ^4.4.4 * **deps**: update dependency vue-router to ^4.4.5 * **deps**: update nuxtjs monorepo to ^3.13.2 * **deps**: update playwright monorepo to ^1.47.1 * **deps**: update pnpm to v9.10.0 * **deps**: update typescript-eslint monorepo to ^8.5.0 * **deps**: update typescript-eslint monorepo to ^8.6.0 * **deps**: update vitest monorepo to ^2.1.0 * **deps**: update vitest monorepo to ^2.1.1 * **screenshots**: missing screenshots for linux
antoinezanardi · Sep 18, 2024 · a97f911 · a97f911
2 parents 6325c11 + ee0a17e
commit a97f911
Show file tree

Hide file tree

Showing 369 changed files with 152,135 additions and 141,048 deletions.
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -104,6 +104,9 @@ jobs:
       - name: Create Nuxt types ⛰️
         run: pnpm run postinstall
 
+      - name: Type check 🪨
+        run: pnpm run typecheck
+
       - name: Build app ✨
         run: pnpm run build
 

diff --git a/.gitignore b/.gitignore
@@ -2,6 +2,7 @@
 .output
 .data
 .nuxt
+.nuxt-test-cucumber
 .nitro
 .cache
 dist

diff --git a/.husky/commit-msg b/.husky/commit-msg
@@ -1,2 +1 @@
-
-npx commitlint -g config/commitlint/.commitlintrc.json --edit $1
+npx commitlint -g config/commitlint/.commitlintrc.json --edit $1
diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -1,7 +1,7 @@
-
 npx --no-install validate-branch-name;
 npm run prettier:gherkin:fix;
 npm run lint:staged:fix;
 git add -A .;
+npm run typecheck;
 npm run test:unit:staged;
 npm run script:check-acceptance-features-shard;
diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-21.7.3
+22.9.0
diff --git a/.run/Audio.run.xml b/.run/Audio.run.xml
@@ -0,0 +1,12 @@
+<component name="ProjectRunConfigurationManager">
+  <configuration default="false" name="Audio" type="cucumber.js" factoryName="Cucumber.js" folderName="Tags">
+    <option name="myFilePath" value="$PROJECT_DIR$/tests/acceptance" />
+    <option name="myNameFilter" value="" />
+    <option name="cucumberJsArguments" value="--config config/cucumber/cucumber.json  --parallel 1 --tags @audio" />
+    <option name="workingDirectory" value="$PROJECT_DIR$" />
+    <envs>
+      <env name="NODE_OPTIONS" value="--import tsx/esm" />
+    </envs>
+    <method v="2" />
+  </configuration>
+</component>
diff --git a/.run/Game Lobby Confirm Dialog.run.xml b/.run/Game Lobby Confirm Dialog.run.xml
@@ -0,0 +1,12 @@
+<component name="ProjectRunConfigurationManager">
+  <configuration default="false" name="Game Lobby Confirm Dialog" type="cucumber.js" factoryName="Cucumber.js" folderName="Tags">
+    <option name="myFilePath" value="$PROJECT_DIR$/tests/acceptance" />
+    <option name="myNameFilter" value="" />
+    <option name="cucumberJsArguments" value="--config config/cucumber/cucumber.json  --parallel 1 --tags @game-lobby-confirm-dialog" />
+    <option name="workingDirectory" value="$PROJECT_DIR$" />
+    <envs>
+      <env name="NODE_OPTIONS" value="--import tsx/esm" />
+    </envs>
+    <method v="2" />
+  </configuration>
+</component>
diff --git a/.run/Scapegoat Role.run.xml b/.run/Scapegoat Role.run.xml
@@ -0,0 +1,12 @@
+<component name="ProjectRunConfigurationManager">
+  <configuration default="false" name="Scapegoat Role" type="cucumber.js" factoryName="Cucumber.js" folderName="Tags">
+    <option name="myFilePath" value="$PROJECT_DIR$/tests/acceptance" />
+    <option name="myNameFilter" value="" />
+    <option name="cucumberJsArguments" value="--config config/cucumber/cucumber.json  --parallel 1 --tags @scapegoat-role" />
+    <option name="workingDirectory" value="$PROJECT_DIR$" />
+    <envs>
+      <env name="NODE_OPTIONS" value="--import tsx/esm" />
+    </envs>
+    <method v="2" />
+  </configuration>
+</component>
diff --git a/.run/Typecheck.run.xml b/.run/Typecheck.run.xml
@@ -0,0 +1,13 @@
+<component name="ProjectRunConfigurationManager">
+  <configuration default="false" name="Typecheck" type="js.build_tools.npm">
+    <package-json value="$PROJECT_DIR$/package.json" />
+    <command value="run" />
+    <scripts>
+      <script value="typecheck" />
+    </scripts>
+    <node-interpreter value="project" />
+    <package-manager value="pnpm" />
+    <envs />
+    <method v="2" />
+  </configuration>
+</component>
diff --git a/Dockerfile b/Dockerfile
@@ -1,4 +1,4 @@
-FROM node:22.8.0-alpine AS build
+FROM node:22.9.0-alpine AS build
 
 ENV PNPM_HOME="/pnpm"
 ENV PATH="$PNPM_HOME:$PATH"
@@ -33,7 +33,7 @@ RUN npm run build
 
 RUN pnpm prune --prod
 
-FROM node:22.8.0-alpine AS production
+FROM node:22.9.0-alpine AS production
 
 ENV PNPM_HOME="/pnpm"
 ENV PATH="$PNPM_HOME:$PATH"

diff --git a/app/app.vue b/app/app.vue
@@ -1,22 +1,33 @@
 <template>
-  <NuxtLayout>
-    <NuxtPage
-      class="h-full md:p-2 p-4"
+  <div class="h-full">
+    <NuxtRouteAnnouncer/>
+
+    <NuxtLayout>
+      <NuxtPage
+        class="h-full md:p-2 p-4"
+      />
+    </NuxtLayout>
+
+    <PrimeVueToast
+      class="!max-w-x-screen-9/10"
+      position="bottom-right"
     />
 
-    <PrimeVueToast position="bottom-right"/>
-
     <NuxtPwaManifest/>
-  </NuxtLayout>
+  </div>
 </template>
 
 <script lang="ts" setup>
 import "reflect-metadata";
+import { useAudioStore } from "~/stores/audio/useAudioStore";
 
 import { useRolesStore } from "~/stores/role/useRolesStore";
 
 const rolesStore = useRolesStore();
 
+const audioStore = useAudioStore();
+const { setHowlerAudioSettingsFromAudioStoreState } = audioStore;
+
 const { t } = useI18n();
 
 useHead({
@@ -33,6 +44,7 @@ useHead({
 });
 
 void rolesStore.fetchAndSetRoles();
+setHowlerAudioSettingsFromAudioStoreState();
 </script>
 
 <style lang="scss" scoped>

diff --git a/app/components/layouts/default/NavBar/MuteButton/MuteButton.vue b/app/components/layouts/default/NavBar/MuteButton/MuteButton.vue
@@ -37,18 +37,31 @@ const soundLottie = ref<InstanceType<typeof Vue3Lottie> | null>(null);
 
 const tooltipText = computed<string>(() => (isMuted.value ? t("components.MuteButton.unmute") : t("components.MuteButton.mute")));
 
-function onClickFromMuteButton(): void {
+function animateSoundLottie(animationDirection: "reverse" | "forward"): void {
   if (!soundLottie.value) {
     throw createError("Sound Lottie is not initialized");
   }
   const firstMuteSegmentFrame = 0;
   const lastMuteSegmentFrame = 30;
   const firstUnmuteSegmentFrame = 60;
   const lastUnmuteSegmentFrame = 90;
-  const animationDirection = isMuted.value ? "reverse" : "forward";
-  const segment: AnimationSegment = isMuted.value ? [firstUnmuteSegmentFrame, lastUnmuteSegmentFrame] : [firstMuteSegmentFrame, lastMuteSegmentFrame];
+  const segment: AnimationSegment = animationDirection === "reverse" ? [firstUnmuteSegmentFrame, lastUnmuteSegmentFrame] : [firstMuteSegmentFrame, lastMuteSegmentFrame];
   soundLottie.value.setDirection(animationDirection);
   soundLottie.value.playSegments([segment], true);
+}
+
+function onClickFromMuteButton(): void {
+  const animationDirection = isMuted.value ? "reverse" : "forward";
+  animateSoundLottie(animationDirection);
   toggleMute();
 }
+
+onMounted(() => {
+  if (isMuted.value) {
+    const animationDelay = 10;
+    setTimeout(() => {
+      animateSoundLottie("forward");
+    }, animationDelay);
+  }
+});
 </script>
diff --git a/app/components/pages/about/AboutAvailableRoles/AboutAvailableRoles.vue b/app/components/pages/about/AboutAvailableRoles/AboutAvailableRoles.vue
@@ -16,49 +16,58 @@
 
     <PrimeVueDivider/>
 
-    <div
-      v-if="!roles"
-      id="loading-roles-container"
-      class="flex flex-col items-center justify-center"
+    <ClientOnly
+      :fallback="$t('components.AboutAvailableRoles.loadingRoles')"
+      fallback-tag="span"
     >
-      <TextProgressSpinner
-        id="loading-roles-spinner"
-        :text="$t('components.AboutAvailableRoles.loadingRoles')"
-      />
-    </div>
+      <div
+        v-if="!roles"
+        id="loading-roles-container"
+        class="flex flex-col items-center justify-center"
+      >
+        <TextProgressSpinner
+          id="loading-roles-spinner"
+          :text="$t('components.AboutAvailableRoles.loadingRoles')"
+        />
+      </div>
 
-    <div v-else>
-      <p id="about-available-roles-first-section">
-        {{ availableRolesText }}
-      </p>
+      <div v-else>
+        <p id="about-available-roles-first-section">
+          {{ availableRolesText }}
+        </p>
 
-      <PrimeVueAccordion
-        class="w-full"
-        multiple
-      >
-        <PrimeVueAccordionTab
-          v-for="role in roles"
-          :key="role.name"
-          :pt="{ 'headerAction': { 'aria-label': getAvailableRoleAccordionHeaderAriaLabel(role.name) } }"
+        <PrimeVueAccordion
+          class="w-full"
+          multiple
         >
-          <template #header>
-            <div class="available-role-image-header flex items-center">
-              <RoleImage
-                :alt="getAvailableRoleHeaderImageAlt(role.name)"
-                :role-name="role.name"
-                sizes="40"
-              />
+          <PrimeVueAccordionPanel
+            v-for="role in roles"
+            :key="role.name"
+            :value="role.name"
+          >
+            <PrimeVueAccordionHeader
+              :aria-label="getAvailableRoleAccordionHeaderAriaLabel(role.name)"
+            >
+              <div class="available-role-image-header flex items-center">
+                <RoleImage
+                  :alt="getAvailableRoleHeaderImageAlt(role.name)"
+                  :role-name="role.name"
+                  sizes="40"
+                />
 
-              <div class="ms-2">
-                {{ getRoleNameLabel(role.name) }}
+                <div class="ms-2">
+                  {{ getRoleNameLabel(role.name) }}
+                </div>
               </div>
-            </div>
-          </template>
+            </PrimeVueAccordionHeader>
 
-          <AboutAvailableRoleDescription :role="role"/>
-        </PrimeVueAccordionTab>
-      </PrimeVueAccordion>
-    </div>
+            <PrimeVueAccordionContent>
+              <AboutAvailableRoleDescription :role="role"/>
+            </PrimeVueAccordionContent>
+          </PrimeVueAccordionPanel>
+        </PrimeVueAccordion>
+      </div>
+    </ClientOnly>
   </div>
 </template>
 

diff --git a/...Manager/RecipientRoleAdditionalCardsDisclaimer/RecipientRoleAdditionalCardsDisclaimer.vue b/...Manager/RecipientRoleAdditionalCardsDisclaimer/RecipientRoleAdditionalCardsDisclaimer.vue
@@ -6,7 +6,7 @@
     >
       <h4
         :key="recipientRoleAdditionalCardsDisclaimerAndIcon.disclaimer"
-        class="mb-8 text-center"
+        class="mb-4 md:mb-8 text-center"
       >
         <FontAwesomeIcon
           id="recipient-role-additional-cards-disclaimer-icon"

diff --git a/...anagerContent/RecipientRoleAdditionalCardsManager/RecipientRoleAdditionalCardsManager.vue b/...anagerContent/RecipientRoleAdditionalCardsManager/RecipientRoleAdditionalCardsManager.vue
@@ -1,7 +1,7 @@
 <template>
   <PrimeVueFieldset
     :id="`role-additional-cards-manager-${recipientRoleName}`"
-    :pt="{ 'legend': 'ml-4 !p-3 !px-6' }"
+    :pt="{ 'legend': FIELD_SETS_LEGEND_CLASSES }"
   >
     <template #legend>
       <GameOptionRoleLegend :role-name="recipientRoleName"/>
@@ -19,7 +19,7 @@
 
     <div
       id="recipient-role-additional-cards-placement"
-      class="flex font-semibold h-6 items-center justify-center mt-3"
+      class="flex font-semibold items-center justify-center mt-3"
     >
       <span v-if="additionalCardsPlacementText">
         <FontAwesomeIcon
@@ -41,6 +41,7 @@ import type { RecipientRoleAdditionalCardsManagerProps } from "~/components/page
 import RecipientRoleAdditionalCardsDisclaimer from "~/components/pages/game-lobby/GameLobbyAdditionalCardsManager/GameLobbyAdditionalCardsManagerContent/RecipientRoleAdditionalCardsManager/RecipientRoleAdditionalCardsDisclaimer/RecipientRoleAdditionalCardsDisclaimer.vue";
 import RecipientRoleAdditionalCardsMultiSelect from "~/components/pages/game-lobby/GameLobbyAdditionalCardsManager/GameLobbyAdditionalCardsManagerContent/RecipientRoleAdditionalCardsManager/RecipientRoleAdditionalCardsMultiSelect/RecipientRoleAdditionalCardsMultiSelect.vue";
 import GameOptionRoleLegend from "~/components/shared/game/game-options/GameOptionRoleLegend/GameOptionRoleLegend.vue";
+import { FIELD_SETS_LEGEND_CLASSES } from "~/components/shared/inputs/field-sets/field-sets.constants";
 import { useCreateGameDtoStore } from "~/stores/game/create-game-dto/useCreateGameDtoStore";
 
 const props = defineProps<RecipientRoleAdditionalCardsManagerProps>();

diff --git a/...nager/RecipientRoleAdditionalCardsMultiSelect/RecipientRoleAdditionalCardsMultiSelect.vue b/...nager/RecipientRoleAdditionalCardsMultiSelect/RecipientRoleAdditionalCardsMultiSelect.vue
@@ -16,8 +16,9 @@
       :options="availableAdditionalCards"
       :placeholder="$t('components.RecipientRoleAdditionalCardsMultiSelect.pickOneToFiveCards')"
       :pt="{
-        'labelContainer': 'flex justify-center items-center h-20',
-        'chipItem': 'flex items-center bg-gray-800 rounded gap-2 px-2 py-1'
+        'labelContainer': 'flex justify-center items-center md:h-20',
+        'chipItem': 'flex items-center bg-gray-800 rounded md:gap-2 md:px-2 md:py-1',
+        'chipIcon': '!p-1 !w-2'
       }"
       reset-filter-on-hide
       :selection-limit="5"
@@ -40,14 +41,17 @@
 
       <template #chip="{ value }">
         <RoleImage
+          definition="small"
           :role-name="value.roleName"
-          size="small"
+          :sizes="roleImageSizes"
         />
 
-        <span>{{ value.label }}</span>
+        <span class="hidden lg:inline">
+          {{ value.label }}
+        </span>
 
         <PrimeVueButton
-          class="p-button-rounded p-button-sm p-button-text remove-additional-card-button"
+          class="!hidden md:!inline p-button-rounded p-button-sm p-button-text remove-additional-card-button"
           :data-testid="`recipient-role-additional-cards-multi-select-remove-${value.roleName}-for-${recipientRoleName}`"
           @click.stop="onClickFromRemoveAdditionalCardButton(value)"
         >
@@ -62,6 +66,7 @@
 
 <script setup lang="ts">
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { breakpointsTailwind, useBreakpoints } from "@vueuse/core";
 import { storeToRefs } from "pinia";
 import type { LabeledCreateGameAdditionalCardDto, RecipientRoleAdditionalCardsMultiSelectProps } from "~/components/pages/game-lobby/GameLobbyAdditionalCardsManager/GameLobbyAdditionalCardsManagerContent/RecipientRoleAdditionalCardsManager/RecipientRoleAdditionalCardsMultiSelect/recipient-role-additional-cards-multi-select.types";
 import RoleImage from "~/components/shared/role/RoleImage/RoleImage.vue";
@@ -70,9 +75,13 @@ import type { RoleName } from "~/composables/api/role/types/role.types";
 import { useRoleName } from "~/composables/api/role/useRoleName";
 import { useCreateGameDtoStore } from "~/stores/game/create-game-dto/useCreateGameDtoStore";
 import { useRolesStore } from "~/stores/role/useRolesStore";
+import { BreakpointTypes } from "~/utils/enums/breakpoint.enums";
 
 const props = defineProps<RecipientRoleAdditionalCardsMultiSelectProps>();
 
+const breakpoints = useBreakpoints(breakpointsTailwind);
+const isSmallerThanMd = breakpoints.smaller(BreakpointTypes.MD);
+
 const createGameDtoStore = useCreateGameDtoStore();
 const { getAdditionalCardsForRecipientInCreateGameDto } = createGameDtoStore;
 const { createGameDto } = storeToRefs(createGameDtoStore);
@@ -81,6 +90,8 @@ const rolesStore = useRolesStore();
 const { getRolesForRecipientRoleName } = rolesStore;
 const { getRoleNameLabel } = useRoleName();
 
+const roleImageSizes = computed<string>(() => (isSmallerThanMd.value ? "35px" : "50px"));
+
 const selectedAdditionalCards = computed<CreateGameAdditionalCardDto[]>({
   get: () => getAdditionalCardsForRecipientInCreateGameDto(props.recipientRoleName),
   set: (value: CreateGameAdditionalCardDto[]) => {