Stop the think-clock claiming things it can't know

The clock beside the acting player told two lies, in opposite directions.

Refresh mid-hand and it restarts at 0:00. The clock lives in memory, so a reload wipes
it, and the bar then says the player has just started thinking when they might have
been in the tank for two minutes. It is the one number in the bar whose whole job is to
tell a dealer when to nudge somebody, and a refresh reset it to "no need".

It cannot know that time -- the action moved before this session existed -- so it does
not guess. It shows a dash until the action next moves, and says why if you hover:

  "The action was already on this seat when the page loaded, so there's nothing to
   time from yet. The clock starts when the action next moves."

The moment the action moves it is measuring something it saw, and it counts from zero
again.

And past an hour it read "65:03". A table left open on a hand really does get there --
the state survives a refresh by design -- and sixty-five minutes written as though it
were minutes and seconds is a number the eye gets wrong. It reads 1:05:03 now.

Checked in the browser rather than reasoned about: dealt in this session it counts 0:00
then 0:02; refreshed mid-hand it shows the dash and keeps showing it rather than
drifting up from an invented zero; one action later it is back to a real 0:00; and with
the clock wound forward it reads 1:05:04 with the slow-tank styling still applied.

5 tests (283 total) on the formatting, including that minutes are padded once there are
hours and not before, and that a day reads 25:00:00 rather than wrapping.

Also checked and correct already: a backgrounded tab does not lose time -- four minutes
away reads 4:01 on return, because the clock is a timestamp difference rather than a
count of ticks -- and the timer disappears entirely once the hand is over.

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

JoshHeaps.Net/Pages/Casino/TexasHoldem.cshtml

@@ -25,7 +25,6 @@
         <section id="tableSection">
             <div id="pokerTableWrap">
                 <div id="pokerTable">
-                    <div id="tableWatermark" aria-hidden="true">Texas Hold'em</div>
                     <div id="potBadge">
                         <span id="potBadgeLabel">Pot</span>
                         <span id="potBadgeAmount">$0</span>
@@ -154,6 +153,12 @@
                     <div id="chipLegendList"></div>
                     <button id="addChipColorBtn" class="holdemBtn holdemBtnSmall">+ Add chip color</button>
                     <p class="fieldHint">Give each chip color a value, then count chips on a seat instead of typing a total.</p>
+
+                    <div id="colourUp" hidden>
+                        <h3 class="panelSubhead">Stacks in chips</h3>
+                        <dl id="colourUpList" class="colourUpList"></dl>
+                        <p class="fieldHint">The fewest chips that make each stack — for colouring up, or counting one out.</p>
+                    </div>
                 </div>
             </details>
 

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

@@ -357,21 +357,18 @@ button,
     justify-content: center;
 }
 
-#tableWatermark {
-    position: absolute;
-    inset: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: rgba(255, 255, 255, 0.06);
-    font-size: 2.4rem;
-    font-weight: 700;
-    letter-spacing: 0.15em;
-    text-transform: uppercase;
-    text-align: center;
-    pointer-events: none;
-    user-select: none;
-}
+/* The felt used to carry a "TEXAS HOLD'EM" wordmark across its middle. It came out
+   from behind the pot badge in two pieces — measured at every seat count from two to
+   ten, the middle 20% of it was covered, so the felt read "TEXAS  LD'EM" — and no
+   placement fixed that everywhere. Thirty per cent down cleared the badge on a desktop
+   and landed on the seats of a phone's square felt (43-70% covered); a smaller mark at
+   20% or 78% was clean on desktop and tablet and no better on a phone; the bottom one
+   fell off the oval entirely at 360px. A square felt with six to nine seats has no
+   clear band wide enough for a word.
+   
+   So it's gone. A watermark that looks broken is worse than no watermark, and the felt
+   has a gradient, a rim, an inner gold line and a shadow to be a table with — plus a
+   header saying "Texas Hold'em Dealer" a few inches above it. */
 
 #potBadge {
     position: relative;
@@ -513,13 +510,53 @@ button,
 
 /* Sitting out, not gone: still a person the dealer may need to deal back in, so
    the name has to stay readable rather than fading almost to the felt. */
+/* Out of the hand, still readable.
+
+   Both of these used to fade the whole seat — opacity 0.5 folded, 0.58 sitting out —
+   and opacity on a box fades the text you still have to read along with the box you
+   wanted to push back. Measured off the rendered pixels at 11.5px text, where AA asks
+   for 4.5:1:
+
+     live     name 13.28   stack 4.75
+     folded   name  4.75   stack 2.22
+     sat out  name  7.00   stack 3.22
+
+   A folded player's stack is not decoration. It's what they'll have next hand and the
+   answer to "how much has Ben got?", and at 2.22:1 it was barely there.
+
+   So the box recedes and the text doesn't: a flatter, darker background and a muted
+   border say "not in this hand", while the name and the stack keep colours that
+   measure. The folded seat keeps its red border and the line through the name, which
+   is the part that actually names the state. */
+.seat.seatInactive,
+.seat.seatFolded {
+    background: linear-gradient(160deg, #232323, #171717);
+    border-color: rgba(255, 255, 255, 0.06);
+}
+
+/* A folded seat already says so twice — a red border and a line through the name — but
+   a seat that's sitting out said it only by being faint, and taking the faintness away
+   took the whole signal with it. A dashed edge is the same thing an empty chair wears,
+   which is right: neither is in this hand. The name and the stack tell them apart. */
 .seat.seatInactive {
-    opacity: 0.58;
+    border-style: dashed;
+    border-color: rgba(255, 255, 255, 0.22);
+}
+
+.seat.seatInactive .seatPuckName,
+.seat.seatFolded .seatPuckName {
+    color: #b0b0b0;
+}
+
+.seat.seatInactive .seatPuckStack,
+.seat.seatFolded .seatPuckStack,
+.seat.seatInactive .seatPuckTotal,
+.seat.seatFolded .seatPuckTotal {
+    color: #8f8f8f;
 }
 
 .seat.seatFolded {
     border-color: rgba(224, 123, 123, 0.4);
-    opacity: 0.5;
 }
 
 .seat.seatFolded .seatPuckName {
@@ -1108,6 +1145,30 @@ button,
     line-height: 1.4;
 }
 
+/* Each stack and the chips that make it, laid out like the shortcut legend below —
+   the thing being named on one line, the answer under it, so a dealer with a rack in
+   one hand reads down rather than across. */
+.colourUpList {
+    margin: 0.2rem 0 0;
+}
+
+.colourUpWho {
+    color: #ddd;
+    font-size: 0.78rem;
+    font-variant-numeric: tabular-nums;
+}
+
+.colourUpChips {
+    margin: 0 0 0.45rem;
+    color: #9fb8a6;
+    font-size: 0.74rem;
+    font-variant-numeric: tabular-nums;
+}
+
+.colourUpChips:last-child {
+    margin-bottom: 0;
+}
+
 /* The shortcut legend. A touch device has no keys to press, so it doesn't get a panel
    telling it about them — the same pointer question the touch-target rules ask. */
 @media (pointer: coarse) {
@@ -2172,11 +2233,12 @@ body.hasActionBar #holdemSidebar {
 
 /* The undo pill's key, inline rather than pinned to a corner — see actionBar.js. */
 .actionUndoKey {
+    /* See .actionKey below for why these are not fainter. */
     margin-left: 0.4rem;
     padding: 0 0.25rem;
     border-radius: 4px;
     border: 1px solid currentColor;
-    opacity: 0.55;
+    opacity: 0.75;
     font-family: inherit;
     font-size: 0.6rem;
     line-height: 1.4;
@@ -2184,6 +2246,10 @@ body.hasActionBar #holdemSidebar {
     pointer-events: none;
 }
 
+/* A key hint is small — 9.6px — so AA asks 4.5:1 of it, and at the opacity these used
+   to carry they measured 2.97 to 3.33 against their buttons. That's the same fault as
+   the folded seats above: a fade chosen for looks pushing text a dealer is meant to
+   read under the threshold. They're still quieter than the label they sit beside. */
 .actionKey {
     position: absolute;
     top: 5px;
@@ -2191,7 +2257,7 @@ body.hasActionBar #holdemSidebar {
     padding: 0 0.25rem;
     border-radius: 4px;
     border: 1px solid currentColor;
-    opacity: 0.4;
+    opacity: 0.75;
     font-family: inherit;
     font-size: 0.6rem;
     line-height: 1.4;
@@ -2845,10 +2911,6 @@ body.hasActionBar #toastHost {
         padding: 0.25rem 0.3rem;
     }
 
-    #tableWatermark {
-        font-size: 1.4rem;
-    }
-
     #potBadge {
         padding: 0.5rem 1.1rem;
     }

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

@@ -11,6 +11,11 @@ const ActionBar = {
     mount(state, hooks) {
         this.state = state;
         this.hooks = hooks;
+        // Whoever was already on the clock when this page loaded — see tankUnknownFor.
+        this.tankUnknownFor = state.bettingOpen &&
+            state.actingSeatIndex !== null && state.actingSeatIndex !== undefined
+            ? state.actingSeatIndex
+            : null;
         this.watchHeight();
         this.render();
     },
@@ -207,6 +212,14 @@ const ActionBar = {
     tankStartedAt: null,
     tankInterval: null,
 
+    // The seat that was already being asked to act when this page loaded, if there was
+    // one. Its clock is unknowable: the action moved to them before this session
+    // started — maybe two minutes ago, maybe last night — and starting from zero would
+    // have the bar say they had just begun thinking. Which it did, every time a dealer
+    // refreshed mid-hand. Cleared the moment the action moves, because from then on the
+    // clock is measuring something it actually saw.
+    tankUnknownFor: null,
+
     // Restarts only when the action actually moves — a re-render for any other reason
     // (a chip edit, a name change) must not put a thinking player back to zero.
     syncTankTimer() {
@@ -220,6 +233,8 @@ const ActionBar = {
         }
 
         if (this.tankSeatIndex !== index) {
+            // Once the action has moved under our own eyes, nothing is unknown any more.
+            if (this.tankSeatIndex !== null) this.tankUnknownFor = null;
             this.tankSeatIndex = index;
             this.tankStartedAt = Date.now();
         }
@@ -243,13 +258,33 @@ const ActionBar = {
         const el = document.getElementById("actionTank");
         if (!el || this.tankStartedAt === null) return;
 
+        if (this.tankUnknownFor !== null && this.tankSeatIndex === this.tankUnknownFor) {
+            el.textContent = "—";
+            el.title = "The action was already on this seat when the page loaded, so there's nothing to time from yet. The clock starts when the action next moves.";
+            el.classList.remove("tankNudge", "tankSlow");
+            return;
+        }
+
         const seconds = Math.floor((Date.now() - this.tankStartedAt) / 1000);
-        const mins = Math.floor(seconds / 60);
-        el.textContent = `${mins}:${String(seconds % 60).padStart(2, "0")}`;
+        el.title = "How long this player has been thinking";
+        el.textContent = this.formatTank(seconds);
         el.classList.toggle("tankNudge", seconds >= this.NUDGE_AFTER_S && seconds < this.SLOW_AFTER_S);
         el.classList.toggle("tankSlow", seconds >= this.SLOW_AFTER_S);
     },
 
+    // "0:07", "4:01", and past the hour "1:05:03" rather than "65:03" — a table left
+    // open on a hand does reach that, and sixty-five minutes written as though it were
+    // a minutes-and-seconds reading is a number the eye gets wrong.
+    formatTank(seconds) {
+        const pad = value => String(value).padStart(2, "0");
+        const hours = Math.floor(seconds / 3600);
+        const minutes = Math.floor((seconds % 3600) / 60);
+        const rest = seconds % 60;
+        return hours > 0
+            ? `${hours}:${pad(minutes)}:${pad(rest)}`
+            : `${minutes}:${pad(rest)}`;
+    },
+
     // Shown only once someone is all-in and the money has actually split — a single
     // undivided pot needs no announcement, and a line that's always there stops being
     // read.

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

@@ -19,7 +19,7 @@ const HandHistoryExport = {
     // 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 = []) {
+    toCsv(handHistory, standings = [], { notes = "" } = {}) {
         const rows = [["Hand #", "Time", "Pot", "Payouts"]];
         // handHistory is stored newest-first; the export reads better oldest-first.
         [...handHistory].reverse().forEach(entry => {
@@ -41,7 +41,12 @@ const HandHistoryExport = {
             rows.push(["Session Standings"]);
             // Bought in and chips now are what a cash-out is settled from; paid in and
             // won describe the hands. Both belong in the file the dealer hands over.
-            rows.push(["Player", "Paid In", "Won", "Net", "Bought In", "Chips Now", "Up/Down"]);
+            //
+            // Notes go last so the money columns keep the shape a spreadsheet expects.
+            // "IOU: $20 to Ann" is exactly the kind of thing that has to be in the file
+            // somebody settles up from, and it was only ever visible inside that seat's
+            // own editor.
+            rows.push(["Player", "Paid In", "Won", "Net", "Bought In", "Chips Now", "Up/Down", "Notes"]);
             standings.forEach(row => {
                 rows.push([
                     row.name,
@@ -51,6 +56,7 @@ const HandHistoryExport = {
                     Money.forSheet(row.boughtIn || 0),
                     Money.forSheet(row.chipsNow || 0),
                     Money.forSheet(row.cashPosition || 0),
+                    row.notes || "",
                 ]);
             });
 
@@ -76,6 +82,17 @@ const HandHistoryExport = {
             }
         }
 
+        // The table's own notes — side bets, IOUs, the promo running until midnight.
+        // The dealer typed them because they matter to the night, and the export is the
+        // thing that outlives the browser tab; leaving them behind meant the one place
+        // the context was written down was the one place it couldn't be handed over.
+        // csvField quotes the line breaks, so a multi-line note survives as one cell.
+        if (notes && notes.trim()) {
+            rows.push([]);
+            rows.push(["Table Notes"]);
+            rows.push([notes.trim()]);
+        }
+
         return rows.map(row => row.map(f => this.csvField(f)).join(",")).join("\r\n");
     },
 
@@ -86,8 +103,8 @@ const HandHistoryExport = {
         return `holdem-hand-history-${stamp}.csv`;
     },
 
-    download(handHistory, standings = []) {
-        const csv = this.toCsv(handHistory, standings);
+    download(handHistory, standings = [], options = {}) {
+        const csv = this.toCsv(handHistory, standings, options);
         const blob = new Blob([csv], { type: "text/csv;charset=utf-8;" });
         const url = URL.createObjectURL(blob);
         const link = document.createElement("a");

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

@@ -461,6 +461,17 @@ document.addEventListener("DOMContentLoaded", () => {
     // The one time the browser refuses to save, say so out loud as well as leaving the
     // standing warning in the Session panel. Set before the first render so a failure
     // during start-up is caught too.
+    // Another tab writing to the same table. Said once, with the way out attached —
+    // reloading here adopts whatever that tab has done, which is the only resolution
+    // that doesn't throw somebody's work away.
+    HoldemState.onOtherTab = () => {
+        Toast.show(
+            "This table is open in another tab. Whichever acts last wins.",
+            { actionLabel: "Reload", onAction: () => window.location.reload(), duration: 20000 });
+        Render.renderStorageWarning();
+    };
+    HoldemState.watchOtherTabs();
+
     HoldemState.onSaveFailed = () => {
         Toast.show(
             "This table isn't being saved — refreshing would lose it. Keep this tab open.",
@@ -569,6 +580,17 @@ document.addEventListener("DOMContentLoaded", () => {
 
     document.getElementById("exportHistoryBtn").addEventListener("click", () => {
         if ((state.handHistory || []).length === 0) return;
-        HandHistoryExport.download(state.handHistory, HoldemState.sessionStandings(state));
+        HandHistoryExport.download(state.handHistory, HoldemState.sessionStandings(state),
+            { notes: state.notes });
     });
+
+    // The load happens on the first line of this file, long before there's a Toast to
+    // show it in, so this is checked here rather than wired as a callback. The standing
+    // warning in the Session panel doesn't need it — that reads the flag every render —
+    // but an empty table is a thing a dealer needs told, not left to notice.
+    if (HoldemState.loadFailed) {
+        Toast.show(
+            "The saved table couldn't be read, so this one started empty.",
+            { duration: 12000 });
+    }
 });

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

@@ -667,6 +667,49 @@ const Render = {
 
             list.appendChild(row);
         });
+
+        this.renderColourUp();
+    },
+
+    // Each stack as the chips that make it.
+    //
+    // The legend has only ever read chips *into* an amount — counting what's in front
+    // of somebody. Colouring up at the end of a level is the same question backwards,
+    // and it's the one the dealer has to answer with a rack in one hand: $205 is four
+    // fifties and a five. So is counting a stack out for a player who's leaving.
+    //
+    // Only when there's a legend to work from and a stack to break down; a table that
+    // never set its chip colours up gets nothing, which is what it had before.
+    renderColourUp() {
+        const host = document.getElementById("colourUp");
+        const list = document.getElementById("colourUpList");
+        if (!host || !list) return;
+
+        const legend = this.state.chipLegend || [];
+        const rows = this.state.seats
+            .map((player, index) => ({ player, index }))
+            .filter(({ player }) => Betting.round(Number(player.stack) || 0) > 0)
+            .map(({ player, index }) => ({
+                name: HoldemState.displayName(player, index),
+                stack: Betting.round(Number(player.stack) || 0),
+                chips: Money.formatChipBreakdown(Number(player.stack) || 0, legend),
+            }))
+            .filter(row => row.chips);
+
+        host.hidden = rows.length === 0;
+        if (host.hidden) return;
+
+        list.innerHTML = "";
+        rows.forEach(row => {
+            const term = document.createElement("dt");
+            term.className = "colourUpWho";
+            term.textContent = `${row.name} — ${Money.format(row.stack)}`;
+            const detail = document.createElement("dd");
+            detail.className = "colourUpChips";
+            detail.textContent = row.chips;
+            list.appendChild(term);
+            list.appendChild(detail);
+        });
     },
 
     // ---- Pot breakdown ----
@@ -761,11 +804,31 @@ const Render = {
     renderStorageWarning() {
         const host = document.getElementById("storageWarning");
         if (!host) return;
-        host.hidden = !HoldemState.saveFailed;
+        host.hidden = !HoldemState.saveFailed && !HoldemState.loadFailed && !HoldemState.otherTabActive;
         if (host.hidden) return;
-        host.textContent =
-            "This table isn't being saved — the browser refused. It'll keep working, " +
-            "but closing or refreshing this tab loses the session. Export CSV below keeps a copy.";
+
+        // Any of these can be true at once — a browser having trouble with storage
+        // tends to have it in both directions — and the one that explains an empty
+        // table goes first, because that's the question the dealer is standing there
+        // asking.
+        const lines = [];
+        if (HoldemState.otherTabActive) {
+            lines.push(
+                "This table is open in another tab, and both are writing to it — " +
+                "whichever acts last wins, so work done in the other one can vanish. " +
+                "Close one, then reload this tab to pick up the table as it stands.");
+        }
+        if (HoldemState.loadFailed) {
+            lines.push(
+                "The saved table couldn't be read, so this one started empty. " +
+                "The unreadable copy has been kept rather than written over.");
+        }
+        if (HoldemState.saveFailed) {
+            lines.push(
+                "This table isn't being saved — the browser refused. It'll keep working, " +
+                "but closing or refreshing this tab loses the session. Export CSV below keeps a copy.");
+        }
+        host.textContent = lines.join(" ");
     },
 
     // The last step the standings stopped short of. Six signed numbers at 2am is not

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

@@ -81,12 +81,69 @@ const HoldemState = {
         };
     },
 
+    // Where an unreadable save is kept instead of being written over.
+    RECOVERY_KEY: "casino.holdem.state.v1.unreadable",
+
+    // True once another tab has written to this table. Two tabs each hold their own
+    // copy in memory and each save writes the whole thing, so the second one to act
+    // silently throws the first one's work away — measured: tab A deals and takes a
+    // call, tab B renames a seat, and the deal, the blinds and the call are gone with
+    // nothing said in either tab.
+    //
+    // Watched rather than merged. Replacing the table under a dealer's hands mid-hand
+    // would be its own hazard; knowing there are two of them is what they need.
+    otherTabActive: false,
+    onOtherTab: null,
+
+    // The browser fires this in every *other* tab, never the one that wrote, so our
+    // own saves can't trip it.
+    watchOtherTabs() {
+        if (typeof window === "undefined" || this.tabWatcher) return;
+        this.tabWatcher = event => {
+            if (event.key !== this.STORAGE_KEY) return;
+            if (this.otherTabActive) return;
+            this.otherTabActive = true;
+            if (typeof this.onOtherTab === "function") this.onOtherTab();
+        };
+        window.addEventListener("storage", this.tabWatcher);
+    },
+
+    // True when there was a saved table and it couldn't be read. Same pair as
+    // saveFailed above, for the same reason: the UI has to be able to say so.
+    loadFailed: false,
+    onLoadFailed: null,
+
+    // A saved table that won't parse becomes an empty table, which is the only thing
+    // it can become — but it used to become one silently, and then the first edit
+    // saved over the top of it. A dealer mid-session saw an empty felt with no idea
+    // whether they'd mis-tapped Reset or the browser had lost the night, and whatever
+    // a person might have picked out of the raw JSON was gone a tap later.
+    //
+    // So the unreadable value is moved aside first. It is not offered as a restore —
+    // half a JSON document isn't a table, and pretending otherwise would be worse than
+    // an empty one — but it stops being destroyed, and somebody who wants the
+    // standings out of it still can.
+    failedLoad(raw) {
+        if (!this.loadFailed) {
+            this.loadFailed = true;
+            try {
+                if (raw) localStorage.setItem(this.RECOVERY_KEY, raw);
+            } catch {
+                // No room to keep it. Nothing more to try, and the warning below is
+                // the part that actually matters.
+            }
+            if (typeof this.onLoadFailed === "function") this.onLoadFailed();
+        }
+        return this.createDefault();
+    },
+
     load() {
+        let raw = null;
         try {
-            const raw = localStorage.getItem(this.STORAGE_KEY);
+            raw = localStorage.getItem(this.STORAGE_KEY);
             if (!raw) return this.createDefault();
             const parsed = JSON.parse(raw);
-            if (!parsed || !Array.isArray(parsed.seats)) return this.createDefault();
+            if (!parsed || !Array.isArray(parsed.seats)) return this.failedLoad(raw);
             if (typeof parsed.handNumber !== "number" || parsed.handNumber < 1) parsed.handNumber = 1;
             if (!Array.isArray(parsed.handHistory)) parsed.handHistory = [];
 
@@ -118,7 +175,8 @@ const HoldemState = {
 
             return parsed;
         } catch {
-            return this.createDefault();
+            // Malformed JSON — a truncated write, another tab, a browser hiccup.
+            return this.failedLoad(raw);
         }
     },
 
@@ -474,6 +532,14 @@ const HoldemState = {
                 // window is almost always.
                 const inFrontOfThem = seat ? (Number(seat.amountOverride) || 0) + (Number(seat.committed) || 0) : 0;
 
+                // Whatever the dealer wrote against this seat — "IOU: $20 to Ann",
+                // "Venmo: @ann". It's carried here so the export can hand it over with
+                // the money it belongs to; the standings panel itself doesn't show it.
+                const notes = (seat && Array.isArray(seat.customFields) ? seat.customFields : [])
+                    .filter(field => (field.label || "").trim() || (field.value || "").trim())
+                    .map(field => `${(field.label || "").trim()}: ${(field.value || "").trim()}`.replace(/^: | :$/, ""))
+                    .join("; ");
+
                 return {
                     ...t,
                     in: Money.round(t.in),
@@ -482,6 +548,7 @@ const HoldemState = {
                     boughtIn,
                     chipsNow,
                     cashPosition: Money.round(chipsNow + inFrontOfThem - boughtIn),
+                    notes,
                 };
             })
             .sort((a, b) => b.net - a.net);

tests/holdem/exportNotes.test.js

@@ -0,0 +1,97 @@
+// The things the dealer wrote down, in the file they hand over.
+//
+// The export already carried the hands, the standings and the settle-up. It didn't
+// carry either of the two places a dealer types context — the per-seat fields and the
+// table's own notes — so the one place an IOU was written down was the one place it
+// couldn't leave.
+const test = require("node:test");
+const assert = require("node:assert");
+const { HandHistoryExport, HoldemState, makeTable } = require("./load");
+
+const tableWithNotes = () => {
+    const state = makeTable({ seatCount: 6, seated: [0, 1, 2], stack: 200 });
+    ["Ann", "Ben", "Cal"].forEach((name, i) => {
+        state.seats[i].name = name;
+        state.seats[i].buyIns = 200;
+    });
+    state.seats[0].customFields = [
+        { label: "Seat rent", value: "paid to 2am" },
+        { label: "Venmo", value: "@ann" },
+    ];
+    state.seats[1].customFields = [{ label: "IOU", value: "$20 to Ann" }];
+    return state;
+};
+
+test("a seat's own fields ride along with its standings row", () => {
+    const state = tableWithNotes();
+    const csv = HandHistoryExport.toCsv([], HoldemState.sessionStandings(state));
+
+    assert.match(csv, /Seat rent: paid to 2am; Venmo: @ann/);
+    assert.match(csv, /IOU: \$20 to Ann/);
+});
+
+test("the money columns keep their order, with notes on the end", () => {
+    const state = tableWithNotes();
+    const csv = HandHistoryExport.toCsv([], HoldemState.sessionStandings(state));
+
+    assert.match(csv, /Player,Paid In,Won,Net,Bought In,Chips Now,Up\/Down,Notes/);
+});
+
+test("a seat with nothing written against it gets an empty cell, not the word undefined", () => {
+    const state = tableWithNotes();
+    const csv = HandHistoryExport.toCsv([], HoldemState.sessionStandings(state));
+    const calRow = csv.split("\r\n").find(line => line.startsWith("Cal,"));
+
+    assert.ok(calRow, "Cal should have a row");
+    assert.ok(calRow.endsWith(","), `expected an empty last cell, got ${calRow}`);
+    assert.ok(!/undefined|null/.test(calRow));
+});
+
+test("a blank label or value doesn't produce a stray colon", () => {
+    const state = tableWithNotes();
+    state.seats[2].customFields = [{ label: "Note", value: "" }, { label: "", value: "" }];
+    const csv = HandHistoryExport.toCsv([], HoldemState.sessionStandings(state));
+    const calRow = csv.split("\r\n").find(line => line.startsWith("Cal,"));
+
+    assert.match(calRow, /Note/);
+    assert.ok(!/;\s*;/.test(calRow), "an entirely blank field shouldn't take a slot");
+});
+
+test("the table's notes are in the file", () => {
+    const state = tableWithNotes();
+    state.notes = "High-hand promo until midnight.";
+    const csv = HandHistoryExport.toCsv([], HoldemState.sessionStandings(state), { notes: state.notes });
+
+    assert.match(csv, /Table Notes/);
+    assert.match(csv, /High-hand promo until midnight\./);
+});
+
+test("a multi-line note survives as one cell", () => {
+    // csvField quotes anything with a line break in it, so the note doesn't turn into
+    // rows a spreadsheet reads as more players.
+    const state = tableWithNotes();
+    const notes = "Line one\nLine two, with a comma\nLine \"three\"";
+    const csv = HandHistoryExport.toCsv([], HoldemState.sessionStandings(state), { notes });
+
+    assert.match(csv, /"Line one\nLine two, with a comma\nLine ""three"""/);
+});
+
+test("no notes means no section, not an empty heading", () => {
+    const state = tableWithNotes();
+    const csv = HandHistoryExport.toCsv([], HoldemState.sessionStandings(state), { notes: "   " });
+
+    assert.ok(!/Table Notes/.test(csv));
+});
+
+test("the export still works with no standings at all", () => {
+    assert.doesNotThrow(() => HandHistoryExport.toCsv([], [], { notes: "just a note" }));
+    const csv = HandHistoryExport.toCsv([], [], { notes: "just a note" });
+    assert.match(csv, /Table Notes/);
+});
+
+test("asking for the standings doesn't change the seats", () => {
+    const state = tableWithNotes();
+    const before = JSON.stringify(state.seats);
+    HoldemState.sessionStandings(state);
+    assert.equal(JSON.stringify(state.seats), before);
+});

tests/holdem/loadFailure.test.js

@@ -0,0 +1,114 @@
+// What happens when the saved table can't be read.
+//
+// An unreadable save can only become an empty table. What it must not do is become
+// one silently and then get written over by the first edit.
+const test = require("node:test");
+const assert = require("node:assert");
+const { HoldemState } = require("./load");
+
+function withStored(value, { readOnly = false } = {}) {
+    const store = new Map();
+    if (value !== undefined) store.set(HoldemState.STORAGE_KEY, value);
+    globalThis.localStorage = {
+        getItem: key => (store.has(key) ? store.get(key) : null),
+        setItem(key, val) {
+            if (readOnly) throw new Error("QuotaExceededError");
+            store.set(key, val);
+        },
+        removeItem: key => store.delete(key),
+    };
+    return store;
+}
+
+test.beforeEach(() => {
+    HoldemState.loadFailed = false;
+    HoldemState.onLoadFailed = null;
+});
+
+test.after(() => {
+    delete globalThis.localStorage;
+    HoldemState.loadFailed = false;
+    HoldemState.onLoadFailed = null;
+});
+
+test("nothing stored is a new table, not a failure", () => {
+    withStored(undefined);
+    const state = HoldemState.load();
+
+    assert.equal(HoldemState.loadFailed, false);
+    assert.ok(Array.isArray(state.seats));
+});
+
+test("a good save loads and reports nothing", () => {
+    const store = withStored(undefined);
+    const original = HoldemState.createDefault();
+    original.handNumber = 34;
+    HoldemState.save(original);
+
+    const state = HoldemState.load();
+    assert.equal(HoldemState.loadFailed, false);
+    assert.equal(state.handNumber, 34);
+    assert.equal(store.has(HoldemState.RECOVERY_KEY), false);
+});
+
+test("a truncated save is reported rather than silently becoming an empty table", () => {
+    const good = JSON.stringify(HoldemState.createDefault());
+    withStored(good.slice(0, Math.floor(good.length * 0.7)));
+
+    const state = HoldemState.load();
+    assert.equal(HoldemState.loadFailed, true);
+    assert.ok(Array.isArray(state.seats), "it still hands back a usable table");
+});
+
+test("valid JSON of the wrong shape counts as unreadable too", () => {
+    withStored(JSON.stringify({ hello: "world" }));
+
+    HoldemState.load();
+    assert.equal(HoldemState.loadFailed, true);
+});
+
+test("the unreadable copy is kept instead of being written over", () => {
+    // This is the half that matters: whatever a person could have picked out of the
+    // raw JSON used to be gone the moment the dealer touched a seat.
+    const broken = '{"seats":[{"name":"Ann","stack":250},{"name":"Ben"';
+    const store = withStored(broken);
+
+    HoldemState.load();
+
+    assert.equal(store.get(HoldemState.RECOVERY_KEY), broken);
+});
+
+test("a later save doesn't touch the copy that was set aside", () => {
+    const broken = '{"seats":[{"name":"Ann"';
+    const store = withStored(broken);
+
+    const state = HoldemState.load();
+    state.handNumber = 2;
+    HoldemState.save(state);
+
+    assert.equal(store.get(HoldemState.RECOVERY_KEY), broken);
+    assert.notEqual(store.get(HoldemState.STORAGE_KEY), broken);
+});
+
+test("the listener fires once, not on every read", () => {
+    withStored("{not json");
+    let told = 0;
+    HoldemState.onLoadFailed = () => { told++; };
+
+    HoldemState.load();
+    HoldemState.load();
+    HoldemState.load();
+
+    assert.equal(told, 1);
+});
+
+test("no room to keep the copy is not a crash", () => {
+    // Storage that refuses writes is exactly the storage most likely to hand back a
+    // half-written value in the first place.
+    withStored("{not json", { readOnly: true });
+
+    let state;
+    assert.doesNotThrow(() => { state = HoldemState.load(); });
+    assert.ok(Array.isArray(state.seats));
+    assert.equal(HoldemState.loadFailed, true);
+});

tests/holdem/money.test.js

@@ -96,11 +96,26 @@ describe("the exported CSV", () => {
             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.
+        // Standings rows: the money columns have to be numeric. Named rather than
+        // "everything after the first", which is what this used to say — the row now
+        // ends with a Notes column carrying whatever the dealer typed against the seat,
+        // and that is text by definition. The point of this test is that a column
+        // somebody totals adds up, so it checks the columns somebody totals.
         const standingsStart = lines.findIndex(l => l.startsWith("Player,"));
+        const header = splitRow(lines[standingsStart]);
+        const moneyColumns = ["Paid In", "Won", "Net", "Bought In", "Chips Now", "Up/Down"]
+            .map(name => {
+                const index = header.indexOf(name);
+                assert.ok(index > 0, `the standings header should still have a ${name} column`);
+                return index;
+            });
+
         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`);
+            const cells = splitRow(line);
+            moneyColumns.forEach(index => {
+                const cell = cells[index];
+                assert.ok(cell !== "" && !Number.isNaN(Number(cell)),
+                    `standings cell "${cell}" in column ${header[index]} isn't a number`);
             });
         });
     });

tests/holdem/otherTab.test.js

@@ -0,0 +1,100 @@
+// Noticing that the same table is open twice.
+//
+// Two tabs each hold their own copy in memory and each save writes the whole thing,
+// so the second one to act throws the first one's work away. This doesn't merge them
+// — replacing a table under a dealer's hands mid-hand would be its own hazard — it
+// notices, which is what lets them decide.
+const test = require("node:test");
+const assert = require("node:assert");
+const { HoldemState } = require("./load");
+
+function withWindow() {
+    const listeners = [];
+    globalThis.window = {
+        addEventListener(type, fn) { if (type === "storage") listeners.push(fn); },
+        removeEventListener(type, fn) {
+            const i = listeners.indexOf(fn);
+            if (i >= 0) listeners.splice(i, 1);
+        },
+    };
+    return {
+        listeners,
+        fire(key) { listeners.forEach(fn => fn({ key })); },
+    };
+}
+
+test.beforeEach(() => {
+    HoldemState.otherTabActive = false;
+    HoldemState.onOtherTab = null;
+    HoldemState.tabWatcher = null;
+});
+
+test.after(() => {
+    delete globalThis.window;
+    HoldemState.otherTabActive = false;
+    HoldemState.onOtherTab = null;
+    HoldemState.tabWatcher = null;
+});
+
+test("a write to this table from elsewhere is noticed", () => {
+    const win = withWindow();
+    let told = 0;
+    HoldemState.onOtherTab = () => { told++; };
+    HoldemState.watchOtherTabs();
+
+    win.fire(HoldemState.STORAGE_KEY);
+
+    assert.equal(HoldemState.otherTabActive, true);
+    assert.equal(told, 1);
+});
+
+test("somebody else's storage key is not our business", () => {
+    const win = withWindow();
+    let told = 0;
+    HoldemState.onOtherTab = () => { told++; };
+    HoldemState.watchOtherTabs();
+
+    win.fire("some.other.app.state");
+    win.fire(HoldemState.RECOVERY_KEY);
+
+    assert.equal(HoldemState.otherTabActive, false);
+    assert.equal(told, 0);
+});
+
+test("told once, however many times the other tab acts", () => {
+    const win = withWindow();
+    let told = 0;
+    HoldemState.onOtherTab = () => { told++; };
+    HoldemState.watchOtherTabs();
+
+    for (let i = 0; i < 10; i++) win.fire(HoldemState.STORAGE_KEY);
+
+    assert.equal(told, 1);
+});
+
+test("watching twice doesn't listen twice", () => {
+    const win = withWindow();
+    HoldemState.watchOtherTabs();
+    HoldemState.watchOtherTabs();
+    HoldemState.watchOtherTabs();
+
+    assert.equal(win.listeners.length, 1);
+});
+
+test("no listener set is not an error", () => {
+    const win = withWindow();
+    HoldemState.onOtherTab = null;
+    HoldemState.watchOtherTabs();
+
+    assert.doesNotThrow(() => win.fire(HoldemState.STORAGE_KEY));
+    assert.equal(HoldemState.otherTabActive, true);
+});
+
+test("no window at all is not an error", () => {
+    // The same modules are loaded in Node by the test harness.
+    delete globalThis.window;
+    HoldemState.tabWatcher = null;
+
+    assert.doesNotThrow(() => HoldemState.watchOtherTabs());
+    assert.equal(HoldemState.otherTabActive, false);
+});

tests/holdem/tankClock.test.js

@@ -0,0 +1,37 @@
+// How the think-clock reads.
+const test = require("node:test");
+const assert = require("node:assert");
+const path = require("path");
+
+const ActionBar = require(path.join(
+    __dirname, "..", "..", "JoshHeaps.Net", "wwwroot", "js", "casino", "holdem", "actionBar.js"));
+
+test("seconds under a minute", () => {
+    assert.equal(ActionBar.formatTank(0), "0:00");
+    assert.equal(ActionBar.formatTank(7), "0:07");
+    assert.equal(ActionBar.formatTank(59), "0:59");
+});
+
+test("minutes and seconds", () => {
+    assert.equal(ActionBar.formatTank(60), "1:00");
+    assert.equal(ActionBar.formatTank(241), "4:01");
+    assert.equal(ActionBar.formatTank(3599), "59:59");
+});
+
+test("past the hour it says the hour", () => {
+    // A table left open on a hand reaches this, and "65:03" is a number the eye reads
+    // as minutes and seconds when it isn't.
+    assert.equal(ActionBar.formatTank(3600), "1:00:00");
+    assert.equal(ActionBar.formatTank(3903), "1:05:03");
+    assert.equal(ActionBar.formatTank(45296), "12:34:56");
+});
+
+test("the minutes are padded once there are hours, and not before", () => {
+    // "1:5:03" would be wrong; "05:03" on its own would be odd.
+    assert.equal(ActionBar.formatTank(3903), "1:05:03");
+    assert.equal(ActionBar.formatTank(303), "5:03");
+});
+
+test("a day is still a readable number rather than a wrapped one", () => {
+    assert.equal(ActionBar.formatTank(90000), "25:00:00");
+});

tests/holdem/uiAudit.js

@@ -180,6 +180,12 @@ const LayoutAudit = {
     collapsedColumns() {
         const offenders = [];
         [...document.querySelectorAll("[class*='Row'], [class*='row']")].forEach(row => {
+            // Nothing inside something the page has hidden. A hidden element's children
+            // all measure zero wide, so the standings header — which is hidden along
+            // with its table until somebody has bought in — was reported as three
+            // collapsed columns on every empty table. A column nobody can see hasn't
+            // collapsed; it isn't there.
+            if (row.closest("[hidden]")) return;
             if (getComputedStyle(row).display !== "grid") return;
             [...row.children].forEach(cell => {
                 if (getComputedStyle(cell).display === "none") return;
@@ -343,6 +349,16 @@ const LayoutAudit = {
         });
     },
 
+    // Every element between this one and the document, so an opacity set on a
+    // container can be seen from the text inside it.
+    *ancestors(el) {
+        let node = el.parentElement;
+        while (node) {
+            yield node;
+            node = node.parentElement;
+        }
+    },
+
     contrast({ minimum = 4.5, largeMinimum = 3, selector = null } = {}) {
         const offenders = [];
         const unmeasured = [];
@@ -352,19 +368,50 @@ const LayoutAudit = {
             : [...document.querySelectorAll("*")];
 
         nodes.forEach(el => {
-            if (el.children.length > 0) return;               // leaf text only
-            const text = (el.textContent || "").trim();
+            // An element's *own* text, not its descendants' — they get measured on
+            // their own turn, against their own colour.
+            //
+            // This used to be "leaf elements only", which quietly stopped measuring
+            // anything the moment a child was added to it. The undo control went that
+            // way the day a <kbd> was appended to it: its label became invisible to
+            // this check, with no sign that anything had changed.
+            const text = [...el.childNodes]
+                .filter(node => node.nodeType === 3)
+                .map(node => node.textContent)
+                .join(" ")
+                .trim();
             if (!text) return;
             const rect = el.getBoundingClientRect();
             if (rect.width === 0 || rect.height === 0) return;
             const style = getComputedStyle(el);
             if (style.visibility === "hidden" || style.display === "none") return;
-            if (parseFloat(style.opacity) < 0.99) return;     // faded on purpose
-            // Decoration is exempt by definition: the watermark on the felt is meant
-            // to be barely there, and holding it to a reading threshold would mean
-            // making it not a watermark. Marked aria-hidden so screen readers skip it
-            // too, which is the same claim expressed where it also does some good.
-            if (el.closest("[aria-hidden='true']")) return;
+            // Faded text used to be skipped outright as "faded on purpose", and that
+            // exemption hid a real fault: the folded and sat-out seats dimmed their
+            // whole box with opacity, so a folded player's stack measured 2.22:1 at
+            // 11.5px and this check never looked at it. Something invisible is still
+            // exempt — there's nothing to read at zero — but anything in between is
+            // reported as unmeasured rather than passed over in silence, because a
+            // number nobody checked is not the same as a number that's fine.
+            const opacity = parseFloat(style.opacity);
+            if (opacity <= 0.02) return;
+            const faded = opacity < 0.99 ||
+                [...this.ancestors(el)].some(a => parseFloat(getComputedStyle(a).opacity) < 0.99);
+            if (faded) {
+                unmeasured.push(`${this.describe(el)} :: faded (opacity ${opacity}), contrast not checked`);
+                return;
+            }
+            // aria-hidden used to exempt text here, on the grounds that decoration
+            // marked for screen readers was decoration for everyone. Those are two
+            // different questions and the answer differs: the bet chips on the felt are
+            // aria-hidden because their amounts are already announced by the seat and
+            // the action bar, and repeating them would be noise — but they are exactly
+            // what a sighted dealer reads the felt for, and this check had stopped
+            // looking at them. Hiding something from one audience is not a claim about
+            // whether the other audience can read it.
+            //
+            // Nothing is exempt now. If something genuinely decorative turns up, it
+            // should say so in its own words rather than borrowing an attribute that
+            // means something else.
 
             const fgRaw = this.parseColour(style.color);
             if (!fgRaw) return;