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

Improve initial card flip animation appearance

Browse Source 
Style the flip overlay's front face to match player hand cards (gradient
background, proper border/shadow) instead of using generic card-front
styles. Hide the underlying card during the animation so the green table
shows through the flip rather than a white card peeking behind it.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
adlee-was-taken 2026-02-23 19:29:09 -05:00
parent e2c7a55dac
commit 77cbefc30c
2 changed files with 25 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
client/app.js
View File

@ -2898,6 +2898,11 @@ class GolfGame {
if (window.cardAnimations) { if (window.cardAnimations) {
window.cardAnimations.animateInitialFlip(cardEl, cardData, () => { window.cardAnimations.animateInitialFlip(cardEl, cardData, () => {
this.animatingPositions.delete(key); this.animatingPositions.delete(key);
// Unhide the current card element (may have been rebuilt by renderGame)
const currentCards = this.playerCards.querySelectorAll('.card');
if (currentCards[position]) {
currentCards[position].style.visibility = '';
}
}); });
} else { } else {
// Fallback if card animations not available // Fallback if card animations not available
@ -4172,7 +4177,13 @@ class GolfGame {
cardEl.firstChild.addEventListener('click', () => this.handleCardClick(index)); cardEl.firstChild.addEventListener('click', () => this.handleCardClick(index));
// V3_13: Bind tooltip events for face-up cards // V3_13: Bind tooltip events for face-up cards
this.bindCardTooltipEvents(cardEl.firstChild, displayCard); this.bindCardTooltipEvents(cardEl.firstChild, displayCard);
this.playerCards.appendChild(cardEl.firstChild); const appendedCard = cardEl.firstChild;
this.playerCards.appendChild(appendedCard);
// Hide card if flip animation overlay is active on this position
if (this.animatingPositions.has(`local-${index}`)) {
appendedCard.style.visibility = 'hidden';
}
}); });
} }

17
client/card-animations.js
View File

@ -420,6 +420,7 @@ class CardAnimations {
} }
// Animate initial flip at game start - smooth flip only, no lift // Animate initial flip at game start - smooth flip only, no lift
// Uses overlay sized to match the source card exactly
animateInitialFlip(cardElement, cardData, onComplete) { animateInitialFlip(cardElement, cardData, onComplete) {
if (!cardElement) { if (!cardElement) {
if (onComplete) onComplete(); if (onComplete) onComplete();
@ -433,8 +434,16 @@ class CardAnimations {
const animCard = this.createAnimCard(rect, true, deckColor); const animCard = this.createAnimCard(rect, true, deckColor);
this.setCardContent(animCard, cardData); this.setCardContent(animCard, cardData);
// Hide original card during animation // Match the front face styling to player hand cards (not deck/discard cards)
cardElement.style.opacity = '0'; const front = animCard.querySelector('.draw-anim-front');
if (front) {
front.style.background = 'linear-gradient(145deg, #fff 0%, #f5f5f5 100%)';
front.style.border = '2px solid #ddd';
front.style.boxShadow = '0 2px 8px rgba(0, 0, 0, 0.3)';
}
// Hide original card during animation (overlay covers it)
cardElement.style.visibility = 'hidden';
const inner = animCard.querySelector('.draw-anim-inner'); const inner = animCard.querySelector('.draw-anim-inner');
const duration = window.TIMING?.card?.flip || 320; const duration = window.TIMING?.card?.flip || 320;
@ -449,7 +458,7 @@ class CardAnimations {
begin: () => this.playSound('flip'), begin: () => this.playSound('flip'),
complete: () => { complete: () => {
animCard.remove(); animCard.remove();
cardElement.style.opacity = '1'; cardElement.style.visibility = '';
if (onComplete) onComplete(); if (onComplete) onComplete();
} }
}); });
@ -458,7 +467,7 @@ class CardAnimations {
} catch (e) { } catch (e) {
console.error('Initial flip animation error:', e); console.error('Initial flip animation error:', e);
animCard.remove(); animCard.remove();
cardElement.style.opacity = '1'; cardElement.style.visibility = '';
if (onComplete) onComplete(); if (onComplete) onComplete();
} }
} }