From 7165974905851ba08ab6b0f61fce2f1e92f87b14 Mon Sep 17 00:00:00 2001 From: Disco DeDisco Date: Mon, 18 May 2026 18:19:11 -0400 Subject: [PATCH] =?UTF-8?q?table=20hex=20layout:=20fill=20aperture=20+=20e?= =?UTF-8?q?nlarge=20hex=20from=20160=C3=97185=20=E2=86=92=20200=C3=97231?= =?UTF-8?q?=20;=20chair=20clearance=20preserved?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit User report: hex felt smaller than the aperture even at portrait (off-centered, room to spare on top + bottom), and chair labels overlapped the hex edges at landscape — progressively worse as the hex grew at larger viewports. Three contributors stacked: (1) `.room-shell { max-height: 80vh }` capped the shell at 80% of viewport height even when the .room-page aperture had more room — at 1789×1031 this donated 228px (1053→825) of aperture height to dead margin; (2) scene design 360×300 was wider than tall (1.2 aspect) but landscape aperture is narrower than tall (~1.4), so the height cap bottlenecked scene-scale at min(aperture_w/360, aperture_h/300) instead of letting the hex grow; (3) chair font-size scales w. rem (clamp(14,2.4vmin,22)) but chair position scales w. --table-scale — at large viewports rem maxes at 22 so labels widen and push chair icons further from box-center toward the hex (visual "creep") ; fix: remove the 80vh cap (`max-height: 80vh` → `height: 100%` on .room-shell L340) so the shell stretches to fill the .room-page aperture; bump hex from 160×231 to 200×231 (regular pointy-top w. width = height × √3/2 = 200 * 1.1547 — comment in _room.scss updated); apothem of 200-wide pointy-top regular hex is 100px exact (200/√3 × √3/2), so `$pos-d` 110px → 140px gives 40px design-units of radial chair clearance (was 30); derived `$pos-d-x: round(140*0.5) = 70`, `$pos-d-y: round(140*0.866) = 121` for slot 2/3/5/6 diagonal anchors at 60° from horizontal (matches existing geometry approach); scene design height 300 → 320 to leave enough vertical headroom at large landscape that the rem-driven (font-size 1.6rem × scale) chair icons + labels don't clip the aperture top/bottom edges — at 1789×1111 w. scene_H=300 the AC/BC label tops sat AT aperture top (y=-21 vs aperture y=-22), bumping to 320 drops scale from 4.05 → 3.54 and leaves 76px of headroom; SCENE_H in room.js bumped to 320 to match (Math.min(w/SCENE_W, h/SCENE_H) sets --table-scale CSS var via transform: scale on .room-table-scene) ; visual verification via Claudezilla across three viewports (no test layer per user preference — layout regression coverage via spot-check on next room render) — iPhone-14 portrait 566×875: hex 243×281 → 314×363 (+29% wider, fills 55% of aperture width vs 44% before); mid landscape 1149×781: hex 333×385 → 493×569 (+48% wider, 56% vs 38% before); large landscape 1789×1111: hex 440×509 → 708×818 (+61% wider, 48% vs 30% before — the most dramatic improvement, matching user's "progressively worse the larger the hex grows" observation). Chair clearance now uniform 40 design-units radially across all scales; AC/BC labels stay 76px inside aperture top at the largest viewport ; dead `$seat-r`/`$seat-r-x`/`$seat-r-y` consts at L357-359 left in place (unused elsewhere in codebase but out of scope for this layout fix) ; full IT/UT 999 green in 46s — no regressions; .table-hex / .table-hex-border / .room-table-scene / .table-seat positioning consts are the only refs to these dimensions across SCSS & JS so no cascade beyond room layout. Unblocks Sprint 2+ (My Sea applet will share the same hex CSS, parameterized, per user's intent for future friend-invite up-to-6-person rooms) Code architected by Disco DeDisco Git commit message Co-Authored-By: Claude Sonnet 4.6 --- src/apps/epic/static/apps/epic/room.js | 2 +- src/static_src/scss/_room.scss | 38 +++++++++++++------------- 2 files changed, 20 insertions(+), 20 deletions(-) diff --git a/src/apps/epic/static/apps/epic/room.js b/src/apps/epic/static/apps/epic/room.js index 9f144df..99a2544 100644 --- a/src/apps/epic/static/apps/epic/room.js +++ b/src/apps/epic/static/apps/epic/room.js @@ -1,5 +1,5 @@ (function () { - var SCENE_W = 360, SCENE_H = 300; + var SCENE_W = 360, SCENE_H = 320; function scaleTable() { var scene = document.querySelector('.room-table-scene'); diff --git a/src/static_src/scss/_room.scss b/src/static_src/scss/_room.scss index dcfaf62..a436d54 100644 --- a/src/static_src/scss/_room.scss +++ b/src/static_src/scss/_room.scss @@ -337,7 +337,7 @@ html.sea-open #id_aperture_fill { align-items: stretch; gap: 2rem; width: 100%; - max-height: 80vh; + height: 100%; align-self: stretch; } @@ -345,24 +345,22 @@ html.sea-open #id_aperture_fill { // // .table-hex: regular pointy-top hexagon. // clip-path polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%) -// on a 160×185 container gives equal-length sides (height = width × 2/√3). +// on a 200×231 container gives equal-length sides (height = width × 2/√3). // // Seats use absolute positioning from the .room-table centre. -// $seat-r = 130px — radius to seat centroid -// $seat-r-x = round(130px × sin60°) = 113px — horizontal component -// $seat-r-y = round(130px × cos60°) = 65px — vertical component -// // Clockwise from top: slots 1→2→3→4→5→6. -$seat-r: 130px; -$seat-r-x: round($seat-r * 0.866); // 113px -$seat-r-y: round($seat-r * 0.5); // 65px +$seat-r: 140px; +$seat-r-x: round($seat-r * 0.866); // 121px +$seat-r-y: round($seat-r * 0.5); // 70px // Seat edge-midpoint geometry (pointy-top hex). -// Apothem ≈ 80px + 30px clearance = 110px total push from centre. -$pos-d: 110px; -$pos-d-x: round($pos-d * 0.5); // 55px -$pos-d-y: round($pos-d * 0.866); // 95px +// 200×231 hex → apothem = 100px; $pos-d = 140 leaves 40px design-units of +// chair clearance radially. $pos-d-x / $pos-d-y are the x/y components for +// diagonal seats (cos/sin of 60° from horizontal). +$pos-d: 140px; +$pos-d-x: round($pos-d * 0.5); // 70px +$pos-d-y: round($pos-d * 0.866); // 121px // ─── Position strip ──────────────────────────────────────────────────────── // Numbered gate-slot circles sit above the gate backdrop/overlay (z 130 > 120 @@ -482,10 +480,12 @@ html:has(.gate-backdrop) .position-strip .gate-slot button { pointer-events: aut } // Fixed design-size scene; JS scales it to fill .room-table via transform: scale(). -// Design dims: seat reach is ±110px H / ±95px V from centre + seat element size. +// Design dims: seat reach is ±140px H / ±121px V from centre + seat element size. +// scene H of 320 leaves vertical headroom at large landscape so the rem-scaled +// chair icons + labels don't clip the aperture top/bottom edges. .room-table-scene { width: 360px; - height: 300px; + height: 320px; position: relative; display: flex; align-items: center; @@ -496,8 +496,8 @@ html:has(.gate-backdrop) .position-strip .gate-slot button { pointer-events: aut // Hex border: clip-path clips CSS borders, so the ring is a wrapper with the // same hex polygon at a slightly larger size. 0.25rem each side — subtle only. .table-hex-border { - width: calc(160px + 0.5rem); - height: calc(185px + 0.5rem); + width: calc(200px + 0.5rem); + height: calc(231px + 0.5rem); clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); background: rgba(var(--quaUser), 1); filter: drop-shadow(0 0 6px rgba(var(--quaUser), 0.5)); @@ -507,8 +507,8 @@ html:has(.gate-backdrop) .position-strip .gate-slot button { pointer-events: aut } .table-hex { - width: 160px; - height: 185px; + width: 200px; + height: 231px; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); // Six gradients — one per hex face — each perpendicular to that face so the // shadows follow the hex geometry rather than the rectangular bounding box.