feat(game): all game screens are responsive (#880)

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

- **New Features**
- Enhanced responsiveness of various game components for better
usability across different screen sizes.
  
- **Bug Fixes**
- Improved layout and presentation of game options and player cards on
smaller devices.

- **Documentation**
- Added computed properties for dynamic image sizing and responsive
design adjustments.

- **Chores**
- Minor updates to CSS classes for improved adaptability and visual
spacing.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

app/components/pages/game-lobby/GameLobbyFooter/GameLobbyStartGameButton/GameLobbyStartGameConfirmDialog/GameLobbyStartGameConfirmDialog.vue

@@ -2,7 +2,7 @@
   <PrimeVueConfirmDialog
     id="game-lobby-start-game-confirm-dialog"
     group="game-lobby-start-game-confirm-dialog"
-    :pt="{ 'root': 'w-1/3' }"
+    :pt="{ 'root': 'md:w-1/2 lg:w-1/3 w-full' }"
   >
     <template #container="{ acceptCallback, rejectCallback }">
       <GameLobbyStartGameConfirmDialogContainer

app/components/pages/game-lobby/GameLobbyFooter/GameLobbyStartGameButton/GameLobbyStartGameConfirmDialog/GameLobbyStartGameConfirmDialogContainer/GameLobbyStartGameConfirmDialogContent/GameLobbyStartGameConfirmDialogGameOptionsChanged/ChangedGameOptionsList/ChangedGameOptionsList.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="changed-game-options-list">
-    <ul class="max-h-64 overflow-y-scroll px-1">
+    <ul class="max-h-40 md:max-h-64 overflow-y-scroll px-1">
       <li
         v-for="gameOptionText in changedGameOptionsTexts"
         :key="gameOptionText"

app/components/pages/game/GamePlaying/GamePlayground/GamePlaygroundContent/GameChooseCardPlayground/GameChooseCardPlayground.vue

@@ -5,7 +5,7 @@
         v-for="additionalCard in eligibleAdditionalCardsToChoose"
         :key="additionalCard._id"
         :additional-card="additionalCard"
-        class="flex game-additional-card justify-center w-1/5"
+        class="flex game-additional-card justify-center md:w-1/5 w-full"
         @click-additional-card="onClickFromAdditionalCardButton"
       />
     </GlowCapture>

app/components/pages/game/GamePlaying/GamePlayground/GamePlaygroundContent/GameChooseCardPlayground/GameChooseCardPlaygroundAdditionalCard/GameChooseCardPlaygroundAdditionalCard.vue

@@ -14,7 +14,7 @@
         :class="additionalCardsRoleImageClasses"
         definition="normal"
         :role-name="additionalCard.roleName"
-        sizes="125"
+        :sizes="additionalCardImageSizes"
       />
 
       <span
@@ -28,17 +28,24 @@
 </template>
 
 <script setup lang="ts">
+import { breakpointsTailwind, useBreakpoints } from "@vueuse/core";
 import type { GameChooseCardPlaygroundAdditionalCardEmits, GameChooseCardPlaygroundAdditionalCardProps } from "~/components/pages/game/GamePlaying/GamePlayground/GamePlaygroundContent/GameChooseCardPlayground/GameChooseCardPlaygroundAdditionalCard/game-choose-card-playground-additional-card.types";
 import RoleImage from "~/components/shared/role/RoleImage/RoleImage.vue";
 import { useRoleName } from "~/composables/api/role/useRoleName";
 import { useStrings } from "~/composables/misc/useStrings";
 import { useMakeGamePlayDtoStore } from "~/stores/game/make-game-play-dto/useMakeGamePlayDtoStore";
 import { useRolesStore } from "~/stores/role/useRolesStore";
+import { BreakpointTypes } from "~/utils/enums/breakpoint.enums";
 
 const props = defineProps<GameChooseCardPlaygroundAdditionalCardProps>();
 
 const emit = defineEmits<GameChooseCardPlaygroundAdditionalCardEmits>();
 
+const breakpoints = useBreakpoints(breakpointsTailwind);
+const isSmallerThanMd = breakpoints.smaller(BreakpointTypes.MD);
+
+const additionalCardImageSizes = computed<string>(() => (isSmallerThanMd.value ? "75" : "125"));
+
 const { makeGamePlayDto } = useMakeGamePlayDtoStore();
 
 const rolesStore = useRolesStore();

app/components/pages/game/GamePlaying/GamePlayground/GamePlaygroundContent/GameTargetPlayground/GameTargetPlaygroundTargets/GameTargetPlaygroundTargets.vue

@@ -23,7 +23,7 @@
       <GamePlaygroundPlayerCard
         v-for="target in targets"
         :key="target._id"
-        class="p-3 target w-3/12"
+        class="md:w-3/12 p-3 target w-4/12"
         :interaction="game.currentPlay?.source.interactions?.[0].type"
         :player="target"
       />

app/components/pages/game/GamePlaying/GamePlayground/GamePlaygroundContent/GameUsePotionsPlayground/WitchUsePotionsTabView/WitchUsePotionsTabView.vue

@@ -1,15 +1,20 @@
 <template>
   <PrimeVueTabs
     id="witch-use-potions-tab-view"
+    :pt="{ 'nav': '!border-none' }"
+    scrollable
     :value="tabViewActiveIndex"
   >
     <PrimeVueTabList
       class="w-full"
-      :pt="{ 'content': '!w-full' }"
+      :pt="{
+        'content': '!w-full !h-full',
+        'root': '!w-full !overflow-clip'
+      }"
     >
       <PrimeVueTab
         id="life-potion-tab"
-        class="flex gap-2 items-center w-1/2"
+        class="flex gap-2 items-center md:!w-1/2"
         :disabled="hasWitchUsedLifePotion"
         value="life-potion"
       >
@@ -28,7 +33,7 @@
 
       <PrimeVueTab
         id="death-potion-tab"
-        class="flex gap-2 items-center w-1/2"
+        class="flex gap-2 items-center md:w-1/2"
         :disabled="hasWitchUsedDeathPotion"
         value="death-potion"
       >
@@ -46,10 +51,7 @@
       </PrimeVueTab>
     </PrimeVueTabList>
 
-    <PrimeVueTabPanels
-      class="h-full"
-      :value="tabViewActiveIndex"
-    >
+    <PrimeVueTabPanels :value="tabViewActiveIndex">
       <PrimeVueTabPanel
         id="give-life-potion-panel"
         class="!h-full flex flex-wrap grow items-center justify-center m-0 place-content-center place-items-center"
@@ -66,13 +68,13 @@
 
       <PrimeVueTabPanel
         id="give-death-potion-panel"
-        class="!h-full flex flex-wrap items-center justify-center m-0 place-content-center place-items-center"
+        class="flex flex-wrap items-center justify-center m-0 place-content-center place-items-center"
         value="death-potion"
       >
         <GamePlaygroundPlayerCard
           v-for="target in giveDeathPotionInteractionEligibleTargets"
           :key="target._id"
-          class="death-potion-target p-3 w-1/4"
+          class="death-potion-target md:w-1/4 p-3 w-1/3"
           interaction="give-death-potion"
           :player="target"
         />

app/components/pages/game/GamePlaying/GamePlayground/GamePlaygroundContent/GameVotePlayground/GameVotePlaygroundVoters/GameVotePlaygroundVoters.vue

@@ -23,7 +23,7 @@
       <GamePlaygroundPlayerCard
         v-for="voter in voters"
         :key="voter._id"
-        class="p-3 voter w-1/3"
+        class="md:w-1/3 p-3 voter w-1/2"
         :player="voter"
       />
     </div>

app/components/pages/game/GamePlaying/GamePlayground/GamePlaygroundFooter/GamePlaygroundFooter.vue

@@ -4,19 +4,19 @@
   >
     <PrimeVueDivider class="!my-2"/>
 
-    <div class="flex justify-center">
-      <div class="w-4/12">
+    <div class="flex gap-2 items-center justify-center">
+      <div class="md:w-4/12 w-3/12">
         <GamePlaygroundFooterCountdown
           v-if="doesCurrentGamePlayHaveCountdown"
           id="game-playground-footer-countdown"
         />
       </div>
 
-      <div class="w-4/12">
+      <div class="md:w-4/12 w-6/12">
         <GamePlaygroundFooterMakePlayButton/>
       </div>
 
-      <div class="w-4/12"/>
+      <div class="md:w-4/12 w-3/12"/>
     </div>
   </div>
 </template>

app/components/pages/game/GamePlaying/GamePlayground/GamePlaygroundFooter/GamePlaygroundFooterCountdown/GamePlaygroundFooterCountdown.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     id="game-playground-footer-countdown"
-    class="flex flex-col h-full items-center justify-center"
+    class="flex flex-col gap-2 h-full items-center justify-center"
   >
     <Transition
       mode="out-in"
@@ -10,14 +10,16 @@
       <div
         v-if="isCountdownOver"
         id="countdown-over"
-        class="animate__animated animate__heartBeat animate__infinite animate__slower flex gap-2 items-center justify-center"
+        class="animate__animated animate__heartBeat animate__infinite animate__slower flex flex-col gap-2 items-center justify-center md:flex-row"
       >
         <FontAwesomeIcon
-          class="me-2"
           icon="clock"
         />
 
-        <span id="countdown-over-text">
+        <span
+          id="countdown-over-text"
+          class="md:text-base text-center text-pretty text-sm"
+        >
           {{ currentGamePlayCountdownIsOverText }}
         </span>
       </div>

app/components/pages/game/GamePlaying/GamePlayground/GamePlaygroundHeader/GamePlaygroundHeader.vue

@@ -2,12 +2,12 @@
   <div
     id="game-playground-header"
   >
-    <div class="flex items-center">
-      <GamePlaygroundHeaderPhase class="w-3/12"/>
+    <div class="flex gap-2 items-center justify-between">
+      <GamePlaygroundHeaderPhase class="w-2/12"/>
 
       <GamePlaygroundHeaderCurrentPlay class="w-6/12"/>
 
-      <GamePlaygroundHeaderCard class="w-3/12"/>
+      <GamePlaygroundHeaderCard class="w-2/12"/>
     </div>
 
     <PrimeVueDivider class="!my-3"/>

app/components/pages/game/GamePlaying/GamePlayground/GamePlaygroundHeader/GamePlaygroundHeaderCurrentPlay/GamePlaygroundHeaderCurrentPlay.vue

@@ -7,7 +7,6 @@
       <NuxtImg
         v-if="currentPlaySvgAndTextKey"
         :alt="$t(`components.GamePlaygroundHeaderCurrentPlay.currentPlayAltText`)"
-        class="me-3"
         height="50"
         placeholder="/svg/misc/infinite-spinner.svg"
         :src="currentPlaySvgAndTextKey.svgPath"
@@ -17,7 +16,7 @@
 
     <h2
       id="current-play-text"
-      class="text-center"
+      class="!text-base md:!text-2xl text-center"
     >
       {{ currentPlayText }}
     </h2>

app/components/pages/game/GamePlaying/GamePlayground/GamePlaygroundHeader/GamePlaygroundHeaderPhase/GamePlaygroundHeaderPhase.vue

@@ -1,17 +1,17 @@
 <template>
   <div
     id="game-playground-header-phase"
-    class="flex items-center"
+    class="flex flex-col gap-2 items-center md:flex-row"
     data-testid="game-playground-header-phase"
   >
     <GamePhaseIcon
-      class="fa-2x me-3"
+      class="md:text-3xl"
       :phase="game.phase.name"
     />
 
     <span
       id="game-phase-text"
-      class="text-2xl"
+      class="!text-nowrap md:text-2xl text-center text-xs"
     >
       {{ getGamePhaseWithTurnText(game.phase.name, game.turn) }}
     </span>

app/components/pages/game/GamePlaying/GamePlaying.vue

@@ -4,12 +4,12 @@
     class="flex"
   >
     <GameTeamSide
-      class="flex-none w-2/12"
+      class="flex-none hidden lg:flex lg:w-2/12"
       data-testid="villagers-side"
       side="villagers"
     />
 
-    <div class="!max-w-2/3 game-playground-container px-2 w-8/12">
+    <div class="game-playground-container lg:w-8/12 px-2 w-full">
       <Transition
         mode="out-in"
         name="fade"
@@ -27,7 +27,7 @@
     </div>
 
     <GameTeamSide
-      class="flex-none w-2/12"
+      class="flex-none hidden lg:flex lg:w-2/12"
       data-testid="werewolves-side"
       side="werewolves"
     />

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

@@ -9,7 +9,7 @@
       :class="imageClasses"
       definition="normal"
       :role-name="playerToDisplay?.role.current"
-      sizes="200px"
+      :sizes="flippingImageSize"
       :svg-icon-path="props.svgIconPath"
     />
 
@@ -30,12 +30,19 @@
 </template>
 
 <script setup lang="ts">
+import { breakpointsTailwind, useBreakpoints } from "@vueuse/core";
 import type { GameEventFlippingPlayerCardProps } from "~/components/shared/game/game-event/GameEventFlippingPlayersCard/GameEventFlippingPlayerCard/game-event-flipping-player-card.types";
 import RoleFlippingImage from "~/components/shared/role/RoleImage/RoleFlippingImage/RoleFlippingImage.vue";
 import type { Player } from "~/composables/api/game/types/players/player.class";
+import { BreakpointTypes } from "~/utils/enums/breakpoint.enums";
 
 const props = defineProps<GameEventFlippingPlayerCardProps>();
 
+const breakpoints = useBreakpoints(breakpointsTailwind);
+const isSmallerThanMd = breakpoints.smaller(BreakpointTypes.MD);
+
+const flippingImageSize = computed<string>(() => (isSmallerThanMd.value ? "125px" : "200px"));
+
 const playerIndex = ref<number>(0);
 const playerToDisplay = computed<Player | undefined>(() => props.players[playerIndex.value]);
 

app/components/shared/game/game-event/GameEventWithTexts/GameEventTextsManager/GameEventNextTextButton/GameEventNextTextButton.vue

@@ -4,7 +4,7 @@
     ref="nextGameEventTextButton"
     v-p-tooltip.right="buttonTooltipOptions"
     :aria-label="$t('components.GameEventNextTextButton.nextEventText')"
-    class="pe-4"
+    class="md:pe-4"
     :class="{ 'text-gray-500': !canGoToNextGameEventText }"
     :disabled="!canGoToNextGameEventText"
     type="button"

app/components/shared/game/game-event/GameEventWithTexts/GameEventTextsManager/GameEventPreviousTextButton/GameEventPreviousTextButton.vue

@@ -4,7 +4,7 @@
     ref="previousGameEventTextButton"
     v-p-tooltip.left="buttonTooltipOptions"
     :aria-label="$t('components.GameEventPreviousTextButton.previousEventText')"
-    class="ps-4"
+    class="md:ps-4"
     :class="{ 'text-gray-500': !canGoToPreviousGameEventText }"
     :disabled="!canGoToPreviousGameEventText"
     type="button"

app/components/shared/game/game-event/GameEventWithTexts/GameEventTextsManager/GameEventTextsManager.vue

@@ -20,7 +20,7 @@
         <p
           id="current-event-text"
           :key="currentGameEventText"
-          class="!mb-0 !text-2xl text-center"
+          class="!mb-0 !text-base md:!text-2xl text-center"
         >
           {{ currentGameEventText }}
         </p>

app/components/shared/game/game-event/GameEventWithTexts/GameEventWithTexts.vue

@@ -12,6 +12,7 @@
 
     <GameEventTextsManager
       id="game-event-texts-manager"
+      class="grow md:grow-0"
       :texts="props.texts"
       @game-event-text-change="onGameEventTextChangeFromGameEventTextsManager"
     />

app/components/shared/game/game-play/NoNeededAction/NoActionNeeded.vue

@@ -2,7 +2,7 @@
   <div id="no-action-needed">
     <h2
       id="no-action-needed-message"
-      class="flex flex-col items-center justify-center text-gray-300"
+      class="flex flex-col items-center justify-center text-center text-gray-300"
     >
       <FontAwesomeIcon
         class="fa-2x mb-2 text-success"

app/components/shared/game/player/PlayersHorizontalList/PlayersHorizontalList.vue

@@ -7,14 +7,14 @@
       <li
         v-for="player in players"
         :key="player._id"
-        class="inline-block player-in-list text-center w-44"
+        class="inline-block md:w-44 p-1 player-in-list text-center w-32"
       >
         <GlowElement>
           <RoleImage
-            class="glow:border-gray-400 mx-auto"
+            class="glow:border-gray-400 mx-auto role-image-in-list"
             definition="normal"
             :role-name="player.role.current"
-            sizes="100"
+            :sizes="roleImageSizes"
           />
         </GlowElement>
 
@@ -27,8 +27,15 @@
 </template>
 
 <script setup lang="ts">
+import { breakpointsTailwind, useBreakpoints } from "@vueuse/core";
 import type { PlayersHorizontalListProps } from "~/components/shared/game/player/PlayersHorizontalList/players-horizontal-list.types";
 import RoleImage from "~/components/shared/role/RoleImage/RoleImage.vue";
+import { BreakpointTypes } from "~/utils/enums/breakpoint.enums";
 
 defineProps<PlayersHorizontalListProps>();
+
+const breakpoints = useBreakpoints(breakpointsTailwind);
+const isSmallerThanMd = breakpoints.smaller(BreakpointTypes.MD);
+
+const roleImageSizes = computed<string>(() => (isSmallerThanMd.value ? "50px" : "100px"));
 </script>