python-tdd/src/templates/apps/gameboard/_partials/_sea_overlay.html

{% 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"
     data-sea-deck-url="{% url 'epic:sea_deck' room.id %}"
     data-sea-user-polarity="{{ user_polarity }}">

    <div class="sea-modal-wrap">
    <div class="sea-modal">

        <header class="sea-modal-header">
            <h2>SEA <span>SELECT</span></h2>
            <p>Draw +6 cards to describe your character's influences and seed the map.</p>
        </header>

        <div class="sea-modal-body">

            {# ── Cards column (transparent) ───────────────────────────── #}
            <div class="sea-cards-col">
                <div class="sea-cross">
                    {# Crown — CC pos 3 / EV pos 5 #}
                    <div class="sea-crucifix-cell sea-pos-crown">
                        <div class="sea-card-slot sea-card-slot--empty"></div>
                    </div>
                    {# Beneath (past) — CC pos 4 / EV pos 3 #}
                    <div class="sea-crucifix-cell sea-pos-leave">
                        <div class="sea-card-slot sea-card-slot--empty"></div>
                    </div>
                    {# Center — Significator (always placed) + Cover + Cross overlaid #}
                    <div class="sea-crucifix-cell sea-pos-core">
                        <div class="sig-stage-card sea-sig-card" style="--sig-card-w: 4rem">
                            {% if my_tray_sig %}
                                <span class="fan-corner-rank">{{ my_tray_sig.corner_rank }}</span>
                                {% if my_tray_sig.suit_icon %}<i class="fa-solid {{ my_tray_sig.suit_icon }}"></i>{% endif %}
                            {% endif %}
                        </div>
                        {# Cover — CC/EV pos 1, stacked face-up on Sig #}
                        <div class="sea-pos-cover">
                            <div class="sea-card-slot sea-card-slot--empty"></div>
                        </div>
                        {# Cross — CC/EV pos 2, rotated 90° on Cover #}
                        <div class="sea-pos-cross">
                            <div class="sea-card-slot sea-card-slot--empty sea-card-slot--crossing"></div>
                        </div>
                    </div>
                    {# Before (future) — CC pos 5 / EV pos 6 #}
                    <div class="sea-crucifix-cell sea-pos-loom">
                        <div class="sea-card-slot sea-card-slot--empty"></div>
                    </div>
                    {# Behind (root) — CC pos 6 / EV pos 4 #}
                    <div class="sea-crucifix-cell sea-pos-lay">
                        <div class="sea-card-slot sea-card-slot--empty"></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" id="id_sea_spread_label">Spread</label>
                        {% comment %}
                            Reversal-rate hint — `stack_reversal_pct` flows from
                            apps.epic.utils.stack_reversal_probability via the
                            view. Currently a module default; placeholder UI for
                            a forthcoming per-user setting.
                        {% endcomment %}
                        <p class="sea-reversal-hint">{{ stack_reversal_pct|default:25 }}% reversals</p>
                        {% comment %}
                            Custom combobox — native <select> dropdowns ignore most CSS on
                            Firefox/Chrome (OS-rendered list); this gives full styling control.
                            combobox.js wires up the keyboard nav, click-outside-to-close, and
                            writes the chosen value to the hidden <input id="id_sea_spread"> so
                            sea.js's existing `spreadSel.value` read still works.
                        {% endcomment %}
                        <input type="hidden" id="id_sea_spread" name="spread"
                               value="{% if user_polarity == 'levity' %}waite-smith{% else %}escape-velocity{% endif %}">
                        <div class="sea-select"
                             data-combobox
                             data-combobox-target="id_sea_spread"
                             role="combobox"
                             aria-expanded="false"
                             aria-haspopup="listbox"
                             aria-labelledby="id_sea_spread_label"
                             tabindex="0">
                            <span class="sea-select-current">{% if user_polarity == "levity" %}Celtic Cross, Waite-Smith{% else %}Celtic Cross, Escape Velocity{% endif %}</span>
                            <span class="sea-select-arrow" aria-hidden="true">▾</span>
                            <ul class="sea-select-list" role="listbox">
                                {% if user_polarity == "levity" %}
                                    <li role="option" data-value="waite-smith"     aria-selected="true">Celtic Cross, Waite-Smith</li>
                                    <li role="option" data-value="escape-velocity" aria-selected="false">Celtic Cross, Escape Velocity</li>
                                {% else %}
                                    <li role="option" data-value="escape-velocity" aria-selected="true">Celtic Cross, Escape Velocity</li>
                                    <li role="option" data-value="waite-smith"     aria-selected="false">Celtic Cross, Waite-Smith</li>
                                {% endif %}
                            </ul>
                        </div>
                    </div>

                    {# Two face-down deck piles — tap to proffer OK #}
                    <div class="sea-stacks">
                        <span class="sea-stacks-label">DECKS</span>
                        <div class="sea-deck-stack sea-deck-stack--gravity">
                            <div class="sea-stack-face">
                                <button class="btn btn-reveal sea-stack-ok" type="button">FLIP</button>
                            </div>
                            <span class="sea-stack-name">Gravity</span>
                        </div>
                        <div class="sea-deck-stack sea-deck-stack--levity">
                            <div class="sea-stack-face">
                                <button class="btn btn-reveal sea-stack-ok" type="button">FLIP</button>
                            </div>
                            <span class="sea-stack-name">Levity</span>
                        </div>
                    </div>
                </div>

                <div class="sea-form-actions">
                    <button type="button" id="id_sea_lock_hand" class="btn btn-primary" disabled>
                        LOCK HAND
                    </button>
                    <button type="button" id="id_sea_del" class="btn btn-danger">
                        DEL
                    </button>
                </div>

            </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 #}

    {# ── Sea stage — big card viewer ─────────────────────────────────────────── #}
    <div class="sea-stage" id="id_sea_stage" style="display:none">
        <div class="sea-stage-backdrop"></div>
        <div class="sea-stage-content">
            <div class="sig-stage-card sea-stage-card">
                <div class="fan-card-corner fan-card-corner--tl">
                    <span class="fan-corner-rank"></span>
                    <i class="fa-solid stage-suit-icon" style="display:none"></i>
                </div>
                <div class="fan-card-face">
                    <div class="fan-card-face-upright">
                        <p class="fan-card-name-group"></p>
                        <p class="sig-qualifier-above"></p>
                        <p class="fan-card-name"></p>
                        <p class="sig-qualifier-below"></p>
                    </div>
                    <p class="fan-card-arcana"></p>
                    <div class="fan-card-face-reversal">
                        <p class="fan-card-reversal-name"></p>
                        <p class="fan-card-reversal-qualifier"></p>
                    </div>
                </div>
                <div class="fan-card-corner fan-card-corner--br">
                    <span class="fan-corner-rank"></span>
                    <i class="fa-solid stage-suit-icon" style="display:none"></i>
                </div>
            </div>
            <div class="sig-stat-block sea-stat-block">
                <button class="btn btn-reverse spin-btn" type="button">SPIN</button>
                <button class="btn btn-info fyi-btn" type="button">FYI</button>
                <div class="stat-face stat-face--upright">
                    <p class="stat-face-label">Emanation</p>
                    <ul class="stat-keywords" id="id_sea_stat_upright"></ul>
                </div>
                <div class="stat-face stat-face--reversed">
                    <p class="stat-face-label">Reversal</p>
                    <ul class="stat-keywords" id="id_sea_stat_reversed"></ul>
                </div>
                {% include "apps/gameboard/_partials/_sig_fyi_panel.html" with panel_id="id_sea_fyi_panel" panel_extra_attrs='style="display:none"' %}
            </div>
        </div>
    </div>

</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);

  // ── Deck draw ──────────────────────────────────────────────────────────────

  const SEA_DECK_URL = overlay.dataset.seaDeckUrl;

  const SPREAD_ORDER = {
    'waite-smith':     ['.sea-pos-cover', '.sea-pos-cross', '.sea-pos-crown', '.sea-pos-lay', '.sea-pos-loom', '.sea-pos-leave'],
    'escape-velocity': ['.sea-pos-cover', '.sea-pos-cross', '.sea-pos-lay', '.sea-pos-leave', '.sea-pos-crown', '.sea-pos-loom'],
  };

  let levityPile = [], gravityPile = [];
  let _filled    = 0;
  let _activeStack = null;

  const spreadSel = overlay.querySelector('#id_sea_spread');
  const lockBtn   = overlay.querySelector('#id_sea_lock_hand');
  const delBtn    = overlay.querySelector('#id_sea_del');

  function _spreadKey() {
    return spreadSel ? spreadSel.value : 'waite-smith';
  }

  function _nextPosSelector() {
    const order = SPREAD_ORDER[_spreadKey()] || SPREAD_ORDER['waite-smith'];
    return order[_filled] || null;
  }

  function _hideOk() {
    if (_activeStack) {
      const ok = _activeStack.querySelector('.sea-stack-ok');
      if (ok) ok.style.display = 'none';
      _activeStack.classList.remove('sea-deck-stack--active');
      _activeStack = null;
    }
  }

  function _showOk(stack) {
    _hideOk();
    _activeStack = stack;
    stack.classList.add('sea-deck-stack--active');
    const ok = stack.querySelector('.sea-stack-ok');
    if (ok) ok.style.display = '';
  }

  function _reset() {
    _filled = 0;
    _hideOk();
    overlay.querySelectorAll('.sea-card-slot').forEach(s => {
      s.classList.remove('sea-card-slot--filled', 'sea-card-slot--visible', 'sea-card-slot--focused', 'sea-card-slot--levity', 'sea-card-slot--gravity');
      s.classList.add('sea-card-slot--empty');
      s.innerHTML = '';
      delete s.dataset.cardId;
      delete s.dataset.posKey;
    });
    if (lockBtn) lockBtn.disabled = true;
    if (window.SeaDeal) SeaDeal.resetHand();
    _fetchDeck();
  }

  function _fetchDeck() {
    fetch(SEA_DECK_URL, { credentials: 'same-origin' })
      .then(r => r.json())
      .then(data => { levityPile = data.levity || []; gravityPile = data.gravity || []; })
      .catch(() => {});
  }

  overlay.querySelectorAll('.sea-deck-stack').forEach(stack => {
    stack.addEventListener('click', e => {
      e.stopPropagation();
      _activeStack === stack ? _hideOk() : _showOk(stack);
    });
    const ok = stack.querySelector('.sea-stack-ok');
    if (ok) {
      ok.style.display = 'none';
      ok.addEventListener('click', e => {
        e.stopPropagation();
        const isLevity = stack.classList.contains('sea-deck-stack--levity');
        const pile = isLevity ? levityPile : gravityPile;
        const card = pile.length ? pile.shift() : null;
        const pos  = _nextPosSelector();
        if (card && pos) {
          _filled++;
          if (lockBtn) lockBtn.disabled = (_filled < 6);
          if (window.SeaDeal) SeaDeal.openStage(card, pos, isLevity);
        }
        _hideOk();
      });
    }
  });

  overlay.addEventListener('click', _hideOk);
  if (delBtn) delBtn.addEventListener('click', _reset);

  _fetchDeck();
  if (window.SeaDeal) SeaDeal.reinit();
})();
</script>