My Sea iter 6a follow-up: gatekeeper layout mirrors room exactly — .gate-title-panel w. "@<handle>'s Sea" + .gate-top-row w. .gate-main-panel (token slot) + .gate-roles-panel (PAID DRAW square), all on shared --priUser panel chrome — TDD

Per user spec 2026-05-20: my-sea gatekeeper should look exactly like the room gatekeeper, with the PAID DRAW button living in its own `--priUser` square panel beside the token-slot rectangle (mirroring room's PICK ROLES placement). Earlier iter-6a draft had the PAID DRAW button rendered as a standalone btn below the token slot; now it sits in `.gate-roles-panel` next to `.gate-main-panel`. Title panel reads "@<handle>'s Sea" via the existing `at_handle` filter — falls back to email prefix for handle-less users (parity w. navbar identity rendering).

No SCSS changes — all three `.gate-*-panel` rules already exist in `_room.scss` lines 98-135 and apply universally to anything under `.gate-modal`. 153 gameboard ITs still green.

Code architected by Disco DeDisco <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Disco DeDisco
2026-05-20 02:31:51 -04:00
parent 3fc5491372
commit d2c34d44d3

View File

@@ -1,5 +1,6 @@
{% extends "core/base.html" %} {% extends "core/base.html" %}
{% load static %} {% load static %}
{% load lyric_extras %}
{% block title_text %}Game Sea Gate{% endblock title_text %} {% block title_text %}Game Sea Gate{% endblock title_text %}
{% block header_text %}<span>Game</span><span>Gate</span>{% endblock header_text %} {% block header_text %}<span>Game</span><span>Gate</span>{% endblock header_text %}
@@ -20,11 +21,23 @@
<div class="gate-overlay my-sea-gate-overlay"> <div class="gate-overlay my-sea-gate-overlay">
<div class="gate-modal my-sea-gate-modal" role="dialog" aria-label="My Sea Gatekeeper"> <div class="gate-modal my-sea-gate-modal" role="dialog" aria-label="My Sea Gatekeeper">
{# Coin-slot rails — INSERT TOKEN TO PLAY pre-deposit; #} {# Title panel — mirrors room's `<h1>{{ room.name }}</h1>` #}
{# PUSH TO RETURN (refund btn) post-deposit. Mirrors #} {# inside `.gate-title-panel`. For solo my-sea the page #}
{# `_gatekeeper.html`'s `.token-slot` shape so the SCSS #} {# title reads "@<handle>'s Sea" (rendered via the #}
{# from `_room.scss` carries over (rail glow on active #} {# `at_handle` filter so handle-less users fall back to #}
{# state, claimed state on deposit, etc.). #} {# their email prefix). #}
<div class="gate-title-panel">
<header class="gate-header">
<h1>{{ user|at_handle }}'s Sea</h1>
</header>
</div>
{# Top row — token slot (main panel) + PAID DRAW square #}
{# (roles panel). Both share `.gate-main-panel` / #}
{# `.gate-roles-panel` `--priUser` bg styling from #}
{# `_room.scss`. Layout mirrors the room gatekeeper. #}
<div class="gate-top-row">
<div class="gate-main-panel">
<div class="token-slot{% if not deposit_reserved %} active{% else %} pending{% endif %}"> <div class="token-slot{% if not deposit_reserved %} active{% else %} pending{% endif %}">
{% if not deposit_reserved %} {% if not deposit_reserved %}
<form method="POST" action="{% url 'my_sea_insert_token' %}" style="display:contents"> <form method="POST" action="{% url 'my_sea_insert_token' %}" style="display:contents">
@@ -52,18 +65,19 @@
</form> </form>
{% endif %} {% endif %}
</div> </div>
</div>
{# PAID DRAW — commits the deposit + redirects to my-sea. #} <div class="gate-roles-panel">
{# Mirrors the room's PICK ROLES btn shape (`.btn-primary` #}
{# alongside the coin-slot in `.gate-top-row`). #}
{% if deposit_reserved %} {% if deposit_reserved %}
<form method="POST" action="{% url 'my_sea_paid_draw' %}" class="my-sea-paid-draw-form"> <form method="POST" action="{% url 'my_sea_paid_draw' %}" style="display:contents">
{% csrf_token %} {% csrf_token %}
<button type="submit" <button type="submit"
id="id_my_sea_paid_draw_btn" id="id_my_sea_paid_draw_btn"
class="btn btn-primary">PAID<br>DRAW</button> class="launch-game-btn btn btn-primary">PAID<br>DRAW</button>
</form> </form>
{% endif %} {% endif %}
</div>
</div>
</div> </div>
</div> </div>