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

28
client/index.html
View File

@ -328,18 +328,24 @@
</div>
<span class="held-label">Holding</span>
</div>
<div id="deck" class="card card-back"></div>
<div class="discard-stack">
<div id="discard" class="card">
<span id="discard-content"></span>
<div class="pile-wrapper">
<span class="pile-label">DRAW</span>
<div id="deck" class="card card-back"></div>
</div>
<div class="pile-wrapper">
<span class="pile-label">DISCARD</span>
<div class="discard-stack">
<div id="discard" class="card">
<span id="discard-content"></span>
</div>
<!-- Floating held card (appears larger over discard when holding) -->
<div id="held-card-floating" class="card card-front held-card-floating hidden">
<span id="held-card-floating-content"></span>
</div>
<button id="discard-btn" class="btn btn-small hidden">Discard</button>
<button id="skip-flip-btn" class="btn btn-small btn-secondary hidden">Skip Flip</button>
<button id="knock-early-btn" class="btn btn-small btn-danger hidden">Knock!</button>
</div>
<!-- Floating held card (appears larger over discard when holding) -->
<div id="held-card-floating" class="card card-front held-card-floating hidden">
<span id="held-card-floating-content"></span>
</div>
<button id="discard-btn" class="btn btn-small hidden">Discard</button>
<button id="skip-flip-btn" class="btn btn-small btn-secondary hidden">Skip Flip</button>
<button id="knock-early-btn" class="btn btn-small btn-danger hidden">Knock!</button>
</div>
</div>
</div>

18
client/style.css
View File

@ -1124,6 +1124,20 @@ input::placeholder {
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 */
/* The .your-turn-to-draw class triggers anime.js startTurnPulse() */
@ -5154,7 +5168,7 @@ body.mobile-portrait .deck-area {
align-items: flex-start;
}
body.mobile-portrait .deck-area > .card,
body.mobile-portrait .deck-area .card,
body.mobile-portrait #deck,
body.mobile-portrait #discard {
width: 64px !important;
@ -5482,7 +5496,7 @@ body.mobile-portrait .ss-next-btn {
padding: 3px 8px;
}
body.mobile-portrait .deck-area > .card,
body.mobile-portrait .deck-area .card,
body.mobile-portrait #deck,
body.mobile-portrait #discard {
width: 60px !important;