diff --git a/client/app.js b/client/app.js index 1188704..9769e2d 100644 --- a/client/app.js +++ b/client/app.js @@ -3107,10 +3107,8 @@ class GolfGame { this.heldCardFloating.style.height = `${cardHeight}px`; // Position discard button attached to right side of held card - const scaledWidth = cardWidth * 1.15; // Account for scale transform - const scaledHeight = cardHeight * 1.15; - const buttonLeft = cardLeft + scaledWidth / 2 + cardWidth / 2; // Right edge of scaled card (no gap) - const buttonTop = cardTop + (scaledHeight - cardHeight) / 2 + cardHeight * 0.3; // Vertically centered on card + const buttonLeft = cardLeft + cardWidth; // Right edge of card (no gap) + const buttonTop = cardTop + cardHeight * 0.3; // Vertically centered on card this.discardBtn.style.left = `${buttonLeft}px`; this.discardBtn.style.top = `${buttonTop}px`; diff --git a/client/card-animations.js b/client/card-animations.js index 6183c3a..fd8b97a 100644 --- a/client/card-animations.js +++ b/client/card-animations.js @@ -92,6 +92,9 @@ class CardAnimations { card.style.top = rect.top + 'px'; card.style.width = rect.width + 'px'; card.style.height = rect.height + 'px'; + // Scale font-size proportionally to card width + const front = card.querySelector('.draw-anim-front'); + if (front) front.style.fontSize = (rect.width * 0.5) + 'px'; } // Apply deck color to back @@ -448,10 +451,6 @@ class CardAnimations { const deckColor = this.getDeckColor(); const animCard = this.createAnimCard(rect, true, deckColor); - // Match source card's font-size (opponent cards are smaller than default) - const srcFontSize = getComputedStyle(cardElement).fontSize; - const front = animCard.querySelector('.draw-anim-front'); - if (front) front.style.fontSize = srcFontSize; this.setCardContent(animCard, cardData); // Apply rotation to match arch layout @@ -607,10 +606,6 @@ class CardAnimations { const deckColor = this.getDeckColor(); const animCard = this.createAnimCard(rect, true, deckColor); - // Match source card's font-size (opponent cards are smaller than default) - const srcFontSize = getComputedStyle(sourceCardElement).fontSize; - const front = animCard.querySelector('.draw-anim-front'); - if (front) front.style.fontSize = srcFontSize; this.setCardContent(animCard, discardCard); if (rotation) { @@ -1164,6 +1159,9 @@ class CardAnimations { }); // Hand card arcs to discard (apply counter-rotation to land flat) + const handFront = travelingHand.querySelector('.draw-anim-front'); + const heldFront = travelingHeld.querySelector('.draw-anim-front'); + timeline.add({ targets: travelingHand, left: discardRect.left, @@ -1178,6 +1176,16 @@ class CardAnimations { easing: this.getEasing('arc'), }, `-=${T.lift / 2}`); + // Scale hand card font to match discard size + if (handFront) { + timeline.add({ + targets: handFront, + fontSize: (discardRect.width * 0.5) + 'px', + duration: T.arc, + easing: this.getEasing('arc'), + }, `-=${T.arc}`); + } + // Held card arcs to hand slot (apply rotation to match hand position) timeline.add({ targets: travelingHeld, @@ -1193,6 +1201,16 @@ class CardAnimations { easing: this.getEasing('arc'), }, `-=${T.arc + T.lift / 2}`); + // Scale held card font to match hand size + if (heldFront) { + timeline.add({ + targets: heldFront, + fontSize: (handRect.width * 0.5) + 'px', + duration: T.arc, + easing: this.getEasing('arc'), + }, `-=${T.arc}`); + } + // Settle with gentle overshoot timeline.add({ targets: [travelingHand, travelingHeld], @@ -1404,6 +1422,9 @@ class CardAnimations { card.style.top = rect.top + 'px'; card.style.width = rect.width + 'px'; card.style.height = rect.height + 'px'; + // Scale font-size proportionally to card width + const front = card.querySelector('.draw-anim-front'); + if (front) front.style.fontSize = (rect.width * 0.5) + 'px'; if (rotation) { card.style.transform = `rotate(${rotation}deg)`; @@ -1444,9 +1465,8 @@ class CardAnimations { try { anime({ targets: element, - scale: [0.5, 1.25, 1.15], - opacity: [0, 1, 1], - duration: 300, + opacity: [0, 1], + duration: 200, easing: 'easeOutQuad' }); } catch (e) { diff --git a/client/style.css b/client/style.css index 332fddd..e6842ac 100644 --- a/client/style.css +++ b/client/style.css @@ -1156,10 +1156,8 @@ input::placeholder { top: 0; left: 0; z-index: 100; - transform: scale(1.15); - transform-origin: center bottom; border: 3px solid #f4a460 !important; - box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 25px rgba(244, 164, 96, 0.7) !important; + box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4), 0 0 20px rgba(244, 164, 96, 0.6) !important; pointer-events: none; /* No transition - anime.js handles animations */ } @@ -1523,11 +1521,11 @@ input::placeholder { @keyframes heldCardPulse { 0%, 100% { - box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 25px rgba(244, 164, 96, 0.7); + box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4), 0 0 20px rgba(244, 164, 96, 0.6); } 50% { - box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 35px rgba(244, 164, 96, 1), - 0 0 50px rgba(244, 164, 96, 0.5); + box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4), 0 0 30px rgba(244, 164, 96, 0.9), + 0 0 45px rgba(244, 164, 96, 0.4); } }