Give a phone on its side the table shape it needs

The last two rounds left one thing failing and said so: a landscape phone with
six or twelve seats stacked two of them 25px apart at each end of the felt, with
pucks 64px tall. It has been there since seats were first spaced by distance
rather than by angle. Three things were wrong at once, and it needed all three.

The rim is the wrong shape when the table is very flat. An ellipse 616px wide and
96px tall has nowhere to put the seats near its ends: the curve doubles back on
itself, so two seats a long walk apart come out one above the other. Past two and
a half times wider than tall the rim is now a stadium — two straight rails with a
half-round cap at each end, which is how a real poker table is built and exactly
why it is built that way. A cap is a half-circle of the felt's own height, so an
end takes one seat and the rest is rail. Only past that ratio: measured, the
cut-off lands between a landscape phone at 4.4 and every other layout the tool
has, 1.45 at 1280x900 and 1.0 to 1.4 upright, so no working table changes shape.

The ring had less height than the felt did. The seat layer is inset by half a
puck to keep the outermost seats on screen, and 26px off the top and bottom of a
96px felt left 44px to work with — less than half the table, which is why no rim
shape could have fixed it alone. The inset is a percentage where the felt is
short. The landscape branch never had that rule at all, because it is matched on
height while the inset lives in a width query, so an 844px-wide phone on its side
drew its ring against the felt's whole box; with a flat-topped stadium rail that
put a dealer button over Resolve Pot in the header.

And the puck was a line too tall. In the tight state the hole cards give up their
row: of the four things on a puck, the cards are the one the dealer is holding in
their other hand, and the seat editor still shows them. That took the puck from
64px to 55px, which is what finally cleared the ends.

Measured across 36 combinations of nine viewports and 2, 6, 9 and 12 seats: the
closest two seats at 640x360 go from 25px apart to 55px, and every combination is
clean. Then 216 audits across thirteen viewports, three seat counts and both a
mouse and a thumb: no failures, no console errors.

Co-Authored-By: Claude Opus 5 <[email protected]>
Claude-Session: https://claude.ai/code/session_015bnp7xKUPFFSpwkYNFaPgb

JoshHeaps.Net/wwwroot/css/casino/holdem.css

@@ -820,6 +820,43 @@ button,
     outline-offset: 1px;
 }
 
+/* Seats close enough together that full-size pucks would overlap. The class is set
+   from a measurement render.js takes off the ring itself — the closest two neighbours,
+   straight line — because no media query can see it: the same 390px phone is roomy at
+   six seats and crowded at nine, and a wide landscape felt crowds at its ends while
+   its rim says there is space. Not scoped to a screen size for the same reason. */
+.seatsTight .seat {
+    /* 58 was chosen by measurement and 46 was tried against it. On a roomy phone 46
+       cleared every overlap at nine seats where 58 left two — but in the state that
+       actually matters, a hand with a side pot where the bar has grown and the felt has
+       shrunk to suit, 46 overlapped four times and 58 twice. Pucks touching at that
+       density is the felt being small, not the puck being wide, and paying for it with
+       an ellipsis on every long name buys nothing. What has to hold is that each seat
+       keeps its own centre, so a tap lands on the player it was aimed at, and that is
+       measured at every size. */
+    width: 58px;
+    min-height: 38px;
+    padding: 3px 4px;
+}
+
+.seatsTight .seatPuckName {
+    margin-top: 0.35rem;
+    font-size: 0.62rem;
+}
+
+.seatsTight .seatPuckStack {
+    font-size: 0.55rem;
+}
+
+/* The hole cards give up their line here. A puck this close to its neighbours is 64px
+   tall and the seats at the ends of a landscape felt are 55px apart, so the line has to
+   come from somewhere — and of the four things on a puck, the cards are the one the
+   dealer is holding in their other hand. Name, bet and stack stay. The seat editor
+   still shows the cards in full. */
+.seatsTight .seatPuckCards {
+    display: none;
+}
+
 /* ---------- Seat editor panel (sidebar form for the selected seat) ---------- */
 
 .seatEditorPanel {
@@ -2921,34 +2958,20 @@ body.hasActionBar #toastHost {
        That trade was real then and isn't now: seats are spaced by distance around the
        rim rather than by angle, so a shorter felt no longer piles them up. Re-measured
        at 360x640 with the bar grown by a side pot, where the bottom seat sat 38px
-       inside it: capped, the felt is 240px and the ring clears the bar by 50, with the
-       audit clean at 6, 9 and 10 seats. Scroll room is not an answer for a seat that is
-       covered rather than merely below the fold. */
+       inside it: the ring now clears the bar by 50. Scroll room is not an answer for a
+       seat that is covered rather than merely below the fold.
+
+       The room is spent on height, not on both. Capping the *width* by it — the wide
+       layout's way, because there the felt is sized from its width — kept the table
+       square and threw away 96px of a 360px screen: 240x240 inside a 336px column. A
+       max-height leaves the width alone and lets the aspect ratio give way, so a short
+       screen gets a wide oval, which is the shape a poker table is anyway. Measured at
+       360x640: 336x240 rather than 240x240, same clearance, and the twelve-seat ring
+       that was crowded at 240 comes out clean. Where the room isn't the binding
+       constraint — 390x844 and up — nothing changes and the table stays round. */
     #pokerTableWrap {
-        max-width: calc(var(--feltRoomPx, 100vh) / var(--feltAspect));
-    }
-
-    /* A felt small enough that the rim can't give each seat its own puck width. Set
-       from the measured rim in render.js rather than from the window, because the
-       question is how much table there is per player, which no media query can see:
-       nine seats on a 240px felt get 72px of rim each and the puck is 76 across. */
-    .seatsTight .seat {
-        width: 58px;
-        min-height: 38px;
-        padding: 3px 4px;
-    }
-
-    .seatsTight .seatPuckName {
-        margin-top: 0.35rem;
-        font-size: 0.62rem;
-    }
-
-    .seatsTight .seatPuckStack {
-        font-size: 0.55rem;
-    }
-
-    .seatsTight .seatPuckCards {
-        font-size: 0.58rem;
+        max-width: none;
+        max-height: var(--feltRoomPx, 100vh);
     }
 
     /* Stacked, with the action that ends the hand furthest from a stray thumb. */
@@ -3020,10 +3043,18 @@ body.hasActionBar #toastHost {
     }
 
     /* Keeps every puck inside the viewport: the ring is drawn within this box,
-       so half a puck of padding is exactly enough to stop the overhang. */
+       so half a puck of padding is exactly enough to stop the overhang.
+
+       Half a puck is the right answer when the felt is tall enough to spare it. On a
+       phone held sideways it isn't: the felt is 96px tall there once the action bar has
+       grown, and 26px off the top and bottom left the ring 44px of height to work with
+       — less than half the table. That is what kept the seats at the ends stacked no
+       matter what shape the rim was.
+
+       Above about 216px of felt the flat 26px still wins, so nothing upright changes. */
     #seatsLayer,
     #betsLayer {
-        inset: 26px 44px;
+        inset: min(26px, 12%) 44px;
     }
 
     /* Narrower than the desktop puck: at a full ten-handed table the ring is
@@ -3312,6 +3343,11 @@ body.hasActionBar #toastHost {
            a table that is already as short as the screen allows. */
         aspect-ratio: auto;
         max-width: none;
+        /* This branch already spends the measured room on its own height. The phone
+           block's max-height is the same number arriving twice, and applying it here
+           took the felt down to the floor value and crowded the ring — measured at
+           640x360, two seats lost their centres to their neighbours. */
+        max-height: none;
     }
 
     /* The page's own top padding is 32px of nothing, on the screen that has the least
@@ -3387,6 +3423,16 @@ body.hasActionBar #toastHost {
         min-height: 40px;
     }
 
+    /* The same inset the phone layout uses, which this branch never had because it is
+       matched on height rather than width — so an 844px-wide phone on its side drew its
+       ring against the felt's full box. With the rim a stadium, the top rail is flat,
+       which put the button seat's dealer chip over the Resolve Pot button in the header
+       above. Percentages of a short felt, so the ring keeps the height it needs. */
+    #seatsLayer,
+    #betsLayer {
+        inset: min(26px, 12%) 44px;
+    }
+
 }
 
 /* ---------- Short phones, upright ----------

JoshHeaps.Net/wwwroot/js/casino/holdem/render.js

@@ -91,12 +91,21 @@ const Render = {
     // circle when there's nothing to measure — the same answer the ring gave before it
     // asked.
     feltAspect() {
-        if (typeof document === "undefined") return 1;
-        const wrap = document.getElementById("pokerTableWrap");
-        if (!wrap) return 1;
-        const box = wrap.getBoundingClientRect();
-        if (!box.width || !box.height) return 1;
-        return box.width / box.height;
+        const box = this.ringBox();
+        return box ? box.width / box.height : 1;
+    },
+
+    // The box a seat's left/top percentages actually resolve against. Not the felt: on
+    // a phone the seat layer is inset by half a puck so the outermost seats don't hang
+    // off the screen, and measuring the felt instead put the ring's shape out by that
+    // inset — twelve seats at 640x360 were computed 90px apart and drawn 60px apart,
+    // which is the difference between "fine" and "overlapping".
+    ringBox() {
+        if (typeof document === "undefined") return null;
+        const layer = document.getElementById("seatsLayer") || document.getElementById("pokerTableWrap");
+        if (!layer) return null;
+        const box = layer.getBoundingClientRect();
+        return box.width && box.height ? box : null;
     },
 
     // Bets sit on the felt between their player and the pot, the way chips actually
@@ -108,8 +117,11 @@ const Render = {
     // anything visible — it is just the honest way to say "on that player's spoke",
     // and it saves the second walk.
     betPosition(index, count, aspect = this.feltAspect()) {
-        const angle = this.ringAngles(count, 44, 42, aspect)[index];
-        return { left: 50 + 27 * Math.cos(angle), top: 50 + 25 * Math.sin(angle) };
+        const seat = this.seatPosition(index, count, aspect);
+        return {
+            left: 50 + (seat.left - 50) * (27 / 44),
+            top: 50 + (seat.top - 50) * (25 / 42),
+        };
     },
 
     // Seats spaced evenly around the rim — by the distance between them, not by the
@@ -127,33 +139,100 @@ const Render = {
     // an ellipse's has no closed form — 720 steps is far more than enough for a rim a
     // few hundred pixels long, and it runs once per render.
     positionOnRing(index, count, rx, ry, aspect = 1) {
-        const target = this.ringAngles(count, rx, ry, aspect)[index];
-        return {
-            left: 50 + rx * Math.cos(target),
-            top: 50 + ry * Math.sin(target),
-        };
+        return this.ringPositions(count, rx, ry, aspect)[index];
+    },
+
+    // Past this much wider than tall, the rim stops being an ellipse and becomes a
+    // stadium — two straight rails with a semicircular cap at each end.
+    //
+    // An ellipse that flat has nowhere to put the seats near its ends. At 640x360 with
+    // the bar grown by a side pot the felt is 616x96, and six seats came out with two
+    // of them stacked 25px apart at each end, pucks 64px tall. No puck size fixes 25px:
+    // the shape is wrong. A stadium's cap is a half-circle of the felt's own height, so
+    // an end holds one seat and the rest of the table is rail — which is how a real
+    // poker table is built, and why it is shaped that way.
+    //
+    // Only where it is needed. Anything rounder than this keeps the ellipse it has
+    // always had: measured, the cut-off lands between a landscape phone (4.4 and up)
+    // and every other layout the tool has (1.45 at 1280x900, 1.0 to 1.4 on a phone
+    // upright), so no currently-working table changes shape.
+    STADIUM_RATIO: 2.5,
+
+    // Seats spaced evenly around whichever rim this table has, as percentages.
+    ringPositions(count, rx, ry, aspect = 1) {
+        if (count <= 0) return [];
+        const halfWidth = rx * aspect;
+        const halfHeight = ry;
+        if (halfWidth <= halfHeight * this.STADIUM_RATIO) {
+            return this.ringAngles(count, rx, ry, aspect).map(angle => ({
+                left: 50 + rx * Math.cos(angle),
+                top: 50 + ry * Math.sin(angle),
+            }));
+        }
+        return this.stadiumPositions(count, halfWidth, halfHeight, aspect);
+    },
+
+    // The same walk, around a stadium instead. Its perimeter has a closed form, so
+    // this needs no sampling: two rails of 2(A-B) and two caps of piB.
+    stadiumPositions(count, halfWidth, halfHeight, aspect) {
+        const rail = halfWidth - halfHeight;
+        const cap = Math.PI * halfHeight;
+        const perimeter = 4 * rail + 2 * cap;
+
+        return Array.from({ length: count }, (_, seat) => {
+            // Clockwise from the top centre, so seat one sits where it always has.
+            let walked = (perimeter * seat) / count;
+            let x;
+            let y;
+            if (walked <= rail) {                        // top rail, going right
+                x = walked;
+                y = -halfHeight;
+            } else if (walked <= rail + cap) {           // right cap
+                const turned = (walked - rail) / halfHeight;
+                x = rail + halfHeight * Math.sin(turned);
+                y = -halfHeight * Math.cos(turned);
+            } else if (walked <= 3 * rail + cap) {       // bottom rail, going left
+                x = rail - (walked - rail - cap);
+                y = halfHeight;
+            } else if (walked <= 3 * rail + 2 * cap) {   // left cap
+                const turned = (walked - 3 * rail - cap) / halfHeight;
+                x = -rail - halfHeight * Math.sin(turned);
+                y = halfHeight * Math.cos(turned);
+            } else {                                     // top rail, back to the start
+                x = -rail + (walked - 3 * rail - 2 * cap);
+                y = -halfHeight;
+            }
+            return { left: 50 + x / aspect, top: 50 + y };
+        });
     },
 
     RING_STEPS: 720,
     ringCache: {},
 
-    // How much rim each seat gets, in pixels. Ramanujan's approximation for an
-    // ellipse's perimeter, which is well inside a pixel at these sizes.
-    rimPerSeat(count) {
-        const wrap = document.getElementById("pokerTableWrap");
-        if (!wrap || !count) return Infinity;
-        const box = wrap.getBoundingClientRect();
-        const a = (box.width * 44) / 100;
-        const b = (box.height * 42) / 100;
-        if (!a || !b) return Infinity;
-        const perimeter = Math.PI * (3 * (a + b) - Math.sqrt((3 * a + b) * (a + 3 * b)));
-        return perimeter / count;
+    // The closest two neighbouring seats come to each other, straight line, in pixels.
+    //
+    // Rim length divided by seat count was the first answer and it is the wrong one:
+    // it measures the walk between two seats rather than the gap between them, and on
+    // a flat ellipse those are nothing alike. At 640x360 six seats had 193px of rim
+    // each and sat 56px apart, because at the ends of a long oval the rim doubles back
+    // and two seats a long walk apart are stacked one above the other.
+    closestSeatGapPx(count, box = this.ringBox()) {
+        if (count < 2 || !box || !box.width || !box.height) return Infinity;
+
+        const points = this.ringPositions(count, 44, 42, box.width / box.height).map(seat => ({
+            x: (seat.left / 100) * box.width,
+            y: (seat.top / 100) * box.height,
+        }));
+        return points.reduce((closest, point, i) => {
+            const next = points[(i + 1) % points.length];
+            return Math.min(closest, Math.hypot(point.x - next.x, point.y - next.y));
+        }, Infinity);
     },
 
-    // A puck is 76px across. Under about that much rim each, neighbours start covering
-    // each other's middles, and a tap meant for one player lands on the next — so the
-    // pucks come down a size rather than the table pretending it has room it hasn't.
-    SEAT_ROOM_PX: 88,
+    // A puck is 76px across, so neighbours whose centres are closer than that overlap
+    // by definition; a few pixels more keeps them from touching. Under it the pucks
+    // come down a size rather than the table pretending it has room it hasn't.
+    SEAT_ROOM_PX: 84,
 
     // Called on every render and again whenever the felt is resized — the action bar
     // growing mid-hand shortens the table, and the seats have to answer that without
@@ -162,7 +241,7 @@ const Render = {
         const layer = document.getElementById("seatsLayer");
         if (!layer || !this.state) return;
         layer.classList.toggle("seatsTight",
-            this.rimPerSeat(this.state.seatCount) < this.SEAT_ROOM_PX);
+            this.closestSeatGapPx(this.state.seatCount) < this.SEAT_ROOM_PX);
     },
 
     // The angles that cut the rim into `count` equal lengths, starting at the top.

tests/holdem/seatRing.test.js

@@ -92,6 +92,100 @@ describe("a felt wider than it is tall", () => {
     });
 });
 
+describe("how close the closest two seats come", () => {
+    // What decides whether the pucks shrink. Rim length per seat was the first answer
+    // and it is the wrong question: it measures the walk between two seats, not the
+    // gap. On a long oval the rim doubles back at the ends, so two seats a long walk
+    // apart end up stacked one above the other.
+    const gap = (count, width, height) => Render.closestSeatGapPx(count, { width, height });
+
+    test("a flat table no longer stacks two seats at each end", () => {
+        // 616x96: the landscape felt on a 640x360 phone once the bar has grown. On an
+        // ellipse that flat the end pair came out 25px apart with 64px pucks. The rim
+        // is a stadium at this shape, so an end holds one seat.
+        assert.ok(gap(6, 616, 96) > 70, `${gap(6, 616, 96).toFixed(0)}px apart`);
+        assert.ok(gap(12, 616, 96) > 40, `${gap(12, 616, 96).toFixed(0)}px apart at twelve seats`);
+    });
+
+    test("an ellipse's ends are still closer than its rim suggests, which is why the shape changes", () => {
+        // Same felt, forced through the ellipse the tool uses for rounder tables.
+        const asEllipse = Render.ringAngles(6, 44, 42, 616 / 96).map(angle => ({
+            x: ((50 + 44 * Math.cos(angle)) / 100) * 616,
+            y: ((50 + 42 * Math.sin(angle)) / 100) * 96,
+        }));
+        const closest = asEllipse.reduce((least, point, i) => {
+            const next = asEllipse[(i + 1) % asEllipse.length];
+            return Math.min(least, Math.hypot(point.x - next.x, point.y - next.y));
+        }, Infinity);
+        assert.ok(closest < 70, `${closest.toFixed(0)}px`);
+        assert.ok(gap(6, 616, 96) > closest * 1.3,
+            `stadium ${gap(6, 616, 96).toFixed(0)}px against ellipse ${closest.toFixed(0)}px`);
+    });
+
+    test("a round table's neighbours are about as far apart as the rim says", () => {
+        const rim = (Math.PI * 2 * 0.43 * 400) / 9;
+        assert.ok(Math.abs(gap(9, 400, 400) - rim) < rim * 0.15);
+    });
+
+    test("more seats, less room, in that order", () => {
+        assert.ok(gap(12, 400, 400) < gap(9, 400, 400));
+        assert.ok(gap(9, 400, 400) < gap(6, 400, 400));
+        assert.ok(gap(6, 400, 400) < gap(6, 800, 800), "and a bigger table gives more");
+    });
+
+    test("nothing to measure between fewer than two seats", () => {
+        assert.equal(gap(1, 400, 400), Infinity);
+        assert.equal(gap(9, 0, 0), Infinity);
+    });
+});
+
+describe("which rim a table gets", () => {
+    // An ellipse until the table is much wider than tall, then a stadium: two rails
+    // and a half-round cap at each end, which is how a real poker table is built.
+    const shape = (width, height) => {
+        const aspect = width / height;
+        return 44 * aspect > 42 * Render.STADIUM_RATIO ? "stadium" : "ellipse";
+    };
+
+    test("every layout the tool had keeps the ellipse", () => {
+        assert.equal(shape(844, 608), "ellipse", "desktop");
+        assert.equal(shape(600, 600), "ellipse", "tablet");
+        assert.equal(shape(278, 314), "ellipse", "phone upright");
+        assert.equal(shape(336, 240), "ellipse", "short phone upright");
+    });
+
+    test("a phone on its side gets the stadium", () => {
+        assert.equal(shape(528, 73), "stadium");
+        assert.equal(shape(780, 113), "stadium");
+    });
+
+    test("the cap holds one seat instead of stacking two", () => {
+        // Six seats on a 616x96 rim: the walk between neighbours has to be longer than
+        // the cap, or two of them end up on the same half-circle.
+        const halfWidth = 44 * (616 / 96), halfHeight = 42;
+        const perimeter = 4 * (halfWidth - halfHeight) + 2 * Math.PI * halfHeight;
+        assert.ok(perimeter / 6 > Math.PI * halfHeight, "one seat per cap at six-handed");
+    });
+
+    test("seat one is still at the top centre, and the ring still mirrors", () => {
+        const seats = Array.from({ length: 8 }, (_, i) => Render.positionOnRing(i, 8, 44, 42, 616 / 96));
+        assert.ok(Math.abs(seats[0].left - 50) < 0.01);
+        assert.ok(seats[0].top < 50);
+        for (let seat = 1; seat < 4; seat++) {
+            const mirrored = seats[8 - seat];
+            assert.ok(Math.abs((seats[seat].left - 50) + (mirrored.left - 50)) < 0.01, `seat ${seat} across`);
+            assert.ok(Math.abs(seats[seat].top - mirrored.top) < 0.01, `seat ${seat} down`);
+        }
+    });
+
+    test("nobody is drawn off the felt", () => {
+        Array.from({ length: 12 }, (_, i) => Render.positionOnRing(i, 12, 44, 42, 616 / 96)).forEach((seat, i) => {
+            assert.ok(seat.left >= 5 && seat.left <= 95, `seat ${i + 1} across at ${seat.left.toFixed(1)}%`);
+            assert.ok(seat.top >= 7 && seat.top <= 93, `seat ${i + 1} down at ${seat.top.toFixed(1)}%`);
+        });
+    });
+});
+
 describe("the shape of the ring", () => {
     test("is a mirror image left to right", () => {
         const seats = ringPixels(10, 601, 126);