From d2c34d44d38823b9fbee4bd11e3dafe2235f161d Mon Sep 17 00:00:00 2001
From: Disco DeDisco <adamcraighamilton@gmail.com>
Date: Wed, 20 May 2026 02:31:51 -0400
Subject: [PATCH] =?UTF-8?q?My=20Sea=20iter=206a=20follow-up:=20gatekeeper?=
 =?UTF-8?q?=20layout=20mirrors=20room=20exactly=20=E2=80=94=20`.gate-title?=
 =?UTF-8?q?-panel`=20w.=20"@<handle>'s=20Sea"=20+=20`.gate-top-row`=20w.?=
 =?UTF-8?q?=20`.gate-main-panel`=20(token=20slot)=20+=20`.gate-roles-panel?=
 =?UTF-8?q?`=20(PAID=20DRAW=20square),=20all=20on=20shared=20`--priUser`?=
 =?UTF-8?q?=20panel=20chrome=20=E2=80=94=20TDD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 src/templates/apps/gameboard/my_sea_gate.html | 98 +++++++++++--------
 1 file changed, 56 insertions(+), 42 deletions(-)

diff --git a/src/templates/apps/gameboard/my_sea_gate.html b/src/templates/apps/gameboard/my_sea_gate.html
index fdf055c..c476e9e 100644
--- a/src/templates/apps/gameboard/my_sea_gate.html
+++ b/src/templates/apps/gameboard/my_sea_gate.html
@@ -1,5 +1,6 @@
 {% extends "core/base.html" %}
 {% load static %}
+{% load lyric_extras %}
 
 {% block title_text %}Game Sea Gate{% endblock title_text %}
 {% block header_text %}<span>Game</span><span>Gate</span>{% endblock header_text %}
@@ -20,50 +21,63 @@
         <div class="gate-overlay my-sea-gate-overlay">
             <div class="gate-modal my-sea-gate-modal" role="dialog" aria-label="My Sea Gatekeeper">
 
-                {# Coin-slot rails — INSERT TOKEN TO PLAY pre-deposit;     #}
-                {# PUSH TO RETURN (refund btn) post-deposit. Mirrors        #}
-                {# `_gatekeeper.html`'s `.token-slot` shape so the SCSS    #}
-                {# from `_room.scss` carries over (rail glow on active     #}
-                {# state, claimed state on deposit, etc.).                 #}
-                <div class="token-slot{% if not deposit_reserved %} active{% else %} pending{% endif %}">
-                    {% if not deposit_reserved %}
-                    <form method="POST" action="{% url 'my_sea_insert_token' %}" style="display:contents">
-                        {% csrf_token %}
-                        <button type="submit" class="token-rails" aria-label="Insert token to play">
-                            <span class="rail"></span>
-                            <span class="rail"></span>
-                        </button>
-                    </form>
-                    {% else %}
-                    <div class="token-rails">
-                        <span class="rail"></span>
-                        <span class="rail"></span>
-                    </div>
-                    {% endif %}
-                    <div class="token-panel">
-                        <div class="token-denomination">1</div>
-                        <span class="token-insert-label">INSERT TOKEN TO PLAY</span>
-                        <span class="token-return-label">PUSH TO RETURN</span>
-                    </div>
-                    {% if deposit_reserved %}
-                    <form method="POST" action="{% url 'my_sea_refund_token' %}" style="display:contents">
-                        {% csrf_token %}
-                        <button type="submit" class="token-return-btn" aria-label="Push to return"></button>
-                    </form>
-                    {% endif %}
+                {# Title panel — mirrors room's `<h1>{{ room.name }}</h1>` #}
+                {# inside `.gate-title-panel`. For solo my-sea the page    #}
+                {# title reads "@<handle>'s Sea" (rendered via the         #}
+                {# `at_handle` filter so handle-less users fall back to    #}
+                {# their email prefix).                                    #}
+                <div class="gate-title-panel">
+                    <header class="gate-header">
+                        <h1>{{ user|at_handle }}'s Sea</h1>
+                    </header>
                 </div>
 
-                {# PAID DRAW — commits the deposit + redirects to my-sea.  #}
-                {# Mirrors the room's PICK ROLES btn shape (`.btn-primary` #}
-                {# alongside the coin-slot in `.gate-top-row`).            #}
-                {% if deposit_reserved %}
-                <form method="POST" action="{% url 'my_sea_paid_draw' %}" class="my-sea-paid-draw-form">
-                    {% csrf_token %}
-                    <button type="submit"
-                            id="id_my_sea_paid_draw_btn"
-                            class="btn btn-primary">PAID<br>DRAW</button>
-                </form>
-                {% endif %}
+                {# 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 %}">
+                            {% if not deposit_reserved %}
+                            <form method="POST" action="{% url 'my_sea_insert_token' %}" style="display:contents">
+                                {% csrf_token %}
+                                <button type="submit" class="token-rails" aria-label="Insert token to play">
+                                    <span class="rail"></span>
+                                    <span class="rail"></span>
+                                </button>
+                            </form>
+                            {% else %}
+                            <div class="token-rails">
+                                <span class="rail"></span>
+                                <span class="rail"></span>
+                            </div>
+                            {% endif %}
+                            <div class="token-panel">
+                                <div class="token-denomination">1</div>
+                                <span class="token-insert-label">INSERT TOKEN TO PLAY</span>
+                                <span class="token-return-label">PUSH TO RETURN</span>
+                            </div>
+                            {% if deposit_reserved %}
+                            <form method="POST" action="{% url 'my_sea_refund_token' %}" style="display:contents">
+                                {% csrf_token %}
+                                <button type="submit" class="token-return-btn" aria-label="Push to return"></button>
+                            </form>
+                            {% endif %}
+                        </div>
+                    </div>
+
+                    <div class="gate-roles-panel">
+                        {% if deposit_reserved %}
+                        <form method="POST" action="{% url 'my_sea_paid_draw' %}" style="display:contents">
+                            {% csrf_token %}
+                            <button type="submit"
+                                    id="id_my_sea_paid_draw_btn"
+                                    class="launch-game-btn btn btn-primary">PAID<br>DRAW</button>
+                        </form>
+                        {% endif %}
+                    </div>
+                </div>
 
             </div>
         </div>