Stop rebuilding the hand log after every fold, call and raise

Profiled a long night at a full table — 24 seats, 200 logged hands — because
that's the state the tool is slowest in and the one a dealer reaches at 2am.

A full re-render cost 30ms, and it runs after every single action. Broken down,
25.7ms of that was renderHandHistory: tearing down and rebuilding 200 rows of a
panel that hadn't changed and that nobody is looking at mid-hand. Everything
else on the table put together came to about 4ms.

The log only changes when a hand is settled or the history is cleared — maybe
once every thirty taps. It now carries a cheap signature (length, hand counter,
and the newest row) and is skipped when that hasn't moved. Entries are immutable
once written and only ever added at the front, so the signature catches a
recorded hand, a cleared history, and an undo that puts a hand back.

    renderAll, every action     30.07ms -> 4.18ms
    renderHandHistory, skipped  25.74ms -> 0ms
    renderHandHistory, rebuild  25.74ms -> 9.05ms

The rebuild got faster too, for the times it does run — once per hand, where
25ms of jank lands exactly on the "next hand" tap. toLocaleTimeString was the
single most expensive call in the loop and a logged hand's timestamp never
changes, so the formatted string is kept; and the rows are built into a fragment
so the panel lays out once instead of two hundred times.

A cache like this is only worth having if it can't go stale — a dealer reading
last hand's payouts while settling this one is worse than a slow panel. 10 tests
cover the invalidation directly: unchanged through a street of betting, changed
by settling, by clearing, by an undo back to a shorter log, by two hands that
differ only in the pot, and by the counter moving on.

Validated with Playwright against the real page: the rendered rows match the
stored history through settling a hand in the wizard, undoing it, clearing the
log and recording again. Touch and layout guarantees from the earlier rounds
still hold — 0 of 87 controls on touch-action auto, 0 tap-highlighted, every
stack still inside its own puck. 109 tests passing.

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

JoshHeaps.Net/Pages/Casino/TexasHoldem.cshtml

@@ -138,7 +138,7 @@
             <details class="sidebarPanel">
                 <summary>Table Notes</summary>
                 <div class="panelBody">
-                    <textarea id="tableNotes" rows="4" placeholder="Anything else worth tracking — side bets, IOUs, running totals..."></textarea>
+                    <textarea id="tableNotes" rows="4" aria-label="Table notes" placeholder="Anything else worth tracking — side bets, IOUs, running totals..."></textarea>
                 </div>
             </details>
         </aside>
@@ -198,8 +198,8 @@
 
 <template id="chipLegendRowTemplate">
     <div class="chipLegendRow">
-        <input type="color" class="chipColorInput" />
-        <input type="number" class="chipValueInput" min="0" step="0.01" placeholder="value" />
+        <input type="color" class="chipColorInput" aria-label="Chip colour" />
+        <input type="number" class="chipValueInput" min="0" step="0.01" placeholder="value" aria-label="Chip value" />
         <button class="holdemBtn holdemBtnSmall holdemBtnDanger removeChipColorBtn">×</button>
     </div>
 </template>
@@ -253,7 +253,7 @@
         </div>
         <div class="addChipsActions">
             <button id="addChipsConfirmBtn" class="holdemBtn holdemBtnAccent" type="button">Add to stack</button>
-            <button id="addChipsCancelBtn" class="holdemBtn holdemBtnGhost" type="button">Cancel</button>
+            <button id="addChipsCancelBtn" data-modal-close class="holdemBtn holdemBtnGhost" type="button">Cancel</button>
         </div>
     </div>
 </div>
@@ -263,7 +263,7 @@
         <div class="seatSheetGrip" aria-hidden="true"></div>
         <div class="rulingsHeader">
             <h2 id="rulingsTitle">Common rulings</h2>
-            <button id="closeRulingsBtn" class="holdemBtn holdemBtnSmall holdemBtnGhost" type="button">Done</button>
+            <button id="closeRulingsBtn" data-modal-close class="holdemBtn holdemBtnSmall holdemBtnGhost" type="button">Done</button>
         </div>
 
         <p class="rulingsIntro">
@@ -314,7 +314,7 @@
             <span id="seatMenuSubtitle"></span>
         </div>
         <div id="seatMenuActions"></div>
-        <button id="seatMenuCancelBtn" class="holdemBtn holdemBtnGhost" type="button">Cancel</button>
+        <button id="seatMenuCancelBtn" data-modal-close class="holdemBtn holdemBtnGhost" type="button">Cancel</button>
     </div>
 </div>
 
@@ -324,7 +324,7 @@
         <div class="cardPickerHeader">
             <h2 id="cardPickerTitle"></h2>
             <button id="cardPickerClearBtn" class="holdemBtn holdemBtnSmall" type="button">Clear</button>
-            <button id="cardPickerCloseBtn" class="holdemBtn holdemBtnSmall holdemBtnGhost" type="button">Done</button>
+            <button id="cardPickerCloseBtn" data-modal-close class="holdemBtn holdemBtnSmall holdemBtnGhost" type="button">Done</button>
         </div>
         <div id="cardPickerSlots"></div>
         <div id="cardPickerGrid"></div>
@@ -340,17 +340,17 @@
         <h2 id="confirmTitle"></h2>
         <p id="confirmMessage"></p>
         <div class="confirmActions">
-            <button id="confirmCancelBtn" class="holdemBtn holdemBtnGhost" type="button">Cancel</button>
+            <button id="confirmCancelBtn" data-modal-close class="holdemBtn holdemBtnGhost" type="button">Cancel</button>
             <button id="confirmAcceptBtn" class="holdemBtn holdemBtnDanger" type="button">Confirm</button>
         </div>
     </div>
 </div>
 
 <div id="potWizardOverlay" hidden>
-    <div id="potWizardModal">
+    <div id="potWizardModal" role="dialog" aria-labelledby="potWizardTitle">
         <div class="potWizardHeader">
-            <h2>Resolve the Pot</h2>
-            <button id="closePotWizardBtn" class="holdemBtn holdemBtnGhost">✕</button>
+            <h2 id="potWizardTitle">Resolve the Pot</h2>
+            <button id="closePotWizardBtn" data-modal-close class="holdemBtn holdemBtnGhost">✕</button>
         </div>
         <div id="potWizardBody"></div>
     </div>
@@ -374,5 +374,6 @@
     <script src="~/js/casino/holdem/shortcuts.js?v=@ViewData["cssVersion"]"></script>
     <script src="~/js/casino/holdem/potWizard.js?v=@ViewData["cssVersion"]"></script>
     <script src="~/js/casino/holdem/handHistoryExport.js?v=@ViewData["cssVersion"]"></script>
+    <script src="~/js/casino/holdem/modal.js?v=@ViewData["cssVersion"]"></script>
     <script src="~/js/casino/holdem/main.js?v=@ViewData["cssVersion"]"></script>
 }

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

@@ -6,6 +6,148 @@ body {
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
 }
 
+/* ---------- Touch ----------
+   A dealer runs this one-handed on a phone with players waiting, so a tap has to
+   register the instant their thumb lands.
+
+   `touch-action: manipulation` is the whole game here. Without it a mobile browser
+   holds every tap for ~300ms to see whether a second one is coming that would mean
+   "zoom in" — on top of which double-tapping a seat, which this tool uses for fold,
+   *is* the browser's zoom gesture, so the dealer's shortcut fights the page zooming
+   under their thumb. `manipulation` keeps panning and pinch-zoom and drops only the
+   double-tap-to-zoom, which is exactly the one we don't want.
+
+   The tap highlight goes with it: every control below gets a real pressed state, and
+   the browser's translucent grey rectangle on top of a designed one just looks like
+   a rendering artefact. Text selection goes too — a fast tap-and-hold on a seat
+   should open the seat menu, not raise a text-selection magnifier over the felt. */
+.holdemBtn,
+.seat,
+.dealerChip,
+.cardSlot,
+.linkBtn,
+.seatMenuBtn,
+.seatSheetClose,
+.pickerCard,
+.actionBtn,
+.raiseQuickBtn,
+.actionUndo,
+.toastAction,
+.toastClose,
+.potWizardChoice,
+.subPanel summary,
+button,
+[role="button"],
+input,
+select,
+textarea,
+a {
+    touch-action: manipulation;
+}
+
+/* The grey rectangle goes from every control, fields included — a tapped input
+   already shows a caret and a focus ring, which say the same thing more quietly. */
+.holdemBtn,
+.seat,
+.dealerChip,
+.cardSlot,
+.linkBtn,
+.seatMenuBtn,
+.seatSheetClose,
+.pickerCard,
+.actionBtn,
+.raiseQuickBtn,
+.actionUndo,
+.toastAction,
+.toastClose,
+.potWizardChoice,
+.subPanel summary,
+button,
+[role="button"],
+input,
+select,
+textarea,
+a {
+    -webkit-tap-highlight-color: transparent;
+}
+
+/* Text selection is switched off only on the things you press, never on the fields
+   you type into — a dealer editing a player's name still needs to select the text. */
+.holdemBtn,
+.seat,
+.dealerChip,
+.cardSlot,
+.linkBtn,
+.seatMenuBtn,
+.seatSheetClose,
+.pickerCard,
+.actionBtn,
+.raiseQuickBtn,
+.actionUndo,
+.toastAction,
+.toastClose,
+.potWizardChoice,
+.subPanel summary,
+button,
+[role="button"] {
+    -webkit-user-select: none;
+    user-select: none;
+}
+
+/* ---------- Pressed states ----------
+   Touch has no hover, so the press is the only feedback a dealer gets that the tap
+   landed — and with the grey highlight suppressed above, these have to carry it.
+   Everything presses the same way it would on a real table: down and slightly
+   darker, no travel time. */
+.holdemBtn:active:not(:disabled),
+.linkBtn:active:not(:disabled),
+.seatMenuBtn:active:not(:disabled),
+.seatSheetClose:active:not(:disabled),
+.toastAction:active,
+.toastClose:active,
+.potWizardChoice:active,
+.raiseQuickBtn:active:not(:disabled),
+.actionUndo:active:not(:disabled) {
+    transform: translateY(1px);
+    filter: brightness(1.25);
+    transition-duration: 0.04s;
+}
+
+.cardSlot:active,
+.pickerCard:active:not(:disabled),
+.dealerChip:active {
+    transform: translateY(1px) scale(0.97);
+    transition-duration: 0.04s;
+}
+
+/* The action bar already presses down; the brightness is what it was missing, and
+   it's the one place a dealer taps without looking. */
+.actionBtn:active:not(:disabled) {
+    filter: brightness(1.3);
+    transition-duration: 0.04s;
+}
+
+/* Seats deliberately have no `:active` rule. They already dip via `.seatPressing`,
+   which `pointerdown` adds in render.js — that fires earlier than `:active` resolves,
+   and, more importantly, a seat's `transform` is what positions it around the felt
+   (`translate(-50%, -50%)` plus its own left/top). A press state setting `transform`
+   would drop that translate and throw every pressed seat about 38px off its spot. */
+
+/* Nobody should get a stuck press state from a tap that turned into a scroll. */
+@media (prefers-reduced-motion: reduce) {
+    .holdemBtn:active:not(:disabled),
+    .linkBtn:active:not(:disabled),
+    .seatMenuBtn:active:not(:disabled),
+    .seatSheetClose:active:not(:disabled),
+    .cardSlot:active,
+    .pickerCard:active:not(:disabled),
+    .dealerChip:active,
+    .raiseQuickBtn:active:not(:disabled),
+    .actionUndo:active:not(:disabled) {
+        transform: none;
+    }
+}
+
 #holdemApp {
     max-width: 1400px;
     margin: 0 auto;
@@ -77,7 +219,11 @@ body {
     padding: 0.6rem 1rem;
     font-size: 0.85rem;
     cursor: pointer;
-    transition: all 0.15s ease;
+    /* Named rather than `all`, so the focus ring isn't animated. With `all` the
+       outline faded in over 150ms, which on keyboard navigation reads as the ring
+       lagging a step behind the Tab key. Nothing else here changes. */
+    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease,
+                box-shadow 0.15s ease, color 0.15s ease, opacity 0.15s ease, filter 0.15s ease;
     text-decoration: none;
     display: inline-flex;
     align-items: center;
@@ -85,10 +231,12 @@ body {
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.05);
 }
 
-.holdemBtn:hover {
-    background: linear-gradient(180deg, #383838, #2a2a2a);
-    border-color: #4a4a4a;
-    transform: translateY(-1px);
+@media (hover: hover) {
+    .holdemBtn:hover {
+        background: linear-gradient(180deg, #383838, #2a2a2a);
+        border-color: #4a4a4a;
+        transform: translateY(-1px);
+    }
 }
 
 .holdemBtnAccent {
@@ -97,8 +245,10 @@ body {
     color: #ecffef;
 }
 
-.holdemBtnAccent:hover {
-    background: linear-gradient(180deg, #1a8a44, #0f602c);
+@media (hover: hover) {
+    .holdemBtnAccent:hover {
+        background: linear-gradient(180deg, #1a8a44, #0f602c);
+    }
 }
 
 .holdemBtnDanger {
@@ -107,8 +257,10 @@ body {
     color: #ffd6d6;
 }
 
-.holdemBtnDanger:hover {
-    background: linear-gradient(180deg, #572525, #401818);
+@media (hover: hover) {
+    .holdemBtnDanger:hover {
+        background: linear-gradient(180deg, #572525, #401818);
+    }
 }
 
 .holdemBtnGhost {
@@ -158,8 +310,10 @@ body {
     position: relative;
     width: 100%;
     padding-bottom: 72%;
+    margin: 0 auto;
 }
 
+
 #pokerTable {
     position: absolute;
     inset: 6%;
@@ -430,11 +584,16 @@ body {
     transition: opacity 0.15s ease;
 }
 
-.seat:hover .dealerChip,
 .dealerChip:focus-visible {
     opacity: 1;
 }
 
+@media (hover: hover) {
+    .seat:hover .dealerChip {
+        opacity: 1;
+    }
+}
+
 .dealerChip.active {
     background: radial-gradient(circle at 35% 30%, #ffe9a8, #f5d547 55%, #cba428 100%);
     border-color: #a9782f;
@@ -474,6 +633,13 @@ body {
     color: #fff7e6;
 }
 
+/* A blind the dealer named by hand rather than one the button handed out. Without
+   the ring the table just looks like it's put the blinds in the wrong place. */
+.blindBadge.blindManual {
+    outline: 1.5px solid #f2f2f2;
+    outline-offset: 1px;
+}
+
 /* ---------- Seat editor panel (sidebar form for the selected seat) ---------- */
 
 .seatEditorPanel {
@@ -567,9 +733,11 @@ body {
     transition: transform 0.12s ease, box-shadow 0.12s ease;
 }
 
-.cardSlot:hover {
-    transform: translateY(-1px);
-    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
+@media (hover: hover) {
+    .cardSlot:hover {
+        transform: translateY(-1px);
+        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
+    }
 }
 
 .cardSlot.cardRed {
@@ -743,8 +911,10 @@ body {
     cursor: pointer;
 }
 
-.linkBtn:hover {
-    color: #d8b46a;
+@media (hover: hover) {
+    .linkBtn:hover {
+        color: #d8b46a;
+    }
 }
 
 #rulingsOverlay {
@@ -909,9 +1079,11 @@ body {
     transition: all 0.12s ease;
 }
 
-.seatMenuBtn:hover {
-    border-color: #4a4a4a;
-    background: linear-gradient(180deg, #383838, #2a2a2a);
+@media (hover: hover) {
+    .seatMenuBtn:hover {
+        border-color: #4a4a4a;
+        background: linear-gradient(180deg, #383838, #2a2a2a);
+    }
 }
 
 .seatMenuBtn.menuDanger {
@@ -1037,8 +1209,10 @@ body {
     transition: transform 0.1s ease;
 }
 
-.pickerCard:hover:not(:disabled) {
-    transform: translateY(-1px);
+@media (hover: hover) {
+    .pickerCard:hover:not(:disabled) {
+        transform: translateY(-1px);
+    }
 }
 
 .pickerCard.cardRed {
@@ -1217,8 +1391,10 @@ body {
     font-size: 0.78rem;
 }
 
-.subPanel summary:hover {
-    color: #c5c5c5;
+@media (hover: hover) {
+    .subPanel summary:hover {
+        color: #c5c5c5;
+    }
 }
 
 .subPanelBody {
@@ -1395,6 +1571,10 @@ body {
     padding: 0.5rem;
     resize: vertical;
     font-family: inherit;
+    /* iOS zooms the whole page in when you focus a field under 16px, and the dealer
+       is then pinching back out to see the table. Every other input here is already
+       at 16px; this one was the straggler. */
+    font-size: 16px;
 }
 
 /* ---------- Pot wizard ---------- */
@@ -1456,10 +1636,12 @@ body.hasActionBar #holdemSidebar {
     white-space: nowrap;
 }
 
-.actionUndo:hover {
-    background: #333;
-    border-color: #4f4f4f;
-    color: #eee;
+@media (hover: hover) {
+    .actionUndo:hover {
+        background: #333;
+        border-color: #4f4f4f;
+        color: #eee;
+    }
 }
 
 .actionStreet {
@@ -1600,9 +1782,11 @@ body.hasActionBar #holdemSidebar {
     transition: all 0.12s ease;
 }
 
-.actionBtn:hover {
-    border-color: #4a4a4a;
-    background: linear-gradient(180deg, #383838, #2a2a2a);
+@media (hover: hover) {
+    .actionBtn:hover {
+        border-color: #4a4a4a;
+        background: linear-gradient(180deg, #383838, #2a2a2a);
+    }
 }
 
 .actionBtn:active {
@@ -1743,6 +1927,24 @@ body.hasActionBar #holdemSidebar {
     margin-top: 0.1rem;
 }
 
+/* Tournament-sized amounts. A number has no spaces to break on, so an amount too
+   wide for the 64px puck neither wraps nor ellipsises — it draws straight out over
+   the seat next to it. These step the size down so every digit stays on its own
+   puck. Shrinking rather than abbreviating is deliberate: "$1.25M" would fit more
+   comfortably, but a dealer reading a rounded stack off the felt is a worse failure
+   than a small one, and the exact figure is what the tool is for. */
+.seatPuckStack.puckAmountLong,
+.seatPuckTotal.puckAmountLong {
+    font-size: 0.5rem;
+    letter-spacing: -0.01em;
+}
+
+.seatPuckStack.puckAmountHuge,
+.seatPuckTotal.puckAmountHuge {
+    font-size: 0.44rem;
+    letter-spacing: -0.02em;
+}
+
 .blindsRow {
     display: flex;
     flex-wrap: wrap;
@@ -1784,8 +1986,13 @@ body.hasActionBar #holdemSidebar {
 
 /* Sit above the action bar rather than on top of it, so an Undo never covers the
    Fold button the dealer is reaching for. */
+/* Sit the toast directly on top of the action bar, whatever height it happens to be.
+   This was a hardcoded 9rem, which is roughly right for the bar at rest and wrong the
+   moment the raise pad opens — and on a short phone it put the toast, Undo button and
+   all, straight over the bottom seats of the table, so a tap meant for a player hit
+   "Undo" instead. */
 body.hasActionBar #toastHost {
-    bottom: calc(9rem + env(safe-area-inset-bottom, 0px));
+    bottom: calc(var(--actionBarHeight, 9rem) + 0.75rem + env(safe-area-inset-bottom, 0px));
 }
 
 .toast {
@@ -1831,8 +2038,10 @@ body.hasActionBar #toastHost {
     cursor: pointer;
 }
 
-.toastAction:hover {
-    background: rgba(216, 180, 106, 0.22);
+@media (hover: hover) {
+    .toastAction:hover {
+        background: rgba(216, 180, 106, 0.22);
+    }
 }
 
 .toastClose {
@@ -1848,9 +2057,11 @@ body.hasActionBar #toastHost {
     cursor: pointer;
 }
 
-.toastClose:hover {
-    background: #333;
-    color: #ddd;
+@media (hover: hover) {
+    .toastClose:hover {
+        background: #333;
+        color: #ddd;
+    }
 }
 
 /* ---------- Confirmation dialog ---------- */
@@ -1985,9 +2196,11 @@ body.hasActionBar #toastHost {
     transition: border-color 0.12s ease, background 0.12s ease;
 }
 
-.potWizardChoice:hover {
-    border-color: #555;
-    background: #191919;
+@media (hover: hover) {
+    .potWizardChoice:hover {
+        border-color: #555;
+        background: #191919;
+    }
 }
 
 .potWizardChoice input {
@@ -2110,8 +2323,13 @@ body.hasActionBar #toastHost {
    seat looks like it did nothing. Inset the ring by half a puck, and float the
    editor up as a bottom sheet over the table. */
 @media (max-width: 700px) {
+    /* The bottom padding has to clear the fixed action bar, plus room for a toast to
+       sit above it. Without it the table just carries on underneath the bar and the
+       lower seats of the oval are behind the Fold button — measured at 360x640, where
+       62px of felt was covered. `--actionBarHeight` is published by actionBar.js and
+       is 0 when no hand is running, so the page doesn't hold a gap it doesn't need. */
     #holdemApp {
-        padding: 1rem 0.75rem 2rem;
+        padding: 1rem 0.75rem calc(var(--actionBarHeight, 0px) + 5rem + env(safe-area-inset-bottom, 0px));
     }
 
     #holdemHeader {
@@ -2383,3 +2601,134 @@ body.hasActionBar #toastHost {
         justify-content: center;
     }
 }
+
+/* ---------- A phone on its side ----------
+   Deliberately last in the file. The felt is an aspect-ratio box whose height comes
+   from `padding-bottom`, and the `max-width: 900px` block above re-sets that to 100%
+   — so a landscape rule placed any earlier is overridden at equal specificity and
+   does nothing, which is exactly what happened on the first attempt.
+
+   Landscape is where this layout falls apart worst: sized from width, the table came
+   out 765px tall in a 390px-tall window, putting six of the nine seats below the fold
+   and the rest behind the action bar. Sizing it from the height that's actually left
+   makes every seat reachable without scrolling. The table ends up small, but a seat
+   you have to go hunting for is worse than a seat that's small. */
+@media (orientation: landscape) and (max-height: 560px) {
+    /* Set outright rather than via padding-bottom: a percentage padding resolves
+       against the containing block's width, not the element's own, so narrowing the
+       wrap on its own left it full height regardless. */
+    #pokerTableWrap {
+        --feltRoom: calc(100vh - var(--actionBarHeight, 0px) - 8.5rem);
+        width: min(100%, calc(var(--feltRoom) / 0.72));
+        height: var(--feltRoom);
+        padding-bottom: 0;
+    }
+
+    /* 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. */
+    #holdemHeader {
+        margin-bottom: 0.4rem;
+        gap: 0.35rem;
+    }
+
+    #holdemHeader h1 {
+        font-size: 1.05rem;
+        padding-bottom: 0.15rem;
+    }
+
+    .holdemSubtitle {
+        display: none;
+    }
+
+    /* There's no vertical room left, but plenty either side of a table this narrow,
+       so the toast moves out of the middle and sits beside the felt instead of on
+       top of it. Centred, it was covering up to six seats at once — and it carries
+       an Undo button, so a tap meant for a player was landing on "Undo". */
+    body.hasActionBar #toastHost,
+    #toastHost {
+        left: auto;
+        right: 0.5rem;
+        max-width: 17rem;
+        bottom: calc(var(--actionBarHeight, 0px) + 0.5rem + env(safe-area-inset-bottom, 0px));
+    }
+
+    /* Nine seats around a table this small overlap each other, so they shrink to suit. */
+    .seat {
+        width: 62px;
+        min-height: 40px;
+    }
+}
+
+/* ---------- Short phones, upright ----------
+   A 640px-tall screen spends ~150px on the header before the felt even starts, which
+   left the bottom of the table sitting behind the action bar until you scrolled. The
+   header carries no information a dealer needs mid-hand, so it gives the space up. */
+@media (max-height: 700px) {
+    /* Nowhere on a screen this short is the toast clear of both the table and the
+       action bar, so it overlaps the one that costs least: it sits over the bar's
+       status line, which is information a dealer can re-read a second later, rather
+       than over the seats and buttons, which are things they need to hit. Overlapping
+       a readout beats covering a control. */
+    body.hasActionBar #toastHost {
+        bottom: calc(var(--actionBarHeight, 0px) - 3.1rem);
+    }
+
+    .toast {
+        padding: 0.5rem 0.7rem;
+        font-size: 0.78rem;
+    }
+}
+
+@media (max-width: 700px) and (max-height: 700px) {
+    #holdemHeader {
+        margin-bottom: 0.5rem;
+        gap: 0.4rem;
+    }
+
+    #holdemHeader h1 {
+        font-size: 1.15rem;
+        padding-bottom: 0.2rem;
+    }
+
+    .holdemSubtitle {
+        display: none;
+    }
+}
+
+/* ---------- Keyboard focus ----------
+   Three focus rules existed for the whole tool, so tabbing through it relied on
+   whatever ring the browser draws by default — which on these dark, custom-painted
+   controls is close to invisible. `:focus-visible` rather than `:focus` keeps it to
+   keyboard use: a dealer tapping Fold shouldn't be left with a ring on it. */
+.holdemBtn:focus-visible,
+.linkBtn:focus-visible,
+.seatMenuBtn:focus-visible,
+.seatSheetClose:focus-visible,
+.pickerCard:focus-visible,
+.actionBtn:focus-visible,
+.raiseQuickBtn:focus-visible,
+.actionUndo:focus-visible,
+.toastAction:focus-visible,
+.toastClose:focus-visible,
+.potWizardChoice:focus-visible,
+.cardSlot:focus-visible,
+.subPanel summary:focus-visible,
+.seat:focus-visible,
+button:focus-visible,
+[role="button"]:focus-visible,
+input:focus-visible,
+select:focus-visible,
+textarea:focus-visible {
+    outline: 2px solid #7fc4ff;
+    outline-offset: 2px;
+    /* The ring has to sit above the neighbouring seat that overlaps this one. */
+    position: relative;
+    z-index: 3;
+}
+
+/* A sheet with nothing focusable in it takes focus itself so its title is read out.
+   That shouldn't paint a ring around the whole panel. */
+[role="dialog"]:focus,
+[role="alertdialog"]:focus {
+    outline: none;
+}

JoshHeaps.Net/wwwroot/css/casino/quicksplit.css

@@ -9,6 +9,58 @@ body {
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
 }
 
+/* Same touch handling as the dealer table — see the note there. This page is the one
+   a dealer opens mid-hand to chop a pot, so the ~300ms the browser spends deciding
+   whether a tap was a double-tap-to-zoom is the last thing it needs. */
+button,
+[role="button"],
+input,
+select,
+textarea,
+a {
+    touch-action: manipulation;
+}
+
+button,
+[role="button"],
+input,
+select,
+textarea,
+a {
+    -webkit-tap-highlight-color: transparent;
+}
+
+/* Not on the fields — a dealer typing a pot amount still needs to select it. */
+button,
+[role="button"] {
+    -webkit-user-select: none;
+    user-select: none;
+}
+
+.clearPotBtn:active:not(:disabled),
+.choiceChip:active:not(:disabled),
+.stepBtn:active:not(:disabled),
+.splitBtn:active:not(:disabled),
+.splitBtnGhost:active:not(:disabled),
+.unevenFoldBtn:active:not(:disabled),
+.unevenRemoveBtn:active:not(:disabled) {
+    transform: translateY(1px);
+    filter: brightness(1.25);
+    transition-duration: 0.04s;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .clearPotBtn:active:not(:disabled),
+    .choiceChip:active:not(:disabled),
+    .stepBtn:active:not(:disabled),
+    .splitBtn:active:not(:disabled),
+    .splitBtnGhost:active:not(:disabled),
+    .unevenFoldBtn:active:not(:disabled),
+    .unevenRemoveBtn:active:not(:disabled) {
+        transform: none;
+    }
+}
+
 #splitApp {
     max-width: 480px;
     margin: 0 auto;
@@ -336,9 +388,11 @@ body {
     cursor: pointer;
 }
 
-.clearPotBtn:hover {
-    background: #333;
-    color: #ddd;
+@media (hover: hover) {
+    .clearPotBtn:hover {
+        background: #333;
+        color: #ddd;
+    }
 }
 
 /* ---------- Tap targets ---------- */
@@ -364,9 +418,11 @@ body {
     transition: all 0.15s ease;
 }
 
-.choiceChip:hover {
-    border-color: #4a4a4a;
-    background: linear-gradient(180deg, #383838, #2a2a2a);
+@media (hover: hover) {
+    .choiceChip:hover {
+        border-color: #4a4a4a;
+        background: linear-gradient(180deg, #383838, #2a2a2a);
+    }
 }
 
 .choiceChip.selected {
@@ -401,8 +457,10 @@ body {
     cursor: pointer;
 }
 
-.stepBtn:hover {
-    background: #333;
+@media (hover: hover) {
+    .stepBtn:hover {
+        background: #333;
+    }
 }
 
 .waysReadout {
@@ -439,9 +497,11 @@ body {
     transition: all 0.15s ease;
 }
 
-.splitBtn:hover {
-    border-color: #4a4a4a;
-    background: linear-gradient(180deg, #383838, #2a2a2a);
+@media (hover: hover) {
+    .splitBtn:hover {
+        border-color: #4a4a4a;
+        background: linear-gradient(180deg, #383838, #2a2a2a);
+    }
 }
 
 .splitBtnGhost {

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

@@ -11,9 +11,35 @@ const ActionBar = {
     mount(state, hooks) {
         this.state = state;
         this.hooks = hooks;
+        this.watchHeight();
         this.render();
     },
 
+    // The bar is fixed to the bottom of the screen, so everything else has to know how
+    // tall it is or the table simply runs underneath it — on a 640px-tall phone the
+    // bottom seats of the oval were sitting behind the Fold button. Its height isn't a
+    // constant either: opening the raise pad grows it. Publishing the measured height
+    // as a custom property lets the layout and the toast both stay clear of it without
+    // anyone guessing a number.
+    watchHeight() {
+        const host = document.getElementById("actionBar");
+        if (!host || this.heightWatcher) return;
+
+        const publish = () => {
+            const visible = !host.hidden;
+            const height = visible ? host.getBoundingClientRect().height : 0;
+            document.documentElement.style.setProperty("--actionBarHeight", `${Math.round(height)}px`);
+        };
+
+        if (typeof ResizeObserver === "function") {
+            this.heightWatcher = new ResizeObserver(publish);
+            this.heightWatcher.observe(host);
+        }
+        window.addEventListener("resize", publish);
+        window.addEventListener("orientationchange", publish);
+        publish();
+    },
+
     // Anything to act on? A hand with nobody dealt in doesn't get a bar.
     isRunning() {
         return Betting.liveSeats(this.state).length > 0;
@@ -27,6 +53,7 @@ const ActionBar = {
         if (!this.isRunning()) {
             host.hidden = true;
             document.body.classList.remove("hasActionBar");
+            document.documentElement.style.setProperty("--actionBarHeight", "0px");
             this.stopTankTimer();
             this.tankSeatIndex = null;
             return;

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

@@ -39,11 +39,16 @@ const Betting = {
         return this.round((Number(player.amountOverride) || 0) + this.committed(player));
     },
 
+    // Never below zero. A seat can't have negative chips in front of it, and a typo in
+    // the stack field used to come back as-is — which then flowed into putIn(), where
+    // `Math.min(amount, -50)` moves a negative amount and *adds* chips to the table.
     stackOf(state, player) {
         const own = player.stack;
-        if (own !== null && own !== undefined && String(own).trim() !== "") return this.round(own);
+        if (own !== null && own !== undefined && String(own).trim() !== "") {
+            return Math.max(0, this.round(own));
+        }
         const fallback = Number(state.defaultStack);
-        return Number.isNaN(fallback) ? 0 : this.round(fallback);
+        return Number.isNaN(fallback) ? 0 : Math.max(0, this.round(fallback));
     },
 
     toCall(state, player) {
@@ -243,6 +248,28 @@ const Betting = {
         return this.liveSeats(state).length > 1 && !this.canStillBet(state);
     },
 
+    // True while nothing has happened in this hand except the blinds going in. Up to
+    // that point the dealer can still move the button or rename the blinds and have
+    // it cost nothing — which is the state a home game spends a lot of time in,
+    // arguing about whose turn it is before the cards come out.
+    onlyBlindsIn(state) {
+        return (state.street || "preflop") === "preflop" && state.seats.every(p => !p.hasActed);
+    },
+
+    // Pulls the blinds back off the table and posts them again from wherever the
+    // button and the blind assignment now say they belong. Refunding first is what
+    // keeps the chip count straight when the button gets passed round three or four
+    // times before anybody is happy with it.
+    repostBlinds(state) {
+        state.seats.forEach(player => {
+            const back = this.committed(player);
+            if (back > 0) player.stack = this.round(this.stackOf(state, player) + back);
+            player.committed = 0;
+            player.hasActed = false;
+        });
+        this.beginHand(state);
+    },
+
     // Deals a fresh betting round: blinds posted, action to the seat after the big
     // blind, which is where a dealer expects to be looking when the cards go out.
     beginHand(state) {
@@ -250,6 +277,11 @@ const Betting = {
         state.currentBet = 0;
         state.lastRaiseSize = 0;
 
+        // Position is read off the button all through the hand, so it has to be on
+        // somebody before the blinds are worked out — not on the empty seat 1 a
+        // brand-new table starts on.
+        HoldemState.ensureButtonOnPlayer(state);
+
         state.seats.forEach(player => {
             player.committed = 0;
             player.hasActed = false;

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

@@ -15,6 +15,10 @@ const HandHistoryExport = {
         }
     },
 
+    // Money columns go in as bare numbers. Written as "$1,250,000.00" they import as
+    // text, so the one thing anybody opens this file to do — total a column and see
+    // who owes what — doesn't work without cleaning every cell first. The commas were
+    // quoted correctly, so the file parsed; it just wouldn't add up.
     toCsv(handHistory, standings = []) {
         const rows = [["Hand #", "Time", "Pot", "Payouts"]];
         // handHistory is stored newest-first; the export reads better oldest-first.
@@ -25,7 +29,7 @@ const HandHistoryExport = {
             rows.push([
                 entry.handNumber,
                 this.formatTimestamp(entry.timestamp),
-                Money.format(entry.pot),
+                Money.forSheet(entry.pot),
                 payouts,
             ]);
         });
@@ -41,12 +45,12 @@ const HandHistoryExport = {
             standings.forEach(row => {
                 rows.push([
                     row.name,
-                    Money.format(row.in),
-                    Money.format(row.won),
-                    Money.formatSigned(row.net),
-                    Money.format(row.boughtIn || 0),
-                    Money.format(row.chipsNow || 0),
-                    Money.formatSigned(row.cashPosition || 0),
+                    Money.forSheet(row.in),
+                    Money.forSheet(row.won),
+                    Money.forSheet(row.net),
+                    Money.forSheet(row.boughtIn || 0),
+                    Money.forSheet(row.chipsNow || 0),
+                    Money.forSheet(row.cashPosition || 0),
                 ]);
             });
         }

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

@@ -1,6 +1,10 @@
 document.addEventListener("DOMContentLoaded", () => {
     const state = HoldemState.load();
 
+    // Focus, Tab-trapping and Escape for every overlay, wired once by watching the
+    // `hidden` attribute they all already toggle.
+    Modal.mount();
+
     // Undo works by swapping the whole table back to a snapshot. `state` is handed out
     // by reference to every module at mount time, so it has to be refilled in place —
     // reassigning the variable would leave the renderer and the betting bar pointing at
@@ -52,6 +56,7 @@ document.addEventListener("DOMContentLoaded", () => {
         },
 
         onSeatLongPress: index => SeatMenu.open(state, seatMenuHooks, index),
+        onGiveButton: index => seatMenuHooks.makeDealer(index),
     };
 
     const seatMenuHooks = {
@@ -59,13 +64,71 @@ document.addEventListener("DOMContentLoaded", () => {
         unfold: index => seatAction(index, `${nameOf(index)} is back in the hand.`, p => { p.folded = false; }),
         allIn: index => seatAction(index, `${nameOf(index)} is all-in.`, () => Betting.allIn(state, index)),
         toggleDealtIn: index => {
-            const dealtIn = state.seats[index].inHand;
-            seatAction(index, dealtIn ? `${nameOf(index)} sits out.` : `${nameOf(index)} is dealt in.`, p => {
+            const player = state.seats[index];
+            const dealtIn = player.inHand;
+            const handRunning = !Betting.onlyBlindsIn(state) || Betting.potSoFar(state) > 0;
+            const alreadyIn = Betting.handTotal(player);
+
+            // Somebody walking away mid-hand doesn't get their chips back — they're
+            // dead money the winner collects. Say so, because the pot total pointedly
+            // does not go down and a dealer needs to know that's deliberate.
+            const message = dealtIn
+                ? (alreadyIn > 0
+                    ? `${nameOf(index)} is out — their ${Money.format(alreadyIn)} stays in the pot.`
+                    : `${nameOf(index)} sits out.`)
+                : (handRunning
+                    ? `${nameOf(index)} is in from the next hand.`
+                    : `${nameOf(index)} is dealt in.`);
+
+            seatAction(index, message, p => {
                 p.inHand = !dealtIn;
-                if (!p.inHand) p.folded = false;
+                if (!p.inHand) {
+                    // Their chips stay put; only the fold flag is cleared, since being
+                    // out of the hand already covers not winning it.
+                    p.folded = false;
+                    if (state.actingSeatIndex === index) Betting.passAction(state, index);
+                } else if (handRunning) {
+                    // Joining a hand already in progress means sitting this one out —
+                    // you can't buy into a pot you haven't been paying for. `folded`
+                    // is exactly that state, and the next hand clears it.
+                    p.folded = true;
+                }
             });
         },
-        makeDealer: index => seatAction(index, `Button on ${nameOf(index)}.`, () => { state.dealerSeatIndex = index; }),
+
+        makeDealer: index => seatAction(index, `Button on ${nameOf(index)}.`, () => {
+            state.dealerSeatIndex = index;
+            // Before anyone has acted the blinds are still just sitting there, so
+            // moving the button moves them too — a home game passes it round several
+            // times before the cards come out, and the posted chips have to follow.
+            if (Betting.onlyBlindsIn(state)) Betting.repostBlinds(state);
+        }),
+
+        assignBlind: (index, which) => {
+            const blinds = HoldemState.getBlindSeats(state);
+            const other = which === "sb" ? blinds.bbIndex : blinds.sbIndex;
+            // Naming one blind pins the other where it already is, so the dealer only
+            // has to state the part they're changing. If that would land both on one
+            // player, the other blind moves to the next seat along.
+            let partner = other !== null && other !== undefined && other !== index
+                ? other
+                : Betting.nextLiveIndex(state, index);
+            if (partner === index || partner === null) partner = Betting.nextLiveIndex(state, index);
+
+            const label = which === "sb" ? "small blind" : "big blind";
+            seatAction(index, `${nameOf(index)} posts the ${label}.`, () => {
+                state.blindOverride = which === "sb"
+                    ? { sbIndex: index, bbIndex: partner }
+                    : { sbIndex: partner, bbIndex: index };
+                if (Betting.onlyBlindsIn(state)) Betting.repostBlinds(state);
+            });
+        },
+
+        clearBlindOverride: () => seatAction(state.dealerSeatIndex, "Blinds follow the button again.", () => {
+            state.blindOverride = null;
+            if (Betting.onlyBlindsIn(state)) Betting.repostBlinds(state);
+        }),
+
         editSeat: index => Render.toggleSeatEditor(index),
 
         addChips: index => AddChips.open(state, index, (seatIndex, amount) => {
@@ -310,6 +373,7 @@ document.addEventListener("DOMContentLoaded", () => {
         if (e.key === "Enter") AddChips.confirm();
     });
 
+    // Escape is Modal's job now, for this sheet and the five others that never had it.
     const rulingsOverlay = document.getElementById("rulingsOverlay");
     const closeRulings = () => { rulingsOverlay.hidden = true; };
     document.getElementById("openRulingsBtn").addEventListener("click", () => { rulingsOverlay.hidden = false; });
@@ -317,9 +381,6 @@ document.addEventListener("DOMContentLoaded", () => {
     rulingsOverlay.addEventListener("click", e => {
         if (e.target === rulingsOverlay) closeRulings();
     });
-    document.addEventListener("keydown", e => {
-        if (e.key === "Escape" && !rulingsOverlay.hidden) closeRulings();
-    });
 
     document.getElementById("seatMenuCancelBtn").addEventListener("click", () => SeatMenu.close());
     document.getElementById("seatMenuOverlay").addEventListener("click", e => {

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

@@ -0,0 +1,147 @@
+// Keyboard and screen-reader behaviour for every overlay in the tool, in one place.
+//
+// There are six of them — seat menu, card picker, add chips, rulings, pot wizard,
+// confirm — opened and closed by five different modules, and each one was missing
+// the same three things: focus never moved into the dialog, Tab walked straight out
+// of it into the page behind the scrim, and Escape did nothing (only the rulings
+// sheet handled it). Measured before this: 0 of 5 moved focus in, 5 of 5 leaked Tab,
+// 1 of 5 closed on Escape.
+//
+// Rather than patch that into five modules, this watches the `hidden` attribute every
+// overlay already toggles. Nothing else had to change, and an overlay added later
+// gets the same behaviour without anyone remembering to wire it up — which is the
+// failure this is fixing in the first place.
+const Modal = {
+    // `:not([hidden])` matters — a sheet that is itself hidden inside an open overlay
+    // must not be a Tab stop.
+    FOCUSABLE: [
+        "a[href]",
+        "button:not([disabled])",
+        'input:not([disabled]):not([type="hidden"])',
+        "select:not([disabled])",
+        "textarea:not([disabled])",
+        '[tabindex]:not([tabindex="-1"])',
+    ].join(","),
+
+    open: [],
+
+    mount() {
+        document.querySelectorAll('[id$="Overlay"]').forEach(overlay => this.watch(overlay));
+        // Capture phase: the dialog gets first refusal on Escape and Tab, before any
+        // table-level shortcut sees them.
+        document.addEventListener("keydown", e => this.onKeyDown(e), true);
+    },
+
+    watch(overlay) {
+        const sync = () => {
+            const isOpen = !overlay.hidden;
+            const known = this.open.some(entry => entry.overlay === overlay);
+            if (isOpen && !known) this.onOpened(overlay);
+            else if (!isOpen && known) this.onClosed(overlay);
+        };
+        new MutationObserver(sync).observe(overlay, { attributes: true, attributeFilter: ["hidden"] });
+        sync();
+    },
+
+    sheetOf(overlay) {
+        return overlay.querySelector('[role="dialog"], [role="alertdialog"]') || overlay.firstElementChild || overlay;
+    },
+
+    focusableIn(overlay) {
+        return [...overlay.querySelectorAll(this.FOCUSABLE)].filter(el => {
+            if (el.closest("[hidden]")) return false;
+            const rect = el.getBoundingClientRect();
+            return rect.width > 0 && rect.height > 0;
+        });
+    },
+
+    onOpened(overlay) {
+        const sheet = this.sheetOf(overlay);
+        // aria-modal is only true while the thing is actually open, so it's set here
+        // rather than baked into the markup.
+        if (sheet) sheet.setAttribute("aria-modal", "true");
+
+        this.open.push({ overlay, returnFocus: document.activeElement });
+
+        // Focus the first real control. A dialog that leaves focus on the button
+        // behind it reads, to a screen reader, as though nothing happened at all.
+        // Content-only sheets get focus on the sheet so the title is announced.
+        const focusable = this.focusableIn(overlay);
+        const target = focusable[0];
+        if (target) {
+            target.focus({ preventScroll: true });
+        } else if (sheet) {
+            if (!sheet.hasAttribute("tabindex")) sheet.setAttribute("tabindex", "-1");
+            sheet.focus({ preventScroll: true });
+        }
+    },
+
+    onClosed(overlay) {
+        const index = this.open.findIndex(entry => entry.overlay === overlay);
+        if (index === -1) return;
+        const [entry] = this.open.splice(index, 1);
+
+        const sheet = this.sheetOf(overlay);
+        if (sheet) sheet.removeAttribute("aria-modal");
+
+        // Put the dealer back where they were. Without this, closing the pot wizard
+        // drops focus to the top of the document and the next Tab starts from the
+        // page header.
+        const back = entry.returnFocus;
+        if (back && back.isConnected && typeof back.focus === "function") {
+            back.focus({ preventScroll: true });
+        }
+    },
+
+    topmost() {
+        return this.open.length ? this.open[this.open.length - 1] : null;
+    },
+
+    // Escape presses the dialog's own cancel/close button rather than just hiding the
+    // overlay, so whatever that button does — resolving the confirm promise, clearing
+    // the add-chips draft — still happens. Only if there isn't one does it hide the
+    // overlay directly.
+    dismiss(overlay) {
+        const closer = overlay.querySelector("[data-modal-close]");
+        if (closer) closer.click();
+        else overlay.hidden = true;
+    },
+
+    onKeyDown(event) {
+        const top = this.topmost();
+        if (!top) return;
+
+        if (event.key === "Escape") {
+            event.preventDefault();
+            event.stopPropagation();
+            this.dismiss(top.overlay);
+            return;
+        }
+
+        if (event.key !== "Tab") return;
+
+        // Keep Tab inside the dialog. Everything behind the scrim is unreachable by
+        // mouse, so letting the keyboard wander back there is a trap with no way out.
+        const focusable = this.focusableIn(top.overlay);
+        if (focusable.length === 0) {
+            event.preventDefault();
+            return;
+        }
+
+        const first = focusable[0];
+        const last = focusable[focusable.length - 1];
+        const active = document.activeElement;
+
+        if (event.shiftKey && (active === first || !top.overlay.contains(active))) {
+            event.preventDefault();
+            last.focus({ preventScroll: true });
+        } else if (!event.shiftKey && (active === last || !top.overlay.contains(active))) {
+            event.preventDefault();
+            first.focus({ preventScroll: true });
+        }
+    },
+};
+
+if (typeof module !== "undefined" && module.exports) {
+    module.exports = Modal;
+}

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

@@ -25,9 +25,27 @@ const Money = {
         return this.toCents(amount) / 100;
     },
 
+    // Cents only when there are cents.
+    //
+    // A chip game deals in whole numbers nearly all the time, and a trailing ".00"
+    // is two characters that say nothing — measured at ~22px, against the 64px a
+    // seat puck has to show a stack in. "$1,250,000.00" doesn't fit and wraps;
+    // "$1,250,000" does. Amounts that genuinely carry cents still show them, so a
+    // 25c-blind game reads exactly as it did.
     format(amount) {
         const value = Number(amount) || 0;
-        return `$${value.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
+        const hasCents = this.toCents(value) % 100 !== 0;
+        return `$${value.toLocaleString(undefined, {
+            minimumFractionDigits: hasCents ? 2 : 0,
+            maximumFractionDigits: 2,
+        })}`;
+    },
+
+    // The same amount for a spreadsheet rather than for a person: no currency symbol
+    // and no thousands separators, because those are what make a column of money
+    // import as text and refuse to add up.
+    forSheet(amount) {
+        return (this.toCents(amount) / 100).toFixed(2);
     },
 
     // "+$40.00" / "-$40.00" rather than "$-40.00" — a standings column is read at a

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

@@ -30,7 +30,10 @@ const PotWizard = {
         const contributions = players.map(p => ({
             id: p.id,
             contribution: HoldemState.computeContribution(p, state.chipLegend, state.basePotAmount),
-            folded: p.folded,
+            // A seat switched off mid-hand still has its chips in the pot, but it
+            // can no more win them than a folded one can — same dead money, and the
+            // wizard must not offer it as a winner.
+            folded: p.folded || HoldemState.isDeadMoney(p),
         }));
         this.entries = PotCalculator.buildEntries(contributions);
         // Kept so the wizard can show the whole breakdown up front, not just the layer

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

@@ -16,6 +16,10 @@ const Render = {
         this.state = state;
         this.hooks = hooks;
         this.selectedSeatIndex = null;
+        // A reset hands over a different table entirely, so nothing cached about the
+        // last one still applies.
+        this.lastHistorySignature = null;
+        this.handTimeCache.clear();
         this.renderAll();
     },
 
@@ -158,7 +162,7 @@ const Render = {
         const layer = document.getElementById("seatsLayer");
         layer.innerHTML = "";
         const template = document.getElementById("seatTemplate");
-        const { dealerIndex, sbIndex, bbIndex } = HoldemState.getBlindSeats(this.state);
+        const { dealerIndex, sbIndex, bbIndex, manual: manualBlinds } = HoldemState.getBlindSeats(this.state);
 
         this.state.seats.forEach((player, index) => {
             const node = template.content.firstElementChild.cloneNode(true);
@@ -172,15 +176,26 @@ const Render = {
             const dealerChip = node.querySelector(".dealerChip");
             dealerChip.classList.toggle("active", index === dealerIndex);
             dealerChip.classList.toggle("hidden", !!this.state.dedicatedDealer);
+            // Tapping the puck is the same act as "Give the button" in the seat menu,
+            // so it goes through the same hook — otherwise this one path would move
+            // the button without moving the blinds that follow it.
             dealerChip.addEventListener("click", e => {
                 e.stopPropagation();
-                this.state.dealerSeatIndex = index;
-                this.hooks.save(this.state);
-                this.renderSeats();
+                this.hooks.onGiveButton(index);
             });
 
-            node.querySelector(".sbBadge").classList.toggle("visible", index === sbIndex);
-            node.querySelector(".bbBadge").classList.toggle("visible", index === bbIndex);
+            const sbBadge = node.querySelector(".sbBadge");
+            const bbBadge = node.querySelector(".bbBadge");
+            sbBadge.classList.toggle("visible", index === sbIndex);
+            bbBadge.classList.toggle("visible", index === bbIndex);
+            // A blind the dealer named by hand isn't where the button would have put
+            // it, so it's marked — otherwise the table looks like it's just wrong.
+            // The `!!` matters: getBlindSeats leaves `manual` undefined when the
+            // blinds are positional, and classList.toggle with an undefined second
+            // argument *flips* the class instead of clearing it, so the marker
+            // appeared and disappeared on alternate renders.
+            sbBadge.classList.toggle("blindManual", !!manualBlinds && index === sbIndex);
+            bbBadge.classList.toggle("blindManual", !!manualBlinds && index === bbIndex);
 
             this.updatePuckContent(node, player, index);
             node.classList.toggle("seatSelected", index === this.selectedSeatIndex);
@@ -250,11 +265,14 @@ const Render = {
         const total = handTotal > 0
             ? handTotal
             : HoldemState.computeContribution(player, this.state.chipLegend, this.state.basePotAmount);
-        node.querySelector(".seatPuckTotal").textContent = total > 0 ? Money.format(total) : "";
+        const totalEl = node.querySelector(".seatPuckTotal");
+        totalEl.textContent = total > 0 ? Money.format(total) : "";
+        this.fitAmount(totalEl);
 
         const stackEl = node.querySelector(".seatPuckStack");
         const stack = Betting.stackOf(this.state, player);
         stackEl.textContent = !empty && stack > 0 ? Money.format(stack) : "";
+        this.fitAmount(stackEl);
 
         node.classList.toggle("seatActing", index === this.state.actingSeatIndex);
         node.classList.toggle("seatEmpty", empty);
@@ -263,6 +281,17 @@ const Render = {
         node.classList.toggle("seatLive", player.inHand && !player.folded);
     },
 
+    // A seat puck is 64px of usable width. A tournament stack doesn't fit in that and,
+    // because the number has no spaces to break on, it doesn't wrap or ellipsise
+    // either — it just draws straight out over the neighbouring seat. Stepping the
+    // font down keeps every digit, which matters: a dealer misreading a stack is a
+    // worse outcome than a small one, so this shrinks rather than abbreviating.
+    fitAmount(el) {
+        const length = (el.textContent || "").length;
+        el.classList.toggle("puckAmountLong", length >= 8 && length < 10);
+        el.classList.toggle("puckAmountHuge", length >= 10);
+    },
+
     // Cheaper than a full renderSeats() — used after edits so the seat editor's inputs
     // (which live in a separate panel) never lose focus.
     refreshPuck(index) {
@@ -678,24 +707,57 @@ const Render = {
 
     // ---- Hand counter + history ----
 
+    // toLocaleTimeString is the single most expensive call in the history panel, and a
+    // logged hand's timestamp never changes, so the answer is worth keeping.
+    handTimeCache: new Map(),
+
     formatHandTime(timestamp) {
+        if (this.handTimeCache.has(timestamp)) return this.handTimeCache.get(timestamp);
+        let formatted = "";
         try {
-            return new Date(timestamp).toLocaleTimeString(undefined, { hour: "2-digit", minute: "2-digit" });
+            formatted = new Date(timestamp).toLocaleTimeString(undefined, { hour: "2-digit", minute: "2-digit" });
         } catch {
-            return "";
+            formatted = "";
         }
+        this.handTimeCache.set(timestamp, formatted);
+        return formatted;
     },
 
-    renderHandHistory() {
+    // Cheap stand-in for "has the log changed". Entries are immutable once written and
+    // only ever added at the front, so the length, the counter and the newest row
+    // between them catch a recorded hand, a cleared history and an undo.
+    historySignature() {
+        const history = this.state.handHistory || [];
+        const newest = history[0];
+        return [
+            history.length,
+            this.state.handNumber || 1,
+            newest ? newest.handNumber : "",
+            newest ? newest.timestamp : "",
+            newest ? newest.pot : "",
+        ].join("|");
+    },
+
+    // Rebuilding this panel measured 25.7ms of the 30ms a full re-render costs — and a
+    // full re-render runs after every fold, call and raise. The log only changes when a
+    // hand is settled or the history is cleared, perhaps once every thirty taps, so it
+    // is skipped unless it actually did change. Everything else on the table reflects
+    // the current hand and still redraws every time.
+    renderHandHistory(force = false) {
+        const signature = this.historySignature();
+        if (!force && signature === this.lastHistorySignature) return;
+        this.lastHistorySignature = signature;
+
         document.getElementById("handCounterBadge").textContent = `Hand #${this.state.handNumber || 1}`;
 
         const list = document.getElementById("handHistoryList");
         const emptyHint = document.getElementById("handHistoryEmptyHint");
         const history = this.state.handHistory || [];
-        list.innerHTML = "";
         emptyHint.hidden = history.length > 0;
         document.getElementById("exportHistoryBtn").disabled = history.length === 0;
 
+        // Built off-document so the panel is laid out once instead of once per row.
+        const fragment = document.createDocumentFragment();
         const template = document.getElementById("handHistoryRowTemplate");
         history.forEach(entry => {
             const row = template.content.firstElementChild.cloneNode(true);
@@ -706,8 +768,10 @@ const Render = {
             const payoutsEl = row.querySelector(".handHistoryPayouts");
             payoutsEl.textContent = entry.payouts.map(p => `${p.label} ${Money.format(p.amount)}`).join(", ");
 
-            list.appendChild(row);
+            fragment.appendChild(row);
         });
+        list.innerHTML = "";
+        list.appendChild(fragment);
     },
 };
 

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

@@ -45,6 +45,24 @@ const SeatMenu = {
             actions.push({ label: "Give the button", run: () => this.hooks.makeDealer(index) });
         }
 
+        // Naming a blind by hand. Only offered while nothing but the blinds are in —
+        // once somebody has called, moving a blind would mean unpicking a bet that
+        // has already been answered, and that's a decision for the dealer's mouth,
+        // not a menu item. Which blind a seat already has is shown rather than
+        // offered again.
+        if (dealtIn && Betting.onlyBlindsIn(this.state)) {
+            const blinds = HoldemState.getBlindSeats(this.state);
+            if (blinds.sbIndex !== index) {
+                actions.push({ label: "Make small blind", run: () => this.hooks.assignBlind(index, "sb") });
+            }
+            if (blinds.bbIndex !== index) {
+                actions.push({ label: "Make big blind", run: () => this.hooks.assignBlind(index, "bb") });
+            }
+            if (this.state.blindOverride) {
+                actions.push({ label: "Blinds follow the button again", run: () => this.hooks.clearBlindOverride() });
+            }
+        }
+
         actions.push({ label: "Edit seat…", run: () => this.hooks.editSeat(index) });
         return actions;
     },

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

@@ -32,14 +32,12 @@ const Shortcuts = {
         return tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT" || el.isContentEditable;
     },
 
-    // An overlay owns the keyboard while it's up: the confirm dialog already binds
-    // Enter and Escape, and the card picker and seat menu are modal.
+    // An overlay owns the keyboard while it's up. Asking the document which overlays
+    // are open, rather than listing them, means a sheet added later can't quietly
+    // start letting "f" fold the table behind it — the same reason Modal watches for
+    // them instead of being told about each one.
     overlayOpen() {
-        return ["confirmOverlay", "potWizardOverlay", "cardPickerOverlay", "seatMenuOverlay", "rulingsOverlay", "addChipsOverlay"]
-            .some(id => {
-                const el = document.getElementById(id);
-                return el && !el.hidden;
-            });
+        return [...document.querySelectorAll('[id$="Overlay"]')].some(el => !el.hidden);
     },
 
     onKey(e) {

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

@@ -58,6 +58,12 @@ const HoldemState = {
             currentBet: 0,
             lastRaiseSize: 0,
             actingSeatIndex: null,
+            // Set when the dealer names the blinds by hand instead of letting them
+            // follow the button — { sbIndex, bbIndex }. Home games do this constantly
+            // ("you had it last time", someone arriving late owing a blind), and the
+            // button order is the wrong answer often enough that it has to be
+            // overridable. Cleared at the start of every hand.
+            blindOverride: null,
         };
     },
 
@@ -73,7 +79,8 @@ const HoldemState = {
             // Tables saved before live betting existed are missing its fields; fill
             // them in rather than making the dealer reset a table mid-session.
             const defaults = this.createDefault();
-            ["smallBlind", "bigBlind", "defaultStack", "street", "currentBet", "lastRaiseSize", "actingSeatIndex"]
+            ["smallBlind", "bigBlind", "defaultStack", "street", "currentBet", "lastRaiseSize",
+                "actingSeatIndex", "blindOverride"]
                 .forEach(key => {
                     if (parsed[key] === undefined) parsed[key] = defaults[key];
                 });
@@ -124,9 +131,14 @@ const HoldemState = {
     },
 
     // Contribution the table calculator will treat this player as having put in.
+    //
+    // Chips already pushed into the middle count whether or not the player is still
+    // in the hand. Someone who storms off, gets taken out by the dealer, or is
+    // dealt out mid-hand leaves their money on the felt — it's dead money owed to
+    // whoever wins, and it is not theirs to take back. Reading `inHand` first is
+    // how those chips used to disappear out of the pot the instant a seat was
+    // switched off, quietly shrinking the payout by whatever they had posted.
     computeContribution(player, chipLegend, basePotAmount) {
-        if (!player.inHand) return 0;
-
         const override = player.amountOverride;
         if (override !== null && override !== undefined && String(override).trim() !== "") {
             const parsed = Number(override);
@@ -139,10 +151,22 @@ const HoldemState = {
         }, 0);
         if (chipTotal > 0) return chipTotal;
 
+        // The table-wide default is the one thing that stays tied to being dealt in:
+        // it's a stand-in for "everyone put the same amount in", so applying it to
+        // empty chairs would invent a contribution from every seat nobody is using.
+        if (!player.inHand) return 0;
+
         const base = Number(basePotAmount);
         return Number.isNaN(base) ? 0 : Math.max(0, base);
     },
 
+    // Anyone whose chips are in the pot, whether or not they're still in the hand.
+    // A seat that's been switched off mid-hand is dead money: it counts towards the
+    // pot but can never be picked as a winner, exactly like a fold.
+    isDeadMoney(player) {
+        return !player.inHand;
+    },
+
     totalPot(state) {
         return state.seats.reduce(
             (sum, p) => sum + this.computeContribution(p, state.chipLegend, state.basePotAmount),
@@ -188,12 +212,52 @@ const HoldemState = {
         return order;
     },
 
+    // A button sitting on an empty chair is only cosmetic until you try to read
+    // position off it. On the very first hand of a fresh table it starts on seat 1
+    // whether or not anybody is sitting there, and a table that empties out around it
+    // leaves it stranded. Move it to a real player before a hand is dealt.
+    ensureButtonOnPlayer(state) {
+        if (state.seats[state.dealerSeatIndex] && state.seats[state.dealerSeatIndex].inHand) return;
+        for (let step = 0; step < state.seatCount; step++) {
+            const index = this.nextSeatIndex(state, state.dealerSeatIndex, step);
+            if (state.seats[index].inHand) {
+                state.dealerSeatIndex = index;
+                return;
+            }
+        }
+    },
+
+    // A hand-picked blind is only usable if that seat is actually in the hand — a
+    // dealer who names a blind and then deals that player out shouldn't have the
+    // table quietly post to nobody.
+    validBlindOverride(state) {
+        const o = state.blindOverride;
+        if (!o) return null;
+        const ok = i => Number.isInteger(i) && i >= 0 && i < state.seatCount && state.seats[i] && state.seats[i].inHand;
+        if (!ok(o.sbIndex) || !ok(o.bbIndex) || o.sbIndex === o.bbIndex) return null;
+        return o;
+    },
+
     // Who posts what. Heads-up is its own rule: with two players the button posts the
     // small blind, which is the opposite of the usual order.
     getBlindSeats(state) {
         const live = this.liveOrderFromButton(state);
         const dealerIndex = state.dealerSeatIndex;
 
+        // A blind the dealer named by hand wins over anything positional. Heads-up is
+        // still reported honestly so the betting order stays right — who posts what
+        // is the dealer's call, but two-handed play acting in reverse is a rule.
+        const override = this.validBlindOverride(state);
+        if (override) {
+            return {
+                dealerIndex,
+                sbIndex: override.sbIndex,
+                bbIndex: override.bbIndex,
+                headsUp: live.length === 2,
+                manual: true,
+            };
+        }
+
         if (live.length < 2) {
             return { dealerIndex, sbIndex: null, bbIndex: null, headsUp: false };
         }
@@ -210,6 +274,10 @@ const HoldemState = {
 
     startNextHand(state) {
         this.advanceButton(state);
+        // A hand-picked blind applies to the hand it was picked for. Carrying it into
+        // the next one would freeze the blinds on two players for the rest of the
+        // night, which is the opposite of what naming them once is for.
+        state.blindOverride = null;
         state.seats.forEach(p => {
             p.folded = false;
             p.cards = ["", ""];
@@ -218,6 +286,8 @@ const HoldemState = {
             p.committed = 0;
             p.hasActed = false;
         });
+        // Anyone who joined mid-hand is a full player again from here.
+        this.ensureButtonOnPlayer(state);
     },
 
     // Appends a resolved-pot record to the running session log a dealer can point to

tests/holdem/historyCache.test.js

@@ -0,0 +1,118 @@
+// The hand-history panel is only rebuilt when its signature changes, which takes a
+// full re-render from ~30ms to ~3ms. The whole saving depends on that signature
+// noticing every way the log can actually change — a stale panel would have the
+// dealer reading last hand's payouts while settling this one.
+const { test, describe } = require("node:test");
+const assert = require("node:assert/strict");
+const { Render, HoldemState, makeTable } = require("./load");
+
+// historySignature() reads Render.state, so point it at a table for each case.
+const signatureOf = state => {
+    Render.state = state;
+    return Render.historySignature();
+};
+
+const tableWithHands = (count) => {
+    const state = makeTable({ seatCount: 4, seated: [0, 1, 2] });
+    for (let i = 0; i < count; i++) {
+        state.seats[0].amountOverride = 2;
+        state.seats[1].amountOverride = 2;
+        HoldemState.recordHand(state, [{ id: state.seats[0].id, label: "Ann", amount: 4 }]);
+    }
+    return state;
+};
+
+describe("the history panel knows when to redraw", () => {
+    test("nothing changes while a hand is being played", () => {
+        const state = tableWithHands(3);
+        const before = signatureOf(state);
+
+        // A whole street of betting touches no part of the log.
+        state.seats[0].committed = 5;
+        state.seats[1].folded = true;
+        state.actingSeatIndex = 2;
+        state.street = "flop";
+
+        assert.equal(signatureOf(state), before, "betting must not force a rebuild");
+    });
+
+    test("settling a hand changes it", () => {
+        const state = tableWithHands(3);
+        const before = signatureOf(state);
+        HoldemState.recordHand(state, [{ id: state.seats[1].id, label: "Ben", amount: 12 }]);
+        assert.notEqual(signatureOf(state), before);
+    });
+
+    test("clearing the history changes it", () => {
+        const state = tableWithHands(5);
+        const before = signatureOf(state);
+        HoldemState.clearHistory(state);
+        assert.notEqual(signatureOf(state), before);
+    });
+
+    test("undoing back to a shorter log changes it", () => {
+        const state = tableWithHands(2);
+        const snapshot = JSON.parse(JSON.stringify(state));
+        HoldemState.recordHand(state, [{ id: state.seats[0].id, label: "Ann", amount: 30 }]);
+        const afterRecord = signatureOf(state);
+
+        // The undo path swaps the state's contents in place.
+        Object.keys(state).forEach(k => delete state[k]);
+        Object.assign(state, snapshot);
+
+        assert.notEqual(signatureOf(state), afterRecord, "an undone hand must disappear from the panel");
+    });
+
+    test("two hands that differ only in payout are told apart", () => {
+        const a = tableWithHands(1);
+        const b = tableWithHands(1);
+        // Same count and hand number; different pot.
+        b.handHistory[0].pot = a.handHistory[0].pot + 25;
+        assert.notEqual(signatureOf(a), signatureOf(b));
+    });
+
+    test("the hand counter moving on changes it", () => {
+        // The counter badge is drawn by the same function, so a new hand number has
+        // to invalidate even when the log itself is untouched.
+        const state = tableWithHands(2);
+        const before = signatureOf(state);
+        state.handNumber += 1;
+        assert.notEqual(signatureOf(state), before);
+    });
+
+    test("an empty log has a stable signature of its own", () => {
+        const state = makeTable({ seatCount: 4, seated: [0, 1] });
+        const first = signatureOf(state);
+        assert.equal(signatureOf(state), first);
+
+        HoldemState.recordHand(state, [{ id: state.seats[0].id, label: "Ann", amount: 4 }]);
+        assert.notEqual(signatureOf(state), first, "the first hand ever must draw the panel");
+    });
+});
+
+describe("the hand-time cache", () => {
+    test("the same timestamp is only formatted once, and formats the same", () => {
+        Render.handTimeCache.clear();
+        const stamp = Date.UTC(2026, 8, 1, 15, 4);
+        const first = Render.formatHandTime(stamp);
+        assert.equal(Render.handTimeCache.size, 1);
+
+        const second = Render.formatHandTime(stamp);
+        assert.equal(second, first);
+        assert.equal(Render.handTimeCache.size, 1, "not re-formatted");
+    });
+
+    test("different timestamps still format differently", () => {
+        Render.handTimeCache.clear();
+        const a = Render.formatHandTime(Date.UTC(2026, 8, 1, 15, 4));
+        const b = Render.formatHandTime(Date.UTC(2026, 8, 1, 18, 47));
+        assert.notEqual(a, b);
+        assert.equal(Render.handTimeCache.size, 2);
+    });
+
+    test("a nonsense timestamp doesn't throw", () => {
+        Render.handTimeCache.clear();
+        assert.doesNotThrow(() => Render.formatHandTime(undefined));
+        assert.doesNotThrow(() => Render.formatHandTime("not a date"));
+    });
+});

tests/holdem/load.js

@@ -18,6 +18,11 @@ const Money = load("money");
 const PotCalculator = load("potCalculator");
 const SplitCalculator = load("splitCalculator");
 const Betting = load("betting");
+const HandHistoryExport = load("handHistoryExport");
+
+// render.js exports { Render } rather than the namespace directly.
+const Render = require(path.join(SRC, "render.js")).Render;
+globalThis.Render = Render;
 
 // state.js exports `HoldemState`, which doesn't match its filename.
 const HoldemState = require(path.join(SRC, "state.js"));
@@ -68,6 +73,8 @@ function contributions(state) {
 
 module.exports = {
     Money,
+    Render,
+    HandHistoryExport,
     PotCalculator,
     SplitCalculator,
     Betting,

tests/holdem/messyTables.test.js

@@ -0,0 +1,260 @@
+// Home games are messy. People walk up mid-hand, storm off mid-hand, argue about
+// whose blind it is, and pass the button round three times before anyone deals.
+// These are the cases the positional rules quietly get wrong.
+const { test, describe } = require("node:test");
+const assert = require("node:assert/strict");
+const { Betting, HoldemState, PotCalculator, Money, makeTable, chipsOnTable, contributions } = require("./load");
+
+const potOf = state => HoldemState.totalPot(state);
+
+describe("a player leaves in the middle of a hand", () => {
+    test("their chips stay in the pot", () => {
+        const state = makeTable({ seatCount: 6, seated: [0, 1, 2, 3], dealerSeatIndex: 0 });
+        Betting.beginHand(state);
+        Betting.call(state, 3); Betting.call(state, 0); Betting.call(state, 1); Betting.check(state, 2);
+        Betting.sweepToHandTotals(state);
+
+        const before = potOf(state);
+        assert.equal(before, 8);
+
+        state.seats[1].inHand = false; // dealer takes them out
+
+        assert.equal(potOf(state), before, "the pot must not shrink when a player is taken out");
+    });
+
+    test("they cannot be paid out of a pot they walked away from", () => {
+        const state = makeTable({ seatCount: 4, seated: [0, 1, 2], dealerSeatIndex: 0 });
+        Betting.beginHand(state);
+        Betting.call(state, 0); Betting.call(state, 1); Betting.check(state, 2);
+        Betting.sweepToHandTotals(state);
+
+        state.seats[1].inHand = false;
+
+        const players = state.seats
+            .filter(p => HoldemState.computeContribution(p, state.chipLegend, state.basePotAmount) > 0)
+            .map(p => ({
+                id: p.id,
+                contribution: HoldemState.computeContribution(p, state.chipLegend, state.basePotAmount),
+                folded: p.folded || HoldemState.isDeadMoney(p),
+            }));
+
+        const layers = PotCalculator.layers(players);
+        assert.ok(!layers[0].eligible.includes(state.seats[1].id), "a departed player can't win");
+        assert.equal(layers.reduce((s, l) => s + l.amount, 0), 6, "but their money is still being played for");
+    });
+
+    test("taking out the player who is to act moves the action on", () => {
+        const state = makeTable({ seatCount: 4, seated: [0, 1, 2, 3], dealerSeatIndex: 0 });
+        Betting.beginHand(state);
+        const acting = state.actingSeatIndex;
+
+        state.seats[acting].inHand = false;
+        Betting.passAction(state, acting);
+
+        assert.notEqual(state.actingSeatIndex, acting, "the table can't wait on somebody who left");
+        assert.ok(state.actingSeatIndex === null || state.seats[state.actingSeatIndex].inHand);
+    });
+
+    test("an empty chair still contributes nothing, base pot or not", () => {
+        // The table-wide default must not be read as an ante from seats nobody is in.
+        const state = makeTable({ seatCount: 6, seated: [0, 1], dealerSeatIndex: 0 });
+        state.basePotAmount = 25;
+        assert.equal(HoldemState.computeContribution(state.seats[4], state.chipLegend, 25), 0);
+    });
+});
+
+describe("a player joins in the middle of a hand", () => {
+    test("they sit the hand out rather than joining a pot they never paid into", () => {
+        const state = makeTable({ seatCount: 6, seated: [0, 1, 2], dealerSeatIndex: 0 });
+        Betting.beginHand(state);
+        Betting.call(state, 0); Betting.call(state, 1); Betting.check(state, 2);
+        Betting.sweepToHandTotals(state);
+
+        // Walks up and is dealt in — the app marks them folded for this hand.
+        state.seats[4].inHand = true;
+        state.seats[4].stack = 100;
+        state.seats[4].folded = true;
+
+        assert.ok(!Betting.liveSeats(state).some(s => s.index === 4), "not live this hand");
+        assert.equal(HoldemState.computeContribution(state.seats[4], state.chipLegend, state.basePotAmount), 0);
+    });
+
+    test("they are a full player again on the next hand", () => {
+        const state = makeTable({ seatCount: 6, seated: [0, 1, 2], dealerSeatIndex: 0 });
+        Betting.beginHand(state);
+        state.seats[4].inHand = true;
+        state.seats[4].stack = 100;
+        state.seats[4].folded = true;
+
+        HoldemState.startNextHand(state);
+        Betting.beginHand(state);
+
+        assert.equal(state.seats[4].folded, false);
+        assert.ok(Betting.liveSeats(state).some(s => s.index === 4), "dealt in like anyone else");
+    });
+});
+
+describe("passing the button around before the cards come out", () => {
+    test("moving the button re-posts the blinds and keeps the chip count straight", () => {
+        const state = makeTable({ seatCount: 6, seated: [0, 1, 2, 3], dealerSeatIndex: 0 });
+        const startingChips = chipsOnTable(state);
+        Betting.beginHand(state);
+
+        assert.equal(state.seats[1].committed, 1);
+        assert.equal(state.seats[2].committed, 2);
+
+        state.dealerSeatIndex = 2;
+        Betting.repostBlinds(state);
+
+        assert.equal(state.seats[1].committed, 0, "the old small blind got their chip back");
+        assert.equal(state.seats[3].committed, 1, "and the new one has posted");
+        assert.equal(state.seats[0].committed, 2);
+        assert.equal(chipsOnTable(state), startingChips, "no chips created or lost in the shuffle");
+    });
+
+    test("passing it round many times still balances", () => {
+        const state = makeTable({ seatCount: 8, seated: [0, 2, 3, 5, 7], dealerSeatIndex: 0 });
+        const startingChips = chipsOnTable(state);
+        Betting.beginHand(state);
+
+        [2, 5, 7, 3, 0, 5].forEach(seat => {
+            state.dealerSeatIndex = seat;
+            Betting.repostBlinds(state);
+            assert.equal(chipsOnTable(state), startingChips, `chips drifted after passing to seat ${seat}`);
+        });
+
+        const { sbIndex, bbIndex } = HoldemState.getBlindSeats(state);
+        assert.equal(Betting.committed(state.seats[sbIndex]), 1);
+        assert.equal(Betting.committed(state.seats[bbIndex]), 2);
+    });
+
+    test("once somebody has acted, the blinds are settled", () => {
+        const state = makeTable({ seatCount: 4, seated: [0, 1, 2, 3], dealerSeatIndex: 0 });
+        Betting.beginHand(state);
+        assert.equal(Betting.onlyBlindsIn(state), true, "nothing but blinds so far");
+
+        Betting.call(state, 3);
+        assert.equal(Betting.onlyBlindsIn(state), false, "a call means the blinds are set where they are");
+    });
+});
+
+describe("naming the blinds by hand", () => {
+    test("a named blind wins over the button order", () => {
+        const state = makeTable({ seatCount: 6, seated: [0, 1, 2, 3], dealerSeatIndex: 0 });
+        state.blindOverride = { sbIndex: 3, bbIndex: 0 };
+
+        const { sbIndex, bbIndex, manual } = HoldemState.getBlindSeats(state);
+        assert.equal(sbIndex, 3);
+        assert.equal(bbIndex, 0);
+        assert.equal(manual, true);
+
+        Betting.beginHand(state);
+        assert.equal(state.seats[3].committed, 1);
+        assert.equal(state.seats[0].committed, 2);
+        assert.equal(state.seats[1].committed, 0, "the positional small blind posts nothing");
+    });
+
+    test("a named blind on a player who isn't dealt in is ignored", () => {
+        const state = makeTable({ seatCount: 6, seated: [0, 1, 2], dealerSeatIndex: 0 });
+        state.blindOverride = { sbIndex: 4, bbIndex: 0 }; // seat 4 is an empty chair
+
+        const { sbIndex, manual } = HoldemState.getBlindSeats(state);
+        assert.ok(!manual, "falls back to the button order rather than posting to nobody");
+        assert.ok(state.seats[sbIndex].inHand);
+    });
+
+    test("both blinds on one player is refused", () => {
+        const state = makeTable({ seatCount: 6, seated: [0, 1, 2], dealerSeatIndex: 0 });
+        state.blindOverride = { sbIndex: 1, bbIndex: 1 };
+        const { sbIndex, bbIndex } = HoldemState.getBlindSeats(state);
+        assert.notEqual(sbIndex, bbIndex);
+    });
+
+    test("naming blinds heads-up still acts in the right order", () => {
+        const state = makeTable({ seatCount: 6, seated: [2, 5], dealerSeatIndex: 2 });
+        state.blindOverride = { sbIndex: 5, bbIndex: 2 }; // deliberately the reverse
+
+        Betting.beginHand(state);
+        assert.equal(state.seats[5].committed, 1);
+        assert.equal(state.seats[2].committed, 2);
+        assert.equal(state.actingSeatIndex, 5, "the small blind acts first pre-flop heads-up");
+
+        Betting.call(state, 5);
+        Betting.check(state, 2);
+        Betting.closeStreet(state);
+        assert.equal(state.actingSeatIndex, 2, "and the big blind leads after the flop");
+    });
+
+    test("the naming only lasts the hand it was made for", () => {
+        const state = makeTable({ seatCount: 6, seated: [0, 1, 2, 3], dealerSeatIndex: 0 });
+        state.blindOverride = { sbIndex: 3, bbIndex: 0 };
+        Betting.beginHand(state);
+
+        HoldemState.startNextHand(state);
+        assert.equal(state.blindOverride, null, "blinds go back to following the button");
+    });
+});
+
+describe("the first hand on a fresh table", () => {
+    test("the button never starts on an empty chair", () => {
+        const state = HoldemState.createDefault();
+        HoldemState.resizeSeats(state, 9);
+        [4, 6, 7].forEach(i => { state.seats[i].inHand = true; state.seats[i].stack = 100; });
+        assert.equal(state.dealerSeatIndex, 0, "a fresh table starts the button on seat 1");
+        assert.equal(state.seats[0].inHand, false, "which nobody is sitting in");
+
+        Betting.beginHand(state);
+
+        assert.ok(state.seats[state.dealerSeatIndex].inHand, "the button moved to a real player");
+        const { sbIndex, bbIndex } = HoldemState.getBlindSeats(state);
+        assert.ok(state.seats[sbIndex].inHand);
+        assert.ok(state.seats[bbIndex].inHand);
+        assert.notEqual(sbIndex, bbIndex);
+    });
+
+    test("a table that empties out around the button recovers", () => {
+        const state = makeTable({ seatCount: 6, seated: [0, 1, 2, 3], dealerSeatIndex: 3 });
+        state.seats[3].inHand = false; // the player holding the button leaves
+        HoldemState.ensureButtonOnPlayer(state);
+        assert.ok(state.seats[state.dealerSeatIndex].inHand);
+    });
+
+    test("two players left after everyone else walks is heads-up, blinds reversed", () => {
+        const state = makeTable({ seatCount: 6, seated: [0, 1, 2, 3], dealerSeatIndex: 0 });
+        [2, 3].forEach(i => { state.seats[i].inHand = false; });
+
+        HoldemState.startNextHand(state);
+        Betting.beginHand(state);
+
+        const { sbIndex, headsUp } = HoldemState.getBlindSeats(state);
+        assert.equal(headsUp, true);
+        assert.equal(sbIndex, state.dealerSeatIndex, "heads-up the button posts the small blind");
+    });
+});
+
+describe("chips survive a messy table", () => {
+    test("joining, leaving and passing the button never changes the chip count", () => {
+        const state = makeTable({ seatCount: 8, seated: [0, 1, 2, 3], stack: 100, dealerSeatIndex: 0 });
+        state.seats[6].stack = 100; // sitting down but not dealt in yet
+        const startingChips = chipsOnTable(state);
+
+        Betting.beginHand(state);
+        state.dealerSeatIndex = 2;
+        Betting.repostBlinds(state);
+
+        state.seats[6].inHand = true;   // walks up mid-hand
+        state.seats[6].folded = true;
+        assert.equal(chipsOnTable(state), startingChips);
+
+        Betting.call(state, state.actingSeatIndex);
+        state.seats[1].inHand = false;  // and someone storms off
+        Betting.sweepToHandTotals(state);
+
+        assert.equal(chipsOnTable(state), startingChips, "every chip is still accounted for");
+        assert.equal(
+            Money.toCents(potOf(state) + state.seats.reduce((s, p) => s + (Number(p.stack) || 0), 0)),
+            Money.toCents(startingChips),
+            "and the pot plus the stacks is the whole table"
+        );
+    });
+});

tests/holdem/money.test.js

@@ -0,0 +1,126 @@
+const { test, describe } = require("node:test");
+const assert = require("node:assert/strict");
+const { Money, HandHistoryExport } = require("./load");
+
+describe("Money.format", () => {
+    test("whole amounts drop the pointless cents", () => {
+        assert.equal(Money.format(12), "$12");
+        assert.equal(Money.format(450), "$450");
+        assert.equal(Money.format(1250000), "$1,250,000");
+        assert.equal(Money.format(0), "$0");
+    });
+
+    test("amounts that carry cents still show them", () => {
+        assert.equal(Money.format(12.5), "$12.50");
+        assert.equal(Money.format(0.25), "$0.25");
+        assert.equal(Money.format(3.01), "$3.01");
+    });
+
+    test("a quarter-blind game reads exactly as it did", () => {
+        // The case that would be ruined by dropping cents unconditionally.
+        [0.25, 0.5, 1.75, 12.05].forEach(v => {
+            assert.match(Money.format(v), /\.\d\d$/, `${v} lost its cents`);
+        });
+    });
+
+    test("floating-point dust doesn't invent cents", () => {
+        assert.equal(Money.format(0.1 + 0.2), "$0.30");
+        assert.equal(Money.format(1.0000000001), "$1");
+    });
+
+    test("signed amounts put the sign out front, both scales", () => {
+        assert.equal(Money.formatSigned(87500), "+$87,500");
+        assert.equal(Money.formatSigned(-87500), "-$87,500");
+        assert.equal(Money.formatSigned(-12.5), "-$12.50");
+        assert.equal(Money.formatSigned(0), "$0");
+    });
+
+    test("rubbish in doesn't produce rubbish out", () => {
+        assert.equal(Money.format(null), "$0");
+        assert.equal(Money.format(undefined), "$0");
+        assert.equal(Money.format("nonsense"), "$0");
+    });
+});
+
+describe("Money.forSheet", () => {
+    test("a bare number a spreadsheet will add up", () => {
+        assert.equal(Money.forSheet(1250000), "1250000.00");
+        assert.equal(Money.forSheet(12.5), "12.50");
+        assert.equal(Money.forSheet(-87500), "-87500.00");
+    });
+
+    test("no currency symbol and no thousands separators", () => {
+        const written = Money.forSheet(1234567.89);
+        assert.ok(!written.includes("$"), "a $ makes the cell text");
+        assert.ok(!written.includes(","), "a comma makes the cell text");
+        assert.equal(Number(written), 1234567.89, "and it parses straight back to a number");
+    });
+});
+
+describe("the exported CSV", () => {
+    const history = [
+        { handNumber: 2, timestamp: 0, pot: 1250000, payouts: [{ id: "a", label: "Alexandra", amount: 1250000 }] },
+        { handNumber: 1, timestamp: 0, pot: 24.5, payouts: [{ id: "b", label: "Bob", amount: 24.5 }] },
+    ];
+    const standings = [
+        { id: "a", name: "Alexandra", in: 1250000, won: 1250000, net: 0, boughtIn: 3200000, chipsNow: 3200000, cashPosition: 0 },
+        { id: "b", name: "Bob", in: 24.5, won: 0, net: -24.5, boughtIn: 100, chipsNow: 75.5, cashPosition: -24.5 },
+    ];
+
+    // Splitting on commas isn't good enough: the timestamp column legitimately holds
+    // one ("1/1/1970, 5:00:00 PM") and is quoted for exactly that reason.
+    const splitRow = line => {
+        const fields = [];
+        let field = "";
+        let quoted = false;
+        for (let i = 0; i < line.length; i++) {
+            const c = line[i];
+            if (quoted) {
+                if (c === '"' && line[i + 1] === '"') { field += '"'; i++; }
+                else if (c === '"') quoted = false;
+                else field += c;
+            } else if (c === '"') quoted = true;
+            else if (c === ",") { fields.push(field); field = ""; }
+            else field += c;
+        }
+        fields.push(field);
+        return fields;
+    };
+
+    test("every money cell parses as a number", () => {
+        const csv = HandHistoryExport.toCsv(history, standings);
+        const lines = csv.split("\r\n");
+
+        lines.slice(1, 3).forEach(line => {
+            const cell = splitRow(line)[2]; // Pot
+            assert.ok(cell !== "" && !Number.isNaN(Number(cell)), `pot cell "${cell}" isn't a number`);
+        });
+
+        // Standings rows: every column after the name has to be numeric.
+        const standingsStart = lines.findIndex(l => l.startsWith("Player,"));
+        lines.slice(standingsStart + 1).filter(Boolean).forEach(line => {
+            splitRow(line).slice(1).forEach(cell => {
+                assert.ok(cell !== "" && !Number.isNaN(Number(cell)), `standings cell "${cell}" isn't a number`);
+            });
+        });
+    });
+
+    test("a million-dollar pot doesn't need quoting any more", () => {
+        const csv = HandHistoryExport.toCsv(history, []);
+        assert.ok(csv.includes("1250000.00"), "written plainly");
+        assert.ok(!csv.includes('"$1,250,000'), "not as a quoted, unsummable string");
+    });
+
+    test("names and payout descriptions stay human", () => {
+        const csv = HandHistoryExport.toCsv(history, standings);
+        assert.ok(csv.includes("Alexandra"), "the name column is still a name");
+        assert.ok(csv.includes("Alexandra: $1,250,000"), "the payout column still reads like a sentence");
+    });
+
+    test("a name with a comma is still quoted properly", () => {
+        const csv = HandHistoryExport.toCsv([], [
+            { id: "x", name: "Smith, John", in: 0, won: 0, net: 0, boughtIn: 0, chipsNow: 0, cashPosition: 0 },
+        ]);
+        assert.ok(csv.includes('"Smith, John"'), "the CSV escaping still applies where it's needed");
+    });
+});

tests/holdem/robustness.test.js

@@ -0,0 +1,144 @@
+// Values a dealer can actually produce with a typo, and the ones a corrupted save
+// can produce on its own. None of these should be able to move chips.
+const { test, describe } = require("node:test");
+const assert = require("node:assert/strict");
+const { Betting, HoldemState, makeTable, chipsOnTable } = require("./load");
+
+describe("a stack can never go negative", () => {
+    test("a mistyped negative stack reads as empty, not as owing chips", () => {
+        const state = makeTable({ seatCount: 4, seated: [0, 1, 2] });
+        state.seats[0].stack = -50;
+        assert.equal(Betting.stackOf(state, state.seats[0]), 0);
+    });
+
+    test("a negative stack can't be bet with", () => {
+        const state = makeTable({ seatCount: 4, seated: [0, 1, 2] });
+        state.seats[0].stack = -50;
+        const before = state.seats.reduce((s, p) => s + Math.max(0, Number(p.stack) || 0), 0);
+
+        const moved = Betting.putIn(state, 0, 25);
+
+        assert.equal(moved, 0, "nothing moves out of an empty stack");
+        assert.ok(Betting.stackOf(state, state.seats[0]) >= 0);
+        assert.equal(state.seats[0].committed, 0, "and nothing appears in front of them");
+        assert.ok(state.seats.reduce((s, p) => s + Math.max(0, Number(p.stack) || 0), 0) <= before);
+    });
+
+    test("a negative table default doesn't hand everyone a negative stack", () => {
+        const state = makeTable({ seatCount: 4, seated: [0, 1, 2] });
+        state.seats.forEach(p => { p.stack = null; });
+        state.defaultStack = -100;
+        state.seats.forEach(p => assert.equal(Betting.stackOf(state, p), 0));
+    });
+
+    test("a negative stack doesn't make a player look like they can still bet", () => {
+        const state = makeTable({ seatCount: 4, seated: [0, 1, 2] });
+        state.seats[0].stack = -50;
+        assert.ok(!Betting.seatsWithChips(state).some(s => s.index === 0));
+    });
+});
+
+describe("blinds that can't be posted", () => {
+    test("negative blinds post nothing rather than paying players to sit down", () => {
+        const state = makeTable({ seatCount: 4, seated: [0, 1, 2] });
+        state.smallBlind = -5;
+        state.bigBlind = -10;
+        const before = chipsOnTable(state);
+
+        Betting.beginHand(state);
+
+        state.seats.forEach(p => assert.equal(p.committed, 0));
+        assert.equal(chipsOnTable(state), before);
+    });
+
+    test("an unreadable blind doesn't wedge the hand", () => {
+        const state = makeTable({ seatCount: 4, seated: [0, 1, 2] });
+        state.bigBlind = NaN;
+        state.smallBlind = 1;
+
+        Betting.beginHand(state);
+
+        assert.ok(Number.isFinite(state.currentBet), "the bet to match is still a number");
+        assert.ok(!Number.isNaN(Betting.potSoFar(state)));
+    });
+
+    test("blinds nobody can cover put those players all-in and move on", () => {
+        const state = makeTable({ seatCount: 4, seated: [0, 1, 2], stack: 10 });
+        state.smallBlind = 500;
+        state.bigBlind = 1000;
+        const before = chipsOnTable(state);
+
+        Betting.beginHand(state);
+
+        assert.equal(chipsOnTable(state), before, "no chips invented covering a blind");
+        state.seats.forEach(p => assert.ok((Number(p.stack) || 0) >= 0));
+        assert.ok(state.actingSeatIndex === null || state.seats[state.actingSeatIndex].inHand);
+    });
+});
+
+describe("a saved table that comes back damaged", () => {
+    test("unreadable storage falls back to a fresh table", () => {
+        // load() has to survive whatever is in localStorage, because the alternative
+        // is a dealer opening the tool mid-session to a blank screen.
+        const original = globalThis.localStorage;
+        globalThis.localStorage = {
+            getItem: () => "{not json at all",
+            setItem: () => {},
+            removeItem: () => {},
+        };
+        const state = HoldemState.load();
+        globalThis.localStorage = original;
+
+        assert.equal(state.seats.length, HoldemState.DEFAULT_SEAT_COUNT);
+        assert.equal(state.handNumber, 1);
+    });
+
+    test("a save missing its seats is treated as no save at all", () => {
+        const original = globalThis.localStorage;
+        globalThis.localStorage = {
+            getItem: () => JSON.stringify({ handNumber: 7, smallBlind: 3 }),
+            setItem: () => {},
+            removeItem: () => {},
+        };
+        const state = HoldemState.load();
+        globalThis.localStorage = original;
+
+        assert.ok(Array.isArray(state.seats) && state.seats.length > 0);
+    });
+
+    test("a save from before a field existed gets the field, not undefined", () => {
+        const original = globalThis.localStorage;
+        globalThis.localStorage = {
+            getItem: () => JSON.stringify({
+                seats: [{ id: "a", name: "Ann", inHand: true }, { id: "b", name: "Ben", inHand: true }],
+                handNumber: 4,
+            }),
+            setItem: () => {},
+            removeItem: () => {},
+        };
+        const state = HoldemState.load();
+        globalThis.localStorage = original;
+
+        assert.equal(state.blindOverride, null);
+        assert.equal(state.street, "preflop");
+        state.seats.forEach(p => {
+            assert.equal(p.committed, 0);
+            assert.equal(p.hasActed, false);
+            assert.equal(p.buyIns, 0);
+        });
+        // And it has to be playable, not just parseable.
+        assert.doesNotThrow(() => Betting.beginHand(state));
+    });
+
+    test("storage that refuses to be written doesn't take the table down", () => {
+        const original = globalThis.localStorage;
+        globalThis.localStorage = {
+            getItem: () => null,
+            setItem: () => { throw new Error("QuotaExceededError"); },
+            removeItem: () => {},
+        };
+        const state = HoldemState.createDefault();
+        assert.doesNotThrow(() => HoldemState.save(state), "a full disk must not break the hand in progress");
+        globalThis.localStorage = original;
+    });
+});