396 lines
13 KiB
JavaScript
396 lines
13 KiB
JavaScript
// AnimationQueue - Sequences card animations properly
|
|
// Ensures animations play in order without overlap
|
|
|
|
class AnimationQueue {
|
|
constructor(cardManager, getSlotRect, getLocationRect, playSound) {
|
|
this.cardManager = cardManager;
|
|
this.getSlotRect = getSlotRect; // Function to get slot position
|
|
this.getLocationRect = getLocationRect; // Function to get deck/discard position
|
|
this.playSound = playSound || (() => {}); // Sound callback
|
|
this.queue = [];
|
|
this.processing = false;
|
|
this.animationInProgress = false;
|
|
|
|
// Timing configuration (ms) - use centralized TIMING config
|
|
const T = window.TIMING || {};
|
|
this.timing = {
|
|
flipDuration: T.card?.flip || 540,
|
|
moveDuration: T.card?.move || 270,
|
|
cardLift: T.card?.lift || 100,
|
|
pauseAfterFlip: T.pause?.afterFlip || 144,
|
|
pauseAfterDiscard: T.pause?.afterDiscard || 550,
|
|
pauseBeforeNewCard: T.pause?.beforeNewCard || 150,
|
|
pauseAfterSwapComplete: T.pause?.afterSwapComplete || 400,
|
|
pauseBetweenAnimations: T.pause?.betweenAnimations || 90,
|
|
pauseBeforeFlip: T.pause?.beforeFlip || 50,
|
|
// Beat timing
|
|
beatBase: T.beat?.base || 1000,
|
|
beatVariance: T.beat?.variance || 200,
|
|
fadeOut: T.beat?.fadeOut || 300,
|
|
fadeIn: T.beat?.fadeIn || 300,
|
|
};
|
|
}
|
|
|
|
// Add movements to the queue and start processing
|
|
async enqueue(movements, onComplete) {
|
|
if (!movements || movements.length === 0) {
|
|
if (onComplete) onComplete();
|
|
return;
|
|
}
|
|
|
|
// Add completion callback to last movement
|
|
const movementsWithCallback = movements.map((m, i) => ({
|
|
...m,
|
|
onComplete: i === movements.length - 1 ? onComplete : null
|
|
}));
|
|
|
|
this.queue.push(...movementsWithCallback);
|
|
|
|
if (!this.processing) {
|
|
await this.processQueue();
|
|
}
|
|
}
|
|
|
|
// Process queued animations one at a time
|
|
async processQueue() {
|
|
if (this.processing) return;
|
|
this.processing = true;
|
|
this.animationInProgress = true;
|
|
|
|
while (this.queue.length > 0) {
|
|
const movement = this.queue.shift();
|
|
|
|
try {
|
|
await this.animate(movement);
|
|
} catch (e) {
|
|
console.error('Animation error:', e);
|
|
}
|
|
|
|
// Callback after last movement
|
|
if (movement.onComplete) {
|
|
movement.onComplete();
|
|
}
|
|
|
|
// Pause between animations
|
|
if (this.queue.length > 0) {
|
|
await this.delay(this.timing.pauseBetweenAnimations);
|
|
}
|
|
}
|
|
|
|
this.processing = false;
|
|
this.animationInProgress = false;
|
|
}
|
|
|
|
// Route to appropriate animation
|
|
async animate(movement) {
|
|
switch (movement.type) {
|
|
case 'flip':
|
|
await this.animateFlip(movement);
|
|
break;
|
|
case 'swap':
|
|
await this.animateSwap(movement);
|
|
break;
|
|
case 'discard':
|
|
await this.animateDiscard(movement);
|
|
break;
|
|
case 'draw-deck':
|
|
await this.animateDrawDeck(movement);
|
|
break;
|
|
case 'draw-discard':
|
|
await this.animateDrawDiscard(movement);
|
|
break;
|
|
}
|
|
}
|
|
|
|
// Animate a card flip
|
|
async animateFlip(movement) {
|
|
const { playerId, position, faceUp, card } = movement;
|
|
|
|
// Get slot position
|
|
const slotRect = this.getSlotRect(playerId, position);
|
|
if (!slotRect || slotRect.width === 0 || slotRect.height === 0) {
|
|
return;
|
|
}
|
|
|
|
// Create animation card at slot position
|
|
const animCard = this.createAnimCard();
|
|
this.cardManager.cardLayer.appendChild(animCard);
|
|
this.setCardPosition(animCard, slotRect);
|
|
|
|
const inner = animCard.querySelector('.card-inner');
|
|
const front = animCard.querySelector('.card-face-front');
|
|
|
|
// Set up what we're flipping to (front face)
|
|
this.setCardFront(front, card);
|
|
|
|
// Start face down (flipped = showing back)
|
|
inner.classList.add('flipped');
|
|
|
|
// Force a reflow to ensure the initial state is applied
|
|
animCard.offsetHeight;
|
|
|
|
// Animate the flip
|
|
this.playSound('flip');
|
|
await this.delay(this.timing.pauseBeforeFlip);
|
|
|
|
// Remove flipped to trigger animation to front
|
|
inner.classList.remove('flipped');
|
|
|
|
await this.delay(this.timing.flipDuration);
|
|
await this.delay(this.timing.pauseAfterFlip);
|
|
|
|
// Clean up
|
|
animCard.remove();
|
|
}
|
|
|
|
// Animate a card swap - smooth continuous motion
|
|
async animateSwap(movement) {
|
|
const { playerId, position, oldCard, newCard } = movement;
|
|
|
|
const slotRect = this.getSlotRect(playerId, position);
|
|
const discardRect = this.getLocationRect('discard');
|
|
const holdingRect = this.getLocationRect('holding');
|
|
|
|
if (!slotRect || !discardRect || slotRect.width === 0) {
|
|
return;
|
|
}
|
|
|
|
// Create animation cards
|
|
const handCard = this.createAnimCard();
|
|
this.cardManager.cardLayer.appendChild(handCard);
|
|
this.setCardPosition(handCard, slotRect);
|
|
|
|
const handInner = handCard.querySelector('.card-inner');
|
|
const handFront = handCard.querySelector('.card-face-front');
|
|
|
|
const heldCard = this.createAnimCard();
|
|
this.cardManager.cardLayer.appendChild(heldCard);
|
|
this.setCardPosition(heldCard, holdingRect || discardRect);
|
|
|
|
const heldInner = heldCard.querySelector('.card-inner');
|
|
const heldFront = heldCard.querySelector('.card-face-front');
|
|
|
|
// Set up initial state
|
|
this.setCardFront(handFront, oldCard);
|
|
if (!oldCard.face_up) {
|
|
handInner.classList.add('flipped');
|
|
}
|
|
this.setCardFront(heldFront, newCard);
|
|
heldInner.classList.remove('flipped');
|
|
|
|
// Step 1: If face-down, flip to reveal
|
|
if (!oldCard.face_up) {
|
|
this.playSound('flip');
|
|
handInner.classList.remove('flipped');
|
|
await this.delay(this.timing.flipDuration);
|
|
}
|
|
|
|
// Step 2: Quick crossfade swap
|
|
handCard.classList.add('fade-out');
|
|
heldCard.classList.add('fade-out');
|
|
await this.delay(150);
|
|
|
|
this.setCardPosition(handCard, discardRect);
|
|
this.setCardPosition(heldCard, slotRect);
|
|
|
|
this.playSound('card');
|
|
handCard.classList.remove('fade-out');
|
|
heldCard.classList.remove('fade-out');
|
|
handCard.classList.add('fade-in');
|
|
heldCard.classList.add('fade-in');
|
|
await this.delay(150);
|
|
|
|
// Clean up
|
|
handCard.remove();
|
|
heldCard.remove();
|
|
}
|
|
|
|
// Create a temporary animation card element
|
|
createAnimCard() {
|
|
const card = document.createElement('div');
|
|
card.className = 'real-card anim-card';
|
|
card.innerHTML = `
|
|
<div class="card-inner">
|
|
<div class="card-face card-face-front"></div>
|
|
<div class="card-face card-face-back"><span>?</span></div>
|
|
</div>
|
|
`;
|
|
return card;
|
|
}
|
|
|
|
// Set card position
|
|
setCardPosition(card, rect) {
|
|
card.style.left = `${rect.left}px`;
|
|
card.style.top = `${rect.top}px`;
|
|
card.style.width = `${rect.width}px`;
|
|
card.style.height = `${rect.height}px`;
|
|
}
|
|
|
|
// Set card front content
|
|
setCardFront(frontEl, cardData) {
|
|
frontEl.className = 'card-face card-face-front';
|
|
|
|
if (!cardData) return;
|
|
|
|
if (cardData.rank === '★') {
|
|
frontEl.classList.add('joker');
|
|
const jokerIcon = cardData.suit === 'hearts' ? '🐉' : '👹';
|
|
frontEl.innerHTML = `<span class="joker-icon">${jokerIcon}</span><span class="joker-label">Joker</span>`;
|
|
} else {
|
|
const isRed = cardData.suit === 'hearts' || cardData.suit === 'diamonds';
|
|
frontEl.classList.add(isRed ? 'red' : 'black');
|
|
const suitSymbol = this.getSuitSymbol(cardData.suit);
|
|
frontEl.innerHTML = `${cardData.rank}<br>${suitSymbol}`;
|
|
}
|
|
}
|
|
|
|
getSuitSymbol(suit) {
|
|
const symbols = { hearts: '♥', diamonds: '♦', clubs: '♣', spades: '♠' };
|
|
return symbols[suit] || '';
|
|
}
|
|
|
|
// Animate discarding a card (from hand to discard pile) - called for other players
|
|
async animateDiscard(movement) {
|
|
const { card, fromPlayerId, fromPosition } = movement;
|
|
|
|
// If no specific position, animate from opponent's area
|
|
const discardRect = this.getLocationRect('discard');
|
|
if (!discardRect) return;
|
|
|
|
let startRect;
|
|
|
|
if (fromPosition !== null && fromPosition !== undefined) {
|
|
startRect = this.getSlotRect(fromPlayerId, fromPosition);
|
|
}
|
|
|
|
// Fallback: use discard position offset upward
|
|
if (!startRect) {
|
|
startRect = {
|
|
left: discardRect.left,
|
|
top: discardRect.top - 80,
|
|
width: discardRect.width,
|
|
height: discardRect.height
|
|
};
|
|
}
|
|
|
|
// Create animation card
|
|
const animCard = this.createAnimCard();
|
|
this.cardManager.cardLayer.appendChild(animCard);
|
|
this.setCardPosition(animCard, startRect);
|
|
|
|
const inner = animCard.querySelector('.card-inner');
|
|
const front = animCard.querySelector('.card-face-front');
|
|
|
|
// Show the card that was discarded
|
|
this.setCardFront(front, card);
|
|
inner.classList.remove('flipped');
|
|
|
|
// Move to discard
|
|
this.playSound('card');
|
|
animCard.classList.add('moving');
|
|
this.setCardPosition(animCard, discardRect);
|
|
await this.delay(this.timing.moveDuration);
|
|
animCard.classList.remove('moving');
|
|
|
|
// Same timing as player swap - let discard land and pulse settle
|
|
await this.delay(this.timing.pauseAfterDiscard);
|
|
|
|
// Clean up
|
|
animCard.remove();
|
|
}
|
|
|
|
// Animate drawing from deck
|
|
async animateDrawDeck(movement) {
|
|
const { playerId } = movement;
|
|
|
|
const deckRect = this.getLocationRect('deck');
|
|
const holdingRect = this.getLocationRect('holding');
|
|
|
|
if (!deckRect || !holdingRect) return;
|
|
|
|
// Create animation card at deck position (face down)
|
|
const animCard = this.createAnimCard();
|
|
this.cardManager.cardLayer.appendChild(animCard);
|
|
this.setCardPosition(animCard, deckRect);
|
|
|
|
const inner = animCard.querySelector('.card-inner');
|
|
inner.classList.add('flipped'); // Show back
|
|
|
|
// Move to holding position
|
|
this.playSound('card');
|
|
animCard.classList.add('moving');
|
|
this.setCardPosition(animCard, holdingRect);
|
|
await this.delay(this.timing.moveDuration);
|
|
animCard.classList.remove('moving');
|
|
|
|
// Brief settle before state updates
|
|
await this.delay(this.timing.pauseBeforeNewCard);
|
|
|
|
// Clean up - renderGame will show the holding card state
|
|
animCard.remove();
|
|
}
|
|
|
|
// Animate drawing from discard - show card lifting and moving to holding position
|
|
async animateDrawDiscard(movement) {
|
|
const { card } = movement;
|
|
|
|
const discardRect = this.getLocationRect('discard');
|
|
const holdingRect = this.getLocationRect('holding');
|
|
|
|
if (!discardRect || !holdingRect) return;
|
|
|
|
// Create animation card at discard position (face UP - visible card)
|
|
const animCard = this.createAnimCard();
|
|
this.cardManager.cardLayer.appendChild(animCard);
|
|
this.setCardPosition(animCard, discardRect);
|
|
|
|
const inner = animCard.querySelector('.card-inner');
|
|
const front = animCard.querySelector('.card-face-front');
|
|
|
|
// Show the card face (discard is always visible)
|
|
if (card) {
|
|
this.setCardFront(front, card);
|
|
}
|
|
inner.classList.remove('flipped'); // Face up
|
|
|
|
// Lift effect before moving - card rises slightly
|
|
animCard.style.transform = 'translateY(-8px) scale(1.05)';
|
|
animCard.style.transition = `transform ${this.timing.cardLift}ms ease-out`;
|
|
await this.delay(this.timing.cardLift);
|
|
|
|
// Move to holding position
|
|
this.playSound('card');
|
|
animCard.classList.add('moving');
|
|
animCard.style.transform = '';
|
|
this.setCardPosition(animCard, holdingRect);
|
|
await this.delay(this.timing.moveDuration);
|
|
animCard.classList.remove('moving');
|
|
|
|
// Brief settle before state updates
|
|
await this.delay(this.timing.pauseBeforeNewCard);
|
|
|
|
// Clean up - renderGame will show the holding card state
|
|
animCard.remove();
|
|
}
|
|
|
|
// Check if animations are currently playing
|
|
isAnimating() {
|
|
return this.animationInProgress;
|
|
}
|
|
|
|
// Clear the queue (for interruption)
|
|
clear() {
|
|
this.queue = [];
|
|
}
|
|
|
|
// Utility delay
|
|
delay(ms) {
|
|
return new Promise(resolve => setTimeout(resolve, ms));
|
|
}
|
|
}
|
|
|
|
// Export for use in app.js
|
|
if (typeof module !== 'undefined' && module.exports) {
|
|
module.exports = AnimationQueue;
|
|
}
|