From ad7a354f8c178297eded03948fa4db1b56e26395 Mon Sep 17 00:00:00 2001 From: Disco DeDisco Date: Mon, 27 Apr 2026 01:02:01 -0400 Subject: [PATCH] =?UTF-8?q?PICK=20SEA=20overlay:=20sea=20SCSS=20=E2=86=92?= =?UTF-8?q?=20=5Fcard-deck.scss;=20Sig=20card=20+=20qualifier=20display;?= =?UTF-8?q?=20crossing=20slot=20deferred?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - sea overlay SCSS moved from _natus.scss to end of _card-deck.scss (correct file for card/overlay primitives) - Significator center slot: sig-stage-card w. .sea-cross context rule (background, border, aspect-ratio, overflow); fan-card-face name + sig-qualifier-above/below at 0.5rem w. word-wrap - _sea_overlay.html: qualifier rendered from user_polarity + arcana (MIDDLE → Leavened/Graven above; MAJOR → below); crossing slot removed from HTML + grid-template-areas (deferred re-add later) - SCSS grid trimmed to 3 rows (crown/past-center-future/root); .sea-pos-crossing class kept for later reuse Code architected by Disco DeDisco Git commit message Co-Authored-By: Claude Sonnet 4.6 --- src/static_src/scss/_card-deck.scss | 201 ++++++++++++++++++ src/static_src/scss/_natus.scss | 190 ----------------- .../gameboard/_partials/_sea_overlay.html | 21 +- 3 files changed, 215 insertions(+), 197 deletions(-) diff --git a/src/static_src/scss/_card-deck.scss b/src/static_src/scss/_card-deck.scss index 8f772f8..06465fa 100644 --- a/src/static_src/scss/_card-deck.scss +++ b/src/static_src/scss/_card-deck.scss @@ -670,3 +670,204 @@ html:has(.sig-backdrop) { #id_room_menu { right: 2.5rem; } } +// ── PICK SEA overlay ───────────────────────────────────────────────────────── +// Mirrors .natus-* structure but with columns reversed: +// 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 . " + "past center future " + ". root . "; + grid-template-columns: 1fr 1fr 1fr; + grid-template-rows: auto auto auto; + gap: 0.5rem; + align-items: center; + justify-items: center; +} + +.sea-cross-cell { display: flex; align-items: center; justify-content: center; } +.sea-pos-crown { grid-area: crown; } +.sea-pos-past { grid-area: past; } +.sea-pos-center { grid-area: center; } +.sea-pos-future { grid-area: future; } +.sea-pos-root { grid-area: root; } +.sea-pos-crossing { grid-area: crossing; } + +$sea-card-w: 4rem; +$sea-card-h: 6.5rem; + +.sea-card-slot { + width: $sea-card-w; + height: $sea-card-h; + border: 0.15rem dashed rgba(var(--terUser), 0.45); + 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 { + width: $sea-card-h; // rotated — swap w/h + height: $sea-card-w; +} + +// .sig-stage-card is normally scoped inside .sig-stage — re-apply the card shell +// here so it renders correctly outside that context. +.sea-cross .sig-stage-card { + 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); + 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); +} + +.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; } +} + +.sea-select { + 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%; + + option { background: rgba(var(--priUser), 1); } +} + +.sea-form-col > #id_sea_deal { + margin-top: auto; +} + +// NVM button — same positioning as .natus-modal-wrap > .btn-cancel +.sea-modal-wrap > .btn-cancel { + position: absolute; + top: -0.75rem; + right: -0.75rem; + z-index: 10; +} + +@media (orientation: landscape) { + html.sea-open body .container .navbar, + html.sea-open body #id_footer { + z-index: 90; + } +} + diff --git a/src/static_src/scss/_natus.scss b/src/static_src/scss/_natus.scss index 4392fc0..b527443 100644 --- a/src/static_src/scss/_natus.scss +++ b/src/static_src/scss/_natus.scss @@ -934,193 +934,3 @@ body.page-sky { z-index: 90; } } - -// ── PICK SEA overlay ───────────────────────────────────────────────────────── -// Mirrors .natus-* structure but with columns reversed: -// 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 . " - "past center future " - ". root . " - ". crossing . "; - grid-template-columns: 1fr 1fr 1fr; - grid-template-rows: auto auto auto auto; - gap: 0.5rem; - align-items: center; - justify-items: center; -} - -.sea-cross-cell { display: flex; align-items: center; justify-content: center; } -.sea-pos-crown { grid-area: crown; } -.sea-pos-past { grid-area: past; } -.sea-pos-center { grid-area: center; } -.sea-pos-future { grid-area: future; } -.sea-pos-root { grid-area: root; } -.sea-pos-crossing { grid-area: crossing; } - -$sea-card-w: 4rem; -$sea-card-h: 6.5rem; - -.sea-card-slot { - width: $sea-card-w; - height: $sea-card-h; - border: 0.15rem dashed rgba(var(--terUser), 0.45); - 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--sig { - border-style: solid; - border-color: rgba(var(--priUser), 0.9); - background: rgba(var(--priUser), 0.15); - font-size: 0.65rem; - text-align: center; - padding: 0.25rem; - color: rgba(var(--terUser), 0.9); -} - -.sea-card-slot--crossing { - width: $sea-card-h; // rotated — swap w/h - height: $sea-card-w; -} - -.sea-sig-name { - display: block; - font-size: 0.6rem; - line-height: 1.2; - text-align: center; - word-break: break-word; -} - -// ── 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); -} - -.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; } -} - -.sea-select { - 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%; - - option { background: rgba(var(--priUser), 1); } -} - -.sea-form-col > #id_sea_deal { - margin-top: auto; - width: 100%; -} - -// NVM button — same positioning as .natus-modal-wrap > .btn-cancel -.sea-modal-wrap > .btn-cancel { - position: absolute; - top: -0.75rem; - right: -0.75rem; - z-index: 10; -} - -@media (orientation: landscape) { - html.sea-open body .container .navbar, - html.sea-open body #id_footer { - z-index: 90; - } -} diff --git a/src/templates/apps/gameboard/_partials/_sea_overlay.html b/src/templates/apps/gameboard/_partials/_sea_overlay.html index 4a58ce4..9d3dee0 100644 --- a/src/templates/apps/gameboard/_partials/_sea_overlay.html +++ b/src/templates/apps/gameboard/_partials/_sea_overlay.html @@ -11,7 +11,7 @@

PICK SEA

-

Choose your spread and draw your Celtic Cross.

+

Draw cards to circumscribe your character's influences and seed the Voronoi map.

@@ -29,9 +29,19 @@
{# Center — Significator (already placed) #}
-
+
{% if my_tray_sig %} - {{ my_tray_sig.name_title }} +
+ {% if my_tray_sig.arcana == "MIDDLE" %} +

{% if user_polarity == "levity" %}Leavened{% else %}Graven{% endif %}

+

{{ my_tray_sig.name_title }}

+ {% elif my_tray_sig.arcana == "MAJOR" %} +

{{ my_tray_sig.name_title }}

+

{% if user_polarity == "levity" %}Leavened{% else %}Graven{% endif %}

+ {% else %} +

{{ my_tray_sig.name_title }}

+ {% endif %} +
{% endif %}
@@ -43,10 +53,7 @@
- {# Crossing — position 2 (rotated across center) #} -
-
-
+ {# Crossing — position 2 (rotated) deferred; re-add once layout is finalized #}