my-sea: seated chairs settle to --secUser; owner sees all seated members; gear menu column; visit hex scales — TDD

Four my-sea / my_sea_visit fixes from user feedback.

1. Seated-chair snap-back: `.my-sea-landing .table-seat.seated .fa-chair`
   forced PERMANENT --terUser + --ninUser glow, out-specifying _room.scss's
   --secUser settle — so a seated chair eased in (the .seat-just-seated flare)
   then SNAPPED back to the glow. Removed it; the steady look is now the
   _room.scss --secUser as spec'd. The viewer's --self marker moves off the
   chair onto the position label so the chair can rest at --secUser.

2. Owner multi-seat: my_sea.html's landing rendered a hardcoded 1C-only seat
   loop, so the owner only ever saw herself even after refresh. It now renders
   the shared `_my_sea_seats(request.user)` ring — owner 1C + present visitors
   2C-6C — the same list the spectator + broadcasts use. (Live owner-side push
   is a follow-on; this fixes the on-refresh case.)

3. Gear sea menu: NVM + BYE laid out in a ROW because the BYE form is
   display:contents + applets.js force-sets the menu to display:block on open
   (can't flex the menu itself). Wrap them in the shared `.menu-btns` flex
   container and override it to a COLUMN in portrait / ROW in landscape (DRY —
   same container the room/applet menus use).

4. Visit hex scale: my_sea_visit didn't load room.js, so scaleTable() never ran
   and the table-hex rendered unscaled (unlike the owner's my_sea). Load room.js
   on the visit page too.

62 gameboard ITs (gear NVM + owner-seat + visit) green.

Code architected by Disco DeDisco <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Disco DeDisco
2026-05-30 00:04:04 -04:00
parent 0693a422d2
commit 877e0f544a
7 changed files with 72 additions and 42 deletions

View File

@@ -386,6 +386,9 @@ def my_sea(request):
# `.fa-circle-check` on the landing's 1C chair (user-spec 2026-05-29);
# a DEL'd row at GATE VIEW (empty hand, no paid credit) reads unseated.
"seat1_seated": hand_non_empty or show_paid_draw,
# The owner's landing hex shows present visitors too (2C-6C), not just
# 1C — the same `_my_sea_seats` ring the spectator + broadcast use.
"seats": _my_sea_seats(request.user),
"show_picker": show_picker,
"show_cont_draw": show_cont_draw,
# Sub-btn .active flag for the burger fan — Sea sub-btn lights up

View File

@@ -86,6 +86,16 @@
#id_billboard_applet_menu { @extend %applet-menu; }
#id_billscroll_menu { @extend %applet-menu; }
#id_my_sea_menu { @extend %applet-menu; }
// My-Sea gear menu — stack its btns (NVM + BYE) in a COLUMN in portrait,
// matching the room gear menu's vertical feel; flips to a ROW in landscape
// (handled in the landscape block below). The menu itself can't be flexed —
// applets.js force-sets inline `display: block` on open — so this overrides
// the shared `%applet-menu .menu-btns` row to a column (margin-top reset since
// the My-Sea menu has nothing above the btns). 2026-05-30.
#id_my_sea_menu .menu-btns {
flex-direction: column;
margin-top: 0;
}
#id_bud_menu { @extend %applet-menu; }
// Page-level gear buttons — fixed to viewport bottom-right
@@ -163,6 +173,10 @@
bottom: auto;
left: auto;
}
// Landscape: the My-Sea gear menu lays its btns out in a ROW (space is
// tight vertically), reverting the portrait column above.
#id_my_sea_menu .menu-btns { flex-direction: row; }
}
// ── Applet box visual shell (reusable outside the grid) ────

View File

@@ -293,19 +293,14 @@ body.page-gameboard {
grid-column: 1;
}
// Seated chair (post-FREE DRAW). Visual transition mirrors
// `.table-seat.active .fa-chair` from _room.scss line 626 —
// --terUser color + --ninUser drop-shadow glow — but uses a stable
// `.seated` class (semantically distinct from `.active`: active =
// current turn in a multi-user room; seated = draw-locked occupant
// in this solo-flow). _room.scss line 596 makes the colour change
// a 0.6s ease transition so the chair animates rather than snaps.
// Status icon (.position-status-icon) colour swap fa-ban red →
// fa-circle-check green is handled by _room.scss lines 615-616.
.table-seat.seated .fa-chair {
color: rgba(var(--terUser), 1);
filter: drop-shadow(0 0 4px rgba(var(--ninUser), 1));
}
// NOTE: the steady seated-chair look is owned by `_room.scss`'s
// `.table-seat.seated .fa-chair` (--secUser, no glow) — the one-shot
// --terUser/--ninUser flare is the transient `.seat-just-seated`
// animation (my-sea-seat-flare, 2s forwards). An earlier `.my-sea-landing`
// override here forced the seated chair to PERMANENT --terUser + glow,
// which snapped back after the flare settled (it out-specified the
// _room.scss settle) — removed 2026-05-29 so a seated chair eases in then
// rests at opaque --secUser as spec'd.
}
// Picker phase bg — `--duoUser` matches the table hex's interior so

View File

@@ -640,9 +640,11 @@ html:has(.gate-backdrop) .position-strip .gate-slot button { pointer-events: aut
&.seat-just-seated .fa-chair {
animation: my-sea-seat-flare 2s ease forwards;
}
// The viewer's own occupied seat on the multi-seat spectator hex — a
// subtle --terUser tint so they can pick themselves out of 2C6C.
&.table-seat--self .fa-chair {
// The viewer's own occupied seat on the multi-seat spectator hex — tint
// the position LABEL (2C…) --terUser so they can pick themselves out,
// WITHOUT recolouring the chair (which must rest at the steady --secUser
// seated look, not the flare colour). 2026-05-29.
&.table-seat--self .seat-position-label {
color: rgba(var(--terUser), 1);
}

View File

@@ -39,6 +39,10 @@ window.mySeaGuardedNav = window.mySeaGuardedNav || function (e, url) {
};
</script>
<div id="id_my_sea_menu" style="display:none">
{# `.menu-btns` is the flex container the shared %applet-menu styles — #}
{# column in portrait / row in landscape (the menu itself can't be flexed #}
{# since applets.js force-sets display:block on open). #}
<div class="menu-btns">
<button type="button" class="btn btn-cancel" onclick="mySeaGuardedNav(event, '{{ nvm_url }}')">NVM</button>
{# Spectator-only BYE (Phase B) — drops presence (status=LEFT, frees seat #}
{# 2C, kills voice). Rendered below NVM only when the caller passes a #}
@@ -53,4 +57,5 @@ window.mySeaGuardedNav = window.mySeaGuardedNav || function (e, url) {
</form>
{% endif %}
</div>
</div>
{% include "apps/applets/_partials/_gear.html" with menu_id="id_my_sea_menu" %}

View File

@@ -86,19 +86,26 @@
</div>
</div>
</div>
{% for n in "123456" %}
{# Chair-position labels (1C-6C). No roles in #}
{# my-sea (this is the solo draw flow); using #}
{# `.seat-position-label` instead of the room's #}
{# `.seat-role-label` to keep the no-role #}
{# semantics clean. `.position-status-icon` + #}
{# `.fa-ban` are unchanged — already role- #}
{# agnostic in _room.scss. #}
<div class="table-seat{% if n == '1' and seat1_seated %} seated{% endif %}" data-slot="{{ n }}"{% if n == '1' and seat1_seated %} data-seat-token="owner-{{ request.user.id }}-{{ active_draw.id }}"{% endif %}>
{# Owner 1C + present visitors 2C-6C — the shared #}
{# `_my_sea_seats` ring, so the owner sees who's #}
{# seated at her table, not just herself. The FREE #}
{# DRAW client-side transition still targets #}
{# `.table-seat[data-slot="1"]`. `.position-status- #}
{# icon` / `.fa-ban` are role-agnostic in _room.scss. #}
{% for seat in seats %}
{% if seat.present %}
<div class="table-seat seated" data-slot="{{ seat.n }}" data-seat-token="{{ seat.token }}">
<i class="fa-solid fa-chair"></i>
<span class="seat-position-label">{{ n }}C</span>
<i class="position-status-icon fa-solid {% if n == '1' and seat1_seated %}fa-circle-check{% else %}fa-ban{% endif %}"></i>
<span class="seat-position-label">{{ seat.label }}</span>
<i class="position-status-icon fa-solid fa-circle-check"></i>
</div>
{% else %}
<div class="table-seat" data-slot="{{ seat.n }}">
<i class="fa-solid fa-chair"></i>
<span class="seat-position-label">{{ seat.label }}</span>
<i class="position-status-icon fa-solid fa-ban"></i>
</div>
{% endif %}
{% endfor %}
</div>
</div>

View File

@@ -81,6 +81,10 @@
{% endblock content %}
{% block scripts %}
{# room.js's scaleTable() fits the table-hex scene to the aperture — #}
{# same as the owner's my_sea (which loads it too); without it the visit #}
{# hex renders unscaled. #}
<script src="{% static 'apps/epic/room.js' %}"></script>
<script src="{% static 'apps/gameboard/my-sea-seats.js' %}"></script>
<script src="{% static 'apps/epic/burger-btn.js' %}"></script>
{# Voice-affordance glow/pulse machine — keys on the voice sub-btn's #}