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

Add gradient backgrounds to all status messages, match final-turn badge size

Browse Source 
- Default gradient on base .status-message (dark green)
- Add round-over/game-over (gold) and reveal (purple) gradient styles
- Tag action prompts (swap, flip, discard) as your-turn type
- Match final-turn badge font size and padding to status message on mobile
- Hide status message when empty

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
adlee-was-taken 2026-02-22 21:31:20 -05:00
parent cb311ec0da
commit cb49fd545b
2 changed files with 29 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
client/app.js
View File

@ -923,16 +923,16 @@ class GolfGame {
this.displayHeldCard(data.card, true);
this.renderGame();
}
this.showToast('Swap with a card or discard', '', 3000);
this.showToast('Swap with a card or discard', 'your-turn', 3000);
break;
case 'can_flip':
this.waitingForFlip = true;
this.flipIsOptional = data.optional || false;
if (this.flipIsOptional) {
this.showToast('Flip a card or skip', '', 3000);
this.showToast('Flip a card or skip', 'your-turn', 3000);
} else {
this.showToast('Flip a face-down card', '', 3000);
this.showToast('Flip a face-down card', 'your-turn', 3000);
}
this.renderGame();
break;
@ -2959,7 +2959,7 @@ class GolfGame {
this.hideToast();
} else {
const remaining = requiredFlips - uniquePositions.length;
this.showToast(`Select ${remaining} more card${remaining > 1 ? 's' : ''} to flip`, '', 5000);
this.showToast(`Select ${remaining} more card${remaining > 1 ? 's' : ''} to flip`, 'your-turn', 5000);
}
return;
}

28
client/style.css
View File

@ -1665,6 +1665,12 @@ input::placeholder {
text-align: center;
white-space: nowrap;
color: #fff;
background: linear-gradient(135deg, #4a6741 0%, #3d5a35 100%);
}
/* Empty status - hide completely */
.status-message:empty {
display: none;
}
.status-message.your-turn {
@ -1684,6 +1690,19 @@ input::placeholder {
color: #fff;
}
/* Round/game over status */
.status-message.round-over,
.status-message.game-over {
background: linear-gradient(135deg, #f0c040 0%, #d4a017 100%);
color: #2d3436;
}
/* Reveal status */
.status-message.reveal {
background: linear-gradient(135deg, #8b7eb8 0%, #6b5b95 100%);
color: #fff;
}
/* Final turn badge - enhanced V3 with countdown */
.final-turn-badge {
display: flex;
@ -1701,7 +1720,7 @@ input::placeholder {
}
.final-turn-badge .final-turn-text {
font-size: 0.85rem;
font-size: 0.9rem;
}
.final-turn-badge.hidden {
@ -5125,11 +5144,14 @@ body.mobile-portrait .mute-btn {
}
body.mobile-portrait .final-turn-badge {
font-size: 0.6rem;
padding: 2px 6px;
padding: 6px 16px;
white-space: nowrap;
}
body.mobile-portrait .final-turn-badge .final-turn-text {
font-size: 1.02rem;
}
/* --- Mobile: Game table — opponents pinned top, rest centered in remaining space --- */
body.mobile-portrait .game-table {
display: flex;