2026-04-08 11:52:49 -04:00
|
|
|
|
// ─── Card deck primitives — fan cards + sig-select overlay ─────────────────────
|
|
|
|
|
|
//
|
|
|
|
|
|
// 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.
|
|
|
|
|
|
|
2026-04-30 21:01:52 -04:00
|
|
|
|
// ── Shared stage-card polarity rules ─────────────────────────────────────────
|
|
|
|
|
|
//
|
|
|
|
|
|
// Used by .sea-stage-card (Sea Select polarity is fixed by the deck-stack the
|
|
|
|
|
|
// gamer drew from) and .fan-card[data-polarity="..."] (Game Kit fan, FLIP-able).
|
|
|
|
|
|
// Sets title/qualifier color uniformly across both upright and reversal slots;
|
|
|
|
|
|
// optionally inverts the card frame (bg ⇄ border) for levity polarity, and
|
|
|
|
|
|
// applies an optional text-shadow (Sea uses one for the deeper card-art look;
|
|
|
|
|
|
// Fan does not).
|
|
|
|
|
|
@mixin stage-card-polarity($titles-color, $text-shadow: null, $invert-frame: false) {
|
|
|
|
|
|
@if $invert-frame {
|
|
|
|
|
|
background: rgba(var(--secUser), 1);
|
|
|
|
|
|
border-color: rgba(var(--priUser), 1);
|
|
|
|
|
|
}
|
|
|
|
|
|
.fan-card-name,
|
|
|
|
|
|
.sig-qualifier-above,
|
|
|
|
|
|
.sig-qualifier-below,
|
|
|
|
|
|
.fan-card-reversal-name,
|
|
|
|
|
|
.fan-card-reversal-qualifier {
|
|
|
|
|
|
color: $titles-color;
|
|
|
|
|
|
@if $text-shadow { text-shadow: $text-shadow; }
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// ── Shared stat-block contents ───────────────────────────────────────────────
|
|
|
|
|
|
//
|
|
|
|
|
|
// Used by .sig-stat-block (Sig Select), .sea-stat-block (Sea Select), and
|
|
|
|
|
|
// .fan-stage-block (Game Kit fan). The mixin emits the *inner* rules — stat-face
|
|
|
|
|
|
// padding/swap, stat-keywords, sig-info tooltip + header/title/type/effect/index.
|
|
|
|
|
|
// Each call site keeps its own outer rule (background, border, animation, button
|
|
|
|
|
|
// positioning + class hooks, visibility triggers).
|
|
|
|
|
|
@mixin stat-block-shared {
|
|
|
|
|
|
// SPIN / FYI buttons — pinned to the top-right edge
|
|
|
|
|
|
.spin-btn { position: absolute; top: -1rem; right: -1rem; margin: 0; z-index: 50; }
|
|
|
|
|
|
.fyi-btn { position: absolute; top: 1.25rem; right: -1rem; margin: 0; z-index: 50; }
|
|
|
|
|
|
|
|
|
|
|
|
// PRV / NXT — pinned to bottom corners; hidden by default. Sig + fan reveal
|
|
|
|
|
|
// them on .fyi-open (see each site's outer rule). Sea overrides to always
|
|
|
|
|
|
// visible (its FYI panel is permanent, not hover-toggled).
|
|
|
|
|
|
.fyi-prev, .fyi-next {
|
|
|
|
|
|
display: none;
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
bottom: -1rem;
|
|
|
|
|
|
margin: 0;
|
|
|
|
|
|
z-index: 70;
|
|
|
|
|
|
}
|
|
|
|
|
|
.fyi-prev { left: -1rem; }
|
|
|
|
|
|
.fyi-next { right: -1rem; }
|
|
|
|
|
|
|
|
|
|
|
|
.stat-face {
|
|
|
|
|
|
display: none;
|
|
|
|
|
|
padding: calc(var(--sig-card-w, 120px) * 0.37)
|
|
|
|
|
|
calc(var(--sig-card-w, 120px) * 0.1)
|
|
|
|
|
|
calc(var(--sig-card-w, 120px) * 0.08);
|
|
|
|
|
|
}
|
|
|
|
|
|
.stat-face--upright { display: block; }
|
|
|
|
|
|
|
|
|
|
|
|
&.is-reversed {
|
feat: My Sea applet dynamic population + lay/leave POSITION_LABELS swap fix + My Sign applet stat-block + Brief-fied sign-gate + --duoUser olive on all four personal-data surfaces. Six visual+structural items batched across the dashboard/billboard/gameboard.
(1) **My Sea applet dynamic population.** Applet at `_applet-my-sea.html` was referencing an undefined `latest_draw_cards` template var — fell through to "No draws yet" even when the user had an active draw. New helpers in `apps/gameboard/models.py`: `DRAW_ORDER` + `POSITION_LABELS` constants (Python mirrors of the JS dicts in `my_sea.html:274-293`) + `latest_draw_slots(user)` builder that pairs each spread position w. its drawn card + display label + polarity. Wired through `gameboard()` + `toggle_game_applets()` views as `my_sea_slots`. Applet now renders all spread slots in DRAW_ORDER: filled = `.my-sea-slot--filled.my-sea-slot--{gravity,levity}` w. corner-tl + face (name + arcana) + corner-br (mirror) markup (same shape language as my_sign.html `.sig-stage-card`), empty = `.my-sea-slot--empty` w. `0.15rem dashed rgba(var(--terUser), 1)` border (matches the picker's `.sea-card-slot` style exactly so the applet reads as a true scaled-down twin). Container queries (`container-type: size` on `.my-sea-scroll`) lift `--slot-w` to fill the applet's vertical aperture (`min(100cqi, calc((100cqh - 1rem) * 5 / 8))` carves the label row). Position labels pulled tight against the slot's bottom border (`margin-top: -0.15rem` crosses the border line) + vertically stretched (`transform: scaleY(1.4)` mirroring `.sea-pos-label` in `_card-deck.scss:1671-1684`) — empty-slot labels keep the same `--secUser` ink as filled-slot labels for title cohesion across the row. Horizontal-scroll on multi-card spreads via mousewheel — `bindMySeaWheel()` in `gameboard.js` translates vertical wheel events to `scrollLeft += deltaY` (lifted verbatim from `bindPaletteWheel` in `dashboard.js:7-14`).
(2) **lay/leave POSITION_LABELS swap fix.** User caught in the Escape Velocity picker that LEFT slot read "Lay" + BOTTOM slot read "Leave" — opposite of traditional Celtic Cross semantics (LEFT = Behind/past, BOTTOM = Beneath/root). Root cause: POSITION_LABELS for both Waite-Smith + Escape Velocity had `lay`/`leave` slug→label assignments inverted vs the CSS grid's spatial mapping (`_card-deck.scss:1276-1279` puts slug `lay` at BOTTOM, slug `leave` at LEFT). Fix in 5 places: `my_sea.html:287,292` JS POSITION_LABELS (WS: lay→"Beneath", leave→"Behind"; EV: lay→"Lay", leave→"Leave"), `gameboard/models.py:44-47` Python mirror, `test_game_my_sea.py:618-619` FT label-assertion table, `_sea_overlay.html:28,53` annotated comments (`sea-pos-leave` → "Behind (past) — CC pos 6 / EV pos 4"; `sea-pos-lay` → "Beneath (root) — CC pos 4 / EV pos 3"). Slug-to-CSS mapping, DRAW_ORDER, + DB persistence unchanged → no migrations, no data invalidation. **Crucial for Voronoi mapping correctness** per user spec.
(3) **My Sign applet — stage-card layout + stat-block beside.** Applet card markup upgraded to mirror my_sign.html `.sig-stage-card`: corner-tl + face (name + arcana centred) + corner-br (mirror, rotated 180°). Sized to fill applet height via container queries (`--applet-card-w: min(48cqi, 62.5cqh)` — 48cqi caps the card at half the row to leave room for the stat-block). Sibling `.my-sign-applet-stat-block` partial added — emanation/reversal face label + keyword list (from `card.keywords_upright` / `keywords_reversed` keyed off `significator_reversed`), no SPIN/FYI buttons (applet is read-only). Styling cribbed from `.sig-stat-block` in `_card-deck.scss:595-607` — priUser-translucent bg + terUser border + matching `--applet-card-w` sizing.
(4) **My Sea sign-gate refactored to Brief banner.** Was an inline `.my-sea-sign-gate` div w. its own SCSS — broke from the project's `Brief.showBanner` portal pattern. Refactored to a shared `_my_sea_sign_gate_brief.html` partial that fires `Brief.showBanner` w. title="Sign required" + line_text="Look!—pick your sign before drawing the Sea." + post_url=`/billboard/my-sign/`. Brief portals to the page-level h2 anchor via `note.js`'s `_alignToH2` (gaussian-glass `.note-banner` shell, FYI button → my-sign picker, NVM dismisses). Modifier class `.my-sea-sign-gate-brief` added post-render for FT selector disambiguation. note.js load hoisted to gameboard.html `{% block scripts %}` + the top of `my_sea.html {% block content %}` (single load per page — note.js declares `const Brief = ...` at global scope, second load = SyntaxError). All `.my-sea-sign-gate{,--applet,__line,__actions,__back,__fyi}` SCSS deleted. FTs (`test_no_sig_renders_lookline_gate_on_standalone_page` + 5 siblings) + ITs (`test_my_sea_applet_fires_sign_gate_brief_for_user_without_sig` etc.) updated to assert `.note-banner.my-sea-sign-gate-brief` + the JS-rendered FYI/NVM buttons inside the Brief shell.
(5) **Levity card text invisibility fix.** My-sea applet levity slots (--secUser bg) rendered their corner-rank + suit-icon invisible because `.fan-card-corner` carries a global `color: rgba(var(--secUser), 0.75)` rule at `_card-deck.scss:312-319` (specificity 0,1,0) that out-specifics the slot's inherited `color: --priUser`. Same trap as the `.fan-card-name { color: --quiUser }` global. Fix at `_gameboard.scss` inside the levity rule: explicit `.fan-card-corner { color: rgba(var(--priUser), 1) }` + `.fan-card-name { color: rgba(var(--priUser), 1) }` + `.fan-card-arcana { color: rgba(var(--priUser), 0.7) }` overrides at (1,3,1) specificity — beats the globals without `!important`. **Trap captured in memory** — pattern repeats across game-kit, my-sign, my-sea so worth pinning.
(6) **--duoUser olive on all five personal-data surfaces.** Per user spec, the four "personal" applets (My Sign on billboard, My Sea on gameboard, My Sky on dashboard) + the standalone Dashsky page + the standalone My Sign page got `background-color: rgba(var(--duoUser), 1)` so they read as a unified olive-bg group across navigation surfaces. For Dashsky specifically, the form column also got the override (`.sky-page .sky-form-col { background: --duoUser }`) — the base `.sky-form-col { background: --priUser }` (`_sky.scss:137`, shared w. the in-room CAST SKY modal) was leaving the dashsky form column purple inside the otherwise-olive page. Scoped to `.sky-page` so the in-room modal's purple form-col stays intact (sits over --secUser room bg, needs that contrast). One detour caught: tried `body.page-sky { background-color: --duoUser }` to fill the gap below .sky-page's content-sized aperture but it bled to navbar + footer (which sit outside .container) — reverted.
**TDD coverage**: 3 new ITs in `apps/gameboard/tests/integrated/test_views.py` — `test_my_sea_applet_renders_drawn_cards_in_draw_order` (SAO 1-of-3 fills `lay` slot, cover/crown render as empty placeholders), `test_my_sea_applet_labels_match_locked_spread` (SAO labels exactly Situation/Action/Outcome), `test_my_sea_applet_waite_smith_labels_post_fix` (regression pin for the WS Cover/Cross/Crown/**Beneath**/Before/**Behind** sequence post-swap-fix). Existing my-sea applet ITs updated to match the new selector vocabulary (`.my-sea-slot--filled` instead of `.my-sea-card`, Brief script substring instead of `.my-sea-sign-gate--applet`). 6 my-sea FTs updated to the Brief-banner contract. 1214/1214 IT/UT green.
**.gitignore**: temporary entry for `src/apps/epic/static/apps/epic/images/cards-faces/minchiate-fiorentine/` until images get renamed — flagged for removal once the rename lands. (Per user's wget download of the Minchiate faces into the gameboard cards/ tree this session.)
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-22 15:19:34 -04:00
|
|
|
|
opacity: 1;
|
|
|
|
|
|
|
2026-04-30 21:01:52 -04:00
|
|
|
|
.stat-face--upright { display: none; }
|
|
|
|
|
|
.stat-face--reversed { display: block; }
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.stat-face-label {
|
|
|
|
|
|
font-size: calc(var(--sig-card-w, 120px) * 0.063);
|
|
|
|
|
|
text-transform: uppercase;
|
|
|
|
|
|
letter-spacing: 0.09em;
|
|
|
|
|
|
opacity: 0.7;
|
|
|
|
|
|
color: rgba(var(--terUser), 1);
|
|
|
|
|
|
margin: 0 0 calc(var(--sig-card-w, 120px) * 0.07);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.stat-keywords {
|
|
|
|
|
|
list-style: none;
|
|
|
|
|
|
padding: 0;
|
|
|
|
|
|
margin: 0;
|
|
|
|
|
|
|
|
|
|
|
|
li {
|
|
|
|
|
|
font-size: calc(var(--sig-card-w, 120px) * 0.083);
|
|
|
|
|
|
padding: calc(var(--sig-card-w, 120px) * 0.042) 0;
|
|
|
|
|
|
opacity: 1;
|
|
|
|
|
|
border-bottom: 0.05rem solid rgba(var(--terUser), 0.18);
|
|
|
|
|
|
&:last-child { border-bottom: none; }
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// FYI tooltip — covers the entire stat block when open
|
|
|
|
|
|
.sig-info {
|
|
|
|
|
|
display: none;
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
inset: 0;
|
|
|
|
|
|
z-index: 60;
|
|
|
|
|
|
background-color: rgba(var(--tooltip-bg), 0.6);
|
|
|
|
|
|
backdrop-filter: blur(6px);
|
|
|
|
|
|
border-radius: 0.4rem;
|
|
|
|
|
|
border: 0.1rem solid rgba(var(--priYl), 0.35);
|
|
|
|
|
|
padding: 0.75rem;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
gap: 0.4rem;
|
|
|
|
|
|
overflow-y: auto;
|
|
|
|
|
|
}
|
|
|
|
|
|
.sig-info-header { display: flex; flex-direction: column; gap: 0.1rem; }
|
|
|
|
|
|
.sig-info-title {
|
|
|
|
|
|
font-size: calc(var(--sig-card-w, 120px) * 0.093);
|
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
|
margin: 0;
|
|
|
|
|
|
&--energies, &--operations { color: rgba(var(--quaUser), 1); }
|
|
|
|
|
|
}
|
|
|
|
|
|
.sig-info-type {
|
|
|
|
|
|
font-size: calc(var(--sig-card-w, 120px) * 0.058);
|
|
|
|
|
|
opacity: 0.7;
|
|
|
|
|
|
text-transform: uppercase;
|
|
|
|
|
|
letter-spacing: 0.05em;
|
|
|
|
|
|
flex-shrink: 0;
|
|
|
|
|
|
}
|
|
|
|
|
|
.sig-info-effect {
|
|
|
|
|
|
flex: 1;
|
|
|
|
|
|
font-size: calc(var(--sig-card-w, 120px) * 0.075);
|
|
|
|
|
|
margin: 0;
|
|
|
|
|
|
line-height: 1.55;
|
|
|
|
|
|
.card-ref { color: rgba(var(--terUser), 1); font-weight: 600; }
|
|
|
|
|
|
}
|
|
|
|
|
|
.sig-info-index {
|
|
|
|
|
|
font-size: calc(var(--sig-card-w, 120px) * 0.063);
|
|
|
|
|
|
opacity: 0.55;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2026-04-08 11:52:49 -04:00
|
|
|
|
// ── Tarot fan modal ──────────────────────────────────────────────────────────
|
|
|
|
|
|
|
|
|
|
|
|
#id_tarot_fan_dialog {
|
|
|
|
|
|
position: fixed;
|
|
|
|
|
|
inset: 0;
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
max-width: none;
|
|
|
|
|
|
max-height: none;
|
|
|
|
|
|
margin: 0;
|
|
|
|
|
|
padding: 0;
|
|
|
|
|
|
border: none;
|
|
|
|
|
|
background: rgba(0, 0, 0, 0.88);
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
|
|
|
|
&::backdrop { display: none; } // Dialog IS the backdrop
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.tarot-fan-wrap {
|
2026-04-30 21:01:52 -04:00
|
|
|
|
// Fan card dimensions + carousel layout — overrideable per breakpoint via
|
|
|
|
|
|
// @media rules. game-kit.js reads --fan-carousel-step at runtime so the JS
|
|
|
|
|
|
// transform stack stays in sync with the CSS-driven sizing.
|
|
|
|
|
|
--fan-card-w: 220px;
|
|
|
|
|
|
--fan-card-h: 340px;
|
|
|
|
|
|
--fan-stage-shift: 130px;
|
|
|
|
|
|
--fan-carousel-step: 200px;
|
|
|
|
|
|
|
2026-04-08 11:52:49 -04:00
|
|
|
|
position: relative;
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
perspective: 900px;
|
|
|
|
|
|
|
|
|
|
|
|
button {
|
|
|
|
|
|
box-shadow: none;
|
|
|
|
|
|
|
|
|
|
|
|
&:hover, &.active {
|
|
|
|
|
|
box-shadow: none;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.tarot-fan {
|
|
|
|
|
|
position: relative;
|
2026-04-30 21:01:52 -04:00
|
|
|
|
width: var(--fan-card-w);
|
|
|
|
|
|
height: var(--fan-card-h);
|
|
|
|
|
|
// Shift the whole carousel left so the focused card sits left-of-center,
|
|
|
|
|
|
// making symmetric room on the right for .fan-stage-block.
|
|
|
|
|
|
transform: translateX(calc(-1 * var(--fan-stage-shift)));
|
|
|
|
|
|
transition: transform 0.3s ease;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// ── Mobile breakpoints ───────────────────────────────────────────────────────
|
|
|
|
|
|
// Override the four geometry vars on .tarot-fan-wrap; everything downstream
|
|
|
|
|
|
// (.tarot-fan size, .fan-card size, carousel stride read by JS, .fan-stage-block
|
|
|
|
|
|
// width via --sig-card-w, stat-face / stat-keywords typography) scales from them.
|
|
|
|
|
|
|
|
|
|
|
|
// Portrait mobile — true phone widths (≤ 480px). Narrow desktop windows in
|
|
|
|
|
|
// portrait orientation stay on the desktop default.
|
|
|
|
|
|
@media (orientation: portrait) and (max-width: 480px) {
|
|
|
|
|
|
.tarot-fan-wrap {
|
|
|
|
|
|
--fan-card-w: 150px;
|
|
|
|
|
|
--fan-card-h: 230px;
|
|
|
|
|
|
--fan-stage-shift: 90px;
|
|
|
|
|
|
--fan-carousel-step: 130px;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// Landscape mobile — short viewport, fan needs to stay above the fold
|
|
|
|
|
|
@media (orientation: landscape) and (max-height: 500px) {
|
|
|
|
|
|
.tarot-fan-wrap {
|
|
|
|
|
|
--fan-card-w: 150px;
|
|
|
|
|
|
--fan-card-h: 235px;
|
|
|
|
|
|
--fan-stage-shift: 90px;
|
|
|
|
|
|
--fan-carousel-step: 130px;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// ── Fan stage block — symmetric right-of-focused-card stat panel ───────────
|
|
|
|
|
|
//
|
|
|
|
|
|
// Visual styling mirrors .sig-stat-block / .sea-stat-block (see Step-6 DRY note).
|
|
|
|
|
|
// Uses --sig-card-w: 220px so the cascaded font-size / padding calc() rules in
|
|
|
|
|
|
// the sea-stat-block block (which key off --sig-card-w) produce fan-card-sized
|
|
|
|
|
|
// typography. Animation/positioning is fan-specific (carousel symmetric slot,
|
|
|
|
|
|
// careen-out on nav, idle-reveal).
|
|
|
|
|
|
.fan-stage-block {
|
|
|
|
|
|
--sig-card-w: var(--fan-card-w);
|
|
|
|
|
|
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
top: 50%;
|
|
|
|
|
|
left: 50%;
|
|
|
|
|
|
width: var(--sig-card-w);
|
|
|
|
|
|
height: calc(var(--sig-card-w) * 8 / 5);
|
fix: significator_reversed=polarity bug + Pattern B name-swap rendering + qualifier-aware applet faces + sticky PAID DRAW + cooldown anchor on User + stat-block polarity unification across Sig/Sea/Fan/applets
Five-thread sprint atop 53cd7af; all 1238 IT/UT green (no FTs run per [[feedback-ft-run-discipline]]).
**Thread 1 — User.significator_reversed is the POLARITY axis, not orientation.** The saved sig was rendering as a gravity reversal when the user saved a levity emanation. Root cause: `my_sign.html` JS post-save load called `_toggleOrientation()` whenever `revInput.value==='1'` (SPIN-ing a card whose flag only meant "polarity=levity"); `_applet-my-sign.html` applied `.stage-card--reversed` + `keywords_reversed` for the same flag. Fix: JS drops the `_toggleOrientation()` call (saved sigs are always upright in their polarity, never spun); the applet drops the rotation class, swaps to `my-sign-applet-card--{levity,gravity}` modifier, and always renders `keywords_upright` / "Emanation". `data-polarity` cascades correctly. Memory: [[feedback-significator-reversed-is-polarity]].
**Thread 2 — qualifier rendering on the My Sign + My Sea applets.** Both applets were rendering name only — no qualifier word. Added `TarotCard.applet_face(polarity, reversed)` (model method) + `User.sig_face` (delegator for the saved sig) returning `{title, qualifier, qualifier_first}` payload that mirrors `populateCard` in `stage-card.js`. `latest_draw_slots()` augments each slot dict w. `face`. Templates render `.fan-card-qualifier` + `.fan-card-name` in the order the payload dictates (non-Major: qualifier-above-title; Major+qualifier: title-with-trailing-comma above qualifier; polarity-split: single-line title). Typography matched to title (same bold, same size, same color via `color: inherit` w. polarity-pin at 0,3,0 specificity to beat `_card-deck.scss:376-383`'s 0,2,0 `.fan-card-face .fan-card-name` rule that out-cascades when loaded after gameboard).
**Thread 3 — My Sea cooldown bugs.** Two: (a) PAID DRAW button reverted to FREE DRAW after one navigation cycle because `my_sea_paid_draw` deleted the row at commit time — without a row, `quota_spent=False` on next render. (b) Brief's "next free draw at" was anchored to the most recent paid draw, not the original free draw. Fix: new `User.last_free_draw_at` field (set in `my_sea_lock` when a fresh row lands AND user wasn't already in cooldown — i.e., this is a tokenless free draw); paid draws NEVER touch it. New `MySeaDraw.paid_through_at` field stamped at commit time + cleared in `my_sea_lock` when the first card of the paid session lands (one-shot credit per user-spec: "each redraw needs a new token"). `my_sea_paid_draw` no longer deletes the row — clears hand+deposit, sets `paid_through_at`, redirects to `?phase=picker`. View's landing button uses `show_paid_draw` (`deposit_reserved OR paid_through_at`) so PAID DRAW persists across navigation until the paid session's first card lands. Brief reads `user.next_free_draw_at` (= `last_free_draw_at + 24h`) w. row-fallback for legacy test fixtures. 11 new ITs (`MySeaCooldownAnchoredToFreeDrawTest`, `UserFreeDrawCooldownPropertyTest`, expanded `MySeaPhasePickerQueryParamTest`, expanded `my_sea_lock` tests). Existing `test_paid_draw_deletes_active_draw_row` rewritten as `test_paid_draw_preserves_row_and_sets_paid_through_at`. 1 new FT pinning the navigation-persistence regression. Memory: [[feedback-my-sea-cooldown-design]].
**Thread 4 — Pattern B / B' Major reversal name-swap.** Card 34's My Sea applet rendered the reversal as "Animal Powers, Patrilineage" (Patrilineage treated as a qualifier). User-locked semantics: for Majors w. BOTH polarity qualifiers AND a `reversal_qualifier`, the `reversal_qualifier` field carries the NAME SWAP for the reversal face; the polarity qualifier persists across both faces. Affected cards: 2-5 (Pope/Horseman), 10-15 (Elements), 22-33 (Zodiac → Houses), 34-35 (Lunars), 41 (Asteroid Belt). Pattern B': cards 16-18 (Realms — Disco Inferno → Shame etc.) reversal face drops the qualifier entirely; new `TarotCard.reversal_drops_qualifier` BooleanField marks these (set True on 16-18 via `epic/0010_set_reversal_drops_qualifier_realms.py` data migration). `applet_face()` + `stage-card.js::populateCard` both branch on `arcana==MAJOR AND reversal_qualifier AND polarity_qualifier` → Pattern B/B' rendering. Non-Major `reversal_qualifier` semantics unchanged (middle court: "Queen of Crowns" stays as title, "Vacant" renders as the reversal-face qualifier). New data attr `data-reversal-drops-qualifier` added to `my_sign.html`, `_sig_select_overlay.html`, `_tarot_fan.html` so stage-card.js can read it via dataset. `card_dict()` extended w. the same field. 3 new UTs (`TarotCardAppletFaceTest`: Pattern B name swap, Pattern B' qualifier drop, non-Major regression pin). Old `test_reversed_uses_reversal_qualifier_with_comma_for_major` deleted (it pinned the conflated old behavior).
**Thread 5 — unified card + stat-block polarity convention across all 6 surfaces** (Sig Select, Sea Select stage modal, Game Kit fan, My Sign applet, My Sea applet, room.html). User-locked: card and adjacent stat block always carry OPPOSITE-polarity bgs (gravity card --priUser → stat block --secUser; levity card --secUser → stat block --priUser). `.is-reversed` (SPIN) is preview-only — never shifts bg. Per-card scoping (NOT page-wide) — drawn sea cards each carry their own polarity from the deck stack; `.sea-stage--{gravity,levity}` parent rules + `.tarot-fan-wrap[data-polarity=...]` parent rules cascade to their respective stat blocks. `game-kit.js` `_populateStage` + `_flipActive` mirror `_polarity` onto `.tarot-fan-wrap` so SCSS can pick it up without touching the stat block directly. Sea-stat-block was previously stuck at --priUser regardless of polarity; fan-stage-block ditto. Both inverted now. Memory: [[feedback-card-polarity-convention]].
**Bundled polish across the same surfaces** (each one a small visible item the user spotted during the sprint):
- My Sign applet card: levity polarity flips bg to --secUser + border to --priUser + ink to --quiUser (matches page stage card at `_card-deck.scss:1002-1019`). Gravity stat block flips to --secUser bg w. --quiUser label ink + --priUser keyword ink (matches `_card-deck.scss:1042-1046`).
- Qualifier + title share typography (font-size, weight, polarity-color, text-wrap). `.fan-card-face { gap: 0 }` + `line-height: 1.15` so qualifier sits directly above title at the title's own line-height. `.fan-card-arcana { margin-top }` reserves breathing room below.
- `.fan-card-qualifier:empty { display: none }` collapses polarity-split / Major-no-qualifier cards cleanly.
**Memory recorded**:
1. [[feedback-ft-run-discipline]] — re-pinned 2026-05-23 after I burned a multi-minute full-FT-suite run mid-task. Default loop is IT/UT only. FT runs must be ONE test method by full dotted path; never a whole file; never re-run an already-green FT.
2. [[feedback-significator-reversed-is-polarity]] — the flag is polarity (FLIP), not orientation (SPIN); SPIN never persisted; saved sigs always upright in their polarity.
3. [[feedback-card-polarity-convention]] — opposite-polarity stat-block bg, per-card scoping, SPIN never shifts bg, the full color table.
4. [[feedback-my-sea-cooldown-design]] — cooldown anchored to User.last_free_draw_at, paid draws never reset it, paid_through_at is a sticky one-shot credit, button state machine.
**Files** (every uncommitted file folded in — session work + pre-existing modifications):
Models / migrations:
- `apps/epic/models.py` — `applet_face()` extended w. Pattern B/B' branches; new `reversal_drops_qualifier` BooleanField.
- `apps/epic/migrations/0009_reversal_drops_qualifier.py` — schema.
- `apps/epic/migrations/0010_set_reversal_drops_qualifier_realms.py` — data migration setting flag True on cards 16-18.
- `apps/epic/utils.py` — `card_dict` carries `reversal_drops_qualifier`.
- `apps/gameboard/models.py` — `paid_through_at` field; `latest_draw_slots()` attaches `face` payload per slot; `active_draw_for` docstring refreshed.
- `apps/gameboard/migrations/0003_myseadraw_paid_through_at.py` — schema.
- `apps/lyric/models.py` — `last_free_draw_at` field; `free_draw_cooldown_active` + `next_free_draw_at` props; `sig_face` delegator.
- `apps/lyric/migrations/0013_user_last_free_draw_at.py` — schema.
Views:
- `apps/gameboard/views.py` — `my_sea` view button state machine (`show_paid_draw` / `show_gate_view` / `show_picker`); `my_sea_lock` sets `last_free_draw_at` on free-draw + clears `paid_through_at` on paid-session first card; `my_sea_paid_draw` preserves row + stamps `paid_through_at`.
JS:
- `apps/epic/static/apps/epic/stage-card.js` — `fromDataset` reads `reversal_drops_qualifier`; `populateCard` branches Pattern B / B' for the reversal face.
- `apps/gameboard/static/apps/gameboard/game-kit.js` — mirrors `_polarity` onto `.tarot-fan-wrap` so SCSS can invert the fan-stage-block bg per active card.
Templates:
- `templates/apps/billboard/my_sign.html` — JS drops `_toggleOrientation()` on saved-sig load; sig-card grid carries `data-reversal-drops-qualifier`.
- `templates/apps/billboard/_partials/_applet-my-sign.html` — drops `stage-card--reversed`, adds polarity modifier, renders qualifier via `sig_face` payload, always shows Emanation keywords + label.
- `templates/apps/gameboard/_partials/_applet-my-sea.html` — renders qualifier via `slot.face` payload (Pattern B/B' aware).
- `templates/apps/gameboard/_partials/_sig_select_overlay.html` + `_tarot_fan.html` — `data-reversal-drops-qualifier` added to sig-card grid + fan cards.
- `templates/apps/gameboard/my_sea.html` — landing button form swaps to `show_paid_draw` / `show_gate_view` flags.
SCSS:
- `static_src/scss/_billboard.scss` — My Sign applet card polarity inversion (levity bg + ink), polarity stat-block inversion (gravity → --secUser bg), qualifier+title shared typography, polarity-aware ink via `color: inherit`.
- `static_src/scss/_card-deck.scss` — sea-stat-block polarity rules (`.sea-stage--gravity/levity .sea-stat-block`), fan-stage-block polarity rules (`.tarot-fan-wrap[data-polarity] .fan-stage-block`), comments documenting fallback bgs.
- `static_src/scss/_gameboard.scss` — `.my-sea-slot--filled.--gravity/--levity` pin `color: inherit` on `.fan-card-corner`, `.fan-card-qualifier`, `.fan-card-name`, `.fan-card-arcana` (0,3,0 beats global 0,2,0). Slot label keeps original wrap-sibling placement w. `z-index: 2` to render above the dotted bottom border on empty slots.
Tests:
- `apps/billboard/tests/integrated/test_views.py` — updated `test_my_sign_applet_renders_card_when_sig_set` to assert polarity modifier + qualifier text + Emanation-only; new `test_my_sign_applet_renders_gravity_qualifier_when_not_reversed`.
- `apps/epic/tests/unit/test_models.py` — `TarotCardAppletFaceTest` (Pattern B name swap, Pattern B' qualifier drop, non-Major regression pin, polarity-split, reversal qualifier fallback).
- `apps/gameboard/tests/integrated/test_views.py` — `MySeaCooldownAnchoredToFreeDrawTest` (5 tests pinning cooldown anchor on User, sticky PAID DRAW, paid-through credit consumption); `UserFreeDrawCooldownPropertyTest` (4 tests); expanded `MySeaPhasePickerQueryParamTest` w. paid-through-shows-PAID-DRAW-btn assertion; expanded `my_sea_lock` tests (free-draw-anchors-last_free_draw_at, paid-draw-leaves-anchor-alone, first-paid-card-consumes-credit); My Sea applet qualifier IT (Major comma format end-to-end).
- `functional_tests/test_game_my_sea.py` — `test_paid_draw_commits_token_and_redirects_to_picker` updated to assert row preservation + paid_through_at stamping; new `test_paid_draw_btn_persists_after_navigation_without_card_draw` pinning the user-reported regression.
Code architected by Disco DeDisco <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-23 15:06:35 -04:00
|
|
|
|
// Fallback bg when no `.tarot-fan-wrap[data-polarity]` parent (test
|
|
|
|
|
|
// fixtures, etc.). Live polarity inversion lives in the parent rule
|
|
|
|
|
|
// below — `.tarot-fan-wrap[data-polarity=...] .fan-stage-block`.
|
2026-04-30 21:01:52 -04:00
|
|
|
|
background: rgba(var(--priUser), 1);
|
|
|
|
|
|
border-radius: 0.4rem;
|
|
|
|
|
|
border: 0.1rem solid rgba(var(--terUser), 0.15);
|
|
|
|
|
|
color: rgba(var(--secUser), 1);
|
|
|
|
|
|
z-index: 15;
|
|
|
|
|
|
|
|
|
|
|
|
// Symmetric counterpart to the carousel shift: stat block lives at +stage-shift
|
|
|
|
|
|
// from screen-center, mirroring the focused card at -stage-shift.
|
|
|
|
|
|
transform: translate(calc(-50% + var(--fan-stage-shift)), -50%) translateX(120vw);
|
|
|
|
|
|
opacity: 0;
|
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
|
// Careen-out (default → no .is-revealed): swift exit, fade trails the slide
|
|
|
|
|
|
transition: transform 0.2s cubic-bezier(.5,0,.75,0),
|
|
|
|
|
|
opacity 0.2s ease 0.1s;
|
|
|
|
|
|
|
|
|
|
|
|
&.is-revealed {
|
|
|
|
|
|
transform: translate(calc(-50% + var(--fan-stage-shift)), -50%) translateX(0);
|
|
|
|
|
|
opacity: 1;
|
|
|
|
|
|
pointer-events: auto;
|
|
|
|
|
|
// Reveal: gentler ease-out, opacity leads slightly
|
|
|
|
|
|
transition: transform 0.6s ease-out,
|
|
|
|
|
|
opacity 0.5s ease-out 0.1s;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
@include stat-block-shared;
|
|
|
|
|
|
|
|
|
|
|
|
&.fyi-open {
|
|
|
|
|
|
.sig-info { display: flex; }
|
|
|
|
|
|
.fyi-prev,
|
|
|
|
|
|
.fyi-next { display: inline-flex; }
|
|
|
|
|
|
}
|
2026-04-08 11:52:49 -04:00
|
|
|
|
}
|
|
|
|
|
|
|
fix: significator_reversed=polarity bug + Pattern B name-swap rendering + qualifier-aware applet faces + sticky PAID DRAW + cooldown anchor on User + stat-block polarity unification across Sig/Sea/Fan/applets
Five-thread sprint atop 53cd7af; all 1238 IT/UT green (no FTs run per [[feedback-ft-run-discipline]]).
**Thread 1 — User.significator_reversed is the POLARITY axis, not orientation.** The saved sig was rendering as a gravity reversal when the user saved a levity emanation. Root cause: `my_sign.html` JS post-save load called `_toggleOrientation()` whenever `revInput.value==='1'` (SPIN-ing a card whose flag only meant "polarity=levity"); `_applet-my-sign.html` applied `.stage-card--reversed` + `keywords_reversed` for the same flag. Fix: JS drops the `_toggleOrientation()` call (saved sigs are always upright in their polarity, never spun); the applet drops the rotation class, swaps to `my-sign-applet-card--{levity,gravity}` modifier, and always renders `keywords_upright` / "Emanation". `data-polarity` cascades correctly. Memory: [[feedback-significator-reversed-is-polarity]].
**Thread 2 — qualifier rendering on the My Sign + My Sea applets.** Both applets were rendering name only — no qualifier word. Added `TarotCard.applet_face(polarity, reversed)` (model method) + `User.sig_face` (delegator for the saved sig) returning `{title, qualifier, qualifier_first}` payload that mirrors `populateCard` in `stage-card.js`. `latest_draw_slots()` augments each slot dict w. `face`. Templates render `.fan-card-qualifier` + `.fan-card-name` in the order the payload dictates (non-Major: qualifier-above-title; Major+qualifier: title-with-trailing-comma above qualifier; polarity-split: single-line title). Typography matched to title (same bold, same size, same color via `color: inherit` w. polarity-pin at 0,3,0 specificity to beat `_card-deck.scss:376-383`'s 0,2,0 `.fan-card-face .fan-card-name` rule that out-cascades when loaded after gameboard).
**Thread 3 — My Sea cooldown bugs.** Two: (a) PAID DRAW button reverted to FREE DRAW after one navigation cycle because `my_sea_paid_draw` deleted the row at commit time — without a row, `quota_spent=False` on next render. (b) Brief's "next free draw at" was anchored to the most recent paid draw, not the original free draw. Fix: new `User.last_free_draw_at` field (set in `my_sea_lock` when a fresh row lands AND user wasn't already in cooldown — i.e., this is a tokenless free draw); paid draws NEVER touch it. New `MySeaDraw.paid_through_at` field stamped at commit time + cleared in `my_sea_lock` when the first card of the paid session lands (one-shot credit per user-spec: "each redraw needs a new token"). `my_sea_paid_draw` no longer deletes the row — clears hand+deposit, sets `paid_through_at`, redirects to `?phase=picker`. View's landing button uses `show_paid_draw` (`deposit_reserved OR paid_through_at`) so PAID DRAW persists across navigation until the paid session's first card lands. Brief reads `user.next_free_draw_at` (= `last_free_draw_at + 24h`) w. row-fallback for legacy test fixtures. 11 new ITs (`MySeaCooldownAnchoredToFreeDrawTest`, `UserFreeDrawCooldownPropertyTest`, expanded `MySeaPhasePickerQueryParamTest`, expanded `my_sea_lock` tests). Existing `test_paid_draw_deletes_active_draw_row` rewritten as `test_paid_draw_preserves_row_and_sets_paid_through_at`. 1 new FT pinning the navigation-persistence regression. Memory: [[feedback-my-sea-cooldown-design]].
**Thread 4 — Pattern B / B' Major reversal name-swap.** Card 34's My Sea applet rendered the reversal as "Animal Powers, Patrilineage" (Patrilineage treated as a qualifier). User-locked semantics: for Majors w. BOTH polarity qualifiers AND a `reversal_qualifier`, the `reversal_qualifier` field carries the NAME SWAP for the reversal face; the polarity qualifier persists across both faces. Affected cards: 2-5 (Pope/Horseman), 10-15 (Elements), 22-33 (Zodiac → Houses), 34-35 (Lunars), 41 (Asteroid Belt). Pattern B': cards 16-18 (Realms — Disco Inferno → Shame etc.) reversal face drops the qualifier entirely; new `TarotCard.reversal_drops_qualifier` BooleanField marks these (set True on 16-18 via `epic/0010_set_reversal_drops_qualifier_realms.py` data migration). `applet_face()` + `stage-card.js::populateCard` both branch on `arcana==MAJOR AND reversal_qualifier AND polarity_qualifier` → Pattern B/B' rendering. Non-Major `reversal_qualifier` semantics unchanged (middle court: "Queen of Crowns" stays as title, "Vacant" renders as the reversal-face qualifier). New data attr `data-reversal-drops-qualifier` added to `my_sign.html`, `_sig_select_overlay.html`, `_tarot_fan.html` so stage-card.js can read it via dataset. `card_dict()` extended w. the same field. 3 new UTs (`TarotCardAppletFaceTest`: Pattern B name swap, Pattern B' qualifier drop, non-Major regression pin). Old `test_reversed_uses_reversal_qualifier_with_comma_for_major` deleted (it pinned the conflated old behavior).
**Thread 5 — unified card + stat-block polarity convention across all 6 surfaces** (Sig Select, Sea Select stage modal, Game Kit fan, My Sign applet, My Sea applet, room.html). User-locked: card and adjacent stat block always carry OPPOSITE-polarity bgs (gravity card --priUser → stat block --secUser; levity card --secUser → stat block --priUser). `.is-reversed` (SPIN) is preview-only — never shifts bg. Per-card scoping (NOT page-wide) — drawn sea cards each carry their own polarity from the deck stack; `.sea-stage--{gravity,levity}` parent rules + `.tarot-fan-wrap[data-polarity=...]` parent rules cascade to their respective stat blocks. `game-kit.js` `_populateStage` + `_flipActive` mirror `_polarity` onto `.tarot-fan-wrap` so SCSS can pick it up without touching the stat block directly. Sea-stat-block was previously stuck at --priUser regardless of polarity; fan-stage-block ditto. Both inverted now. Memory: [[feedback-card-polarity-convention]].
**Bundled polish across the same surfaces** (each one a small visible item the user spotted during the sprint):
- My Sign applet card: levity polarity flips bg to --secUser + border to --priUser + ink to --quiUser (matches page stage card at `_card-deck.scss:1002-1019`). Gravity stat block flips to --secUser bg w. --quiUser label ink + --priUser keyword ink (matches `_card-deck.scss:1042-1046`).
- Qualifier + title share typography (font-size, weight, polarity-color, text-wrap). `.fan-card-face { gap: 0 }` + `line-height: 1.15` so qualifier sits directly above title at the title's own line-height. `.fan-card-arcana { margin-top }` reserves breathing room below.
- `.fan-card-qualifier:empty { display: none }` collapses polarity-split / Major-no-qualifier cards cleanly.
**Memory recorded**:
1. [[feedback-ft-run-discipline]] — re-pinned 2026-05-23 after I burned a multi-minute full-FT-suite run mid-task. Default loop is IT/UT only. FT runs must be ONE test method by full dotted path; never a whole file; never re-run an already-green FT.
2. [[feedback-significator-reversed-is-polarity]] — the flag is polarity (FLIP), not orientation (SPIN); SPIN never persisted; saved sigs always upright in their polarity.
3. [[feedback-card-polarity-convention]] — opposite-polarity stat-block bg, per-card scoping, SPIN never shifts bg, the full color table.
4. [[feedback-my-sea-cooldown-design]] — cooldown anchored to User.last_free_draw_at, paid draws never reset it, paid_through_at is a sticky one-shot credit, button state machine.
**Files** (every uncommitted file folded in — session work + pre-existing modifications):
Models / migrations:
- `apps/epic/models.py` — `applet_face()` extended w. Pattern B/B' branches; new `reversal_drops_qualifier` BooleanField.
- `apps/epic/migrations/0009_reversal_drops_qualifier.py` — schema.
- `apps/epic/migrations/0010_set_reversal_drops_qualifier_realms.py` — data migration setting flag True on cards 16-18.
- `apps/epic/utils.py` — `card_dict` carries `reversal_drops_qualifier`.
- `apps/gameboard/models.py` — `paid_through_at` field; `latest_draw_slots()` attaches `face` payload per slot; `active_draw_for` docstring refreshed.
- `apps/gameboard/migrations/0003_myseadraw_paid_through_at.py` — schema.
- `apps/lyric/models.py` — `last_free_draw_at` field; `free_draw_cooldown_active` + `next_free_draw_at` props; `sig_face` delegator.
- `apps/lyric/migrations/0013_user_last_free_draw_at.py` — schema.
Views:
- `apps/gameboard/views.py` — `my_sea` view button state machine (`show_paid_draw` / `show_gate_view` / `show_picker`); `my_sea_lock` sets `last_free_draw_at` on free-draw + clears `paid_through_at` on paid-session first card; `my_sea_paid_draw` preserves row + stamps `paid_through_at`.
JS:
- `apps/epic/static/apps/epic/stage-card.js` — `fromDataset` reads `reversal_drops_qualifier`; `populateCard` branches Pattern B / B' for the reversal face.
- `apps/gameboard/static/apps/gameboard/game-kit.js` — mirrors `_polarity` onto `.tarot-fan-wrap` so SCSS can invert the fan-stage-block bg per active card.
Templates:
- `templates/apps/billboard/my_sign.html` — JS drops `_toggleOrientation()` on saved-sig load; sig-card grid carries `data-reversal-drops-qualifier`.
- `templates/apps/billboard/_partials/_applet-my-sign.html` — drops `stage-card--reversed`, adds polarity modifier, renders qualifier via `sig_face` payload, always shows Emanation keywords + label.
- `templates/apps/gameboard/_partials/_applet-my-sea.html` — renders qualifier via `slot.face` payload (Pattern B/B' aware).
- `templates/apps/gameboard/_partials/_sig_select_overlay.html` + `_tarot_fan.html` — `data-reversal-drops-qualifier` added to sig-card grid + fan cards.
- `templates/apps/gameboard/my_sea.html` — landing button form swaps to `show_paid_draw` / `show_gate_view` flags.
SCSS:
- `static_src/scss/_billboard.scss` — My Sign applet card polarity inversion (levity bg + ink), polarity stat-block inversion (gravity → --secUser bg), qualifier+title shared typography, polarity-aware ink via `color: inherit`.
- `static_src/scss/_card-deck.scss` — sea-stat-block polarity rules (`.sea-stage--gravity/levity .sea-stat-block`), fan-stage-block polarity rules (`.tarot-fan-wrap[data-polarity] .fan-stage-block`), comments documenting fallback bgs.
- `static_src/scss/_gameboard.scss` — `.my-sea-slot--filled.--gravity/--levity` pin `color: inherit` on `.fan-card-corner`, `.fan-card-qualifier`, `.fan-card-name`, `.fan-card-arcana` (0,3,0 beats global 0,2,0). Slot label keeps original wrap-sibling placement w. `z-index: 2` to render above the dotted bottom border on empty slots.
Tests:
- `apps/billboard/tests/integrated/test_views.py` — updated `test_my_sign_applet_renders_card_when_sig_set` to assert polarity modifier + qualifier text + Emanation-only; new `test_my_sign_applet_renders_gravity_qualifier_when_not_reversed`.
- `apps/epic/tests/unit/test_models.py` — `TarotCardAppletFaceTest` (Pattern B name swap, Pattern B' qualifier drop, non-Major regression pin, polarity-split, reversal qualifier fallback).
- `apps/gameboard/tests/integrated/test_views.py` — `MySeaCooldownAnchoredToFreeDrawTest` (5 tests pinning cooldown anchor on User, sticky PAID DRAW, paid-through credit consumption); `UserFreeDrawCooldownPropertyTest` (4 tests); expanded `MySeaPhasePickerQueryParamTest` w. paid-through-shows-PAID-DRAW-btn assertion; expanded `my_sea_lock` tests (free-draw-anchors-last_free_draw_at, paid-draw-leaves-anchor-alone, first-paid-card-consumes-credit); My Sea applet qualifier IT (Major comma format end-to-end).
- `functional_tests/test_game_my_sea.py` — `test_paid_draw_commits_token_and_redirects_to_picker` updated to assert row preservation + paid_through_at stamping; new `test_paid_draw_btn_persists_after_navigation_without_card_draw` pinning the user-reported regression.
Code architected by Disco DeDisco <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-23 15:06:35 -04:00
|
|
|
|
// Fan-stage-block polarity inversion — sig convention applied to Game Kit
|
|
|
|
|
|
// (user-spec 2026-05-23). The active card's polarity is mirrored onto the
|
|
|
|
|
|
// shared `.tarot-fan-wrap` ancestor by `game-kit.js:_populateStage` and
|
|
|
|
|
|
// `_flipActive` so the stat block can pick up the opposite-polarity bg
|
|
|
|
|
|
// without JS having to touch the stat block directly.
|
|
|
|
|
|
.tarot-fan-wrap[data-polarity="gravity"] .fan-stage-block {
|
|
|
|
|
|
background: rgba(var(--secUser), 1);
|
|
|
|
|
|
border-color: rgba(var(--priUser), 0.15);
|
|
|
|
|
|
color: rgba(var(--priUser), 1);
|
|
|
|
|
|
.stat-face-label { color: rgba(var(--quiUser), 1); }
|
|
|
|
|
|
.stat-keywords li {
|
|
|
|
|
|
color: rgba(var(--priUser), 1);
|
|
|
|
|
|
border-bottom-color: rgba(var(--priUser), 0.18);
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.tarot-fan-wrap[data-polarity="levity"] .fan-stage-block {
|
|
|
|
|
|
background: rgba(var(--priUser), 1);
|
|
|
|
|
|
border-color: rgba(var(--terUser), 0.15);
|
|
|
|
|
|
color: rgba(var(--secUser), 1);
|
|
|
|
|
|
.stat-face-label { color: rgba(var(--terUser), 1); }
|
|
|
|
|
|
.stat-keywords li {
|
|
|
|
|
|
color: rgba(var(--quiUser), 1);
|
|
|
|
|
|
border-bottom-color: rgba(var(--terUser), 0.18);
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2026-04-08 11:52:49 -04:00
|
|
|
|
.fan-card {
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
inset: 0;
|
2026-04-30 21:01:52 -04:00
|
|
|
|
width: var(--fan-card-w);
|
|
|
|
|
|
height: var(--fan-card-h);
|
2026-04-08 11:52:49 -04:00
|
|
|
|
border-radius: 0.75rem;
|
|
|
|
|
|
background: rgba(var(--priUser), 1);
|
|
|
|
|
|
border: 0.1rem solid rgba(var(--secUser), 0.4);
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
transition: transform 0.25s ease, opacity 0.25s ease;
|
|
|
|
|
|
transform-style: preserve-3d;
|
|
|
|
|
|
|
|
|
|
|
|
&--active {
|
|
|
|
|
|
border-color: rgba(var(--secUser), 1);
|
|
|
|
|
|
box-shadow: 0 0 2rem rgba(var(--secUser), 0.3);
|
|
|
|
|
|
}
|
2026-04-29 15:00:37 -04:00
|
|
|
|
|
2026-04-30 21:01:52 -04:00
|
|
|
|
// SPIN — whole card rotates (carousel transform + rotate(180deg) is combined
|
|
|
|
|
|
// in JS via updateFan/spinBtn handler, since the inline transform owns the
|
|
|
|
|
|
// carousel layout). Inner spans swap opacity so the upright fades and the
|
|
|
|
|
|
// reversal pops — matches sig/sea pattern.
|
|
|
|
|
|
&.stage-card--reversed {
|
|
|
|
|
|
.fan-card-reversal-qualifier,
|
|
|
|
|
|
.fan-card-reversal-name { opacity: 1; }
|
|
|
|
|
|
.fan-card-name,
|
|
|
|
|
|
.sig-qualifier-above,
|
|
|
|
|
|
.sig-qualifier-below { opacity: 0.25; }
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// FLIP — polarity-aware coloring. Default (no data-polarity) is gravity:
|
|
|
|
|
|
// priUser bg, secUser border. Levity inverts to secUser bg + priUser border.
|
|
|
|
|
|
&[data-polarity="levity"] {
|
|
|
|
|
|
@include stage-card-polarity(
|
|
|
|
|
|
$titles-color: rgba(var(--quiUser), 1),
|
|
|
|
|
|
$invert-frame: true,
|
|
|
|
|
|
);
|
|
|
|
|
|
.fan-card-corner { color: rgba(var(--priUser), 0.75); }
|
|
|
|
|
|
.fan-card-arcana,
|
|
|
|
|
|
.fan-card-name-group { color: rgba(var(--priUser), 0.85); }
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// FLIP — animation runs via Element.animate() in JS (game-kit.js _flipActive)
|
|
|
|
|
|
// so the rotateY layer stacks on top of the carousel inline transform
|
|
|
|
|
|
// (translateX/rotateY/scale + optional SPIN rotate(180deg)).
|
|
|
|
|
|
|
2026-04-29 15:00:37 -04:00
|
|
|
|
.fan-card-corner { padding-top: 0.25rem; }
|
2026-04-08 11:52:49 -04:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.fan-card-corner {
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
gap: 0.15rem;
|
|
|
|
|
|
line-height: 1;
|
|
|
|
|
|
color: rgba(var(--secUser), 0.75);
|
2026-04-29 15:00:37 -04:00
|
|
|
|
padding-left: 0.5rem; // outer-edge breathing room; --br rotation makes this right-side
|
2026-04-08 11:52:49 -04:00
|
|
|
|
|
|
|
|
|
|
&--tl { top: 0.4rem; left: 0.4rem; }
|
|
|
|
|
|
&--br { bottom: 0.4rem; right: 0.4rem; transform: rotate(180deg); }
|
|
|
|
|
|
|
2026-04-30 21:01:52 -04:00
|
|
|
|
// Corner rank + suit icon scale with the card so they shrink on mobile
|
|
|
|
|
|
// breakpoints alongside .fan-card. 0.109 of card-width ≈ 24px @ 220px (the
|
|
|
|
|
|
// original 1.5rem default).
|
2026-04-08 11:52:49 -04:00
|
|
|
|
.fan-corner-rank {
|
2026-04-30 21:01:52 -04:00
|
|
|
|
font-size: calc(var(--fan-card-w, 220px) * 0.109);
|
2026-04-08 11:52:49 -04:00
|
|
|
|
font-weight: bold;
|
|
|
|
|
|
padding: 0.18rem 0;
|
|
|
|
|
|
}
|
2026-04-29 15:00:37 -04:00
|
|
|
|
// Icon always at the outer card edge regardless of rank width
|
2026-04-30 21:01:52 -04:00
|
|
|
|
i {
|
|
|
|
|
|
font-size: calc(var(--fan-card-w, 220px) * 0.109);
|
|
|
|
|
|
align-self: flex-start;
|
|
|
|
|
|
}
|
2026-04-08 11:52:49 -04:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.fan-card-face {
|
2026-04-30 21:01:52 -04:00
|
|
|
|
// Padding + gaps scale with card width so they stay proportional on mobile.
|
|
|
|
|
|
padding: calc(var(--fan-card-w) * 0.057);
|
2026-04-08 11:52:49 -04:00
|
|
|
|
text-align: center;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
2026-04-30 21:01:52 -04:00
|
|
|
|
gap: calc(var(--fan-card-w) * 0.023);
|
|
|
|
|
|
// Face flips on SPIN; corners stay put because they live outside .fan-card-face
|
|
|
|
|
|
transition: transform 0.4s ease;
|
|
|
|
|
|
|
|
|
|
|
|
.fan-card-face-upright,
|
|
|
|
|
|
.fan-card-face-reversal {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
align-items: center;
|
2026-05-01 02:06:55 -04:00
|
|
|
|
justify-content: center;
|
2026-04-30 21:01:52 -04:00
|
|
|
|
gap: calc(var(--fan-card-w) * 0.007);
|
2026-05-01 02:06:55 -04:00
|
|
|
|
// Ghost-line: reserve at least two title-line-heights of vertical space
|
|
|
|
|
|
// on each face so emanation + reversal stay symmetric even when one
|
|
|
|
|
|
// side has a single-line title (e.g. trumps 6–9 reversal "Indulged
|
|
|
|
|
|
// Folly" vs upright "Losing Self-Importance, / Sublimating").
|
|
|
|
|
|
min-height: calc(var(--fan-card-w) * 0.21);
|
2026-04-30 21:01:52 -04:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// Qualifier shares the name's typography — same line, different content.
|
|
|
|
|
|
// Sizes scale with --fan-card-w so they stay proportional on mobile.
|
2026-05-01 02:06:55 -04:00
|
|
|
|
// `text-wrap: balance` distributes lines evenly so a borderline-long title
|
|
|
|
|
|
// breaks at the natural midpoint instead of greedy first-fit (e.g. trump
|
|
|
|
|
|
// 9 wraps as "Erasing / Personal History," instead of "Erasing Personal /
|
|
|
|
|
|
// History,"). Base size lowered from 0.1 → 0.087 (~13%) so all the long
|
|
|
|
|
|
// titles (trumps 8/9/18/36/41 + Queen of Crowns) fit without per-card
|
|
|
|
|
|
// hacks and without asymmetry between upright (h3) and reversal (p).
|
2026-04-30 21:01:52 -04:00
|
|
|
|
.sig-qualifier-above,
|
|
|
|
|
|
.sig-qualifier-below,
|
|
|
|
|
|
.fan-card-reversal-qualifier,
|
|
|
|
|
|
.fan-card-reversal-name,
|
|
|
|
|
|
.fan-card-name {
|
2026-05-01 02:06:55 -04:00
|
|
|
|
font-size: calc(var(--fan-card-w) * 0.087);
|
2026-04-30 21:01:52 -04:00
|
|
|
|
font-weight: bold;
|
|
|
|
|
|
margin: 0;
|
|
|
|
|
|
color: rgba(var(--terUser), 1);
|
|
|
|
|
|
transition: opacity 0.2s;
|
2026-05-01 02:06:55 -04:00
|
|
|
|
text-wrap: balance;
|
2026-04-30 21:01:52 -04:00
|
|
|
|
}
|
2026-04-08 11:52:49 -04:00
|
|
|
|
|
2026-04-30 21:01:52 -04:00
|
|
|
|
// Reversal-face spans pre-rotated so they read forward once the card spins
|
|
|
|
|
|
// 180deg via .stage-card--reversed. Matches sig/sea convention (rotation +
|
|
|
|
|
|
// base opacity live on the inner spans, NOT the wrapping .fan-card-face-reversal
|
|
|
|
|
|
// div — otherwise the outer div's transform stacks with sig/sea's scoped rule
|
|
|
|
|
|
// and double-rotates back to upright).
|
|
|
|
|
|
.fan-card-reversal-qualifier,
|
|
|
|
|
|
.fan-card-reversal-name {
|
|
|
|
|
|
transform: rotate(180deg);
|
|
|
|
|
|
opacity: 0.25;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.fan-card-number { font-size: calc(var(--fan-card-w) * 0.043); }
|
|
|
|
|
|
.fan-card-name-group { font-size: calc(var(--fan-card-w) * 0.043); margin: 0; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(var(--secUser), 1); }
|
|
|
|
|
|
.fan-card-arcana { font-size: calc(var(--fan-card-w) * 0.043); text-transform: uppercase; letter-spacing: 0.1em; color: rgba(var(--secUser), 1); }
|
|
|
|
|
|
.fan-card-correspondence { font-size: calc(var(--fan-card-w) * 0.04); font-style: italic; color: rgba(var(--secUser), 0.5); }
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// FLIP button — invisible at rest, fades in when the user hovers/taps the wrap.
|
|
|
|
|
|
// 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;
|
|
|
|
|
|
z-index: 25;
|
|
|
|
|
|
top: 50%;
|
|
|
|
|
|
left: 50%;
|
|
|
|
|
|
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.
|
|
|
|
|
|
.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;
|
2026-04-08 11:52:49 -04:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.fan-nav {
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
z-index: 20;
|
|
|
|
|
|
font-size: 3rem;
|
|
|
|
|
|
line-height: 1;
|
|
|
|
|
|
background: none;
|
|
|
|
|
|
border: none;
|
2026-04-30 21:51:23 -04:00
|
|
|
|
text-shadow: 0 0 1px rgba(0, 0, 0, 1);
|
|
|
|
|
|
color: rgba(var(--terUser), 0.6);
|
2026-04-08 11:52:49 -04:00
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
padding: 1rem;
|
|
|
|
|
|
transition: color 0.15s;
|
|
|
|
|
|
pointer-events: auto;
|
2026-04-30 21:51:23 -04:00
|
|
|
|
outline: none;
|
|
|
|
|
|
box-shadow: none;
|
2026-04-08 11:52:49 -04:00
|
|
|
|
|
2026-04-30 21:51:23 -04:00
|
|
|
|
&:hover { color: rgba(var(--ninUser), 1); }
|
2026-04-08 11:52:49 -04:00
|
|
|
|
// Suppress browser focus ring on mouse/touch clicks; retain it for keyboard nav
|
|
|
|
|
|
&--prev { left: 1rem; }
|
|
|
|
|
|
&--next { right: 1rem; }
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// ─── Sig Select overlay (SIG_SELECT phase) ────────────────────────────────────
|
|
|
|
|
|
//
|
|
|
|
|
|
// Two overlays (levity / gravity) run in parallel, one per polarity group.
|
|
|
|
|
|
// Layout mirrors the gatekeeper: dark Gaussian backdrop + centred modal.
|
|
|
|
|
|
// Inside the modal: upper stage (card preview) + lower mini card grid (no scroll).
|
|
|
|
|
|
|
|
|
|
|
|
html:has(.sig-backdrop) {
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.sig-backdrop {
|
|
|
|
|
|
position: fixed;
|
|
|
|
|
|
inset: 0;
|
|
|
|
|
|
background: rgba(0, 0, 0, 0.75);
|
|
|
|
|
|
backdrop-filter: blur(5px);
|
|
|
|
|
|
z-index: 100;
|
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.sig-overlay {
|
|
|
|
|
|
position: fixed;
|
|
|
|
|
|
inset: 0;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: stretch;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
z-index: 120;
|
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.sig-modal {
|
|
|
|
|
|
pointer-events: auto;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
width: 100%; // respects overlay padding-right set by JS
|
|
|
|
|
|
max-width: 420px;
|
|
|
|
|
|
max-height: 100%; // respects overlay padding-bottom set by JS
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// ─── Stage ────────────────────────────────────────────────────────────────────
|
|
|
|
|
|
// flex: 1 — fills all space above the card grid; no background (backdrop blur).
|
|
|
|
|
|
// Row layout: preview card bottom-left, stat block fills the right.
|
|
|
|
|
|
// Card width is set by sizeSigCard() in room.js (smaller of 40% stage width or
|
|
|
|
|
|
// 80% stage height × 5/8) via --sig-card-w CSS variable — libsass can't handle
|
|
|
|
|
|
// container query units inside min().
|
|
|
|
|
|
|
|
|
|
|
|
.sig-stage {
|
|
|
|
|
|
flex: 1;
|
|
|
|
|
|
min-height: 0;
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: row;
|
|
|
|
|
|
align-items: flex-end;
|
|
|
|
|
|
padding-left: 1.5rem;
|
|
|
|
|
|
gap: 0.75rem;
|
|
|
|
|
|
// Preview card — width driven by JS via --sig-card-w; aspect-ratio derives height.
|
|
|
|
|
|
.sig-stage-card {
|
|
|
|
|
|
flex-shrink: 0;
|
|
|
|
|
|
width: var(--sig-card-w, 120px);
|
|
|
|
|
|
height: auto;
|
|
|
|
|
|
aspect-ratio: 5 / 8;
|
|
|
|
|
|
border-radius: 0.5rem;
|
|
|
|
|
|
background: rgba(var(--priUser), 1);
|
|
|
|
|
|
border: 0.15rem solid rgba(var(--secUser), 0.6);
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
padding: 0.25rem;
|
|
|
|
|
|
overflow: hidden;
|
2026-04-28 17:18:16 -04:00
|
|
|
|
transition: transform 0.4s ease;
|
2026-04-08 11:52:49 -04:00
|
|
|
|
|
|
|
|
|
|
// game-kit sets .fan-card-corner { position: absolute; top/left offsets }
|
|
|
|
|
|
// so these just need display/font overrides; the corners land at the card edges.
|
|
|
|
|
|
// All font-sizes scale with --sig-card-w (ratio = original-rem × 16 / 120).
|
|
|
|
|
|
.fan-card-corner--tl {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
line-height: 1.1;
|
|
|
|
|
|
gap: 0.1rem;
|
|
|
|
|
|
|
|
|
|
|
|
.fan-corner-rank { font-size: calc(var(--sig-card-w, 120px) * 0.133); font-weight: 700; }
|
|
|
|
|
|
i { font-size: calc(var(--sig-card-w, 120px) * 0.1); }
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.fan-card-corner--br {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
line-height: 1.1;
|
|
|
|
|
|
gap: 0.1rem;
|
|
|
|
|
|
|
|
|
|
|
|
.fan-corner-rank { font-size: calc(var(--sig-card-w, 120px) * 0.12); font-weight: 700; }
|
|
|
|
|
|
i { font-size: calc(var(--sig-card-w, 120px) * 0.1); }
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.fan-card-face {
|
|
|
|
|
|
flex: 1;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
padding: 0.25rem 0.15rem;
|
|
|
|
|
|
gap: 0.2rem;
|
|
|
|
|
|
|
2026-04-28 20:09:23 -04:00
|
|
|
|
.fan-card-face-upright { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; }
|
|
|
|
|
|
.fan-card-face-reversal { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; padding-top: 0.1rem; }
|
2026-04-08 11:52:49 -04:00
|
|
|
|
.fan-card-name-group { font-size: calc(var(--sig-card-w, 120px) * 0.073); opacity: 0.6; }
|
2026-05-01 02:06:55 -04:00
|
|
|
|
// Upright qualifier + name share sizing/weight/color with their reversed counterparts.
|
|
|
|
|
|
// text-wrap: balance distributes lines evenly so longer titles wrap symmetrically;
|
|
|
|
|
|
// base size 0.08 (was 0.093) gives long titles room to fit without per-card hacks.
|
2026-04-08 11:52:49 -04:00
|
|
|
|
.sig-qualifier-above,
|
2026-04-28 20:09:23 -04:00
|
|
|
|
.sig-qualifier-below,
|
2026-05-01 02:06:55 -04:00
|
|
|
|
.fan-card-reversal-qualifier { font-size: calc(var(--sig-card-w, 120px) * 0.08); font-weight: 600; color: rgba(var(--quiUser), 1); transition: opacity 0.2s; text-wrap: balance; }
|
2026-04-28 20:09:23 -04:00
|
|
|
|
.fan-card-name,
|
2026-05-01 02:06:55 -04:00
|
|
|
|
.fan-card-reversal-name { font-size: calc(var(--sig-card-w, 120px) * 0.08); font-weight: 600; color: rgba(var(--quiUser), 1); transition: opacity 0.2s; text-wrap: balance; }
|
2026-04-08 11:52:49 -04:00
|
|
|
|
.fan-card-arcana { font-size: calc(var(--sig-card-w, 120px) * 0.067); text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.5; }
|
|
|
|
|
|
.fan-card-correspondence{ display: none; } // Minchiate equivalence shown in game-kit only
|
2026-04-28 20:09:23 -04:00
|
|
|
|
// Reversed face elements — pre-rotated so they read forward after card spins
|
2026-04-28 17:18:16 -04:00
|
|
|
|
.fan-card-reversal-qualifier,
|
|
|
|
|
|
.fan-card-reversal-name {
|
|
|
|
|
|
transform: rotate(180deg);
|
|
|
|
|
|
opacity: 0.25;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
&.stage-card--reversed {
|
|
|
|
|
|
transform: rotate(180deg);
|
|
|
|
|
|
|
|
|
|
|
|
.fan-card-reversal-qualifier,
|
|
|
|
|
|
.fan-card-reversal-name { opacity: 1; }
|
|
|
|
|
|
.fan-card-name,
|
|
|
|
|
|
.sig-qualifier-above,
|
|
|
|
|
|
.sig-qualifier-below { opacity: 0.25; }
|
2026-04-08 11:52:49 -04:00
|
|
|
|
}
|
A.3 my_sign.html image-rendering — first visible surface — TDD. Sprint A.3 of [[project-image-based-deck-face-rendering]]. When the user's equipped deck has `has_card_images=True` (Minchiate Fiorentine 1860-1890 today), the saved-sig stage card on /billboard/my-sign/ renders as an <img> over the irregular-shape transparent PNG with a contour-following arcana-colored stroke — not the text fan-card scaffold. First of 6 surfaces in the image-rendering rollout (my_sea + both billboard applets + room + game_kit follow in A.5+). New `TarotCard.image_url` property (consumes A.2's image_filename + DeckVariant.has_card_images + django.templatetags.static.static() to produce a full static-asset URL) — empty string when has_card_images=False so legacy text-only decks (Earthman, RWS) pass through transparently. `my_sign.html` picker grid `.sig-card` elements gain `data-image-url` + `data-arcana-key` attrs (the latter for stroke-color CSS selection); the `.sig-stage-card` scaffold gains a hidden `<img class="sig-stage-card-img">` slot that JS swaps visible when image-mode is active. `stage-card.js` extends `fromDataset` to read image_url + arcana_key; new `_setImageMode(stageCard, card)` toggles the `.sig-stage-card--image` marker class + sets `data-arcana-key` on the stage card + populates the img src/alt; called from `populateCard` so all existing sig-stage flows pick up image rendering automatically (text-mode decks still pass through since image_url is empty). SCSS: new `.sig-stage-card.sig-stage-card--image` rule hides the `.fan-card-corner` + `.fan-card-face` text scaffold, strips the rectangular border/padding, and applies a 4-cardinal-direction `filter: drop-shadow()` stack to the `<img>` so the stroke FOLLOWS the alpha contour of the PNG instead of tracing a rectangular bounding box (per user spec 2026-05-25 PM clarification — early draft used a rectangular border which doesn't match the irregular-card aesthetic). Stroke color is driven by a CSS custom prop `--img-stroke-color` defaulting to `rgba(var(--quiUser), 1)` (cream — minor + middle arcana); `[data-arcana-key="MAJOR"]` override flips it to `rgba(var(--terUser), 1)` (gold) per Q2 lock. mobile-safe — filter on raster images works cross-browser (the [[feedback-mobile-svg-glow]] dead-end was specifically SVG glow, not raster drop-shadows). New `_seed_minchiate_image_fixtures()` helper in `functional_tests/sig_page.py` re-seeds the minimal Minchiate fixture (DeckVariant + Il Matto + Papa Uno) needed for image FTs after TransactionTestCase's flush wipes migration data — mirrors the existing `_seed_earthman_sig_pile` pattern per [[feedback-transactiontestcase-flush]]. New `MySignImageRenderingTest.test_saved_sig_renders_as_img_for_image_deck` FT seeds Minchiate + creates a superuser test gamer (superuser auto-gets super-nomad + super-schizo Notes via the User post_save signal, which `_filter_major_unlocks` then lets through to expose Il Matto in the picker grid — otherwise Minchiate's sig pool is empty since it has no MIDDLE arcana cards), equips Minchiate, saves Il Matto as sig, visits /billboard/my-sign/, asserts the stage card displays + contains an <img> w. src ending in the v2-convention filename `minchiate-fiorentine-1860-1890-trumps-00-il-matto.png` + carries `.sig-stage-card--image` marker class. Out of scope for this commit (deferred to A.3 follow-up polish + A.5+): the full stat-block restructure (top-left rank+suit chip Q♥ inline w. EMANATION/REVERSAL header; title in arcana-color font; keyword reposition; FYI panel re-anchor — per the locked Q3 spec) — image card-face ships now w. the existing stat-block layout to land the visible-win first. Tests: 1 new FT green; 15/15 my_sign FT class green (no regression on the 14 existing tests); 1289/1289 IT+UT total green (68s, unchanged from A.2 since no new ITs in this commit — FT covers the wiring end-to-end). Sprint A backend foundation (A.0+A.1+A.2) + first visible surface (A.3) all landed; 5 surfaces remain (A.5-A.8 + A.4's card-deck icon)
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-25 00:04:18 -04:00
|
|
|
|
|
2026-04-08 11:52:49 -04:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// Stat block — same dimensions as the preview card (width × 5:8 aspect).
|
|
|
|
|
|
// flex: 0 0 auto so it doesn't stretch to fill the stage; the rest of the
|
|
|
|
|
|
// stage row is simply empty, giving the card room to breathe.
|
|
|
|
|
|
.sig-stat-block {
|
|
|
|
|
|
flex: 0 0 auto;
|
|
|
|
|
|
width: var(--sig-card-w, 120px);
|
|
|
|
|
|
height: calc(var(--sig-card-w, 120px) * 8 / 5);
|
|
|
|
|
|
align-self: flex-end;
|
|
|
|
|
|
background: rgba(var(--priUser), 0.5);
|
|
|
|
|
|
border-radius: 0.4rem;
|
|
|
|
|
|
border: 0.1rem solid rgba(var(--terUser), 0.15);
|
|
|
|
|
|
display: none;
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
|
2026-04-30 21:01:52 -04:00
|
|
|
|
@include stat-block-shared;
|
2026-04-08 11:52:49 -04:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
&.sig-stage--frozen .sig-stat-block { display: block; }
|
2026-04-30 21:01:52 -04:00
|
|
|
|
|
|
|
|
|
|
// Unified .fyi-open class — opens the FYI panel + reveals PRV/NXT nav.
|
|
|
|
|
|
.sig-stat-block.fyi-open {
|
|
|
|
|
|
.sig-info { display: flex; }
|
|
|
|
|
|
.fyi-prev, .fyi-next { display: inline-flex; }
|
2026-04-08 11:52:49 -04:00
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
A.5 my_sea.html central sig card image-rendering + SCSS lift-out fix — TDD. Sprint A.5 of [[project-image-based-deck-face-rendering]]: second visible surface after my_sign A.3. When the user's equipped deck is image-equipped (Minchiate today), the central significator card in the Celtic-Cross-style spread (`.sig-stage-card.sea-sig-card` inside .sea-pos-core) renders the transparent-PNG <img> w. contour-following arcana-color drop-shadow stroke + tray-card silhouette black shadow — same visual identity as my_sign's saved-sig stage card so the user's "this is my sig" anchor reads the same across both surfaces. Server-side template branch on `significator.deck_variant.has_card_images`: image branch renders `<img class="sig-stage-card-img" src="{{ significator.image_url }}">` + adds `.sig-stage-card--image` marker class + `data-arcana-key="{{ arcana }}"` for the stroke-color selector; text branch keeps the existing corner-rank + suit-icon render unchanged (Earthman, RWS). No JS needed — central sig is statically rendered (vs my_sign's stage card which is JS-populated from the picker grid). Critical SCSS lift-out: the A.3 `.sig-stage-card--image` rule lived nested inside `.sig-stage .sig-stage-card`, scoped to my_sign.html's stage container only. my_sea's central sig isn't inside `.sig-stage` (lives in .sea-pos-core), so the rule wasn't applying — image rendered at native pixel dimensions (~620×1024 PNG) instead of being constrained to the card container, showing only a top-left portion (user bug-report 2026-05-25 PM: "It doesn't scale the img down for the sig — just a portion of the full img"). Fix: moved the entire `.sig-stage-card.sig-stage-card--image { ... }` block OUT of the `.sig-stage` nest into top-level scope so it applies to ANY `.sig-stage-card` carrying the `--image` class regardless of parent (my_sign's `.sig-stage`, my_sea's `.sea-pos-core`, future room.html's table center, future deck-bag UI). Same lift-out also expands the `display: none` list to include `.fan-corner-rank` + `> i.fa-solid` — these elements appear in my_sea's text-mode central sig and need hiding when image-mode kicks in (my_sign's text mode uses the wrapped `.fan-card-corner` + `.fan-card-face` classes which were already covered). 2 new ITs in `MySeaPickerPhaseTemplateTest`: image-equipped Minchiate sig renders `.sig-stage-card--image` class + <img> w. correct v2-convention src; non-image Earthman keeps `.fan-corner-rank` text + lacks --image class. Earthman Minchiate test fixture needs the super-nomad + super-schizo Note unlocks (granted manually via `Note.grant_if_new` since the post_save signal only fires on initial user creation, and we promote-to-superuser AFTER create) to let Il Matto (MAJOR 0) through `_filter_major_unlocks`. Tests: 2 new green; 1300/1300 IT+UT total green (70s; +2 from 750fef8's 1298). Visual verify pending: refresh /gameboard/my-sea/ w. Minchiate equipped + Il Matto as sig → central sig card should now scale the back image to fit the card container instead of showing a top-left crop. Sea Stage modal + drawn-card slot rendering (the bigger A.5 scope) still pending — they go through stage-card.js + the my-sea draw fetch endpoint, which need data-attr + JSON-payload extensions in a follow-up commit
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-25 01:20:07 -04:00
|
|
|
|
// Sprint A.3 / A.5 — image-rendering mode for decks w. DeckVariant.has_card_images=True
|
|
|
|
|
|
// (Minchiate Fiorentine 1860-1890 today; future image-equipped decks flip
|
|
|
|
|
|
// the flag to opt in). LIFTED OUT of the `.sig-stage` nest in A.5 polish so
|
|
|
|
|
|
// the same rule applies wherever `.sig-stage-card.sig-stage-card--image`
|
|
|
|
|
|
// renders — my_sign.html's stage card (inside .sig-stage), my_sea.html's
|
|
|
|
|
|
// central sig card (.sea-sig-card inside .sea-pos-core, NOT in .sig-stage),
|
|
|
|
|
|
// future surface drops. When `.sig-stage-card--image` is set (either by
|
|
|
|
|
|
// stage-card.js _setImageMode or server-side template branch), the text
|
|
|
|
|
|
// scaffold (fan-card-* + .fan-corner-rank text children) hides and an
|
|
|
|
|
|
// <img.sig-stage-card-img> renders inside the same shell. Card bg + border
|
|
|
|
|
|
// go away — the transparent PNG carries its own irregular outline; four
|
|
|
|
|
|
// cardinal-direction drop-shadows on the <img> render a stroke-like outline
|
|
|
|
|
|
// that FOLLOWS the alpha contour (user spec 2026-05-25 PM — NOT a rectangular
|
|
|
|
|
|
// border around the bounding box). Color is arcana-driven: `--quiUser` (cream)
|
|
|
|
|
|
// for minor + middle, `--terUser` (gold) for major per
|
|
|
|
|
|
// [[project-image-based-deck-face-rendering]]'s Q2 lock.
|
A.6 + A.7 billboard My Sign applet + gameboard My Sea applet image-rendering + applet-level FLIP-to-back — TDD. Sprints A.6 + A.7 of [[project-image-based-deck-face-rendering]]: rolls image-mode out to the two card-rendering applets (My Sign on /billboard/, My Sea on /gameboard/). Both reuse the shared `.sig-stage-card.sig-stage-card--image` SCSS contract via a comma-list selector extension covering the parallel container classes (`.my-sign-applet-card.my-sign-applet-card--image` + `.my-sea-slot.my-sea-slot--image`) — single source of truth for the contour-stroke drop-shadow chain + tray-card silhouette black depth shadow + .is-flipped-to-back visibility toggle + the `--img-stroke-color` arcana-keyed CSS prop. Templates branch server-side on `card.deck_variant.has_card_images`: image-mode renders `<img class="sig-stage-card-img" src="{{ card.image_url }}">` w. the marker class + `data-arcana-key` attr; text mode keeps the existing fan-card-corner + fan-card-face scaffold unchanged. SCSS import-order quirk: `_card-deck.scss` imports BEFORE both `_billboard.scss` (which nests `.my-sign-applet-card` inside `.my-sign-applet-body` for container queries) and `_gameboard.scss` (which nests `.my-sea-slot--filled.--gravity/--levity` inside `#id_applet_my_sea` w. specificity 1,2,0). The shared top-level image-mode rule at 0,2,0 loses on bg/border/padding to those nested base rules, so each app's stylesheet gets a parallel `&.--image { background: transparent; border: 0; padding: 0 }` override inside its own nest. The filter-chain rules on `.sig-stage-card-img` (descendant selector inside the shared rule) DO win since the apps don't restyle that class — only the outer container needs the parallel override. Sprint A.6 bonus: applet-level FLIP btn for non-polarized image-equipped decks (Minchiate today). Mirrors the my_sign.html main page A.5-polish-2 FLIP-to-back contract — `.my-sign-applet-flip-btn` nested inside the .--image card so absolute positioning anchors to the card bounds; inline `<script>` IIFE (gated inside the sig-present {% with card %} scope to keep `card` in lexical reach + prevent the JS selector string leaking into the no-sig DOM where `assertNotContains "my-sign-applet-card"` ITs catch it) attaches a click handler that runs the same rotateY 0→90→0 animation, toggles `.is-flipped-to-back` at the halfway point, and clears `data-flipping` at end; SCSS `.my-sign-applet-card[data-flipping] .my-sign-applet-flip-btn { opacity: 0; pointer-events: none }` hides the btn mid-spin. Critical scope bug caught + fixed during browser verify: initial draft had the script BLOCK + its `{% if card.deck_variant.has_card_images %}` gate placed AFTER the `{% endwith %}` closing tag — `card` was out of scope at the `{% if %}` evaluation, Django treats undefined vars as empty string, the gate evaluated falsy, and the script NEVER rendered (the FLIP btn rendered fine since it was inside the with block, but no JS handler → click did nothing but the CSS depress animation). Fix: move `{% endwith %}` to AFTER the script gate so `card` is still in scope. 7 new ITs total: 2 in `BillboardAppletMySignTest` (image-equipped Minchiate renders `--image` class + img + correct asset URL + lacks text scaffold; Earthman keeps the text scaffold + lacks `--image`); 3 in `BillboardMySignViewTest` (data-deck-polarized attr present; back-img element renders for non-polarized image deck; polarized deck omits it); 1 in `GameboardViewTest` (image-equipped Minchiate slot renders `--image` + img + lacks text scaffold); plus regression coverage on the no-sig empty-state assertion that originally caught the script-scope bug (assertNotContains validates the script doesn't leak in the no-sig case). Tests: 6 new ITs green; 1306/1306 IT+UT total green (72s; +6 from bdf6a25's 1303 — minus 3 dups since some ITs were counted across both A.6 + A.5-polish-2 runs). Visual verify by user 2026-05-25 PM: stage card image renders cleanly; FLIP cycles to back image + back via animation; FLIP btn hides during 500ms spin; placeholder dim styling correctly distinguishes no-deck state
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-25 01:58:36 -04:00
|
|
|
|
.sig-stage-card.sig-stage-card--image,
|
|
|
|
|
|
.my-sign-applet-card.my-sign-applet-card--image,
|
|
|
|
|
|
.my-sea-slot.my-sea-slot--image {
|
A.5 my_sea.html central sig card image-rendering + SCSS lift-out fix — TDD. Sprint A.5 of [[project-image-based-deck-face-rendering]]: second visible surface after my_sign A.3. When the user's equipped deck is image-equipped (Minchiate today), the central significator card in the Celtic-Cross-style spread (`.sig-stage-card.sea-sig-card` inside .sea-pos-core) renders the transparent-PNG <img> w. contour-following arcana-color drop-shadow stroke + tray-card silhouette black shadow — same visual identity as my_sign's saved-sig stage card so the user's "this is my sig" anchor reads the same across both surfaces. Server-side template branch on `significator.deck_variant.has_card_images`: image branch renders `<img class="sig-stage-card-img" src="{{ significator.image_url }}">` + adds `.sig-stage-card--image` marker class + `data-arcana-key="{{ arcana }}"` for the stroke-color selector; text branch keeps the existing corner-rank + suit-icon render unchanged (Earthman, RWS). No JS needed — central sig is statically rendered (vs my_sign's stage card which is JS-populated from the picker grid). Critical SCSS lift-out: the A.3 `.sig-stage-card--image` rule lived nested inside `.sig-stage .sig-stage-card`, scoped to my_sign.html's stage container only. my_sea's central sig isn't inside `.sig-stage` (lives in .sea-pos-core), so the rule wasn't applying — image rendered at native pixel dimensions (~620×1024 PNG) instead of being constrained to the card container, showing only a top-left portion (user bug-report 2026-05-25 PM: "It doesn't scale the img down for the sig — just a portion of the full img"). Fix: moved the entire `.sig-stage-card.sig-stage-card--image { ... }` block OUT of the `.sig-stage` nest into top-level scope so it applies to ANY `.sig-stage-card` carrying the `--image` class regardless of parent (my_sign's `.sig-stage`, my_sea's `.sea-pos-core`, future room.html's table center, future deck-bag UI). Same lift-out also expands the `display: none` list to include `.fan-corner-rank` + `> i.fa-solid` — these elements appear in my_sea's text-mode central sig and need hiding when image-mode kicks in (my_sign's text mode uses the wrapped `.fan-card-corner` + `.fan-card-face` classes which were already covered). 2 new ITs in `MySeaPickerPhaseTemplateTest`: image-equipped Minchiate sig renders `.sig-stage-card--image` class + <img> w. correct v2-convention src; non-image Earthman keeps `.fan-corner-rank` text + lacks --image class. Earthman Minchiate test fixture needs the super-nomad + super-schizo Note unlocks (granted manually via `Note.grant_if_new` since the post_save signal only fires on initial user creation, and we promote-to-superuser AFTER create) to let Il Matto (MAJOR 0) through `_filter_major_unlocks`. Tests: 2 new green; 1300/1300 IT+UT total green (70s; +2 from 750fef8's 1298). Visual verify pending: refresh /gameboard/my-sea/ w. Minchiate equipped + Il Matto as sig → central sig card should now scale the back image to fit the card container instead of showing a top-left crop. Sea Stage modal + drawn-card slot rendering (the bigger A.5 scope) still pending — they go through stage-card.js + the my-sea draw fetch endpoint, which need data-attr + JSON-payload extensions in a follow-up commit
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-25 01:20:07 -04:00
|
|
|
|
--img-stroke-color: rgba(var(--quiUser), 1);
|
|
|
|
|
|
background: transparent;
|
|
|
|
|
|
border: 0;
|
|
|
|
|
|
padding: 0;
|
|
|
|
|
|
overflow: visible;
|
|
|
|
|
|
|
|
|
|
|
|
&[data-arcana-key="MAJOR"] {
|
|
|
|
|
|
--img-stroke-color: rgba(var(--terUser), 1);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.fan-card-corner,
|
|
|
|
|
|
.fan-card-face,
|
|
|
|
|
|
.fan-corner-rank,
|
|
|
|
|
|
> i.fa-solid {
|
|
|
|
|
|
display: none;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
A.5-polish FLIP-to-back for non-polarized image-equipped decks — TDD. User-spec'd feature 2026-05-25 PM after browser-verifying A.5: the FLIP button on my_sign.html cycles polarity for polarized decks (Earthman) — gravity/levity swap w. a 3D-spin animation, stat block updates to the new polarity's emanation/reversal qualifiers. For non-polarized decks (Minchiate today, future RWS-with-images, future classic-playing decks), polarity has no meaning — clicking FLIP just runs an animation that doesn't change anything content-wise. User wants FLIP repurposed for non-polarized decks: reveal the card-back image while leaving the stat block untouched, so the gesture has visible payoff w/o forcing a meaningless polarity-state change. Implementation thread: server-side page wrapper carries a new `data-deck-polarized="{{ user.equipped_deck.is_polarized|yesno:'true,false' }}"` attr so the in-page JS can branch on it without making an API call or guessing from card data; stage-card scaffold conditionally renders a hidden `<img.sig-stage-card-back-img>` element when `equipped_deck.has_card_images AND NOT is_polarized` (image-equipped polarized decks would still cycle polarity per existing flow — back-image element absent for them, no resource waste). JS branch in `flipBtn.click`: `if (pageEl.dataset.deckPolarized === 'false') { stageCard.classList.toggle('is-flipped-to-back') } else { _flipPolarityAnimated() }` — same `.is-reversed` class toggle on the btn itself so visual feedback is consistent across both modes (btn rotates to signal "flipped state on"). SCSS: `.sig-stage-card-back-img` joins the existing `.sig-stage-card-img` filter chain (same contour stroke + silhouette black shadow — back image gets identical visual treatment to the front so the flip reads as same-deck consistency); default `display: none`; `.sig-stage-card.is-flipped-to-back` flips visibility — hides front, shows back. Stat block + arcana-key stroke color stay put per user spec — FLIP for non-polarized is purely a visual reveal, no polarity-cycle or content swap. 3 new ITs in `MySignViewTest`: data-deck-polarized="true" for default Earthman; data-deck-polarized="false" + back-img element present w. correct v2-convention back asset URL when user switches to Minchiate; polarized deck omits the back-img element. No JS unit test (Jasmine spec) for the flipBtn branch — visual verify covers the hover/click interaction; the IT covers the server-side conditional render that determines whether the branch can fire. No FT (the existing my_sign FTs cover the polarized-flip flow already; non-polarized-flip is a CSS class toggle, low-risk for regression). Tests: 3 new green; 9/9 MySignViewTest class green; 1303/1303 IT+UT total green (71s; +3 from 82813e9's 1300). Out of scope: my_sea's central sig card doesn't have a FLIP btn (no analogous behavior to add there); room.html FLIP behavior will be covered in A.8 if applicable; Sea Stage modal FLIP behavior (if any) lands in the my-sea fetch-endpoint extension later in A.5
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-25 01:31:42 -04:00
|
|
|
|
.sig-stage-card-img,
|
|
|
|
|
|
.sig-stage-card-back-img {
|
A.5 my_sea.html central sig card image-rendering + SCSS lift-out fix — TDD. Sprint A.5 of [[project-image-based-deck-face-rendering]]: second visible surface after my_sign A.3. When the user's equipped deck is image-equipped (Minchiate today), the central significator card in the Celtic-Cross-style spread (`.sig-stage-card.sea-sig-card` inside .sea-pos-core) renders the transparent-PNG <img> w. contour-following arcana-color drop-shadow stroke + tray-card silhouette black shadow — same visual identity as my_sign's saved-sig stage card so the user's "this is my sig" anchor reads the same across both surfaces. Server-side template branch on `significator.deck_variant.has_card_images`: image branch renders `<img class="sig-stage-card-img" src="{{ significator.image_url }}">` + adds `.sig-stage-card--image` marker class + `data-arcana-key="{{ arcana }}"` for the stroke-color selector; text branch keeps the existing corner-rank + suit-icon render unchanged (Earthman, RWS). No JS needed — central sig is statically rendered (vs my_sign's stage card which is JS-populated from the picker grid). Critical SCSS lift-out: the A.3 `.sig-stage-card--image` rule lived nested inside `.sig-stage .sig-stage-card`, scoped to my_sign.html's stage container only. my_sea's central sig isn't inside `.sig-stage` (lives in .sea-pos-core), so the rule wasn't applying — image rendered at native pixel dimensions (~620×1024 PNG) instead of being constrained to the card container, showing only a top-left portion (user bug-report 2026-05-25 PM: "It doesn't scale the img down for the sig — just a portion of the full img"). Fix: moved the entire `.sig-stage-card.sig-stage-card--image { ... }` block OUT of the `.sig-stage` nest into top-level scope so it applies to ANY `.sig-stage-card` carrying the `--image` class regardless of parent (my_sign's `.sig-stage`, my_sea's `.sea-pos-core`, future room.html's table center, future deck-bag UI). Same lift-out also expands the `display: none` list to include `.fan-corner-rank` + `> i.fa-solid` — these elements appear in my_sea's text-mode central sig and need hiding when image-mode kicks in (my_sign's text mode uses the wrapped `.fan-card-corner` + `.fan-card-face` classes which were already covered). 2 new ITs in `MySeaPickerPhaseTemplateTest`: image-equipped Minchiate sig renders `.sig-stage-card--image` class + <img> w. correct v2-convention src; non-image Earthman keeps `.fan-corner-rank` text + lacks --image class. Earthman Minchiate test fixture needs the super-nomad + super-schizo Note unlocks (granted manually via `Note.grant_if_new` since the post_save signal only fires on initial user creation, and we promote-to-superuser AFTER create) to let Il Matto (MAJOR 0) through `_filter_major_unlocks`. Tests: 2 new green; 1300/1300 IT+UT total green (70s; +2 from 750fef8's 1298). Visual verify pending: refresh /gameboard/my-sea/ w. Minchiate equipped + Il Matto as sig → central sig card should now scale the back image to fit the card container instead of showing a top-left crop. Sea Stage modal + drawn-card slot rendering (the bigger A.5 scope) still pending — they go through stage-card.js + the my-sea draw fetch endpoint, which need data-attr + JSON-payload extensions in a follow-up commit
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-25 01:20:07 -04:00
|
|
|
|
display: block;
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
object-fit: contain;
|
|
|
|
|
|
// Filter chain (order matters — each drop-shadow operates on
|
|
|
|
|
|
// the prior result):
|
|
|
|
|
|
// 1-4: 4 cardinal-direction drop-shadows at 0.2rem (~3.2px)
|
|
|
|
|
|
// each → contour-following stroke. Combined apparent width
|
|
|
|
|
|
// ~6.4px. Bump to 8-direction stack if we ever go past
|
|
|
|
|
|
// ~0.5rem so curved edges stay even.
|
|
|
|
|
|
// 5: down-right black 1,1 offset 2px-blur drop-shadow
|
|
|
|
|
|
// matches the silhouette shadow `.tray-cell > img` carries
|
|
|
|
|
|
// (`_tray.scss:272`) — "lifted off the felt" depth cue.
|
|
|
|
|
|
// Comes AFTER the strokes so it traces the stroked
|
|
|
|
|
|
// silhouette, not just the original PNG alpha.
|
|
|
|
|
|
// Mobile-safe: filter on raster images works fine cross-browser
|
|
|
|
|
|
// (the [[feedback-mobile-svg-glow]] dead-end was specifically
|
|
|
|
|
|
// SVG glow, not raster drop-shadow).
|
|
|
|
|
|
filter:
|
|
|
|
|
|
drop-shadow( 0.2rem 0 0 var(--img-stroke-color))
|
|
|
|
|
|
drop-shadow(-0.2rem 0 0 var(--img-stroke-color))
|
|
|
|
|
|
drop-shadow( 0 0.2rem 0 var(--img-stroke-color))
|
|
|
|
|
|
drop-shadow( 0 -0.2rem 0 var(--img-stroke-color))
|
|
|
|
|
|
drop-shadow( 1px 1px 2px rgba(0, 0, 0, 1));
|
|
|
|
|
|
}
|
A.5-polish FLIP-to-back for non-polarized image-equipped decks — TDD. User-spec'd feature 2026-05-25 PM after browser-verifying A.5: the FLIP button on my_sign.html cycles polarity for polarized decks (Earthman) — gravity/levity swap w. a 3D-spin animation, stat block updates to the new polarity's emanation/reversal qualifiers. For non-polarized decks (Minchiate today, future RWS-with-images, future classic-playing decks), polarity has no meaning — clicking FLIP just runs an animation that doesn't change anything content-wise. User wants FLIP repurposed for non-polarized decks: reveal the card-back image while leaving the stat block untouched, so the gesture has visible payoff w/o forcing a meaningless polarity-state change. Implementation thread: server-side page wrapper carries a new `data-deck-polarized="{{ user.equipped_deck.is_polarized|yesno:'true,false' }}"` attr so the in-page JS can branch on it without making an API call or guessing from card data; stage-card scaffold conditionally renders a hidden `<img.sig-stage-card-back-img>` element when `equipped_deck.has_card_images AND NOT is_polarized` (image-equipped polarized decks would still cycle polarity per existing flow — back-image element absent for them, no resource waste). JS branch in `flipBtn.click`: `if (pageEl.dataset.deckPolarized === 'false') { stageCard.classList.toggle('is-flipped-to-back') } else { _flipPolarityAnimated() }` — same `.is-reversed` class toggle on the btn itself so visual feedback is consistent across both modes (btn rotates to signal "flipped state on"). SCSS: `.sig-stage-card-back-img` joins the existing `.sig-stage-card-img` filter chain (same contour stroke + silhouette black shadow — back image gets identical visual treatment to the front so the flip reads as same-deck consistency); default `display: none`; `.sig-stage-card.is-flipped-to-back` flips visibility — hides front, shows back. Stat block + arcana-key stroke color stay put per user spec — FLIP for non-polarized is purely a visual reveal, no polarity-cycle or content swap. 3 new ITs in `MySignViewTest`: data-deck-polarized="true" for default Earthman; data-deck-polarized="false" + back-img element present w. correct v2-convention back asset URL when user switches to Minchiate; polarized deck omits the back-img element. No JS unit test (Jasmine spec) for the flipBtn branch — visual verify covers the hover/click interaction; the IT covers the server-side conditional render that determines whether the branch can fire. No FT (the existing my_sign FTs cover the polarized-flip flow already; non-polarized-flip is a CSS class toggle, low-risk for regression). Tests: 3 new green; 9/9 MySignViewTest class green; 1303/1303 IT+UT total green (71s; +3 from 82813e9's 1300). Out of scope: my_sea's central sig card doesn't have a FLIP btn (no analogous behavior to add there); room.html FLIP behavior will be covered in A.8 if applicable; Sea Stage modal FLIP behavior (if any) lands in the my-sea fetch-endpoint extension later in A.5
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-25 01:31:42 -04:00
|
|
|
|
.sig-stage-card-back-img { display: none; } // shown only when flipped
|
|
|
|
|
|
|
|
|
|
|
|
// Sprint A.5 — FLIP-to-back behavior for non-polarized image-equipped
|
|
|
|
|
|
// decks (Minchiate today). When `.is-flipped-to-back` is toggled by
|
|
|
|
|
|
// my_sign's flip-btn handler, the front face img hides + the deck
|
|
|
|
|
|
// card-back img shows. Stat block + arcana-key stroke color stay put —
|
|
|
|
|
|
// FLIP is purely a visual reveal of the card's back, no polarity-cycle
|
|
|
|
|
|
// or content swap. User spec 2026-05-25 PM.
|
|
|
|
|
|
&.is-flipped-to-back {
|
|
|
|
|
|
.sig-stage-card-img { display: none; }
|
|
|
|
|
|
.sig-stage-card-back-img { display: block; }
|
|
|
|
|
|
}
|
A.5 my_sea.html central sig card image-rendering + SCSS lift-out fix — TDD. Sprint A.5 of [[project-image-based-deck-face-rendering]]: second visible surface after my_sign A.3. When the user's equipped deck is image-equipped (Minchiate today), the central significator card in the Celtic-Cross-style spread (`.sig-stage-card.sea-sig-card` inside .sea-pos-core) renders the transparent-PNG <img> w. contour-following arcana-color drop-shadow stroke + tray-card silhouette black shadow — same visual identity as my_sign's saved-sig stage card so the user's "this is my sig" anchor reads the same across both surfaces. Server-side template branch on `significator.deck_variant.has_card_images`: image branch renders `<img class="sig-stage-card-img" src="{{ significator.image_url }}">` + adds `.sig-stage-card--image` marker class + `data-arcana-key="{{ arcana }}"` for the stroke-color selector; text branch keeps the existing corner-rank + suit-icon render unchanged (Earthman, RWS). No JS needed — central sig is statically rendered (vs my_sign's stage card which is JS-populated from the picker grid). Critical SCSS lift-out: the A.3 `.sig-stage-card--image` rule lived nested inside `.sig-stage .sig-stage-card`, scoped to my_sign.html's stage container only. my_sea's central sig isn't inside `.sig-stage` (lives in .sea-pos-core), so the rule wasn't applying — image rendered at native pixel dimensions (~620×1024 PNG) instead of being constrained to the card container, showing only a top-left portion (user bug-report 2026-05-25 PM: "It doesn't scale the img down for the sig — just a portion of the full img"). Fix: moved the entire `.sig-stage-card.sig-stage-card--image { ... }` block OUT of the `.sig-stage` nest into top-level scope so it applies to ANY `.sig-stage-card` carrying the `--image` class regardless of parent (my_sign's `.sig-stage`, my_sea's `.sea-pos-core`, future room.html's table center, future deck-bag UI). Same lift-out also expands the `display: none` list to include `.fan-corner-rank` + `> i.fa-solid` — these elements appear in my_sea's text-mode central sig and need hiding when image-mode kicks in (my_sign's text mode uses the wrapped `.fan-card-corner` + `.fan-card-face` classes which were already covered). 2 new ITs in `MySeaPickerPhaseTemplateTest`: image-equipped Minchiate sig renders `.sig-stage-card--image` class + <img> w. correct v2-convention src; non-image Earthman keeps `.fan-corner-rank` text + lacks --image class. Earthman Minchiate test fixture needs the super-nomad + super-schizo Note unlocks (granted manually via `Note.grant_if_new` since the post_save signal only fires on initial user creation, and we promote-to-superuser AFTER create) to let Il Matto (MAJOR 0) through `_filter_major_unlocks`. Tests: 2 new green; 1300/1300 IT+UT total green (70s; +2 from 750fef8's 1298). Visual verify pending: refresh /gameboard/my-sea/ w. Minchiate equipped + Il Matto as sig → central sig card should now scale the back image to fit the card container instead of showing a top-left crop. Sea Stage modal + drawn-card slot rendering (the bigger A.5 scope) still pending — they go through stage-card.js + the my-sea draw fetch endpoint, which need data-attr + JSON-payload extensions in a follow-up commit
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-25 01:20:07 -04:00
|
|
|
|
}
|
|
|
|
|
|
|
My Sign picker: hover-preview, click-lock, NVM-unlock + polarity SCSS port + bigger stage — Sprint 4a-cont iteration 2
User-driven polish on iteration 1: separate hover-preview from click-lock semantics (room sig-select pattern), add NVM to unlock, port the room's `.sig-overlay[data-polarity]` polarity-themed CSS to also target `.my-sign-page[data-polarity]`, bump the stage card width so it occupies a bigger slice of the viewport ; **state machine** (inline JS in my_sign.html): three discrete states — (a) idle: stage frame visible but empty (stage card hidden via display:none, stat block hidden via `.sig-stage--frozen` absence, FLIP btn hidden via CSS); (b) hover: hovered .sig-card populates the stage card (preview); mouseleave clears it; mouseover-mouseout sequence guards against transient gaps when moving between adjacent thumbnails (relatedTarget closest('.sig-card') check); (c) locked: click on any grid card freezes the stage — populates content, adds `.sig-stage--frozen` to .sig-stage (which surfaces .sig-stat-block + .my-sign-flip-btn via CSS), enables SAVE SIGN, reveals NVM. Subsequent hovers ignored while locked. NVM click reverts to idle (clears content, hides stat-block + FLIP, disables SAVE, hides NVM) ; **new template** elements: NVM `<button id="id_nvm_sign_btn" class="btn btn-cancel">` next to SAVE SIGN in the form, hidden by default (style="display:none") + revealed on lock. Stage card re-acquires `style="display:none"` (hidden on load, JS-shown on hover/lock). `sig-stage--frozen` class no longer initial — JS-added on click ; **polarity SCSS port** (_card-deck.scss L820-905): extended `.sig-overlay[data-polarity="levity"]` + `[data-polarity="gravity"]` selector lists to include `.my-sign-page[data-polarity="levity"]` + `[gravity"]`. Rules inside (e.g. `.sig-card { background: rgba(--secUser) }`, `.sig-stage-card .fan-card-name { color: --quiUser }`, stat-face-label colour flips, text-shadow polarity variants) automatically apply on the my-sign page since `data-polarity` lives on the page wrapper (descendants .sig-card + .sig-stage-card both inherit). Moved `data-polarity` from `.my-sign-stage` to `.my-sign-page` in the template + JS so descendant scoping works (was a stage-scoped attr in iteration 1, which couldn't reach the sibling .sig-deck-grid) ; **bigger stage** (_card-deck.scss): `.my-sign-page { --sig-card-w: clamp(140px, 36vw, 220px); }` — scales w. viewport, 140px floor for portrait, 220px ceiling for landscape, ~36vw in between. Stage card + stat block both width-driven by this var so they scale together. The clamp() ceiling matches the room sig-select's typical sized card on a mid-laptop ; **FLIP btn visibility** (_card-deck.scss): `.my-sign-flip-btn { display: none }` at rest; `.my-sign-stage.sig-stage--frozen .my-sign-flip-btn { display: inline-flex }` on lock. The btn's position (absolute, bottom-left of card) was already added in iteration 1 ; **on-load lock-restore**: if `User.significator` is set, the picker auto-locks that card via `_lock(savedCardEl)` so the user sees their persisted choice in the locked-state UI (stat block + FLIP visible) instead of an idle empty frame. Polarity initial value (data-polarity on .my-sign-page) reflects `current_significator_reversed` — False=gravity (default), True=levity ; **regression**: 7 FTs in test_bill_my_sign green in 57s. Visual verify deferred to user — picker should now show: idle empty stage + grid below; hover thumbnail → stage card preview; click → preview persists + stat block + FLIP appear; NVM → back to idle; FLIP click → horizontal-perspective Y-axis rotation w. polarity content swap mid-animation. Polarity-themed colour styles (levity inverted palette / gravity stark contrast / per-polarity text-shadows) now apply on my-sign matching the room sig-select look
Code architected by Disco DeDisco <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-19 00:15:13 -04:00
|
|
|
|
// ─── My Sign picker — sizing + state-gated reveal ────────────────────────────
|
My Sign picker iteration 3 — SCAN SIGN landing hex + OK/NVM thumbnail two-step + duoUser picker bg — Sprint 4a-cont — TDD
Two-phase picker. Landing phase renders the DRY 1-chair table hex w. a central SCAN SIGN .btn-primary; clicking it swaps the page to picker phase (hex hides, sig-card grid + always-present stage frame + SAVE SIGN visible). Stage frame previews the saved sig on landing if User.significator is set ; sig-card selection lifts the room's two-step OK/NVM-on-thumbnail pattern via `.sig-card-actions` w. `.sig-ok-btn`/`.sig-nvm-btn`: click thumb → `.sig-focused` (CSS reveals OK badge, stage previews card, no lock); click OK → `.sig-reserved--own` (CSS swaps OK→NVM badge, `.sig-stage--frozen` reveals stat block + FLIP, SAVE SIGN enables); click NVM → unlock + clear focus + disable SAVE SIGN ; SAVE SIGN form pinned `position:absolute; bottom:0.75rem; right:1rem` to .my-sign-stage so it stops shifting across the stage row when the stat block reveals on lock (was getting shoved left as a flex item alongside the stat-block reveal) ; .my-sign-page mirrors .room-page's `flex:1; min-height:0; display:flex; flex-direction:column` so the DRY hex container chain propagates real height down into #id_game_table for room.js's scaleTable() to compute against (was reading 0 + leaving the hex unscaled at 200×231 in a 360×320 scene) ; stage min-height gated to picker phase (`.my-sign-page[data-phase="picker"] .my-sign-stage`) — landing-phase stage is natural-sized so the hex centers in the bigger available area instead of being bottom-anchored by a 376px stage reservation ; picker-phase bg uses `rgba(var(--duoUser), 1)` so the transition from "hex face" → "card pile on felt" reads as a continuous surface rather than a context swap ; room sig-select media queries re-scoped to `.sig-overlay .sig-deck-grid` so they don't bleed into my-sign — my-sign gets its own breakpoint cascade: 6×3rem (portrait) → 9×3rem (≥900px landscape) → 18×3rem (≥1600px) → 18×5rem (≥2200px); thresholds bumped from sig-select's 1400/1800px so 18×col + sidebar/footer margins clear the viewport at fluid-rem ceiling (rem=22 → 18×3rem=1188px + 220px margins=1408, safe with 1600px floor) ; default `repeat(6, 1fr)` collapsed to 0-width when paired w. `align-self:center` (no parent width for `fr` to resolve against, hence the dotted-line miniscule cards in portrait); fixed `repeat(6, 3rem)` at portrait default fixes it ; SCAN SIGN font-size 0.75rem (vs .btn-primary's default 0.875rem) so the 2-line "SCAN/SIGN" label fits inside the 4rem circle without crowding the border — treated as a smaller variant via `#id_scan_sign_btn` rule scoped under .my-sign-landing ; room.js's scaleTable() runs on DOMContentLoaded before flex layout flushes (#id_game_table.clientWidth/Height read 0 at that moment) — added `requestAnimationFrame → dispatchEvent('resize')` tick at the end of the inline IIFE so scaleTable re-fires once layout settles ; tests — 6 FTs in test_bill_my_sign.py rewritten for the new flow: test_landing_renders_dry_hex_with_scan_sign_button pins the 1-chair hex + central SCAN SIGN + hidden picker grid; test_scan_sign_click_transitions_to_picker_phase pins the phase swap (hex hides, grid shows); test_click_thumbnail_shows_OK_btn_without_locking pins step 1 (focus + OK appears, no lock yet); test_OK_click_locks_thumbnail_and_enables_save_sign pins step 2 (lock + NVM appears + SAVE SIGN enables + persists to /billboard/ applet); test_NVM_click_deselects_and_disables_save_sign pins NVM unlock cycle; test_landing_previews_saved_sig_on_stage pins the on-load saved-sig preview behavior — all green visually verified across portrait + landscape
Code architected by Disco DeDisco <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-19 01:11:41 -04:00
|
|
|
|
// Two-phase layout: landing (DRY 1-chair hex w. SCAN SIGN center) → picker
|
|
|
|
|
|
// (sig-card grid below an always-present stage frame). SAVE SIGN rides
|
|
|
|
|
|
// inside .my-sign-stage to its right, sig-select-style. FLIP btn + stat
|
|
|
|
|
|
// block hidden at rest; revealed by `.sig-stage--frozen` (added by JS on
|
|
|
|
|
|
// OK confirm, cleared by NVM). SPIN (orientation 180°) stays in
|
|
|
|
|
|
// `.sig-stat-block`; FLIP toggles polarity (data-polarity on .my-sign-page).
|
|
|
|
|
|
// .my-sign-page mirrors .room-page's flex-column-fill-aperture pattern so
|
|
|
|
|
|
// the DRY hex inside .my-sign-landing gets a non-zero #id_game_table size
|
|
|
|
|
|
// for room.js's scaleTable() to compute against. Without flex:1 + min-height:0
|
|
|
|
|
|
// the container chain collapses + the hex renders unscaled (200×231 inside
|
|
|
|
|
|
// a 360×320 scene, looking elongated/portrait).
|
My Sign picker: hover-preview, click-lock, NVM-unlock + polarity SCSS port + bigger stage — Sprint 4a-cont iteration 2
User-driven polish on iteration 1: separate hover-preview from click-lock semantics (room sig-select pattern), add NVM to unlock, port the room's `.sig-overlay[data-polarity]` polarity-themed CSS to also target `.my-sign-page[data-polarity]`, bump the stage card width so it occupies a bigger slice of the viewport ; **state machine** (inline JS in my_sign.html): three discrete states — (a) idle: stage frame visible but empty (stage card hidden via display:none, stat block hidden via `.sig-stage--frozen` absence, FLIP btn hidden via CSS); (b) hover: hovered .sig-card populates the stage card (preview); mouseleave clears it; mouseover-mouseout sequence guards against transient gaps when moving between adjacent thumbnails (relatedTarget closest('.sig-card') check); (c) locked: click on any grid card freezes the stage — populates content, adds `.sig-stage--frozen` to .sig-stage (which surfaces .sig-stat-block + .my-sign-flip-btn via CSS), enables SAVE SIGN, reveals NVM. Subsequent hovers ignored while locked. NVM click reverts to idle (clears content, hides stat-block + FLIP, disables SAVE, hides NVM) ; **new template** elements: NVM `<button id="id_nvm_sign_btn" class="btn btn-cancel">` next to SAVE SIGN in the form, hidden by default (style="display:none") + revealed on lock. Stage card re-acquires `style="display:none"` (hidden on load, JS-shown on hover/lock). `sig-stage--frozen` class no longer initial — JS-added on click ; **polarity SCSS port** (_card-deck.scss L820-905): extended `.sig-overlay[data-polarity="levity"]` + `[data-polarity="gravity"]` selector lists to include `.my-sign-page[data-polarity="levity"]` + `[gravity"]`. Rules inside (e.g. `.sig-card { background: rgba(--secUser) }`, `.sig-stage-card .fan-card-name { color: --quiUser }`, stat-face-label colour flips, text-shadow polarity variants) automatically apply on the my-sign page since `data-polarity` lives on the page wrapper (descendants .sig-card + .sig-stage-card both inherit). Moved `data-polarity` from `.my-sign-stage` to `.my-sign-page` in the template + JS so descendant scoping works (was a stage-scoped attr in iteration 1, which couldn't reach the sibling .sig-deck-grid) ; **bigger stage** (_card-deck.scss): `.my-sign-page { --sig-card-w: clamp(140px, 36vw, 220px); }` — scales w. viewport, 140px floor for portrait, 220px ceiling for landscape, ~36vw in between. Stage card + stat block both width-driven by this var so they scale together. The clamp() ceiling matches the room sig-select's typical sized card on a mid-laptop ; **FLIP btn visibility** (_card-deck.scss): `.my-sign-flip-btn { display: none }` at rest; `.my-sign-stage.sig-stage--frozen .my-sign-flip-btn { display: inline-flex }` on lock. The btn's position (absolute, bottom-left of card) was already added in iteration 1 ; **on-load lock-restore**: if `User.significator` is set, the picker auto-locks that card via `_lock(savedCardEl)` so the user sees their persisted choice in the locked-state UI (stat block + FLIP visible) instead of an idle empty frame. Polarity initial value (data-polarity on .my-sign-page) reflects `current_significator_reversed` — False=gravity (default), True=levity ; **regression**: 7 FTs in test_bill_my_sign green in 57s. Visual verify deferred to user — picker should now show: idle empty stage + grid below; hover thumbnail → stage card preview; click → preview persists + stat block + FLIP appear; NVM → back to idle; FLIP click → horizontal-perspective Y-axis rotation w. polarity content swap mid-animation. Polarity-themed colour styles (levity inverted palette / gravity stark contrast / per-polarity text-shadows) now apply on my-sign matching the room sig-select look
Code architected by Disco DeDisco <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-19 00:15:13 -04:00
|
|
|
|
.my-sign-page {
|
|
|
|
|
|
--sig-card-w: clamp(140px, 36vw, 220px);
|
My Sign picker iteration 3 — SCAN SIGN landing hex + OK/NVM thumbnail two-step + duoUser picker bg — Sprint 4a-cont — TDD
Two-phase picker. Landing phase renders the DRY 1-chair table hex w. a central SCAN SIGN .btn-primary; clicking it swaps the page to picker phase (hex hides, sig-card grid + always-present stage frame + SAVE SIGN visible). Stage frame previews the saved sig on landing if User.significator is set ; sig-card selection lifts the room's two-step OK/NVM-on-thumbnail pattern via `.sig-card-actions` w. `.sig-ok-btn`/`.sig-nvm-btn`: click thumb → `.sig-focused` (CSS reveals OK badge, stage previews card, no lock); click OK → `.sig-reserved--own` (CSS swaps OK→NVM badge, `.sig-stage--frozen` reveals stat block + FLIP, SAVE SIGN enables); click NVM → unlock + clear focus + disable SAVE SIGN ; SAVE SIGN form pinned `position:absolute; bottom:0.75rem; right:1rem` to .my-sign-stage so it stops shifting across the stage row when the stat block reveals on lock (was getting shoved left as a flex item alongside the stat-block reveal) ; .my-sign-page mirrors .room-page's `flex:1; min-height:0; display:flex; flex-direction:column` so the DRY hex container chain propagates real height down into #id_game_table for room.js's scaleTable() to compute against (was reading 0 + leaving the hex unscaled at 200×231 in a 360×320 scene) ; stage min-height gated to picker phase (`.my-sign-page[data-phase="picker"] .my-sign-stage`) — landing-phase stage is natural-sized so the hex centers in the bigger available area instead of being bottom-anchored by a 376px stage reservation ; picker-phase bg uses `rgba(var(--duoUser), 1)` so the transition from "hex face" → "card pile on felt" reads as a continuous surface rather than a context swap ; room sig-select media queries re-scoped to `.sig-overlay .sig-deck-grid` so they don't bleed into my-sign — my-sign gets its own breakpoint cascade: 6×3rem (portrait) → 9×3rem (≥900px landscape) → 18×3rem (≥1600px) → 18×5rem (≥2200px); thresholds bumped from sig-select's 1400/1800px so 18×col + sidebar/footer margins clear the viewport at fluid-rem ceiling (rem=22 → 18×3rem=1188px + 220px margins=1408, safe with 1600px floor) ; default `repeat(6, 1fr)` collapsed to 0-width when paired w. `align-self:center` (no parent width for `fr` to resolve against, hence the dotted-line miniscule cards in portrait); fixed `repeat(6, 3rem)` at portrait default fixes it ; SCAN SIGN font-size 0.75rem (vs .btn-primary's default 0.875rem) so the 2-line "SCAN/SIGN" label fits inside the 4rem circle without crowding the border — treated as a smaller variant via `#id_scan_sign_btn` rule scoped under .my-sign-landing ; room.js's scaleTable() runs on DOMContentLoaded before flex layout flushes (#id_game_table.clientWidth/Height read 0 at that moment) — added `requestAnimationFrame → dispatchEvent('resize')` tick at the end of the inline IIFE so scaleTable re-fires once layout settles ; tests — 6 FTs in test_bill_my_sign.py rewritten for the new flow: test_landing_renders_dry_hex_with_scan_sign_button pins the 1-chair hex + central SCAN SIGN + hidden picker grid; test_scan_sign_click_transitions_to_picker_phase pins the phase swap (hex hides, grid shows); test_click_thumbnail_shows_OK_btn_without_locking pins step 1 (focus + OK appears, no lock yet); test_OK_click_locks_thumbnail_and_enables_save_sign pins step 2 (lock + NVM appears + SAVE SIGN enables + persists to /billboard/ applet); test_NVM_click_deselects_and_disables_save_sign pins NVM unlock cycle; test_landing_previews_saved_sig_on_stage pins the on-load saved-sig preview behavior — all green visually verified across portrait + landscape
Code architected by Disco DeDisco <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-19 01:11:41 -04:00
|
|
|
|
flex: 1;
|
|
|
|
|
|
min-height: 0;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
feat: My Sign saved-sig state — --duoUser bg, centred card+stat-block, stage card auto-rotates for reversed sigs on landing. Three follow-up polish items atop the f609313 read-only-saved-sig batch.
(1) **`--duoUser` bg on the saved-sig aperture.** Per user spec — once the table hex is server-side gone (f609313's `{% if not current_significator %}` wrap), the now-mostly-empty olive aperture reads as a distinct mode vs the default landing (--priUser bg w. hex). New `.my-sign-page[data-current-card-id] { background-color: rgba(var(--duoUser), 1); }` block in `_card-deck.scss:644-696`. Keyed on `data-current-card-id` (present only when `current_significator` is set per `my_sign.html:20`) rather than the absence of `[data-phase="landing"]` — picker also lacks the hex but should keep --priUser. Mirrors how `.my-sea-page[data-phase="picker"]` swaps bg in `_gameboard.scss`.
(2) **Stage card + stat block centre in the aperture.** Default landing left-anchored the stage natural-sized at the top of the column (above the hex which filled the rest); w. the hex gone there's a wide empty page bottom. `.my-sign-page[data-current-card-id] .my-sign-stage` overrides to `flex: 1; justify-content: center; align-items: center; padding-left: 0;` — stage grows to fill, card+stat-block centre as a unit. `.my-sign-landing` collapses to `flex: 0 0 auto` + `position: static`; DEL is `position: absolute` so it walks up to `.my-sign-page` (already `position: relative`) + pins to the page corner. **2 traps caught mid-build** in the centring pass: (a) `.sig-stat-block`'s default `align-self: flex-end` (`_card-deck.scss:599`) overrode the parent's `align-items: center` on the cross axis, so the stat block floated to the bottom of the stage while the card sat at vertical-centre — forced `align-self: center` on this state. (b) `.my-sign-flip-btn`'s `left: calc(1.5rem + 0.4rem)` (`_card-deck.scss:747`) assumed the card sat flush against `.sig-stage`'s padded-left edge — true on the picker but wrong w. `justify-content: center`, FLIP landed at the stage's left edge w. the card centred ~3rem to the right of it. Re-derived left/bottom from the centred geometry: card's left edge in stage = `(100% - 2 * sig-card-w - 0.75rem) / 2` (the centred card+gap+stat group's left), card's bottom edge = `50% - sig-card-w * 0.8` from stage bottom (cardHeight = sig-card-w × 8/5 = × 1.6, half = × 0.8). `+ 0.4rem` on each lands FLIP just inside the card's bottom-left corner, same offset as the picker-side intent.
(3) **Stage card auto-rotates 180° on landing for saved-reversed sigs.** Server-side `data-polarity` attribute on `.my-sign-page` already reflected `significator_reversed` correctly (drives the polarity-themed color rules at `_card-deck.scss:917-1042` for levity/gravity ink) but the visual 180° rotation lives in the `stage-card--reversed` class which was only JS-applied via `_toggleOrientation()` (SPIN btn handler). On init w. a saved sig, `_populateStage(savedCardEl)` filled the card's data but didn't touch rotation — so saved-reversed sigs rendered upright on landing while the My Sign applet (template-driven, reads `request.user.significator_reversed` directly + conditionally adds `stage-card--reversed` per `_applet-my-sign.html:9`) correctly rotated them. Two surfaces disagreed → user read the applet as inverted ("non-reversed sig displays upside-down in the applet"). Actually the my_sign.html stage was the liar; the applet was right. Fixed at `my_sign.html:404-406` — after `_populateStage(savedCardEl) + stage.classList.add('sig-stage--frozen')`, if `revInput.value === '1'` (= saved reversed=True) call `_toggleOrientation()` once. That helper covers all three coordinated state mutations: `stageCard.classList.toggle('stage-card--reversed', on)` (visual 180° rotation), `statBlock.classList.toggle('is-reversed', on)` (swaps to reversal face per `_card-deck.scss:62-65`), `spinBtn.classList.toggle('is-reversed', on)` (visual indicator). Both surfaces now agree. Per user direction, a follow-up will lock my_sign.html SAVE to always write `reversed=False` (Tarot-tradition convention) — but the underlying rotation pipeline still has to work for room-side sig-select where reversed sigs are needed.
**TDD coverage**: no new tests — `test_landing_previews_saved_sig_on_stage` (updated in f609313) still passes as written (its assertions are around the frozen-stage + stat-block-visible + hex-absent contract, all of which hold under the centring + rotation patches). The reversed-sig-auto-rotate case is light-weight enough (one branch w. a well-known helper) to not need a dedicated FT; if it regresses, the existing room-side `_toggleOrientation` coverage in the gameboard FTs catches the helper itself + manual verify caught it here. Manual verify done on /billboard/my-sign/ w. `disco`'s saved Jack of Brands (reversed=False, renders upright + centred w. --duoUser bg + FLIP on card's bottom-left + DEL on page's bottom-right). 1211 IT/UT still green; one minor visual to chase before locking my_sign.html to non-reversed-only — verifying that a reversed-saved sig renders rotated on return (DB has none currently, will test after the follow-up).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-22 13:21:55 -04:00
|
|
|
|
// Saved-sig read-only state — page bg shifts to --duoUser so the now-
|
|
|
|
|
|
// hexless aperture reads as a distinct mode (mirrors how `.my-sea-page
|
|
|
|
|
|
// [data-phase="picker"]` swaps bg in `_gameboard.scss`). Keyed on the
|
|
|
|
|
|
// presence of `data-current-card-id` since that attribute renders only
|
|
|
|
|
|
// when the user has a saved significator. Stage card + stat block also
|
|
|
|
|
|
// center in the now-empty page aperture (default landing keeps stage
|
|
|
|
|
|
// natural-sized at the top above the hex; here there's no hex so the
|
|
|
|
|
|
// stage gets to grow + middle itself).
|
|
|
|
|
|
.my-sign-page[data-current-card-id] {
|
|
|
|
|
|
background-color: rgba(var(--duoUser), 1);
|
|
|
|
|
|
|
|
|
|
|
|
// Stage grows to fill the available column space + centres its card
|
|
|
|
|
|
// row both horizontally + vertically. Override `.sig-stage`'s default
|
|
|
|
|
|
// `align-items: flex-end` + `padding-left: 1.5rem` so card + stat
|
|
|
|
|
|
// block land truly centred.
|
|
|
|
|
|
.my-sign-stage {
|
|
|
|
|
|
flex: 1;
|
|
|
|
|
|
min-height: 0;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
padding-left: 0;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// `.sig-stat-block`'s default `align-self: flex-end` (line 599)
|
|
|
|
|
|
// overrides the parent's `align-items: center` on the cross axis,
|
|
|
|
|
|
// so the stat block was floating to the bottom of the stage while
|
|
|
|
|
|
// the card sat at vertical-centre. Force `center` here to keep the
|
|
|
|
|
|
// 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);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// Landing collapses since the hex is server-side gone — just DEL is
|
|
|
|
|
|
// left + that's `position: absolute`. `position: static` here drops
|
|
|
|
|
|
// landing's positioning context so DEL walks up to `.my-sign-page`
|
|
|
|
|
|
// (already `position: relative`) + pins to the page corner.
|
|
|
|
|
|
.my-sign-landing {
|
|
|
|
|
|
flex: 0 0 auto;
|
|
|
|
|
|
min-height: 0;
|
|
|
|
|
|
position: static;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
My Sign picker iteration 3 — SCAN SIGN landing hex + OK/NVM thumbnail two-step + duoUser picker bg — Sprint 4a-cont — TDD
Two-phase picker. Landing phase renders the DRY 1-chair table hex w. a central SCAN SIGN .btn-primary; clicking it swaps the page to picker phase (hex hides, sig-card grid + always-present stage frame + SAVE SIGN visible). Stage frame previews the saved sig on landing if User.significator is set ; sig-card selection lifts the room's two-step OK/NVM-on-thumbnail pattern via `.sig-card-actions` w. `.sig-ok-btn`/`.sig-nvm-btn`: click thumb → `.sig-focused` (CSS reveals OK badge, stage previews card, no lock); click OK → `.sig-reserved--own` (CSS swaps OK→NVM badge, `.sig-stage--frozen` reveals stat block + FLIP, SAVE SIGN enables); click NVM → unlock + clear focus + disable SAVE SIGN ; SAVE SIGN form pinned `position:absolute; bottom:0.75rem; right:1rem` to .my-sign-stage so it stops shifting across the stage row when the stat block reveals on lock (was getting shoved left as a flex item alongside the stat-block reveal) ; .my-sign-page mirrors .room-page's `flex:1; min-height:0; display:flex; flex-direction:column` so the DRY hex container chain propagates real height down into #id_game_table for room.js's scaleTable() to compute against (was reading 0 + leaving the hex unscaled at 200×231 in a 360×320 scene) ; stage min-height gated to picker phase (`.my-sign-page[data-phase="picker"] .my-sign-stage`) — landing-phase stage is natural-sized so the hex centers in the bigger available area instead of being bottom-anchored by a 376px stage reservation ; picker-phase bg uses `rgba(var(--duoUser), 1)` so the transition from "hex face" → "card pile on felt" reads as a continuous surface rather than a context swap ; room sig-select media queries re-scoped to `.sig-overlay .sig-deck-grid` so they don't bleed into my-sign — my-sign gets its own breakpoint cascade: 6×3rem (portrait) → 9×3rem (≥900px landscape) → 18×3rem (≥1600px) → 18×5rem (≥2200px); thresholds bumped from sig-select's 1400/1800px so 18×col + sidebar/footer margins clear the viewport at fluid-rem ceiling (rem=22 → 18×3rem=1188px + 220px margins=1408, safe with 1600px floor) ; default `repeat(6, 1fr)` collapsed to 0-width when paired w. `align-self:center` (no parent width for `fr` to resolve against, hence the dotted-line miniscule cards in portrait); fixed `repeat(6, 3rem)` at portrait default fixes it ; SCAN SIGN font-size 0.75rem (vs .btn-primary's default 0.875rem) so the 2-line "SCAN/SIGN" label fits inside the 4rem circle without crowding the border — treated as a smaller variant via `#id_scan_sign_btn` rule scoped under .my-sign-landing ; room.js's scaleTable() runs on DOMContentLoaded before flex layout flushes (#id_game_table.clientWidth/Height read 0 at that moment) — added `requestAnimationFrame → dispatchEvent('resize')` tick at the end of the inline IIFE so scaleTable re-fires once layout settles ; tests — 6 FTs in test_bill_my_sign.py rewritten for the new flow: test_landing_renders_dry_hex_with_scan_sign_button pins the 1-chair hex + central SCAN SIGN + hidden picker grid; test_scan_sign_click_transitions_to_picker_phase pins the phase swap (hex hides, grid shows); test_click_thumbnail_shows_OK_btn_without_locking pins step 1 (focus + OK appears, no lock yet); test_OK_click_locks_thumbnail_and_enables_save_sign pins step 2 (lock + NVM appears + SAVE SIGN enables + persists to /billboard/ applet); test_NVM_click_deselects_and_disables_save_sign pins NVM unlock cycle; test_landing_previews_saved_sig_on_stage pins the on-load saved-sig preview behavior — all green visually verified across portrait + landscape
Code architected by Disco DeDisco <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-19 01:11:41 -04:00
|
|
|
|
// Stage frame — fixed slice in picker phase, natural-sized on landing.
|
|
|
|
|
|
// The picker min-height reserves real estate so hover-preview cards don't
|
|
|
|
|
|
// shift adjacent layout; on landing the stage shrinks to its actual content
|
|
|
|
|
|
// (empty or saved-sig preview) so the DRY hex below gets fair vertical
|
|
|
|
|
|
// space. SAVE SIGN form is absolutely positioned (see below) so it stays
|
|
|
|
|
|
// pinned when the stat block reveals on OK confirm.
|
|
|
|
|
|
.my-sign-stage {
|
|
|
|
|
|
flex: 0 0 auto;
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.my-sign-page[data-phase="picker"] .my-sign-stage {
|
|
|
|
|
|
min-height: calc(var(--sig-card-w, 140px) * 8 / 5 + 1.5rem);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// SAVE SIGN form — pinned to the bottom-right of the stage so it stays in
|
|
|
|
|
|
// place across hover/lock states (the stat block reveal would otherwise
|
|
|
|
|
|
// shove a flex-positioned btn around the stage row).
|
|
|
|
|
|
#id_save_sign_form {
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
bottom: 0.75rem;
|
|
|
|
|
|
right: 1rem;
|
|
|
|
|
|
margin: 0;
|
|
|
|
|
|
z-index: 6;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// Landing phase — DRY hex container. flex:1 + min-height:0 propagates the
|
|
|
|
|
|
// available vertical space into .room-shell → #id_game_table → scaleTable().
|
|
|
|
|
|
.my-sign-landing {
|
|
|
|
|
|
flex: 1;
|
|
|
|
|
|
min-height: 0;
|
|
|
|
|
|
display: flex;
|
My Sign DEL btn: clear-sign affordance on SCAN SIGN landing — Sprint 4b-adjacent of My Sea roadmap — TDD
Pre-spec'd in [[sprint-my-sea-sign-gate-may19]] as the unblocker for tomorrow's visual verification of 4b's no-sig branch — admin user (@disco) had a saved sig from Sprint 4a testing & there was no in-UI affordance to undo it short of DB surgery. Lands ahead of the deferred 4b visual verify so dev users can toggle between sig/no-sig states on Claudezilla.
- Endpoint: `path("my-sign/clear", views.clear_sign, name="clear_sign")` — POST sets `User.significator = None` + `significator_reversed = False`, redirects to picker; GET is a no-mutation redirect to picker (mirrors save_sign's GET handling). `login_required(login_url="/")`. No trailing slash per [[feedback_url_convention_actions_no_trailing_slash]] (action endpoint, not page).
- Template (my_sign.html): `<form id="id_clear_sign_form" class="my-sign-clear-form">` w. `<button id="id_clear_sign_btn" class="btn btn-danger">DEL</button>`, rendered ONLY when `current_significator` is set; sits inside `.my-sign-landing` as a sibling of `.room-shell` so it's bound to the landing-phase UI alone (picker phase already has its own NVM unlock affordance on focused thumbnails).
- SCSS: anchored bottom-right of `.my-sign-landing` via `position: absolute; bottom: .75rem; right: 1rem` — `.my-sign-landing` gains `position: relative` to scope the absolute. `.btn-danger` carries the destructive treatment; "DEL" mirrors post.html gear menu's DEL convention from [[sprint-post-polish-may13]].
- 3 FTs in new `MySignClearTest` class — covers: btn renders on landing when sig saved (T1, asserts text "DEL" + `.btn-danger` class); btn absent when no sig (T2); click POSTs, reloads, & wipes `User.significator` + `significator_reversed` in DB (T3).
- 6 ITs in new `ClearSignViewTest` + `MySignClearAffordanceTemplateTest` — covers: login_required gate, POST wipes both fields w. redirect-back, GET redirects w.o mutation, POST-w/o-existing-sig is idempotent no-op, template renders btn only when sig set, template's form action targets `clear_sign` reverse.
- 1029 IT/UT green in 47s (+6 from baseline); 20/20 FT green across test_bill_my_sign + test_game_my_sea in 165s.
Code architected by Disco DeDisco <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-19 14:13:20 -04:00
|
|
|
|
position: relative;
|
My Sign picker iteration 3 — SCAN SIGN landing hex + OK/NVM thumbnail two-step + duoUser picker bg — Sprint 4a-cont — TDD
Two-phase picker. Landing phase renders the DRY 1-chair table hex w. a central SCAN SIGN .btn-primary; clicking it swaps the page to picker phase (hex hides, sig-card grid + always-present stage frame + SAVE SIGN visible). Stage frame previews the saved sig on landing if User.significator is set ; sig-card selection lifts the room's two-step OK/NVM-on-thumbnail pattern via `.sig-card-actions` w. `.sig-ok-btn`/`.sig-nvm-btn`: click thumb → `.sig-focused` (CSS reveals OK badge, stage previews card, no lock); click OK → `.sig-reserved--own` (CSS swaps OK→NVM badge, `.sig-stage--frozen` reveals stat block + FLIP, SAVE SIGN enables); click NVM → unlock + clear focus + disable SAVE SIGN ; SAVE SIGN form pinned `position:absolute; bottom:0.75rem; right:1rem` to .my-sign-stage so it stops shifting across the stage row when the stat block reveals on lock (was getting shoved left as a flex item alongside the stat-block reveal) ; .my-sign-page mirrors .room-page's `flex:1; min-height:0; display:flex; flex-direction:column` so the DRY hex container chain propagates real height down into #id_game_table for room.js's scaleTable() to compute against (was reading 0 + leaving the hex unscaled at 200×231 in a 360×320 scene) ; stage min-height gated to picker phase (`.my-sign-page[data-phase="picker"] .my-sign-stage`) — landing-phase stage is natural-sized so the hex centers in the bigger available area instead of being bottom-anchored by a 376px stage reservation ; picker-phase bg uses `rgba(var(--duoUser), 1)` so the transition from "hex face" → "card pile on felt" reads as a continuous surface rather than a context swap ; room sig-select media queries re-scoped to `.sig-overlay .sig-deck-grid` so they don't bleed into my-sign — my-sign gets its own breakpoint cascade: 6×3rem (portrait) → 9×3rem (≥900px landscape) → 18×3rem (≥1600px) → 18×5rem (≥2200px); thresholds bumped from sig-select's 1400/1800px so 18×col + sidebar/footer margins clear the viewport at fluid-rem ceiling (rem=22 → 18×3rem=1188px + 220px margins=1408, safe with 1600px floor) ; default `repeat(6, 1fr)` collapsed to 0-width when paired w. `align-self:center` (no parent width for `fr` to resolve against, hence the dotted-line miniscule cards in portrait); fixed `repeat(6, 3rem)` at portrait default fixes it ; SCAN SIGN font-size 0.75rem (vs .btn-primary's default 0.875rem) so the 2-line "SCAN/SIGN" label fits inside the 4rem circle without crowding the border — treated as a smaller variant via `#id_scan_sign_btn` rule scoped under .my-sign-landing ; room.js's scaleTable() runs on DOMContentLoaded before flex layout flushes (#id_game_table.clientWidth/Height read 0 at that moment) — added `requestAnimationFrame → dispatchEvent('resize')` tick at the end of the inline IIFE so scaleTable re-fires once layout settles ; tests — 6 FTs in test_bill_my_sign.py rewritten for the new flow: test_landing_renders_dry_hex_with_scan_sign_button pins the 1-chair hex + central SCAN SIGN + hidden picker grid; test_scan_sign_click_transitions_to_picker_phase pins the phase swap (hex hides, grid shows); test_click_thumbnail_shows_OK_btn_without_locking pins step 1 (focus + OK appears, no lock yet); test_OK_click_locks_thumbnail_and_enables_save_sign pins step 2 (lock + NVM appears + SAVE SIGN enables + persists to /billboard/ applet); test_NVM_click_deselects_and_disables_save_sign pins NVM unlock cycle; test_landing_previews_saved_sig_on_stage pins the on-load saved-sig preview behavior — all green visually verified across portrait + landscape
Code architected by Disco DeDisco <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-19 01:11:41 -04:00
|
|
|
|
|
|
|
|
|
|
// SCAN SIGN btn — centered in the hex. Default .btn-primary text
|
|
|
|
|
|
// (0.875rem) scales tighter than the room's PICK SIGS btn font; this
|
|
|
|
|
|
// bumps it down a notch so the 2-line "SCAN/SIGN" label sits cleanly
|
|
|
|
|
|
// inside the 4rem circle without crowding the border.
|
|
|
|
|
|
#id_scan_sign_btn {
|
|
|
|
|
|
white-space: normal;
|
|
|
|
|
|
}
|
My Sign DEL btn: clear-sign affordance on SCAN SIGN landing — Sprint 4b-adjacent of My Sea roadmap — TDD
Pre-spec'd in [[sprint-my-sea-sign-gate-may19]] as the unblocker for tomorrow's visual verification of 4b's no-sig branch — admin user (@disco) had a saved sig from Sprint 4a testing & there was no in-UI affordance to undo it short of DB surgery. Lands ahead of the deferred 4b visual verify so dev users can toggle between sig/no-sig states on Claudezilla.
- Endpoint: `path("my-sign/clear", views.clear_sign, name="clear_sign")` — POST sets `User.significator = None` + `significator_reversed = False`, redirects to picker; GET is a no-mutation redirect to picker (mirrors save_sign's GET handling). `login_required(login_url="/")`. No trailing slash per [[feedback_url_convention_actions_no_trailing_slash]] (action endpoint, not page).
- Template (my_sign.html): `<form id="id_clear_sign_form" class="my-sign-clear-form">` w. `<button id="id_clear_sign_btn" class="btn btn-danger">DEL</button>`, rendered ONLY when `current_significator` is set; sits inside `.my-sign-landing` as a sibling of `.room-shell` so it's bound to the landing-phase UI alone (picker phase already has its own NVM unlock affordance on focused thumbnails).
- SCSS: anchored bottom-right of `.my-sign-landing` via `position: absolute; bottom: .75rem; right: 1rem` — `.my-sign-landing` gains `position: relative` to scope the absolute. `.btn-danger` carries the destructive treatment; "DEL" mirrors post.html gear menu's DEL convention from [[sprint-post-polish-may13]].
- 3 FTs in new `MySignClearTest` class — covers: btn renders on landing when sig saved (T1, asserts text "DEL" + `.btn-danger` class); btn absent when no sig (T2); click POSTs, reloads, & wipes `User.significator` + `significator_reversed` in DB (T3).
- 6 ITs in new `ClearSignViewTest` + `MySignClearAffordanceTemplateTest` — covers: login_required gate, POST wipes both fields w. redirect-back, GET redirects w.o mutation, POST-w/o-existing-sig is idempotent no-op, template renders btn only when sig set, template's form action targets `clear_sign` reverse.
- 1029 IT/UT green in 47s (+6 from baseline); 20/20 FT green across test_bill_my_sign + test_game_my_sea in 165s.
Code architected by Disco DeDisco <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-19 14:13:20 -04:00
|
|
|
|
|
|
|
|
|
|
// DEL btn — destructive secondary action, only rendered when a sig
|
|
|
|
|
|
// is saved. Anchored bottom-right of the landing area so it doesn't
|
|
|
|
|
|
// compete w. the centered SCAN SIGN hex for visual weight. .btn-danger
|
|
|
|
|
|
// for the destructive treatment (mirrors post.html gear menu DEL).
|
|
|
|
|
|
.my-sign-clear-form {
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
bottom: 0.75rem;
|
|
|
|
|
|
right: 1rem;
|
|
|
|
|
|
margin: 0;
|
|
|
|
|
|
}
|
My Sign picker iteration 3 — SCAN SIGN landing hex + OK/NVM thumbnail two-step + duoUser picker bg — Sprint 4a-cont — TDD
Two-phase picker. Landing phase renders the DRY 1-chair table hex w. a central SCAN SIGN .btn-primary; clicking it swaps the page to picker phase (hex hides, sig-card grid + always-present stage frame + SAVE SIGN visible). Stage frame previews the saved sig on landing if User.significator is set ; sig-card selection lifts the room's two-step OK/NVM-on-thumbnail pattern via `.sig-card-actions` w. `.sig-ok-btn`/`.sig-nvm-btn`: click thumb → `.sig-focused` (CSS reveals OK badge, stage previews card, no lock); click OK → `.sig-reserved--own` (CSS swaps OK→NVM badge, `.sig-stage--frozen` reveals stat block + FLIP, SAVE SIGN enables); click NVM → unlock + clear focus + disable SAVE SIGN ; SAVE SIGN form pinned `position:absolute; bottom:0.75rem; right:1rem` to .my-sign-stage so it stops shifting across the stage row when the stat block reveals on lock (was getting shoved left as a flex item alongside the stat-block reveal) ; .my-sign-page mirrors .room-page's `flex:1; min-height:0; display:flex; flex-direction:column` so the DRY hex container chain propagates real height down into #id_game_table for room.js's scaleTable() to compute against (was reading 0 + leaving the hex unscaled at 200×231 in a 360×320 scene) ; stage min-height gated to picker phase (`.my-sign-page[data-phase="picker"] .my-sign-stage`) — landing-phase stage is natural-sized so the hex centers in the bigger available area instead of being bottom-anchored by a 376px stage reservation ; picker-phase bg uses `rgba(var(--duoUser), 1)` so the transition from "hex face" → "card pile on felt" reads as a continuous surface rather than a context swap ; room sig-select media queries re-scoped to `.sig-overlay .sig-deck-grid` so they don't bleed into my-sign — my-sign gets its own breakpoint cascade: 6×3rem (portrait) → 9×3rem (≥900px landscape) → 18×3rem (≥1600px) → 18×5rem (≥2200px); thresholds bumped from sig-select's 1400/1800px so 18×col + sidebar/footer margins clear the viewport at fluid-rem ceiling (rem=22 → 18×3rem=1188px + 220px margins=1408, safe with 1600px floor) ; default `repeat(6, 1fr)` collapsed to 0-width when paired w. `align-self:center` (no parent width for `fr` to resolve against, hence the dotted-line miniscule cards in portrait); fixed `repeat(6, 3rem)` at portrait default fixes it ; SCAN SIGN font-size 0.75rem (vs .btn-primary's default 0.875rem) so the 2-line "SCAN/SIGN" label fits inside the 4rem circle without crowding the border — treated as a smaller variant via `#id_scan_sign_btn` rule scoped under .my-sign-landing ; room.js's scaleTable() runs on DOMContentLoaded before flex layout flushes (#id_game_table.clientWidth/Height read 0 at that moment) — added `requestAnimationFrame → dispatchEvent('resize')` tick at the end of the inline IIFE so scaleTable re-fires once layout settles ; tests — 6 FTs in test_bill_my_sign.py rewritten for the new flow: test_landing_renders_dry_hex_with_scan_sign_button pins the 1-chair hex + central SCAN SIGN + hidden picker grid; test_scan_sign_click_transitions_to_picker_phase pins the phase swap (hex hides, grid shows); test_click_thumbnail_shows_OK_btn_without_locking pins step 1 (focus + OK appears, no lock yet); test_OK_click_locks_thumbnail_and_enables_save_sign pins step 2 (lock + NVM appears + SAVE SIGN enables + persists to /billboard/ applet); test_NVM_click_deselects_and_disables_save_sign pins NVM unlock cycle; test_landing_previews_saved_sig_on_stage pins the on-load saved-sig preview behavior — all green visually verified across portrait + landscape
Code architected by Disco DeDisco <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-19 01:11:41 -04:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// Hide SAVE SIGN on landing — the form only makes sense once the user
|
|
|
|
|
|
// has entered the picker. Saved-sig preview on landing is read-only.
|
|
|
|
|
|
.my-sign-page[data-phase="landing"] #id_save_sign_form {
|
|
|
|
|
|
display: none;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// Picker phase — bg matches the table hex's interior (--duoUser) so the
|
|
|
|
|
|
// transition from "hex face" → "card pile on felt" reads as a continuous
|
|
|
|
|
|
// surface rather than a context swap. Landing phase keeps the body bg.
|
|
|
|
|
|
.my-sign-page[data-phase="picker"] {
|
|
|
|
|
|
background: rgba(var(--duoUser), 1);
|
My Sign picker: hover-preview, click-lock, NVM-unlock + polarity SCSS port + bigger stage — Sprint 4a-cont iteration 2
User-driven polish on iteration 1: separate hover-preview from click-lock semantics (room sig-select pattern), add NVM to unlock, port the room's `.sig-overlay[data-polarity]` polarity-themed CSS to also target `.my-sign-page[data-polarity]`, bump the stage card width so it occupies a bigger slice of the viewport ; **state machine** (inline JS in my_sign.html): three discrete states — (a) idle: stage frame visible but empty (stage card hidden via display:none, stat block hidden via `.sig-stage--frozen` absence, FLIP btn hidden via CSS); (b) hover: hovered .sig-card populates the stage card (preview); mouseleave clears it; mouseover-mouseout sequence guards against transient gaps when moving between adjacent thumbnails (relatedTarget closest('.sig-card') check); (c) locked: click on any grid card freezes the stage — populates content, adds `.sig-stage--frozen` to .sig-stage (which surfaces .sig-stat-block + .my-sign-flip-btn via CSS), enables SAVE SIGN, reveals NVM. Subsequent hovers ignored while locked. NVM click reverts to idle (clears content, hides stat-block + FLIP, disables SAVE, hides NVM) ; **new template** elements: NVM `<button id="id_nvm_sign_btn" class="btn btn-cancel">` next to SAVE SIGN in the form, hidden by default (style="display:none") + revealed on lock. Stage card re-acquires `style="display:none"` (hidden on load, JS-shown on hover/lock). `sig-stage--frozen` class no longer initial — JS-added on click ; **polarity SCSS port** (_card-deck.scss L820-905): extended `.sig-overlay[data-polarity="levity"]` + `[data-polarity="gravity"]` selector lists to include `.my-sign-page[data-polarity="levity"]` + `[gravity"]`. Rules inside (e.g. `.sig-card { background: rgba(--secUser) }`, `.sig-stage-card .fan-card-name { color: --quiUser }`, stat-face-label colour flips, text-shadow polarity variants) automatically apply on the my-sign page since `data-polarity` lives on the page wrapper (descendants .sig-card + .sig-stage-card both inherit). Moved `data-polarity` from `.my-sign-stage` to `.my-sign-page` in the template + JS so descendant scoping works (was a stage-scoped attr in iteration 1, which couldn't reach the sibling .sig-deck-grid) ; **bigger stage** (_card-deck.scss): `.my-sign-page { --sig-card-w: clamp(140px, 36vw, 220px); }` — scales w. viewport, 140px floor for portrait, 220px ceiling for landscape, ~36vw in between. Stage card + stat block both width-driven by this var so they scale together. The clamp() ceiling matches the room sig-select's typical sized card on a mid-laptop ; **FLIP btn visibility** (_card-deck.scss): `.my-sign-flip-btn { display: none }` at rest; `.my-sign-stage.sig-stage--frozen .my-sign-flip-btn { display: inline-flex }` on lock. The btn's position (absolute, bottom-left of card) was already added in iteration 1 ; **on-load lock-restore**: if `User.significator` is set, the picker auto-locks that card via `_lock(savedCardEl)` so the user sees their persisted choice in the locked-state UI (stat block + FLIP visible) instead of an idle empty frame. Polarity initial value (data-polarity on .my-sign-page) reflects `current_significator_reversed` — False=gravity (default), True=levity ; **regression**: 7 FTs in test_bill_my_sign green in 57s. Visual verify deferred to user — picker should now show: idle empty stage + grid below; hover thumbnail → stage card preview; click → preview persists + stat block + FLIP appear; NVM → back to idle; FLIP click → horizontal-perspective Y-axis rotation w. polarity content swap mid-animation. Polarity-themed colour styles (levity inverted palette / gravity stark contrast / per-polarity text-shadows) now apply on my-sign matching the room sig-select look
Code architected by Disco DeDisco <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-19 00:15:13 -04:00
|
|
|
|
}
|
|
|
|
|
|
|
My Sign picker: stage visible on load, FYI panel, SPIN/FLIP split w. perspective-flip animation — Sprint 4a-cont
User-driven polish on the Sprint 4a picker so it's usable parity-w-room-sig-select (per the Schizo-screenshot reference). My initial pass collapsed SPIN + FLIP into one button — user clarified the correct architecture: **SPIN** stays in the `.sig-stat-block` (room pattern, btn-reverse, toggles orientation 180° + reveals reversal_qualifier), while **FLIP** lives at the bottom-left of the stage card as a `.btn-reveal` (game-kit fan carousel pattern, toggles polarity gravity↔levity w. a horizontal-perspective Y-axis rotation animation). Gravity is the default upright polarity per user — significator_reversed=False → gravity, True → levity ; **template changes** (my_sign.html): (a) `.sig-stage-card` no longer carries inline `display:none` — stage frame visible on page load, before any card click; (b) `.sig-stage` carries `.sig-stage--frozen` modifier from the start so the stat-block shows alongside the stage card (room CSS gates `.sig-stat-block { display: block }` behind this class); (c) stat-block btn relabeled "FLIP" → "SPIN" + restored to btn-reverse / orientation-toggle semantics; (d) new `<button class="btn btn-reveal my-sign-flip-btn">FLIP</button>` outside the stat-block at .sig-stage scope, positioned absolute via new SCSS (bottom-left of stage card, mirroring game_kit.html's #id_fan_flip placement); (e) FYI btn + `_sig_fyi_panel.html` partial included alongside SPIN in stat-block — pinned w. id_my_sign_fyi_panel; (f) all 18 card data-* attrs filled (data-levity-qualifier / data-gravity-qualifier / data-levity-emanation / data-gravity-emanation / data-levity-reversal / data-gravity-reversal / data-energies / data-operations / data-italic-word / data-correspondence) so StageCard.populateCard has everything it needs to render qualifiers + reversal-face text per polarity; (g) data-polarity on .my-sign-stage drives populator polarity arg + (future) polarity-themed styling, initialised from `current_significator_reversed` (False=gravity, True=levity) ; **JS changes** (inline script in my_sign.html, includes apps/epic/stage-card.js): (a) on card click → StageCard.fromDataset → populateCard(stageCard, card, _polarity()) + populateKeywords on stat-block + buildInfoData/renderFyi on FYI panel + sig-focused class on grid cell; (b) FYI btn click toggles `.fyi-open` on stat-block (room pattern — CSS reveals the .sig-info panel + PRV/NXT); (c) PRV/NXT cycle thru _fyiData; (d) SPIN click toggles `.stage-card--reversed` + `.is-reversed` on stat-block (orientation, preview-only — not persisted); (e) FLIP click runs `_flipPolarityAnimated()` — 500ms Y-axis rotateY(90deg) midpoint animation lifted from game-kit.js's `_flipActive`, swaps polarity at offset 0.5 so the new face shows through the 2nd half-rotation, preserves SPIN orientation by including ' rotate(180deg)' in both keyframes when stage-card--reversed is on, in-flight `dataset.flipping` flag prevents re-triggering mid-animation; (f) on-load: if user has a saved sig (`.my-sign-page[data-current-card-id]`), find that grid card + auto-select it so stage shows the persisted choice ; **SCSS** (_card-deck.scss): new `.my-sign-flip-btn` rule positioning the btn absolute z-index:25 bottom:0.4rem left:calc(1.5rem + 0.4rem) — accounts for .sig-stage's padding-left:1.5rem so the btn lands at the visual bottom-left of the stage card; .btn-reveal styling (magenta/cyan) inherited from existing _button-pad.scss; no animation SCSS (the 500ms rotateY is in JS via element.animate()) ; **deferred**: `.sig-overlay[data-polarity="levity"]` / `[data-polarity="gravity"]` themed color overrides at _card-deck.scss:805-885 are scoped to `.sig-overlay` and won't apply to `.my-sign-stage[data-polarity]` until those selectors are extended (or duplicated under a .my-sign-stage sibling). User flagged the visual delta but the picker is functionally complete w.o the polarity-themed colors — followup sub-sprint ; **regression**: 7 FTs in test_bill_my_sign green in 57s; no IT/UT changes needed (only template + SCSS). User-pre-staged rootvars.scss tweak picked up
Code architected by Disco DeDisco <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-18 23:58:39 -04:00
|
|
|
|
.my-sign-flip-btn {
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
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;
|
My Sign picker: hover-preview, click-lock, NVM-unlock + polarity SCSS port + bigger stage — Sprint 4a-cont iteration 2
User-driven polish on iteration 1: separate hover-preview from click-lock semantics (room sig-select pattern), add NVM to unlock, port the room's `.sig-overlay[data-polarity]` polarity-themed CSS to also target `.my-sign-page[data-polarity]`, bump the stage card width so it occupies a bigger slice of the viewport ; **state machine** (inline JS in my_sign.html): three discrete states — (a) idle: stage frame visible but empty (stage card hidden via display:none, stat block hidden via `.sig-stage--frozen` absence, FLIP btn hidden via CSS); (b) hover: hovered .sig-card populates the stage card (preview); mouseleave clears it; mouseover-mouseout sequence guards against transient gaps when moving between adjacent thumbnails (relatedTarget closest('.sig-card') check); (c) locked: click on any grid card freezes the stage — populates content, adds `.sig-stage--frozen` to .sig-stage (which surfaces .sig-stat-block + .my-sign-flip-btn via CSS), enables SAVE SIGN, reveals NVM. Subsequent hovers ignored while locked. NVM click reverts to idle (clears content, hides stat-block + FLIP, disables SAVE, hides NVM) ; **new template** elements: NVM `<button id="id_nvm_sign_btn" class="btn btn-cancel">` next to SAVE SIGN in the form, hidden by default (style="display:none") + revealed on lock. Stage card re-acquires `style="display:none"` (hidden on load, JS-shown on hover/lock). `sig-stage--frozen` class no longer initial — JS-added on click ; **polarity SCSS port** (_card-deck.scss L820-905): extended `.sig-overlay[data-polarity="levity"]` + `[data-polarity="gravity"]` selector lists to include `.my-sign-page[data-polarity="levity"]` + `[gravity"]`. Rules inside (e.g. `.sig-card { background: rgba(--secUser) }`, `.sig-stage-card .fan-card-name { color: --quiUser }`, stat-face-label colour flips, text-shadow polarity variants) automatically apply on the my-sign page since `data-polarity` lives on the page wrapper (descendants .sig-card + .sig-stage-card both inherit). Moved `data-polarity` from `.my-sign-stage` to `.my-sign-page` in the template + JS so descendant scoping works (was a stage-scoped attr in iteration 1, which couldn't reach the sibling .sig-deck-grid) ; **bigger stage** (_card-deck.scss): `.my-sign-page { --sig-card-w: clamp(140px, 36vw, 220px); }` — scales w. viewport, 140px floor for portrait, 220px ceiling for landscape, ~36vw in between. Stage card + stat block both width-driven by this var so they scale together. The clamp() ceiling matches the room sig-select's typical sized card on a mid-laptop ; **FLIP btn visibility** (_card-deck.scss): `.my-sign-flip-btn { display: none }` at rest; `.my-sign-stage.sig-stage--frozen .my-sign-flip-btn { display: inline-flex }` on lock. The btn's position (absolute, bottom-left of card) was already added in iteration 1 ; **on-load lock-restore**: if `User.significator` is set, the picker auto-locks that card via `_lock(savedCardEl)` so the user sees their persisted choice in the locked-state UI (stat block + FLIP visible) instead of an idle empty frame. Polarity initial value (data-polarity on .my-sign-page) reflects `current_significator_reversed` — False=gravity (default), True=levity ; **regression**: 7 FTs in test_bill_my_sign green in 57s. Visual verify deferred to user — picker should now show: idle empty stage + grid below; hover thumbnail → stage card preview; click → preview persists + stat block + FLIP appear; NVM → back to idle; FLIP click → horizontal-perspective Y-axis rotation w. polarity content swap mid-animation. Polarity-themed colour styles (levity inverted palette / gravity stark contrast / per-polarity text-shadows) now apply on my-sign matching the room sig-select look
Code architected by Disco DeDisco <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-19 00:15:13 -04:00
|
|
|
|
display: none;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
My Sign picker iteration 3 — SCAN SIGN landing hex + OK/NVM thumbnail two-step + duoUser picker bg — Sprint 4a-cont — TDD
Two-phase picker. Landing phase renders the DRY 1-chair table hex w. a central SCAN SIGN .btn-primary; clicking it swaps the page to picker phase (hex hides, sig-card grid + always-present stage frame + SAVE SIGN visible). Stage frame previews the saved sig on landing if User.significator is set ; sig-card selection lifts the room's two-step OK/NVM-on-thumbnail pattern via `.sig-card-actions` w. `.sig-ok-btn`/`.sig-nvm-btn`: click thumb → `.sig-focused` (CSS reveals OK badge, stage previews card, no lock); click OK → `.sig-reserved--own` (CSS swaps OK→NVM badge, `.sig-stage--frozen` reveals stat block + FLIP, SAVE SIGN enables); click NVM → unlock + clear focus + disable SAVE SIGN ; SAVE SIGN form pinned `position:absolute; bottom:0.75rem; right:1rem` to .my-sign-stage so it stops shifting across the stage row when the stat block reveals on lock (was getting shoved left as a flex item alongside the stat-block reveal) ; .my-sign-page mirrors .room-page's `flex:1; min-height:0; display:flex; flex-direction:column` so the DRY hex container chain propagates real height down into #id_game_table for room.js's scaleTable() to compute against (was reading 0 + leaving the hex unscaled at 200×231 in a 360×320 scene) ; stage min-height gated to picker phase (`.my-sign-page[data-phase="picker"] .my-sign-stage`) — landing-phase stage is natural-sized so the hex centers in the bigger available area instead of being bottom-anchored by a 376px stage reservation ; picker-phase bg uses `rgba(var(--duoUser), 1)` so the transition from "hex face" → "card pile on felt" reads as a continuous surface rather than a context swap ; room sig-select media queries re-scoped to `.sig-overlay .sig-deck-grid` so they don't bleed into my-sign — my-sign gets its own breakpoint cascade: 6×3rem (portrait) → 9×3rem (≥900px landscape) → 18×3rem (≥1600px) → 18×5rem (≥2200px); thresholds bumped from sig-select's 1400/1800px so 18×col + sidebar/footer margins clear the viewport at fluid-rem ceiling (rem=22 → 18×3rem=1188px + 220px margins=1408, safe with 1600px floor) ; default `repeat(6, 1fr)` collapsed to 0-width when paired w. `align-self:center` (no parent width for `fr` to resolve against, hence the dotted-line miniscule cards in portrait); fixed `repeat(6, 3rem)` at portrait default fixes it ; SCAN SIGN font-size 0.75rem (vs .btn-primary's default 0.875rem) so the 2-line "SCAN/SIGN" label fits inside the 4rem circle without crowding the border — treated as a smaller variant via `#id_scan_sign_btn` rule scoped under .my-sign-landing ; room.js's scaleTable() runs on DOMContentLoaded before flex layout flushes (#id_game_table.clientWidth/Height read 0 at that moment) — added `requestAnimationFrame → dispatchEvent('resize')` tick at the end of the inline IIFE so scaleTable re-fires once layout settles ; tests — 6 FTs in test_bill_my_sign.py rewritten for the new flow: test_landing_renders_dry_hex_with_scan_sign_button pins the 1-chair hex + central SCAN SIGN + hidden picker grid; test_scan_sign_click_transitions_to_picker_phase pins the phase swap (hex hides, grid shows); test_click_thumbnail_shows_OK_btn_without_locking pins step 1 (focus + OK appears, no lock yet); test_OK_click_locks_thumbnail_and_enables_save_sign pins step 2 (lock + NVM appears + SAVE SIGN enables + persists to /billboard/ applet); test_NVM_click_deselects_and_disables_save_sign pins NVM unlock cycle; test_landing_previews_saved_sig_on_stage pins the on-load saved-sig preview behavior — all green visually verified across portrait + landscape
Code architected by Disco DeDisco <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-19 01:11:41 -04:00
|
|
|
|
// FLIP btn appears only when the stage is frozen (post-OK confirm). Hover-only
|
My Sign picker: hover-preview, click-lock, NVM-unlock + polarity SCSS port + bigger stage — Sprint 4a-cont iteration 2
User-driven polish on iteration 1: separate hover-preview from click-lock semantics (room sig-select pattern), add NVM to unlock, port the room's `.sig-overlay[data-polarity]` polarity-themed CSS to also target `.my-sign-page[data-polarity]`, bump the stage card width so it occupies a bigger slice of the viewport ; **state machine** (inline JS in my_sign.html): three discrete states — (a) idle: stage frame visible but empty (stage card hidden via display:none, stat block hidden via `.sig-stage--frozen` absence, FLIP btn hidden via CSS); (b) hover: hovered .sig-card populates the stage card (preview); mouseleave clears it; mouseover-mouseout sequence guards against transient gaps when moving between adjacent thumbnails (relatedTarget closest('.sig-card') check); (c) locked: click on any grid card freezes the stage — populates content, adds `.sig-stage--frozen` to .sig-stage (which surfaces .sig-stat-block + .my-sign-flip-btn via CSS), enables SAVE SIGN, reveals NVM. Subsequent hovers ignored while locked. NVM click reverts to idle (clears content, hides stat-block + FLIP, disables SAVE, hides NVM) ; **new template** elements: NVM `<button id="id_nvm_sign_btn" class="btn btn-cancel">` next to SAVE SIGN in the form, hidden by default (style="display:none") + revealed on lock. Stage card re-acquires `style="display:none"` (hidden on load, JS-shown on hover/lock). `sig-stage--frozen` class no longer initial — JS-added on click ; **polarity SCSS port** (_card-deck.scss L820-905): extended `.sig-overlay[data-polarity="levity"]` + `[data-polarity="gravity"]` selector lists to include `.my-sign-page[data-polarity="levity"]` + `[gravity"]`. Rules inside (e.g. `.sig-card { background: rgba(--secUser) }`, `.sig-stage-card .fan-card-name { color: --quiUser }`, stat-face-label colour flips, text-shadow polarity variants) automatically apply on the my-sign page since `data-polarity` lives on the page wrapper (descendants .sig-card + .sig-stage-card both inherit). Moved `data-polarity` from `.my-sign-stage` to `.my-sign-page` in the template + JS so descendant scoping works (was a stage-scoped attr in iteration 1, which couldn't reach the sibling .sig-deck-grid) ; **bigger stage** (_card-deck.scss): `.my-sign-page { --sig-card-w: clamp(140px, 36vw, 220px); }` — scales w. viewport, 140px floor for portrait, 220px ceiling for landscape, ~36vw in between. Stage card + stat block both width-driven by this var so they scale together. The clamp() ceiling matches the room sig-select's typical sized card on a mid-laptop ; **FLIP btn visibility** (_card-deck.scss): `.my-sign-flip-btn { display: none }` at rest; `.my-sign-stage.sig-stage--frozen .my-sign-flip-btn { display: inline-flex }` on lock. The btn's position (absolute, bottom-left of card) was already added in iteration 1 ; **on-load lock-restore**: if `User.significator` is set, the picker auto-locks that card via `_lock(savedCardEl)` so the user sees their persisted choice in the locked-state UI (stat block + FLIP visible) instead of an idle empty frame. Polarity initial value (data-polarity on .my-sign-page) reflects `current_significator_reversed` — False=gravity (default), True=levity ; **regression**: 7 FTs in test_bill_my_sign green in 57s. Visual verify deferred to user — picker should now show: idle empty stage + grid below; hover thumbnail → stage card preview; click → preview persists + stat block + FLIP appear; NVM → back to idle; FLIP click → horizontal-perspective Y-axis rotation w. polarity content swap mid-animation. Polarity-themed colour styles (levity inverted palette / gravity stark contrast / per-polarity text-shadows) now apply on my-sign matching the room sig-select look
Code architected by Disco DeDisco <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-19 00:15:13 -04:00
|
|
|
|
// 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;
|
My Sign picker: stage visible on load, FYI panel, SPIN/FLIP split w. perspective-flip animation — Sprint 4a-cont
User-driven polish on the Sprint 4a picker so it's usable parity-w-room-sig-select (per the Schizo-screenshot reference). My initial pass collapsed SPIN + FLIP into one button — user clarified the correct architecture: **SPIN** stays in the `.sig-stat-block` (room pattern, btn-reverse, toggles orientation 180° + reveals reversal_qualifier), while **FLIP** lives at the bottom-left of the stage card as a `.btn-reveal` (game-kit fan carousel pattern, toggles polarity gravity↔levity w. a horizontal-perspective Y-axis rotation animation). Gravity is the default upright polarity per user — significator_reversed=False → gravity, True → levity ; **template changes** (my_sign.html): (a) `.sig-stage-card` no longer carries inline `display:none` — stage frame visible on page load, before any card click; (b) `.sig-stage` carries `.sig-stage--frozen` modifier from the start so the stat-block shows alongside the stage card (room CSS gates `.sig-stat-block { display: block }` behind this class); (c) stat-block btn relabeled "FLIP" → "SPIN" + restored to btn-reverse / orientation-toggle semantics; (d) new `<button class="btn btn-reveal my-sign-flip-btn">FLIP</button>` outside the stat-block at .sig-stage scope, positioned absolute via new SCSS (bottom-left of stage card, mirroring game_kit.html's #id_fan_flip placement); (e) FYI btn + `_sig_fyi_panel.html` partial included alongside SPIN in stat-block — pinned w. id_my_sign_fyi_panel; (f) all 18 card data-* attrs filled (data-levity-qualifier / data-gravity-qualifier / data-levity-emanation / data-gravity-emanation / data-levity-reversal / data-gravity-reversal / data-energies / data-operations / data-italic-word / data-correspondence) so StageCard.populateCard has everything it needs to render qualifiers + reversal-face text per polarity; (g) data-polarity on .my-sign-stage drives populator polarity arg + (future) polarity-themed styling, initialised from `current_significator_reversed` (False=gravity, True=levity) ; **JS changes** (inline script in my_sign.html, includes apps/epic/stage-card.js): (a) on card click → StageCard.fromDataset → populateCard(stageCard, card, _polarity()) + populateKeywords on stat-block + buildInfoData/renderFyi on FYI panel + sig-focused class on grid cell; (b) FYI btn click toggles `.fyi-open` on stat-block (room pattern — CSS reveals the .sig-info panel + PRV/NXT); (c) PRV/NXT cycle thru _fyiData; (d) SPIN click toggles `.stage-card--reversed` + `.is-reversed` on stat-block (orientation, preview-only — not persisted); (e) FLIP click runs `_flipPolarityAnimated()` — 500ms Y-axis rotateY(90deg) midpoint animation lifted from game-kit.js's `_flipActive`, swaps polarity at offset 0.5 so the new face shows through the 2nd half-rotation, preserves SPIN orientation by including ' rotate(180deg)' in both keyframes when stage-card--reversed is on, in-flight `dataset.flipping` flag prevents re-triggering mid-animation; (f) on-load: if user has a saved sig (`.my-sign-page[data-current-card-id]`), find that grid card + auto-select it so stage shows the persisted choice ; **SCSS** (_card-deck.scss): new `.my-sign-flip-btn` rule positioning the btn absolute z-index:25 bottom:0.4rem left:calc(1.5rem + 0.4rem) — accounts for .sig-stage's padding-left:1.5rem so the btn lands at the visual bottom-left of the stage card; .btn-reveal styling (magenta/cyan) inherited from existing _button-pad.scss; no animation SCSS (the 500ms rotateY is in JS via element.animate()) ; **deferred**: `.sig-overlay[data-polarity="levity"]` / `[data-polarity="gravity"]` themed color overrides at _card-deck.scss:805-885 are scoped to `.sig-overlay` and won't apply to `.my-sign-stage[data-polarity]` until those selectors are extended (or duplicated under a .my-sign-stage sibling). User flagged the visual delta but the picker is functionally complete w.o the polarity-themed colors — followup sub-sprint ; **regression**: 7 FTs in test_bill_my_sign green in 57s; no IT/UT changes needed (only template + SCSS). User-pre-staged rootvars.scss tweak picked up
Code architected by Disco DeDisco <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-18 23:58:39 -04:00
|
|
|
|
}
|
|
|
|
|
|
|
2026-05-25 01:35:47 -04:00
|
|
|
|
// 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;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2026-04-08 11:52:49 -04:00
|
|
|
|
// ─── Mini card grid ───────────────────────────────────────────────────────────
|
|
|
|
|
|
// flex: 0 0 auto — shrinks to card content; no background (backdrop blur).
|
|
|
|
|
|
// align-content: start prevents CSS grid from distributing extra height between rows.
|
|
|
|
|
|
|
|
|
|
|
|
.sig-deck-grid {
|
|
|
|
|
|
flex: 0 0 auto;
|
|
|
|
|
|
display: grid;
|
|
|
|
|
|
grid-template-columns: repeat(6, 1fr);
|
|
|
|
|
|
align-content: start;
|
|
|
|
|
|
gap: 2px;
|
|
|
|
|
|
padding: 4px;
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
margin: 0 1rem 5rem 4rem;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.sig-card {
|
|
|
|
|
|
aspect-ratio: 5 / 8;
|
|
|
|
|
|
border-radius: 0.4rem;
|
|
|
|
|
|
background: rgba(var(--priUser), 0.97);
|
|
|
|
|
|
border: 1px solid rgba(var(--secUser), 0.3);
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
cursor: grab;
|
|
|
|
|
|
transition: border-color 0.15s, box-shadow 0.15s;
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
|
2026-04-30 21:01:52 -04:00
|
|
|
|
// game-kit sets .fan-card-corner { position:absolute; top:0.4rem; left:0.4rem;
|
|
|
|
|
|
// padding-left:0.5rem }. Sig thumbnails reset position to dead-center; we
|
|
|
|
|
|
// also zero the inherited padding-left (it's there for game-kit fan corners
|
|
|
|
|
|
// that need outer-edge breathing room — at thumb size it nudges the rank +
|
|
|
|
|
|
// icon visibly off-center after the translate).
|
2026-04-08 11:52:49 -04:00
|
|
|
|
.fan-card-corner--tl {
|
|
|
|
|
|
top: 50%;
|
|
|
|
|
|
left: 50%;
|
|
|
|
|
|
transform: translate(-50%, -50%);
|
2026-04-30 21:01:52 -04:00
|
|
|
|
padding-left: 0;
|
2026-04-08 11:52:49 -04:00
|
|
|
|
gap: 0; // game-kit has gap:0.15rem — too large at 0.5rem font-size
|
|
|
|
|
|
|
|
|
|
|
|
.fan-corner-rank { font-size: 1rem; font-weight: 700; }
|
|
|
|
|
|
i { font-size: 0.75rem; }
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// OK / NVM overlay — appears on click (focused) or own reservation
|
|
|
|
|
|
.sig-card-actions {
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
inset: 0;
|
|
|
|
|
|
display: none;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
gap: 3px;
|
|
|
|
|
|
background: rgba(var(--priUser), 0.92);
|
|
|
|
|
|
border-radius: inherit;
|
|
|
|
|
|
|
|
|
|
|
|
.sig-nvm-btn { display: none; }
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
&.sig-focused .sig-card-actions { display: flex; }
|
|
|
|
|
|
&.sig-reserved--own .sig-card-actions {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
.sig-ok-btn { display: none; }
|
|
|
|
|
|
.sig-nvm-btn { display: flex; }
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// Cursor strip — hangs below the card bottom edge; overflow: visible allows this.
|
|
|
|
|
|
.sig-card-cursors {
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
bottom: -0.6rem;
|
|
|
|
|
|
left: 0;
|
|
|
|
|
|
right: 0;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
padding: 0 2px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// Rise above DOM-order siblings when a peer's cursor is active on this card.
|
|
|
|
|
|
// Without this, later cards in the grid paint over the overflowing cursor icons.
|
|
|
|
|
|
&:has(.sig-cursor.active) { z-index: 5; }
|
|
|
|
|
|
|
|
|
|
|
|
&:hover:not([data-reserved-by]) {
|
|
|
|
|
|
border-color: rgba(var(--secUser), 0.8);
|
|
|
|
|
|
box-shadow: 0 0 4px rgba(var(--secUser), 0.25);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
&.sig-reserved {
|
|
|
|
|
|
cursor: not-allowed;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// Role-coloured reservation glow — border/shadow matches the reserving gamer's role.
|
|
|
|
|
|
// data-reserved-by is set by applyReservation() in sig-select.js.
|
|
|
|
|
|
// Own reservation also shows role colour (same as peers see), not a separate style.
|
|
|
|
|
|
&.sig-reserved {
|
|
|
|
|
|
&[data-reserved-by="PC"] { border-color: rgba(var(--priRd), 1); box-shadow: 0 0 0 2px rgba(var(--priRd), 1); }
|
|
|
|
|
|
&[data-reserved-by="NC"] { border-color: rgba(var(--priYl), 1); box-shadow: 0 0 0 2px rgba(var(--priYl), 1); }
|
|
|
|
|
|
&[data-reserved-by="EC"] { border-color: rgba(var(--priGn), 1); box-shadow: 0 0 0 2px rgba(var(--priGn), 1); }
|
|
|
|
|
|
&[data-reserved-by="SC"] { border-color: rgba(var(--priCy), 1); box-shadow: 0 0 0 2px rgba(var(--priCy), 1); }
|
|
|
|
|
|
&[data-reserved-by="AC"] { border-color: rgba(var(--priId), 1); box-shadow: 0 0 0 2px rgba(var(--priId), 1); }
|
|
|
|
|
|
&[data-reserved-by="BC"] { border-color: rgba(var(--priFs), 1); box-shadow: 0 0 0 2px rgba(var(--priFs), 1); }
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
&.sig-reserved--own {
|
|
|
|
|
|
cursor: grabbing;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// ─── Cursor anchors ───────────────────────────────────────────────────────────
|
|
|
|
|
|
//
|
|
|
|
|
|
// Three tiny dots along the bottom of each mini card, one per role in the group.
|
|
|
|
|
|
// Inactive: invisible. Active (another gamer is hovering): role-coloured dot.
|
|
|
|
|
|
// Position order is fixed per polarity (POLARITY_ROLES in sig-select.js):
|
|
|
|
|
|
// levity (PC / NC / SC) → left / mid / right
|
|
|
|
|
|
// gravity (BC / EC / AC) → left / mid / right
|
|
|
|
|
|
|
|
|
|
|
|
// In-card cursor elements — invisible anchors only.
|
|
|
|
|
|
// Visible icons are portaled to document root by applyHover() in sig-select.js.
|
|
|
|
|
|
.sig-cursor {
|
|
|
|
|
|
display: block;
|
|
|
|
|
|
font-size: 0; // zero-size: no layout impact, just carries .active class
|
|
|
|
|
|
color: transparent;
|
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// ─── Floating cursor portal ───────────────────────────────────────────────────
|
|
|
|
|
|
//
|
|
|
|
|
|
// sig-select.js creates these <i> elements inside #id_sig_cursor_portal, a
|
|
|
|
|
|
// position:fixed root-level container, so they escape all overflow/clip contexts.
|
|
|
|
|
|
// Positioned via getBoundingClientRect() on the card element.
|
|
|
|
|
|
|
|
|
|
|
|
#id_sig_cursor_portal {
|
|
|
|
|
|
position: fixed;
|
|
|
|
|
|
inset: 0;
|
|
|
|
|
|
pointer-events: none;
|
2026-04-08 22:53:44 -04:00
|
|
|
|
z-index: 200; // above sig-overlay (120), below tray (310)
|
2026-04-08 11:52:49 -04:00
|
|
|
|
overflow: visible;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.sig-cursor-float {
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
font-size: 1.5rem;
|
|
|
|
|
|
line-height: 1;
|
|
|
|
|
|
transform: translateX(-50%); // centre on the x coordinate from JS
|
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// Role-specific colour + outline shadow + ninUser glow
|
|
|
|
|
|
.sig-cursor-float[data-role="PC"] {
|
|
|
|
|
|
color: rgba(var(--priRd), 1);
|
|
|
|
|
|
text-shadow: 2px 0 0 rgba(var(--priOr),1), -2px 0 0 rgba(var(--priOr),1),
|
|
|
|
|
|
0 2px 0 rgba(var(--priOr),1), 0 -2px 0 rgba(var(--priOr),1),
|
|
|
|
|
|
0 0 6px rgba(0, 0, 0, 0.5);
|
|
|
|
|
|
}
|
|
|
|
|
|
.sig-cursor-float[data-role="NC"] {
|
|
|
|
|
|
color: rgba(var(--priYl), 1);
|
|
|
|
|
|
text-shadow: 2px 0 0 rgba(var(--priLm),1), -2px 0 0 rgba(var(--priLm),1),
|
|
|
|
|
|
0 2px 0 rgba(var(--priLm),1), 0 -2px 0 rgba(var(--priLm),1),
|
|
|
|
|
|
0 0 6px rgba(0, 0, 0, 0.5);
|
|
|
|
|
|
}
|
|
|
|
|
|
.sig-cursor-float[data-role="EC"] {
|
|
|
|
|
|
color: rgba(var(--priGn), 1);
|
|
|
|
|
|
text-shadow: 2px 0 0 rgba(var(--priTk),1), -2px 0 0 rgba(var(--priTk),1),
|
|
|
|
|
|
0 2px 0 rgba(var(--priTk),1), 0 -2px 0 rgba(var(--priTk),1),
|
|
|
|
|
|
0 0 6px rgba(0, 0, 0, 0.5);
|
|
|
|
|
|
}
|
|
|
|
|
|
.sig-cursor-float[data-role="SC"] {
|
|
|
|
|
|
color: rgba(var(--priCy), 1);
|
|
|
|
|
|
text-shadow: 2px 0 0 rgba(var(--priBl),1), -2px 0 0 rgba(var(--priBl),1),
|
|
|
|
|
|
0 2px 0 rgba(var(--priBl),1), 0 -2px 0 rgba(var(--priBl),1),
|
|
|
|
|
|
0 0 6px rgba(0, 0, 0, 0.5);
|
|
|
|
|
|
}
|
|
|
|
|
|
.sig-cursor-float[data-role="AC"] {
|
|
|
|
|
|
color: rgba(var(--priId), 1);
|
|
|
|
|
|
text-shadow: 2px 0 0 rgba(var(--priVt),1), -2px 0 0 rgba(var(--priVt),1),
|
|
|
|
|
|
0 2px 0 rgba(var(--priVt),1), 0 -2px 0 rgba(var(--priVt),1),
|
|
|
|
|
|
0 0 6px rgba(0, 0, 0, 0.5);
|
|
|
|
|
|
}
|
|
|
|
|
|
.sig-cursor-float[data-role="BC"] {
|
|
|
|
|
|
color: rgba(var(--priFs), 1);
|
|
|
|
|
|
text-shadow: 2px 0 0 rgba(var(--priMe),1), -2px 0 0 rgba(var(--priMe),1),
|
|
|
|
|
|
0 2px 0 rgba(var(--priMe),1), 0 -2px 0 rgba(var(--priMe),1),
|
|
|
|
|
|
0 0 6px rgba(0, 0, 0, 0.5);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// ─── Polarity theming — card colour inversion ────────────────────────────────
|
|
|
|
|
|
//
|
|
|
|
|
|
// Gravity (Graven): --priUser bg / --secUser text — standard dark palette.
|
|
|
|
|
|
// Levity (Leavened): --secUser bg / --priUser text — inverted, lighter feel.
|
|
|
|
|
|
// Both mini-cards and the stage preview card follow the same rule.
|
|
|
|
|
|
|
My Sign picker: hover-preview, click-lock, NVM-unlock + polarity SCSS port + bigger stage — Sprint 4a-cont iteration 2
User-driven polish on iteration 1: separate hover-preview from click-lock semantics (room sig-select pattern), add NVM to unlock, port the room's `.sig-overlay[data-polarity]` polarity-themed CSS to also target `.my-sign-page[data-polarity]`, bump the stage card width so it occupies a bigger slice of the viewport ; **state machine** (inline JS in my_sign.html): three discrete states — (a) idle: stage frame visible but empty (stage card hidden via display:none, stat block hidden via `.sig-stage--frozen` absence, FLIP btn hidden via CSS); (b) hover: hovered .sig-card populates the stage card (preview); mouseleave clears it; mouseover-mouseout sequence guards against transient gaps when moving between adjacent thumbnails (relatedTarget closest('.sig-card') check); (c) locked: click on any grid card freezes the stage — populates content, adds `.sig-stage--frozen` to .sig-stage (which surfaces .sig-stat-block + .my-sign-flip-btn via CSS), enables SAVE SIGN, reveals NVM. Subsequent hovers ignored while locked. NVM click reverts to idle (clears content, hides stat-block + FLIP, disables SAVE, hides NVM) ; **new template** elements: NVM `<button id="id_nvm_sign_btn" class="btn btn-cancel">` next to SAVE SIGN in the form, hidden by default (style="display:none") + revealed on lock. Stage card re-acquires `style="display:none"` (hidden on load, JS-shown on hover/lock). `sig-stage--frozen` class no longer initial — JS-added on click ; **polarity SCSS port** (_card-deck.scss L820-905): extended `.sig-overlay[data-polarity="levity"]` + `[data-polarity="gravity"]` selector lists to include `.my-sign-page[data-polarity="levity"]` + `[gravity"]`. Rules inside (e.g. `.sig-card { background: rgba(--secUser) }`, `.sig-stage-card .fan-card-name { color: --quiUser }`, stat-face-label colour flips, text-shadow polarity variants) automatically apply on the my-sign page since `data-polarity` lives on the page wrapper (descendants .sig-card + .sig-stage-card both inherit). Moved `data-polarity` from `.my-sign-stage` to `.my-sign-page` in the template + JS so descendant scoping works (was a stage-scoped attr in iteration 1, which couldn't reach the sibling .sig-deck-grid) ; **bigger stage** (_card-deck.scss): `.my-sign-page { --sig-card-w: clamp(140px, 36vw, 220px); }` — scales w. viewport, 140px floor for portrait, 220px ceiling for landscape, ~36vw in between. Stage card + stat block both width-driven by this var so they scale together. The clamp() ceiling matches the room sig-select's typical sized card on a mid-laptop ; **FLIP btn visibility** (_card-deck.scss): `.my-sign-flip-btn { display: none }` at rest; `.my-sign-stage.sig-stage--frozen .my-sign-flip-btn { display: inline-flex }` on lock. The btn's position (absolute, bottom-left of card) was already added in iteration 1 ; **on-load lock-restore**: if `User.significator` is set, the picker auto-locks that card via `_lock(savedCardEl)` so the user sees their persisted choice in the locked-state UI (stat block + FLIP visible) instead of an idle empty frame. Polarity initial value (data-polarity on .my-sign-page) reflects `current_significator_reversed` — False=gravity (default), True=levity ; **regression**: 7 FTs in test_bill_my_sign green in 57s. Visual verify deferred to user — picker should now show: idle empty stage + grid below; hover thumbnail → stage card preview; click → preview persists + stat block + FLIP appear; NVM → back to idle; FLIP click → horizontal-perspective Y-axis rotation w. polarity content swap mid-animation. Polarity-themed colour styles (levity inverted palette / gravity stark contrast / per-polarity text-shadows) now apply on my-sign matching the room sig-select look
Code architected by Disco DeDisco <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-19 00:15:13 -04:00
|
|
|
|
// `.my-sign-page[data-polarity]` parallels `.sig-overlay[data-polarity]` —
|
|
|
|
|
|
// same polarity-themed colour rules apply to the standalone Game Sign picker.
|
|
|
|
|
|
// data-polarity lives on the page wrapper (not on .my-sign-stage) so descendant
|
|
|
|
|
|
// `.sig-card` (in the grid, sibling to the stage) inherits the rules.
|
fix: my-sea drawn cards no longer always render levity-coded — yesterday's `feedback_polarity_must_agree_across_surfaces` fix (f59c1af) added `.my-sea-page[data-polarity="..."]` to the shared `.sig-overlay, .my-sign-page` polarity block at `_card-deck.scss:919`. Worked for the spread-center sig (`.sea-sig-card`) but silently bled into the drawn-card stage modal: the stage's element carries BOTH classes `.sig-stage-card sea-stage-card` (per `_sea_stage.html:12`), so the shared rule's `.sig-stage-card` descendant selector matched. Specificity `.my-sea-page[data-polarity="levity"] .sig-stage-card` = 0,3,0 silently beat the card-specific `.sea-stage--gravity .sea-stage-card` = 0,2,0 (set by sea.js's `_showStage(isLevity)` at line 104-108) → every drawn card on my-sea rendered the user's-sig polarity instead of the deck-stack it was actually drawn from. Room.html Sea Select unaffected (no `.my-sea-page` ancestor on the stage there). User-reported 2026-05-21 — symptom: a gravity card opened in my-sea stage shows the light/cream levity styling even though the card came from the gravity deck. Fix: drop `.my-sea-page[data-polarity]` from the shared selector list at `_card-deck.scss:917-919` + `:972-974`; add a NEW dedicated rule at the end of the shared block scoped tightly to `.sig-stage-card.sea-sig-card` (0,4,0 specificity) — the central sig stays page-polarity-driven (yesterday's `MySeaPolarityMatchesMySignTest` still pins this) but every other `.sig-stage-card` descendant (drawn-card stages, future spread elements) is free to follow its own polarity. Gravity is the default rendering for `.sea-sig-card` per the base rule at `:1379` so only the levity override needs an explicit block. 6/6 existing polarity + picker ITs green; visual verify deferred to user. Trap captured: [[feedback-page-polarity-scope-trap]] — multi-class elements (`.A.B`) match both shared (`.A`) AND scoped (`.B`) selectors, so any new page wrapper added to a shared block needs an audit of every descendant selector in the block for nested polarity overlap
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-21 15:04:53 -04:00
|
|
|
|
// NOTE: `.my-sea-page[data-polarity="..."]` deliberately NOT in this shared
|
|
|
|
|
|
// selector list (was bitten 2026-05-21 by drawn-card stage bleed). My-sea's
|
|
|
|
|
|
// drawn cards open into the `.sea-stage` modal whose `.sig-stage-card.sea-
|
|
|
|
|
|
// stage-card` element has BOTH classes — so a `.my-sea-page[data-polarity]
|
|
|
|
|
|
// .sig-stage-card` rule (0,3,0) silently overrides the proper card-specific
|
|
|
|
|
|
// `.sea-stage--levity/--gravity .sea-stage-card` polarity (0,2,0), forcing
|
|
|
|
|
|
// every drawn card's stage to inherit the user's sig polarity. My-sea's own
|
|
|
|
|
|
// page polarity rules live below + target ONLY `.sea-sig-card` (the spread-
|
|
|
|
|
|
// center sig). See [[feedback-page-polarity-scope-trap]].
|
My Sign picker: hover-preview, click-lock, NVM-unlock + polarity SCSS port + bigger stage — Sprint 4a-cont iteration 2
User-driven polish on iteration 1: separate hover-preview from click-lock semantics (room sig-select pattern), add NVM to unlock, port the room's `.sig-overlay[data-polarity]` polarity-themed CSS to also target `.my-sign-page[data-polarity]`, bump the stage card width so it occupies a bigger slice of the viewport ; **state machine** (inline JS in my_sign.html): three discrete states — (a) idle: stage frame visible but empty (stage card hidden via display:none, stat block hidden via `.sig-stage--frozen` absence, FLIP btn hidden via CSS); (b) hover: hovered .sig-card populates the stage card (preview); mouseleave clears it; mouseover-mouseout sequence guards against transient gaps when moving between adjacent thumbnails (relatedTarget closest('.sig-card') check); (c) locked: click on any grid card freezes the stage — populates content, adds `.sig-stage--frozen` to .sig-stage (which surfaces .sig-stat-block + .my-sign-flip-btn via CSS), enables SAVE SIGN, reveals NVM. Subsequent hovers ignored while locked. NVM click reverts to idle (clears content, hides stat-block + FLIP, disables SAVE, hides NVM) ; **new template** elements: NVM `<button id="id_nvm_sign_btn" class="btn btn-cancel">` next to SAVE SIGN in the form, hidden by default (style="display:none") + revealed on lock. Stage card re-acquires `style="display:none"` (hidden on load, JS-shown on hover/lock). `sig-stage--frozen` class no longer initial — JS-added on click ; **polarity SCSS port** (_card-deck.scss L820-905): extended `.sig-overlay[data-polarity="levity"]` + `[data-polarity="gravity"]` selector lists to include `.my-sign-page[data-polarity="levity"]` + `[gravity"]`. Rules inside (e.g. `.sig-card { background: rgba(--secUser) }`, `.sig-stage-card .fan-card-name { color: --quiUser }`, stat-face-label colour flips, text-shadow polarity variants) automatically apply on the my-sign page since `data-polarity` lives on the page wrapper (descendants .sig-card + .sig-stage-card both inherit). Moved `data-polarity` from `.my-sign-stage` to `.my-sign-page` in the template + JS so descendant scoping works (was a stage-scoped attr in iteration 1, which couldn't reach the sibling .sig-deck-grid) ; **bigger stage** (_card-deck.scss): `.my-sign-page { --sig-card-w: clamp(140px, 36vw, 220px); }` — scales w. viewport, 140px floor for portrait, 220px ceiling for landscape, ~36vw in between. Stage card + stat block both width-driven by this var so they scale together. The clamp() ceiling matches the room sig-select's typical sized card on a mid-laptop ; **FLIP btn visibility** (_card-deck.scss): `.my-sign-flip-btn { display: none }` at rest; `.my-sign-stage.sig-stage--frozen .my-sign-flip-btn { display: inline-flex }` on lock. The btn's position (absolute, bottom-left of card) was already added in iteration 1 ; **on-load lock-restore**: if `User.significator` is set, the picker auto-locks that card via `_lock(savedCardEl)` so the user sees their persisted choice in the locked-state UI (stat block + FLIP visible) instead of an idle empty frame. Polarity initial value (data-polarity on .my-sign-page) reflects `current_significator_reversed` — False=gravity (default), True=levity ; **regression**: 7 FTs in test_bill_my_sign green in 57s. Visual verify deferred to user — picker should now show: idle empty stage + grid below; hover thumbnail → stage card preview; click → preview persists + stat block + FLIP appear; NVM → back to idle; FLIP click → horizontal-perspective Y-axis rotation w. polarity content swap mid-animation. Polarity-themed colour styles (levity inverted palette / gravity stark contrast / per-polarity text-shadows) now apply on my-sign matching the room sig-select look
Code architected by Disco DeDisco <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-19 00:15:13 -04:00
|
|
|
|
.sig-overlay[data-polarity="levity"],
|
fix: my-sea drawn cards no longer always render levity-coded — yesterday's `feedback_polarity_must_agree_across_surfaces` fix (f59c1af) added `.my-sea-page[data-polarity="..."]` to the shared `.sig-overlay, .my-sign-page` polarity block at `_card-deck.scss:919`. Worked for the spread-center sig (`.sea-sig-card`) but silently bled into the drawn-card stage modal: the stage's element carries BOTH classes `.sig-stage-card sea-stage-card` (per `_sea_stage.html:12`), so the shared rule's `.sig-stage-card` descendant selector matched. Specificity `.my-sea-page[data-polarity="levity"] .sig-stage-card` = 0,3,0 silently beat the card-specific `.sea-stage--gravity .sea-stage-card` = 0,2,0 (set by sea.js's `_showStage(isLevity)` at line 104-108) → every drawn card on my-sea rendered the user's-sig polarity instead of the deck-stack it was actually drawn from. Room.html Sea Select unaffected (no `.my-sea-page` ancestor on the stage there). User-reported 2026-05-21 — symptom: a gravity card opened in my-sea stage shows the light/cream levity styling even though the card came from the gravity deck. Fix: drop `.my-sea-page[data-polarity]` from the shared selector list at `_card-deck.scss:917-919` + `:972-974`; add a NEW dedicated rule at the end of the shared block scoped tightly to `.sig-stage-card.sea-sig-card` (0,4,0 specificity) — the central sig stays page-polarity-driven (yesterday's `MySeaPolarityMatchesMySignTest` still pins this) but every other `.sig-stage-card` descendant (drawn-card stages, future spread elements) is free to follow its own polarity. Gravity is the default rendering for `.sea-sig-card` per the base rule at `:1379` so only the levity override needs an explicit block. 6/6 existing polarity + picker ITs green; visual verify deferred to user. Trap captured: [[feedback-page-polarity-scope-trap]] — multi-class elements (`.A.B`) match both shared (`.A`) AND scoped (`.B`) selectors, so any new page wrapper added to a shared block needs an audit of every descendant selector in the block for nested polarity overlap
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-21 15:04:53 -04:00
|
|
|
|
.my-sign-page[data-polarity="levity"] {
|
2026-04-08 11:52:49 -04:00
|
|
|
|
// Mini card: inverted palette. game-kit sets explicit colours on .fan-card-name
|
|
|
|
|
|
// and .fan-card-corner that out-specifc the parent color, so re-target them here.
|
|
|
|
|
|
.sig-card {
|
|
|
|
|
|
background: rgba(var(--secUser), 0.97);
|
|
|
|
|
|
border-color: rgba(var(--priUser), 0.3);
|
|
|
|
|
|
color: rgba(var(--priUser), 1);
|
|
|
|
|
|
.fan-card-corner { color: rgba(var(--priUser), 0.75); }
|
|
|
|
|
|
.fan-card-name { color: rgba(var(--quiUser), 1); }
|
|
|
|
|
|
// OK / NVM overlay — must match the inverted card background
|
|
|
|
|
|
.sig-card-actions { background: rgba(var(--secUser), 0.92); }
|
|
|
|
|
|
}
|
|
|
|
|
|
// Stage preview card: same inversion + title colour.
|
|
|
|
|
|
// .fan-card-name-group and .fan-card-arcana have explicit color in the base
|
|
|
|
|
|
// .fan-card-face rule (specificity 0,2,0) — must re-target them here (0,3,0).
|
|
|
|
|
|
// Opacity dim is still applied by the nested sig-stage-card rule.
|
|
|
|
|
|
.sig-stage-card {
|
|
|
|
|
|
background: rgba(var(--secUser), 1);
|
|
|
|
|
|
border-color: rgba(var(--priUser), 0.6);
|
|
|
|
|
|
color: rgba(var(--priUser), 1);
|
|
|
|
|
|
.fan-card-corner { color: rgba(var(--priUser), 0.75); }
|
|
|
|
|
|
.fan-card-name-group{ color: rgba(var(--priUser), 1); }
|
|
|
|
|
|
.fan-card-name { color: rgba(var(--quiUser), 1); }
|
|
|
|
|
|
.fan-card-arcana { color: rgba(var(--priUser), 1); }
|
|
|
|
|
|
}
|
btn-primary label renames + stage-card polarity color refinements — two interleaved threads from one session, committing together since both touch sig + sea stage cards ; LABEL RENAMES: PICK SIGS → SCAN SIGS (room.html #id_pick_sigs_btn), PICK SKY → CAST SKY (room.html #id_pick_sky_btn × 2), PICK SEA → DRAW SEA (room.html #id_pick_sea_btn), TAKE SIG → SAVE SIG (sig-select.js _takeSigBtn.textContent × 2 callsites + section comment) — Element IDs (id_pick_sky_btn etc.), URL names (epic:pick_sigs, epic:pick_sky), and Python state enums (TableStatus.PICK_SKY, PICK_SEA, SIG_SELECT) intentionally retained as stable identifiers; the renamed text is purely the .btn-primary user-facing label ; FT + IT mentions of the old labels swept in test_game_room_select_{sig,sky,sea,role}.py, test_billboard.py, setup_sea_session.py mgmt cmd, apps/epic/{views,utils,models,tasks,tests/integrated/test_views}.py, SigSelectSpec.js, sky_overlay/sea_overlay/dashboard/sky.html, _card-deck.scss, _sky.scss — all docstring/comment references updated for cascade-grep cleanliness ; STAGE-CARD COLOR + CLASS REFINEMENTS (earlier in session): sig-stage card text colour split per polarity — gravity gets --terUser on .fan-card-name + .fan-card-reversal-{name,qualifier} + .sig-qualifier-{above,below}, levity gets --quiUser on the same five slots; all selectors prefixed w. .sig-stage-card to match the 0,4,0 specificity of the default `.sig-stage .sig-stage-card .fan-card-face .sig-qualifier-*` rule (without the prefix the polarity overrides lose the cascade — .sig-qualifier-below was visibly stuck on the default --quiUser) ; .stat-face-label gets polarity-inverse colours — gravity stat-block bg is --secUser (opposite of card's --priUser) so the label takes --quiUser to stay legible; levity is the symmetric flip (label = --terUser on --priUser stat-block bg) ; levity card title/qualifier drop-shadow swapped from rgba(0,0,0,…) → rgba(255,255,255,…) — dark drop reads as harsh smudge against the inverted-frame levity --secUser bg; applied to both sig-overlay[data-polarity="levity"] stage card AND sea-stage--levity via $_sea-title-shadow-levity (former shared $_sea-title-shadow split into per-polarity {levity,gravity} variants) ; reversal-face class/content alignment so each `.fan-card-reversal-*` class always carries its semantic content — DOM order per arcana type controls visual layout after the 180° SPIN (DOM-second appears visually on top): Major → title in .fan-card-reversal-name @ DOM-second (visually top after spin), qualifier in .fan-card-reversal-qualifier @ DOM-first; Non-major → title in .fan-card-reversal-name @ DOM-first (visually bottom after spin), qualifier in .fan-card-reversal-qualifier @ DOM-second (preserves the original "qualifier word reads first after spin" layout for Middle/Minor arcana — e.g. "Relieving / Eight of Crowns" not "Eight of Crowns / Relieving") ; _tarot_fan.html renders per-arcana DOM order directly (Django template branches handle both layouts); sig + sea overlays render a fixed two-`<p>` skeleton (one DOM order) so stage-card.js's populator dynamically rewrites the two `<p>`s' className per arcana — Major/override branch flips DOM-second to .fan-card-reversal-name + content, DOM-first to .fan-card-reversal-qualifier; non-major branch keeps DOM-first as .fan-card-reversal-name + title, DOM-second as .fan-card-reversal-qualifier + reversalQualifier-or-polarity-fallback ; SigSelectSpec.js + SeaDealSpec.js fixtures + Major reversed-face assertion updated for the new semantic — TDD
Code architected by Disco DeDisco <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-18 00:25:10 -04:00
|
|
|
|
// Polarity title + qualifier text: --quiUser for levity (paired w. gravity's --terUser).
|
|
|
|
|
|
// All five selectors prefixed w. .sig-stage-card to match (or beat) the 0,4,0 specificity
|
|
|
|
|
|
// of the default `.sig-stage .sig-stage-card .fan-card-face .sig-qualifier-*` rule —
|
|
|
|
|
|
// without the prefix the polarity color loses the cascade on .sig-qualifier-*.
|
|
|
|
|
|
.sig-stage-card .fan-card-name,
|
|
|
|
|
|
.sig-stage-card .fan-card-reversal-name,
|
|
|
|
|
|
.sig-stage-card .fan-card-reversal-qualifier,
|
|
|
|
|
|
.sig-stage-card .sig-qualifier-above,
|
|
|
|
|
|
.sig-stage-card .sig-qualifier-below { color: rgba(var(--quiUser), 1); }
|
|
|
|
|
|
// Stat-face label: levity stat-block bg is --priUser (opposite of levity card's
|
|
|
|
|
|
// --secUser bg), so the label takes the gravity-card text color (--terUser) to
|
|
|
|
|
|
// stay legible against the dark stat-block.
|
|
|
|
|
|
.sig-stat-block .stat-face-label { color: rgba(var(--terUser), 1); }
|
|
|
|
|
|
// Upright + reversal title glow — levity. Drop-shadow is WHITE here (was 0,0,0
|
|
|
|
|
|
// at 0.55) because the inverted-frame levity card uses a light --secUser bg,
|
|
|
|
|
|
// so a dark drop shadow reads as harsh smudge under the --quiUser title text.
|
PICK SEA Sprint C: sea stage card viewer — FLIP in, SPIN/FYI, deposit/re-expand — TDD
- sea.js: SeaDeal module — openStage() shows big card viewer w. flip-in animation;
SPIN toggles stage-card--reversed; FYI shows energies/operations (Energy/Operation
titles, PRV/NXT nav); backdrop click deposits card to slot; click deposited slot
re-opens stage; resetHand() clears hand on DEL
- sea_deck view: adds name_group/name_title/reversal/keywords_upright/keywords_reversed/
energies/operations to each card dict (full sig-select stage data set)
- _sea_overlay.html: data-sea-user-polarity attr; sea stage HTML (sig-stage-card shell
+ fan-card-face-upright/reversal structure + sea-stat-block w. SPIN/FYI/PRV/NXT);
FLIP click calls SeaDeal.openStage(); _fillPos removed (sea.js handles slot fill);
_reset calls SeaDeal.resetHand()
- room.html: sea.js included alongside sig-select.js
- _card-deck.scss: sea-stage layout (fixed overlay, backdrop, content row); sea-stage-card
w. @keyframes sea-flip-in (3D rotateY perspective); sea-stat-block scoped styles
incl. SPIN/FYI btns, stat faces, sig-info FYI panel
- SeaDealSpec.js: 20 Jasmine specs — openStage, SPIN, FYI, backdrop dismiss, slot re-expand
Code architected by Disco DeDisco <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-29 01:12:06 -04:00
|
|
|
|
.sig-stage-card .fan-card-name,
|
|
|
|
|
|
.sig-stage-card .sig-qualifier-above,
|
|
|
|
|
|
.sig-stage-card .sig-qualifier-below,
|
|
|
|
|
|
.sig-stage-card .fan-card-reversal-name,
|
|
|
|
|
|
.sig-stage-card .fan-card-reversal-qualifier {
|
btn-primary label renames + stage-card polarity color refinements — two interleaved threads from one session, committing together since both touch sig + sea stage cards ; LABEL RENAMES: PICK SIGS → SCAN SIGS (room.html #id_pick_sigs_btn), PICK SKY → CAST SKY (room.html #id_pick_sky_btn × 2), PICK SEA → DRAW SEA (room.html #id_pick_sea_btn), TAKE SIG → SAVE SIG (sig-select.js _takeSigBtn.textContent × 2 callsites + section comment) — Element IDs (id_pick_sky_btn etc.), URL names (epic:pick_sigs, epic:pick_sky), and Python state enums (TableStatus.PICK_SKY, PICK_SEA, SIG_SELECT) intentionally retained as stable identifiers; the renamed text is purely the .btn-primary user-facing label ; FT + IT mentions of the old labels swept in test_game_room_select_{sig,sky,sea,role}.py, test_billboard.py, setup_sea_session.py mgmt cmd, apps/epic/{views,utils,models,tasks,tests/integrated/test_views}.py, SigSelectSpec.js, sky_overlay/sea_overlay/dashboard/sky.html, _card-deck.scss, _sky.scss — all docstring/comment references updated for cascade-grep cleanliness ; STAGE-CARD COLOR + CLASS REFINEMENTS (earlier in session): sig-stage card text colour split per polarity — gravity gets --terUser on .fan-card-name + .fan-card-reversal-{name,qualifier} + .sig-qualifier-{above,below}, levity gets --quiUser on the same five slots; all selectors prefixed w. .sig-stage-card to match the 0,4,0 specificity of the default `.sig-stage .sig-stage-card .fan-card-face .sig-qualifier-*` rule (without the prefix the polarity overrides lose the cascade — .sig-qualifier-below was visibly stuck on the default --quiUser) ; .stat-face-label gets polarity-inverse colours — gravity stat-block bg is --secUser (opposite of card's --priUser) so the label takes --quiUser to stay legible; levity is the symmetric flip (label = --terUser on --priUser stat-block bg) ; levity card title/qualifier drop-shadow swapped from rgba(0,0,0,…) → rgba(255,255,255,…) — dark drop reads as harsh smudge against the inverted-frame levity --secUser bg; applied to both sig-overlay[data-polarity="levity"] stage card AND sea-stage--levity via $_sea-title-shadow-levity (former shared $_sea-title-shadow split into per-polarity {levity,gravity} variants) ; reversal-face class/content alignment so each `.fan-card-reversal-*` class always carries its semantic content — DOM order per arcana type controls visual layout after the 180° SPIN (DOM-second appears visually on top): Major → title in .fan-card-reversal-name @ DOM-second (visually top after spin), qualifier in .fan-card-reversal-qualifier @ DOM-first; Non-major → title in .fan-card-reversal-name @ DOM-first (visually bottom after spin), qualifier in .fan-card-reversal-qualifier @ DOM-second (preserves the original "qualifier word reads first after spin" layout for Middle/Minor arcana — e.g. "Relieving / Eight of Crowns" not "Eight of Crowns / Relieving") ; _tarot_fan.html renders per-arcana DOM order directly (Django template branches handle both layouts); sig + sea overlays render a fixed two-`<p>` skeleton (one DOM order) so stage-card.js's populator dynamically rewrites the two `<p>`s' className per arcana — Major/override branch flips DOM-second to .fan-card-reversal-name + content, DOM-first to .fan-card-reversal-qualifier; non-major branch keeps DOM-first as .fan-card-reversal-name + title, DOM-second as .fan-card-reversal-qualifier + reversalQualifier-or-polarity-fallback ; SigSelectSpec.js + SeaDealSpec.js fixtures + Major reversed-face assertion updated for the new semantic — TDD
Code architected by Disco DeDisco <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-18 00:25:10 -04:00
|
|
|
|
text-shadow: 0 1px 1px rgba(255,255,255,0.55), 0 0 0.55rem rgba(var(--ninUser), 0.7);
|
PICK SEA Sprint C: sea stage card viewer — FLIP in, SPIN/FYI, deposit/re-expand — TDD
- sea.js: SeaDeal module — openStage() shows big card viewer w. flip-in animation;
SPIN toggles stage-card--reversed; FYI shows energies/operations (Energy/Operation
titles, PRV/NXT nav); backdrop click deposits card to slot; click deposited slot
re-opens stage; resetHand() clears hand on DEL
- sea_deck view: adds name_group/name_title/reversal/keywords_upright/keywords_reversed/
energies/operations to each card dict (full sig-select stage data set)
- _sea_overlay.html: data-sea-user-polarity attr; sea stage HTML (sig-stage-card shell
+ fan-card-face-upright/reversal structure + sea-stat-block w. SPIN/FYI/PRV/NXT);
FLIP click calls SeaDeal.openStage(); _fillPos removed (sea.js handles slot fill);
_reset calls SeaDeal.resetHand()
- room.html: sea.js included alongside sig-select.js
- _card-deck.scss: sea-stage layout (fixed overlay, backdrop, content row); sea-stage-card
w. @keyframes sea-flip-in (3D rotateY perspective); sea-stat-block scoped styles
incl. SPIN/FYI btns, stat faces, sig-info FYI panel
- SeaDealSpec.js: 20 Jasmine specs — openStage, SPIN, FYI, backdrop dismiss, slot re-expand
Code architected by Disco DeDisco <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-29 01:12:06 -04:00
|
|
|
|
}
|
2026-04-08 11:52:49 -04:00
|
|
|
|
// card-ref spans inside the caution tooltip — must match the base rule's
|
2026-04-28 20:22:19 -04:00
|
|
|
|
// .sig-stat-block .sig-info-effect .card-ref specificity (0,3,0) to win.
|
|
|
|
|
|
.sig-info-effect .card-ref { color: rgba(var(--quiUser), 1); }
|
2026-04-08 11:52:49 -04:00
|
|
|
|
// Cursor colours live in .sig-cursor-float[data-role] rules (portal elements)
|
|
|
|
|
|
}
|
My Sign picker: hover-preview, click-lock, NVM-unlock + polarity SCSS port + bigger stage — Sprint 4a-cont iteration 2
User-driven polish on iteration 1: separate hover-preview from click-lock semantics (room sig-select pattern), add NVM to unlock, port the room's `.sig-overlay[data-polarity]` polarity-themed CSS to also target `.my-sign-page[data-polarity]`, bump the stage card width so it occupies a bigger slice of the viewport ; **state machine** (inline JS in my_sign.html): three discrete states — (a) idle: stage frame visible but empty (stage card hidden via display:none, stat block hidden via `.sig-stage--frozen` absence, FLIP btn hidden via CSS); (b) hover: hovered .sig-card populates the stage card (preview); mouseleave clears it; mouseover-mouseout sequence guards against transient gaps when moving between adjacent thumbnails (relatedTarget closest('.sig-card') check); (c) locked: click on any grid card freezes the stage — populates content, adds `.sig-stage--frozen` to .sig-stage (which surfaces .sig-stat-block + .my-sign-flip-btn via CSS), enables SAVE SIGN, reveals NVM. Subsequent hovers ignored while locked. NVM click reverts to idle (clears content, hides stat-block + FLIP, disables SAVE, hides NVM) ; **new template** elements: NVM `<button id="id_nvm_sign_btn" class="btn btn-cancel">` next to SAVE SIGN in the form, hidden by default (style="display:none") + revealed on lock. Stage card re-acquires `style="display:none"` (hidden on load, JS-shown on hover/lock). `sig-stage--frozen` class no longer initial — JS-added on click ; **polarity SCSS port** (_card-deck.scss L820-905): extended `.sig-overlay[data-polarity="levity"]` + `[data-polarity="gravity"]` selector lists to include `.my-sign-page[data-polarity="levity"]` + `[gravity"]`. Rules inside (e.g. `.sig-card { background: rgba(--secUser) }`, `.sig-stage-card .fan-card-name { color: --quiUser }`, stat-face-label colour flips, text-shadow polarity variants) automatically apply on the my-sign page since `data-polarity` lives on the page wrapper (descendants .sig-card + .sig-stage-card both inherit). Moved `data-polarity` from `.my-sign-stage` to `.my-sign-page` in the template + JS so descendant scoping works (was a stage-scoped attr in iteration 1, which couldn't reach the sibling .sig-deck-grid) ; **bigger stage** (_card-deck.scss): `.my-sign-page { --sig-card-w: clamp(140px, 36vw, 220px); }` — scales w. viewport, 140px floor for portrait, 220px ceiling for landscape, ~36vw in between. Stage card + stat block both width-driven by this var so they scale together. The clamp() ceiling matches the room sig-select's typical sized card on a mid-laptop ; **FLIP btn visibility** (_card-deck.scss): `.my-sign-flip-btn { display: none }` at rest; `.my-sign-stage.sig-stage--frozen .my-sign-flip-btn { display: inline-flex }` on lock. The btn's position (absolute, bottom-left of card) was already added in iteration 1 ; **on-load lock-restore**: if `User.significator` is set, the picker auto-locks that card via `_lock(savedCardEl)` so the user sees their persisted choice in the locked-state UI (stat block + FLIP visible) instead of an idle empty frame. Polarity initial value (data-polarity on .my-sign-page) reflects `current_significator_reversed` — False=gravity (default), True=levity ; **regression**: 7 FTs in test_bill_my_sign green in 57s. Visual verify deferred to user — picker should now show: idle empty stage + grid below; hover thumbnail → stage card preview; click → preview persists + stat block + FLIP appear; NVM → back to idle; FLIP click → horizontal-perspective Y-axis rotation w. polarity content swap mid-animation. Polarity-themed colour styles (levity inverted palette / gravity stark contrast / per-polarity text-shadows) now apply on my-sign matching the room sig-select look
Code architected by Disco DeDisco <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-19 00:15:13 -04:00
|
|
|
|
.sig-overlay[data-polarity="gravity"],
|
fix: my-sea drawn cards no longer always render levity-coded — yesterday's `feedback_polarity_must_agree_across_surfaces` fix (f59c1af) added `.my-sea-page[data-polarity="..."]` to the shared `.sig-overlay, .my-sign-page` polarity block at `_card-deck.scss:919`. Worked for the spread-center sig (`.sea-sig-card`) but silently bled into the drawn-card stage modal: the stage's element carries BOTH classes `.sig-stage-card sea-stage-card` (per `_sea_stage.html:12`), so the shared rule's `.sig-stage-card` descendant selector matched. Specificity `.my-sea-page[data-polarity="levity"] .sig-stage-card` = 0,3,0 silently beat the card-specific `.sea-stage--gravity .sea-stage-card` = 0,2,0 (set by sea.js's `_showStage(isLevity)` at line 104-108) → every drawn card on my-sea rendered the user's-sig polarity instead of the deck-stack it was actually drawn from. Room.html Sea Select unaffected (no `.my-sea-page` ancestor on the stage there). User-reported 2026-05-21 — symptom: a gravity card opened in my-sea stage shows the light/cream levity styling even though the card came from the gravity deck. Fix: drop `.my-sea-page[data-polarity]` from the shared selector list at `_card-deck.scss:917-919` + `:972-974`; add a NEW dedicated rule at the end of the shared block scoped tightly to `.sig-stage-card.sea-sig-card` (0,4,0 specificity) — the central sig stays page-polarity-driven (yesterday's `MySeaPolarityMatchesMySignTest` still pins this) but every other `.sig-stage-card` descendant (drawn-card stages, future spread elements) is free to follow its own polarity. Gravity is the default rendering for `.sea-sig-card` per the base rule at `:1379` so only the levity override needs an explicit block. 6/6 existing polarity + picker ITs green; visual verify deferred to user. Trap captured: [[feedback-page-polarity-scope-trap]] — multi-class elements (`.A.B`) match both shared (`.A`) AND scoped (`.B`) selectors, so any new page wrapper added to a shared block needs an audit of every descendant selector in the block for nested polarity overlap
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-21 15:04:53 -04:00
|
|
|
|
.my-sign-page[data-polarity="gravity"] {
|
2026-04-08 11:52:49 -04:00
|
|
|
|
// Stat block: invert priUser/secUser so gravity gets the same stark contrast as leavened cards
|
|
|
|
|
|
.sig-stat-block {
|
|
|
|
|
|
background: rgba(var(--secUser), 0.75);
|
|
|
|
|
|
color: rgba(var(--priUser), 1);
|
|
|
|
|
|
border-color: rgba(var(--priUser), 0.15);
|
|
|
|
|
|
}
|
2026-04-08 11:57:44 -04:00
|
|
|
|
// Caution tooltip: --tooltip-bg is black so priUser text (dark) would be invisible —
|
|
|
|
|
|
// override to secUser (light) so body text reads against the dark backdrop.
|
2026-04-28 20:44:50 -04:00
|
|
|
|
.sig-info { color: rgba(var(--secUser), 1); }
|
btn-primary label renames + stage-card polarity color refinements — two interleaved threads from one session, committing together since both touch sig + sea stage cards ; LABEL RENAMES: PICK SIGS → SCAN SIGS (room.html #id_pick_sigs_btn), PICK SKY → CAST SKY (room.html #id_pick_sky_btn × 2), PICK SEA → DRAW SEA (room.html #id_pick_sea_btn), TAKE SIG → SAVE SIG (sig-select.js _takeSigBtn.textContent × 2 callsites + section comment) — Element IDs (id_pick_sky_btn etc.), URL names (epic:pick_sigs, epic:pick_sky), and Python state enums (TableStatus.PICK_SKY, PICK_SEA, SIG_SELECT) intentionally retained as stable identifiers; the renamed text is purely the .btn-primary user-facing label ; FT + IT mentions of the old labels swept in test_game_room_select_{sig,sky,sea,role}.py, test_billboard.py, setup_sea_session.py mgmt cmd, apps/epic/{views,utils,models,tasks,tests/integrated/test_views}.py, SigSelectSpec.js, sky_overlay/sea_overlay/dashboard/sky.html, _card-deck.scss, _sky.scss — all docstring/comment references updated for cascade-grep cleanliness ; STAGE-CARD COLOR + CLASS REFINEMENTS (earlier in session): sig-stage card text colour split per polarity — gravity gets --terUser on .fan-card-name + .fan-card-reversal-{name,qualifier} + .sig-qualifier-{above,below}, levity gets --quiUser on the same five slots; all selectors prefixed w. .sig-stage-card to match the 0,4,0 specificity of the default `.sig-stage .sig-stage-card .fan-card-face .sig-qualifier-*` rule (without the prefix the polarity overrides lose the cascade — .sig-qualifier-below was visibly stuck on the default --quiUser) ; .stat-face-label gets polarity-inverse colours — gravity stat-block bg is --secUser (opposite of card's --priUser) so the label takes --quiUser to stay legible; levity is the symmetric flip (label = --terUser on --priUser stat-block bg) ; levity card title/qualifier drop-shadow swapped from rgba(0,0,0,…) → rgba(255,255,255,…) — dark drop reads as harsh smudge against the inverted-frame levity --secUser bg; applied to both sig-overlay[data-polarity="levity"] stage card AND sea-stage--levity via $_sea-title-shadow-levity (former shared $_sea-title-shadow split into per-polarity {levity,gravity} variants) ; reversal-face class/content alignment so each `.fan-card-reversal-*` class always carries its semantic content — DOM order per arcana type controls visual layout after the 180° SPIN (DOM-second appears visually on top): Major → title in .fan-card-reversal-name @ DOM-second (visually top after spin), qualifier in .fan-card-reversal-qualifier @ DOM-first; Non-major → title in .fan-card-reversal-name @ DOM-first (visually bottom after spin), qualifier in .fan-card-reversal-qualifier @ DOM-second (preserves the original "qualifier word reads first after spin" layout for Middle/Minor arcana — e.g. "Relieving / Eight of Crowns" not "Eight of Crowns / Relieving") ; _tarot_fan.html renders per-arcana DOM order directly (Django template branches handle both layouts); sig + sea overlays render a fixed two-`<p>` skeleton (one DOM order) so stage-card.js's populator dynamically rewrites the two `<p>`s' className per arcana — Major/override branch flips DOM-second to .fan-card-reversal-name + content, DOM-first to .fan-card-reversal-qualifier; non-major branch keeps DOM-first as .fan-card-reversal-name + title, DOM-second as .fan-card-reversal-qualifier + reversalQualifier-or-polarity-fallback ; SigSelectSpec.js + SeaDealSpec.js fixtures + Major reversed-face assertion updated for the new semantic — TDD
Code architected by Disco DeDisco <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-18 00:25:10 -04:00
|
|
|
|
// Polarity title + qualifier text: --terUser for gravity (paired w. levity's --quiUser).
|
|
|
|
|
|
// All five selectors prefixed w. .sig-stage-card to meet the 0,4,0 specificity of the
|
|
|
|
|
|
// default `.sig-stage .sig-stage-card .fan-card-face .sig-qualifier-*` rule.
|
|
|
|
|
|
.sig-stage-card .fan-card-name,
|
|
|
|
|
|
.sig-stage-card .fan-card-reversal-name,
|
|
|
|
|
|
.sig-stage-card .fan-card-reversal-qualifier,
|
|
|
|
|
|
.sig-stage-card .sig-qualifier-above,
|
|
|
|
|
|
.sig-stage-card .sig-qualifier-below { color: rgba(var(--terUser), 1); }
|
|
|
|
|
|
// Stat-face label: gravity stat-block bg is --secUser (opposite of gravity card's
|
|
|
|
|
|
// --priUser bg), so the label takes the levity-card text color (--quiUser) to
|
|
|
|
|
|
// stay legible against the lighter stat-block.
|
|
|
|
|
|
.sig-stat-block .stat-face-label { color: rgba(var(--quiUser), 1); }
|
PICK SEA Sprint C: sea stage card viewer — FLIP in, SPIN/FYI, deposit/re-expand — TDD
- sea.js: SeaDeal module — openStage() shows big card viewer w. flip-in animation;
SPIN toggles stage-card--reversed; FYI shows energies/operations (Energy/Operation
titles, PRV/NXT nav); backdrop click deposits card to slot; click deposited slot
re-opens stage; resetHand() clears hand on DEL
- sea_deck view: adds name_group/name_title/reversal/keywords_upright/keywords_reversed/
energies/operations to each card dict (full sig-select stage data set)
- _sea_overlay.html: data-sea-user-polarity attr; sea stage HTML (sig-stage-card shell
+ fan-card-face-upright/reversal structure + sea-stat-block w. SPIN/FYI/PRV/NXT);
FLIP click calls SeaDeal.openStage(); _fillPos removed (sea.js handles slot fill);
_reset calls SeaDeal.resetHand()
- room.html: sea.js included alongside sig-select.js
- _card-deck.scss: sea-stage layout (fixed overlay, backdrop, content row); sea-stage-card
w. @keyframes sea-flip-in (3D rotateY perspective); sea-stat-block scoped styles
incl. SPIN/FYI btns, stat faces, sig-info FYI panel
- SeaDealSpec.js: 20 Jasmine specs — openStage, SPIN, FYI, backdrop dismiss, slot re-expand
Code architected by Disco DeDisco <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-29 01:12:06 -04:00
|
|
|
|
// Upright + reversal title glow — gravity
|
|
|
|
|
|
.sig-stage-card .fan-card-name,
|
|
|
|
|
|
.sig-stage-card .sig-qualifier-above,
|
|
|
|
|
|
.sig-stage-card .sig-qualifier-below,
|
|
|
|
|
|
.sig-stage-card .fan-card-reversal-name,
|
|
|
|
|
|
.sig-stage-card .fan-card-reversal-qualifier {
|
|
|
|
|
|
text-shadow: 1px 1px 0 rgba(0,0,0,1), 0 0 0.25rem rgba(var(--ninUser), 0.25);
|
|
|
|
|
|
}
|
2026-04-08 11:52:49 -04:00
|
|
|
|
// Cursor colours live in .sig-cursor-float[data-role] rules (portal elements)
|
|
|
|
|
|
}
|
|
|
|
|
|
|
fix: my-sea drawn cards no longer always render levity-coded — yesterday's `feedback_polarity_must_agree_across_surfaces` fix (f59c1af) added `.my-sea-page[data-polarity="..."]` to the shared `.sig-overlay, .my-sign-page` polarity block at `_card-deck.scss:919`. Worked for the spread-center sig (`.sea-sig-card`) but silently bled into the drawn-card stage modal: the stage's element carries BOTH classes `.sig-stage-card sea-stage-card` (per `_sea_stage.html:12`), so the shared rule's `.sig-stage-card` descendant selector matched. Specificity `.my-sea-page[data-polarity="levity"] .sig-stage-card` = 0,3,0 silently beat the card-specific `.sea-stage--gravity .sea-stage-card` = 0,2,0 (set by sea.js's `_showStage(isLevity)` at line 104-108) → every drawn card on my-sea rendered the user's-sig polarity instead of the deck-stack it was actually drawn from. Room.html Sea Select unaffected (no `.my-sea-page` ancestor on the stage there). User-reported 2026-05-21 — symptom: a gravity card opened in my-sea stage shows the light/cream levity styling even though the card came from the gravity deck. Fix: drop `.my-sea-page[data-polarity]` from the shared selector list at `_card-deck.scss:917-919` + `:972-974`; add a NEW dedicated rule at the end of the shared block scoped tightly to `.sig-stage-card.sea-sig-card` (0,4,0 specificity) — the central sig stays page-polarity-driven (yesterday's `MySeaPolarityMatchesMySignTest` still pins this) but every other `.sig-stage-card` descendant (drawn-card stages, future spread elements) is free to follow its own polarity. Gravity is the default rendering for `.sea-sig-card` per the base rule at `:1379` so only the levity override needs an explicit block. 6/6 existing polarity + picker ITs green; visual verify deferred to user. Trap captured: [[feedback-page-polarity-scope-trap]] — multi-class elements (`.A.B`) match both shared (`.A`) AND scoped (`.B`) selectors, so any new page wrapper added to a shared block needs an audit of every descendant selector in the block for nested polarity overlap
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-21 15:04:53 -04:00
|
|
|
|
// ── My-sea page polarity: scoped to `.sea-sig-card` only ──────────────────────
|
|
|
|
|
|
// The user's chosen sig (rendered as `.sig-stage-card.sea-sig-card` in the
|
|
|
|
|
|
// spread-center cell) is the ONLY element on my-sea whose colours track the
|
|
|
|
|
|
// page-level `data-polarity` (= `User.significator_reversed`). Drawn cards
|
|
|
|
|
|
// belong to their own polarity from the deck-stack they were pulled from +
|
|
|
|
|
|
// must NOT inherit the user's sig polarity — see big NOTE above the shared
|
|
|
|
|
|
// `.sig-overlay`/`.my-sign-page` block for the bleed trap that prompted this
|
|
|
|
|
|
// scoping (2026-05-21 bug).
|
|
|
|
|
|
//
|
|
|
|
|
|
// Gravity is the default rendering (`.sig-stage-card.sea-sig-card` base rule
|
|
|
|
|
|
// sets `background: --priUser, color: --secUser` at `_card-deck.scss:1379`)
|
|
|
|
|
|
// so we only need an override for the LEVITY case here — same idea as the
|
|
|
|
|
|
// `.sig-overlay[data-polarity="levity"] .sig-stage-card` block above.
|
|
|
|
|
|
.my-sea-page[data-polarity="levity"] .sig-stage-card.sea-sig-card {
|
|
|
|
|
|
background: rgba(var(--secUser), 1);
|
|
|
|
|
|
border-color: rgba(var(--priUser), 0.6);
|
|
|
|
|
|
color: rgba(var(--priUser), 1); // currentColor propagates to .fan-corner-rank + i
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2026-04-08 11:52:49 -04:00
|
|
|
|
// ─── Sig select: landscape overrides ─────────────────────────────────────────
|
tray apparatus scales w. fluid rem; sig-select 9×2 middling breakpoint — `$handle-exposed` was `48px` fixed while `#id_tray_btn` is `3rem`, so on big-rem viewports (`clamp(14px, 2.4vmin, 22px)` → up to 22px on tall screens, btn=66) the btn's flex parent (`#id_tray_handle`) shrank the btn from 66×66 → 48×66 via default `flex-shrink:1` in portrait (elongated tall ellipse), and in landscape the btn overflowed the 48px-tall handle vertically (extending 9px past viewport top in closed state); fix: `$handle-exposed: 3rem` matches the btn so it fills the exposed area at every rem; `$handle-rect-h: 4.5rem` (was `72px`) gives the visible rail thickness a touch of breathing room around the btn at every scale; landscape rules in the same partial that hard-coded `48px` / `72px` (`#id_tray_handle { height: 48px }`, `#id_tray_grip { bottom: calc(48px/2 - 0.125rem); width: 72px }`) now reference the variables so they track in sync — `tray.js _computeBounds()` swapped from `_btn.offsetWidth/Height` → `_handle.offsetWidth/Height` for the same reason: even with the SCSS fix, measuring the btn would re-introduce the offset when btn and handle drift (which they shouldn't now, but the handle is the layout-defining element so measure it directly); `id_kit_btn` added as fallback for `id_gear_btn` (which no longer renders on the room page) so the open-state landscape wrap height anchors to the bottom-right kit btn instead of the full viewport — `id_tray_handle` cached on the module via `_handle` ref alongside `_btn` and cleared in `reset()` ; sig-select grid jumped straight from 6 cols (narrow landscape) → 18 cols × 3rem at `min-width: 900px`, but 18×3rem + 7rem modal margins needs ~1376px to clear at rem=22 so the cards spilled off the sides on common 1280-wide laptops + the previous-era 9×2 middling layout had simply been dropped; new cascade in `_card-deck.scss` mirrors the comment's documented intent: 6 cols default landscape (row layout, stage beside grid) → 9 cols × 3rem at `min-width: 900px` (column layout, stage above grid) → 18 cols × 3rem at `min-width: 1400px` → 18 × 5rem at `min-width: 1800px` (unchanged) — verified in Claudezilla across iphone-14 portrait (rem=14, btn=42 square, handle right edge at viewport right), 816×826 portrait near-landscape (rem=19.6, btn=58.75 square no longer elongated), 1149×751 landscape mid (rem=18, btn=54 square at viewport top, 9×2 grid), 1789×1111 desktop XL (rem=22, btn=66 square at viewport top, 18×1 grid)
Code architected by Disco DeDisco <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-17 23:21:02 -04:00
|
|
|
|
// Cascade (each step is a SUPERSET of the prior):
|
|
|
|
|
|
// narrow landscape → 6 cols × 2.5rem, row layout (stage beside grid)
|
|
|
|
|
|
// ≥ 900px → 9×2 grid of 3rem cards, column layout (stage above)
|
|
|
|
|
|
// ≥ 1400px → 18×1 row of 3rem cards (wide enough that 18×3rem
|
|
|
|
|
|
// + ~7rem modal margins clears even at rem=22)
|
|
|
|
|
|
// ≥ 1800px → 18×1 row of 5rem cards + doubled sidebar padding
|
2026-04-08 11:52:49 -04:00
|
|
|
|
// Grid margins reset to 0 — overlay padding handles all edge clearance.
|
|
|
|
|
|
|
|
|
|
|
|
@media (orientation: landscape) {
|
|
|
|
|
|
.sig-modal {
|
|
|
|
|
|
max-width: none;
|
|
|
|
|
|
flex-direction: row; // grid to the right, stage + card preview to the left
|
|
|
|
|
|
margin-left: 4rem;
|
|
|
|
|
|
margin-right: 3rem;
|
|
|
|
|
|
}
|
My Sign picker iteration 3 — SCAN SIGN landing hex + OK/NVM thumbnail two-step + duoUser picker bg — Sprint 4a-cont — TDD
Two-phase picker. Landing phase renders the DRY 1-chair table hex w. a central SCAN SIGN .btn-primary; clicking it swaps the page to picker phase (hex hides, sig-card grid + always-present stage frame + SAVE SIGN visible). Stage frame previews the saved sig on landing if User.significator is set ; sig-card selection lifts the room's two-step OK/NVM-on-thumbnail pattern via `.sig-card-actions` w. `.sig-ok-btn`/`.sig-nvm-btn`: click thumb → `.sig-focused` (CSS reveals OK badge, stage previews card, no lock); click OK → `.sig-reserved--own` (CSS swaps OK→NVM badge, `.sig-stage--frozen` reveals stat block + FLIP, SAVE SIGN enables); click NVM → unlock + clear focus + disable SAVE SIGN ; SAVE SIGN form pinned `position:absolute; bottom:0.75rem; right:1rem` to .my-sign-stage so it stops shifting across the stage row when the stat block reveals on lock (was getting shoved left as a flex item alongside the stat-block reveal) ; .my-sign-page mirrors .room-page's `flex:1; min-height:0; display:flex; flex-direction:column` so the DRY hex container chain propagates real height down into #id_game_table for room.js's scaleTable() to compute against (was reading 0 + leaving the hex unscaled at 200×231 in a 360×320 scene) ; stage min-height gated to picker phase (`.my-sign-page[data-phase="picker"] .my-sign-stage`) — landing-phase stage is natural-sized so the hex centers in the bigger available area instead of being bottom-anchored by a 376px stage reservation ; picker-phase bg uses `rgba(var(--duoUser), 1)` so the transition from "hex face" → "card pile on felt" reads as a continuous surface rather than a context swap ; room sig-select media queries re-scoped to `.sig-overlay .sig-deck-grid` so they don't bleed into my-sign — my-sign gets its own breakpoint cascade: 6×3rem (portrait) → 9×3rem (≥900px landscape) → 18×3rem (≥1600px) → 18×5rem (≥2200px); thresholds bumped from sig-select's 1400/1800px so 18×col + sidebar/footer margins clear the viewport at fluid-rem ceiling (rem=22 → 18×3rem=1188px + 220px margins=1408, safe with 1600px floor) ; default `repeat(6, 1fr)` collapsed to 0-width when paired w. `align-self:center` (no parent width for `fr` to resolve against, hence the dotted-line miniscule cards in portrait); fixed `repeat(6, 3rem)` at portrait default fixes it ; SCAN SIGN font-size 0.75rem (vs .btn-primary's default 0.875rem) so the 2-line "SCAN/SIGN" label fits inside the 4rem circle without crowding the border — treated as a smaller variant via `#id_scan_sign_btn` rule scoped under .my-sign-landing ; room.js's scaleTable() runs on DOMContentLoaded before flex layout flushes (#id_game_table.clientWidth/Height read 0 at that moment) — added `requestAnimationFrame → dispatchEvent('resize')` tick at the end of the inline IIFE so scaleTable re-fires once layout settles ; tests — 6 FTs in test_bill_my_sign.py rewritten for the new flow: test_landing_renders_dry_hex_with_scan_sign_button pins the 1-chair hex + central SCAN SIGN + hidden picker grid; test_scan_sign_click_transitions_to_picker_phase pins the phase swap (hex hides, grid shows); test_click_thumbnail_shows_OK_btn_without_locking pins step 1 (focus + OK appears, no lock yet); test_OK_click_locks_thumbnail_and_enables_save_sign pins step 2 (lock + NVM appears + SAVE SIGN enables + persists to /billboard/ applet); test_NVM_click_deselects_and_disables_save_sign pins NVM unlock cycle; test_landing_previews_saved_sig_on_stage pins the on-load saved-sig preview behavior — all green visually verified across portrait + landscape
Code architected by Disco DeDisco <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-19 01:11:41 -04:00
|
|
|
|
.sig-overlay .sig-stage {
|
2026-04-08 11:52:49 -04:00
|
|
|
|
min-width: 0; // allow shrinking in row layout; align-items:flex-end already set
|
|
|
|
|
|
}
|
My Sign picker iteration 3 — SCAN SIGN landing hex + OK/NVM thumbnail two-step + duoUser picker bg — Sprint 4a-cont — TDD
Two-phase picker. Landing phase renders the DRY 1-chair table hex w. a central SCAN SIGN .btn-primary; clicking it swaps the page to picker phase (hex hides, sig-card grid + always-present stage frame + SAVE SIGN visible). Stage frame previews the saved sig on landing if User.significator is set ; sig-card selection lifts the room's two-step OK/NVM-on-thumbnail pattern via `.sig-card-actions` w. `.sig-ok-btn`/`.sig-nvm-btn`: click thumb → `.sig-focused` (CSS reveals OK badge, stage previews card, no lock); click OK → `.sig-reserved--own` (CSS swaps OK→NVM badge, `.sig-stage--frozen` reveals stat block + FLIP, SAVE SIGN enables); click NVM → unlock + clear focus + disable SAVE SIGN ; SAVE SIGN form pinned `position:absolute; bottom:0.75rem; right:1rem` to .my-sign-stage so it stops shifting across the stage row when the stat block reveals on lock (was getting shoved left as a flex item alongside the stat-block reveal) ; .my-sign-page mirrors .room-page's `flex:1; min-height:0; display:flex; flex-direction:column` so the DRY hex container chain propagates real height down into #id_game_table for room.js's scaleTable() to compute against (was reading 0 + leaving the hex unscaled at 200×231 in a 360×320 scene) ; stage min-height gated to picker phase (`.my-sign-page[data-phase="picker"] .my-sign-stage`) — landing-phase stage is natural-sized so the hex centers in the bigger available area instead of being bottom-anchored by a 376px stage reservation ; picker-phase bg uses `rgba(var(--duoUser), 1)` so the transition from "hex face" → "card pile on felt" reads as a continuous surface rather than a context swap ; room sig-select media queries re-scoped to `.sig-overlay .sig-deck-grid` so they don't bleed into my-sign — my-sign gets its own breakpoint cascade: 6×3rem (portrait) → 9×3rem (≥900px landscape) → 18×3rem (≥1600px) → 18×5rem (≥2200px); thresholds bumped from sig-select's 1400/1800px so 18×col + sidebar/footer margins clear the viewport at fluid-rem ceiling (rem=22 → 18×3rem=1188px + 220px margins=1408, safe with 1600px floor) ; default `repeat(6, 1fr)` collapsed to 0-width when paired w. `align-self:center` (no parent width for `fr` to resolve against, hence the dotted-line miniscule cards in portrait); fixed `repeat(6, 3rem)` at portrait default fixes it ; SCAN SIGN font-size 0.75rem (vs .btn-primary's default 0.875rem) so the 2-line "SCAN/SIGN" label fits inside the 4rem circle without crowding the border — treated as a smaller variant via `#id_scan_sign_btn` rule scoped under .my-sign-landing ; room.js's scaleTable() runs on DOMContentLoaded before flex layout flushes (#id_game_table.clientWidth/Height read 0 at that moment) — added `requestAnimationFrame → dispatchEvent('resize')` tick at the end of the inline IIFE so scaleTable re-fires once layout settles ; tests — 6 FTs in test_bill_my_sign.py rewritten for the new flow: test_landing_renders_dry_hex_with_scan_sign_button pins the 1-chair hex + central SCAN SIGN + hidden picker grid; test_scan_sign_click_transitions_to_picker_phase pins the phase swap (hex hides, grid shows); test_click_thumbnail_shows_OK_btn_without_locking pins step 1 (focus + OK appears, no lock yet); test_OK_click_locks_thumbnail_and_enables_save_sign pins step 2 (lock + NVM appears + SAVE SIGN enables + persists to /billboard/ applet); test_NVM_click_deselects_and_disables_save_sign pins NVM unlock cycle; test_landing_previews_saved_sig_on_stage pins the on-load saved-sig preview behavior — all green visually verified across portrait + landscape
Code architected by Disco DeDisco <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-19 01:11:41 -04:00
|
|
|
|
// Scoped to .sig-overlay — the room sig-select modal has its own width
|
|
|
|
|
|
// budget. .my-sign-page gets its own breakpoints below (different col
|
|
|
|
|
|
// counts + thresholds tuned for the full content area).
|
|
|
|
|
|
.sig-overlay .sig-deck-grid {
|
2026-04-08 11:52:49 -04:00
|
|
|
|
grid-template-columns: repeat(6, 2.5rem);
|
|
|
|
|
|
margin: 0;
|
|
|
|
|
|
align-self: flex-end; // sit at the bottom of the modal row
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
@media (orientation: landscape) and (min-width: 900px) {
|
tray apparatus scales w. fluid rem; sig-select 9×2 middling breakpoint — `$handle-exposed` was `48px` fixed while `#id_tray_btn` is `3rem`, so on big-rem viewports (`clamp(14px, 2.4vmin, 22px)` → up to 22px on tall screens, btn=66) the btn's flex parent (`#id_tray_handle`) shrank the btn from 66×66 → 48×66 via default `flex-shrink:1` in portrait (elongated tall ellipse), and in landscape the btn overflowed the 48px-tall handle vertically (extending 9px past viewport top in closed state); fix: `$handle-exposed: 3rem` matches the btn so it fills the exposed area at every rem; `$handle-rect-h: 4.5rem` (was `72px`) gives the visible rail thickness a touch of breathing room around the btn at every scale; landscape rules in the same partial that hard-coded `48px` / `72px` (`#id_tray_handle { height: 48px }`, `#id_tray_grip { bottom: calc(48px/2 - 0.125rem); width: 72px }`) now reference the variables so they track in sync — `tray.js _computeBounds()` swapped from `_btn.offsetWidth/Height` → `_handle.offsetWidth/Height` for the same reason: even with the SCSS fix, measuring the btn would re-introduce the offset when btn and handle drift (which they shouldn't now, but the handle is the layout-defining element so measure it directly); `id_kit_btn` added as fallback for `id_gear_btn` (which no longer renders on the room page) so the open-state landscape wrap height anchors to the bottom-right kit btn instead of the full viewport — `id_tray_handle` cached on the module via `_handle` ref alongside `_btn` and cleared in `reset()` ; sig-select grid jumped straight from 6 cols (narrow landscape) → 18 cols × 3rem at `min-width: 900px`, but 18×3rem + 7rem modal margins needs ~1376px to clear at rem=22 so the cards spilled off the sides on common 1280-wide laptops + the previous-era 9×2 middling layout had simply been dropped; new cascade in `_card-deck.scss` mirrors the comment's documented intent: 6 cols default landscape (row layout, stage beside grid) → 9 cols × 3rem at `min-width: 900px` (column layout, stage above grid) → 18 cols × 3rem at `min-width: 1400px` → 18 × 5rem at `min-width: 1800px` (unchanged) — verified in Claudezilla across iphone-14 portrait (rem=14, btn=42 square, handle right edge at viewport right), 816×826 portrait near-landscape (rem=19.6, btn=58.75 square no longer elongated), 1149×751 landscape mid (rem=18, btn=54 square at viewport top, 9×2 grid), 1789×1111 desktop XL (rem=22, btn=66 square at viewport top, 18×1 grid)
Code architected by Disco DeDisco <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-17 23:21:02 -04:00
|
|
|
|
// Middling landscape: stacked layout (stage top, 9×2 grid bottom).
|
2026-04-08 11:52:49 -04:00
|
|
|
|
.sig-modal {
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
align-items: stretch;
|
|
|
|
|
|
}
|
My Sign picker iteration 3 — SCAN SIGN landing hex + OK/NVM thumbnail two-step + duoUser picker bg — Sprint 4a-cont — TDD
Two-phase picker. Landing phase renders the DRY 1-chair table hex w. a central SCAN SIGN .btn-primary; clicking it swaps the page to picker phase (hex hides, sig-card grid + always-present stage frame + SAVE SIGN visible). Stage frame previews the saved sig on landing if User.significator is set ; sig-card selection lifts the room's two-step OK/NVM-on-thumbnail pattern via `.sig-card-actions` w. `.sig-ok-btn`/`.sig-nvm-btn`: click thumb → `.sig-focused` (CSS reveals OK badge, stage previews card, no lock); click OK → `.sig-reserved--own` (CSS swaps OK→NVM badge, `.sig-stage--frozen` reveals stat block + FLIP, SAVE SIGN enables); click NVM → unlock + clear focus + disable SAVE SIGN ; SAVE SIGN form pinned `position:absolute; bottom:0.75rem; right:1rem` to .my-sign-stage so it stops shifting across the stage row when the stat block reveals on lock (was getting shoved left as a flex item alongside the stat-block reveal) ; .my-sign-page mirrors .room-page's `flex:1; min-height:0; display:flex; flex-direction:column` so the DRY hex container chain propagates real height down into #id_game_table for room.js's scaleTable() to compute against (was reading 0 + leaving the hex unscaled at 200×231 in a 360×320 scene) ; stage min-height gated to picker phase (`.my-sign-page[data-phase="picker"] .my-sign-stage`) — landing-phase stage is natural-sized so the hex centers in the bigger available area instead of being bottom-anchored by a 376px stage reservation ; picker-phase bg uses `rgba(var(--duoUser), 1)` so the transition from "hex face" → "card pile on felt" reads as a continuous surface rather than a context swap ; room sig-select media queries re-scoped to `.sig-overlay .sig-deck-grid` so they don't bleed into my-sign — my-sign gets its own breakpoint cascade: 6×3rem (portrait) → 9×3rem (≥900px landscape) → 18×3rem (≥1600px) → 18×5rem (≥2200px); thresholds bumped from sig-select's 1400/1800px so 18×col + sidebar/footer margins clear the viewport at fluid-rem ceiling (rem=22 → 18×3rem=1188px + 220px margins=1408, safe with 1600px floor) ; default `repeat(6, 1fr)` collapsed to 0-width when paired w. `align-self:center` (no parent width for `fr` to resolve against, hence the dotted-line miniscule cards in portrait); fixed `repeat(6, 3rem)` at portrait default fixes it ; SCAN SIGN font-size 0.75rem (vs .btn-primary's default 0.875rem) so the 2-line "SCAN/SIGN" label fits inside the 4rem circle without crowding the border — treated as a smaller variant via `#id_scan_sign_btn` rule scoped under .my-sign-landing ; room.js's scaleTable() runs on DOMContentLoaded before flex layout flushes (#id_game_table.clientWidth/Height read 0 at that moment) — added `requestAnimationFrame → dispatchEvent('resize')` tick at the end of the inline IIFE so scaleTable re-fires once layout settles ; tests — 6 FTs in test_bill_my_sign.py rewritten for the new flow: test_landing_renders_dry_hex_with_scan_sign_button pins the 1-chair hex + central SCAN SIGN + hidden picker grid; test_scan_sign_click_transitions_to_picker_phase pins the phase swap (hex hides, grid shows); test_click_thumbnail_shows_OK_btn_without_locking pins step 1 (focus + OK appears, no lock yet); test_OK_click_locks_thumbnail_and_enables_save_sign pins step 2 (lock + NVM appears + SAVE SIGN enables + persists to /billboard/ applet); test_NVM_click_deselects_and_disables_save_sign pins NVM unlock cycle; test_landing_previews_saved_sig_on_stage pins the on-load saved-sig preview behavior — all green visually verified across portrait + landscape
Code architected by Disco DeDisco <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-19 01:11:41 -04:00
|
|
|
|
.sig-overlay .sig-stage {
|
2026-04-08 11:52:49 -04:00
|
|
|
|
min-width: auto;
|
|
|
|
|
|
align-self: stretch; // fill full modal width so JS sizeSigCard() gets correct stageWidth
|
|
|
|
|
|
margin-left: 3rem;
|
|
|
|
|
|
}
|
My Sign picker iteration 3 — SCAN SIGN landing hex + OK/NVM thumbnail two-step + duoUser picker bg — Sprint 4a-cont — TDD
Two-phase picker. Landing phase renders the DRY 1-chair table hex w. a central SCAN SIGN .btn-primary; clicking it swaps the page to picker phase (hex hides, sig-card grid + always-present stage frame + SAVE SIGN visible). Stage frame previews the saved sig on landing if User.significator is set ; sig-card selection lifts the room's two-step OK/NVM-on-thumbnail pattern via `.sig-card-actions` w. `.sig-ok-btn`/`.sig-nvm-btn`: click thumb → `.sig-focused` (CSS reveals OK badge, stage previews card, no lock); click OK → `.sig-reserved--own` (CSS swaps OK→NVM badge, `.sig-stage--frozen` reveals stat block + FLIP, SAVE SIGN enables); click NVM → unlock + clear focus + disable SAVE SIGN ; SAVE SIGN form pinned `position:absolute; bottom:0.75rem; right:1rem` to .my-sign-stage so it stops shifting across the stage row when the stat block reveals on lock (was getting shoved left as a flex item alongside the stat-block reveal) ; .my-sign-page mirrors .room-page's `flex:1; min-height:0; display:flex; flex-direction:column` so the DRY hex container chain propagates real height down into #id_game_table for room.js's scaleTable() to compute against (was reading 0 + leaving the hex unscaled at 200×231 in a 360×320 scene) ; stage min-height gated to picker phase (`.my-sign-page[data-phase="picker"] .my-sign-stage`) — landing-phase stage is natural-sized so the hex centers in the bigger available area instead of being bottom-anchored by a 376px stage reservation ; picker-phase bg uses `rgba(var(--duoUser), 1)` so the transition from "hex face" → "card pile on felt" reads as a continuous surface rather than a context swap ; room sig-select media queries re-scoped to `.sig-overlay .sig-deck-grid` so they don't bleed into my-sign — my-sign gets its own breakpoint cascade: 6×3rem (portrait) → 9×3rem (≥900px landscape) → 18×3rem (≥1600px) → 18×5rem (≥2200px); thresholds bumped from sig-select's 1400/1800px so 18×col + sidebar/footer margins clear the viewport at fluid-rem ceiling (rem=22 → 18×3rem=1188px + 220px margins=1408, safe with 1600px floor) ; default `repeat(6, 1fr)` collapsed to 0-width when paired w. `align-self:center` (no parent width for `fr` to resolve against, hence the dotted-line miniscule cards in portrait); fixed `repeat(6, 3rem)` at portrait default fixes it ; SCAN SIGN font-size 0.75rem (vs .btn-primary's default 0.875rem) so the 2-line "SCAN/SIGN" label fits inside the 4rem circle without crowding the border — treated as a smaller variant via `#id_scan_sign_btn` rule scoped under .my-sign-landing ; room.js's scaleTable() runs on DOMContentLoaded before flex layout flushes (#id_game_table.clientWidth/Height read 0 at that moment) — added `requestAnimationFrame → dispatchEvent('resize')` tick at the end of the inline IIFE so scaleTable re-fires once layout settles ; tests — 6 FTs in test_bill_my_sign.py rewritten for the new flow: test_landing_renders_dry_hex_with_scan_sign_button pins the 1-chair hex + central SCAN SIGN + hidden picker grid; test_scan_sign_click_transitions_to_picker_phase pins the phase swap (hex hides, grid shows); test_click_thumbnail_shows_OK_btn_without_locking pins step 1 (focus + OK appears, no lock yet); test_OK_click_locks_thumbnail_and_enables_save_sign pins step 2 (lock + NVM appears + SAVE SIGN enables + persists to /billboard/ applet); test_NVM_click_deselects_and_disables_save_sign pins NVM unlock cycle; test_landing_previews_saved_sig_on_stage pins the on-load saved-sig preview behavior — all green visually verified across portrait + landscape
Code architected by Disco DeDisco <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-19 01:11:41 -04:00
|
|
|
|
.sig-overlay .sig-deck-grid {
|
tray apparatus scales w. fluid rem; sig-select 9×2 middling breakpoint — `$handle-exposed` was `48px` fixed while `#id_tray_btn` is `3rem`, so on big-rem viewports (`clamp(14px, 2.4vmin, 22px)` → up to 22px on tall screens, btn=66) the btn's flex parent (`#id_tray_handle`) shrank the btn from 66×66 → 48×66 via default `flex-shrink:1` in portrait (elongated tall ellipse), and in landscape the btn overflowed the 48px-tall handle vertically (extending 9px past viewport top in closed state); fix: `$handle-exposed: 3rem` matches the btn so it fills the exposed area at every rem; `$handle-rect-h: 4.5rem` (was `72px`) gives the visible rail thickness a touch of breathing room around the btn at every scale; landscape rules in the same partial that hard-coded `48px` / `72px` (`#id_tray_handle { height: 48px }`, `#id_tray_grip { bottom: calc(48px/2 - 0.125rem); width: 72px }`) now reference the variables so they track in sync — `tray.js _computeBounds()` swapped from `_btn.offsetWidth/Height` → `_handle.offsetWidth/Height` for the same reason: even with the SCSS fix, measuring the btn would re-introduce the offset when btn and handle drift (which they shouldn't now, but the handle is the layout-defining element so measure it directly); `id_kit_btn` added as fallback for `id_gear_btn` (which no longer renders on the room page) so the open-state landscape wrap height anchors to the bottom-right kit btn instead of the full viewport — `id_tray_handle` cached on the module via `_handle` ref alongside `_btn` and cleared in `reset()` ; sig-select grid jumped straight from 6 cols (narrow landscape) → 18 cols × 3rem at `min-width: 900px`, but 18×3rem + 7rem modal margins needs ~1376px to clear at rem=22 so the cards spilled off the sides on common 1280-wide laptops + the previous-era 9×2 middling layout had simply been dropped; new cascade in `_card-deck.scss` mirrors the comment's documented intent: 6 cols default landscape (row layout, stage beside grid) → 9 cols × 3rem at `min-width: 900px` (column layout, stage above grid) → 18 cols × 3rem at `min-width: 1400px` → 18 × 5rem at `min-width: 1800px` (unchanged) — verified in Claudezilla across iphone-14 portrait (rem=14, btn=42 square, handle right edge at viewport right), 816×826 portrait near-landscape (rem=19.6, btn=58.75 square no longer elongated), 1149×751 landscape mid (rem=18, btn=54 square at viewport top, 9×2 grid), 1789×1111 desktop XL (rem=22, btn=66 square at viewport top, 18×1 grid)
Code architected by Disco DeDisco <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-17 23:21:02 -04:00
|
|
|
|
grid-template-columns: repeat(9, 3rem);
|
2026-04-08 11:52:49 -04:00
|
|
|
|
align-self: center;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
tray apparatus scales w. fluid rem; sig-select 9×2 middling breakpoint — `$handle-exposed` was `48px` fixed while `#id_tray_btn` is `3rem`, so on big-rem viewports (`clamp(14px, 2.4vmin, 22px)` → up to 22px on tall screens, btn=66) the btn's flex parent (`#id_tray_handle`) shrank the btn from 66×66 → 48×66 via default `flex-shrink:1` in portrait (elongated tall ellipse), and in landscape the btn overflowed the 48px-tall handle vertically (extending 9px past viewport top in closed state); fix: `$handle-exposed: 3rem` matches the btn so it fills the exposed area at every rem; `$handle-rect-h: 4.5rem` (was `72px`) gives the visible rail thickness a touch of breathing room around the btn at every scale; landscape rules in the same partial that hard-coded `48px` / `72px` (`#id_tray_handle { height: 48px }`, `#id_tray_grip { bottom: calc(48px/2 - 0.125rem); width: 72px }`) now reference the variables so they track in sync — `tray.js _computeBounds()` swapped from `_btn.offsetWidth/Height` → `_handle.offsetWidth/Height` for the same reason: even with the SCSS fix, measuring the btn would re-introduce the offset when btn and handle drift (which they shouldn't now, but the handle is the layout-defining element so measure it directly); `id_kit_btn` added as fallback for `id_gear_btn` (which no longer renders on the room page) so the open-state landscape wrap height anchors to the bottom-right kit btn instead of the full viewport — `id_tray_handle` cached on the module via `_handle` ref alongside `_btn` and cleared in `reset()` ; sig-select grid jumped straight from 6 cols (narrow landscape) → 18 cols × 3rem at `min-width: 900px`, but 18×3rem + 7rem modal margins needs ~1376px to clear at rem=22 so the cards spilled off the sides on common 1280-wide laptops + the previous-era 9×2 middling layout had simply been dropped; new cascade in `_card-deck.scss` mirrors the comment's documented intent: 6 cols default landscape (row layout, stage beside grid) → 9 cols × 3rem at `min-width: 900px` (column layout, stage above grid) → 18 cols × 3rem at `min-width: 1400px` → 18 × 5rem at `min-width: 1800px` (unchanged) — verified in Claudezilla across iphone-14 portrait (rem=14, btn=42 square, handle right edge at viewport right), 816×826 portrait near-landscape (rem=19.6, btn=58.75 square no longer elongated), 1149×751 landscape mid (rem=18, btn=54 square at viewport top, 9×2 grid), 1789×1111 desktop XL (rem=22, btn=66 square at viewport top, 18×1 grid)
Code architected by Disco DeDisco <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-17 23:21:02 -04:00
|
|
|
|
@media (orientation: landscape) and (min-width: 1400px) {
|
|
|
|
|
|
// Wide landscape: 18-card single-row grid. 18×3rem + ~7rem modal margins
|
|
|
|
|
|
// clears the viewport here even at the fluid-rem ceiling (rem=22 → ~1376px).
|
My Sign picker iteration 3 — SCAN SIGN landing hex + OK/NVM thumbnail two-step + duoUser picker bg — Sprint 4a-cont — TDD
Two-phase picker. Landing phase renders the DRY 1-chair table hex w. a central SCAN SIGN .btn-primary; clicking it swaps the page to picker phase (hex hides, sig-card grid + always-present stage frame + SAVE SIGN visible). Stage frame previews the saved sig on landing if User.significator is set ; sig-card selection lifts the room's two-step OK/NVM-on-thumbnail pattern via `.sig-card-actions` w. `.sig-ok-btn`/`.sig-nvm-btn`: click thumb → `.sig-focused` (CSS reveals OK badge, stage previews card, no lock); click OK → `.sig-reserved--own` (CSS swaps OK→NVM badge, `.sig-stage--frozen` reveals stat block + FLIP, SAVE SIGN enables); click NVM → unlock + clear focus + disable SAVE SIGN ; SAVE SIGN form pinned `position:absolute; bottom:0.75rem; right:1rem` to .my-sign-stage so it stops shifting across the stage row when the stat block reveals on lock (was getting shoved left as a flex item alongside the stat-block reveal) ; .my-sign-page mirrors .room-page's `flex:1; min-height:0; display:flex; flex-direction:column` so the DRY hex container chain propagates real height down into #id_game_table for room.js's scaleTable() to compute against (was reading 0 + leaving the hex unscaled at 200×231 in a 360×320 scene) ; stage min-height gated to picker phase (`.my-sign-page[data-phase="picker"] .my-sign-stage`) — landing-phase stage is natural-sized so the hex centers in the bigger available area instead of being bottom-anchored by a 376px stage reservation ; picker-phase bg uses `rgba(var(--duoUser), 1)` so the transition from "hex face" → "card pile on felt" reads as a continuous surface rather than a context swap ; room sig-select media queries re-scoped to `.sig-overlay .sig-deck-grid` so they don't bleed into my-sign — my-sign gets its own breakpoint cascade: 6×3rem (portrait) → 9×3rem (≥900px landscape) → 18×3rem (≥1600px) → 18×5rem (≥2200px); thresholds bumped from sig-select's 1400/1800px so 18×col + sidebar/footer margins clear the viewport at fluid-rem ceiling (rem=22 → 18×3rem=1188px + 220px margins=1408, safe with 1600px floor) ; default `repeat(6, 1fr)` collapsed to 0-width when paired w. `align-self:center` (no parent width for `fr` to resolve against, hence the dotted-line miniscule cards in portrait); fixed `repeat(6, 3rem)` at portrait default fixes it ; SCAN SIGN font-size 0.75rem (vs .btn-primary's default 0.875rem) so the 2-line "SCAN/SIGN" label fits inside the 4rem circle without crowding the border — treated as a smaller variant via `#id_scan_sign_btn` rule scoped under .my-sign-landing ; room.js's scaleTable() runs on DOMContentLoaded before flex layout flushes (#id_game_table.clientWidth/Height read 0 at that moment) — added `requestAnimationFrame → dispatchEvent('resize')` tick at the end of the inline IIFE so scaleTable re-fires once layout settles ; tests — 6 FTs in test_bill_my_sign.py rewritten for the new flow: test_landing_renders_dry_hex_with_scan_sign_button pins the 1-chair hex + central SCAN SIGN + hidden picker grid; test_scan_sign_click_transitions_to_picker_phase pins the phase swap (hex hides, grid shows); test_click_thumbnail_shows_OK_btn_without_locking pins step 1 (focus + OK appears, no lock yet); test_OK_click_locks_thumbnail_and_enables_save_sign pins step 2 (lock + NVM appears + SAVE SIGN enables + persists to /billboard/ applet); test_NVM_click_deselects_and_disables_save_sign pins NVM unlock cycle; test_landing_previews_saved_sig_on_stage pins the on-load saved-sig preview behavior — all green visually verified across portrait + landscape
Code architected by Disco DeDisco <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-19 01:11:41 -04:00
|
|
|
|
.sig-overlay .sig-deck-grid {
|
tray apparatus scales w. fluid rem; sig-select 9×2 middling breakpoint — `$handle-exposed` was `48px` fixed while `#id_tray_btn` is `3rem`, so on big-rem viewports (`clamp(14px, 2.4vmin, 22px)` → up to 22px on tall screens, btn=66) the btn's flex parent (`#id_tray_handle`) shrank the btn from 66×66 → 48×66 via default `flex-shrink:1` in portrait (elongated tall ellipse), and in landscape the btn overflowed the 48px-tall handle vertically (extending 9px past viewport top in closed state); fix: `$handle-exposed: 3rem` matches the btn so it fills the exposed area at every rem; `$handle-rect-h: 4.5rem` (was `72px`) gives the visible rail thickness a touch of breathing room around the btn at every scale; landscape rules in the same partial that hard-coded `48px` / `72px` (`#id_tray_handle { height: 48px }`, `#id_tray_grip { bottom: calc(48px/2 - 0.125rem); width: 72px }`) now reference the variables so they track in sync — `tray.js _computeBounds()` swapped from `_btn.offsetWidth/Height` → `_handle.offsetWidth/Height` for the same reason: even with the SCSS fix, measuring the btn would re-introduce the offset when btn and handle drift (which they shouldn't now, but the handle is the layout-defining element so measure it directly); `id_kit_btn` added as fallback for `id_gear_btn` (which no longer renders on the room page) so the open-state landscape wrap height anchors to the bottom-right kit btn instead of the full viewport — `id_tray_handle` cached on the module via `_handle` ref alongside `_btn` and cleared in `reset()` ; sig-select grid jumped straight from 6 cols (narrow landscape) → 18 cols × 3rem at `min-width: 900px`, but 18×3rem + 7rem modal margins needs ~1376px to clear at rem=22 so the cards spilled off the sides on common 1280-wide laptops + the previous-era 9×2 middling layout had simply been dropped; new cascade in `_card-deck.scss` mirrors the comment's documented intent: 6 cols default landscape (row layout, stage beside grid) → 9 cols × 3rem at `min-width: 900px` (column layout, stage above grid) → 18 cols × 3rem at `min-width: 1400px` → 18 × 5rem at `min-width: 1800px` (unchanged) — verified in Claudezilla across iphone-14 portrait (rem=14, btn=42 square, handle right edge at viewport right), 816×826 portrait near-landscape (rem=19.6, btn=58.75 square no longer elongated), 1149×751 landscape mid (rem=18, btn=54 square at viewport top, 9×2 grid), 1789×1111 desktop XL (rem=22, btn=66 square at viewport top, 18×1 grid)
Code architected by Disco DeDisco <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-17 23:21:02 -04:00
|
|
|
|
grid-template-columns: repeat(18, 3rem);
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2026-04-08 11:52:49 -04:00
|
|
|
|
@media (orientation: landscape) and (min-width: 1800px) {
|
|
|
|
|
|
// Sig overlay: clear doubled sidebars (8rem each instead of 4rem/6rem)
|
|
|
|
|
|
.sig-overlay { padding-left: 8rem; padding-right: 8rem; }
|
My Sign picker iteration 3 — SCAN SIGN landing hex + OK/NVM thumbnail two-step + duoUser picker bg — Sprint 4a-cont — TDD
Two-phase picker. Landing phase renders the DRY 1-chair table hex w. a central SCAN SIGN .btn-primary; clicking it swaps the page to picker phase (hex hides, sig-card grid + always-present stage frame + SAVE SIGN visible). Stage frame previews the saved sig on landing if User.significator is set ; sig-card selection lifts the room's two-step OK/NVM-on-thumbnail pattern via `.sig-card-actions` w. `.sig-ok-btn`/`.sig-nvm-btn`: click thumb → `.sig-focused` (CSS reveals OK badge, stage previews card, no lock); click OK → `.sig-reserved--own` (CSS swaps OK→NVM badge, `.sig-stage--frozen` reveals stat block + FLIP, SAVE SIGN enables); click NVM → unlock + clear focus + disable SAVE SIGN ; SAVE SIGN form pinned `position:absolute; bottom:0.75rem; right:1rem` to .my-sign-stage so it stops shifting across the stage row when the stat block reveals on lock (was getting shoved left as a flex item alongside the stat-block reveal) ; .my-sign-page mirrors .room-page's `flex:1; min-height:0; display:flex; flex-direction:column` so the DRY hex container chain propagates real height down into #id_game_table for room.js's scaleTable() to compute against (was reading 0 + leaving the hex unscaled at 200×231 in a 360×320 scene) ; stage min-height gated to picker phase (`.my-sign-page[data-phase="picker"] .my-sign-stage`) — landing-phase stage is natural-sized so the hex centers in the bigger available area instead of being bottom-anchored by a 376px stage reservation ; picker-phase bg uses `rgba(var(--duoUser), 1)` so the transition from "hex face" → "card pile on felt" reads as a continuous surface rather than a context swap ; room sig-select media queries re-scoped to `.sig-overlay .sig-deck-grid` so they don't bleed into my-sign — my-sign gets its own breakpoint cascade: 6×3rem (portrait) → 9×3rem (≥900px landscape) → 18×3rem (≥1600px) → 18×5rem (≥2200px); thresholds bumped from sig-select's 1400/1800px so 18×col + sidebar/footer margins clear the viewport at fluid-rem ceiling (rem=22 → 18×3rem=1188px + 220px margins=1408, safe with 1600px floor) ; default `repeat(6, 1fr)` collapsed to 0-width when paired w. `align-self:center` (no parent width for `fr` to resolve against, hence the dotted-line miniscule cards in portrait); fixed `repeat(6, 3rem)` at portrait default fixes it ; SCAN SIGN font-size 0.75rem (vs .btn-primary's default 0.875rem) so the 2-line "SCAN/SIGN" label fits inside the 4rem circle without crowding the border — treated as a smaller variant via `#id_scan_sign_btn` rule scoped under .my-sign-landing ; room.js's scaleTable() runs on DOMContentLoaded before flex layout flushes (#id_game_table.clientWidth/Height read 0 at that moment) — added `requestAnimationFrame → dispatchEvent('resize')` tick at the end of the inline IIFE so scaleTable re-fires once layout settles ; tests — 6 FTs in test_bill_my_sign.py rewritten for the new flow: test_landing_renders_dry_hex_with_scan_sign_button pins the 1-chair hex + central SCAN SIGN + hidden picker grid; test_scan_sign_click_transitions_to_picker_phase pins the phase swap (hex hides, grid shows); test_click_thumbnail_shows_OK_btn_without_locking pins step 1 (focus + OK appears, no lock yet); test_OK_click_locks_thumbnail_and_enables_save_sign pins step 2 (lock + NVM appears + SAVE SIGN enables + persists to /billboard/ applet); test_NVM_click_deselects_and_disables_save_sign pins NVM unlock cycle; test_landing_previews_saved_sig_on_stage pins the on-load saved-sig preview behavior — all green visually verified across portrait + landscape
Code architected by Disco DeDisco <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-19 01:11:41 -04:00
|
|
|
|
.sig-overlay .sig-stage {
|
2026-04-08 11:52:49 -04:00
|
|
|
|
align-self: stretch; // fill full modal width so JS sizeSigCard() gets correct stageWidth
|
|
|
|
|
|
margin-left: 3rem;
|
|
|
|
|
|
}
|
My Sign picker iteration 3 — SCAN SIGN landing hex + OK/NVM thumbnail two-step + duoUser picker bg — Sprint 4a-cont — TDD
Two-phase picker. Landing phase renders the DRY 1-chair table hex w. a central SCAN SIGN .btn-primary; clicking it swaps the page to picker phase (hex hides, sig-card grid + always-present stage frame + SAVE SIGN visible). Stage frame previews the saved sig on landing if User.significator is set ; sig-card selection lifts the room's two-step OK/NVM-on-thumbnail pattern via `.sig-card-actions` w. `.sig-ok-btn`/`.sig-nvm-btn`: click thumb → `.sig-focused` (CSS reveals OK badge, stage previews card, no lock); click OK → `.sig-reserved--own` (CSS swaps OK→NVM badge, `.sig-stage--frozen` reveals stat block + FLIP, SAVE SIGN enables); click NVM → unlock + clear focus + disable SAVE SIGN ; SAVE SIGN form pinned `position:absolute; bottom:0.75rem; right:1rem` to .my-sign-stage so it stops shifting across the stage row when the stat block reveals on lock (was getting shoved left as a flex item alongside the stat-block reveal) ; .my-sign-page mirrors .room-page's `flex:1; min-height:0; display:flex; flex-direction:column` so the DRY hex container chain propagates real height down into #id_game_table for room.js's scaleTable() to compute against (was reading 0 + leaving the hex unscaled at 200×231 in a 360×320 scene) ; stage min-height gated to picker phase (`.my-sign-page[data-phase="picker"] .my-sign-stage`) — landing-phase stage is natural-sized so the hex centers in the bigger available area instead of being bottom-anchored by a 376px stage reservation ; picker-phase bg uses `rgba(var(--duoUser), 1)` so the transition from "hex face" → "card pile on felt" reads as a continuous surface rather than a context swap ; room sig-select media queries re-scoped to `.sig-overlay .sig-deck-grid` so they don't bleed into my-sign — my-sign gets its own breakpoint cascade: 6×3rem (portrait) → 9×3rem (≥900px landscape) → 18×3rem (≥1600px) → 18×5rem (≥2200px); thresholds bumped from sig-select's 1400/1800px so 18×col + sidebar/footer margins clear the viewport at fluid-rem ceiling (rem=22 → 18×3rem=1188px + 220px margins=1408, safe with 1600px floor) ; default `repeat(6, 1fr)` collapsed to 0-width when paired w. `align-self:center` (no parent width for `fr` to resolve against, hence the dotted-line miniscule cards in portrait); fixed `repeat(6, 3rem)` at portrait default fixes it ; SCAN SIGN font-size 0.75rem (vs .btn-primary's default 0.875rem) so the 2-line "SCAN/SIGN" label fits inside the 4rem circle without crowding the border — treated as a smaller variant via `#id_scan_sign_btn` rule scoped under .my-sign-landing ; room.js's scaleTable() runs on DOMContentLoaded before flex layout flushes (#id_game_table.clientWidth/Height read 0 at that moment) — added `requestAnimationFrame → dispatchEvent('resize')` tick at the end of the inline IIFE so scaleTable re-fires once layout settles ; tests — 6 FTs in test_bill_my_sign.py rewritten for the new flow: test_landing_renders_dry_hex_with_scan_sign_button pins the 1-chair hex + central SCAN SIGN + hidden picker grid; test_scan_sign_click_transitions_to_picker_phase pins the phase swap (hex hides, grid shows); test_click_thumbnail_shows_OK_btn_without_locking pins step 1 (focus + OK appears, no lock yet); test_OK_click_locks_thumbnail_and_enables_save_sign pins step 2 (lock + NVM appears + SAVE SIGN enables + persists to /billboard/ applet); test_NVM_click_deselects_and_disables_save_sign pins NVM unlock cycle; test_landing_previews_saved_sig_on_stage pins the on-load saved-sig preview behavior — all green visually verified across portrait + landscape
Code architected by Disco DeDisco <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-19 01:11:41 -04:00
|
|
|
|
.sig-overlay .sig-deck-grid {
|
2026-04-08 11:52:49 -04:00
|
|
|
|
grid-template-columns: repeat(18, 5rem);
|
|
|
|
|
|
align-self: center;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// Room menu: base right: 0.5rem (same-specificity ID rule) overrides _applets.scss
|
|
|
|
|
|
// XL block because _card-deck.scss is imported after _applets.scss. Re-declare here to win the cascade.
|
|
|
|
|
|
#id_room_menu { right: 2.5rem; }
|
|
|
|
|
|
}
|
|
|
|
|
|
|
My Sign picker iteration 3 — SCAN SIGN landing hex + OK/NVM thumbnail two-step + duoUser picker bg — Sprint 4a-cont — TDD
Two-phase picker. Landing phase renders the DRY 1-chair table hex w. a central SCAN SIGN .btn-primary; clicking it swaps the page to picker phase (hex hides, sig-card grid + always-present stage frame + SAVE SIGN visible). Stage frame previews the saved sig on landing if User.significator is set ; sig-card selection lifts the room's two-step OK/NVM-on-thumbnail pattern via `.sig-card-actions` w. `.sig-ok-btn`/`.sig-nvm-btn`: click thumb → `.sig-focused` (CSS reveals OK badge, stage previews card, no lock); click OK → `.sig-reserved--own` (CSS swaps OK→NVM badge, `.sig-stage--frozen` reveals stat block + FLIP, SAVE SIGN enables); click NVM → unlock + clear focus + disable SAVE SIGN ; SAVE SIGN form pinned `position:absolute; bottom:0.75rem; right:1rem` to .my-sign-stage so it stops shifting across the stage row when the stat block reveals on lock (was getting shoved left as a flex item alongside the stat-block reveal) ; .my-sign-page mirrors .room-page's `flex:1; min-height:0; display:flex; flex-direction:column` so the DRY hex container chain propagates real height down into #id_game_table for room.js's scaleTable() to compute against (was reading 0 + leaving the hex unscaled at 200×231 in a 360×320 scene) ; stage min-height gated to picker phase (`.my-sign-page[data-phase="picker"] .my-sign-stage`) — landing-phase stage is natural-sized so the hex centers in the bigger available area instead of being bottom-anchored by a 376px stage reservation ; picker-phase bg uses `rgba(var(--duoUser), 1)` so the transition from "hex face" → "card pile on felt" reads as a continuous surface rather than a context swap ; room sig-select media queries re-scoped to `.sig-overlay .sig-deck-grid` so they don't bleed into my-sign — my-sign gets its own breakpoint cascade: 6×3rem (portrait) → 9×3rem (≥900px landscape) → 18×3rem (≥1600px) → 18×5rem (≥2200px); thresholds bumped from sig-select's 1400/1800px so 18×col + sidebar/footer margins clear the viewport at fluid-rem ceiling (rem=22 → 18×3rem=1188px + 220px margins=1408, safe with 1600px floor) ; default `repeat(6, 1fr)` collapsed to 0-width when paired w. `align-self:center` (no parent width for `fr` to resolve against, hence the dotted-line miniscule cards in portrait); fixed `repeat(6, 3rem)` at portrait default fixes it ; SCAN SIGN font-size 0.75rem (vs .btn-primary's default 0.875rem) so the 2-line "SCAN/SIGN" label fits inside the 4rem circle without crowding the border — treated as a smaller variant via `#id_scan_sign_btn` rule scoped under .my-sign-landing ; room.js's scaleTable() runs on DOMContentLoaded before flex layout flushes (#id_game_table.clientWidth/Height read 0 at that moment) — added `requestAnimationFrame → dispatchEvent('resize')` tick at the end of the inline IIFE so scaleTable re-fires once layout settles ; tests — 6 FTs in test_bill_my_sign.py rewritten for the new flow: test_landing_renders_dry_hex_with_scan_sign_button pins the 1-chair hex + central SCAN SIGN + hidden picker grid; test_scan_sign_click_transitions_to_picker_phase pins the phase swap (hex hides, grid shows); test_click_thumbnail_shows_OK_btn_without_locking pins step 1 (focus + OK appears, no lock yet); test_OK_click_locks_thumbnail_and_enables_save_sign pins step 2 (lock + NVM appears + SAVE SIGN enables + persists to /billboard/ applet); test_NVM_click_deselects_and_disables_save_sign pins NVM unlock cycle; test_landing_previews_saved_sig_on_stage pins the on-load saved-sig preview behavior — all green visually verified across portrait + landscape
Code architected by Disco DeDisco <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-19 01:11:41 -04:00
|
|
|
|
// ─── My Sign picker grid ────────────────────────────────────────────────────
|
|
|
|
|
|
// align-self:center horizontally centers the shrink-to-content grid in
|
|
|
|
|
|
// .my-sign-page's flex column; overflow:visible avoids the modal's hidden
|
|
|
|
|
|
// clip. Col counts ramp up at wider viewports — sig-select's breakpoints
|
|
|
|
|
|
// are tuned for the modal's width budget so we use our own thresholds that
|
|
|
|
|
|
// account for the navbar/footer sidebars (~5rem each) eating viewport width.
|
|
|
|
|
|
// Portrait: fixed rem cols (default repeat(6, 1fr) collapses to 0 width
|
|
|
|
|
|
// w. align-self:center because 1fr has no defined parent to fr against).
|
|
|
|
|
|
.my-sign-deck-grid {
|
|
|
|
|
|
align-self: center;
|
|
|
|
|
|
margin: 1rem auto;
|
|
|
|
|
|
overflow: visible;
|
|
|
|
|
|
grid-template-columns: repeat(6, 3rem);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
@media (orientation: landscape) and (min-width: 900px) {
|
|
|
|
|
|
// Middling landscape: 9-card row × 2 (mirrors sig-select's middling step).
|
|
|
|
|
|
.my-sign-deck-grid {
|
|
|
|
|
|
grid-template-columns: repeat(9, 3rem);
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
@media (orientation: landscape) and (min-width: 1600px) {
|
|
|
|
|
|
// Wide landscape: 18-card single row. Bumped from sig-select's 1400px so
|
|
|
|
|
|
// 18×3rem + the doubled-sidebar margins (~10rem) still clears the viewport
|
|
|
|
|
|
// at the fluid-rem ceiling (rem=22 → 18×3rem=1188px + 220px margins = 1408,
|
|
|
|
|
|
// safe with 1600px floor).
|
|
|
|
|
|
.my-sign-deck-grid {
|
|
|
|
|
|
grid-template-columns: repeat(18, 3rem);
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
@media (orientation: landscape) and (min-width: 2200px) {
|
|
|
|
|
|
// XL landscape: 18×5rem. Bumped from sig-select's 1800px — 18×5rem=1980px
|
|
|
|
|
|
// at rem=22 needs ~2200px viewport after sidebar/footer clearance.
|
|
|
|
|
|
.my-sign-deck-grid {
|
|
|
|
|
|
grid-template-columns: repeat(18, 5rem);
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
btn-primary label renames + stage-card polarity color refinements — two interleaved threads from one session, committing together since both touch sig + sea stage cards ; LABEL RENAMES: PICK SIGS → SCAN SIGS (room.html #id_pick_sigs_btn), PICK SKY → CAST SKY (room.html #id_pick_sky_btn × 2), PICK SEA → DRAW SEA (room.html #id_pick_sea_btn), TAKE SIG → SAVE SIG (sig-select.js _takeSigBtn.textContent × 2 callsites + section comment) — Element IDs (id_pick_sky_btn etc.), URL names (epic:pick_sigs, epic:pick_sky), and Python state enums (TableStatus.PICK_SKY, PICK_SEA, SIG_SELECT) intentionally retained as stable identifiers; the renamed text is purely the .btn-primary user-facing label ; FT + IT mentions of the old labels swept in test_game_room_select_{sig,sky,sea,role}.py, test_billboard.py, setup_sea_session.py mgmt cmd, apps/epic/{views,utils,models,tasks,tests/integrated/test_views}.py, SigSelectSpec.js, sky_overlay/sea_overlay/dashboard/sky.html, _card-deck.scss, _sky.scss — all docstring/comment references updated for cascade-grep cleanliness ; STAGE-CARD COLOR + CLASS REFINEMENTS (earlier in session): sig-stage card text colour split per polarity — gravity gets --terUser on .fan-card-name + .fan-card-reversal-{name,qualifier} + .sig-qualifier-{above,below}, levity gets --quiUser on the same five slots; all selectors prefixed w. .sig-stage-card to match the 0,4,0 specificity of the default `.sig-stage .sig-stage-card .fan-card-face .sig-qualifier-*` rule (without the prefix the polarity overrides lose the cascade — .sig-qualifier-below was visibly stuck on the default --quiUser) ; .stat-face-label gets polarity-inverse colours — gravity stat-block bg is --secUser (opposite of card's --priUser) so the label takes --quiUser to stay legible; levity is the symmetric flip (label = --terUser on --priUser stat-block bg) ; levity card title/qualifier drop-shadow swapped from rgba(0,0,0,…) → rgba(255,255,255,…) — dark drop reads as harsh smudge against the inverted-frame levity --secUser bg; applied to both sig-overlay[data-polarity="levity"] stage card AND sea-stage--levity via $_sea-title-shadow-levity (former shared $_sea-title-shadow split into per-polarity {levity,gravity} variants) ; reversal-face class/content alignment so each `.fan-card-reversal-*` class always carries its semantic content — DOM order per arcana type controls visual layout after the 180° SPIN (DOM-second appears visually on top): Major → title in .fan-card-reversal-name @ DOM-second (visually top after spin), qualifier in .fan-card-reversal-qualifier @ DOM-first; Non-major → title in .fan-card-reversal-name @ DOM-first (visually bottom after spin), qualifier in .fan-card-reversal-qualifier @ DOM-second (preserves the original "qualifier word reads first after spin" layout for Middle/Minor arcana — e.g. "Relieving / Eight of Crowns" not "Eight of Crowns / Relieving") ; _tarot_fan.html renders per-arcana DOM order directly (Django template branches handle both layouts); sig + sea overlays render a fixed two-`<p>` skeleton (one DOM order) so stage-card.js's populator dynamically rewrites the two `<p>`s' className per arcana — Major/override branch flips DOM-second to .fan-card-reversal-name + content, DOM-first to .fan-card-reversal-qualifier; non-major branch keeps DOM-first as .fan-card-reversal-name + title, DOM-second as .fan-card-reversal-qualifier + reversalQualifier-or-polarity-fallback ; SigSelectSpec.js + SeaDealSpec.js fixtures + Major reversed-face assertion updated for the new semantic — TDD
Code architected by Disco DeDisco <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-18 00:25:10 -04:00
|
|
|
|
// ── DRAW SEA overlay ─────────────────────────────────────────────────────────
|
rename natus → sky across the codebase — natal chart abstraction is now sky throughout, since chart inputs aren't birthday-gated
Mechanical rename: 5 files (sky-wheel.js, _sky.scss, _sky_overlay.html, SkyWheelSpec.js x2), 24 in-place edits across templates/views/urls/SCSS/JS/tests/CLAUDE.md. URL names epic:natus_save → epic:sky_save (epic namespaced, no clash w. dashboard:sky_save), JS module NatusWheel → SkyWheel, DOM ids id_natus_* → id_sky_*, BEM classes natus-* → sky-*, dashboard sky_natus_data/sky_natus_preview collapsed to sky_data/sky_preview_data. No DB migration needed (User.sky_chart_data + GameEvent.SKY_SAVED already used sky-prefix). 778 ITs + Jasmine green.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-04 20:36:15 -04:00
|
|
|
|
// Mirrors .sky-* structure but with columns reversed:
|
2026-04-27 01:02:01 -04:00
|
|
|
|
// left = transparent (Celtic Cross card positions)
|
|
|
|
|
|
// right = rgba(--priUser) opaque (spread select)
|
|
|
|
|
|
|
|
|
|
|
|
.sea-backdrop {
|
|
|
|
|
|
display: none;
|
|
|
|
|
|
position: fixed;
|
|
|
|
|
|
inset: 0;
|
|
|
|
|
|
background: rgba(0, 0, 0, 0.75);
|
|
|
|
|
|
backdrop-filter: blur(4px);
|
|
|
|
|
|
z-index: 200;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
html.sea-open .sea-backdrop { display: block; }
|
|
|
|
|
|
|
|
|
|
|
|
.sea-overlay {
|
|
|
|
|
|
display: none;
|
|
|
|
|
|
position: fixed;
|
|
|
|
|
|
inset: 0;
|
|
|
|
|
|
z-index: 201;
|
|
|
|
|
|
overflow-y: auto;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
html.sea-open .sea-overlay { display: flex; }
|
|
|
|
|
|
|
|
|
|
|
|
.sea-modal-wrap {
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
width: 90vw;
|
|
|
|
|
|
max-width: 60rem;
|
|
|
|
|
|
max-height: 90vh;
|
|
|
|
|
|
margin: auto;
|
|
|
|
|
|
opacity: 0;
|
|
|
|
|
|
transform: translateY(1.5rem);
|
|
|
|
|
|
transition: opacity 0.25s, transform 0.25s;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
html.sea-open .sea-modal-wrap {
|
|
|
|
|
|
opacity: 1;
|
|
|
|
|
|
transform: translateY(0);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.sea-modal {
|
|
|
|
|
|
border-radius: 0.5rem;
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.sea-modal-header {
|
|
|
|
|
|
padding: 0.75rem 1.25rem;
|
|
|
|
|
|
background: rgba(var(--priUser), 1);
|
|
|
|
|
|
|
|
|
|
|
|
h2 { font-size: 1.4rem; margin: 0; }
|
|
|
|
|
|
p { margin: 0.2rem 0 0; font-size: 0.85rem; opacity: 0.8; }
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.sea-modal-body {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
min-height: 20rem;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// ── Cards column (transparent / left) ────────────────────────────────────────
|
|
|
|
|
|
|
|
|
|
|
|
.sea-cards-col {
|
|
|
|
|
|
flex: 1 1 55%;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
padding: 1.5rem;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.sea-cross {
|
|
|
|
|
|
display: grid;
|
|
|
|
|
|
grid-template-areas:
|
|
|
|
|
|
". crown . "
|
2026-04-29 14:19:30 -04:00
|
|
|
|
"leave core loom "
|
|
|
|
|
|
". lay . ";
|
2026-04-27 01:02:01 -04:00
|
|
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
|
|
|
|
grid-template-rows: auto auto auto;
|
|
|
|
|
|
gap: 0.5rem;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
justify-items: center;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2026-04-29 14:19:30 -04:00
|
|
|
|
.sea-crucifix-cell { display: flex; align-items: center; justify-content: center; }
|
2026-04-27 01:02:01 -04:00
|
|
|
|
.sea-pos-crown { grid-area: crown; }
|
2026-04-29 14:19:30 -04:00
|
|
|
|
.sea-pos-leave { grid-area: leave; }
|
|
|
|
|
|
.sea-pos-core { grid-area: core; }
|
|
|
|
|
|
.sea-pos-loom { grid-area: loom; }
|
|
|
|
|
|
.sea-pos-lay { grid-area: lay; }
|
2026-04-27 01:02:01 -04:00
|
|
|
|
|
|
|
|
|
|
$sea-card-w: 4rem;
|
|
|
|
|
|
$sea-card-h: 6.5rem;
|
|
|
|
|
|
|
|
|
|
|
|
.sea-card-slot {
|
|
|
|
|
|
width: $sea-card-w;
|
|
|
|
|
|
height: $sea-card-h;
|
PICK SEA Sprint C: sea stage card viewer — FLIP in, SPIN/FYI, deposit/re-expand — TDD
- sea.js: SeaDeal module — openStage() shows big card viewer w. flip-in animation;
SPIN toggles stage-card--reversed; FYI shows energies/operations (Energy/Operation
titles, PRV/NXT nav); backdrop click deposits card to slot; click deposited slot
re-opens stage; resetHand() clears hand on DEL
- sea_deck view: adds name_group/name_title/reversal/keywords_upright/keywords_reversed/
energies/operations to each card dict (full sig-select stage data set)
- _sea_overlay.html: data-sea-user-polarity attr; sea stage HTML (sig-stage-card shell
+ fan-card-face-upright/reversal structure + sea-stat-block w. SPIN/FYI/PRV/NXT);
FLIP click calls SeaDeal.openStage(); _fillPos removed (sea.js handles slot fill);
_reset calls SeaDeal.resetHand()
- room.html: sea.js included alongside sig-select.js
- _card-deck.scss: sea-stage layout (fixed overlay, backdrop, content row); sea-stage-card
w. @keyframes sea-flip-in (3D rotateY perspective); sea-stat-block scoped styles
incl. SPIN/FYI btns, stat faces, sig-info FYI panel
- SeaDealSpec.js: 20 Jasmine specs — openStage, SPIN, FYI, backdrop dismiss, slot re-expand
Code architected by Disco DeDisco <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-29 01:12:06 -04:00
|
|
|
|
background-color: rgba(var(--duoUser), 1);
|
|
|
|
|
|
border: 0.15rem dashed rgba(var(--terUser), 1);
|
|
|
|
|
|
box-shadow: 0 0 2px rgba(var(--priUser), 0.5);
|
2026-04-27 01:02:01 -04:00
|
|
|
|
border-radius: 0.3rem;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
font-size: 0.6rem;
|
|
|
|
|
|
color: rgba(var(--terUser), 0.6);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.sea-card-slot--crossing {
|
2026-04-29 02:30:59 -04:00
|
|
|
|
// Keep portrait dimensions; rotate(90deg) in .sea-pos-cross supplies the landscape visual.
|
|
|
|
|
|
// Swapping w/h here caused flex-shrink to squish the longer edge to fit the 4rem container.
|
|
|
|
|
|
width: $sea-card-w;
|
|
|
|
|
|
height: $sea-card-h;
|
2026-04-27 01:02:01 -04:00
|
|
|
|
}
|
|
|
|
|
|
|
2026-04-28 23:02:49 -04:00
|
|
|
|
.sea-card-slot--filled {
|
2026-04-29 02:30:59 -04:00
|
|
|
|
// Start invisible; transition to .sea-card-slot--visible on deposit
|
|
|
|
|
|
opacity: 0;
|
|
|
|
|
|
transition: opacity 1s ease;
|
|
|
|
|
|
border: 0.15rem solid transparent;
|
|
|
|
|
|
border-radius: 0.3rem;
|
2026-04-28 23:30:07 -04:00
|
|
|
|
flex-direction: column;
|
2026-04-29 02:30:59 -04:00
|
|
|
|
gap: 0.15rem;
|
2026-04-28 23:30:07 -04:00
|
|
|
|
|
2026-04-29 02:30:59 -04:00
|
|
|
|
.fan-corner-rank { font-size: 1.15rem; font-weight: 700; line-height: 1; }
|
2026-04-28 23:30:07 -04:00
|
|
|
|
i { font-size: 0.9rem; }
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2026-04-29 02:30:59 -04:00
|
|
|
|
// Levity drawn card — secUser bg, priUser text + border (matches stage card polarity)
|
2026-04-28 23:30:07 -04:00
|
|
|
|
.sea-card-slot--filled.sea-card-slot--levity {
|
2026-04-29 02:30:59 -04:00
|
|
|
|
color: rgba(var(--priUser), 0.9);
|
2026-04-29 11:47:50 -04:00
|
|
|
|
background: rgba(var(--secUser), 1);
|
2026-04-29 02:30:59 -04:00
|
|
|
|
border-color: rgba(var(--priUser), 1);
|
2026-04-28 23:30:07 -04:00
|
|
|
|
}
|
2026-04-29 02:30:59 -04:00
|
|
|
|
// Gravity drawn card — priUser bg, secUser text + border
|
2026-04-28 23:30:07 -04:00
|
|
|
|
.sea-card-slot--filled.sea-card-slot--gravity {
|
2026-04-29 02:30:59 -04:00
|
|
|
|
color: rgba(var(--secUser), 0.9);
|
2026-04-29 11:47:50 -04:00
|
|
|
|
background: rgba(var(--priUser), 1);
|
2026-04-29 02:30:59 -04:00
|
|
|
|
border-color: rgba(var(--secUser), 0.6);
|
2026-04-28 23:02:49 -04:00
|
|
|
|
}
|
|
|
|
|
|
|
2026-05-01 00:11:40 -04:00
|
|
|
|
// Reversed — pre-rolled by sea_deck server-side. Rotate the whole slot
|
|
|
|
|
|
// (background + border + content) so the rank/icon stacking order also
|
|
|
|
|
|
// flips (rank-top + icon-bottom upright → icon-top + rank-bottom reversed),
|
|
|
|
|
|
// not just each character upside-down in place.
|
|
|
|
|
|
.sea-card-slot--reversed { transform: rotate(180deg); }
|
|
|
|
|
|
|
|
|
|
|
|
// Cross-position adds 90° already; reversed cross combines to 270°. Higher
|
|
|
|
|
|
// specificity than the .sea-pos-cross .sea-card-slot rule so it wins.
|
|
|
|
|
|
.sea-pos-cross .sea-card-slot--reversed { transform: rotate(270deg); }
|
|
|
|
|
|
|
|
|
|
|
|
// Long Roman numerals (≥ 5 chars: XVIII, XXIII, XXVIII, XXXIII, XXXVIII,
|
|
|
|
|
|
// XLIII, XLVIII) — squeeze horizontally via scaleX so they fit the slot
|
|
|
|
|
|
// without dropping font-size (height stays the same). Class added in
|
|
|
|
|
|
// _fillSlot when card.corner_rank.length >= 5. Slot-level reversed rotation
|
|
|
|
|
|
// already carries the rank along, so scaleX is the only inner transform
|
|
|
|
|
|
// regardless of reversal state.
|
|
|
|
|
|
.sea-card-slot--rank-long .fan-corner-rank {
|
|
|
|
|
|
display: inline-block;
|
|
|
|
|
|
transform: scaleX(0.7);
|
|
|
|
|
|
letter-spacing: -0.05em;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2026-04-29 02:30:59 -04:00
|
|
|
|
// Deposited — fully opaque by default; Cover/Cross are semi-transparent
|
2026-04-29 11:47:50 -04:00
|
|
|
|
.sea-card-slot--visible { opacity: 1; transition: opacity 1s ease, box-shadow 0.15s ease; }
|
|
|
|
|
|
|
|
|
|
|
|
@keyframes sea-cover-appear {
|
|
|
|
|
|
0% { opacity: 0; }
|
|
|
|
|
|
50% { opacity: 1; }
|
|
|
|
|
|
100% { opacity: 0.3; }
|
|
|
|
|
|
}
|
2026-04-29 02:30:59 -04:00
|
|
|
|
|
2026-04-29 11:47:50 -04:00
|
|
|
|
@keyframes sea-cross-appear {
|
|
|
|
|
|
0% { opacity: 0; }
|
|
|
|
|
|
50% { opacity: 1; }
|
|
|
|
|
|
100% { opacity: 0.15; }
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.sea-pos-cover .sea-card-slot--visible { opacity: 0.3; animation: sea-cover-appear 2s ease; }
|
|
|
|
|
|
.sea-pos-cross .sea-card-slot--visible { opacity: 0.15; animation: sea-cross-appear 2s ease; }
|
2026-04-29 02:30:59 -04:00
|
|
|
|
|
|
|
|
|
|
// Hover: reveal fully (snappy)
|
|
|
|
|
|
.sea-pos-cover .sea-card-slot--visible:hover,
|
|
|
|
|
|
.sea-pos-cross .sea-card-slot--visible:hover { opacity: 1; transition: opacity 0.15s ease; }
|
|
|
|
|
|
|
2026-04-29 11:47:50 -04:00
|
|
|
|
// Focused (first tap): persist at opacity 1 + selection glow until modal opens
|
|
|
|
|
|
.sea-card-slot--focused {
|
|
|
|
|
|
opacity: 1 !important;
|
|
|
|
|
|
transition: opacity 0.15s ease, box-shadow 0.15s ease;
|
2026-04-29 11:49:26 -04:00
|
|
|
|
box-shadow: 0 0 0.5rem 0.25rem rgba(var(--ninUser), 0.35), 0 0 0.4rem rgba(0, 0, 0, 0.85);
|
2026-04-29 11:47:50 -04:00
|
|
|
|
}
|
2026-04-29 02:30:59 -04:00
|
|
|
|
|
2026-04-29 14:19:30 -04:00
|
|
|
|
// Cover + Cross — absolutely overlaid on the Sig card in .sea-pos-core
|
|
|
|
|
|
.sea-pos-core { position: relative; }
|
2026-04-28 23:02:49 -04:00
|
|
|
|
|
|
|
|
|
|
.sea-pos-cover,
|
|
|
|
|
|
.sea-pos-cross {
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
inset: 0;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
pointer-events: none;
|
2026-04-29 02:30:59 -04:00
|
|
|
|
|
2026-04-28 23:02:49 -04:00
|
|
|
|
.sea-card-slot { pointer-events: auto; }
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2026-04-29 02:30:59 -04:00
|
|
|
|
.sea-pos-cover { z-index: 3; } // above sig (z-index: 2)
|
|
|
|
|
|
.sea-pos-cross { z-index: 4; } // above cover
|
My Sea iter-4a follow-up batch: modal port + draw polish + label positioning + Major Arcana fix — TDD
User-driven bug-squash + UX-polish cycle on top of iter 4a (ca2a62f). All 14 fixes ship behind the same iter-4a banner since they close the substage's UX gaps without expanding scope to iter 4b's persistence layer.
SeaDeal modal port — extracted apps/gameboard/_partials/_sea_stage.html shared by gameroom + my-sea; aliased .my-sea-picker w. id=id_sea_overlay so SeaDeal.init() finds it; FLIP click → SeaDeal.openStage delegation instead of bare _fillSlot. Fixes the user-reported 'thumbnail disappears' bug — slot was landing at opacity 0 (.--filled w.o .--visible) because SeaDeal's _hideStage (which adds --visible on modal dismiss) was never running. 3 new FTs cover the modal flow.
Spread lock + DEL reshuffle — _lockSpread/_unlockSpread toggle .sea-select--locked class on the combobox; first deposit locks, _resetHand unlocks. _reshuffleDeck Fisher-Yates over combined piles + re-rolls 25% reversal axis on DEL so successive DELs don't re-deal the same hand. Verified Claudezilla: 3 DEL cycles produced distinct lay cards (150 → 114 → 155).
Cover/cross empty slots — subtle dotted outline (transparent bg + 0.25 alpha border) w. --duoUser mask reveal on hover/touch. Per the user spec; rule lives in _card-deck.scss (shared between gameroom + my-sea). Plus matching label-opacity (0.25 idle → 0.6 hover) via CSS :hover ancestor propagation.
DOS spec — Solution moved from cover → crown per user correction. DRAW_ORDER ['loom', 'cross', 'crown']; POSITION_LABELS {loom: Desire, cross: Obstacle, crown: Solution}; SCSS hide list flipped from [leave, crown, lay] → [leave, cover, lay]; FT/IT assertions updated.
SAO → DOS soft-reload bug — Firefox autofill on hidden input restored the previous-session DOS value, tripping combobox.js's change-event guard. Fix: autocomplete=off + force-sync hidden.value from server-rendered aria-selected option in init. Captured as feedback_firefox_autofill_hidden_inputs (generalizable trap).
.sea-pos-label outside .sea-card-slot — moved label to be a sibling of the slot in the cell, so SeaDeal innerHTML clobber on draw doesn't erase it. Per-position absolute positioning touching slot borders: crown/cover above (translate -50%, 0.1rem, scaleY 1.2); lay/cross below (translate -50%, -0.1rem, scaleY 1.2); leave left, CCW (writing-mode vertical-rl + rotate 180deg + scaleX 1.2); loom right, CW (writing-mode vertical-rl + scaleX 1.2). scaleX for rotated labels (not scaleY) — perpendicular to text-flow is the visible-width direction after rotation. .my-sea-cross gap bumped to 1.75rem for label clearance.
Escape Velocity label swaps — POSITION_LABELS for escape-velocity: {crown: Crown, leave: Lay, cover: Cover, cross: Cross, loom: Loom, lay: Leave}. Replaces the Waite-Smith Behind/Beneath/Before per user spec.
SPREAD dropdown portal — .my-sea-form-col .sea-form-main { overflow: visible } + .sea-select-list { z-index: 1000 } so the dropdown extends past the form-main scroll area + sits above the picker stacking ints. Gameroom .sea-form-main still scrolls (only my-sea opts out).
Major Arcana polarity-split rendering — added 9 missing _card_dict keys to my-sea's _my_sea_deck_data to match gameroom epic.views.sea_deck's contract: levity_emanation, gravity_emanation, levity_reversal, gravity_reversal, italic_word, keywords_upright, keywords_reversed, energies, operations. Without these StageCard.populateCard falls through to plain name_title for trumps 19-21 + cards 48-49. Iter 4b cleanup candidate: extract apps.epic.utils.card_dict() to DRY the now-identical helpers.
Tests deferred — user explicitly belayed FT runs during the bug-fix substage. Iter 4b will re-establish a green sweep before its commit lands.
Code architected by Disco DeDisco <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-19 22:02:27 -04:00
|
|
|
|
// Empty Cover/Cross slots — subtle dotted outline (no fill) so the
|
|
|
|
|
|
// underlying Sig card shows through. Hovering/touching reveals the
|
|
|
|
|
|
// full --duoUser mask, opaquing the slot + obscuring the Sig behind.
|
|
|
|
|
|
// Border + label dim to 0.25 alpha default; bounce to full on hover.
|
|
|
|
|
|
// The filled-slot hover behavior (opacity 0.3/0.15 → 1) at lines 1300-
|
|
|
|
|
|
// 1301 is untouched — this only restyles the EMPTY state.
|
2026-04-29 02:30:59 -04:00
|
|
|
|
.sea-pos-cover .sea-card-slot--empty,
|
My Sea iter-4a follow-up batch: modal port + draw polish + label positioning + Major Arcana fix — TDD
User-driven bug-squash + UX-polish cycle on top of iter 4a (ca2a62f). All 14 fixes ship behind the same iter-4a banner since they close the substage's UX gaps without expanding scope to iter 4b's persistence layer.
SeaDeal modal port — extracted apps/gameboard/_partials/_sea_stage.html shared by gameroom + my-sea; aliased .my-sea-picker w. id=id_sea_overlay so SeaDeal.init() finds it; FLIP click → SeaDeal.openStage delegation instead of bare _fillSlot. Fixes the user-reported 'thumbnail disappears' bug — slot was landing at opacity 0 (.--filled w.o .--visible) because SeaDeal's _hideStage (which adds --visible on modal dismiss) was never running. 3 new FTs cover the modal flow.
Spread lock + DEL reshuffle — _lockSpread/_unlockSpread toggle .sea-select--locked class on the combobox; first deposit locks, _resetHand unlocks. _reshuffleDeck Fisher-Yates over combined piles + re-rolls 25% reversal axis on DEL so successive DELs don't re-deal the same hand. Verified Claudezilla: 3 DEL cycles produced distinct lay cards (150 → 114 → 155).
Cover/cross empty slots — subtle dotted outline (transparent bg + 0.25 alpha border) w. --duoUser mask reveal on hover/touch. Per the user spec; rule lives in _card-deck.scss (shared between gameroom + my-sea). Plus matching label-opacity (0.25 idle → 0.6 hover) via CSS :hover ancestor propagation.
DOS spec — Solution moved from cover → crown per user correction. DRAW_ORDER ['loom', 'cross', 'crown']; POSITION_LABELS {loom: Desire, cross: Obstacle, crown: Solution}; SCSS hide list flipped from [leave, crown, lay] → [leave, cover, lay]; FT/IT assertions updated.
SAO → DOS soft-reload bug — Firefox autofill on hidden input restored the previous-session DOS value, tripping combobox.js's change-event guard. Fix: autocomplete=off + force-sync hidden.value from server-rendered aria-selected option in init. Captured as feedback_firefox_autofill_hidden_inputs (generalizable trap).
.sea-pos-label outside .sea-card-slot — moved label to be a sibling of the slot in the cell, so SeaDeal innerHTML clobber on draw doesn't erase it. Per-position absolute positioning touching slot borders: crown/cover above (translate -50%, 0.1rem, scaleY 1.2); lay/cross below (translate -50%, -0.1rem, scaleY 1.2); leave left, CCW (writing-mode vertical-rl + rotate 180deg + scaleX 1.2); loom right, CW (writing-mode vertical-rl + scaleX 1.2). scaleX for rotated labels (not scaleY) — perpendicular to text-flow is the visible-width direction after rotation. .my-sea-cross gap bumped to 1.75rem for label clearance.
Escape Velocity label swaps — POSITION_LABELS for escape-velocity: {crown: Crown, leave: Lay, cover: Cover, cross: Cross, loom: Loom, lay: Leave}. Replaces the Waite-Smith Behind/Beneath/Before per user spec.
SPREAD dropdown portal — .my-sea-form-col .sea-form-main { overflow: visible } + .sea-select-list { z-index: 1000 } so the dropdown extends past the form-main scroll area + sits above the picker stacking ints. Gameroom .sea-form-main still scrolls (only my-sea opts out).
Major Arcana polarity-split rendering — added 9 missing _card_dict keys to my-sea's _my_sea_deck_data to match gameroom epic.views.sea_deck's contract: levity_emanation, gravity_emanation, levity_reversal, gravity_reversal, italic_word, keywords_upright, keywords_reversed, energies, operations. Without these StageCard.populateCard falls through to plain name_title for trumps 19-21 + cards 48-49. Iter 4b cleanup candidate: extract apps.epic.utils.card_dict() to DRY the now-identical helpers.
Tests deferred — user explicitly belayed FT runs during the bug-fix substage. Iter 4b will re-establish a green sweep before its commit lands.
Code architected by Disco DeDisco <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-19 22:02:27 -04:00
|
|
|
|
.sea-pos-cross .sea-card-slot--empty {
|
|
|
|
|
|
background-color: transparent;
|
|
|
|
|
|
border-color: rgba(var(--terUser), 0.25);
|
|
|
|
|
|
box-shadow: none;
|
|
|
|
|
|
pointer-events: auto;
|
|
|
|
|
|
transition: background-color 0.15s ease, border-color 0.15s ease;
|
|
|
|
|
|
|
|
|
|
|
|
.sea-pos-label { opacity: 0.25; }
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.sea-pos-cover .sea-card-slot--empty:hover,
|
|
|
|
|
|
.sea-pos-cross .sea-card-slot--empty:hover {
|
|
|
|
|
|
background-color: rgba(var(--duoUser), 1);
|
|
|
|
|
|
border-color: rgba(var(--terUser), 1);
|
|
|
|
|
|
|
|
|
|
|
|
.sea-pos-label { opacity: 0.6; }
|
|
|
|
|
|
}
|
2026-04-29 02:30:59 -04:00
|
|
|
|
|
2026-04-28 23:02:49 -04:00
|
|
|
|
.sea-pos-cross .sea-card-slot { transform: rotate(90deg); }
|
|
|
|
|
|
|
PICK SEA Sprint C: sea stage card viewer — FLIP in, SPIN/FYI, deposit/re-expand — TDD
- sea.js: SeaDeal module — openStage() shows big card viewer w. flip-in animation;
SPIN toggles stage-card--reversed; FYI shows energies/operations (Energy/Operation
titles, PRV/NXT nav); backdrop click deposits card to slot; click deposited slot
re-opens stage; resetHand() clears hand on DEL
- sea_deck view: adds name_group/name_title/reversal/keywords_upright/keywords_reversed/
energies/operations to each card dict (full sig-select stage data set)
- _sea_overlay.html: data-sea-user-polarity attr; sea stage HTML (sig-stage-card shell
+ fan-card-face-upright/reversal structure + sea-stat-block w. SPIN/FYI/PRV/NXT);
FLIP click calls SeaDeal.openStage(); _fillPos removed (sea.js handles slot fill);
_reset calls SeaDeal.resetHand()
- room.html: sea.js included alongside sig-select.js
- _card-deck.scss: sea-stage layout (fixed overlay, backdrop, content row); sea-stage-card
w. @keyframes sea-flip-in (3D rotateY perspective); sea-stat-block scoped styles
incl. SPIN/FYI btns, stat faces, sig-info FYI panel
- SeaDealSpec.js: 20 Jasmine specs — openStage, SPIN, FYI, backdrop dismiss, slot re-expand
Code architected by Disco DeDisco <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-29 01:12:06 -04:00
|
|
|
|
// Sig card in center slot — compact rank + icon display; tilted CCW so Cover slot peeks through
|
2026-04-28 23:30:07 -04:00
|
|
|
|
.sea-sig-card {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
gap: 0.2rem;
|
PICK SEA Sprint C: sea stage card viewer — FLIP in, SPIN/FYI, deposit/re-expand — TDD
- sea.js: SeaDeal module — openStage() shows big card viewer w. flip-in animation;
SPIN toggles stage-card--reversed; FYI shows energies/operations (Energy/Operation
titles, PRV/NXT nav); backdrop click deposits card to slot; click deposited slot
re-opens stage; resetHand() clears hand on DEL
- sea_deck view: adds name_group/name_title/reversal/keywords_upright/keywords_reversed/
energies/operations to each card dict (full sig-select stage data set)
- _sea_overlay.html: data-sea-user-polarity attr; sea stage HTML (sig-stage-card shell
+ fan-card-face-upright/reversal structure + sea-stat-block w. SPIN/FYI/PRV/NXT);
FLIP click calls SeaDeal.openStage(); _fillPos removed (sea.js handles slot fill);
_reset calls SeaDeal.resetHand()
- room.html: sea.js included alongside sig-select.js
- _card-deck.scss: sea-stage layout (fixed overlay, backdrop, content row); sea-stage-card
w. @keyframes sea-flip-in (3D rotateY perspective); sea-stat-block scoped styles
incl. SPIN/FYI btns, stat faces, sig-info FYI panel
- SeaDealSpec.js: 20 Jasmine specs — openStage, SPIN, FYI, backdrop dismiss, slot re-expand
Code architected by Disco DeDisco <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-29 01:12:06 -04:00
|
|
|
|
transform: rotate(-5deg);
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
z-index: 2;
|
2026-04-28 23:30:07 -04:00
|
|
|
|
|
2026-05-21 12:40:08 -04:00
|
|
|
|
// Corner-rank + suit-icon track `color` so the polarity rules below
|
|
|
|
|
|
// (which set `.sig-stage-card { color: ... }` to --priUser for levity)
|
|
|
|
|
|
// flip the contrast w. the card's bg. The default (gravity, --priUser
|
|
|
|
|
|
// bg) inherits --secUser from the `.sig-stage-card.sea-sig-card` rule
|
|
|
|
|
|
// below; the levity polarity rule overrides `.sig-stage-card { color }`
|
|
|
|
|
|
// to --priUser, which propagates down through currentColor.
|
2026-04-28 23:30:07 -04:00
|
|
|
|
.fan-corner-rank {
|
|
|
|
|
|
font-size: 1.2rem;
|
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
|
line-height: 1;
|
2026-05-21 12:40:08 -04:00
|
|
|
|
color: currentColor;
|
|
|
|
|
|
opacity: 0.85;
|
2026-04-28 23:30:07 -04:00
|
|
|
|
}
|
2026-05-21 12:40:08 -04:00
|
|
|
|
i { font-size: 1rem; color: currentColor; opacity: 0.75; }
|
2026-04-28 23:30:07 -04:00
|
|
|
|
}
|
|
|
|
|
|
|
2026-04-27 01:02:01 -04:00
|
|
|
|
// .sig-stage-card is normally scoped inside .sig-stage — re-apply the card shell
|
2026-05-01 02:06:55 -04:00
|
|
|
|
// here so it renders correctly outside that context. Class-based selector so it
|
|
|
|
|
|
// also applies in the tray (.tray-sig-card .sig-stage-card.sea-sig-card).
|
|
|
|
|
|
.sig-stage-card.sea-sig-card {
|
2026-04-27 01:02:01 -04:00
|
|
|
|
flex-shrink: 0;
|
|
|
|
|
|
width: var(--sig-card-w, #{$sea-card-w});
|
|
|
|
|
|
height: auto;
|
|
|
|
|
|
aspect-ratio: 5 / 8;
|
|
|
|
|
|
border-radius: 0.5rem;
|
|
|
|
|
|
background: rgba(var(--priUser), 1);
|
|
|
|
|
|
border: 0.15rem solid rgba(var(--secUser), 0.6);
|
2026-05-21 12:40:08 -04:00
|
|
|
|
color: rgba(var(--secUser), 1); // default (gravity) text color; `[data-polarity="levity"] .sig-stage-card { color: --priUser }` overrides for levity. Corner-rank + suit-icon track currentColor.
|
2026-04-27 01:02:01 -04:00
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
padding: 0.25rem;
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
|
|
|
|
.fan-card-face {
|
|
|
|
|
|
flex: 1;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
padding: 0.25rem 0.15rem;
|
|
|
|
|
|
|
|
|
|
|
|
.fan-card-name,
|
|
|
|
|
|
.sig-qualifier-above,
|
|
|
|
|
|
.sig-qualifier-below { font-size: 0.5rem; font-weight: 600; white-space: normal; word-break: break-word; line-height: 1.3; margin: 0; }
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// ── Form column (priUser / opaque / right) ────────────────────────────────────
|
|
|
|
|
|
|
|
|
|
|
|
.sea-form-col {
|
|
|
|
|
|
flex: 0 0 auto;
|
|
|
|
|
|
width: 16rem;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
padding: 1.25rem;
|
|
|
|
|
|
background: rgba(var(--priUser), 1);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2026-04-30 21:01:52 -04:00
|
|
|
|
// Mobile: stack crucifix on top, form (select / stacks / LOCK HAND / DEL) below
|
|
|
|
|
|
@media (max-width: 600px) {
|
|
|
|
|
|
.sea-modal-body { flex-direction: column; }
|
|
|
|
|
|
.sea-cards-col { flex: 0 0 auto; padding: 1.25rem 1rem; }
|
|
|
|
|
|
.sea-form-col { width: 100%; }
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2026-04-27 01:02:01 -04:00
|
|
|
|
.sea-form-main {
|
|
|
|
|
|
flex: 1;
|
|
|
|
|
|
overflow-y: auto;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.sea-field {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
gap: 0.35rem;
|
|
|
|
|
|
margin-bottom: 1rem;
|
|
|
|
|
|
|
|
|
|
|
|
label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.7; }
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2026-05-01 00:11:40 -04:00
|
|
|
|
// Forthcoming-feature hint between SPREAD label and the combobox; rendered
|
|
|
|
|
|
// value comes from apps.epic.utils.stack_reversal_probability via the view
|
|
|
|
|
|
// context.
|
|
|
|
|
|
.sea-reversal-hint {
|
|
|
|
|
|
font-size: 0.7rem;
|
|
|
|
|
|
opacity: 0.55;
|
|
|
|
|
|
margin: -0.1rem 0 0;
|
|
|
|
|
|
font-style: italic;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2026-04-30 21:01:52 -04:00
|
|
|
|
// Custom combobox replacement for native <select>. See combobox.js for the
|
|
|
|
|
|
// expected markup; SCSS owns all visuals because the OS-native dropdown ignored
|
|
|
|
|
|
// option background/color anyway.
|
2026-04-27 01:02:01 -04:00
|
|
|
|
.sea-select {
|
2026-04-30 21:01:52 -04:00
|
|
|
|
position: relative;
|
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
user-select: none;
|
2026-04-27 01:02:01 -04:00
|
|
|
|
background: rgba(var(--duoUser), 0.6);
|
|
|
|
|
|
border: 1px solid rgba(var(--terUser), 0.3);
|
|
|
|
|
|
border-radius: 0.3rem;
|
|
|
|
|
|
color: inherit;
|
|
|
|
|
|
padding: 0.4rem 0.5rem;
|
|
|
|
|
|
font-size: 0.85rem;
|
|
|
|
|
|
width: 100%;
|
2026-04-30 21:01:52 -04:00
|
|
|
|
max-width: 12.5rem;
|
|
|
|
|
|
outline: none;
|
|
|
|
|
|
|
|
|
|
|
|
&:focus-visible { box-shadow: 0 0 0 2px rgba(var(--terUser), 0.5); }
|
|
|
|
|
|
|
|
|
|
|
|
.sea-select-current {
|
|
|
|
|
|
display: block;
|
|
|
|
|
|
padding-right: 1.1rem; // room for the arrow
|
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
|
}
|
|
|
|
|
|
.sea-select-arrow {
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
right: 0.5rem;
|
|
|
|
|
|
top: 50%;
|
|
|
|
|
|
transform: translateY(-50%);
|
|
|
|
|
|
opacity: 0.6;
|
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
|
font-size: 0.75rem;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.sea-select-list {
|
|
|
|
|
|
display: none;
|
|
|
|
|
|
list-style: none;
|
|
|
|
|
|
margin: 0.2rem 0 0;
|
|
|
|
|
|
padding: 0.15rem;
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
top: 100%;
|
|
|
|
|
|
left: 0;
|
|
|
|
|
|
right: 0;
|
|
|
|
|
|
z-index: 100;
|
|
|
|
|
|
background: rgba(var(--undUser), 1);
|
|
|
|
|
|
border: 1px solid rgba(var(--terUser), 0.5);
|
|
|
|
|
|
border-radius: 0.3rem;
|
|
|
|
|
|
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4);
|
|
|
|
|
|
|
|
|
|
|
|
li[role="option"] {
|
|
|
|
|
|
padding: 0.4rem 0.5rem;
|
|
|
|
|
|
border-radius: 0.2rem;
|
|
|
|
|
|
color: rgba(var(--priUser), 1);
|
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
transition: background 0.1s, color 0.1s;
|
|
|
|
|
|
}
|
|
|
|
|
|
// Hover + keyboard-focus + selected all share the inverted scheme so
|
|
|
|
|
|
// the visual feedback stays consistent regardless of input device.
|
|
|
|
|
|
li[role="option"]:hover,
|
|
|
|
|
|
li[role="option"].sea-select-option--focus,
|
|
|
|
|
|
li[role="option"][aria-selected="true"] {
|
|
|
|
|
|
background: rgba(var(--priUser), 1);
|
|
|
|
|
|
color: rgba(var(--secUser), 1);
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
2026-04-27 01:02:01 -04:00
|
|
|
|
|
2026-04-30 21:01:52 -04:00
|
|
|
|
&[aria-expanded="true"] {
|
|
|
|
|
|
.sea-select-list { display: block; }
|
|
|
|
|
|
.sea-select-arrow { transform: translateY(-50%) rotate(180deg); }
|
|
|
|
|
|
}
|
2026-04-27 01:02:01 -04:00
|
|
|
|
}
|
|
|
|
|
|
|
2026-04-28 23:30:07 -04:00
|
|
|
|
// Deck stacks — DECKS label + gravity + levity piles
|
2026-04-28 23:02:49 -04:00
|
|
|
|
.sea-stacks {
|
|
|
|
|
|
display: flex;
|
2026-04-28 23:30:07 -04:00
|
|
|
|
align-items: center;
|
|
|
|
|
|
gap: 0.75rem;
|
2026-04-28 23:02:49 -04:00
|
|
|
|
margin: 1rem 0;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2026-04-28 23:30:07 -04:00
|
|
|
|
.sea-stacks-label {
|
|
|
|
|
|
writing-mode: vertical-rl;
|
|
|
|
|
|
transform: rotate(180deg);
|
|
|
|
|
|
text-transform: uppercase;
|
2026-04-29 00:20:55 -04:00
|
|
|
|
// Fill the full card height ($sea-card-h: 6.5rem) with 5 letters
|
|
|
|
|
|
font-size: 1rem;
|
|
|
|
|
|
letter-spacing: 0.32em;
|
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
|
opacity: 0.5;
|
2026-04-28 23:30:07 -04:00
|
|
|
|
white-space: nowrap;
|
|
|
|
|
|
flex-shrink: 0;
|
2026-04-29 00:20:55 -04:00
|
|
|
|
align-self: center;
|
2026-04-28 23:30:07 -04:00
|
|
|
|
}
|
|
|
|
|
|
|
2026-04-28 23:02:49 -04:00
|
|
|
|
.sea-deck-stack {
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
align-items: center;
|
2026-04-28 23:30:07 -04:00
|
|
|
|
gap: 0.35rem;
|
2026-04-28 23:02:49 -04:00
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.sea-stack-face {
|
2026-04-28 23:30:07 -04:00
|
|
|
|
position: relative;
|
2026-04-28 23:02:49 -04:00
|
|
|
|
width: $sea-card-w;
|
|
|
|
|
|
height: $sea-card-h;
|
|
|
|
|
|
border-radius: 0.3rem;
|
2026-04-28 23:30:07 -04:00
|
|
|
|
border: 0.15rem solid;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
justify-content: center;
|
2026-04-28 23:02:49 -04:00
|
|
|
|
transition: box-shadow 0.15s;
|
2026-04-29 00:20:55 -04:00
|
|
|
|
z-index: 1; // sits above the name label
|
2026-04-28 23:30:07 -04:00
|
|
|
|
}
|
2026-04-28 23:02:49 -04:00
|
|
|
|
|
2026-04-28 23:30:07 -04:00
|
|
|
|
.sea-stack-ok {
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
top: 50%;
|
PICK SEA Sprint C: sea stage card viewer — FLIP in, SPIN/FYI, deposit/re-expand — TDD
- sea.js: SeaDeal module — openStage() shows big card viewer w. flip-in animation;
SPIN toggles stage-card--reversed; FYI shows energies/operations (Energy/Operation
titles, PRV/NXT nav); backdrop click deposits card to slot; click deposited slot
re-opens stage; resetHand() clears hand on DEL
- sea_deck view: adds name_group/name_title/reversal/keywords_upright/keywords_reversed/
energies/operations to each card dict (full sig-select stage data set)
- _sea_overlay.html: data-sea-user-polarity attr; sea stage HTML (sig-stage-card shell
+ fan-card-face-upright/reversal structure + sea-stat-block w. SPIN/FYI/PRV/NXT);
FLIP click calls SeaDeal.openStage(); _fillPos removed (sea.js handles slot fill);
_reset calls SeaDeal.resetHand()
- room.html: sea.js included alongside sig-select.js
- _card-deck.scss: sea-stage layout (fixed overlay, backdrop, content row); sea-stage-card
w. @keyframes sea-flip-in (3D rotateY perspective); sea-stat-block scoped styles
incl. SPIN/FYI btns, stat faces, sig-info FYI panel
- SeaDealSpec.js: 20 Jasmine specs — openStage, SPIN, FYI, backdrop dismiss, slot re-expand
Code architected by Disco DeDisco <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-29 01:12:06 -04:00
|
|
|
|
left: 0;
|
|
|
|
|
|
right: 0;
|
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
|
transform: translateY(-50%);
|
2026-04-28 23:30:07 -04:00
|
|
|
|
z-index: 5;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2026-04-29 00:20:55 -04:00
|
|
|
|
.sea-deck-stack { gap: 0; } // remove gap so name slides under the face
|
|
|
|
|
|
|
2026-04-28 23:30:07 -04:00
|
|
|
|
.sea-stack-name {
|
2026-04-29 00:20:55 -04:00
|
|
|
|
font-size: 0.65rem;
|
|
|
|
|
|
letter-spacing: 0.08em;
|
2026-04-28 23:30:07 -04:00
|
|
|
|
text-transform: uppercase;
|
|
|
|
|
|
font-weight: 600;
|
2026-04-29 00:20:55 -04:00
|
|
|
|
opacity: 0.6;
|
|
|
|
|
|
// Pull top of label partially under the stack face
|
|
|
|
|
|
// margin-top: -0.1rem;
|
|
|
|
|
|
transform: scaleY(1.2);
|
|
|
|
|
|
transform-origin: top center;
|
|
|
|
|
|
z-index: 0;
|
2026-04-28 23:30:07 -04:00
|
|
|
|
}
|
|
|
|
|
|
.sea-deck-stack--gravity .sea-stack-name { color: rgba(var(--quaUser), 1); }
|
|
|
|
|
|
.sea-deck-stack--levity .sea-stack-name { color: rgba(var(--terUser), 1); }
|
|
|
|
|
|
|
|
|
|
|
|
// Deck backs — face-down pile colour identifies polarity
|
|
|
|
|
|
$_sea-shadow: 1px 2px 0 rgba(0,0,0,0.7), 0 4px 0 rgba(0,0,0,0.18), 2px 5px 5px rgba(0,0,0,0.5);
|
|
|
|
|
|
$_glow-levity: 0 0 0.8rem 0.15rem rgba(var(--ninUser), 0.6);
|
|
|
|
|
|
$_glow-gravity: 0 0 0.8rem 0.15rem rgba(var(--quaUser), 0.6);
|
|
|
|
|
|
|
|
|
|
|
|
.sea-deck-stack--levity .sea-stack-face {
|
|
|
|
|
|
background: rgba(var(--terUser), 0.88);
|
|
|
|
|
|
border-color: rgba(var(--ninUser), 0.65);
|
|
|
|
|
|
box-shadow: $_sea-shadow;
|
|
|
|
|
|
}
|
|
|
|
|
|
.sea-deck-stack--gravity .sea-stack-face {
|
|
|
|
|
|
background: rgba(var(--quiUser), 0.88);
|
|
|
|
|
|
border-color: rgba(var(--quaUser), 0.65);
|
|
|
|
|
|
box-shadow: $_sea-shadow;
|
2026-04-28 23:02:49 -04:00
|
|
|
|
}
|
|
|
|
|
|
|
2026-04-28 23:30:07 -04:00
|
|
|
|
// Glow on hover, :active, and while OK is showing (--active class set by JS)
|
|
|
|
|
|
.sea-deck-stack--levity:hover .sea-stack-face,
|
|
|
|
|
|
.sea-deck-stack--levity:active .sea-stack-face,
|
|
|
|
|
|
.sea-deck-stack--levity.sea-deck-stack--active .sea-stack-face { box-shadow: $_sea-shadow, $_glow-levity; }
|
|
|
|
|
|
.sea-deck-stack--gravity:hover .sea-stack-face,
|
|
|
|
|
|
.sea-deck-stack--gravity:active .sea-stack-face,
|
|
|
|
|
|
.sea-deck-stack--gravity.sea-deck-stack--active .sea-stack-face { box-shadow: $_sea-shadow, $_glow-gravity; }
|
2026-04-28 23:02:49 -04:00
|
|
|
|
|
|
|
|
|
|
// Form action row — LOCK HAND + DEL side by side at the bottom
|
|
|
|
|
|
.sea-form-actions {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
gap: 0.5rem;
|
2026-04-27 01:02:01 -04:00
|
|
|
|
margin-top: auto;
|
2026-04-28 23:02:49 -04:00
|
|
|
|
padding-top: 0.75rem;
|
|
|
|
|
|
|
2026-04-27 01:02:01 -04:00
|
|
|
|
}
|
|
|
|
|
|
|
rename natus → sky across the codebase — natal chart abstraction is now sky throughout, since chart inputs aren't birthday-gated
Mechanical rename: 5 files (sky-wheel.js, _sky.scss, _sky_overlay.html, SkyWheelSpec.js x2), 24 in-place edits across templates/views/urls/SCSS/JS/tests/CLAUDE.md. URL names epic:natus_save → epic:sky_save (epic namespaced, no clash w. dashboard:sky_save), JS module NatusWheel → SkyWheel, DOM ids id_natus_* → id_sky_*, BEM classes natus-* → sky-*, dashboard sky_natus_data/sky_natus_preview collapsed to sky_data/sky_preview_data. No DB migration needed (User.sky_chart_data + GameEvent.SKY_SAVED already used sky-prefix). 778 ITs + Jasmine green.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-04 20:36:15 -04:00
|
|
|
|
// NVM button — same positioning as .sky-modal-wrap > .btn-cancel
|
2026-04-27 01:02:01 -04:00
|
|
|
|
.sea-modal-wrap > .btn-cancel {
|
|
|
|
|
|
position: absolute;
|
PICK SEA Sprint C: sea stage card viewer — FLIP in, SPIN/FYI, deposit/re-expand — TDD
- sea.js: SeaDeal module — openStage() shows big card viewer w. flip-in animation;
SPIN toggles stage-card--reversed; FYI shows energies/operations (Energy/Operation
titles, PRV/NXT nav); backdrop click deposits card to slot; click deposited slot
re-opens stage; resetHand() clears hand on DEL
- sea_deck view: adds name_group/name_title/reversal/keywords_upright/keywords_reversed/
energies/operations to each card dict (full sig-select stage data set)
- _sea_overlay.html: data-sea-user-polarity attr; sea stage HTML (sig-stage-card shell
+ fan-card-face-upright/reversal structure + sea-stat-block w. SPIN/FYI/PRV/NXT);
FLIP click calls SeaDeal.openStage(); _fillPos removed (sea.js handles slot fill);
_reset calls SeaDeal.resetHand()
- room.html: sea.js included alongside sig-select.js
- _card-deck.scss: sea-stage layout (fixed overlay, backdrop, content row); sea-stage-card
w. @keyframes sea-flip-in (3D rotateY perspective); sea-stat-block scoped styles
incl. SPIN/FYI btns, stat faces, sig-info FYI panel
- SeaDealSpec.js: 20 Jasmine specs — openStage, SPIN, FYI, backdrop dismiss, slot re-expand
Code architected by Disco DeDisco <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-29 01:12:06 -04:00
|
|
|
|
top: -1rem;
|
|
|
|
|
|
right: -1rem;
|
2026-04-27 01:02:01 -04:00
|
|
|
|
z-index: 10;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
PICK SEA Sprint C: sea stage card viewer — FLIP in, SPIN/FYI, deposit/re-expand — TDD
- sea.js: SeaDeal module — openStage() shows big card viewer w. flip-in animation;
SPIN toggles stage-card--reversed; FYI shows energies/operations (Energy/Operation
titles, PRV/NXT nav); backdrop click deposits card to slot; click deposited slot
re-opens stage; resetHand() clears hand on DEL
- sea_deck view: adds name_group/name_title/reversal/keywords_upright/keywords_reversed/
energies/operations to each card dict (full sig-select stage data set)
- _sea_overlay.html: data-sea-user-polarity attr; sea stage HTML (sig-stage-card shell
+ fan-card-face-upright/reversal structure + sea-stat-block w. SPIN/FYI/PRV/NXT);
FLIP click calls SeaDeal.openStage(); _fillPos removed (sea.js handles slot fill);
_reset calls SeaDeal.resetHand()
- room.html: sea.js included alongside sig-select.js
- _card-deck.scss: sea-stage layout (fixed overlay, backdrop, content row); sea-stage-card
w. @keyframes sea-flip-in (3D rotateY perspective); sea-stat-block scoped styles
incl. SPIN/FYI btns, stat faces, sig-info FYI panel
- SeaDealSpec.js: 20 Jasmine specs — openStage, SPIN, FYI, backdrop dismiss, slot re-expand
Code architected by Disco DeDisco <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-29 01:12:06 -04:00
|
|
|
|
// ── Sea stage — big card viewer ───────────────────────────────────────────────
|
|
|
|
|
|
|
|
|
|
|
|
.sea-stage {
|
|
|
|
|
|
position: fixed;
|
|
|
|
|
|
inset: 0;
|
|
|
|
|
|
z-index: 200;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.sea-stage-backdrop {
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
inset: 0;
|
|
|
|
|
|
cursor: pointer;
|
2026-04-29 02:30:59 -04:00
|
|
|
|
background: rgba(0, 0, 0, 0.3);
|
|
|
|
|
|
backdrop-filter: blur(4px);
|
PICK SEA Sprint C: sea stage card viewer — FLIP in, SPIN/FYI, deposit/re-expand — TDD
- sea.js: SeaDeal module — openStage() shows big card viewer w. flip-in animation;
SPIN toggles stage-card--reversed; FYI shows energies/operations (Energy/Operation
titles, PRV/NXT nav); backdrop click deposits card to slot; click deposited slot
re-opens stage; resetHand() clears hand on DEL
- sea_deck view: adds name_group/name_title/reversal/keywords_upright/keywords_reversed/
energies/operations to each card dict (full sig-select stage data set)
- _sea_overlay.html: data-sea-user-polarity attr; sea stage HTML (sig-stage-card shell
+ fan-card-face-upright/reversal structure + sea-stat-block w. SPIN/FYI/PRV/NXT);
FLIP click calls SeaDeal.openStage(); _fillPos removed (sea.js handles slot fill);
_reset calls SeaDeal.resetHand()
- room.html: sea.js included alongside sig-select.js
- _card-deck.scss: sea-stage layout (fixed overlay, backdrop, content row); sea-stage-card
w. @keyframes sea-flip-in (3D rotateY perspective); sea-stat-block scoped styles
incl. SPIN/FYI btns, stat faces, sig-info FYI panel
- SeaDealSpec.js: 20 Jasmine specs — openStage, SPIN, FYI, backdrop dismiss, slot re-expand
Code architected by Disco DeDisco <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-29 01:12:06 -04:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.sea-stage-content {
|
2026-04-30 21:51:23 -04:00
|
|
|
|
// Card width drives the stage-card AND the stat block (which reuses
|
|
|
|
|
|
// --sig-card-w via the shared stat-block-shared mixin's calc rules).
|
|
|
|
|
|
// Override per breakpoint below to keep the stage from blowing up on small
|
|
|
|
|
|
// screens.
|
|
|
|
|
|
--sig-card-w: 180px;
|
|
|
|
|
|
|
PICK SEA Sprint C: sea stage card viewer — FLIP in, SPIN/FYI, deposit/re-expand — TDD
- sea.js: SeaDeal module — openStage() shows big card viewer w. flip-in animation;
SPIN toggles stage-card--reversed; FYI shows energies/operations (Energy/Operation
titles, PRV/NXT nav); backdrop click deposits card to slot; click deposited slot
re-opens stage; resetHand() clears hand on DEL
- sea_deck view: adds name_group/name_title/reversal/keywords_upright/keywords_reversed/
energies/operations to each card dict (full sig-select stage data set)
- _sea_overlay.html: data-sea-user-polarity attr; sea stage HTML (sig-stage-card shell
+ fan-card-face-upright/reversal structure + sea-stat-block w. SPIN/FYI/PRV/NXT);
FLIP click calls SeaDeal.openStage(); _fillPos removed (sea.js handles slot fill);
_reset calls SeaDeal.resetHand()
- room.html: sea.js included alongside sig-select.js
- _card-deck.scss: sea-stage layout (fixed overlay, backdrop, content row); sea-stage-card
w. @keyframes sea-flip-in (3D rotateY perspective); sea-stat-block scoped styles
incl. SPIN/FYI btns, stat faces, sig-info FYI panel
- SeaDealSpec.js: 20 Jasmine specs — openStage, SPIN, FYI, backdrop dismiss, slot re-expand
Code architected by Disco DeDisco <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-29 01:12:06 -04:00
|
|
|
|
position: relative;
|
|
|
|
|
|
z-index: 1;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: row;
|
|
|
|
|
|
align-items: flex-end;
|
|
|
|
|
|
gap: 0.75rem;
|
|
|
|
|
|
padding: 1.5rem;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2026-04-30 21:51:23 -04:00
|
|
|
|
// Sea-stage mobile breakpoints — mirror the fan modal's portrait/landscape
|
|
|
|
|
|
// trigger thresholds so behavior across staging surfaces stays consistent.
|
|
|
|
|
|
@media (orientation: portrait) and (max-width: 480px) {
|
|
|
|
|
|
.sea-stage-content { --sig-card-w: 130px; }
|
|
|
|
|
|
}
|
|
|
|
|
|
@media (orientation: landscape) and (max-height: 500px) {
|
|
|
|
|
|
.sea-stage-content { --sig-card-w: 130px; }
|
|
|
|
|
|
}
|
|
|
|
|
|
|
PICK SEA Sprint C: sea stage card viewer — FLIP in, SPIN/FYI, deposit/re-expand — TDD
- sea.js: SeaDeal module — openStage() shows big card viewer w. flip-in animation;
SPIN toggles stage-card--reversed; FYI shows energies/operations (Energy/Operation
titles, PRV/NXT nav); backdrop click deposits card to slot; click deposited slot
re-opens stage; resetHand() clears hand on DEL
- sea_deck view: adds name_group/name_title/reversal/keywords_upright/keywords_reversed/
energies/operations to each card dict (full sig-select stage data set)
- _sea_overlay.html: data-sea-user-polarity attr; sea stage HTML (sig-stage-card shell
+ fan-card-face-upright/reversal structure + sea-stat-block w. SPIN/FYI/PRV/NXT);
FLIP click calls SeaDeal.openStage(); _fillPos removed (sea.js handles slot fill);
_reset calls SeaDeal.resetHand()
- room.html: sea.js included alongside sig-select.js
- _card-deck.scss: sea-stage layout (fixed overlay, backdrop, content row); sea-stage-card
w. @keyframes sea-flip-in (3D rotateY perspective); sea-stat-block scoped styles
incl. SPIN/FYI btns, stat faces, sig-info FYI panel
- SeaDealSpec.js: 20 Jasmine specs — openStage, SPIN, FYI, backdrop dismiss, slot re-expand
Code architected by Disco DeDisco <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-29 01:12:06 -04:00
|
|
|
|
// Stage card — size matches sig-select stage (--sig-card-w driven by inline style)
|
|
|
|
|
|
.sea-stage-card {
|
|
|
|
|
|
flex-shrink: 0;
|
|
|
|
|
|
width: var(--sig-card-w, 140px);
|
|
|
|
|
|
height: auto;
|
|
|
|
|
|
aspect-ratio: 5 / 8;
|
|
|
|
|
|
border-radius: 0.5rem;
|
|
|
|
|
|
background: rgba(var(--priUser), 1);
|
|
|
|
|
|
border: 0.15rem solid rgba(var(--secUser), 0.6);
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
padding: 0.25rem;
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
transform-style: preserve-3d;
|
2026-04-29 02:30:59 -04:00
|
|
|
|
transition: transform 0.4s ease;
|
PICK SEA Sprint C: sea stage card viewer — FLIP in, SPIN/FYI, deposit/re-expand — TDD
- sea.js: SeaDeal module — openStage() shows big card viewer w. flip-in animation;
SPIN toggles stage-card--reversed; FYI shows energies/operations (Energy/Operation
titles, PRV/NXT nav); backdrop click deposits card to slot; click deposited slot
re-opens stage; resetHand() clears hand on DEL
- sea_deck view: adds name_group/name_title/reversal/keywords_upright/keywords_reversed/
energies/operations to each card dict (full sig-select stage data set)
- _sea_overlay.html: data-sea-user-polarity attr; sea stage HTML (sig-stage-card shell
+ fan-card-face-upright/reversal structure + sea-stat-block w. SPIN/FYI/PRV/NXT);
FLIP click calls SeaDeal.openStage(); _fillPos removed (sea.js handles slot fill);
_reset calls SeaDeal.resetHand()
- room.html: sea.js included alongside sig-select.js
- _card-deck.scss: sea-stage layout (fixed overlay, backdrop, content row); sea-stage-card
w. @keyframes sea-flip-in (3D rotateY perspective); sea-stat-block scoped styles
incl. SPIN/FYI btns, stat faces, sig-info FYI panel
- SeaDealSpec.js: 20 Jasmine specs — openStage, SPIN, FYI, backdrop dismiss, slot re-expand
Code architected by Disco DeDisco <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-29 01:12:06 -04:00
|
|
|
|
|
|
|
|
|
|
// Flip-in animation when stage opens
|
|
|
|
|
|
&--shown {
|
|
|
|
|
|
animation: sea-flip-in 0.35s ease forwards;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.fan-card-corner--tl,
|
|
|
|
|
|
.fan-card-corner--br {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
line-height: 1.1;
|
|
|
|
|
|
gap: 0.1rem;
|
|
|
|
|
|
.fan-corner-rank { font-size: calc(var(--sig-card-w, 140px) * 0.133); font-weight: 700; }
|
|
|
|
|
|
i { font-size: calc(var(--sig-card-w, 140px) * 0.1); }
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.fan-card-face {
|
|
|
|
|
|
flex: 1;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
padding: 0.25rem 0.15rem;
|
|
|
|
|
|
gap: 0.2rem;
|
|
|
|
|
|
|
|
|
|
|
|
.fan-card-face-upright { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; }
|
|
|
|
|
|
.fan-card-face-reversal { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; padding-top: 0.1rem; }
|
|
|
|
|
|
.fan-card-name-group { font-size: calc(var(--sig-card-w, 140px) * 0.073); opacity: 0.6; }
|
|
|
|
|
|
.sig-qualifier-above,
|
|
|
|
|
|
.sig-qualifier-below,
|
2026-05-01 02:06:55 -04:00
|
|
|
|
.fan-card-reversal-qualifier { font-size: calc(var(--sig-card-w, 140px) * 0.08); font-weight: 600; color: rgba(var(--quiUser), 1); transition: opacity 0.2s; text-wrap: balance; }
|
PICK SEA Sprint C: sea stage card viewer — FLIP in, SPIN/FYI, deposit/re-expand — TDD
- sea.js: SeaDeal module — openStage() shows big card viewer w. flip-in animation;
SPIN toggles stage-card--reversed; FYI shows energies/operations (Energy/Operation
titles, PRV/NXT nav); backdrop click deposits card to slot; click deposited slot
re-opens stage; resetHand() clears hand on DEL
- sea_deck view: adds name_group/name_title/reversal/keywords_upright/keywords_reversed/
energies/operations to each card dict (full sig-select stage data set)
- _sea_overlay.html: data-sea-user-polarity attr; sea stage HTML (sig-stage-card shell
+ fan-card-face-upright/reversal structure + sea-stat-block w. SPIN/FYI/PRV/NXT);
FLIP click calls SeaDeal.openStage(); _fillPos removed (sea.js handles slot fill);
_reset calls SeaDeal.resetHand()
- room.html: sea.js included alongside sig-select.js
- _card-deck.scss: sea-stage layout (fixed overlay, backdrop, content row); sea-stage-card
w. @keyframes sea-flip-in (3D rotateY perspective); sea-stat-block scoped styles
incl. SPIN/FYI btns, stat faces, sig-info FYI panel
- SeaDealSpec.js: 20 Jasmine specs — openStage, SPIN, FYI, backdrop dismiss, slot re-expand
Code architected by Disco DeDisco <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-29 01:12:06 -04:00
|
|
|
|
.fan-card-name,
|
2026-05-01 02:06:55 -04:00
|
|
|
|
.fan-card-reversal-name { font-size: calc(var(--sig-card-w, 140px) * 0.08); font-weight: 600; color: rgba(var(--quiUser), 1); transition: opacity 0.2s; text-wrap: balance; }
|
PICK SEA Sprint C: sea stage card viewer — FLIP in, SPIN/FYI, deposit/re-expand — TDD
- sea.js: SeaDeal module — openStage() shows big card viewer w. flip-in animation;
SPIN toggles stage-card--reversed; FYI shows energies/operations (Energy/Operation
titles, PRV/NXT nav); backdrop click deposits card to slot; click deposited slot
re-opens stage; resetHand() clears hand on DEL
- sea_deck view: adds name_group/name_title/reversal/keywords_upright/keywords_reversed/
energies/operations to each card dict (full sig-select stage data set)
- _sea_overlay.html: data-sea-user-polarity attr; sea stage HTML (sig-stage-card shell
+ fan-card-face-upright/reversal structure + sea-stat-block w. SPIN/FYI/PRV/NXT);
FLIP click calls SeaDeal.openStage(); _fillPos removed (sea.js handles slot fill);
_reset calls SeaDeal.resetHand()
- room.html: sea.js included alongside sig-select.js
- _card-deck.scss: sea-stage layout (fixed overlay, backdrop, content row); sea-stage-card
w. @keyframes sea-flip-in (3D rotateY perspective); sea-stat-block scoped styles
incl. SPIN/FYI btns, stat faces, sig-info FYI panel
- SeaDealSpec.js: 20 Jasmine specs — openStage, SPIN, FYI, backdrop dismiss, slot re-expand
Code architected by Disco DeDisco <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-29 01:12:06 -04:00
|
|
|
|
.fan-card-arcana { font-size: calc(var(--sig-card-w, 140px) * 0.067); text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.5; }
|
|
|
|
|
|
.fan-card-reversal-qualifier,
|
|
|
|
|
|
.fan-card-reversal-name { transform: rotate(180deg); opacity: 0.25; }
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
&.stage-card--reversed {
|
|
|
|
|
|
transform: rotate(180deg);
|
|
|
|
|
|
.fan-card-reversal-qualifier,
|
|
|
|
|
|
.fan-card-reversal-name { opacity: 1; }
|
|
|
|
|
|
.fan-card-name,
|
|
|
|
|
|
.sig-qualifier-above,
|
|
|
|
|
|
.sig-qualifier-below { opacity: 0.25; }
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
@keyframes sea-flip-in {
|
|
|
|
|
|
0% { transform: perspective(600px) rotateY(-90deg) scale(0.4); opacity: 0; }
|
|
|
|
|
|
60% { transform: perspective(600px) rotateY(8deg) scale(1.03); opacity: 1; }
|
|
|
|
|
|
100% { transform: perspective(600px) rotateY(0deg) scale(1); opacity: 1; }
|
|
|
|
|
|
}
|
|
|
|
|
|
|
btn-primary label renames + stage-card polarity color refinements — two interleaved threads from one session, committing together since both touch sig + sea stage cards ; LABEL RENAMES: PICK SIGS → SCAN SIGS (room.html #id_pick_sigs_btn), PICK SKY → CAST SKY (room.html #id_pick_sky_btn × 2), PICK SEA → DRAW SEA (room.html #id_pick_sea_btn), TAKE SIG → SAVE SIG (sig-select.js _takeSigBtn.textContent × 2 callsites + section comment) — Element IDs (id_pick_sky_btn etc.), URL names (epic:pick_sigs, epic:pick_sky), and Python state enums (TableStatus.PICK_SKY, PICK_SEA, SIG_SELECT) intentionally retained as stable identifiers; the renamed text is purely the .btn-primary user-facing label ; FT + IT mentions of the old labels swept in test_game_room_select_{sig,sky,sea,role}.py, test_billboard.py, setup_sea_session.py mgmt cmd, apps/epic/{views,utils,models,tasks,tests/integrated/test_views}.py, SigSelectSpec.js, sky_overlay/sea_overlay/dashboard/sky.html, _card-deck.scss, _sky.scss — all docstring/comment references updated for cascade-grep cleanliness ; STAGE-CARD COLOR + CLASS REFINEMENTS (earlier in session): sig-stage card text colour split per polarity — gravity gets --terUser on .fan-card-name + .fan-card-reversal-{name,qualifier} + .sig-qualifier-{above,below}, levity gets --quiUser on the same five slots; all selectors prefixed w. .sig-stage-card to match the 0,4,0 specificity of the default `.sig-stage .sig-stage-card .fan-card-face .sig-qualifier-*` rule (without the prefix the polarity overrides lose the cascade — .sig-qualifier-below was visibly stuck on the default --quiUser) ; .stat-face-label gets polarity-inverse colours — gravity stat-block bg is --secUser (opposite of card's --priUser) so the label takes --quiUser to stay legible; levity is the symmetric flip (label = --terUser on --priUser stat-block bg) ; levity card title/qualifier drop-shadow swapped from rgba(0,0,0,…) → rgba(255,255,255,…) — dark drop reads as harsh smudge against the inverted-frame levity --secUser bg; applied to both sig-overlay[data-polarity="levity"] stage card AND sea-stage--levity via $_sea-title-shadow-levity (former shared $_sea-title-shadow split into per-polarity {levity,gravity} variants) ; reversal-face class/content alignment so each `.fan-card-reversal-*` class always carries its semantic content — DOM order per arcana type controls visual layout after the 180° SPIN (DOM-second appears visually on top): Major → title in .fan-card-reversal-name @ DOM-second (visually top after spin), qualifier in .fan-card-reversal-qualifier @ DOM-first; Non-major → title in .fan-card-reversal-name @ DOM-first (visually bottom after spin), qualifier in .fan-card-reversal-qualifier @ DOM-second (preserves the original "qualifier word reads first after spin" layout for Middle/Minor arcana — e.g. "Relieving / Eight of Crowns" not "Eight of Crowns / Relieving") ; _tarot_fan.html renders per-arcana DOM order directly (Django template branches handle both layouts); sig + sea overlays render a fixed two-`<p>` skeleton (one DOM order) so stage-card.js's populator dynamically rewrites the two `<p>`s' className per arcana — Major/override branch flips DOM-second to .fan-card-reversal-name + content, DOM-first to .fan-card-reversal-qualifier; non-major branch keeps DOM-first as .fan-card-reversal-name + title, DOM-second as .fan-card-reversal-qualifier + reversalQualifier-or-polarity-fallback ; SigSelectSpec.js + SeaDealSpec.js fixtures + Major reversed-face assertion updated for the new semantic — TDD
Code architected by Disco DeDisco <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-18 00:25:10 -04:00
|
|
|
|
// Sea stage card title — polarity-specific colour + glow. Drop shadow polarity-split:
|
|
|
|
|
|
// levity card has a light --secUser bg so a dark drop reads as smudge under the
|
|
|
|
|
|
// --quiUser title; gravity card is dark --priUser bg so the dark drop reads clean.
|
|
|
|
|
|
$_sea-title-shadow-levity: 1px 1px 0 rgba(255,255,255,1), 0 0 0.25rem rgba(var(--ninUser), 0.25);
|
|
|
|
|
|
$_sea-title-shadow-gravity: 1px 1px 0 rgba(0,0,0,1), 0 0 0.25rem rgba(var(--ninUser), 0.25);
|
2026-04-29 02:30:59 -04:00
|
|
|
|
$_sea-title-els: '.fan-card-name, .sig-qualifier-above, .sig-qualifier-below, .fan-card-reversal-name, .fan-card-reversal-qualifier';
|
|
|
|
|
|
|
|
|
|
|
|
.sea-stage--levity .sea-stage-card {
|
2026-04-30 21:01:52 -04:00
|
|
|
|
@include stage-card-polarity(
|
|
|
|
|
|
$titles-color: rgba(var(--quiUser), 1),
|
btn-primary label renames + stage-card polarity color refinements — two interleaved threads from one session, committing together since both touch sig + sea stage cards ; LABEL RENAMES: PICK SIGS → SCAN SIGS (room.html #id_pick_sigs_btn), PICK SKY → CAST SKY (room.html #id_pick_sky_btn × 2), PICK SEA → DRAW SEA (room.html #id_pick_sea_btn), TAKE SIG → SAVE SIG (sig-select.js _takeSigBtn.textContent × 2 callsites + section comment) — Element IDs (id_pick_sky_btn etc.), URL names (epic:pick_sigs, epic:pick_sky), and Python state enums (TableStatus.PICK_SKY, PICK_SEA, SIG_SELECT) intentionally retained as stable identifiers; the renamed text is purely the .btn-primary user-facing label ; FT + IT mentions of the old labels swept in test_game_room_select_{sig,sky,sea,role}.py, test_billboard.py, setup_sea_session.py mgmt cmd, apps/epic/{views,utils,models,tasks,tests/integrated/test_views}.py, SigSelectSpec.js, sky_overlay/sea_overlay/dashboard/sky.html, _card-deck.scss, _sky.scss — all docstring/comment references updated for cascade-grep cleanliness ; STAGE-CARD COLOR + CLASS REFINEMENTS (earlier in session): sig-stage card text colour split per polarity — gravity gets --terUser on .fan-card-name + .fan-card-reversal-{name,qualifier} + .sig-qualifier-{above,below}, levity gets --quiUser on the same five slots; all selectors prefixed w. .sig-stage-card to match the 0,4,0 specificity of the default `.sig-stage .sig-stage-card .fan-card-face .sig-qualifier-*` rule (without the prefix the polarity overrides lose the cascade — .sig-qualifier-below was visibly stuck on the default --quiUser) ; .stat-face-label gets polarity-inverse colours — gravity stat-block bg is --secUser (opposite of card's --priUser) so the label takes --quiUser to stay legible; levity is the symmetric flip (label = --terUser on --priUser stat-block bg) ; levity card title/qualifier drop-shadow swapped from rgba(0,0,0,…) → rgba(255,255,255,…) — dark drop reads as harsh smudge against the inverted-frame levity --secUser bg; applied to both sig-overlay[data-polarity="levity"] stage card AND sea-stage--levity via $_sea-title-shadow-levity (former shared $_sea-title-shadow split into per-polarity {levity,gravity} variants) ; reversal-face class/content alignment so each `.fan-card-reversal-*` class always carries its semantic content — DOM order per arcana type controls visual layout after the 180° SPIN (DOM-second appears visually on top): Major → title in .fan-card-reversal-name @ DOM-second (visually top after spin), qualifier in .fan-card-reversal-qualifier @ DOM-first; Non-major → title in .fan-card-reversal-name @ DOM-first (visually bottom after spin), qualifier in .fan-card-reversal-qualifier @ DOM-second (preserves the original "qualifier word reads first after spin" layout for Middle/Minor arcana — e.g. "Relieving / Eight of Crowns" not "Eight of Crowns / Relieving") ; _tarot_fan.html renders per-arcana DOM order directly (Django template branches handle both layouts); sig + sea overlays render a fixed two-`<p>` skeleton (one DOM order) so stage-card.js's populator dynamically rewrites the two `<p>`s' className per arcana — Major/override branch flips DOM-second to .fan-card-reversal-name + content, DOM-first to .fan-card-reversal-qualifier; non-major branch keeps DOM-first as .fan-card-reversal-name + title, DOM-second as .fan-card-reversal-qualifier + reversalQualifier-or-polarity-fallback ; SigSelectSpec.js + SeaDealSpec.js fixtures + Major reversed-face assertion updated for the new semantic — TDD
Code architected by Disco DeDisco <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-18 00:25:10 -04:00
|
|
|
|
$text-shadow: $_sea-title-shadow-levity,
|
2026-04-30 21:01:52 -04:00
|
|
|
|
$invert-frame: true,
|
|
|
|
|
|
);
|
2026-04-29 02:30:59 -04:00
|
|
|
|
color: rgba(var(--priUser), 1);
|
|
|
|
|
|
.fan-card-arcana,
|
2026-04-30 21:01:52 -04:00
|
|
|
|
.fan-card-corner { color: rgba(var(--priUser), 1); }
|
2026-04-29 02:30:59 -04:00
|
|
|
|
}
|
|
|
|
|
|
.sea-stage--gravity .sea-stage-card {
|
2026-04-30 21:01:52 -04:00
|
|
|
|
@include stage-card-polarity(
|
|
|
|
|
|
$titles-color: rgba(var(--terUser), 1),
|
btn-primary label renames + stage-card polarity color refinements — two interleaved threads from one session, committing together since both touch sig + sea stage cards ; LABEL RENAMES: PICK SIGS → SCAN SIGS (room.html #id_pick_sigs_btn), PICK SKY → CAST SKY (room.html #id_pick_sky_btn × 2), PICK SEA → DRAW SEA (room.html #id_pick_sea_btn), TAKE SIG → SAVE SIG (sig-select.js _takeSigBtn.textContent × 2 callsites + section comment) — Element IDs (id_pick_sky_btn etc.), URL names (epic:pick_sigs, epic:pick_sky), and Python state enums (TableStatus.PICK_SKY, PICK_SEA, SIG_SELECT) intentionally retained as stable identifiers; the renamed text is purely the .btn-primary user-facing label ; FT + IT mentions of the old labels swept in test_game_room_select_{sig,sky,sea,role}.py, test_billboard.py, setup_sea_session.py mgmt cmd, apps/epic/{views,utils,models,tasks,tests/integrated/test_views}.py, SigSelectSpec.js, sky_overlay/sea_overlay/dashboard/sky.html, _card-deck.scss, _sky.scss — all docstring/comment references updated for cascade-grep cleanliness ; STAGE-CARD COLOR + CLASS REFINEMENTS (earlier in session): sig-stage card text colour split per polarity — gravity gets --terUser on .fan-card-name + .fan-card-reversal-{name,qualifier} + .sig-qualifier-{above,below}, levity gets --quiUser on the same five slots; all selectors prefixed w. .sig-stage-card to match the 0,4,0 specificity of the default `.sig-stage .sig-stage-card .fan-card-face .sig-qualifier-*` rule (without the prefix the polarity overrides lose the cascade — .sig-qualifier-below was visibly stuck on the default --quiUser) ; .stat-face-label gets polarity-inverse colours — gravity stat-block bg is --secUser (opposite of card's --priUser) so the label takes --quiUser to stay legible; levity is the symmetric flip (label = --terUser on --priUser stat-block bg) ; levity card title/qualifier drop-shadow swapped from rgba(0,0,0,…) → rgba(255,255,255,…) — dark drop reads as harsh smudge against the inverted-frame levity --secUser bg; applied to both sig-overlay[data-polarity="levity"] stage card AND sea-stage--levity via $_sea-title-shadow-levity (former shared $_sea-title-shadow split into per-polarity {levity,gravity} variants) ; reversal-face class/content alignment so each `.fan-card-reversal-*` class always carries its semantic content — DOM order per arcana type controls visual layout after the 180° SPIN (DOM-second appears visually on top): Major → title in .fan-card-reversal-name @ DOM-second (visually top after spin), qualifier in .fan-card-reversal-qualifier @ DOM-first; Non-major → title in .fan-card-reversal-name @ DOM-first (visually bottom after spin), qualifier in .fan-card-reversal-qualifier @ DOM-second (preserves the original "qualifier word reads first after spin" layout for Middle/Minor arcana — e.g. "Relieving / Eight of Crowns" not "Eight of Crowns / Relieving") ; _tarot_fan.html renders per-arcana DOM order directly (Django template branches handle both layouts); sig + sea overlays render a fixed two-`<p>` skeleton (one DOM order) so stage-card.js's populator dynamically rewrites the two `<p>`s' className per arcana — Major/override branch flips DOM-second to .fan-card-reversal-name + content, DOM-first to .fan-card-reversal-qualifier; non-major branch keeps DOM-first as .fan-card-reversal-name + title, DOM-second as .fan-card-reversal-qualifier + reversalQualifier-or-polarity-fallback ; SigSelectSpec.js + SeaDealSpec.js fixtures + Major reversed-face assertion updated for the new semantic — TDD
Code architected by Disco DeDisco <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-18 00:25:10 -04:00
|
|
|
|
$text-shadow: $_sea-title-shadow-gravity,
|
2026-04-30 21:01:52 -04:00
|
|
|
|
);
|
2026-04-29 02:30:59 -04:00
|
|
|
|
}
|
|
|
|
|
|
|
fix: significator_reversed=polarity bug + Pattern B name-swap rendering + qualifier-aware applet faces + sticky PAID DRAW + cooldown anchor on User + stat-block polarity unification across Sig/Sea/Fan/applets
Five-thread sprint atop 53cd7af; all 1238 IT/UT green (no FTs run per [[feedback-ft-run-discipline]]).
**Thread 1 — User.significator_reversed is the POLARITY axis, not orientation.** The saved sig was rendering as a gravity reversal when the user saved a levity emanation. Root cause: `my_sign.html` JS post-save load called `_toggleOrientation()` whenever `revInput.value==='1'` (SPIN-ing a card whose flag only meant "polarity=levity"); `_applet-my-sign.html` applied `.stage-card--reversed` + `keywords_reversed` for the same flag. Fix: JS drops the `_toggleOrientation()` call (saved sigs are always upright in their polarity, never spun); the applet drops the rotation class, swaps to `my-sign-applet-card--{levity,gravity}` modifier, and always renders `keywords_upright` / "Emanation". `data-polarity` cascades correctly. Memory: [[feedback-significator-reversed-is-polarity]].
**Thread 2 — qualifier rendering on the My Sign + My Sea applets.** Both applets were rendering name only — no qualifier word. Added `TarotCard.applet_face(polarity, reversed)` (model method) + `User.sig_face` (delegator for the saved sig) returning `{title, qualifier, qualifier_first}` payload that mirrors `populateCard` in `stage-card.js`. `latest_draw_slots()` augments each slot dict w. `face`. Templates render `.fan-card-qualifier` + `.fan-card-name` in the order the payload dictates (non-Major: qualifier-above-title; Major+qualifier: title-with-trailing-comma above qualifier; polarity-split: single-line title). Typography matched to title (same bold, same size, same color via `color: inherit` w. polarity-pin at 0,3,0 specificity to beat `_card-deck.scss:376-383`'s 0,2,0 `.fan-card-face .fan-card-name` rule that out-cascades when loaded after gameboard).
**Thread 3 — My Sea cooldown bugs.** Two: (a) PAID DRAW button reverted to FREE DRAW after one navigation cycle because `my_sea_paid_draw` deleted the row at commit time — without a row, `quota_spent=False` on next render. (b) Brief's "next free draw at" was anchored to the most recent paid draw, not the original free draw. Fix: new `User.last_free_draw_at` field (set in `my_sea_lock` when a fresh row lands AND user wasn't already in cooldown — i.e., this is a tokenless free draw); paid draws NEVER touch it. New `MySeaDraw.paid_through_at` field stamped at commit time + cleared in `my_sea_lock` when the first card of the paid session lands (one-shot credit per user-spec: "each redraw needs a new token"). `my_sea_paid_draw` no longer deletes the row — clears hand+deposit, sets `paid_through_at`, redirects to `?phase=picker`. View's landing button uses `show_paid_draw` (`deposit_reserved OR paid_through_at`) so PAID DRAW persists across navigation until the paid session's first card lands. Brief reads `user.next_free_draw_at` (= `last_free_draw_at + 24h`) w. row-fallback for legacy test fixtures. 11 new ITs (`MySeaCooldownAnchoredToFreeDrawTest`, `UserFreeDrawCooldownPropertyTest`, expanded `MySeaPhasePickerQueryParamTest`, expanded `my_sea_lock` tests). Existing `test_paid_draw_deletes_active_draw_row` rewritten as `test_paid_draw_preserves_row_and_sets_paid_through_at`. 1 new FT pinning the navigation-persistence regression. Memory: [[feedback-my-sea-cooldown-design]].
**Thread 4 — Pattern B / B' Major reversal name-swap.** Card 34's My Sea applet rendered the reversal as "Animal Powers, Patrilineage" (Patrilineage treated as a qualifier). User-locked semantics: for Majors w. BOTH polarity qualifiers AND a `reversal_qualifier`, the `reversal_qualifier` field carries the NAME SWAP for the reversal face; the polarity qualifier persists across both faces. Affected cards: 2-5 (Pope/Horseman), 10-15 (Elements), 22-33 (Zodiac → Houses), 34-35 (Lunars), 41 (Asteroid Belt). Pattern B': cards 16-18 (Realms — Disco Inferno → Shame etc.) reversal face drops the qualifier entirely; new `TarotCard.reversal_drops_qualifier` BooleanField marks these (set True on 16-18 via `epic/0010_set_reversal_drops_qualifier_realms.py` data migration). `applet_face()` + `stage-card.js::populateCard` both branch on `arcana==MAJOR AND reversal_qualifier AND polarity_qualifier` → Pattern B/B' rendering. Non-Major `reversal_qualifier` semantics unchanged (middle court: "Queen of Crowns" stays as title, "Vacant" renders as the reversal-face qualifier). New data attr `data-reversal-drops-qualifier` added to `my_sign.html`, `_sig_select_overlay.html`, `_tarot_fan.html` so stage-card.js can read it via dataset. `card_dict()` extended w. the same field. 3 new UTs (`TarotCardAppletFaceTest`: Pattern B name swap, Pattern B' qualifier drop, non-Major regression pin). Old `test_reversed_uses_reversal_qualifier_with_comma_for_major` deleted (it pinned the conflated old behavior).
**Thread 5 — unified card + stat-block polarity convention across all 6 surfaces** (Sig Select, Sea Select stage modal, Game Kit fan, My Sign applet, My Sea applet, room.html). User-locked: card and adjacent stat block always carry OPPOSITE-polarity bgs (gravity card --priUser → stat block --secUser; levity card --secUser → stat block --priUser). `.is-reversed` (SPIN) is preview-only — never shifts bg. Per-card scoping (NOT page-wide) — drawn sea cards each carry their own polarity from the deck stack; `.sea-stage--{gravity,levity}` parent rules + `.tarot-fan-wrap[data-polarity=...]` parent rules cascade to their respective stat blocks. `game-kit.js` `_populateStage` + `_flipActive` mirror `_polarity` onto `.tarot-fan-wrap` so SCSS can pick it up without touching the stat block directly. Sea-stat-block was previously stuck at --priUser regardless of polarity; fan-stage-block ditto. Both inverted now. Memory: [[feedback-card-polarity-convention]].
**Bundled polish across the same surfaces** (each one a small visible item the user spotted during the sprint):
- My Sign applet card: levity polarity flips bg to --secUser + border to --priUser + ink to --quiUser (matches page stage card at `_card-deck.scss:1002-1019`). Gravity stat block flips to --secUser bg w. --quiUser label ink + --priUser keyword ink (matches `_card-deck.scss:1042-1046`).
- Qualifier + title share typography (font-size, weight, polarity-color, text-wrap). `.fan-card-face { gap: 0 }` + `line-height: 1.15` so qualifier sits directly above title at the title's own line-height. `.fan-card-arcana { margin-top }` reserves breathing room below.
- `.fan-card-qualifier:empty { display: none }` collapses polarity-split / Major-no-qualifier cards cleanly.
**Memory recorded**:
1. [[feedback-ft-run-discipline]] — re-pinned 2026-05-23 after I burned a multi-minute full-FT-suite run mid-task. Default loop is IT/UT only. FT runs must be ONE test method by full dotted path; never a whole file; never re-run an already-green FT.
2. [[feedback-significator-reversed-is-polarity]] — the flag is polarity (FLIP), not orientation (SPIN); SPIN never persisted; saved sigs always upright in their polarity.
3. [[feedback-card-polarity-convention]] — opposite-polarity stat-block bg, per-card scoping, SPIN never shifts bg, the full color table.
4. [[feedback-my-sea-cooldown-design]] — cooldown anchored to User.last_free_draw_at, paid draws never reset it, paid_through_at is a sticky one-shot credit, button state machine.
**Files** (every uncommitted file folded in — session work + pre-existing modifications):
Models / migrations:
- `apps/epic/models.py` — `applet_face()` extended w. Pattern B/B' branches; new `reversal_drops_qualifier` BooleanField.
- `apps/epic/migrations/0009_reversal_drops_qualifier.py` — schema.
- `apps/epic/migrations/0010_set_reversal_drops_qualifier_realms.py` — data migration setting flag True on cards 16-18.
- `apps/epic/utils.py` — `card_dict` carries `reversal_drops_qualifier`.
- `apps/gameboard/models.py` — `paid_through_at` field; `latest_draw_slots()` attaches `face` payload per slot; `active_draw_for` docstring refreshed.
- `apps/gameboard/migrations/0003_myseadraw_paid_through_at.py` — schema.
- `apps/lyric/models.py` — `last_free_draw_at` field; `free_draw_cooldown_active` + `next_free_draw_at` props; `sig_face` delegator.
- `apps/lyric/migrations/0013_user_last_free_draw_at.py` — schema.
Views:
- `apps/gameboard/views.py` — `my_sea` view button state machine (`show_paid_draw` / `show_gate_view` / `show_picker`); `my_sea_lock` sets `last_free_draw_at` on free-draw + clears `paid_through_at` on paid-session first card; `my_sea_paid_draw` preserves row + stamps `paid_through_at`.
JS:
- `apps/epic/static/apps/epic/stage-card.js` — `fromDataset` reads `reversal_drops_qualifier`; `populateCard` branches Pattern B / B' for the reversal face.
- `apps/gameboard/static/apps/gameboard/game-kit.js` — mirrors `_polarity` onto `.tarot-fan-wrap` so SCSS can invert the fan-stage-block bg per active card.
Templates:
- `templates/apps/billboard/my_sign.html` — JS drops `_toggleOrientation()` on saved-sig load; sig-card grid carries `data-reversal-drops-qualifier`.
- `templates/apps/billboard/_partials/_applet-my-sign.html` — drops `stage-card--reversed`, adds polarity modifier, renders qualifier via `sig_face` payload, always shows Emanation keywords + label.
- `templates/apps/gameboard/_partials/_applet-my-sea.html` — renders qualifier via `slot.face` payload (Pattern B/B' aware).
- `templates/apps/gameboard/_partials/_sig_select_overlay.html` + `_tarot_fan.html` — `data-reversal-drops-qualifier` added to sig-card grid + fan cards.
- `templates/apps/gameboard/my_sea.html` — landing button form swaps to `show_paid_draw` / `show_gate_view` flags.
SCSS:
- `static_src/scss/_billboard.scss` — My Sign applet card polarity inversion (levity bg + ink), polarity stat-block inversion (gravity → --secUser bg), qualifier+title shared typography, polarity-aware ink via `color: inherit`.
- `static_src/scss/_card-deck.scss` — sea-stat-block polarity rules (`.sea-stage--gravity/levity .sea-stat-block`), fan-stage-block polarity rules (`.tarot-fan-wrap[data-polarity] .fan-stage-block`), comments documenting fallback bgs.
- `static_src/scss/_gameboard.scss` — `.my-sea-slot--filled.--gravity/--levity` pin `color: inherit` on `.fan-card-corner`, `.fan-card-qualifier`, `.fan-card-name`, `.fan-card-arcana` (0,3,0 beats global 0,2,0). Slot label keeps original wrap-sibling placement w. `z-index: 2` to render above the dotted bottom border on empty slots.
Tests:
- `apps/billboard/tests/integrated/test_views.py` — updated `test_my_sign_applet_renders_card_when_sig_set` to assert polarity modifier + qualifier text + Emanation-only; new `test_my_sign_applet_renders_gravity_qualifier_when_not_reversed`.
- `apps/epic/tests/unit/test_models.py` — `TarotCardAppletFaceTest` (Pattern B name swap, Pattern B' qualifier drop, non-Major regression pin, polarity-split, reversal qualifier fallback).
- `apps/gameboard/tests/integrated/test_views.py` — `MySeaCooldownAnchoredToFreeDrawTest` (5 tests pinning cooldown anchor on User, sticky PAID DRAW, paid-through credit consumption); `UserFreeDrawCooldownPropertyTest` (4 tests); expanded `MySeaPhasePickerQueryParamTest` w. paid-through-shows-PAID-DRAW-btn assertion; expanded `my_sea_lock` tests (free-draw-anchors-last_free_draw_at, paid-draw-leaves-anchor-alone, first-paid-card-consumes-credit); My Sea applet qualifier IT (Major comma format end-to-end).
- `functional_tests/test_game_my_sea.py` — `test_paid_draw_commits_token_and_redirects_to_picker` updated to assert row preservation + paid_through_at stamping; new `test_paid_draw_btn_persists_after_navigation_without_card_draw` pinning the user-reported regression.
Code architected by Disco DeDisco <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-23 15:06:35 -04:00
|
|
|
|
// Sea stat block — reuses sig-select stat-block sizing, scoped to sea-stage.
|
|
|
|
|
|
// `background` left blank here; the `.sea-stage--gravity` / `.sea-stage--
|
|
|
|
|
|
// levity` parent rules below set the polarity-aware bg (sig convention,
|
|
|
|
|
|
// user-spec 2026-05-23: stat block always carries the OPPOSITE-polarity
|
|
|
|
|
|
// color of its adjacent card — gravity card / secUser stat block, levity
|
|
|
|
|
|
// card / priUser stat block). Fallback `--priUser` 0.85 stays for any
|
|
|
|
|
|
// stray `.sea-stat-block` rendered outside the polarity-classed parent.
|
PICK SEA Sprint C: sea stage card viewer — FLIP in, SPIN/FYI, deposit/re-expand — TDD
- sea.js: SeaDeal module — openStage() shows big card viewer w. flip-in animation;
SPIN toggles stage-card--reversed; FYI shows energies/operations (Energy/Operation
titles, PRV/NXT nav); backdrop click deposits card to slot; click deposited slot
re-opens stage; resetHand() clears hand on DEL
- sea_deck view: adds name_group/name_title/reversal/keywords_upright/keywords_reversed/
energies/operations to each card dict (full sig-select stage data set)
- _sea_overlay.html: data-sea-user-polarity attr; sea stage HTML (sig-stage-card shell
+ fan-card-face-upright/reversal structure + sea-stat-block w. SPIN/FYI/PRV/NXT);
FLIP click calls SeaDeal.openStage(); _fillPos removed (sea.js handles slot fill);
_reset calls SeaDeal.resetHand()
- room.html: sea.js included alongside sig-select.js
- _card-deck.scss: sea-stage layout (fixed overlay, backdrop, content row); sea-stage-card
w. @keyframes sea-flip-in (3D rotateY perspective); sea-stat-block scoped styles
incl. SPIN/FYI btns, stat faces, sig-info FYI panel
- SeaDealSpec.js: 20 Jasmine specs — openStage, SPIN, FYI, backdrop dismiss, slot re-expand
Code architected by Disco DeDisco <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-29 01:12:06 -04:00
|
|
|
|
.sea-stage-content .sea-stat-block {
|
|
|
|
|
|
flex: 0 0 auto;
|
|
|
|
|
|
width: var(--sig-card-w, 140px);
|
|
|
|
|
|
height: calc(var(--sig-card-w, 140px) * 8 / 5);
|
|
|
|
|
|
background: rgba(var(--priUser), 0.85);
|
|
|
|
|
|
border-radius: 0.4rem;
|
|
|
|
|
|
border: 0.1rem solid rgba(var(--terUser), 0.15);
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
display: block;
|
|
|
|
|
|
|
2026-04-30 21:01:52 -04:00
|
|
|
|
@include stat-block-shared;
|
PICK SEA Sprint C: sea stage card viewer — FLIP in, SPIN/FYI, deposit/re-expand — TDD
- sea.js: SeaDeal module — openStage() shows big card viewer w. flip-in animation;
SPIN toggles stage-card--reversed; FYI shows energies/operations (Energy/Operation
titles, PRV/NXT nav); backdrop click deposits card to slot; click deposited slot
re-opens stage; resetHand() clears hand on DEL
- sea_deck view: adds name_group/name_title/reversal/keywords_upright/keywords_reversed/
energies/operations to each card dict (full sig-select stage data set)
- _sea_overlay.html: data-sea-user-polarity attr; sea stage HTML (sig-stage-card shell
+ fan-card-face-upright/reversal structure + sea-stat-block w. SPIN/FYI/PRV/NXT);
FLIP click calls SeaDeal.openStage(); _fillPos removed (sea.js handles slot fill);
_reset calls SeaDeal.resetHand()
- room.html: sea.js included alongside sig-select.js
- _card-deck.scss: sea-stage layout (fixed overlay, backdrop, content row); sea-stage-card
w. @keyframes sea-flip-in (3D rotateY perspective); sea-stat-block scoped styles
incl. SPIN/FYI btns, stat faces, sig-info FYI panel
- SeaDealSpec.js: 20 Jasmine specs — openStage, SPIN, FYI, backdrop dismiss, slot re-expand
Code architected by Disco DeDisco <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-29 01:12:06 -04:00
|
|
|
|
|
2026-05-01 02:36:50 -04:00
|
|
|
|
// PRV/NXT only appear once the FYI tooltip is open (matches sig + fan).
|
|
|
|
|
|
&.fyi-open {
|
|
|
|
|
|
.fyi-prev, .fyi-next { display: inline-flex; }
|
|
|
|
|
|
}
|
PICK SEA Sprint C: sea stage card viewer — FLIP in, SPIN/FYI, deposit/re-expand — TDD
- sea.js: SeaDeal module — openStage() shows big card viewer w. flip-in animation;
SPIN toggles stage-card--reversed; FYI shows energies/operations (Energy/Operation
titles, PRV/NXT nav); backdrop click deposits card to slot; click deposited slot
re-opens stage; resetHand() clears hand on DEL
- sea_deck view: adds name_group/name_title/reversal/keywords_upright/keywords_reversed/
energies/operations to each card dict (full sig-select stage data set)
- _sea_overlay.html: data-sea-user-polarity attr; sea stage HTML (sig-stage-card shell
+ fan-card-face-upright/reversal structure + sea-stat-block w. SPIN/FYI/PRV/NXT);
FLIP click calls SeaDeal.openStage(); _fillPos removed (sea.js handles slot fill);
_reset calls SeaDeal.resetHand()
- room.html: sea.js included alongside sig-select.js
- _card-deck.scss: sea-stage layout (fixed overlay, backdrop, content row); sea-stage-card
w. @keyframes sea-flip-in (3D rotateY perspective); sea-stat-block scoped styles
incl. SPIN/FYI btns, stat faces, sig-info FYI panel
- SeaDealSpec.js: 20 Jasmine specs — openStage, SPIN, FYI, backdrop dismiss, slot re-expand
Code architected by Disco DeDisco <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-29 01:12:06 -04:00
|
|
|
|
}
|
|
|
|
|
|
|
fix: significator_reversed=polarity bug + Pattern B name-swap rendering + qualifier-aware applet faces + sticky PAID DRAW + cooldown anchor on User + stat-block polarity unification across Sig/Sea/Fan/applets
Five-thread sprint atop 53cd7af; all 1238 IT/UT green (no FTs run per [[feedback-ft-run-discipline]]).
**Thread 1 — User.significator_reversed is the POLARITY axis, not orientation.** The saved sig was rendering as a gravity reversal when the user saved a levity emanation. Root cause: `my_sign.html` JS post-save load called `_toggleOrientation()` whenever `revInput.value==='1'` (SPIN-ing a card whose flag only meant "polarity=levity"); `_applet-my-sign.html` applied `.stage-card--reversed` + `keywords_reversed` for the same flag. Fix: JS drops the `_toggleOrientation()` call (saved sigs are always upright in their polarity, never spun); the applet drops the rotation class, swaps to `my-sign-applet-card--{levity,gravity}` modifier, and always renders `keywords_upright` / "Emanation". `data-polarity` cascades correctly. Memory: [[feedback-significator-reversed-is-polarity]].
**Thread 2 — qualifier rendering on the My Sign + My Sea applets.** Both applets were rendering name only — no qualifier word. Added `TarotCard.applet_face(polarity, reversed)` (model method) + `User.sig_face` (delegator for the saved sig) returning `{title, qualifier, qualifier_first}` payload that mirrors `populateCard` in `stage-card.js`. `latest_draw_slots()` augments each slot dict w. `face`. Templates render `.fan-card-qualifier` + `.fan-card-name` in the order the payload dictates (non-Major: qualifier-above-title; Major+qualifier: title-with-trailing-comma above qualifier; polarity-split: single-line title). Typography matched to title (same bold, same size, same color via `color: inherit` w. polarity-pin at 0,3,0 specificity to beat `_card-deck.scss:376-383`'s 0,2,0 `.fan-card-face .fan-card-name` rule that out-cascades when loaded after gameboard).
**Thread 3 — My Sea cooldown bugs.** Two: (a) PAID DRAW button reverted to FREE DRAW after one navigation cycle because `my_sea_paid_draw` deleted the row at commit time — without a row, `quota_spent=False` on next render. (b) Brief's "next free draw at" was anchored to the most recent paid draw, not the original free draw. Fix: new `User.last_free_draw_at` field (set in `my_sea_lock` when a fresh row lands AND user wasn't already in cooldown — i.e., this is a tokenless free draw); paid draws NEVER touch it. New `MySeaDraw.paid_through_at` field stamped at commit time + cleared in `my_sea_lock` when the first card of the paid session lands (one-shot credit per user-spec: "each redraw needs a new token"). `my_sea_paid_draw` no longer deletes the row — clears hand+deposit, sets `paid_through_at`, redirects to `?phase=picker`. View's landing button uses `show_paid_draw` (`deposit_reserved OR paid_through_at`) so PAID DRAW persists across navigation until the paid session's first card lands. Brief reads `user.next_free_draw_at` (= `last_free_draw_at + 24h`) w. row-fallback for legacy test fixtures. 11 new ITs (`MySeaCooldownAnchoredToFreeDrawTest`, `UserFreeDrawCooldownPropertyTest`, expanded `MySeaPhasePickerQueryParamTest`, expanded `my_sea_lock` tests). Existing `test_paid_draw_deletes_active_draw_row` rewritten as `test_paid_draw_preserves_row_and_sets_paid_through_at`. 1 new FT pinning the navigation-persistence regression. Memory: [[feedback-my-sea-cooldown-design]].
**Thread 4 — Pattern B / B' Major reversal name-swap.** Card 34's My Sea applet rendered the reversal as "Animal Powers, Patrilineage" (Patrilineage treated as a qualifier). User-locked semantics: for Majors w. BOTH polarity qualifiers AND a `reversal_qualifier`, the `reversal_qualifier` field carries the NAME SWAP for the reversal face; the polarity qualifier persists across both faces. Affected cards: 2-5 (Pope/Horseman), 10-15 (Elements), 22-33 (Zodiac → Houses), 34-35 (Lunars), 41 (Asteroid Belt). Pattern B': cards 16-18 (Realms — Disco Inferno → Shame etc.) reversal face drops the qualifier entirely; new `TarotCard.reversal_drops_qualifier` BooleanField marks these (set True on 16-18 via `epic/0010_set_reversal_drops_qualifier_realms.py` data migration). `applet_face()` + `stage-card.js::populateCard` both branch on `arcana==MAJOR AND reversal_qualifier AND polarity_qualifier` → Pattern B/B' rendering. Non-Major `reversal_qualifier` semantics unchanged (middle court: "Queen of Crowns" stays as title, "Vacant" renders as the reversal-face qualifier). New data attr `data-reversal-drops-qualifier` added to `my_sign.html`, `_sig_select_overlay.html`, `_tarot_fan.html` so stage-card.js can read it via dataset. `card_dict()` extended w. the same field. 3 new UTs (`TarotCardAppletFaceTest`: Pattern B name swap, Pattern B' qualifier drop, non-Major regression pin). Old `test_reversed_uses_reversal_qualifier_with_comma_for_major` deleted (it pinned the conflated old behavior).
**Thread 5 — unified card + stat-block polarity convention across all 6 surfaces** (Sig Select, Sea Select stage modal, Game Kit fan, My Sign applet, My Sea applet, room.html). User-locked: card and adjacent stat block always carry OPPOSITE-polarity bgs (gravity card --priUser → stat block --secUser; levity card --secUser → stat block --priUser). `.is-reversed` (SPIN) is preview-only — never shifts bg. Per-card scoping (NOT page-wide) — drawn sea cards each carry their own polarity from the deck stack; `.sea-stage--{gravity,levity}` parent rules + `.tarot-fan-wrap[data-polarity=...]` parent rules cascade to their respective stat blocks. `game-kit.js` `_populateStage` + `_flipActive` mirror `_polarity` onto `.tarot-fan-wrap` so SCSS can pick it up without touching the stat block directly. Sea-stat-block was previously stuck at --priUser regardless of polarity; fan-stage-block ditto. Both inverted now. Memory: [[feedback-card-polarity-convention]].
**Bundled polish across the same surfaces** (each one a small visible item the user spotted during the sprint):
- My Sign applet card: levity polarity flips bg to --secUser + border to --priUser + ink to --quiUser (matches page stage card at `_card-deck.scss:1002-1019`). Gravity stat block flips to --secUser bg w. --quiUser label ink + --priUser keyword ink (matches `_card-deck.scss:1042-1046`).
- Qualifier + title share typography (font-size, weight, polarity-color, text-wrap). `.fan-card-face { gap: 0 }` + `line-height: 1.15` so qualifier sits directly above title at the title's own line-height. `.fan-card-arcana { margin-top }` reserves breathing room below.
- `.fan-card-qualifier:empty { display: none }` collapses polarity-split / Major-no-qualifier cards cleanly.
**Memory recorded**:
1. [[feedback-ft-run-discipline]] — re-pinned 2026-05-23 after I burned a multi-minute full-FT-suite run mid-task. Default loop is IT/UT only. FT runs must be ONE test method by full dotted path; never a whole file; never re-run an already-green FT.
2. [[feedback-significator-reversed-is-polarity]] — the flag is polarity (FLIP), not orientation (SPIN); SPIN never persisted; saved sigs always upright in their polarity.
3. [[feedback-card-polarity-convention]] — opposite-polarity stat-block bg, per-card scoping, SPIN never shifts bg, the full color table.
4. [[feedback-my-sea-cooldown-design]] — cooldown anchored to User.last_free_draw_at, paid draws never reset it, paid_through_at is a sticky one-shot credit, button state machine.
**Files** (every uncommitted file folded in — session work + pre-existing modifications):
Models / migrations:
- `apps/epic/models.py` — `applet_face()` extended w. Pattern B/B' branches; new `reversal_drops_qualifier` BooleanField.
- `apps/epic/migrations/0009_reversal_drops_qualifier.py` — schema.
- `apps/epic/migrations/0010_set_reversal_drops_qualifier_realms.py` — data migration setting flag True on cards 16-18.
- `apps/epic/utils.py` — `card_dict` carries `reversal_drops_qualifier`.
- `apps/gameboard/models.py` — `paid_through_at` field; `latest_draw_slots()` attaches `face` payload per slot; `active_draw_for` docstring refreshed.
- `apps/gameboard/migrations/0003_myseadraw_paid_through_at.py` — schema.
- `apps/lyric/models.py` — `last_free_draw_at` field; `free_draw_cooldown_active` + `next_free_draw_at` props; `sig_face` delegator.
- `apps/lyric/migrations/0013_user_last_free_draw_at.py` — schema.
Views:
- `apps/gameboard/views.py` — `my_sea` view button state machine (`show_paid_draw` / `show_gate_view` / `show_picker`); `my_sea_lock` sets `last_free_draw_at` on free-draw + clears `paid_through_at` on paid-session first card; `my_sea_paid_draw` preserves row + stamps `paid_through_at`.
JS:
- `apps/epic/static/apps/epic/stage-card.js` — `fromDataset` reads `reversal_drops_qualifier`; `populateCard` branches Pattern B / B' for the reversal face.
- `apps/gameboard/static/apps/gameboard/game-kit.js` — mirrors `_polarity` onto `.tarot-fan-wrap` so SCSS can invert the fan-stage-block bg per active card.
Templates:
- `templates/apps/billboard/my_sign.html` — JS drops `_toggleOrientation()` on saved-sig load; sig-card grid carries `data-reversal-drops-qualifier`.
- `templates/apps/billboard/_partials/_applet-my-sign.html` — drops `stage-card--reversed`, adds polarity modifier, renders qualifier via `sig_face` payload, always shows Emanation keywords + label.
- `templates/apps/gameboard/_partials/_applet-my-sea.html` — renders qualifier via `slot.face` payload (Pattern B/B' aware).
- `templates/apps/gameboard/_partials/_sig_select_overlay.html` + `_tarot_fan.html` — `data-reversal-drops-qualifier` added to sig-card grid + fan cards.
- `templates/apps/gameboard/my_sea.html` — landing button form swaps to `show_paid_draw` / `show_gate_view` flags.
SCSS:
- `static_src/scss/_billboard.scss` — My Sign applet card polarity inversion (levity bg + ink), polarity stat-block inversion (gravity → --secUser bg), qualifier+title shared typography, polarity-aware ink via `color: inherit`.
- `static_src/scss/_card-deck.scss` — sea-stat-block polarity rules (`.sea-stage--gravity/levity .sea-stat-block`), fan-stage-block polarity rules (`.tarot-fan-wrap[data-polarity] .fan-stage-block`), comments documenting fallback bgs.
- `static_src/scss/_gameboard.scss` — `.my-sea-slot--filled.--gravity/--levity` pin `color: inherit` on `.fan-card-corner`, `.fan-card-qualifier`, `.fan-card-name`, `.fan-card-arcana` (0,3,0 beats global 0,2,0). Slot label keeps original wrap-sibling placement w. `z-index: 2` to render above the dotted bottom border on empty slots.
Tests:
- `apps/billboard/tests/integrated/test_views.py` — updated `test_my_sign_applet_renders_card_when_sig_set` to assert polarity modifier + qualifier text + Emanation-only; new `test_my_sign_applet_renders_gravity_qualifier_when_not_reversed`.
- `apps/epic/tests/unit/test_models.py` — `TarotCardAppletFaceTest` (Pattern B name swap, Pattern B' qualifier drop, non-Major regression pin, polarity-split, reversal qualifier fallback).
- `apps/gameboard/tests/integrated/test_views.py` — `MySeaCooldownAnchoredToFreeDrawTest` (5 tests pinning cooldown anchor on User, sticky PAID DRAW, paid-through credit consumption); `UserFreeDrawCooldownPropertyTest` (4 tests); expanded `MySeaPhasePickerQueryParamTest` w. paid-through-shows-PAID-DRAW-btn assertion; expanded `my_sea_lock` tests (free-draw-anchors-last_free_draw_at, paid-draw-leaves-anchor-alone, first-paid-card-consumes-credit); My Sea applet qualifier IT (Major comma format end-to-end).
- `functional_tests/test_game_my_sea.py` — `test_paid_draw_commits_token_and_redirects_to_picker` updated to assert row preservation + paid_through_at stamping; new `test_paid_draw_btn_persists_after_navigation_without_card_draw` pinning the user-reported regression.
Code architected by Disco DeDisco <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-23 15:06:35 -04:00
|
|
|
|
// Sea stat block — polarity inversion (sig convention applied to sea,
|
|
|
|
|
|
// user-spec 2026-05-23). The drawn card's polarity (set by SeaDeal at
|
|
|
|
|
|
// stage-open time via `.sea-stage--gravity` / `.sea-stage--levity` on
|
|
|
|
|
|
// the stage root) cascades to the stat block here. SPIN/face-swap is
|
|
|
|
|
|
// unchanged — `.is-reversed` still just toggles which face renders;
|
|
|
|
|
|
// it does NOT shift the bg (orientation is preview-only, polarity is
|
|
|
|
|
|
// the persisted axis that paints the surfaces).
|
|
|
|
|
|
.sea-stage--gravity .sea-stat-block {
|
|
|
|
|
|
background: rgba(var(--secUser), 0.85);
|
|
|
|
|
|
border-color: rgba(var(--priUser), 0.15);
|
|
|
|
|
|
.stat-face-label { color: rgba(var(--quiUser), 1); }
|
|
|
|
|
|
.stat-keywords li {
|
|
|
|
|
|
color: rgba(var(--priUser), 1);
|
|
|
|
|
|
border-bottom-color: rgba(var(--priUser), 0.18);
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.sea-stage--levity .sea-stat-block {
|
|
|
|
|
|
background: rgba(var(--priUser), 0.85);
|
|
|
|
|
|
border-color: rgba(var(--terUser), 0.15);
|
|
|
|
|
|
.stat-face-label { color: rgba(var(--terUser), 1); }
|
|
|
|
|
|
.stat-keywords li {
|
|
|
|
|
|
color: rgba(var(--quiUser), 1);
|
|
|
|
|
|
border-bottom-color: rgba(var(--terUser), 0.18);
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2026-04-27 01:02:01 -04:00
|
|
|
|
@media (orientation: landscape) {
|
|
|
|
|
|
html.sea-open body .container .navbar,
|
|
|
|
|
|
html.sea-open body #id_footer {
|
|
|
|
|
|
z-index: 90;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|