coolguy/coorl-lost-cities
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Make overlapped hand cards legible with a corner index

Browse Source 
Both hands overlap, and the centered value is buried on every card but the
topmost one, so a tightly packed hand became unreadable. Cards overlap
left-over-right, so the one strip that stays visible is each card's left edge --
which is exactly where the top corner already sat. The markup had the corner index
all along; it just wasn't carrying its weight.

So the top-left corner gets a small ivory backing chip and a size bump, which lets
it read even when it falls over the card behind it -- the same reason a fanned
hand of playing cards stays readable. The rival's revealed cards had their corner
index hidden entirely (mini cards set it to display:none); it's re-enabled, scaled
to the 44px card, and their overlap eased from -17 to -14px to give it room.

Verified in a browser at 900/1180/1400px: an eight-card hand overlapping at 900px
now reads every card off its corner, and the rival's revealed cards read off
theirs.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01XBQKgvBbxbheiTF1AVy1Sh
This commit is contained in:
coolguy
2026-07-15 17:23:49 +09:00
co-authored by Claude Opus 4.8
parent 138d7c858d
commit 3e7dda0d22
1 changed files with 35 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/styles.css
+35 -8
View File
@@ -108,7 +108,7 @@ button:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
display: flex;
transform: translateX(-50%);
}
.opponent-hand .card { margin-left: -17px; }
.opponent-hand .card { margin-left: -14px; }
.opponent-hand .card:first-child { margin-left: 0; }
.menu-wrap { position: absolute; top: 16px; right: 24px; z-index: 20; }
@@ -367,15 +367,28 @@ button.card:disabled { cursor: default; }
}
.card__corner {
position: absolute;
left: 8px;
left: 6px;
display: flex;
flex-direction: column;
align-items: center;
color: var(--card-color);
font-family: Georgia, serif;
}
.card__corner--top { top: 7px; }
/* Cards overlap left-over-right, so the only strip that stays visible is each
card's left edge -- exactly where the top corner sits. It carries a small ivory
backing so the index reads even when it falls over the card behind it, which is
what lets the hand overlap tightly and still be legible. */
.card__corner--top {
top: 6px;
z-index: 2;
padding: 2px 5px 3px;
border-radius: 7px;
background: color-mix(in srgb, var(--ivory) 82%, transparent);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
}
.card__corner--bottom { right: 8px; bottom: 7px; left: auto; }
.card__corner--top b { font-size: 20px; font-weight: 700; }
.card__corner--top i { margin-top: 0; font-size: 13px; }
.card__corner b { font-size: 18px; line-height: 1; }
.card__corner i { margin-top: 1px; font-size: 12px; font-style: normal; line-height: 1; }
.card__center {
@@ -418,11 +431,25 @@ button.card:disabled { cursor: default; }
border-width: 2px;
border-radius: 5px;
}
.card--mini .card__corner { display: none; }
.card--mini .card__center { inset: 4px; }
.card--mini .card__center b { font-size: 20px; }
.card--mini .card__center i { margin-top: 2px; font-size: 11px; }
.card--mini .card__center--handshake i { font-size: 19px; }
/* The rival's revealed cards overlap -14px, leaving a ~30px strip. The centered
value is buried on every card but the top one, so a small top-left index rides
in the visible strip -- the same trick as the player's hand, scaled down. */
.card--mini .card__corner--bottom { display: none; }
.card--mini .card__corner--top {
top: 3px;
left: 3px;
padding: 1px 3px 2px;
border-radius: 5px;
flex-direction: row;
gap: 2px;
align-items: baseline;
}
.card--mini .card__corner--top b { font-size: 13px; }
.card--mini .card__corner--top i { font-size: 8px; }
.card--mini .card__center { inset: 4px; top: 14px; }
.card--mini .card__center b { font-size: 17px; }
.card--mini .card__center i { margin-top: 2px; font-size: 10px; }
.card--mini .card__center--handshake i { font-size: 16px; }
.card--mini .card__center small { display: none; }
.card--mini::after { inset: 3px; border-radius: 3px; }
.card--mini .card__flip-cover { border-radius: 5px; }