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

A.7.5-polish-5 DRY _stat_face.html partial + FLIP-btn SCSS unification + my_sign FLIP DOM move-into-card + universal hover-reveal + instant mid-flip vanish + sea-stage-card image-mode bg fix + multi-line comment syntax cleanup. User-spec 2026-05-25 PM bundle of 5 cleanup threads atop polish-4 (4554c71).
All checks were successful
ci/woodpecker/push/pyswiss Pipeline was successful
Details
ci/woodpecker/push/main Pipeline was successful
Details

Browse Source 
**(1) `_stat_face.html` partial** — extracted to `templates/core/_partials/_stat_face.html` per user 2026-05-25 PM: "Why are there so many individual instances of this feature? Couldn't we call the same DRY partial for each?". One partial covers all 4 stat-block surfaces (sig-stat-block / sea-stat-block / fan-stage-block / my-sign-applet-stat-block) — ~80 lines of duplicated markup collapse to 7 `{% include %}` sites (3 surfaces × 2 faces + applet × 1 face). Args: `face_modifier` (required: "upright"|"reversed"), `label_text` (required: "Emanation"|"Reversal"), `card` (optional TarotCard for applet's server-render path), `keywords_ul_id` (optional id attr on the keyword `<ul>` — sea_stage + fan need `id_sea_stat_upright/reversed` + `id_fan_stat_upright/reversed` for stage-card.js's `populateKeywords` surface-specific selector overrides). The `.stat-face` wrapper that the partial introduces is a no-op for the applet — applet's bespoke `.my-sign-applet-stat-block` rule doesn't `@include stat-block-shared` so `.stat-face` inherits no padding / display-none from the shared mixin.

**(2) FLIP-btn `@mixin flip-btn-base` + `%flip-btn-revealed` + `%flip-btn-mid-flip` primitives** — `_card-deck.scss` head per user 2026-05-25 PM: "unify the many disparate calculations we use for when we allow that FLIP btn to appear and where it appears". Each surface's flip-btn declaration now `@include`s the base (position absolute + zero margin + hidden default opacity 0 + 0.3s transition) and `@extend`s `%flip-btn-revealed` on its surface-specific reveal trigger + `%flip-btn-mid-flip` on its surface-specific `[data-flipping]` selector chain. ~30 lines of duplication collapsed to 6 lines of mixin/placeholder + 3 `@include` + 4 `@extend` calls.

**(3) my_sign FLIP btn moved INSIDE `.sig-stage-card`** + `.my-sign-flip-btn` + `.my-sign-applet-flip-btn` share one positioning rule (`bottom: 0.6rem; left: 0.6rem`) — was a sibling under `.my-sign-stage` positioned via stage-padding-relative `calc(1.5rem + 0.4rem)`. Polish-5 nests it INSIDE the card so positioning is naturally card-relative + the separate `.my-sign-page[data-current-card-id]` centered-mode geometric override (re-deriving offsets from the centred-row layout) is DROPPED entirely. The applet was already inside-card positioned; same `bottom: 0.6rem; left: 0.6rem` rule combines both surfaces in a single `_card-deck.scss` declaration. The applet's `_billboard.scss` flip-btn rule is now just a shim `@include` + `@extend` (the positioning got DRY'd up to the shared rule).

**(4) Hover-reveal everywhere** + instant mid-flip vanish — user-spec 2026-05-25 PM: "The .btn-reveal behavior here should now (1) disappear much earlier, so no independent ease-in/-out logic needed on clicking FLIP; (2) calculate its position more dynamically; be mirrored in the gameboard's My Sign applet. In all places does the hover-to-reveal-FLIP-.btn-reveal effect abate while the card is finishing a FLIP". my_sign main flipped from `display: none → display: inline-flex` (frozen-gated) to opacity-based hover-reveal on `.sig-stage-card:hover` (still gated by `.sig-stage--frozen`). Applet flipped from always-visible to opacity-based hover-reveal on `.my-sign-applet-card:hover`. Fan kept its existing hover-reveal. Mid-flip-hide changed from `opacity: 0 + pointer-events: none` (faded out over the 0.3s transition, which competed w. the click) to `display: none` — INSTANT vanish, no ease-out animation. All 3 surfaces consolidated into one combined `[data-flipping] -> flip-btn` selector list extending `%flip-btn-mid-flip`. The `:has(.flip-btn:hover)` self-pin clause (already present on fan) added to my_sign + applet too — keeps the btn visible while the cursor is on it, otherwise the btn (z-index 25, on top of the card) steals `:hover` from the card the moment the cursor moves onto it + retracts the reveal mid-click.

**(5) `.sea-stage--levity .sea-stage-card` image-mode bg fix** — user-reported 2026-05-25 PM: "the card preview stage in my_sea.html still sports the old card bg (the --secUser here) behind the card img (with the --quiUser box-shadow border)". Same source-order collision pattern as the sea-sig-card fix in polish-4: `.sea-stage--levity .sea-stage-card`'s `@include stage-card-polarity($invert-frame: true)` sets `background: rgba(var(--secUser), 1) + border-color: rgba(var(--priUser), 1)` at specificity 0,2,0 — matches the shared `.sig-stage-card.sig-stage-card--image` comma-list rule's specificity but source-loses to it (levity rule lives at line 2150, comma-list at line 705). Fix: add a `&.sig-stage-card--image { background: transparent; border: 0; }` nested override (0,3,0 specificity) — re-states the transparency under the levity polarity branch so image-mode drawn cards (Minchiate today) don't show a beige card-shape behind the PNG art. The gravity branch was already fine (its mixin call doesn't pass `$invert-frame`).

**(6) Multi-line `{# #}` comment syntax cleanup** — user-spotted 2026-05-25 PM after my polish-5 partial extraction caused visible comment text to leak into rendered HTML on 4 templates (per [[feedback-django-multiline-comments]] / [[feedback-django-comments-single-line-only]] traps the user has flagged before). All multi-line block comments I added in this polish converted to `{% comment %}...{% endcomment %}` form — covers the `_stat_face.html` partial header + 4 template include sites (my_sign.html × 2 blocks, _applet-my-sign.html, _sea_stage.html, game_kit.html).

Tests: 1314/1314 IT+UT total green (72s). No new tests — existing chip-presence + image-mode ITs from polish-4 still pass through the partial extraction. Visual verify 2026-05-25 PM via Claudezilla: my_sign main page (Queen of Coins) renders cleanly via partial w. card+stat-block; applet renders cleanly w. server-filled chip + title; carousel + sea_stage modal work via JS-populated partial includes; my_sign FLIP btn moved into card + hover-reveals + vanishes instantly on FLIP click; sea-stage-card no longer shows --secUser bg behind image-mode PNG art under levity. DRY partial extraction was held out of polish-4 as user-requested separate concern: "hold it for a separate commit, but fold the FLIP btn unification into it as the styling cleanup part" — done.

**Follow-up parked for next sprint**: user-flagged 2026-05-25 PM "If it's interfering to have bespoke rules, just allow the FLIP btn everywhere, including in my_sea.html". This needs (a) dropping the `not card.deck_variant.is_polarized` server-render gate in the applet template, (b) adding a FLIP btn + back-img element to the `_sea_stage.html` modal scaffold, (c) wiring a JS handler in sea.js (currently has no FLIP behavior for drawn-card stage). Out of scope for the polish-5 commit since it's template + JS scope; will pick up as polish-6 or a fresh sprint.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Disco DeDisco
2026-05-25 19:22:08 -04:00
parent a03d0b0cac
commit 1e2041ed9f
7 changed files with 206 additions and 185 deletions
Download Patch File Download Diff File Expand all files Collapse all files

163
src/static_src/scss/_card-deck.scss
View File

@@ -3,6 +3,47 @@
// Shared card display classes (.fan-card, .fan-card-corner, .fan-card-face, .fan-nav)
// extracted from _game-kit.scss; sig-select overlay extracted from _room.scss.
// ── Shared FLIP-btn primitives ───────────────────────────────────────────────
//
// The FLIP btn lives on 3 surfaces (my_sign main stage, my_sign applet, game
// kit fan). Polish-5 2026-05-25 PM unification per user spec: hover-reveal
// everywhere (was display-toggle on my_sign + always-visible on applet);
// `display: none` mid-flip for INSTANT vanish (was opacity-fade — felt sluggish
// since clicks happen faster than the 0.3s ease). The reveal-on-hover transition
// stays smooth for everyday hover, but the moment a FLIP starts the btn pops
// out of layout entirely so it can't visually interfere w. the rotateY mid-spin.
//
// @mixin flip-btn-base Position absolute + zero margin + hidden default
// (opacity:0 + pointer-events:none) + 0.3s opacity
// transition for the smooth hover-reveal. Surfaces
// add z-index + position offsets (most use bottom-
// left-of-card; fan uses transform-based carousel-
// shift since its btn is at wrap-level).
// %flip-btn-revealed opacity:1 + pointer-events:auto — applied by
// each surface's hover-trigger selector chain.
// %flip-btn-mid-flip display:none — applied by each surface's
// `[data-flipping]` selector chain. Instant vanish
// (display isn't animatable); supersedes the
// hover-reveal entirely while rotation is in
// flight. Each surface's selector chain differs
// because the btn-to-card DOM relationship varies
// (inside the card on my_sign + applet post-polish-
// 5; sibling under common wrap for the fan).
@mixin flip-btn-base {
position: absolute;
margin: 0;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
%flip-btn-revealed {
opacity: 1;
pointer-events: auto;
}
%flip-btn-mid-flip {
display: none;
}
// ── Shared stage-card polarity rules ─────────────────────────────────────────
//
// Used by .sea-stage-card (Sea Select polarity is fixed by the deck-stack the
@@ -519,34 +560,32 @@
// Positioned at bottom-left of the focused card slot (carousel-shifted, so its
// translateX matches .tarot-fan's leftward shift).
.fan-flip-btn {
position: absolute;
@include flip-btn-base;
z-index: 25;
top: 50%;
left: 50%;
// Carousel-shifted bottom-left-of-focused-card. The btn sits at wrap level
// (not inside any card) so positioning has to derive from the carousel
// geometry vars rather than the bottom-left-of-card pattern the other 2
// surfaces use. --fan-stage-shift + --fan-card-w/h scale w. breakpoint
// via the parent `.tarot-fan-wrap`.
transform: translate(calc(-50% - var(--fan-stage-shift) - var(--fan-card-w) / 2 + 1.5rem),
calc(-50% + var(--fan-card-h) / 2 - 1.5rem));
margin: 0;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
// Reveal when the focused card OR the FLIP button itself is hovered. Without
// the `.fan-flip-btn:hover` clause the button (z-index 25, sitting on top of
// the card) steals :hover from the card the moment the cursor moves onto it,
// flipping :has() false, fading the button to opacity:0 + pointer-events:none,
// and letting the in-flight click pass through to the dialog backdrop (which
// closes the modal). Keeping the button in the trigger list pins it visible
// while the cursor is on it.
// Hover-reveal. The `.fan-flip-btn:hover` clause pins the btn visible while
// the cursor is on it — without it, the btn (z-index 25, on top of the card)
// steals :hover from the card the moment the cursor moves onto it, retracting
// the reveal + letting the in-flight click pass through to the dialog backdrop
// (which closes the modal). `.fan-touch-revealed` is the touch-device fallback
// (no :hover on touchscreens) — game-kit.js toggles it on first card tap.
.tarot-fan-wrap:has(.fan-card--active:hover) .fan-flip-btn,
.tarot-fan-wrap:has(.fan-flip-btn:hover) .fan-flip-btn,
.tarot-fan-wrap.fan-touch-revealed .fan-flip-btn {
opacity: 1;
pointer-events: auto;
}
.tarot-fan-wrap:has(.fan-card[data-flipping]) .fan-flip-btn {
opacity: 0;
pointer-events: none;
@extend %flip-btn-revealed;
}
// Mid-flip-hide selector for the fan is consolidated into the unified
// 3-surface rule below the `.my-sign-flip-btn` / `.my-sign-applet-flip-btn`
// declarations. See `_card-deck.scss` polish-5 FLIP-btn block.
.fan-nav {
position: absolute;
@@ -867,23 +906,10 @@ html:has(.sig-backdrop) {
// pair aligned in the centred row.
.sig-stat-block { align-self: center; }
// FLIP was positioned via `left: calc(1.5rem + 0.4rem)` (default
// rule below) assuming the card sat flush against the stage's
// padded-left edge — true on the picker's left-anchored layout but
// wrong here w. `justify-content: center` (the card moves to
// wherever the group's left edge lands).
// Re-derive FLIP's offsets from the centred geometry:
// group width = card + gap + stat = 2 * --sig-card-w + 0.75rem
// card's left edge (in stage) = (100% - group width) / 2
// card's bottom edge (in stage) = 50% - (cardHeight / 2)
// = 50% - --sig-card-w * 0.8
// (cardHeight = w × 8/5 = w × 1.6)
// The +0.4rem on each lands FLIP just inside the card's bottom-left
// corner, matching the picker-side positioning intent.
.my-sign-flip-btn {
left: calc((100% - 2 * var(--sig-card-w) - 0.75rem) / 2 + 0.4rem);
bottom: calc(50% - var(--sig-card-w) * 0.8 + 0.4rem);
}
// Polish-5: FLIP-btn centered-mode offset override DROPPED. The btn is
// now positioned INSIDE the card (`.sig-stage-card { position: relative }`
// + btn `bottom: 0.6rem; left: 0.6rem`), so it follows the card naturally
// wherever the stage positions it — no per-layout-mode geometric calc.
// Landing collapses since the hex is server-side gone — just DEL is
// left + that's `position: absolute`. `position: static` here drops
@@ -963,34 +989,44 @@ html:has(.sig-backdrop) {
background: rgba(var(--duoUser), 1);
}
.my-sign-flip-btn {
position: absolute;
// Polish-5: my_sign main + applet FLIP btns share one positioning rule.
// Both live INSIDE their card (`.sig-stage-card` / `.my-sign-applet-card`,
// both `position: relative`) so `bottom: 0.6rem; left: 0.6rem` anchors
// universally to card-bottom-left w/o needing surface-specific calc().
.my-sign-flip-btn,
.my-sign-applet-flip-btn {
@include flip-btn-base;
z-index: 25;
bottom: 0.4rem;
// .sig-stage has padding-left: 1.5rem; this offset places the btn just
// inside the stage card's bottom-left corner (the card sits flex-end /
// flex-start, anchored to the stage's left padding).
left: calc(1.5rem + 0.4rem);
margin: 0;
display: none;
bottom: 0.6rem;
left: 0.6rem;
}
// FLIP btn appears only when the stage is frozen (post-OK confirm). Hover-only
// previews don't reveal the polarity toggle — the user hasn't committed yet.
.my-sign-stage.sig-stage--frozen .my-sign-flip-btn {
display: inline-flex;
// Hover-reveal on the parent card. `:has(.flip-btn:hover)` pins the btn
// visible while the cursor is on it — without this clause, the btn (z-index
// 25, on top of the card) steals :hover from the card the moment the cursor
// moves onto it, retracting the reveal + breaking the click flow. Same
// pattern the fan carousel uses.
//
// my_sign main still gates on `.sig-stage--frozen` — hover-only previews
// don't reveal the polarity toggle until the user has committed a sig.
.my-sign-stage.sig-stage--frozen .sig-stage-card:hover .my-sign-flip-btn,
.my-sign-stage.sig-stage--frozen .sig-stage-card:has(.my-sign-flip-btn:hover) .my-sign-flip-btn,
.my-sign-applet-card:hover .my-sign-applet-flip-btn,
.my-sign-applet-card:has(.my-sign-applet-flip-btn:hover) .my-sign-applet-flip-btn {
@extend %flip-btn-revealed;
}
// Sprint A.5 — hide FLIP btn during the flip animation. `data-flipping="1"`
// is set on .sig-stage-card by _flipPolarityAnimated (polarized) AND
// _flipToBackAnimated (non-polarized) for the 500ms animation duration; CSS
// :has() selects the parent .my-sign-stage when any child carries that attr
// and zeros the btn so it doesn't visually interfere w. the rotateY mid-spin.
// Mirrors the tarot-fan view's pattern (`_card-deck.scss:459` —
// `.tarot-fan-wrap:has(.fan-card[data-flipping]) .fan-flip-btn`).
.my-sign-stage:has(.sig-stage-card[data-flipping]) .my-sign-flip-btn {
opacity: 0;
pointer-events: none;
// Unified mid-flip-hide across all 3 surfaces. `[data-flipping]="1"` is set on
// the card by each surface's FLIP handler for the 500ms rotation duration;
// `%flip-btn-mid-flip`'s `display: none` makes the btn vanish INSTANTLY (per
// user spec — no ease-out logic competing w. the click). Selector chains
// differ per surface because the btn-to-card DOM relationship varies (btn is
// INSIDE the card on my_sign + applet post-polish-5; sibling under .tarot-
// fan-wrap for the fan).
.sig-stage-card[data-flipping] .my-sign-flip-btn,
.my-sign-applet-card[data-flipping] .my-sign-applet-flip-btn,
.tarot-fan-wrap:has(.fan-card[data-flipping]) .fan-flip-btn {
@extend %flip-btn-mid-flip;
}
// ─── Mini card grid ───────────────────────────────────────────────────────────
@@ -2120,6 +2156,17 @@ $_sea-title-els: '.fan-card-name, .sig-qualifier-above, .sig-qualifier-below, .f
color: rgba(var(--priUser), 1);
.fan-card-arcana,
.fan-card-corner { color: rgba(var(--priUser), 1); }
// Polish-5: image-mode override mirrors the sea-sig-card pattern. The
// `$invert-frame: true` arg above sets `--secUser` bg + `--priUser`
// border, which then OUT-CASCADES the shared image-mode comma-list rule
// (same 0,2,0 specificity but later in source). Re-state transparency
// here so image-mode drawn cards (Minchiate today) don't show a beige
// card-shape behind the PNG art.
&.sig-stage-card--image {
background: transparent;
border: 0;
}
}
.sea-stage--gravity .sea-stage-card {
@include stage-card-polarity(