feat: Animate gameplay components

src/components/Game/GameControls.vue

@@ -3,7 +3,7 @@
   <div v-show="showControls">
     <div
       :class="[
-        'justify-center',
+        'justify-center animate-fade-slide-in',
         isTablet
           ? 'flex gap-[25px] mb-6'
           : isMobile
@@ -84,7 +84,7 @@
 
     <div
       id="transcript"
-      class="relative bg-cross-lines rounded-[16px] p-4 my-4 shadow-md mx-auto mobile:w-[280px] w-[300px] md:w-[500px] flex flex-col gap-y-4 items-center justify-center"
+      class="animate-fade-slide-in relative bg-cross-lines rounded-[16px] p-4 my-4 shadow-md mx-auto mobile:w-[280px] w-[300px] md:w-[500px] flex flex-col gap-y-4 items-center justify-center"
     >
       <div
         class="absolute rounded-t-[16px] top-0 left-0 bg-[#edf7fc] h-[44px] w-full"

src/components/Game/GameHeader.vue

@@ -42,22 +42,35 @@
         aria-hidden="true"
         class="flex flex-col items-center gap-y-3"
       >
-        <QuestionCaptions
-          v-if="!isAnswerPlaying"
-          :title="title"
-          :description="description"
-          :currentQuestion="currentQuestion"
-          :showAnswerOnly="showAnswerOnly"
-        />
+        <!-- Vue transition wrapper for fade effects -->
+        <transition
+          enter-active-class="transition duration-300 ease-in"
+          enter-from-class="opacity-0"
+          enter-to-class="opacity-100"
+          leave-active-class="transition duration-300 ease-out"
+          leave-from-class="opacity-100"
+          leave-to-class="opacity-0"
+          mode="out-in"
+        >
+          <QuestionCaptions
+            v-if="!isAnswerPlaying"
+            :title="title"
+            :description="description"
+            :currentQuestion="currentQuestion"
+            :showAnswerOnly="showAnswerOnly"
+            key="question-caption"
+          />
 
-        <!-- Show feedback & answer once final transcription is ready & validated -->
-        <AnswerCaptions
-          v-if="isAnswerPlaying"
-          :title="title"
-          :currentQuestion="currentQuestion"
-          :isCorrect="isCorrect"
-          :firstMatchingAnswer="firstMatchingAnswer"
-        />
+          <!-- Show feedback & answer once final transcription is ready & validated -->
+          <AnswerCaptions
+            v-else
+            :title="title"
+            :currentQuestion="currentQuestion"
+            :isCorrect="isCorrect"
+            :firstMatchingAnswer="firstMatchingAnswer"
+            key="answer-caption"
+          />
+        </transition>
       </div>
       <p v-else class="mobile:text-[16px] text-[18px] 2xl:text-[20px]">
         {{ description }}

src/components/Game/GameHeaderConstants.js

@@ -25,6 +25,7 @@ export const gameHeaderClasses = [
   'md:my-5',
   'rounded-[16px]',
   'shadow-md',
+  'animate-fade-slide-in',
 ];
 
 // RWD classes for multiple-choice captions

src/components/Game/GameLayout.vue

@@ -13,13 +13,14 @@
     />
 
     <div
-      class="absolute top-0 left-0 w-full h-full overflow-hidden pointer-events-none"
+      class="absolute top-0 left-0 w-full h-full overflow-hidden pointer-events-none animate-fade-slide-in"
+      aria-hidden="true"
     >
       <!-- Desktop & mobile -->
       <div v-show="!isTablet" class="absolute top-20 right-20">
         <img
           src="/assets/gameImages/moon.png"
-          alt="Decorative moon"
+          alt=""
           :class="isMobile ? 'w-[120px] h-auto' : 'w-[165px] h-auto'"
         />
       </div>
@@ -29,15 +30,15 @@
         <div class="absolute left-0 z-0 top-20">
           <img
             src="/assets/gameImages/stars-clouds.png"
-            alt="Decorative cloud"
+            alt=""
             class="w-[230px] h-auto transform -scale-x-100"
           />
         </div>
         <!-- Right image -->
         <div class="absolute right-0 z-0 bottom-[50px]">
           <img
             src="/assets/gameImages/rainbow.png"
-            alt="Decorative rainbow"
+            alt=""
             class="w-[220px] h-auto"
           />
         </div>
@@ -48,7 +49,7 @@
         <div class="absolute bottom-0 left-0 z-0 bottom-[50px]">
           <img
             src="/assets/gameImages/rainbow.png"
-            alt="Decorative rainbow"
+            alt=""
             class="w-[300px] h-auto transform -scale-x-100"
           />
         </div>
@@ -59,7 +60,7 @@
         <div class="absolute left-3 bottom-5 z-0">
           <img
             src="/assets/gameImages/shooting-star.png"
-            alt="Decorative star"
+            alt=""
             class="w-[170px] h-auto"
           />
         </div>

src/components/Game/GameOver.vue

@@ -1,5 +1,7 @@
 <template>
-  <div class="bg-cross-lines rounded-[16px] p-5 my-4 shadow-md mx-auto">
+  <div
+    class="bg-cross-lines rounded-[16px] p-5 my-4 shadow-md mx-auto animate-fade-slide-in"
+  >
     <div class="text-center text-3xl font-bold p-2 md:w-[300px]">
       Game Over!
     </div>

src/components/Game/GameProgressBar.vue

@@ -26,6 +26,9 @@ const props = defineProps({
     default: 0,
   },
 });
+
+import { computed } from 'vue';
+const progressBarIndex = computed(() => props.currentQuestionIndex + 1);
 </script>
 
 <template>
@@ -45,9 +48,10 @@ const props = defineProps({
       <div
         v-for="n in 5"
         :key="n"
-        class="w-1/5 h-[8px] rounded-[16px] border"
+        class="w-1/5 h-[8px] rounded-[16px] border transition ease-in duration-300"
         :class="[
-          n <= currentQuestionIndex + 1 ? 'bg-primary-color' : 'bg-[#edf7fc]',
+          n <= progressBarIndex ? 'bg-primary-color' : 'bg-[#edf7fc]',
+          { 'animate-pulse': n === progressBarIndex },
         ]"
       ></div>
     </div>

src/components/Game/PlayButton.vue

@@ -1,7 +1,7 @@
 <template>
   <button
     @click="$emit('play-click')"
-    class="page-button text-nowrap blue-button w-[50%]"
+    class="page-button text-nowrap blue-button w-[50%] animate-fade-slide-in"
   >
     Play
   </button>

src/pages/GameZone/GameZoneFilters/GameDropdownOptions.vue

@@ -15,7 +15,7 @@ const props = defineProps({
 </script>
 
 <template>
-  <div class="py-1 text-[15px]" role="none">
+  <div class="py-1 text-[15px] animate-fade-slide-in" role="none">
     <!-- Generate game menu links by looping over 'gamesMap' entries -->
     <a
       v-for="{ title, url } in gamesMap"