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>
This commit is contained in:
Disco DeDisco
@@ -270,7 +270,7 @@
|
||||
// Only redraw the wheel when a saved sky already exists on the page —
|
||||
// pre-first-save we suppress the live wheel preview so it doesn't
|
||||
// shunt the form (and SAVE SKY) below the fold. Mirrors the My Sky
|
||||
// applet's "no wheel until saved" UX. The in-room PICK SKY overlay
|
||||
// applet's "no wheel until saved" UX. The in-room CAST SKY overlay
|
||||
// intentionally still previews live.
|
||||
if (_savedSky) {
|
||||
if (svgEl.querySelector('*')) {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{% load static %}
|
||||
{# PICK SEA overlay — Celtic Cross spread entry #}
|
||||
{# DRAW SEA overlay — Celtic Cross spread entry #}
|
||||
{# Included in room.html when table_status == "SKY_SELECT" and sky_confirmed #}
|
||||
{# Layout is the reverse of PICK SKY: cards left (transparent), form right #}
|
||||
{# Layout is the reverse of CAST SKY: cards left (transparent), form right #}
|
||||
|
||||
<div class="sea-backdrop"></div>
|
||||
<div class="sea-overlay" id="id_sea_overlay"
|
||||
@@ -156,6 +156,9 @@
|
||||
</div>
|
||||
<p class="fan-card-arcana"></p>
|
||||
<div class="fan-card-face-reversal">
|
||||
{# Default DOM order — matches non-major arcana layout. stage-card.js #}
|
||||
{# swaps the class names on these <p>s for Major arcana so each #}
|
||||
{# element's class still matches its semantic content. #}
|
||||
<p class="fan-card-reversal-name"></p>
|
||||
<p class="fan-card-reversal-qualifier"></p>
|
||||
</div>
|
||||
|
||||
@@ -32,6 +32,10 @@ Context: sig_cards, user_polarity, user_seat, sig_reserve_url, sig_reservations_
|
||||
<p class="fan-card-arcana"></p>
|
||||
<p class="fan-card-correspondence"></p>{# not shown in sig-select — game-kit only #}
|
||||
<div class="fan-card-face-reversal">
|
||||
{# Default DOM order — matches non-major arcana layout (qualifier visually #}
|
||||
{# on top after spin, title visually below). stage-card.js swaps the class #}
|
||||
{# names on these <p>s for Major arcana so each element's class still #}
|
||||
{# matches its semantic content (title → .fan-card-reversal-name etc.). #}
|
||||
<p class="fan-card-reversal-name"></p>
|
||||
<p class="fan-card-reversal-qualifier"></p>
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
{% load static %}
|
||||
{# PICK SKY overlay — natal chart entry + D3 wheel preview #}
|
||||
{# CAST SKY overlay — natal chart entry + D3 wheel preview #}
|
||||
{# Included in room.html when table_status == "SKY_SELECT" #}
|
||||
{# Opens when user clicks #id_pick_sky_btn; html.sky-open controls #}
|
||||
{# visibility via CSS — backdrop-filter blur + centred modal. #}
|
||||
@@ -90,7 +90,7 @@
|
||||
{# ── Wheel column ─────────────────────────────────────── #}
|
||||
{# DEL btn is JS-injected after the wheel paints (see schedule #}
|
||||
{# Preview success handler) — keeping it out of the template #}
|
||||
{# means a blank PICK SKY modal can never show a DEL action #}
|
||||
{# means a blank CAST SKY modal can never show a DEL action #}
|
||||
{# against a non-existent wheel. #}
|
||||
<div class="sky-wheel-col">
|
||||
<svg id="id_sky_svg" class="sky-svg"></svg>
|
||||
@@ -400,12 +400,12 @@
|
||||
});
|
||||
});
|
||||
|
||||
// ── Sky confirmed → close sky & reload to land on hex w. PICK SEA ──────
|
||||
// ── Sky confirmed → close sky & reload to land on hex w. DRAW SEA ──────
|
||||
//
|
||||
// The gamer should witness the table hex (now showing PICK SEA in place of
|
||||
// PICK SKY) before opting into the sea overlay. We reload the room page —
|
||||
// The gamer should witness the table hex (now showing DRAW SEA in place of
|
||||
// CAST SKY) before opting into the sea overlay. We reload the room page —
|
||||
// the server-side template will re-render with `sky_confirmed=True` so the
|
||||
// hex's btn flips automatically, and the user clicks PICK SEA to continue.
|
||||
// hex's btn flips automatically, and the user clicks DRAW SEA to continue.
|
||||
|
||||
function _onSkyConfirmed() {
|
||||
closeSky();
|
||||
@@ -413,7 +413,7 @@
|
||||
}
|
||||
|
||||
// ── DEL btn — JS-injected after the wheel paints; absent on a blank modal
|
||||
// PICK SKY's wheel is a live preview; un-saved data lives only in LS_KEY.
|
||||
// CAST SKY's wheel is a live preview; un-saved data lives only in LS_KEY.
|
||||
// The btn is created lazily after the first SkyWheel.draw so a blank modal
|
||||
// can never offer a DEL action against a non-existent wheel; clearing the
|
||||
// SVG removes the btn from the DOM entirely (re-injected on next preview).
|
||||
|
||||
@@ -43,16 +43,20 @@
|
||||
<p class="fan-card-arcana">{{ card.get_arcana_display }}</p>
|
||||
<div class="fan-card-face-reversal">
|
||||
{% comment %}
|
||||
DOM order: reversal-name first, reversal-qualifier second.
|
||||
After SPIN's 180° rotation DOM-second appears visually on top.
|
||||
Class names always match semantic content: qualifier text in
|
||||
.fan-card-reversal-qualifier, title text in .fan-card-reversal-name.
|
||||
DOM order is per-arcana, controlling visual layout after the 180°
|
||||
SPIN rotation (DOM-second appears visually on top):
|
||||
Major / polarity-split — title on top → name class is DOM-second
|
||||
Non-major — qualifier on top → qualifier class is DOM-second
|
||||
{% endcomment %}
|
||||
{% if card.gravity_reversal %}
|
||||
{# Polarity-split reversal title — single line, qualifier slot empty. Title goes in the qualifier slot so it visually lands on top after spin. #}
|
||||
<p class="fan-card-reversal-name"></p>
|
||||
<p class="fan-card-reversal-qualifier {{ card.title_squeeze_class }}">{{ card.gravity_reversal|italicize:card.italic_word }}</p>
|
||||
{# Polarity-split: single-line title in the name slot, qualifier slot empty. #}
|
||||
<p class="fan-card-reversal-qualifier"></p>
|
||||
<p class="fan-card-reversal-name {{ card.title_squeeze_class }}">{{ card.gravity_reversal|italicize:card.italic_word }}</p>
|
||||
{% elif card.arcana == "MAJOR" %}
|
||||
<p class="fan-card-reversal-name">{{ card.gravity_qualifier|default:card.levity_qualifier }}</p>
|
||||
<p class="fan-card-reversal-qualifier {{ card.title_squeeze_class }}">{{ card.name_title|italicize:card.italic_word }}{% if card.gravity_qualifier %},{% endif %}</p>
|
||||
<p class="fan-card-reversal-qualifier">{{ card.gravity_qualifier|default:card.levity_qualifier }}</p>
|
||||
<p class="fan-card-reversal-name {{ card.title_squeeze_class }}">{{ card.name_title|italicize:card.italic_word }}{% if card.gravity_qualifier %},{% endif %}</p>
|
||||
{% else %}
|
||||
<p class="fan-card-reversal-name {{ card.title_squeeze_class }}">{{ card.name_title|italicize:card.italic_word }}</p>
|
||||
<p class="fan-card-reversal-qualifier">{{ card.reversal_qualifier|default:card.gravity_qualifier }}</p>
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
<div id="id_pick_sigs_wrap"{% if starter_roles|length < 6 %} style="display:none"{% endif %}>
|
||||
<form method="POST" action="{% url 'epic:pick_sigs' room.id %}">
|
||||
{% csrf_token %}
|
||||
<button id="id_pick_sigs_btn" type="submit" class="btn btn-primary">PICK<br>SIGS</button>
|
||||
<button id="id_pick_sigs_btn" type="submit" class="btn btn-primary">SCAN<br>SIGS</button>
|
||||
</form>
|
||||
</div>
|
||||
{% endif %}
|
||||
@@ -37,12 +37,12 @@
|
||||
{% endif %}
|
||||
{% if room.table_status == "SKY_SELECT" %}
|
||||
{% if sky_confirmed %}
|
||||
<button id="id_pick_sea_btn" class="btn btn-primary">PICK<br>SEA</button>
|
||||
<button id="id_pick_sea_btn" class="btn btn-primary">DRAW<br>SEA</button>
|
||||
{% else %}
|
||||
<button id="id_pick_sky_btn" class="btn btn-primary">PICK<br>SKY</button>
|
||||
<button id="id_pick_sky_btn" class="btn btn-primary">CAST<br>SKY</button>
|
||||
{% endif %}
|
||||
{% elif room.table_status == "SIG_SELECT" %}
|
||||
<button id="id_pick_sky_btn" class="btn btn-primary" style="display:none">PICK<br>SKY</button>
|
||||
<button id="id_pick_sky_btn" class="btn btn-primary" style="display:none">CAST<br>SKY</button>
|
||||
{% if polarity_done %}
|
||||
<p id="id_hex_waiting_msg">{% if user_polarity == "levity" %}Gravity settling . . .{% else %}Levity appraising . . .{% endif %}</p>
|
||||
{% endif %}
|
||||
|
||||
Reference in New Issue
Block a user