discoman/python-tdd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

A.4 card-deck stack icon + game_kit applet's Card Decks polarization (×2) tooltip decoration — TDD. Sprint A.4 of [[project-image-based-deck-face-rendering]] (folded down from the originally-standalone Sprint D per [[project-card-deck-icon]] 2026-05-25 PM scope-fold). Replaces the <i class="fa-regular fa-id-badge"> placeholder on .token.deck-variant in the gameboard's Game Kit applet w. a new inline SVG card-stack icon: 3 rect children (rx=2.5, 20×32 viewport units inside a 32×48 viewBox to land 5:8 tarot card aspect), stacked tightly at rest w. ±0.4px vertical micro-offsets (suggests stack depth without separating cards visually), whole stack rotated 5° clockwise via .deck-stack-icon__stack group transform. On :hover / :active / :focus of the parent .token.deck-variant, cards 2 + 3 fan out symmetrically — card 2 translates (-5px, -2px) + rotates -12°, card 3 translates (+5px, -2px) + rotates +12° — card 1 stays put on top. Fan-out CSS pseudo-classes match the existing JS-portal tooltip trigger so the splay animation + tooltip-appearance co-activate as user spec'd. Placeholder card-back design: solid --priUser fill + currentColor stroke (= --terUser); detailed Earthman planet-impact illustration deferred to a future art-asset commit (the SVG structure is ready to receive richer fills + pattern elements without re-jigging the stack/fan transforms). Drop-shadow for "lifted off the felt" depth cue: 0.08rem 0.08rem 0.15rem rgba(0, 0, 0, 0.6) — softer than the my-sign-stage card's tray-card-style 1,1 black silhouette since the icon is small + always on a felt background. SVG itself uses overflow: visible so the fan-out exceeds the viewBox bounds; transform-box: fill-box + transform-origin: 50% 50% ensure rotation centers on each card's own geometric center (not the viewBox center). New _deck_stack_icon.html partial in templates/apps/gameboard/_partials/ keeps the SVG markup DRY for the future room.html pile + deck-bag rollouts (per [[project-card-deck-icon]] "other surfaces deferred to later sprints"). New .tt-x2 style in %tt-token-fields placeholder mixin — --terUser color + font-weight 600 — appended inline in .tt-description for is_polarized=True decks (Earthman today): "106-card Tarot deck (×2)" where the (×2) signals "double-polarized = 6 segments = fills 2× as many seats" per [[project-card-deck-icon]]'s decoration rule. Non-polarized decks (Tarot RWS, future Minchiate) render the description without the suffix. 3 new ITs in GameboardViewTest: SVG card-stack renders w. 3 rect children + fa-id-badge gone; polarized Earthman tooltip carries .tt-x2 w. "×2" content; non-polarized RWS tooltip lacks .tt-x2. Out of scope this commit: the dedicated /game-kit/ page's .gk-deck-card rectangles (different template — _game_kit_sections.html) keep their fa-id-badge for now; folding them into the new icon happens in a follow-up "Card Decks rectangle teardown" sprint per user spec ("by the time we finish A.8 the dynamically shaped rectangles around the deck <i> els and their names will be no more"). Tests: 3 new ITs green; 27/27 GameboardViewTest class green; 1293/1293 IT+UT total green (68s; +3 from A.3-polish's 1290). Visual verify pending: browser refresh expected to show the stacked-3-card icon w. 5° rest tilt, fan-out on hover, tooltip + (×2) decoration on Earthman

Browse Source 
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Disco DeDisco
2026-05-25 00:40:10 -04:00
parent 436a710478
commit b9bb73db69
5 changed files with 123 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
src/static_src/scss/_gameboard.scss
View File

@@ -79,6 +79,51 @@ body.page-gameboard {
.kit-item { font-size: 1.5rem; }
.kit-item { opacity: 0.6; }
// Sprint A.4 — card-deck stack icon (.deck-stack-icon) replaces the
// fa-regular fa-id-badge for .token.deck-variant. 3 stacked card-back
// rects, 5° CW rest tilt, fan-out on hover/active/focus of the parent
// .token (animation + tooltip portal trigger lockstep on the same
// pseudo-class set). See [[project-card-deck-icon]].
.deck-stack-icon {
display: inline-block;
width: 1.5rem; // match the prior fa-id-badge visual weight
height: 2.4rem; // 5:8 tarot card aspect
color: rgba(var(--terUser), 1); // stroke color via currentColor
overflow: visible; // fan-out exceeds the viewBox bounds
filter: drop-shadow(0.08rem 0.08rem 0.15rem rgba(0, 0, 0, 0.6));
.deck-stack-icon__stack {
transform: rotate(5deg);
transform-origin: 50% 50%;
transform-box: fill-box;
transition: transform 0.25s ease;
}
.deck-stack-icon__card {
fill: rgba(var(--priUser), 1);
stroke: currentColor;
stroke-width: 1;
transform-origin: 50% 50%;
transform-box: fill-box;
transition: transform 0.25s ease;
}
// Rest: tightly stacked w. tiny vertical offsets (suggests stack
// depth without separating the cards visually).
.deck-stack-icon__card--1 { transform: translateY(-0.4px); }
.deck-stack-icon__card--3 { transform: translateY( 0.4px); }
}
// Hover/active/focus on the parent .token fans cards 2 + 3 out from
// under card 1; card 1 stays put. Tooltip portal is wired to the
// same `.token:hover` trigger via JS so the splay + tooltip-appearance
// co-activate.
.token.deck-variant:hover .deck-stack-icon,
.token.deck-variant:active .deck-stack-icon,
.token.deck-variant:focus .deck-stack-icon {
.deck-stack-icon__card--2 { transform: translate(-5px, -2px) rotate(-12deg); }
.deck-stack-icon__card--3 { transform: translate( 5px, -2px) rotate( 12deg); }
}
}
}