Let a large felt have larger seats, and the type that goes with them

The felt grows with the window and the pucks did not: 96px was the only
ceiling there was. Nine-handed, the seats covered 19% of the felt on a phone,
11% on a 1280px desktop and 8% at 1440px and beyond — and the stack figure a
dealer reads sat at 10px on a 2560px monitor, the same 10px as on a 360px
phone, well under every published floor for text meant to be read.

Two things stop this costing more than it buys.

Every candidate width is a forced layout. Simply raising the ceiling took the
layout pass from 24ms to 73ms twelve-handed on a desktop, so a screen that
cannot use the wider widths must not measure them: the extra pass is offered
only when the arithmetic already says the seats have room to spare, and a phone
measures exactly the ten widths, in the same order, that it measured before.
Timed with the order alternated so neither carries the warm-up: 10.7ms against
10.4ms on a phone, and +3 to +6ms where the widths are actually used.

And a wide puck on a narrow felt is worse than a small one. The first version
of this let phones through, and a 144px puck on an iPhone's 278px ring is half
the width of the table: six-handed, all six seats sat over the rail by 15px
against 5px before, reading as a stack of cards rather than a table with people
around it. So the ceiling is a fifth of the felt's shorter span, capped at 144.
Five is measured rather than chosen — the shorter span is 233-303px on every
phone in the sweep including sideways and 617-714px on tablets and desktops, so
any divisor between 3.2 and 6.4 separates them — and the test pins both ends.

Above the ordinary ceiling the puck takes the larger type as well, which is the
point of the extra width. Nine-handed: an iPad goes 96px/12px to 134px/15px, a
1440px desktop 96px/12px to 140px/15px, and the seats go from 8% of the felt to
12%. Every phone, at every seat count, is untouched.

The sweep is byte-identical to before this change: same six configurations,
same 63 offenders, empty diff.

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

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

@@ -1358,6 +1358,33 @@ button,
     font-size: var(--fs-2xs);
 }
 
+/* The other end of the same idea. A puck past the ordinary 96px ceiling has room the
+   type was never given: the felt grows with the window and the text did not, so a
+   dealer on a 2560px monitor read their stacks at the same 10px as one on a 360px
+   phone, on a table where the seats had dropped to 8% of the felt.
+
+   Two steps up the scale for the two numbers a dealer reads across the table, one for
+   the chair number in the corner, which is a reference rather than a reading. Not
+   proportional to the width — 96 to 144 is 1.5x and this is 1.25x — because a name is
+   a label on a puck, not a headline, and the puck also has to hold it: 15px is the
+   largest size at which "Mike from work", the longest name the sweep uses, still comes
+   out on one line at 144px.
+
+   Steps on the scale rather than a clamp(), for the same reason the tight set is: the
+   width is a continuum and the type is a set of deliberate sizes. */
+.seatsRoomy .seatPuckName {
+    font-size: var(--fs-md);
+}
+
+.seatsRoomy .seatPuckStack,
+.seatsRoomy .seatPuckTotal {
+    font-size: var(--fs-sm);
+}
+
+.seatsRoomy .seatChairNumber {
+    font-size: var(--fs-xs);
+}
+
 /* 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

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

@@ -405,6 +405,43 @@ const Render = {
     // The step the search walks down in. Six pixels is finer than the difference between
     // two font sizes and coarse enough to settle in ten tries.
     SEAT_WIDTH_STEP: 6,
+    // And the ceiling when the felt has room to spare, which on anything tablet-sized or
+    // larger it does. 96px was the only ceiling there was, so the felt grew with the
+    // window and the seats did not: measured nine-handed, the pucks covered 19% of the
+    // felt on a phone, 11% on a 1280px desktop and 8% at 1440px and beyond, with the
+    // stack figure a dealer reads sitting at 10px on a 2560px monitor.
+    //
+    // 144 rather than further. Past it the extra width buys nothing a dealer can use —
+    // at 144 a 15px "Mike from work" is already on one line, which is the longest thing
+    // a name is asked to be — and a puck much wider than its own contents stops reading
+    // as a seat and starts reading as a card.
+    SEAT_WIDTH_ROOMY_MAX: 144,
+    // Coarser above the ordinary ceiling, because up there the difference is 8% of the
+    // puck rather than the difference between two font sizes, and every candidate width
+    // costs a forced layout.
+    SEAT_WIDTH_ROOMY_STEP: 12,
+    // And the puck may not be more than a fifth of the shorter span of the ring.
+    //
+    // The containment arithmetic keeps a puck inside the table's *box*; the rail it
+    // looks like it should stay inside is an ellipse, and at the top and bottom of the
+    // ring the ellipse curves away from the box. Seats have always sat a little over
+    // the rail because of it — measured before any of this, 10px on a desktop and 46px
+    // on a phone held sideways — and the wider the puck, the wider that gap opens.
+    //
+    // Which made the first version of this a bad trade on exactly the screens it was
+    // supposed to leave alone. A 144px puck on an iPhone's 278px ring is half the width
+    // of the table: six-handed, all six sat over the rail by 15px against 5px before,
+    // and it read as a stack of cards rather than a table with people around it.
+    //
+    // A fifth is measured, not chosen. The shorter span is 248-318px on every phone in
+    // the sweep including sideways, and 672-978px on tablets and desktops, so any
+    // divisor between about 3.3 and 7 splits them; five sits in the middle with room
+    // either side. Above it the pass is skipped and a phone measures exactly the ten
+    // widths, and settles on exactly the puck, that it did before.
+    SEAT_ROOMY_SPAN_RATIO: 5,
+    // A puck past the ordinary ceiling gets the larger type, which is the point of the
+    // extra width — see `.seatsRoomy` in holdem.css.
+    SEAT_ROOMY_FROM_PX: 108,
     // Below this a puck cannot hold two lines of name and a row of hole cards, so the
     // typography drops to the tight set in one go. Width scales continuously; type
     // changes deliberately, which is the split the modern guidance actually draws —
@@ -529,11 +566,45 @@ const Render = {
     applySeatWidth(layer, width) {
         layer.style.setProperty("--seatPuckW", `${width}px`);
         layer.classList.toggle("seatsTight", width < this.SEAT_TIGHT_BELOW_PX);
+        layer.classList.toggle("seatsRoomy", width >= this.SEAT_ROOMY_FROM_PX);
+    },
+
+    // Is it worth asking about pucks wider than the ordinary ceiling?
+    //
+    // Arithmetic, not a measurement, and that is the whole point: closestSeatGapPx is
+    // the tightest centre-to-centre distance the seats will sit at on the widest ring
+    // they could have, so if that already clears the widest ordinary puck and its
+    // clearance, the felt has room going spare and the coarse pass above the ceiling
+    // will find some of it. If it does not — every phone in the sweep, at every seat
+    // count — the pass is skipped and exactly the ten widths that were measured before
+    // are measured now.
+    //
+    // Worth being strict about, because the candidates are not free. Raising the ceiling
+    // for everybody took the layout pass from 24ms to 73ms on a twelve-handed desktop,
+    // and it is the phones, which would gain nothing at all, that can least afford it.
+    roomForWiderPucks(count, box) {
+        if (!box) return false;
+        if (this.roomyWidthCeiling(box) <= this.SEAT_WIDTH_MAX) return false;
+        const gap = this.closestSeatGapPx(count, box, this.seatRingRadii());
+        return gap > this.SEAT_WIDTH_MAX + this.SEAT_CLEARANCE_PX;
+    },
+
+    // The widest a puck may be drawn on this felt, whatever the seats would allow.
+    roomyWidthCeiling(box) {
+        if (!box || !box.width || !box.height) return this.SEAT_WIDTH_MAX;
+        const span = Math.min(box.width, box.height) / this.SEAT_ROOMY_SPAN_RATIO;
+        return Math.min(this.SEAT_WIDTH_ROOMY_MAX, Math.floor(span));
     },
 
     // Widest first, because the widest that fits is the one we want.
-    seatWidthCandidates() {
+    seatWidthCandidates(count, box) {
         const widths = [];
+        if (count != null && this.roomForWiderPucks(count, box)) {
+            const ceiling = this.roomyWidthCeiling(box);
+            for (let w = ceiling; w > this.SEAT_WIDTH_MAX; w -= this.SEAT_WIDTH_ROOMY_STEP) {
+                widths.push(w);
+            }
+        }
         for (let w = this.SEAT_WIDTH_MAX; w > this.SEAT_WIDTH_MIN; w -= this.SEAT_WIDTH_STEP) {
             widths.push(w);
         }
@@ -616,7 +687,7 @@ const Render = {
         }
 
         const candidates = [];
-        for (const width of this.seatWidthCandidates()) {
+        for (const width of this.seatWidthCandidates(count, box)) {
             this.applySeatWidth(layer, width);
             const puck = this.measuredSeatBox();
             if (!puck) {

tests/holdem/README.md

@@ -442,6 +442,73 @@ is what makes it a test. Four faults were injected in total; the other three (dr
 two flags, letting the count into the key instead of a boolean, and counting only hand
 bets so a table playing antes is missed) fail 3, 2 and 1 of the eight.
 
+## Room the felt had and the type never got
+
+The felt grows with the window and the pucks did not — 96px was the only ceiling there
+was. Nine-handed, the seats covered 19% of the felt on a phone, 11% on a 1280px desktop
+and **8% at 1440px and beyond**, with the stack figure a dealer reads at **10px on a
+2560px monitor**, the same 10px as on a 360px phone.
+
+Two things stop the fix costing more than it buys, and `seatWidthSearch.test.js` checks
+both:
+
+- **Every candidate width is a forced layout.** Raising the ceiling for everybody took
+  the layout pass from 24ms to 73ms twelve-handed on a desktop. A screen that cannot use
+  the wider widths must not measure them, so a phone is checked to measure *exactly* the
+  ten widths it measured before — same list, same order — and the measured cost on a
+  phone is unchanged (10.7ms against 10.4ms, which is noise).
+- **A wide puck on a narrow felt is worse than a small one.** The first version let
+  phones through, and a 144px puck on an iPhone's 278px ring is half the width of the
+  table: six-handed, all six seats sat over the rail by 15px against 5px before, and it
+  read as a stack of cards rather than a table with people around it.
+
+So the ceiling is a fifth of the felt's **shorter** span, capped at 144. Five is measured,
+not chosen: the shorter span is 233-303px on every phone in the sweep including sideways,
+and 617-714px on tablets and desktops, so any divisor between 3.2 and 6.4 separates them.
+The test pins both ends, so if the felt ever changes shape enough to bring those together
+it says so rather than letting the phones quietly start paying.
+
+Above the ordinary ceiling the puck also takes the larger type — `.seatsRoomy`, two steps
+up the scale for the two numbers read across the table and one for the chair number.
+Steps rather than a `clamp()`, for the same reason the tight set is: the width is a
+continuum and the type is a set of deliberate sizes.
+
+| nine-handed | before | after |
+| --- | --- | --- |
+| iPad puck / name | 96px / 12px | **134px / 15px** |
+| desktop 1440 puck / name | 96px / 12px | **140px / 15px** |
+| seats as a share of the felt, 1440 | 8% | **12%** |
+| every phone, every seat count | unchanged | unchanged |
+
+### What the rail check is actually measuring, which is not the rail
+
+Found while checking the above and **not fixed** — written down here because the number is
+worth having and the fix is not a small one.
+
+`#pokerTable` is `border-radius: 50%`. Both the settle pass in `render.js` and
+`seatsOnTheTable()` in the audit compare a puck against the four edges of the table's
+**bounding box**, which is a different and much slacker question than the one the message
+"hangs Npx past the rail" claims to answer: at the top and bottom of the ring the oval
+curves away from its own box, so a puck can be comfortably inside the box and visibly
+outside the felt.
+
+Measured against the ellipse instead — a point is outside when `(dx/a)² + (dy/b)² > 1`,
+and the ray from the centre crosses the boundary at `1/√t` of the way out — across 35
+configurations the check is seeing **303px of overhang as zero**, including **46px on a
+phone held sideways** that has been there for as long as the check has.
+
+Settling against the ellipse was tried and reverted, because it is not the local fix it
+looks like. Pulling the ring in far enough to clear the oval crowds the seats, and on a
+twelve-handed phone with everybody all-in it put seat 3's centre inside seat 4 — the one
+trade the width search explicitly refuses to make, since a dealer can see a puck over the
+rail but cannot see a tap answering for the wrong player. Guarding against that instead
+leaves the ring out and the overhang worse: the sweep went from 6 failing configurations
+to 77, with 355 rail reports.
+
+Which is the finding. On a crowded table **keeping the seats off the rail and keeping them
+off each other are in genuine conflict**, and resolving it needs the two settled together
+rather than one bolted onto the other.
+
 ## Why the hand evaluator is tested the way it is
 
 `handRank.js` is the only module here that can pay the wrong person without anybody

tests/holdem/seatWidthSearch.test.js

@@ -0,0 +1,129 @@
+// How wide a seat puck is allowed to get, and on which screens.
+//
+// The felt grows with the window and the pucks did not: 96px was the only ceiling there
+// was, so nine-handed the seats covered 19% of the felt on a phone, 11% on a 1280px
+// desktop and 8% at 1440px and beyond — with the stack figure a dealer reads sitting at
+// 10px on a 2560px monitor, the same 10px as on a 360px phone.
+//
+// Two things stop the fix from costing more than it buys, and both are checked here.
+//
+// Every candidate width is a forced layout, and raising the ceiling for everybody took
+// the layout pass from 24ms to 73ms on a twelve-handed desktop — so a screen that cannot
+// use the extra widths must not measure them. And a 144px puck on an iPhone's 278px ring
+// is half the width of the table: the first version of this let phones through, and
+// six-handed all six seats sat over the rail by 15px against 5px before, reading as a
+// stack of cards rather than a table with people around it.
+const test = require("node:test");
+const { describe } = require("node:test");
+const assert = require("node:assert");
+const { Render } = require("./load");
+
+// Ring boxes read off the running page, not invented. #seatsLayer, nine-handed, at the
+// viewports the sweep visits.
+const RINGS = {
+    "Galaxy S8": { width: 233, height: 282 },
+    "iPhone 14": { width: 263, height: 470 },
+    "Pro Max": { width: 303, height: 535 },
+    "phone sideways": { width: 565, height: 257 },
+    iPad: { width: 689, height: 689 },
+    desktop: { width: 857, height: 617 },
+    "desktop 1440": { width: 992, height: 714 },
+};
+const SMALL = ["Galaxy S8", "iPhone 14", "Pro Max", "phone sideways"];
+const LARGE = ["iPad", "desktop", "desktop 1440"];
+
+describe("which felts may have wider pucks at all", () => {
+    test("no phone does, held either way up", () => {
+        // The guarantee the phones are owed: they measure the widths they always
+        // measured and settle on the puck they always settled on.
+        SMALL.forEach(name => {
+            assert.ok(Render.roomyWidthCeiling(RINGS[name]) <= Render.SEAT_WIDTH_MAX,
+                `${name} would be allowed a ${Render.roomyWidthCeiling(RINGS[name])}px puck`);
+            [2, 4, 6, 9, 12].forEach(count => assert.equal(
+                Render.roomForWiderPucks(count, RINGS[name]), false,
+                `${name} ${count}-handed`));
+        });
+    });
+
+    test("and every tablet and desktop does", () => {
+        LARGE.forEach(name => {
+            assert.ok(Render.roomyWidthCeiling(RINGS[name]) > Render.SEAT_WIDTH_MAX, name);
+        });
+    });
+
+    test("with a comfortable margin either side of the line", () => {
+        // The rule is a fifth of the shorter span, and the point of five is that it is
+        // not near either group. If a change to the felt ever moves these together,
+        // this says so before the phones quietly start paying for it.
+        const biggestSmall = Math.max(...SMALL.map(n => Math.min(RINGS[n].width, RINGS[n].height)));
+        const smallestLarge = Math.min(...LARGE.map(n => Math.min(RINGS[n].width, RINGS[n].height)));
+        assert.ok(smallestLarge > biggestSmall * 1.8,
+            `${biggestSmall}px and ${smallestLarge}px are too close for one divisor to separate`);
+        // Every divisor that keeps the phones out is at least the widest phone span over
+        // the ordinary ceiling; every one that lets the tablets in is below the narrowest
+        // large span over the same. 303/96 = 3.2 and 617/96 = 6.4, and five is between.
+        const floor = biggestSmall / Render.SEAT_WIDTH_MAX;
+        const cap = smallestLarge / Render.SEAT_WIDTH_MAX;
+        assert.ok(Render.SEAT_ROOMY_SPAN_RATIO >= floor,
+            `${Render.SEAT_ROOMY_SPAN_RATIO} lets a phone through; it has to be at least ${floor.toFixed(2)}`);
+        assert.ok(Render.SEAT_ROOMY_SPAN_RATIO < cap,
+            `${Render.SEAT_ROOMY_SPAN_RATIO} shuts the tablets out; it has to be under ${cap.toFixed(2)}`);
+    });
+
+    test("and a felt with no size at all is not one of them", () => {
+        assert.equal(Render.roomForWiderPucks(9, null), false);
+        assert.equal(Render.roomForWiderPucks(9, { width: 0, height: 0 }), false);
+    });
+});
+
+describe("the widths a felt actually measures", () => {
+    const widthsFor = (name, count) => Render.seatWidthCandidates(count, RINGS[name]);
+
+    test("a phone measures exactly the ten it measured before", () => {
+        const expected = [];
+        for (let w = Render.SEAT_WIDTH_MAX; w > Render.SEAT_WIDTH_MIN; w -= Render.SEAT_WIDTH_STEP) {
+            expected.push(w);
+        }
+        expected.push(Render.SEAT_WIDTH_MIN);
+        SMALL.forEach(name => [6, 9, 12].forEach(count =>
+            assert.deepEqual(widthsFor(name, count), expected, `${name} ${count}-handed`)));
+    });
+
+    test("a desktop measures a handful more, and no more than a handful", () => {
+        const extra = widthsFor("desktop 1440", 9).length - widthsFor("Galaxy S8", 9).length;
+        assert.ok(extra > 0, "the wider widths never got offered");
+        assert.ok(extra <= 6, `${extra} extra forced layouts is more than this is worth`);
+    });
+
+    test("never wider than the felt's own ceiling", () => {
+        Object.keys(RINGS).forEach(name => [2, 6, 9, 12].forEach(count => {
+            const widest = Math.max(...widthsFor(name, count));
+            assert.ok(widest <= Math.max(Render.SEAT_WIDTH_MAX, Render.roomyWidthCeiling(RINGS[name])),
+                `${name} ${count}-handed offered ${widest}px`);
+            assert.ok(widest <= Render.SEAT_WIDTH_ROOMY_MAX);
+        }));
+    });
+
+    test("always widest first, always down to the floor", () => {
+        // The search takes the first width that fits, so the order is the whole
+        // algorithm — and the floor has to be on the list or a crowded table has
+        // nothing left to fall back to.
+        Object.keys(RINGS).forEach(name => [2, 9, 12].forEach(count => {
+            const widths = widthsFor(name, count);
+            widths.forEach((w, i) => {
+                if (i === 0) return;
+                assert.ok(w < widths[i - 1], `${name}: ${widths.join(", ")} is not descending`);
+            });
+            assert.equal(widths[widths.length - 1], Render.SEAT_WIDTH_MIN);
+        }));
+    });
+
+    test("and a crowded table on a big felt is told no like any other", () => {
+        // Room on the felt is necessary, not sufficient: the seats still have to clear
+        // each other. Enough of them on any ring and the wider widths stop being
+        // offered, which is the arithmetic doing the refusing rather than the
+        // measurement having to.
+        const crowded = [24, 30, 40].map(count => Render.roomForWiderPucks(count, RINGS.desktop));
+        assert.deepEqual(crowded, [false, false, false]);
+    });
+});