jheapsandClaude Opus 5
a488bbf832
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
119 lines
4.7 KiB
JavaScript
119 lines
4.7 KiB
JavaScript
// 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"));
|
|
});
|
|
});
|