Add transition animations to scoreboard graphics

src/graphics/scoreboard-2xko/main.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useHead } from '@unhead/vue';
-import { computed, ref, watch } from 'vue';
+import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue';
 import { graphicsSettingsReplicant, playersReplicant, scoreboardReplicant } from '../../browser_shared/replicants';
 import { resolveCountryCode } from '../../shared/countries';
 import { getCharactersByGame } from '../../shared/fighting-characters';
@@ -60,6 +60,68 @@ watch(() => scoreboard.value.rightCountryOverride, async (country) => { rightFla
 
 const roundText = computed(() => scoreboard.value.round || 'WINNERS FINALS');
 const gameText = computed(() => scoreboard.value.game || '2XKO');
+
+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');
+  },
+);
+
+onBeforeUnmount(() => {
+  if (leftScoreTimer) {
+    clearTimeout(leftScoreTimer);
+  }
+  if (rightScoreTimer) {
+    clearTimeout(rightScoreTimer);
+  }
+});
 </script>
 
 <template>
@@ -216,93 +278,105 @@ const gameText = computed(() => scoreboard.value.game || '2XKO');
 
     <div style="display:flex;position:absolute;width:100%;justify-content:center;gap:582px;top:0;">
       <div style="position:relative;width:100%;">
-        <svg
+        <Transition
-          id="p1BGfull"
+          name="flag-swap"
-          class="bg-img playerPlaque"
+          mode="out-in"
-          style="position:absolute;top:-7px;right:-8px;"
+        >
-          xmlns="http://www.w3.org/2000/svg"
+          <svg
-          width="464"
+            id="p1BGfull"
-          height="50"
+            :key="`left-plaque-${scoreboard.leftPlayerId}-${scoreboard.leftCountryOverride}-${scoreboard.leftCharacter}`"
-          viewBox="0 0 464 50"
+            class="bg-img playerPlaque"
-        ><defs><clipPath id="p1-clip-path"><rect
+            style="position:absolute;top:-7px;right:-8px;"
-          x="6.57"
+            xmlns="http://www.w3.org/2000/svg"
-          y="7"
+            width="464"
-          width="47.25"
+            height="50"
-          height="35.87"
+            viewBox="0 0 464 50"
-        /></clipPath></defs><g id="P1_full"><g id="P1_bg"><polygon
+          ><defs><clipPath id="p1-clip-path"><rect
-          points="444.32 42.87 6.57 42.87 6.57 7 456.56 7 444.32 42.87"
+            x="6.57"
-          style="fill:url(#linear-gradient-p1-full)"
+            y="7"
-        /></g><g filter="url(#coloredGlow_p1)"><g id="P1_bg_stroke"><polygon
+            width="47.25"
-          points="444.32 42.87 6.57 42.87 6.57 7 456.56 7 444.32 42.87"
+            height="35.87"
-          style="fill:none;stroke-miterlimit:10"
+          /></clipPath></defs><g id="P1_full"><g id="P1_bg"><polygon
-        /></g><g id="P1_diag"><line
+            points="444.32 42.87 6.57 42.87 6.57 7 456.56 7 444.32 42.87"
-          x1="395.92"
+            style="fill:url(#linear-gradient-p1-full)"
-          y1="42.39"
+          /></g><g filter="url(#coloredGlow_p1)"><g id="P1_bg_stroke"><polygon
-          x2="408.17"
+            points="444.32 42.87 6.57 42.87 6.57 7 456.56 7 444.32 42.87"
-          y2="7"
+            style="fill:none;stroke-miterlimit:10"
-          style="fill:none;stroke-miterlimit:10"
+          /></g><g id="P1_diag"><line
-        /></g><g id="P1_vert"><line
+            x1="395.92"
-          x1="53.82"
+            y1="42.39"
-          y1="7"
+            x2="408.17"
-          x2="53.82"
+            y2="7"
-          y2="42.38"
+            style="fill:none;stroke-miterlimit:10"
-          style="fill:none;stroke-miterlimit:10"
+          /></g><g id="P1_vert"><line
-        /></g></g></g><image
+            x1="53.82"
-          class="playerImg"
+            y1="7"
-          :href="leftFlagUrl || leftCharacterImage"
+            x2="53.82"
-          width="46"
+            y2="42.38"
-          height="34.5"
+            style="fill:none;stroke-miterlimit:10"
-          x="7.15"
+          /></g></g></g><image
-          y="7.7"
+            class="playerImg"
-          preserveAspectRatio="xMidYMid meet"
+            :href="leftFlagUrl || leftCharacterImage"
-          clip-path="url(#p1-clip-path)"
+            width="46"
-        /></svg>
+            height="34.5"
+            x="7.15"
+            y="7.7"
+            preserveAspectRatio="xMidYMid meet"
+            clip-path="url(#p1-clip-path)"
+          /></svg>
+        </Transition>
       </div>
       <div style="position:relative;width:100%;">
-        <svg
+        <Transition
-          id="p2BGfull"
+          name="flag-swap"
-          class="bg-img playerPlaque"
+          mode="out-in"
-          style="position:absolute;top:-7px;left:-8px;"
+        >
-          xmlns="http://www.w3.org/2000/svg"
+          <svg
-          width="464"
+            id="p2BGfull"
-          height="50"
+            :key="`right-plaque-${scoreboard.rightPlayerId}-${scoreboard.rightCountryOverride}-${scoreboard.rightCharacter}`"
-          viewBox="0 0 464 50"
+            class="bg-img playerPlaque"
-        ><defs><clipPath id="p2-clip-path"><rect
+            style="position:absolute;top:-7px;left:-8px;"
-          x="410.18"
+            xmlns="http://www.w3.org/2000/svg"
-          y="7"
+            width="464"
-          width="47.25"
+            height="50"
-          height="35.87"
+            viewBox="0 0 464 50"
-        /></clipPath></defs><g
+          ><defs><clipPath id="p2-clip-path"><rect
-          id="P2_full"
+            x="410.18"
-          transform="matrix(-1 0 0 1 464 0)"
+            y="7"
-        ><g id="P2_bg"><polygon
+            width="47.25"
-          points="444.32 42.87 6.57 42.87 6.57 7 456.56 7 444.32 42.87"
+            height="35.87"
-          style="fill:url(#linear-gradient-p1-full)"
+          /></clipPath></defs><g
-        /></g><g filter="url(#coloredGlow_p2)"><g id="P2_bg_stroke"><polygon
+            id="P2_full"
-          points="444.32 42.87 6.57 42.87 6.57 7 456.56 7 444.32 42.87"
+            transform="matrix(-1 0 0 1 464 0)"
-          style="fill:none;stroke-miterlimit:10"
+          ><g id="P2_bg"><polygon
-        /></g><g id="P2_diag"><line
+            points="444.32 42.87 6.57 42.87 6.57 7 456.56 7 444.32 42.87"
-          x1="395.92"
+            style="fill:url(#linear-gradient-p1-full)"
-          y1="42.39"
+          /></g><g filter="url(#coloredGlow_p2)"><g id="P2_bg_stroke"><polygon
-          x2="408.17"
+            points="444.32 42.87 6.57 42.87 6.57 7 456.56 7 444.32 42.87"
-          y2="7"
+            style="fill:none;stroke-miterlimit:10"
-          style="fill:none;stroke-miterlimit:10"
+          /></g><g id="P2_diag"><line
-        /></g><g id="P2_vert"><line
+            x1="395.92"
-          x1="53.82"
+            y1="42.39"
-          y1="7"
+            x2="408.17"
-          x2="53.82"
+            y2="7"
-          y2="42.38"
+            style="fill:none;stroke-miterlimit:10"
-          style="fill:none;stroke-miterlimit:10"
+          /></g><g id="P2_vert"><line
-        /></g></g></g><image
+            x1="53.82"
-          class="playerImg"
+            y1="7"
-          :href="rightFlagUrl || rightCharacterImage"
+            x2="53.82"
-          width="46"
+            y2="42.38"
-          height="34.5"
+            style="fill:none;stroke-miterlimit:10"
-          x="410.75"
+          /></g></g></g><image
-          y="7.7"
+            class="playerImg"
-          preserveAspectRatio="xMidYMid meet"
+            :href="rightFlagUrl || rightCharacterImage"
-          clip-path="url(#p2-clip-path)"
+            width="46"
-        /></svg>
+            height="34.5"
+            x="410.75"
+            y="7.7"
+            preserveAspectRatio="xMidYMid meet"
+            clip-path="url(#p2-clip-path)"
+          /></svg>
+        </Transition>
       </div>
     </div>
 
@@ -313,12 +387,27 @@ const gameText = computed(() => scoreboard.value.game || '2XKO');
         class="nameBlock"
       >
         <div class="name">
-          {{ leftTeam }} <span v-if="leftTeam">|</span> {{ leftName }}
+          <Transition
+            name="text-fade"
+            mode="out-in"
+          >
+            <span :key="`${scoreboard.leftPlayerId}-${leftTeam}-${leftName}`">
+              {{ leftTeam }} <span v-if="leftTeam">|</span> {{ leftName }}
+            </span>
+          </Transition>
         </div>
       </div>
       <div class="scoreBlock">
-        <div class="score">
+        <div
-          {{ scoreboard.leftScore }}
+          class="score"
+          :class="leftScoreAnimClass"
+        >
+          <Transition
+            name="score-flip"
+            mode="out-in"
+          >
+            <span :key="scoreboard.leftScore">{{ scoreboard.leftScore }}</span>
+          </Transition>
         </div>
       </div>
       <div class="centerPanel">
@@ -327,12 +416,22 @@ const gameText = computed(() => scoreboard.value.game || '2XKO');
             id="stageText"
             class="infoBar"
           >
-            {{ gameText }}
+            <Transition
+              name="text-fade"
+              mode="out-in"
+            >
+              <span :key="gameText">{{ gameText }}</span>
+            </Transition>
           </div><div
             id="topText"
             class="infoBar"
           >
-            {{ roundText }}
+            <Transition
+              name="text-fade"
+              mode="out-in"
+            >
+              <span :key="roundText">{{ roundText }}</span>
+            </Transition>
           </div><div
             id="matchTypeText"
             class="infoBar"
@@ -342,8 +441,16 @@ const gameText = computed(() => scoreboard.value.game || '2XKO');
         </div>
       </div>
       <div class="scoreBlock">
-        <div class="score">
+        <div
-          {{ scoreboard.rightScore }}
+          class="score"
+          :class="rightScoreAnimClass"
+        >
+          <Transition
+            name="score-flip"
+            mode="out-in"
+          >
+            <span :key="scoreboard.rightScore">{{ scoreboard.rightScore }}</span>
+          </Transition>
         </div>
       </div>
       <div
@@ -351,7 +458,14 @@ const gameText = computed(() => scoreboard.value.game || '2XKO');
         class="nameBlock"
       >
         <div class="name">
-          {{ rightTeam }} <span v-if="rightTeam">|</span> {{ rightName }}
+          <Transition
+            name="text-fade"
+            mode="out-in"
+          >
+            <span :key="`${scoreboard.rightPlayerId}-${rightTeam}-${rightName}`">
+              {{ rightTeam }} <span v-if="rightTeam">|</span> {{ rightName }}
+            </span>
+          </Transition>
         </div>
       </div>
     </div>
@@ -641,6 +755,64 @@ body {
 	max-width: 46px;
 }
 
+.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 220ms ease, transform 220ms ease;
+}
+
+.flag-swap-enter-from,
+.flag-swap-leave-to {
+	opacity: 0;
+	transform: scale(0.95);
+}
+
+@keyframes score-up-pulse {
+	0% { transform: scale(1); color: #ffffff; }
+	50% { transform: scale(1.18); color: #a7ffcf; }
+	100% { transform: scale(1); color: #ffffff; }
+}
+
+@keyframes score-down-pulse {
+	0% { transform: scale(1); color: #ffffff; }
+	50% { transform: scale(1.18); color: #ffd0d0; }
+	100% { transform: scale(1); color: #ffffff; }
+}
+
 .team-custom-image-style {
 	max-height: 29px;
 	max-width: 39px;

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
+            <Transition
-              v-if="leftTeam"
+              name="text-fade"
-              class="team-text"
+              mode="out-in"
             >
-              {{ leftTeam }}
+              <span :key="`${scoreboard.leftPlayerId}-${leftTeam}-${leftName}`">
-            </span>
+                <span
-            <span class="gamertag-text">
+                  v-if="leftTeam"
-              {{ leftName }}
+                  class="team-text"
-            </span>
+                >
+                  {{ leftTeam }}
+                </span>
+                <span class="gamertag-text">
+                  {{ leftName }}
+                </span>
+              </span>
+            </Transition>
           </div>
         </div>
 
-        <div
+        <Transition name="flag-swap">
-          v-if="leftFlagUrl"
+          <div
-          id="p1-flag-wrapper"
+            v-if="leftFlagUrl"
-          class="flag-wrapper"
+            id="p1-flag-wrapper"
-        >
+            :key="`left-${scoreboard.leftCountryOverride}-${leftFlagUrl}`"
-          <div class="flag-mask">
+            class="flag-wrapper"
-            <img
+          >
-              class="flag"
+            <div class="flag-mask">
-              :src="leftFlagUrl"
+              <img
-              alt=""
+                class="flag"
-            >
+                :src="leftFlagUrl"
+                alt=""
+              >
+            </div>
           </div>
-        </div>
+        </Transition>
       </div>
 
       <div
@@ -293,31 +379,41 @@ watch(
           class="name-text-wrapper"
         >
           <div ref="p2NameTextRef">
-            <span
+            <Transition
-              v-if="rightTeam"
+              name="text-fade"
-              class="team-text"
+              mode="out-in"
             >
-              {{ rightTeam }}
+              <span :key="`${scoreboard.rightPlayerId}-${rightTeam}-${rightName}`">
-            </span>
+                <span
-            <span class="gamertag-text">
+                  v-if="rightTeam"
-              {{ rightName }}
+                  class="team-text"
-            </span>
+                >
+                  {{ rightTeam }}
+                </span>
+                <span class="gamertag-text">
+                  {{ rightName }}
+                </span>
+              </span>
+            </Transition>
           </div>
         </div>
 
-        <div
+        <Transition name="flag-swap">
-          v-if="rightFlagUrl"
+          <div
-          id="p2-flag-wrapper"
+            v-if="rightFlagUrl"
-          class="flag-wrapper"
+            id="p2-flag-wrapper"
-        >
+            :key="`right-${scoreboard.rightCountryOverride}-${rightFlagUrl}`"
-          <div class="flag-mask">
+            class="flag-wrapper"
-            <img
+          >
-              class="flag"
+            <div class="flag-mask">
-              :src="rightFlagUrl"
+              <img
-              alt=""
+                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>