From 26bc151458809231724289155df9cb39d037154f Mon Sep 17 00:00:00 2001 From: adlee-was-taken Date: Sun, 22 Feb 2026 18:27:45 -0500 Subject: [PATCH] Move held card to gap above deck area on mobile portrait Position the held card a full card height above the deck (1.15x offset) so it sits in the space between opponents and the draw/discard piles. All three position calculations (app.js x2, card-animations.js) are synced so draw animations land at the correct held position. Co-Authored-By: Claude Opus 4.6 --- client/app.js | 6 +++--- client/card-animations.js | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/client/app.js b/client/app.js index ad5f79f..7ac84fe 100644 --- a/client/app.js +++ b/client/app.js @@ -3544,9 +3544,9 @@ class GolfGame { const cardHeight = deckRect.height; // Position card centered, overlapping both piles (lower than before) - // On mobile portrait, reduce overlap so held card doesn't cover 2-row opponents + // On mobile portrait, place held card fully above the deck/discard area const isMobilePortrait = document.body.classList.contains('mobile-portrait'); - const overlapOffset = cardHeight * (isMobilePortrait ? 0.15 : 0.35); + const overlapOffset = cardHeight * (isMobilePortrait ? 1.15 : 0.35); const cardLeft = centerX - cardWidth / 2; const cardTop = deckRect.top - overlapOffset; this.heldCardFloating.style.left = `${cardLeft}px`; @@ -3609,7 +3609,7 @@ class GolfGame { const cardWidth = deckRect.width; const cardHeight = deckRect.height; const isMobilePortrait = document.body.classList.contains('mobile-portrait'); - const overlapOffset = cardHeight * (isMobilePortrait ? 0.15 : 0.35); + const overlapOffset = cardHeight * (isMobilePortrait ? 1.15 : 0.35); const cardLeft = centerX - cardWidth / 2; const cardTop = deckRect.top - overlapOffset; diff --git a/client/card-animations.js b/client/card-animations.js index afc1808..537e7ba 100644 --- a/client/card-animations.js +++ b/client/card-animations.js @@ -47,7 +47,7 @@ class CardAnimations { const cardWidth = deckRect.width; const cardHeight = deckRect.height; const isMobilePortrait = document.body.classList.contains('mobile-portrait'); - const overlapOffset = cardHeight * (isMobilePortrait ? 0.15 : 0.35); + const overlapOffset = cardHeight * (isMobilePortrait ? 1.15 : 0.35); return { left: centerX - cardWidth / 2,