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

Move discard button below held card on mobile portrait

Browse Source 
Position the button centered beneath the held card instead of to the
right side. Reset writing-mode to horizontal and add width:auto.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
adlee-was-taken 2026-02-22 18:39:33 -05:00
parent 4a5cfb68f1
commit 9866fb8e92
2 changed files with 17 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
client/app.js
View File

@ -3558,11 +3558,21 @@ class GolfGame {
this.heldCardFloating.style.fontSize = `${cardWidth * 0.35}px`; this.heldCardFloating.style.fontSize = `${cardWidth * 0.35}px`;
} }
// Position discard button attached to right side of held card // Position discard button
const buttonLeft = cardLeft + cardWidth; // Right edge of card (no gap) if (isMobilePortrait) {
const buttonTop = cardTop + cardHeight * 0.3; // Vertically centered on card // Below the held card, centered
this.discardBtn.style.left = `${buttonLeft}px`; const btnRect = this.discardBtn.getBoundingClientRect();
this.discardBtn.style.top = `${buttonTop}px`; const buttonLeft = cardLeft + (cardWidth - (btnRect.width || 70)) / 2;
const buttonTop = cardTop + cardHeight + 4;
this.discardBtn.style.left = `${buttonLeft}px`;
this.discardBtn.style.top = `${buttonTop}px`;
} else {
// Right side of held card (desktop)
const buttonLeft = cardLeft + cardWidth;
const buttonTop = cardTop + cardHeight * 0.3;
this.discardBtn.style.left = `${buttonLeft}px`;
this.discardBtn.style.top = `${buttonTop}px`;
}
if (card.rank === '★') { if (card.rank === '★') {
this.heldCardFloating.classList.add('joker'); this.heldCardFloating.classList.add('joker');

3
client/style.css
View File

@ -5191,7 +5191,8 @@ body.mobile-portrait #discard-btn {
position: fixed; position: fixed;
writing-mode: horizontal-tb; writing-mode: horizontal-tb;
text-orientation: initial; text-orientation: initial;
padding: 8px 16px; width: auto;
padding: 6px 18px;
font-size: 0.8rem; font-size: 0.8rem;
border-radius: 8px; border-radius: 8px;
} }