Add the landscape round to the release

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

@@ -3247,11 +3247,18 @@ body.hasActionBar #toastHost {
            why a seat's centre belonged to its neighbour.
         
            Landscape has width and no height, so the table takes the width it has and
-           is only as tall as the room left over. */
+           is only as tall as the room left over.
-        --feltRoom: calc(100vh - var(--actionBarHeight, 0px) - 7rem);
+
+           The height comes from --feltRoomPx, the same measured value the wide layout
+           caps its width by: the bar's real height, the wrap's real offset and the
+           bottom seat's overhang, all taken off the window. This branch used to work
+           it out itself as `100vh - bar - 7rem`, guessing that everything above the
+           felt came to 7rem. It comes to 108px at 640x360, which the guess covers, and
+           119px at 844x390, which it doesn't — so on an iPhone on its side the bottom
+           three seats sat up to 26px inside the action bar. Nothing here needs to
+           guess; the measurement was already being published. */
         width: 100%;
-        height: var(--feltRoom);
+        height: var(--feltRoomPx, calc(100vh - var(--actionBarHeight, 0px) - 7rem));
-        min-height: 7rem;
         /* This branch sets its own height outright, so neither the aspect ratio nor the
            cap derived from it has anything to say here — and the cap would only narrow
            a table that is already as short as the screen allows. */
@@ -3259,16 +3266,55 @@ body.hasActionBar #toastHost {
         max-width: none;
     }
 
+    /* The page's own top padding is 32px of nothing, on the screen that has the least
+       to spare. */
+    #holdemApp {
+        padding-top: 0.5rem;
+    }
+
     /* The header ate 148px of a 390px-tall window, which was most of the reason the
-       table started below the fold. Here it only needs to be a title bar. */
+       table started below the fold. Here it only needs to be a title bar.
+
+       It still wrapped to two rows, and that second row is 44px of the 390 — the title
+       block and the five buttons came to 829px inside a 765px header at 844x390, so
+       they missed sharing one line by 64px, and at 640x360 by rather more. What goes is
+       the page title: the one thing on this screen a dealer already knows. It is hidden
+       from the eye rather than removed, so the page keeps its heading for a screen
+       reader and for the browser's own outline. The hand number stays — nothing else on
+       the screen says which hand this is. */
     #holdemHeader {
         margin-bottom: 0.4rem;
         gap: 0.35rem;
+        flex-wrap: nowrap;
+        align-items: center;
     }
 
     #holdemHeader h1 {
-        font-size: 1.05rem;
+        position: absolute;
-        padding-bottom: 0.15rem;
+        width: 1px;
+        height: 1px;
+        margin: -1px;
+        padding: 0;
+        overflow: hidden;
+        clip-path: inset(50%);
+        white-space: nowrap;
+    }
+
+    .handCounterBadge {
+        margin-top: 0;
+    }
+
+    /* Tightened across, never down: the buttons keep the 44px a thumb needs. */
+    #holdemHeaderActions {
+        flex-wrap: nowrap;
+        gap: 0.35rem;
+    }
+
+    #holdemHeaderActions .holdemBtn {
+        padding-left: 0.55rem;
+        padding-right: 0.55rem;
+        font-size: 0.78rem;
+        white-space: nowrap;
     }
 
     .holdemSubtitle {

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

@@ -53,7 +53,14 @@ const ActionBar = {
     // moving the seats, and getting a different answer on the next pass.
     SEAT_OVERHANG_PX: 37,
     FELT_GAP_PX: 8,
-    FELT_MIN_PX: 220,
+    // The floor is a guard against a measurement that has gone wrong — not a size the
+    // window has agreed to hand over. It used to be 220px, which a phone on its side
+    // hasn't got: at 844x390 there are 99px between the header and the bar, and holding
+    // out for 220 is how the bottom row of seats came to sit 26px inside the Fold
+    // button. A floor that puts seats behind the bar defeats the one thing the floor is
+    // for, so it drops to the smallest felt still worth drawing and the measurement
+    // wins above it.
+    FELT_FLOOR_PX: 96,
 
     // How tall the felt can be and still leave the whole ring of seats above the bar.
     //
@@ -66,14 +73,22 @@ const ActionBar = {
     //
     // The wrap's offset is taken in document space rather than viewport space, so
     // scrolling the page doesn't resize the table under the dealer's hands.
+    feltRoomFor(windowHeight, barHeight, topInDocument) {
+        const room = windowHeight - barHeight - topInDocument -
+            this.SEAT_OVERHANG_PX - this.FELT_GAP_PX;
+        return Math.max(this.FELT_FLOOR_PX, Math.round(room));
+    },
+
     publishFeltRoom(barHeight) {
         const wrap = document.getElementById("pokerTableWrap");
         if (!wrap) return;
+        // Taking the top before the height is set matters: the wrap sits below the
+        // header in normal flow, so its own height never moves its top and this can't
+        // chase itself around the screen.
         const topInDocument = wrap.getBoundingClientRect().top + window.scrollY;
-        const room = window.innerHeight - barHeight - topInDocument -
-            this.SEAT_OVERHANG_PX - this.FELT_GAP_PX;
         document.documentElement.style.setProperty(
-            "--feltRoomPx", `${Math.max(this.FELT_MIN_PX, Math.round(room))}px`);
+            "--feltRoomPx",
+            `${this.feltRoomFor(window.innerHeight, barHeight, topInDocument)}px`);
     },
 
     // Anything to act on? A hand with nobody dealt in doesn't get a bar — and that

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

@@ -82,26 +82,100 @@ const Render = {
 
     // ---- Seats around the table (compact pucks) ----
 
-    seatPosition(index, count) {
+    seatPosition(index, count, aspect = this.feltAspect()) {
-        return this.positionOnRing(index, count, 44, 42);
+        return this.positionOnRing(index, count, 44, 42, aspect);
+    },
+
+    // How many times wider than tall the felt actually is, which is the one thing the
+    // ring needs from the layout and can't work out from percentages. Falls back to a
+    // 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;
     },
 
     // Bets sit on the felt between their player and the pot, the way chips actually
     // do — closer in than the seats, on the same spoke. The bets layer is inset to
     // match the seat ring (see the CSS), so this one radius holds at every size.
-    betPosition(index, count) {
+    //
-        return this.positionOnRing(index, count, 27, 25);
+    // The angle is the seat's own rather than one walked again round a tighter ellipse.
+    // The two answers are within half a degree of each other, so this is not a fix for
+    // 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) };
     },
 
-    positionOnRing(index, count, rx, ry) {
+    // Seats spaced evenly around the rim — by the distance between them, not by the
-        const angle = -90 + (360 / count) * index;
+    // angle they sit at.
-        const radians = (angle * Math.PI) / 180;
+    //
+    // Equal angles are only equal spacing on a circle. The felt is an ellipse, and a
+    // phone on its side makes it a very flat one: 601x126 at 640x360. Ten seats at 36°
+    // apart then put four of them down each steep side, where 36° of turn is barely any
+    // distance — seats 3 and 4 came out at the same x and 20px apart vertically, each
+    // puck 72px tall. Their centres landed on each other, so tapping a player got their
+    // neighbour, and the layout audit had been calling it at 640x360 and 667x375.
+    //
+    // Walking the perimeter instead puts the seats where a real table has them: along
+    // the two long rails, one at each end. The arc length is summed numerically because
+    // 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(radians),
+            left: 50 + rx * Math.cos(target),
-            top: 50 + ry * Math.sin(radians),
+            top: 50 + ry * Math.sin(target),
         };
     },
 
+    RING_STEPS: 720,
+    ringCache: {},
+
+    // The angles that cut the rim into `count` equal lengths, starting at the top.
+    // Every seat on a ring wants the same answer, so it is worked out once per shape
+    // and kept — the ring only changes when the table is resized or the window is.
+    ringAngles(count, rx, ry, aspect) {
+        if (count <= 0) return [];
+        const key = `${count}:${rx}:${ry}:${aspect.toFixed(3)}`;
+        if (this.ringCache[key]) return this.ringCache[key];
+
+        const start = -Math.PI / 2;
+        // Percentages of the width and of the height are not the same distance, so the
+        // horizontal radius is scaled into the vertical one's units before measuring.
+        const a = rx * aspect;
+        const b = ry;
+        const step = (2 * Math.PI) / this.RING_STEPS;
+        const cumulative = [0];
+        for (let i = 1; i <= this.RING_STEPS; i++) {
+            const from = start + (i - 1) * step;
+            const to = start + i * step;
+            const dx = a * (Math.cos(to) - Math.cos(from));
+            const dy = b * (Math.sin(to) - Math.sin(from));
+            cumulative.push(cumulative[i - 1] + Math.hypot(dx, dy));
+        }
+
+        const perimeter = cumulative[this.RING_STEPS];
+        const angles = [];
+        let walked = 0;
+        for (let seat = 0; seat < count; seat++) {
+            const wanted = (perimeter * seat) / count;
+            while (walked < this.RING_STEPS && cumulative[walked + 1] < wanted) walked++;
+            // Interpolate inside the step the seat falls in, so the answer doesn't
+            // jump in 0.5° increments.
+            const spanned = cumulative[walked + 1] - cumulative[walked];
+            const into = spanned > 0 ? (wanted - cumulative[walked]) / spanned : 0;
+            angles.push(start + (walked + into) * step);
+        }
+        this.ringCache[key] = angles;
+        return angles;
+    },
+
     // Colour a bet by the biggest chip that fits it, so a table with a chip legend
     // gets bets that look like the chips actually being pushed out.
     chipColorFor(amount) {

tests/holdem/feltRoom.test.js

@@ -0,0 +1,73 @@
+// How tall the felt is allowed to be.
+//
+// The bar is fixed to the bottom of the screen and grows with the hand, so the table
+// has to be told what is left. Everything below is the arithmetic that decides it —
+// the part that can be wrong without anyone noticing until a seat is behind the Fold
+// button.
+const test = require("node:test");
+const { describe } = require("node:test");
+const assert = require("node:assert");
+const { ActionBar } = require("./load");
+
+// window height, bar height, and how far down the page the felt starts.
+const room = (windowHeight, barHeight, top) => ActionBar.feltRoomFor(windowHeight, barHeight, top);
+
+describe("the room left for the felt", () => {
+    test("is what the window has after the bar, the header and the bottom seat", () => {
+        const reserved = ActionBar.SEAT_OVERHANG_PX + ActionBar.FELT_GAP_PX;
+        assert.equal(room(900, 127, 146), 900 - 127 - 146 - reserved);
+    });
+
+    test("shrinks when the bar grows mid-hand", () => {
+        // Side pots make the bar taller exactly when the dealer most needs to see who
+        // is still in.
+        const quiet = room(900, 117, 146);
+        const sidePots = room(900, 172, 146);
+        assert.equal(quiet - sidePots, 55);
+    });
+
+    test("leaves the bottom seat's overhang out of it", () => {
+        // The seat pucks hang below the felt's edge; the felt has to stop short by that
+        // much or the ring ends up in the bar even though the felt doesn't.
+        assert.ok(ActionBar.SEAT_OVERHANG_PX > 30, "half a puck");
+        assert.ok(room(900, 127, 146) < 900 - 127 - 146);
+    });
+});
+
+describe("a window too short to give what was asked", () => {
+    // A phone on its side: 390px tall, 127px of that is the bar and 119px is
+    // everything above the felt. What's left is under 100.
+    const landscape = () => room(390, 127, 119);
+
+    test("gets the measurement, not a comfortable number", () => {
+        // The floor used to be 220px, which this window hasn't got. Holding out for it
+        // put the bottom row of seats 26px inside the action bar — the exact fault the
+        // measurement exists to prevent.
+        assert.ok(landscape() < 150, `${landscape()}px`);
+        assert.ok(landscape() + 119 + 127 <= 390, "the felt still ends above the bar");
+    });
+
+    test("still draws a table rather than a line", () => {
+        assert.equal(ActionBar.feltRoomFor(200, 160, 100), ActionBar.FELT_FLOOR_PX);
+        assert.equal(ActionBar.feltRoomFor(0, 0, 0), ActionBar.FELT_FLOOR_PX);
+    });
+
+    test("never returns something a browser can't lay out", () => {
+        [[390, 300, 200], [100, 90, 90], [-10, 0, 0]].forEach(([h, bar, top]) => {
+            const answer = ActionBar.feltRoomFor(h, bar, top);
+            assert.ok(Number.isFinite(answer) && answer > 0, `${h}/${bar}/${top} gave ${answer}`);
+        });
+    });
+});
+
+describe("a window with room to spare", () => {
+    test("hands over everything that's left, floor or no floor", () => {
+        const reserved = ActionBar.SEAT_OVERHANG_PX + ActionBar.FELT_GAP_PX;
+        assert.equal(room(1000, 127, 146), 1000 - 127 - 146 - reserved);
+        assert.equal(room(1366, 120, 206), 1366 - 120 - 206 - reserved);
+    });
+
+    test("gives a whole number of pixels", () => {
+        assert.equal(room(844.4, 127.6, 223.2) % 1, 0);
+    });
+});

tests/holdem/seatRing.test.js

@@ -0,0 +1,147 @@
+// Where the seats sit on the rim.
+//
+// The ring used to space seats by angle, which is only the same as spacing them evenly
+// when the felt is a circle. On a phone held sideways the felt is 601x126, and equal
+// angles put four seats down each steep end, 20px apart, with pucks 72px tall — so a
+// seat's centre belonged to its neighbour and tapping a player got the wrong one.
+const test = require("node:test");
+const { describe } = require("node:test");
+const assert = require("node:assert");
+const { Render } = require("./load");
+
+// The seats as a dealer sees them: pixels on a felt of a given size.
+const ringPixels = (count, width, height, rx = 44, ry = 42) => {
+    const aspect = width / height;
+    return Array.from({ length: count }, (_, i) => {
+        const pos = Render.positionOnRing(i, count, rx, ry, aspect);
+        return { x: (pos.left / 100) * width, y: (pos.top / 100) * height };
+    });
+};
+
+const gaps = (points) => points.map((p, i) => {
+    const next = points[(i + 1) % points.length];
+    return Math.hypot(next.x - p.x, next.y - p.y);
+});
+
+// What the ring did before: one turn cut into equal angles.
+const byAngle = (index, count, rx, ry) => {
+    const radians = ((-90 + (360 / count) * index) * Math.PI) / 180;
+    return { left: 50 + rx * Math.cos(radians), top: 50 + ry * Math.sin(radians) };
+};
+
+describe("a round table", () => {
+    test("still spaces seats by angle, because on a circle that is the same thing", () => {
+        for (let seat = 0; seat < 9; seat++) {
+            const now = Render.positionOnRing(seat, 9, 40, 40, 1);
+            const before = byAngle(seat, 9, 40, 40);
+            assert.ok(Math.abs(now.left - before.left) < 0.2, `seat ${seat} left`);
+            assert.ok(Math.abs(now.top - before.top) < 0.2, `seat ${seat} top`);
+        }
+    });
+
+    test("seat one is at the top, whatever shape the felt is", () => {
+        [[600, 600], [601, 126], [351, 351], [949, 683]].forEach(([w, h]) => {
+            const first = Render.positionOnRing(0, 10, 44, 42, w / h);
+            assert.ok(Math.abs(first.left - 50) < 0.01, `${w}x${h} left`);
+            assert.ok(first.top < 50, `${w}x${h} is above the middle`);
+        });
+    });
+});
+
+describe("a felt wider than it is tall", () => {
+    // 640x360 landscape: the size the audit was failing at.
+    const wide = () => ringPixels(10, 601, 126);
+
+    const byAnglePixels = () => Array.from({ length: 10 }, (_, i) => {
+        const pos = byAngle(i, 10, 44, 42);
+        return { x: (pos.left / 100) * 601, y: (pos.top / 100) * 126 };
+    });
+
+    // The two seats at the right-hand end, which is where they crowd.
+    const endPairApart = (seats) => {
+        const rightmost = [...seats].sort((a, b) => b.x - a.x).slice(0, 2);
+        return Math.abs(rightmost[0].y - rightmost[1].y);
+    };
+
+    test("pulls the pair at each end apart", () => {
+        // They still share the end — ten seats on a rim this flat have nowhere else to
+        // be — but they stop sitting on top of each other.
+        const now = endPairApart(wide());
+        const before = endPairApart(byAnglePixels());
+        assert.ok(now > before * 1.4, `${now.toFixed(1)}px now, ${before.toFixed(1)}px before`);
+    });
+
+    test("nearly doubles the room between the closest two neighbours", () => {
+        // Not equal spacing in a straight line — at the ends the rim turns back on
+        // itself, so the same walk along it covers less ground across. Even there the
+        // gap goes from a third of a puck to most of one.
+        const now = Math.min(...gaps(wide()));
+        const before = Math.min(...gaps(byAnglePixels()));
+        assert.ok(now > before * 1.7, `${now.toFixed(1)}px now, ${before.toFixed(1)}px before`);
+        assert.ok(now > 55, `${now.toFixed(1)}px`);
+    });
+
+    test("never sits two seats on the same spot", () => {
+        const seats = wide();
+        seats.forEach((seat, i) => {
+            seats.slice(i + 1).forEach((other, j) => {
+                const apart = Math.hypot(seat.x - other.x, seat.y - other.y);
+                assert.ok(apart > 50, `seats ${i + 1} and ${i + j + 2} are ${apart.toFixed(1)}px apart`);
+            });
+        });
+    });
+});
+
+describe("the shape of the ring", () => {
+    test("is a mirror image left to right", () => {
+        const seats = ringPixels(10, 601, 126);
+        for (let seat = 1; seat < 5; seat++) {
+            const mirrored = seats[10 - seat];
+            assert.ok(Math.abs((seats[seat].x - 300.5) + (mirrored.x - 300.5)) < 0.5, `seat ${seat} across`);
+            assert.ok(Math.abs(seats[seat].y - mirrored.y) < 0.5, `seat ${seat} down`);
+        }
+    });
+
+    test("holds for the smallest and largest tables the seat count allows", () => {
+        [2, 3, 4, 9, 12, 24].forEach(count => {
+            const seats = ringPixels(count, 601, 126);
+            assert.equal(seats.length, count);
+            seats.forEach((seat, i) => {
+                assert.ok(Number.isFinite(seat.x) && Number.isFinite(seat.y), `${count}-handed seat ${i + 1}`);
+                assert.ok(seat.x >= 0 && seat.x <= 601, `${count}-handed seat ${i + 1} is on the felt`);
+            });
+            assert.ok(Math.min(...gaps(seats)) > 0, `${count}-handed seats are distinct`);
+        });
+    });
+
+    test("shares the rim out equally on a round table at any size", () => {
+        [3, 6, 9, 10, 24].forEach(count => {
+            const spacing = gaps(ringPixels(count, 500, 500, 40, 40));
+            const shortest = Math.min(...spacing);
+            const longest = Math.max(...spacing);
+            assert.ok(longest - shortest < 0.5,
+                `${count}-handed gaps ran ${shortest.toFixed(1)}-${longest.toFixed(1)}px`);
+        });
+    });
+
+    test("asked for no seats, offers no positions", () => {
+        assert.deepEqual(Render.ringAngles(0, 44, 42, 1), []);
+    });
+
+    test("puts each bet between its own player and the pot", () => {
+        // Where a dealer pushes the chips: on that player's line to the middle, short
+        // of the seat.
+        const bearing = (point) => Math.atan2(point.top - 50, point.left - 50);
+        const outFromMiddle = (point) => Math.hypot(point.left - 50, point.top - 50);
+
+        [[601, 126], [810, 583], [351, 351]].forEach(([w, h]) => {
+            for (let seat = 0; seat < 9; seat++) {
+                const player = Render.seatPosition(seat, 9, w / h);
+                const bet = Render.betPosition(seat, 9, w / h);
+                const offBy = Math.abs(bearing(bet) - bearing(player)) * (180 / Math.PI);
+                assert.ok(offBy < 1, `${w}x${h} seat ${seat + 1} is ${offBy.toFixed(1)}° off its spoke`);
+                assert.ok(outFromMiddle(bet) < outFromMiddle(player), `${w}x${h} seat ${seat + 1} is short of the seat`);
+            }
+        });
+    });
+});