discoman/python-tdd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

table hex layout: fill aperture + enlarge hex from 160×185 → 200×231 ; chair clearance preserved

Browse Source 
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 <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Disco DeDisco
2026-05-18 18:19:11 -04:00
parent fbe6c12ded
commit 7165974905
2 changed files with 20 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/apps/epic/static/apps/epic/room.js
View File

@@ -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');

38
src/static_src/scss/_room.scss
View File

@@ -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.