Repository navigation
Animate the score when it updates - #46
Merged
Merged
Conversation
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>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Why
When a goal arrived over the realtime channel, the score digit just swapped silently — easy to miss. This makes the change pop.
Change
New
AnimatedScorecomponent renders a score number that pops and flashes whenever its value changes (never on the initial render). Used in both the gamecast header and the live scoreboard cards.flashprop) so it stays legible on the dark pitch header (volt) and the light scoreboard cards (primary green).prefers-reduced-motion— no animation for users who opt out.requestAnimationFrameclass reset.Verification
Verified the pop/flash in isolation for both contexts (the dev stack — serve/Reverb/Vite — was stopped, so no end-to-end run this round; the realtime score-patch path was confirmed in earlier work).
vue-tscshows no new type errors from these files; component is Prettier-clean.🤖 Generated with Claude Code