burger Sea sub-btn: spread-form modal + relocated deck stacks + mid-draw CONT DRAW escape — TDD (phase 2/3)
Second slice of the Sea sub-btn rollout (phase 1 = .active wiring in 3ae85b9; phase 3 = --priYl glow handoff to come).
## Spread modal (#id_sea_spread_modal)
`templates/apps/gameboard/my_sea.html` — `.sea-form-col` (spread combobox + AUTO DRAW + DEL btns) now lives inside `<div id="id_sea_spread_modal" class="my-sea-spread-modal" hidden>`. Hidden by default; opens on #id_sea_btn click (per the inline `<script>` block). The deck stacks (`.sea-stacks` + `.sea-stacks-label`) are extracted to a new `.my-sea-stacks-wrap` sibling that stays visible on the page so the FLIP affordance remains usable while the modal is closed.
## Modal SCSS
`static_src/scss/_gameboard.scss`:
- `.my-sea-spread-modal` — position:fixed inset:0; z-index:320 (above all corner btns); pointer-events:none w. children opting back in. `&[hidden]` makes it explicit that the closed state stays display:none.
- `.my-sea-spread-modal__backdrop` — full-viewport semi-transparent w. backdrop-filter blur; pointer-events:auto so click-outside closes.
- `.my-sea-spread-modal__panel` — opaque card, border + shadow, max-width:90vw. `.sea-form-col` inside drops its fixed 16rem width + uses min-width.
- `.my-sea-stacks-wrap` — position:absolute bottom:4.5rem right:1rem (clear of bud/burger); z-index:5 (above .my-sea-cross, below modal).
## Modal JS
`templates/apps/gameboard/my_sea.html` — new inline `<script>` at the bottom owns:
- `#id_sea_btn` click → opens modal (guarded on `.active` so the burger-btn.js inactive-flash handler still runs for inactive sub-btns).
- Escape key → close.
- Backdrop click → close.
- `#id_guard_portal .guard-yes` click (delegated) → close. This is the key UX detail user-spec'd: AUTO DRAW + DEL both open a guard portal that positions itself against the visible action/del btn — closing the modal on the btn click itself would dump the portal at (0,0). Closing on guard OK instead means the portal positions correctly + the modal closes only when the action is confirmed. NVM (`.guard-no`) leaves the modal up so the user can retry.
Also `apps/epic/static/apps/epic/burger-btn.js` — delegated fan click now closes the burger fan when an ACTIVE sub-btn is clicked (was: no-op for active). The per-page sub-btn handler runs in target phase BEFORE the fan-bubble handler, so the action kicks off w. a clean visual.
Client-side `.active` sync: server renders sea_btn inactive on the landing page (show_picker=False there). The DRAW SEA → picker transition is client-side (no re-render), so the IIFE in my_sea.html now flips `seaBtn.classList.add('active')` at the same SEAT_ANIM_MS moment data-phase swaps to 'picker'. Sea_btn stays `.active` for the rest of the picker phase, INCLUDING after hand_complete — DEL + GATE VIEW both live inside the modal + the user needs them accessible (earlier iteration deactivated on hand_complete; reverted on user feedback).
## Mid-draw NVM → CONT DRAW (apps/gameboard/views.py + my_sea.html)
Earlier iteration's gear-menu NVM nav-backed to `/gameboard/my-sea/` mid-draw, but the server's `hand_non_empty` branch re-rendered the picker on the next GET — looping the user right back into the spread. New `?phase=landing` escape hatch:
- `views.py`: `force_landing = request.GET.get('phase') == 'landing'`; `show_picker = (hand_non_empty or (phase_param and show_paid_draw)) and not force_landing`. New context var `show_cont_draw = force_landing and active_draw and not active_draw.is_hand_complete`.
- `my_sea.html` landing: new `{% if show_cont_draw %} CONT DRAW {% elif show_paid_draw %} ... ` branch on the table-center action-btn. CONT DRAW is an `<a href="{% url 'my_sea' %}">` (plain navigation, no `?phase=landing` so the next GET falls through to the hand_non_empty picker branch).
- `my_sea.html` gear include: picker phase passes `nvm_url={% url 'my_sea' %}?phase=landing` so the gear NVM exits to the landing-with-CONT-DRAW state instead of looping back into the picker.
## Tests
`apps/gameboard/tests/integrated/test_views.py` — 4 ITs added/updated:
- `test_sea_btn_stays_active_when_hand_complete` (replaced the prior "returns to inactive" assertion — sea_btn now stays active per user spec).
- `test_gear_nvm_navs_to_my_sea_landing_on_picker_phase` (updated URL to include `?phase=landing`).
- `test_force_landing_renders_cont_draw_btn_mid_draw` (NEW) — verifies CONT DRAW renders + FREE DRAW absent.
- `test_force_landing_hides_cont_draw_when_no_active_draw` (NEW) — regression guard: sig'd user w. no draw still sees FREE DRAW.
- `test_force_landing_hides_cont_draw_when_hand_complete` (NEW) — CONT DRAW absent for completed hands.
`functional_tests/test_game_my_sea.py` — new module-level `_open_spread_modal(test)` helper + applied to 7 tests that touch in-modal selectors (combobox / action_btn / del):
- `MySeaSpreadFormTest.test_picking_spread_swaps_data_spread_and_position_visibility`
- `MySeaSpreadFormTest.test_per_spread_position_labels_render_and_update`
- `MySeaCardDrawTest.test_action_btn_transitions_to_gate_view_on_hand_complete` (also: close modal before manual FLIP draws, use innerText for hidden-element text checks)
- `MySeaCardDrawTest.test_auto_drawn_slots_can_reopen_stage_modal_on_click`
- `MySeaCardDrawTest.test_form_col_renders_decks_lock_hand_del_and_reversal_pct`
- `MySeaLockHandTest.test_del_click_opens_shared_guard_portal`
- `MySeaLockHandTest.test_del_confirm_clears_hand_and_returns_to_gate_view_landing`
JS .click() is used inside `_open_spread_modal` (not Selenium .click) because the fan sub-btns spend ~0.25s mid-animation stacked at the burger centre — Selenium would hit a click-intercept by whichever sub-btn is z-topmost during the transform.
## Verification
All 1370 IT+UT green (+5 new MySeaViewTest, +1 from earlier phase 1 carry-over). 7 updated FTs green when re-run together.
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
@@ -52,7 +52,16 @@
|
||||
<div class="table-hex-border">
|
||||
<div class="table-hex">
|
||||
<div class="table-center">
|
||||
{% if show_paid_draw %}
|
||||
{% if show_cont_draw %}
|
||||
{# CONT DRAW — user came to the landing via the gear- #}
|
||||
{# menu NVM mid-draw (?phase=landing). The picker hand #}
|
||||
{# is non-empty + incomplete; CONT DRAW re-enters the #}
|
||||
{# picker (a fresh GET w.o. ?phase=landing falls through #}
|
||||
{# to show_picker=True via the hand_non_empty branch). #}
|
||||
<a id="id_my_sea_cont_draw_btn"
|
||||
href="{% url 'my_sea' %}"
|
||||
class="btn btn-primary">CONT<br>DRAW</a>
|
||||
{% elif show_paid_draw %}
|
||||
{# PAID DRAW — two underlying states collapse into one #}
|
||||
{# button (user-spec 2026-05-23): #}
|
||||
{# • `deposit_reserved` → POST commits the deposited #}
|
||||
@@ -166,120 +175,122 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# Form col — SPREAD combobox + DECKS swatches + LOCK #}
|
||||
{# HAND / DEL. DRY w. gameroom `_sea_overlay.html`'s #}
|
||||
{# `.sea-form-col` shape; my-sea-specific differences: #}
|
||||
{# (a) 6 spread options under 2 section dividers, #}
|
||||
{# (b) default = situation-action-outcome (3-card), #}
|
||||
{# (c) no `.sea-modal-header` (the gateway IS the page). #}
|
||||
<div class="sea-form-col my-sea-form-col">
|
||||
<div class="sea-form-main">
|
||||
<div class="sea-field">
|
||||
<label for="id_sea_spread" id="id_sea_spread_label">Spread</label>
|
||||
<p class="sea-reversal-hint">{{ reversals_pct|default:25 }}% reversals</p>
|
||||
{# autocomplete="off" opts the hidden input out of #}
|
||||
{# Firefox's form-history autofill, which otherwise #}
|
||||
{# restores the LAST value on soft reload (F5). #}
|
||||
{# Without this, combobox.js's `select(i)` short- #}
|
||||
{# circuits its change-event dispatch when the #}
|
||||
{# user re-picks the value Firefox already restored #}
|
||||
{# → my-sea's sync() never fires → data-spread on #}
|
||||
{# .my-sea-cross stays stuck on SAO default. #}
|
||||
<input type="hidden" id="id_sea_spread" name="spread"
|
||||
value="{{ default_spread }}" autocomplete="off">
|
||||
<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 default_spread == 'past-present-future' %}Past, Present, Future{% elif default_spread == 'mind-body-spirit' %}Mind, Body, Spirit{% elif default_spread == 'desire-obstacle-solution' %}Desire, Obstacle, Solution{% elif default_spread == 'waite-smith' %}Celtic Cross, Waite-Smith{% elif default_spread == 'escape-velocity' %}Celtic Cross, Escape Velocity{% else %}Situation, Action, Outcome{% endif %}</span>
|
||||
<span class="sea-select-arrow" aria-hidden="true">▾</span>
|
||||
<ul class="sea-select-list" role="listbox">
|
||||
<li role="presentation" class="sea-select-divider">3-card spreads</li>
|
||||
<li role="option" data-value="past-present-future" aria-selected="{% if default_spread == 'past-present-future' %}true{% else %}false{% endif %}">Past, Present, Future</li>
|
||||
<li role="option" data-value="situation-action-outcome" aria-selected="{% if default_spread == 'situation-action-outcome' %}true{% else %}false{% endif %}">Situation, Action, Outcome</li>
|
||||
<li role="option" data-value="mind-body-spirit" aria-selected="{% if default_spread == 'mind-body-spirit' %}true{% else %}false{% endif %}">Mind, Body, Spirit</li>
|
||||
<li role="option" data-value="desire-obstacle-solution" aria-selected="{% if default_spread == 'desire-obstacle-solution' %}true{% else %}false{% endif %}">Desire, Obstacle, Solution</li>
|
||||
<li role="presentation" class="sea-select-divider">6-card spreads</li>
|
||||
<li role="option" data-value="waite-smith" aria-selected="{% if default_spread == 'waite-smith' %}true{% else %}false{% endif %}">Celtic Cross, Waite-Smith</li>
|
||||
<li role="option" data-value="escape-velocity" aria-selected="{% if default_spread == 'escape-velocity' %}true{% else %}false{% endif %}">Celtic Cross, Escape Velocity</li>
|
||||
</ul>
|
||||
{# Deck-stack column — STAYS on the picker page (out of the #}
|
||||
{# modal) so the FLIP affordance + count remain visible while #}
|
||||
{# the spread modal is closed. Wrapped in `.my-sea-stacks-wrap`#}
|
||||
{# so SCSS can pin it bottom-right of the aperture. #}
|
||||
{# #}
|
||||
{# Sprint A.7-polish — deck-stack rendering depends on the #}
|
||||
{# equipped deck's polarization. Polarized (Earthman) keeps #}
|
||||
{# dual gravity/levity stacks; non-polarized (Minchiate, RWS) #}
|
||||
{# collapses to a single unnamed stack (DECKS → DECK). #}
|
||||
{# FLIP btn picks up `.btn-disabled` once hand_complete. #}
|
||||
<div class="my-sea-stacks-wrap">
|
||||
{% if request.user.equipped_deck.is_polarized %}
|
||||
<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{% if hand_complete %} btn-disabled{% endif %}" type="button">{% if hand_complete %}×{% else %}FLIP{% endif %}</button>
|
||||
</div>
|
||||
<span class="sea-stack-name">Gravity</span>
|
||||
</div>
|
||||
|
||||
{# Sprint A.7-polish — deck-stack rendering depends on #}
|
||||
{# the equipped deck's polarization. Polarized decks #}
|
||||
{# (Earthman) keep the dual gravity + levity stacks + #}
|
||||
{# named labels — those are the two halves of a 6- #}
|
||||
{# segment deck. Non-polarized decks (Minchiate, RWS) #}
|
||||
{# collapse to a single unnamed stack (DECKS → DECK): #}
|
||||
{# polarity has no meaning at the deck level, so the #}
|
||||
{# split labels would mislead. user spec 2026-05-25 PM. #}
|
||||
{# Critical: this collapse is my_sea-ONLY — room.html #}
|
||||
{# keeps the dual layout since multiple gamers contribute #}
|
||||
{# (each might bring a different polarization). #}
|
||||
{# FLIP btn picks up `.btn-disabled` once the hand is #}
|
||||
{# complete — visual signal that no more draws remain. #}
|
||||
{# JS `_setComplete(on)` toggles the same class on #}
|
||||
{# live transition (last-card landed). #}
|
||||
{% if request.user.equipped_deck.is_polarized %}
|
||||
<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{% if hand_complete %} btn-disabled{% endif %}" type="button">{% if hand_complete %}×{% else %}FLIP{% endif %}</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{% if hand_complete %} btn-disabled{% endif %}" type="button">{% if hand_complete %}×{% else %}FLIP{% endif %}</button>
|
||||
</div>
|
||||
<span class="sea-stack-name">Levity</span>
|
||||
<div class="sea-deck-stack sea-deck-stack--levity">
|
||||
<div class="sea-stack-face">
|
||||
<button class="btn btn-reveal sea-stack-ok{% if hand_complete %} btn-disabled{% endif %}" type="button">{% if hand_complete %}×{% else %}FLIP{% endif %}</button>
|
||||
</div>
|
||||
<span class="sea-stack-name">Levity</span>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="sea-stacks sea-stacks--single">
|
||||
<span class="sea-stacks-label">DECK</span>
|
||||
<div class="sea-deck-stack sea-deck-stack--single">
|
||||
<div class="sea-stack-face">
|
||||
{% if request.user.equipped_deck.has_card_images %}
|
||||
<img class="sea-stack-face-img" src="{{ request.user.equipped_deck.back_image_url }}" alt="">
|
||||
{% endif %}
|
||||
<button class="btn btn-reveal sea-stack-ok{% if hand_complete %} btn-disabled{% endif %}" type="button">{% if hand_complete %}×{% else %}FLIP{% endif %}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="sea-stacks sea-stacks--single">
|
||||
<span class="sea-stacks-label">DECK</span>
|
||||
<div class="sea-deck-stack sea-deck-stack--single">
|
||||
<div class="sea-stack-face">
|
||||
{% if request.user.equipped_deck.has_card_images %}
|
||||
<img class="sea-stack-face-img" src="{{ request.user.equipped_deck.back_image_url }}" alt="">
|
||||
{% endif %}
|
||||
<button class="btn btn-reveal sea-stack-ok{% if hand_complete %} btn-disabled{% endif %}" type="button">{% if hand_complete %}×{% else %}FLIP{% endif %}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="sea-form-actions">
|
||||
{# Iter 4c — LOCK HAND replaced by AUTO DRAW (mid-draw) #}
|
||||
{# / GATE VIEW (hand complete). Same button slot; JS #}
|
||||
{# transitions label + behavior + `data-state` when #}
|
||||
{# the final card lands. AUTO DRAW opens a guard portal #}
|
||||
{# ("Auto deal cards?") + POSTs the remaining hand in #}
|
||||
{# one shot so a navigate-away mid-animation still #}
|
||||
{# persists. GATE VIEW navigates to the Sprint-6 gate- #}
|
||||
{# keeper (currently a 404 stub). #}
|
||||
<button type="button"
|
||||
id="id_sea_action_btn"
|
||||
class="btn btn-primary"
|
||||
data-state="{% if hand_complete %}gate-view{% else %}auto-draw{% endif %}"
|
||||
data-gate-url="{% url 'my_sea_gate' %}">{% if hand_complete %}GATE<br>VIEW{% else %}AUTO<br>DRAW{% endif %}</button>
|
||||
{# DEL gates on whether ANY card has been drawn (user #}
|
||||
{# spec 2026-05-26): pre-first-draw it's disabled; as #}
|
||||
{# soon as `saved_by_position` has at least one entry #}
|
||||
{# the user can DEL the in-progress hand. `×` #}
|
||||
{# is the disabled-state label (parity w. game-kit's #}
|
||||
{# DON/DOFF disabled convention). JS `_setHasDrawn` #}
|
||||
{# swaps text + class in lockstep w. live deposits. #}
|
||||
<button type="button"
|
||||
id="id_sea_del"
|
||||
class="btn btn-danger{% if not saved_by_position %} btn-disabled{% endif %}">{% if saved_by_position %}DEL{% else %}×{% endif %}</button>
|
||||
{# Spread modal — opens on #id_sea_btn click (burger fan). #}
|
||||
{# Contains the SPREAD combobox + AUTO DRAW + DEL btns. Closed #}
|
||||
{# by default (hidden attr); JS toggles. AUTO DRAW closes the #}
|
||||
{# modal then runs the existing draw flow. Click backdrop or #}
|
||||
{# press Escape to dismiss. Deck stacks live OUTSIDE so the #}
|
||||
{# FLIP btn stays usable when the modal is closed. #}
|
||||
<div id="id_sea_spread_modal" class="my-sea-spread-modal" hidden>
|
||||
<div class="my-sea-spread-modal__backdrop"></div>
|
||||
<div class="my-sea-spread-modal__panel">
|
||||
<div class="sea-form-col my-sea-form-col">
|
||||
<div class="sea-form-main">
|
||||
<div class="sea-field">
|
||||
<label for="id_sea_spread" id="id_sea_spread_label">Spread</label>
|
||||
<p class="sea-reversal-hint">{{ reversals_pct|default:25 }}% reversals</p>
|
||||
{# autocomplete="off" opts the hidden input out of #}
|
||||
{# Firefox's form-history autofill, which otherwise #}
|
||||
{# restores the LAST value on soft reload (F5). #}
|
||||
{# Without this, combobox.js's `select(i)` short- #}
|
||||
{# circuits its change-event dispatch when the #}
|
||||
{# user re-picks the value Firefox already restored #}
|
||||
{# → my-sea's sync() never fires → data-spread on #}
|
||||
{# .my-sea-cross stays stuck on SAO default. #}
|
||||
<input type="hidden" id="id_sea_spread" name="spread"
|
||||
value="{{ default_spread }}" autocomplete="off">
|
||||
<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 default_spread == 'past-present-future' %}Past, Present, Future{% elif default_spread == 'mind-body-spirit' %}Mind, Body, Spirit{% elif default_spread == 'desire-obstacle-solution' %}Desire, Obstacle, Solution{% elif default_spread == 'waite-smith' %}Celtic Cross, Waite-Smith{% elif default_spread == 'escape-velocity' %}Celtic Cross, Escape Velocity{% else %}Situation, Action, Outcome{% endif %}</span>
|
||||
<span class="sea-select-arrow" aria-hidden="true">▾</span>
|
||||
<ul class="sea-select-list" role="listbox">
|
||||
<li role="presentation" class="sea-select-divider">3-card spreads</li>
|
||||
<li role="option" data-value="past-present-future" aria-selected="{% if default_spread == 'past-present-future' %}true{% else %}false{% endif %}">Past, Present, Future</li>
|
||||
<li role="option" data-value="situation-action-outcome" aria-selected="{% if default_spread == 'situation-action-outcome' %}true{% else %}false{% endif %}">Situation, Action, Outcome</li>
|
||||
<li role="option" data-value="mind-body-spirit" aria-selected="{% if default_spread == 'mind-body-spirit' %}true{% else %}false{% endif %}">Mind, Body, Spirit</li>
|
||||
<li role="option" data-value="desire-obstacle-solution" aria-selected="{% if default_spread == 'desire-obstacle-solution' %}true{% else %}false{% endif %}">Desire, Obstacle, Solution</li>
|
||||
<li role="presentation" class="sea-select-divider">6-card spreads</li>
|
||||
<li role="option" data-value="waite-smith" aria-selected="{% if default_spread == 'waite-smith' %}true{% else %}false{% endif %}">Celtic Cross, Waite-Smith</li>
|
||||
<li role="option" data-value="escape-velocity" aria-selected="{% if default_spread == 'escape-velocity' %}true{% else %}false{% endif %}">Celtic Cross, Escape Velocity</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sea-form-actions">
|
||||
{# Iter 4c — LOCK HAND replaced by AUTO DRAW (mid-draw) #}
|
||||
{# / GATE VIEW (hand complete). Same button slot; JS #}
|
||||
{# transitions label + behavior + `data-state` when #}
|
||||
{# the final card lands. AUTO DRAW opens a guard portal #}
|
||||
{# ("Auto deal cards?") + POSTs the remaining hand in #}
|
||||
{# one shot so a navigate-away mid-animation still #}
|
||||
{# persists. GATE VIEW navigates to the Sprint-6 gate- #}
|
||||
{# keeper. #}
|
||||
<button type="button"
|
||||
id="id_sea_action_btn"
|
||||
class="btn btn-primary"
|
||||
data-state="{% if hand_complete %}gate-view{% else %}auto-draw{% endif %}"
|
||||
data-gate-url="{% url 'my_sea_gate' %}">{% if hand_complete %}GATE<br>VIEW{% else %}AUTO<br>DRAW{% endif %}</button>
|
||||
{# DEL gates on whether ANY card has been drawn (user #}
|
||||
{# spec 2026-05-26): pre-first-draw it's disabled; as #}
|
||||
{# soon as `saved_by_position` has at least one entry #}
|
||||
{# the user can DEL the in-progress hand. `×` #}
|
||||
{# is the disabled-state label (parity w. game-kit's #}
|
||||
{# DON/DOFF disabled convention). JS `_setHasDrawn` #}
|
||||
{# swaps text + class in lockstep w. live deposits. #}
|
||||
<button type="button"
|
||||
id="id_sea_del"
|
||||
class="btn btn-danger{% if not saved_by_position %} btn-disabled{% endif %}">{% if saved_by_position %}DEL{% else %}×{% endif %}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{# Sea stage — portaled modal that opens on FLIP click via #}
|
||||
@@ -988,6 +999,16 @@
|
||||
page.setAttribute('data-phase', 'picker');
|
||||
if (landing) landing.style.display = 'none';
|
||||
if (picker) picker.style.display = '';
|
||||
// Phase 2 of the Sea sub-btn rollout — server
|
||||
// rendered the burger fan w. sea_btn inactive
|
||||
// (show_picker was False on landing). After the
|
||||
// client-side phase swap, flip .active so the
|
||||
// modal-open click handler treats sea_btn as
|
||||
// active. Sea_btn stays active for the rest of
|
||||
// the picker phase (incl. hand_complete) so DEL
|
||||
// + GATE VIEW stay reachable inside the modal.
|
||||
var seaBtn = document.getElementById('id_sea_btn');
|
||||
if (seaBtn) seaBtn.classList.add('active');
|
||||
}, SEAT_ANIM_MS);
|
||||
});
|
||||
}
|
||||
@@ -1063,16 +1084,70 @@
|
||||
{% endif %}
|
||||
{# Sprint 6 iter 6c — gear-btn lives on every my-sea page state #}
|
||||
{# (sign-gate / landing / picker). NVM-only menu. Picker NVM #}
|
||||
{# nav-backs to the my-sea TABLE HEX (landing), letting the user #}
|
||||
{# leave the spread without committing. Sign-gate + landing NVM #}
|
||||
{# nav-backs to /gameboard/ (the partial's default fallback). #}
|
||||
{% if show_picker %}{% url 'my_sea' as nvm_url %}{% endif %}
|
||||
{% include "apps/gameboard/_partials/_my_sea_gear.html" %}
|
||||
{# nav-backs to the my-sea TABLE HEX via `?phase=landing` — #}
|
||||
{# without the query param, the server would re-render the #}
|
||||
{# picker on the next GET (hand_non_empty branch wins). The #}
|
||||
{# landing then renders a CONT DRAW btn (since active_draw #}
|
||||
{# exists + incomplete) so the user can re-enter the picker. #}
|
||||
{# Sign-gate + landing NVM nav-back to /gameboard/ (default). #}
|
||||
{% if show_picker %}{% url 'my_sea' as nvm_base %}{% with nvm_url=nvm_base|add:'?phase=landing' %}{% include "apps/gameboard/_partials/_my_sea_gear.html" %}{% endwith %}{% else %}{% include "apps/gameboard/_partials/_my_sea_gear.html" %}{% endif %}
|
||||
{# Bud + burger persist across every stage too — same affordance #}
|
||||
{# as on the my-sea gatekeeper, so the user can invite + reach #}
|
||||
{# the cross-cutting menu from sign-gate / landing / picker alike.#}
|
||||
{% include "apps/gameboard/_partials/_my_sea_bud_panel.html" %}
|
||||
{% include "apps/gameboard/_partials/_burger.html" %}
|
||||
<script src="{% static 'apps/epic/burger-btn.js' %}"></script>
|
||||
|
||||
{# Phase 2 of the Sea sub-btn rollout — wires #id_sea_btn click to #}
|
||||
{# open #id_sea_spread_modal. AUTO DRAW + Escape + backdrop click #}
|
||||
{# all close the modal. AUTO DRAW closes BEFORE its own handler fires #}
|
||||
{# (capture-phase listener) so the existing guard-portal + draw flow #}
|
||||
{# runs against a closed modal, returning the spread crucifix to view #}
|
||||
{# as the cards animate in. #}
|
||||
<script>
|
||||
(function () {
|
||||
var seaBtn = document.getElementById('id_sea_btn');
|
||||
var modal = document.getElementById('id_sea_spread_modal');
|
||||
if (!seaBtn || !modal) return;
|
||||
|
||||
var backdrop = modal.querySelector('.my-sea-spread-modal__backdrop');
|
||||
var actionBtn = document.getElementById('id_sea_action_btn');
|
||||
|
||||
function openModal() {
|
||||
modal.removeAttribute('hidden');
|
||||
}
|
||||
function closeModal() {
|
||||
modal.setAttribute('hidden', '');
|
||||
}
|
||||
|
||||
seaBtn.addEventListener('click', function () {
|
||||
// Inactive sub-btn click is handled by burger-btn.js's
|
||||
// delegated handler (flash --priRd, no modal). Only fire
|
||||
// the modal-open path when this sub-btn is currently active.
|
||||
if (!seaBtn.classList.contains('active')) return;
|
||||
openModal();
|
||||
});
|
||||
|
||||
if (backdrop) {
|
||||
backdrop.addEventListener('click', closeModal);
|
||||
}
|
||||
|
||||
document.addEventListener('keydown', function (e) {
|
||||
if (e.key === 'Escape' && !modal.hasAttribute('hidden')) {
|
||||
closeModal();
|
||||
}
|
||||
});
|
||||
|
||||
// Modal stays open through the AUTO DRAW + DEL guard-portal flow
|
||||
// so the portal can position itself against the visible action /
|
||||
// del btn. Close the modal only on guard OK (.guard-yes) so the
|
||||
// draw / delete proceeds against an already-closed modal. NVM
|
||||
// (.guard-no) leaves the modal up so the user can try again.
|
||||
document.addEventListener('click', function (e) {
|
||||
if (!e.target.closest('#id_guard_portal .guard-yes')) return;
|
||||
if (!modal.hasAttribute('hidden')) closeModal();
|
||||
});
|
||||
}());
|
||||
</script>
|
||||
</div>
|
||||
{% endblock content %}
|
||||
|
||||
Reference in New Issue
Block a user