From 5870f22aca85e92ac227ae51779ba66a2ca6dc01 Mon Sep 17 00:00:00 2001
From: Yannick Lyn Fatt <yannick.lynfatt@gmail.com>
Date: Sun, 14 Jun 2026 01:43:16 -0400
Subject: [PATCH] Animate the score when it updates

A goal arriving over the realtime channel used to swap the digit silently.
Add a small AnimatedScore component that pops and flashes the number
whenever its value changes (never on first render), and use it for both
the gamecast header and the live scoreboard cards. The flash colour is
themeable so it stays legible on the dark pitch header (volt) and the
light scoreboard cards (primary); the animation honours
prefers-reduced-motion.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 resources/js/components/AnimatedScore.vue | 76 +++++++++++++++++++++++
 resources/js/pages/Gamecast/Show.vue      |  3 +-
 resources/js/pages/Scoreboard/Index.vue   |  5 +-
 3 files changed, 81 insertions(+), 3 deletions(-)
 create mode 100644 resources/js/components/AnimatedScore.vue

diff --git a/resources/js/components/AnimatedScore.vue b/resources/js/components/AnimatedScore.vue
new file mode 100644
index 0000000..bd793ae
--- /dev/null
+++ b/resources/js/components/AnimatedScore.vue
@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+
+/**
+ * A score number that pops and flashes whenever its value changes — used by
+ * the gamecast header and the live scoreboard so a goal landing over the
+ * realtime channel is obvious rather than a silent digit swap.
+ *
+ * The animation only fires on a change (never on the initial render), and the
+ * flash colour is themeable so it stays legible on both the dark pitch header
+ * and the light scoreboard cards.
+ */
+const props = withDefaults(
+    defineProps<{ value: number | null; flash?: string }>(),
+    { flash: 'var(--volt)' },
+);
+
+const popping = ref(false);
+
+watch(
+    () => props.value,
+    () => {
+        // Drop the class, then re-add it next frame so a second goal in quick
+        // succession restarts the animation instead of being ignored.
+        popping.value = false;
+        requestAnimationFrame(() => {
+            requestAnimationFrame(() => {
+                popping.value = true;
+            });
+        });
+    },
+);
+
+function onAnimationEnd(): void {
+    popping.value = false;
+}
+</script>
+
+<template>
+    <span
+        class="animated-score"
+        :class="{ 'animated-score--pop': popping }"
+        :style="{ '--score-flash': flash }"
+        @animationend="onAnimationEnd"
+        >{{ value ?? '–' }}</span
+    >
+</template>
+
+<style scoped>
+.animated-score {
+    display: inline-block;
+}
+
+.animated-score--pop {
+    animation: score-pop 0.6s ease-out;
+}
+
+@keyframes score-pop {
+    0% {
+        transform: scale(1);
+    }
+    30% {
+        transform: scale(1.4);
+        color: var(--score-flash);
+    }
+    100% {
+        transform: scale(1);
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .animated-score--pop {
+        animation: none;
+    }
+}
+</style>
diff --git a/resources/js/pages/Gamecast/Show.vue b/resources/js/pages/Gamecast/Show.vue
index 129d497..41aa581 100644
--- a/resources/js/pages/Gamecast/Show.vue
+++ b/resources/js/pages/Gamecast/Show.vue
@@ -2,6 +2,7 @@
 import { Head, Link, router } from '@inertiajs/vue3';
 import { useEchoPublicClient } from '@/composables/useEchoPublicClient';
 import { computed, nextTick, ref, watch } from 'vue';
+import AnimatedScore from '@/components/AnimatedScore.vue';
 import Breadcrumbs from '@/components/Breadcrumbs.vue';
 import GamecastEditor from '@/components/GamecastEditor.vue';
 import { matchClockMinute, useNow } from '@/composables/useMatchClock';
@@ -205,7 +206,7 @@ const matchTitle = computed(() => `${props.game.home_team?.name ?? 'TBD'} vs ${p
                         <div class="truncate text-sm font-medium opacity-90">{{ game.home_team?.name ?? 'TBD' }}</div>
                     </div>
                     <div class="text-center font-display text-6xl font-bold tabular-nums leading-none">
-                        {{ game.home_team_score ?? '–' }}<span class="px-2 opacity-50">:</span>{{ game.away_team_score ?? '–' }}
+                        <AnimatedScore :value="game.home_team_score" /><span class="px-2 opacity-50">:</span><AnimatedScore :value="game.away_team_score" />
                     </div>
                     <div class="text-center">
                         <div class="font-display text-lg font-bold uppercase tracking-wider text-volt">{{ game.away_team?.acronym ?? '—' }}</div>
diff --git a/resources/js/pages/Scoreboard/Index.vue b/resources/js/pages/Scoreboard/Index.vue
index 0d58b13..ccebd93 100644
--- a/resources/js/pages/Scoreboard/Index.vue
+++ b/resources/js/pages/Scoreboard/Index.vue
@@ -2,6 +2,7 @@
 import { Head, Link, router } from '@inertiajs/vue3';
 import { useEchoPublicClient } from '@/composables/useEchoPublicClient';
 import { ref } from 'vue';
+import AnimatedScore from '@/components/AnimatedScore.vue';
 import Breadcrumbs from '@/components/Breadcrumbs.vue';
 import { matchClockMinute, useNow } from '@/composables/useMatchClock';
 import { show as gamecastShow } from '@/routes/games';
@@ -168,7 +169,7 @@ const pageBreadcrumbs: BreadcrumbItem[] = [{ title: 'Scoreboard', href: index().
                             </span>
                             <span class="truncate font-medium">{{ game.home_team.name ?? 'TBD' }}</span>
                         </span>
-                        <span class="font-display text-3xl font-bold tabular-nums leading-none">{{ game.home_team_score ?? '–' }}</span>
+                        <AnimatedScore :value="game.home_team_score" flash="var(--primary)" class="font-display text-3xl font-bold tabular-nums leading-none" />
                     </div>
                     <div class="flex items-center justify-between gap-2">
                         <span class="flex min-w-0 items-center gap-2">
@@ -177,7 +178,7 @@ const pageBreadcrumbs: BreadcrumbItem[] = [{ title: 'Scoreboard', href: index().
                             </span>
                             <span class="truncate font-medium">{{ game.away_team.name ?? 'TBD' }}</span>
                         </span>
-                        <span class="font-display text-3xl font-bold tabular-nums leading-none">{{ game.away_team_score ?? '–' }}</span>
+                        <AnimatedScore :value="game.away_team_score" flash="var(--primary)" class="font-display text-3xl font-bold tabular-nums leading-none" />
                     </div>
                 </div>
             </component>