feat(game): player dies event

components/pages/game/GamePlaying/GameEventsMonitor/GameEventsMonitorCurrentEvent/GameEventsMonitorCurrentEvent.vue

@@ -13,6 +13,7 @@
         id="game-events-monitor-current-event"
         :key="currentGameEventIndex"
         class="h-full"
+        :event="currentGameEvent"
       />
     </transition>
   </div>
@@ -22,6 +23,7 @@
 import { storeToRefs } from "pinia";
 import type { GameEventsMonitorEventTypeComponent } from "~/components/pages/game/GamePlaying/GameEventsMonitor/GameEventsMonitorCurrentEvent/game-events-monitor-current-event.types";
 import GamePhaseStartsEvent from "~/components/pages/game/GamePlaying/GameEventsMonitor/GameEventsMonitorCurrentEvent/GamePhaseStartsEvent/GamePhaseStartsEvent.vue";
+import GamePlayerDiesEvent from "~/components/pages/game/GamePlaying/GameEventsMonitor/GameEventsMonitorCurrentEvent/GamePlayerDiesEvent/GamePlayerDiesEvent.vue";
 import GameStartsEvent from "~/components/pages/game/GamePlaying/GameEventsMonitor/GameEventsMonitorCurrentEvent/GameStartsEvent/GameStartsEvent.vue";
 import GameTurnStartsEvent from "~/components/pages/game/GamePlaying/GameEventsMonitor/GameEventsMonitorCurrentEvent/GameTurnStartsEvent/GameTurnStartsEvent.vue";
 import type { GameEventType } from "~/stores/game/game-event/types/game-event.types";
@@ -35,6 +37,7 @@ const currentGameEventTypeComponent = computed<GameEventsMonitorEventTypeCompone
     "game-starts": GameStartsEvent,
     "game-phase-starts": GamePhaseStartsEvent,
     "game-turn-starts": GameTurnStartsEvent,
+    "player-dies": GamePlayerDiesEvent,
   };
   if (!currentGameEvent.value) {
     return undefined;

components/pages/game/GamePlaying/GameEventsMonitor/GameEventsMonitorCurrentEvent/GamePlayerDiesEvent/GamePlayerDiesEvent.vue

@@ -0,0 +1,48 @@
+<template>
+  <GameEventWithTexts
+    id="game-player-dies-event"
+    :texts="gamePlayerDiesEventTexts"
+  >
+    <div class="flex h-full items-center justify-center">
+      <GameEventFlippingPlayerCard
+        v-if="deadPlayer"
+        id="game-event-flipping-player-card"
+        image-classes="grayscale"
+        :players="[deadPlayer]"
+        svg-icon-path="/svg/game/player/dead.svg"
+      />
+    </div>
+  </GameEventWithTexts>
+</template>
+
+<script setup lang="ts">
+import { storeToRefs } from "pinia";
+import type { GamePlayerDiesEventProps } from "~/components/pages/game/GamePlaying/GameEventsMonitor/GameEventsMonitorCurrentEvent/GamePlayerDiesEvent/game-player-dies-event.types";
+import GameEventFlippingPlayerCard from "~/components/shared/game/game-event/GameEventFlippingPlayerCard/GameEventFlippingPlayerCard.vue";
+import GameEventWithTexts from "~/components/shared/game/game-event/GameEventWithTexts/GameEventWithTexts.vue";
+import type { Player } from "~/composables/api/game/types/players/player.class";
+import { useGameStore } from "~/stores/game/useGameStore";
+
+const props = defineProps<GamePlayerDiesEventProps>();
+
+const { t } = useI18n();
+
+const gameStore = useGameStore();
+const { game } = storeToRefs(gameStore);
+
+const areRolesRevealedOnDeath = computed<boolean>(() => game.value.options.roles.areRevealedOnDeath);
+
+const deadPlayer = computed<Player | undefined>(() => props.event.players?.[0]);
+
+const gamePlayerDiesEventTexts = computed<string[]>(() => {
+  if (!deadPlayer.value) {
+    return [t("components.GamePlayerDiesEvent.cantFindDeadPlayer")];
+  }
+  const roleRevealTKey = areRolesRevealedOnDeath.value ? "components.GamePlayerDiesEvent.playerCanRevealRole" : "components.GamePlayerDiesEvent.playerDoesntRevealRole";
+
+  return [
+    t("components.GamePlayerDiesEvent.playerDies", { playerName: deadPlayer.value.name }),
+    t(roleRevealTKey),
+  ];
+});
+</script>

components/pages/game/GamePlaying/GameEventsMonitor/GameEventsMonitorCurrentEvent/GamePlayerDiesEvent/game-player-dies-event.types.ts

@@ -0,0 +1,7 @@
+import type { GameEvent } from "~/stores/game/game-event/types/game-event.class";
+
+type GamePlayerDiesEventProps = {
+  event: GameEvent;
+};
+
+export type { GamePlayerDiesEventProps };

components/pages/game/GamePlaying/GameEventsMonitor/GameEventsMonitorCurrentEvent/game-events-monitor-current-event.types.ts

@@ -1,10 +1,9 @@
 import type GamePhaseStartsEvent from "~/components/pages/game/GamePlaying/GameEventsMonitor/GameEventsMonitorCurrentEvent/GamePhaseStartsEvent/GamePhaseStartsEvent.vue";
+import type GamePlayerDiesEvent from "~/components/pages/game/GamePlaying/GameEventsMonitor/GameEventsMonitorCurrentEvent/GamePlayerDiesEvent/GamePlayerDiesEvent.vue";
 import type GameStartsEvent from "~/components/pages/game/GamePlaying/GameEventsMonitor/GameEventsMonitorCurrentEvent/GameStartsEvent/GameStartsEvent.vue";
 import type GameTurnStartsEvent from "~/components/pages/game/GamePlaying/GameEventsMonitor/GameEventsMonitorCurrentEvent/GameTurnStartsEvent/GameTurnStartsEvent.vue";
 
 type GameEventsMonitorEventTypeComponent =
-  | typeof GamePhaseStartsEvent
-  | typeof GameStartsEvent
-  | typeof GameTurnStartsEvent;
+  typeof GamePhaseStartsEvent | typeof GamePlayerDiesEvent | typeof GameStartsEvent | typeof GameTurnStartsEvent;
 
 export type { GameEventsMonitorEventTypeComponent };

components/shared/game/game-event/GameEventFlippingPlayerCard/GameEventFlippingPlayerCard.vue

@@ -1,12 +1,16 @@
 <template>
-  <div id="game-event-flipping-player-card">
+  <div
+    id="game-event-flipping-player-card"
+    class="flex flex-col items-center"
+  >
     <RoleFlippingImage
       id="game-event-flipping-player-role"
       :alt="alt"
       :class="imageClasses"
       definition="normal"
       :role-name="playerToDisplay?.role.current"
       sizes="200px"
+      :svg-icon-path="props.svgIconPath"
     />
 
     <transition

components/shared/role/RoleImage/RoleFlippingImage/RoleFlippingImage.vue

@@ -15,6 +15,12 @@
         :role-name="frontRoleName"
         :sizes="sizes"
       />
+
+      <RoleFlippingImageSvgIcon
+        v-if="svgIconPath"
+        id="front-role-image-svg-icon"
+        :svg-icon-path="svgIconPath"
+      />
     </template>
 
     <template #back>
@@ -26,12 +32,19 @@
         :role-name="backRoleName"
         :sizes="sizes"
       />
+
+      <RoleFlippingImageSvgIcon
+        v-if="svgIconPath"
+        id="back-role-image-svg-icon"
+        :svg-icon-path="svgIconPath"
+      />
     </template>
   </VueFlip>
 </template>
 
 <script setup lang="ts">
 import type { RoleFlippingImageProps } from "~/components/shared/role/RoleImage/RoleFlippingImage/role-flipping-image.types";
+import RoleFlippingImageSvgIcon from "~/components/shared/role/RoleImage/RoleFlippingImage/RoleFlippingImageSvgIcon/RoleFlippingImageSvgIcon.vue";
 import RoleImage from "~/components/shared/role/RoleImage/RoleImage.vue";
 import type { RoleName } from "~/composables/api/role/types/role.types";
 

components/shared/role/RoleImage/RoleFlippingImage/RoleFlippingImageSvgIcon/RoleFlippingImageSvgIcon.vue

@@ -0,0 +1,18 @@
+<template>
+  <NuxtImg
+    id="role-flipping-image-svg-icon"
+    :alt="$t('components.RoleFlippingImageSvgIcon.iconAlt')"
+    class="absolute animate__bounceIn bottom-4 right-2"
+    :height="svgSize"
+    :src="svgIconPath"
+    :width="svgSize"
+  />
+</template>
+
+<script setup lang="ts">
+import type { RoleFlippingImageSvgIconProps } from "~/components/shared/role/RoleImage/RoleFlippingImage/RoleFlippingImageSvgIcon/role-flipping-image-svg-icon.types";
+
+defineProps<RoleFlippingImageSvgIconProps>();
+
+const svgSize = "75";
+</script>

components/shared/role/RoleImage/RoleFlippingImage/RoleFlippingImageSvgIcon/role-flipping-image-svg-icon.types.ts

@@ -0,0 +1,5 @@
+type RoleFlippingImageSvgIconProps = {
+  svgIconPath: string;
+};
+
+export type { RoleFlippingImageSvgIconProps };

components/shared/role/RoleImage/RoleFlippingImage/role-flipping-image.types.ts

@@ -2,6 +2,7 @@ import type { RoleImageProps } from "~/components/shared/role/RoleImage/role-ima
 
 type RoleFlippingImageProps = RoleImageProps & {
   imageClasses?: string;
+  svgIconPath?: string;
 };
 
 export type { RoleFlippingImageProps };

modules/i18n/locales/en.json

@@ -1248,6 +1248,15 @@
     "GamePhaseStartsEvent": {
       "dayRises": "The day rises in the village of the Millers Hollow !",
       "nightFalls": "The night falls in the village of the Millers Hollow…"
+    },
+    "GamePlayerDiesEvent": {
+      "cantFindDeadPlayer": "The Assistant can't find the dead player… Please proceed.",
+      "playerDies": "{playerName} is dead ! What a tragedy…",
+      "playerCanRevealRole": "He or she can reveal his role to the others.",
+      "playerDoesntRevealRole": "In this special game, the role of the dead player is not revealed to the others. The mystery remains…"
+    },
+    "RoleFlippingImageSvgIcon": {
+      "iconAlt": "Role icon"
     }
   }
 }

modules/i18n/locales/fr.json

@@ -1248,6 +1248,15 @@
     "GamePhaseStartsEvent": {
       "dayRises": "Le jour se lève sur le village de Thiercelieux !",
       "nightFalls": "La nuit tombe sur le village de Thiercelieux…"
+    },
+    "GamePlayerDiesEvent": {
+      "cantFindDeadPlayer": "L'Assistant ne trouve pas le joueur mort… Veuillez continuer.",
+      "playerDies": "{playerName} est mort ! Quelle tragédie…",
+      "playerCanRevealRole": "Il ou elle peut révéler son rôle aux autres.",
+      "playerDoesntRevealRole": "Dans cette spéciale, le rôle du joueur mort n'est pas révélé aux autres. Le mystère demeure…"
+    },
+    "RoleFlippingImageSvgIcon": {
+      "iconAlt": "Icône associé au rôle"
     }
   }
 }

nuxt.config.ts

@@ -36,6 +36,7 @@ export default defineNuxtConfig({
     "@fortawesome/fontawesome-free/css/all.css",
     "./assets/scss/custom.scss",
     "./assets/css/google-fonts.css",
+    "animate.css/animate.min.css",
   ],
   devtools: { enabled: true },
   experimental: { renderJsonPayloads: false },

package.json

@@ -139,6 +139,7 @@
   },
   "dependencies": {
     "@fortawesome/fontawesome-free": "^6.5.2",
+    "animate.css": "^4.1.1",
     "is-ci": "^3.0.1",
     "primevue": "^3.52.0"
   },
@@ -150,4 +151,4 @@
     "linux"
   ],
   "packageManager": "pnpm@9.0.6+sha512.f6d863130973207cb7a336d6b439a242a26ac8068077df530d6a86069419853dc1ffe64029ec594a9c505a3a410d19643c870aba6776330f5cfddcf10a9c1617"
-}
+}