Merge pull request #127 from Pandipipas/add-animations-to-scoreboard-graphics

Add reactive animations to scoreboard and scoreboard-2xko

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,8 +278,13 @@ 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%;">
+        <Transition
+          name="flag-swap"
+          mode="out-in"
+        >
           <svg
             id="p1BGfull"
+            :key="`left-plaque-${scoreboard.leftPlayerId}-${scoreboard.leftCountryOverride}-${scoreboard.leftCharacter}`"
             class="bg-img playerPlaque"
             style="position:absolute;top:-7px;right:-8px;"
             xmlns="http://www.w3.org/2000/svg"
@@ -257,10 +324,16 @@ const gameText = computed(() => scoreboard.value.game || '2XKO');
             preserveAspectRatio="xMidYMid meet"
             clip-path="url(#p1-clip-path)"
           /></svg>
+        </Transition>
       </div>
       <div style="position:relative;width:100%;">
+        <Transition
+          name="flag-swap"
+          mode="out-in"
+        >
           <svg
             id="p2BGfull"
+            :key="`right-plaque-${scoreboard.rightPlayerId}-${scoreboard.rightCountryOverride}-${scoreboard.rightCharacter}`"
             class="bg-img playerPlaque"
             style="position:absolute;top:-7px;left:-8px;"
             xmlns="http://www.w3.org/2000/svg"
@@ -303,6 +376,7 @@ const gameText = computed(() => scoreboard.value.game || '2XKO');
             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">
+          <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">
+          <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,6 +327,11 @@ watch(
           class="name-text-wrapper"
         >
           <div ref="p1NameTextRef">
+            <Transition
+              name="text-fade"
+              mode="out-in"
+            >
+              <span :key="`${scoreboard.leftPlayerId}-${leftTeam}-${leftName}`">
                 <span
                   v-if="leftTeam"
                   class="team-text"
@@ -260,12 +341,16 @@ watch(
                 <span class="gamertag-text">
                   {{ leftName }}
                 </span>
+              </span>
+            </Transition>
           </div>
         </div>
 
+        <Transition name="flag-swap">
           <div
             v-if="leftFlagUrl"
             id="p1-flag-wrapper"
+            :key="`left-${scoreboard.leftCountryOverride}-${leftFlagUrl}`"
             class="flag-wrapper"
           >
             <div class="flag-mask">
@@ -276,6 +361,7 @@ watch(
               >
             </div>
           </div>
+        </Transition>
       </div>
 
       <div
@@ -293,6 +379,11 @@ watch(
           class="name-text-wrapper"
         >
           <div ref="p2NameTextRef">
+            <Transition
+              name="text-fade"
+              mode="out-in"
+            >
+              <span :key="`${scoreboard.rightPlayerId}-${rightTeam}-${rightName}`">
                 <span
                   v-if="rightTeam"
                   class="team-text"
@@ -302,12 +393,16 @@ watch(
                 <span class="gamertag-text">
                   {{ rightName }}
                 </span>
+              </span>
+            </Transition>
           </div>
         </div>
 
+        <Transition name="flag-swap">
           <div
             v-if="rightFlagUrl"
             id="p2-flag-wrapper"
+            :key="`right-${scoreboard.rightCountryOverride}-${rightFlagUrl}`"
             class="flag-wrapper"
           >
             <div class="flag-mask">
@@ -318,6 +413,7 @@ watch(
               >
             </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>