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

PICK SEA: modal w. Celtic Cross layout + spread select; PICK SKY swaps to PICK SEA after sky save — TDD

Browse Source 
- _role_select_context: at SKY_SELECT, compute sky_confirmed (confirmed Character exists for seat) + user_polarity
- room.html: PICK SEA btn + _sea_overlay.html when sky_confirmed; PICK SKY + natus overlay otherwise
- _sea_overlay.html: transparent cards col (6-position cross, Sig at center) left; priUser form col (spread select) right; NVM cancel; JS open/close via html.sea-open
- _natus.scss: .sea-* rules mirror natus layout w. reversed columns; crossing slot rotated; dotted empty slots; sig slot solid; width/max-width replaces min() to avoid rem+vw unit mix
- select defaults: "Celtic Cross, Waite-Smith" for levity (PC/NC/SC); "Celtic Cross, Escape Velocity" for gravity (EC/AC/BC)

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
2026-04-26 21:30:27 -04:00
parent e2515d9b44
commit 7fcb6f307c
5 changed files with 390 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
src/templates/apps/gameboard/_partials/_sea_overlay.html Normal file
View File

@@ -0,0 +1,106 @@
{% load static %}
{# PICK 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 #}
<div class="sea-backdrop"></div>
<div class="sea-overlay" id="id_sea_overlay">
<div class="sea-modal-wrap">
<div class="sea-modal">
<header class="sea-modal-header">
<h2>PICK <span>SEA</span></h2>
<p>Choose your spread and draw your Celtic Cross.</p>
</header>
<div class="sea-modal-body">
{# ── Cards column (transparent) ───────────────────────────── #}
<div class="sea-cards-col">
<div class="sea-cross">
{# Crown — position 3 #}
<div class="sea-cross-cell sea-pos-crown">
<div class="sea-card-slot sea-card-slot--empty"></div>
</div>
{# Past — position 4 #}
<div class="sea-cross-cell sea-pos-past">
<div class="sea-card-slot sea-card-slot--empty"></div>
</div>
{# Center — Significator (already placed) #}
<div class="sea-cross-cell sea-pos-center">
<div class="sea-card-slot sea-card-slot--sig">
{% if my_tray_sig %}
<span class="sea-sig-name">{{ my_tray_sig.name_title }}</span>
{% endif %}
</div>
</div>
{# Future — position 5 #}
<div class="sea-cross-cell sea-pos-future">
<div class="sea-card-slot sea-card-slot--empty"></div>
</div>
{# Root — position 1 #}
<div class="sea-cross-cell sea-pos-root">
<div class="sea-card-slot sea-card-slot--empty"></div>
</div>
{# Crossing — position 2 (rotated across center) #}
<div class="sea-cross-cell sea-pos-crossing">
<div class="sea-card-slot sea-card-slot--empty sea-card-slot--crossing"></div>
</div>
</div>
</div>
{# ── Form column (priUser / opaque) ───────────────────────── #}
<div class="sea-form-col">
<div class="sea-form-main">
<div class="sea-field">
<label for="id_sea_spread">Spread</label>
<select id="id_sea_spread" name="spread" class="sea-select">
{% if user_polarity == "levity" %}
<option value="waite-smith" selected>Celtic Cross, Waite-Smith</option>
<option value="escape-velocity">Celtic Cross, Escape Velocity</option>
{% else %}
<option value="escape-velocity" selected>Celtic Cross, Escape Velocity</option>
<option value="waite-smith">Celtic Cross, Waite-Smith</option>
{% endif %}
</select>
</div>
</div>
<button type="button" id="id_sea_deal" class="btn btn-primary" disabled>
Deal
</button>
</div>
</div>{# /.sea-modal-body #}
</div>{# /.sea-modal #}
<button type="button" id="id_sea_cancel" class="btn btn-cancel btn-sm">NVM</button>
</div>{# /.sea-modal-wrap #}
</div>{# /.sea-overlay #}
<script>
(function () {
'use strict';
const overlay = document.getElementById('id_sea_overlay');
const cancelBtn = document.getElementById('id_sea_cancel');
function openSea() {
document.documentElement.classList.add('sea-open');
}
function closeSea() {
document.documentElement.classList.remove('sea-open');
}
const pickSeaBtn = document.getElementById('id_pick_sea_btn');
if (pickSeaBtn) pickSeaBtn.addEventListener('click', openSea);
cancelBtn.addEventListener('click', closeSea);
overlay.addEventListener('click', (e) => { if (e.target === overlay) closeSea(); });
})();
</script>