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

Add DRAW and DISCARD labels above deck and discard piles

Browse Source 
Wrap each pile in a .pile-wrapper with a small label above it.
Fix direct child selectors that broke with the new wrapper nesting.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
adlee-was-taken 2026-02-22 18:23:38 -05:00
parent e9692de6c6
commit 0d5c0c613d
2 changed files with 33 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
client/index.html
View File

@ -328,7 +328,12 @@
</div> </div>
<span class="held-label">Holding</span> <span class="held-label">Holding</span>
</div> </div>
<div class="pile-wrapper">
<span class="pile-label">DRAW</span>
<div id="deck" class="card card-back"></div> <div id="deck" class="card card-back"></div>
</div>
<div class="pile-wrapper">
<span class="pile-label">DISCARD</span>
<div class="discard-stack"> <div class="discard-stack">
<div id="discard" class="card"> <div id="discard" class="card">
<span id="discard-content"></span> <span id="discard-content"></span>
@ -343,6 +348,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="player-section"> <div class="player-section">
<div class="player-area"> <div class="player-area">

18
client/style.css
View File

@ -1124,6 +1124,20 @@ input::placeholder {
align-items: flex-start; align-items: flex-start;
} }
.pile-wrapper {
display: flex;
flex-direction: column;
align-items: center;
}
.pile-label {
font-size: 0.55rem;
font-weight: 700;
letter-spacing: 0.1em;
color: rgba(255, 255, 255, 0.4);
margin-bottom: 3px;
}
/* Gentle pulse when it's your turn to draw - handled by anime.js */ /* Gentle pulse when it's your turn to draw - handled by anime.js */
/* The .your-turn-to-draw class triggers anime.js startTurnPulse() */ /* The .your-turn-to-draw class triggers anime.js startTurnPulse() */
@ -5154,7 +5168,7 @@ body.mobile-portrait .deck-area {
align-items: flex-start; align-items: flex-start;
} }
body.mobile-portrait .deck-area > .card, body.mobile-portrait .deck-area .card,
body.mobile-portrait #deck, body.mobile-portrait #deck,
body.mobile-portrait #discard { body.mobile-portrait #discard {
width: 64px !important; width: 64px !important;
@ -5482,7 +5496,7 @@ body.mobile-portrait .ss-next-btn {
padding: 3px 8px; padding: 3px 8px;
} }
body.mobile-portrait .deck-area > .card, body.mobile-portrait .deck-area .card,
body.mobile-portrait #deck, body.mobile-portrait #deck,
body.mobile-portrait #discard { body.mobile-portrait #discard {
width: 60px !important; width: 60px !important;