From ee4813fef7c72d6d032364fd1d6a7fd37ec710ec Mon Sep 17 00:00:00 2001
From: Jennifer Chhie <22698132+jschhie@users.noreply.github.com>
Date: Tue, 24 Feb 2026 12:09:25 -0800
Subject: [PATCH 1/7] feat: Animate Game Over UI

- Add Tailwind animation class to improve <GameOver/> UI
---
 src/components/Game/GameOver.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/Game/GameOver.vue b/src/components/Game/GameOver.vue
index ebab124c..9c47e950 100644
--- a/src/components/Game/GameOver.vue
+++ b/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>

From 8c19304bd0502adda4eec57ae762f185881f3080 Mon Sep 17 00:00:00 2001
From: Jennifer Chhie <22698132+jschhie@users.noreply.github.com>
Date: Wed, 25 Feb 2026 09:35:40 -0800
Subject: [PATCH 2/7] feat: Animate game intro (Header, Play Btn, Ctrls)

- Add Tailwind animation to <GameHeader/> & <PlayButton/> during intro
    and <GameControls/> during first question narration
- Improve gameplay with smoother UI/UX
---
 src/components/Game/GameControls.vue       | 4 ++--
 src/components/Game/GameHeaderConstants.js | 1 +
 src/components/Game/PlayButton.vue         | 2 +-
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/Game/GameControls.vue b/src/components/Game/GameControls.vue
index 37d7a529..37538689 100644
--- a/src/components/Game/GameControls.vue
+++ b/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"
diff --git a/src/components/Game/GameHeaderConstants.js b/src/components/Game/GameHeaderConstants.js
index 0bdbbb16..3fbb58ba 100644
--- a/src/components/Game/GameHeaderConstants.js
+++ b/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
diff --git a/src/components/Game/PlayButton.vue b/src/components/Game/PlayButton.vue
index aa9ea250..c7f3147f 100644
--- a/src/components/Game/PlayButton.vue
+++ b/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>

From 02c98eff35c1fb7cddfa83def1d1563d855098c7 Mon Sep 17 00:00:00 2001
From: Jennifer Chhie <22698132+jschhie@users.noreply.github.com>
Date: Wed, 25 Feb 2026 10:12:22 -0800
Subject: [PATCH 3/7] feat: Animate Game Dropdown Options UI

- Add Tailwind animation to <GameDropdownOptions/> to improve UI
---
 src/pages/GameZone/GameZoneFilters/GameDropdownOptions.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/GameZone/GameZoneFilters/GameDropdownOptions.vue b/src/pages/GameZone/GameZoneFilters/GameDropdownOptions.vue
index 4c7fc548..cf3e0874 100644
--- a/src/pages/GameZone/GameZoneFilters/GameDropdownOptions.vue
+++ b/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"

From c1ee184c39bb85fad1ad773ae879725e50eed019 Mon Sep 17 00:00:00 2001
From: Jennifer Chhie <22698132+jschhie@users.noreply.github.com>
Date: Fri, 27 Feb 2026 15:04:40 -0800
Subject: [PATCH 4/7] feat: Animate Game Q&A Captions

- Add fade effects via <transition> to improve UI/UX for game Q&A captions
---
 src/components/Game/GameHeader.vue | 43 +++++++++++++++++++-----------
 1 file changed, 28 insertions(+), 15 deletions(-)

diff --git a/src/components/Game/GameHeader.vue b/src/components/Game/GameHeader.vue
index 52d29771..ff0685ec 100644
--- a/src/components/Game/GameHeader.vue
+++ b/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 }}

From c6c06962165737e67cf713555295d35a0158fd23 Mon Sep 17 00:00:00 2001
From: Jennifer Chhie <22698132+jschhie@users.noreply.github.com>
Date: Thu, 12 Mar 2026 18:08:35 -0700
Subject: [PATCH 5/7] fix(WCAG): Hide decorative Game Layout icons from screen
 readers

- Set 'aria-hidden' for parent div with decorative <GameLayout/> icons
- Remove unnecessary alt text for SR-hidden image tags
---
 src/components/Game/GameLayout.vue | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/components/Game/GameLayout.vue b/src/components/Game/GameLayout.vue
index a95ca257..7fa05718 100644
--- a/src/components/Game/GameLayout.vue
+++ b/src/components/Game/GameLayout.vue
@@ -14,12 +14,13 @@
 
     <div
       class="absolute top-0 left-0 w-full h-full overflow-hidden pointer-events-none"
+      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,7 +30,7 @@
         <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>
@@ -37,7 +38,7 @@
         <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>

From 2297354d6e420b30f91521bbfe387effcd711bf5 Mon Sep 17 00:00:00 2001
From: Jennifer Chhie <22698132+jschhie@users.noreply.github.com>
Date: Fri, 13 Mar 2026 14:02:59 -0700
Subject: [PATCH 6/7] feat: Animate Game Layout UI icons

---
 src/components/Game/GameLayout.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Game/GameLayout.vue b/src/components/Game/GameLayout.vue
index 7fa05718..793788c9 100644
--- a/src/components/Game/GameLayout.vue
+++ b/src/components/Game/GameLayout.vue
@@ -13,7 +13,7 @@
     />
 
     <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 -->

From 12cf0c2b2d8b6f174474df666d866774a14b6ac2 Mon Sep 17 00:00:00 2001
From: Jennifer Chhie <22698132+jschhie@users.noreply.github.com>
Date: Mon, 16 Mar 2026 12:31:39 -0700
Subject: [PATCH 7/7] feat: Animate Game Progress Bar

- Add computed property & :classes for current <GameProgressBar/> index
- Add transitions/animations to improve UI
---
 src/components/Game/GameProgressBar.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/Game/GameProgressBar.vue b/src/components/Game/GameProgressBar.vue
index 38625f91..672413c3 100644
--- a/src/components/Game/GameProgressBar.vue
+++ b/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>