alee/golfgame
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Speed up score animations and fix end-of-round UI

Browse Source 
- Cut reveal/tally/celebration timings by ~50% for snappier round end
- Add dealAnimationInProgress flag to suppress flip prompts during deal
- Stop deck/discard pulse animation when round ends
- Update CLAUDE.md with animation race condition documentation

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
adlee-was-taken 2026-02-14 08:45:44 -05:00
parent 49b2490c25
commit 8431cd6fd1
2 changed files with 25 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
client/app.js
View File

@ -56,6 +56,9 @@ class GolfGame {
// Track opponent discard animation in progress (prevent renderGame from updating discard) // Track opponent discard animation in progress (prevent renderGame from updating discard)
this.opponentDiscardAnimating = false; this.opponentDiscardAnimating = false;
// Track deal animation in progress (suppress flip prompts until dealing complete)
this.dealAnimationInProgress = false;
// Track round winners for visual highlight // Track round winners for visual highlight
this.roundWinnerNames = new Set(); this.roundWinnerNames = new Set();
@ -1510,11 +1513,16 @@ class GolfGame {
this.playerCards.style.visibility = 'hidden'; this.playerCards.style.visibility = 'hidden';
this.opponentsRow.style.visibility = 'hidden'; this.opponentsRow.style.visibility = 'hidden';
// Suppress flip prompts until dealing complete
this.dealAnimationInProgress = true;
if (window.cardAnimations) { if (window.cardAnimations) {
window.cardAnimations.animateDealing( window.cardAnimations.animateDealing(
this.gameState, this.gameState,
(playerId, cardIdx) => this.getCardSlotRect(playerId, cardIdx), (playerId, cardIdx) => this.getCardSlotRect(playerId, cardIdx),
() => { () => {
// Deal complete - allow flip prompts
this.dealAnimationInProgress = false;
// Show real cards // Show real cards
this.playerCards.style.visibility = 'visible'; this.playerCards.style.visibility = 'visible';
this.opponentsRow.style.visibility = 'visible'; this.opponentsRow.style.visibility = 'visible';
@ -1525,6 +1533,7 @@ class GolfGame {
); );
} else { } else {
// Fallback // Fallback
this.dealAnimationInProgress = false;
this.playerCards.style.visibility = 'visible'; this.playerCards.style.visibility = 'visible';
this.opponentsRow.style.visibility = 'visible'; this.opponentsRow.style.visibility = 'visible';
this.playSound('shuffle'); this.playSound('shuffle');
@ -3386,7 +3395,8 @@ class GolfGame {
// Update deck/discard clickability and visual state // Update deck/discard clickability and visual state
// Use visual check so indicators sync with opponent swap animation // Use visual check so indicators sync with opponent swap animation
const hasDrawn = this.drawnCard || this.gameState.has_drawn_card; const hasDrawn = this.drawnCard || this.gameState.has_drawn_card;
const canDraw = this.isVisuallyMyTurn() && !hasDrawn && !this.gameState.waiting_for_initial_flip; const isRoundActive = this.gameState.phase !== 'round_over' && this.gameState.phase !== 'game_over';
const canDraw = isRoundActive && this.isVisuallyMyTurn() && !hasDrawn && !this.gameState.waiting_for_initial_flip;
// Pulse the deck area when it's player's turn to draw // Pulse the deck area when it's player's turn to draw
const wasTurnToDraw = this.deckArea.classList.contains('your-turn-to-draw'); const wasTurnToDraw = this.deckArea.classList.contains('your-turn-to-draw');
@ -3516,8 +3526,8 @@ class GolfGame {
this.renderPairIndicators(); this.renderPairIndicators();
// Show flip prompt for initial flip // Show flip prompt for initial flip
// Show flip prompt during initial flip phase // Show flip prompt during initial flip phase (but not during deal animation)
if (this.gameState.waiting_for_initial_flip) { if (this.gameState.waiting_for_initial_flip && !this.dealAnimationInProgress) {
const requiredFlips = this.gameState.initial_flips || 2; const requiredFlips = this.gameState.initial_flips || 2;
const flippedCount = this.locallyFlippedCards.size; const flippedCount = this.locallyFlippedCards.size;
const remaining = requiredFlips - flippedCount; const remaining = requiredFlips - flippedCount;

24
client/timing-config.js
View File

@ -75,26 +75,26 @@ const TIMING = {
// V3_03: Round end reveal timing // V3_03: Round end reveal timing
reveal: { reveal: {
voluntaryWindow: 4000, // Time for players to flip their own cards voluntaryWindow: 2000, // Time for players to flip their own cards
initialPause: 500, // Pause before auto-reveals start initialPause: 250, // Pause before auto-reveals start
cardStagger: 100, // Between cards in same hand cardStagger: 50, // Between cards in same hand
playerPause: 400, // Pause after each player's reveal playerPause: 200, // Pause after each player's reveal
highlightDuration: 200, // Player area highlight fade-in highlightDuration: 100, // Player area highlight fade-in
}, },
// V3_04: Pair celebration // V3_04: Pair celebration
celebration: { celebration: {
pairDuration: 400, // Celebration animation length pairDuration: 200, // Celebration animation length
pairDelay: 50, // Slight delay before celebration pairDelay: 25, // Slight delay before celebration
}, },
// V3_07: Score tallying animation // V3_07: Score tallying animation
tally: { tally: {
initialPause: 200, // After reveal, before tally initialPause: 100, // After reveal, before tally
cardHighlight: 140, // Duration to show each card value cardHighlight: 70, // Duration to show each card value
columnPause: 100, // Between columns columnPause: 30, // Between columns
pairCelebration: 300, // Pair cancel effect pairCelebration: 200, // Pair cancel effect
playerPause: 350, // Between players playerPause: 50, // Between players
finalScoreReveal: 400, // Final score animation finalScoreReveal: 400, // Final score animation
}, },