Add transition animations to scoreboard graphics

src/graphics/scoreboard/main.vue

@@ -110,6 +110,59 @@ watch(
 
 const roundText = computed(() => scoreboard.value.round || 'Round');
 
+const leftScoreAnimClass = ref('');
+const rightScoreAnimClass = ref('');
+let leftScoreTimer: ReturnType<typeof setTimeout> | undefined;
+let rightScoreTimer: ReturnType<typeof setTimeout> | undefined;
+
+const triggerScoreAnimation = (side: 'left' | 'right', direction: 'up' | 'down') => {
+  const className = direction === 'up' ? 'score-up' : 'score-down';
+  if (side === 'left') {
+    leftScoreAnimClass.value = '';
+    if (leftScoreTimer) {
+      clearTimeout(leftScoreTimer);
+    }
+    void nextTick(() => {
+      leftScoreAnimClass.value = className;
+      leftScoreTimer = setTimeout(() => {
+        leftScoreAnimClass.value = '';
+      }, 420);
+    });
+    return;
+  }
+
+  rightScoreAnimClass.value = '';
+  if (rightScoreTimer) {
+    clearTimeout(rightScoreTimer);
+  }
+  void nextTick(() => {
+    rightScoreAnimClass.value = className;
+    rightScoreTimer = setTimeout(() => {
+      rightScoreAnimClass.value = '';
+    }, 420);
+  });
+};
+
+watch(
+  () => scoreboard.value.leftScore,
+  (nextScore, previousScore) => {
+    if (previousScore === undefined || nextScore === previousScore) {
+      return;
+    }
+    triggerScoreAnimation('left', nextScore > previousScore ? 'up' : 'down');
+  },
+);
+
+watch(
+  () => scoreboard.value.rightScore,
+  (nextScore, previousScore) => {
+    if (previousScore === undefined || nextScore === previousScore) {
+      return;
+    }
+    triggerScoreAnimation('right', nextScore > previousScore ? 'up' : 'down');
+  },
+);
+
 const progressTextWrapperRef = ref<HTMLElement | null>(null);
 const progressTextRef = ref<HTMLElement | null>(null);
 const p1NameTextWrapperRef = ref<HTMLElement | null>(null);
@@ -162,6 +215,12 @@ onMounted(() => {
 
 onBeforeUnmount(() => {
   window.removeEventListener('resize', refitText);
+  if (leftScoreTimer) {
+    clearTimeout(leftScoreTimer);
+  }
+  if (rightScoreTimer) {
+    clearTimeout(rightScoreTimer);
+  }
 });
 
 watch(
@@ -206,7 +265,12 @@ watch(
           id="progress-text"
           ref="progressTextRef"
         >
-          {{ roundText }}
+          <Transition
+            name="text-fade"
+            mode="out-in"
+          >
+            <span :key="roundText">{{ roundText }}</span>
+          </Transition>
         </div>
       </div>
 
@@ -218,8 +282,14 @@ watch(
         <div
           ref="p1ScoreTextRef"
           class="games-text"
+          :class="leftScoreAnimClass"
         >
-          {{ scoreboard.leftScore }}
+          <Transition
+            name="score-flip"
+            mode="out-in"
+          >
+            <span :key="scoreboard.leftScore">{{ scoreboard.leftScore }}</span>
+          </Transition>
         </div>
       </div>
 
@@ -231,8 +301,14 @@ watch(
         <div
           ref="p2ScoreTextRef"
           class="games-text"
+          :class="rightScoreAnimClass"
         >
-          {{ scoreboard.rightScore }}
+          <Transition
+            name="score-flip"
+            mode="out-in"
+          >
+            <span :key="scoreboard.rightScore">{{ scoreboard.rightScore }}</span>
+          </Transition>
         </div>
       </div>
 
@@ -251,31 +327,41 @@ watch(
           class="name-text-wrapper"
         >
           <div ref="p1NameTextRef">
-            <span
-              v-if="leftTeam"
-              class="team-text"
+            <Transition
+              name="text-fade"
+              mode="out-in"
             >
-              {{ leftTeam }}
-            </span>
-            <span class="gamertag-text">
-              {{ leftName }}
-            </span>
+              <span :key="`${scoreboard.leftPlayerId}-${leftTeam}-${leftName}`">
+                <span
+                  v-if="leftTeam"
+                  class="team-text"
+                >
+                  {{ leftTeam }}
+                </span>
+                <span class="gamertag-text">
+                  {{ leftName }}
+                </span>
+              </span>
+            </Transition>
           </div>
         </div>
 
-        <div
-          v-if="leftFlagUrl"
-          id="p1-flag-wrapper"
-          class="flag-wrapper"
-        >
-          <div class="flag-mask">
-            <img
-              class="flag"
-              :src="leftFlagUrl"
-              alt=""
-            >
+        <Transition name="flag-swap">
+          <div
+            v-if="leftFlagUrl"
+            id="p1-flag-wrapper"
+            :key="`left-${scoreboard.leftCountryOverride}-${leftFlagUrl}`"
+            class="flag-wrapper"
+          >
+            <div class="flag-mask">
+              <img
+                class="flag"
+                :src="leftFlagUrl"
+                alt=""
+              >
+            </div>
           </div>
-        </div>
+        </Transition>
       </div>
 
       <div
@@ -293,31 +379,41 @@ watch(
           class="name-text-wrapper"
         >
           <div ref="p2NameTextRef">
-            <span
-              v-if="rightTeam"
-              class="team-text"
+            <Transition
+              name="text-fade"
+              mode="out-in"
             >
-              {{ rightTeam }}
-            </span>
-            <span class="gamertag-text">
-              {{ rightName }}
-            </span>
+              <span :key="`${scoreboard.rightPlayerId}-${rightTeam}-${rightName}`">
+                <span
+                  v-if="rightTeam"
+                  class="team-text"
+                >
+                  {{ rightTeam }}
+                </span>
+                <span class="gamertag-text">
+                  {{ rightName }}
+                </span>
+              </span>
+            </Transition>
           </div>
         </div>
 
-        <div
-          v-if="rightFlagUrl"
-          id="p2-flag-wrapper"
-          class="flag-wrapper"
-        >
-          <div class="flag-mask">
-            <img
-              class="flag"
-              :src="rightFlagUrl"
-              alt=""
-            >
+        <Transition name="flag-swap">
+          <div
+            v-if="rightFlagUrl"
+            id="p2-flag-wrapper"
+            :key="`right-${scoreboard.rightCountryOverride}-${rightFlagUrl}`"
+            class="flag-wrapper"
+          >
+            <div class="flag-mask">
+              <img
+                class="flag"
+                :src="rightFlagUrl"
+                alt=""
+              >
+            </div>
           </div>
-        </div>
+        </Transition>
       </div>
     </div>
   </div>
@@ -535,4 +631,62 @@ img {
 .gamertag-text {
   color: #ffffff;
 }
+
+.text-fade-enter-active,
+.text-fade-leave-active {
+  transition: opacity 180ms ease, transform 180ms ease;
+}
+
+.text-fade-enter-from,
+.text-fade-leave-to {
+  opacity: 0;
+  transform: translateY(6px);
+}
+
+.score-flip-enter-active,
+.score-flip-leave-active {
+  transition: opacity 200ms ease, transform 200ms ease;
+  display: inline-block;
+}
+
+.score-flip-enter-from {
+  opacity: 0;
+  transform: translateY(-10px) scale(0.95);
+}
+
+.score-flip-leave-to {
+  opacity: 0;
+  transform: translateY(10px) scale(0.95);
+}
+
+.score-up {
+  animation: score-up-pulse 420ms ease;
+}
+
+.score-down {
+  animation: score-down-pulse 420ms ease;
+}
+
+.flag-swap-enter-active,
+.flag-swap-leave-active {
+  transition: opacity 200ms ease, transform 200ms ease;
+}
+
+.flag-swap-enter-from,
+.flag-swap-leave-to {
+  opacity: 0;
+  transform: scale(0.92);
+}
+
+@keyframes score-up-pulse {
+  0% { transform: scale(1); color: #ffffff; }
+  50% { transform: scale(1.2); color: #a7ffcf; }
+  100% { transform: scale(1); color: #ffffff; }
+}
+
+@keyframes score-down-pulse {
+  0% { transform: scale(1); color: #ffffff; }
+  50% { transform: scale(1.2); color: #ffd0d0; }
+  100% { transform: scale(1); color: #ffffff; }
+}
 </style>