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.
|
|
|
|
|
|
.sig-stage-card.sig-stage-card--image {
|
|
|
|
|
|
--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;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.sig-stage-card-img {
|
|
|
|
|
|
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));
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
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-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;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|