Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
  jheapsandClaude Opus 5
|
b97453fba1 | ||
|
jheapsandClaude Opus 5
|
419852a1f4 |
@@ -155,6 +155,17 @@
|
||||
<button id="exportHistoryBtn" class="holdemBtn holdemBtnSmall">Export CSV</button>
|
||||
<button id="clearHistoryBtn" class="holdemBtn holdemBtnSmall holdemBtnDanger">Clear history</button>
|
||||
</div>
|
||||
|
||||
<h3 class="panelSubhead">The table itself</h3>
|
||||
<p class="fieldHint">
|
||||
The night lives in this browser and nowhere else. Save it to a file to carry it
|
||||
to another device, or to have something to come back to if this one dies.
|
||||
</p>
|
||||
<div class="handHistoryActions">
|
||||
<button id="saveTableBtn" class="holdemBtn holdemBtnSmall">Save table file</button>
|
||||
<button id="loadTableBtn" class="holdemBtn holdemBtnSmall">Load table file</button>
|
||||
<input id="loadTableInput" type="file" accept="application/json,.json" hidden />
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
|
||||
@@ -3247,11 +3247,18 @@ body.hasActionBar #toastHost {
|
||||
why a seat's centre belonged to its neighbour.
|
||||
|
||||
Landscape has width and no height, so the table takes the width it has and
|
||||
is only as tall as the room left over. */
|
||||
--feltRoom: calc(100vh - var(--actionBarHeight, 0px) - 7rem);
|
||||
is only as tall as the room left over.
|
||||
|
||||
The height comes from --feltRoomPx, the same measured value the wide layout
|
||||
caps its width by: the bar's real height, the wrap's real offset and the
|
||||
bottom seat's overhang, all taken off the window. This branch used to work
|
||||
it out itself as `100vh - bar - 7rem`, guessing that everything above the
|
||||
felt came to 7rem. It comes to 108px at 640x360, which the guess covers, and
|
||||
119px at 844x390, which it doesn't — so on an iPhone on its side the bottom
|
||||
three seats sat up to 26px inside the action bar. Nothing here needs to
|
||||
guess; the measurement was already being published. */
|
||||
width: 100%;
|
||||
height: var(--feltRoom);
|
||||
min-height: 7rem;
|
||||
height: var(--feltRoomPx, calc(100vh - var(--actionBarHeight, 0px) - 7rem));
|
||||
/* This branch sets its own height outright, so neither the aspect ratio nor the
|
||||
cap derived from it has anything to say here — and the cap would only narrow
|
||||
a table that is already as short as the screen allows. */
|
||||
@@ -3259,16 +3266,55 @@ body.hasActionBar #toastHost {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
/* The page's own top padding is 32px of nothing, on the screen that has the least
|
||||
to spare. */
|
||||
#holdemApp {
|
||||
padding-top: 0.5rem;
|
||||
}
|
||||
|
||||
/* The header ate 148px of a 390px-tall window, which was most of the reason the
|
||||
table started below the fold. Here it only needs to be a title bar. */
|
||||
table started below the fold. Here it only needs to be a title bar.
|
||||
|
||||
It still wrapped to two rows, and that second row is 44px of the 390 — the title
|
||||
block and the five buttons came to 829px inside a 765px header at 844x390, so
|
||||
they missed sharing one line by 64px, and at 640x360 by rather more. What goes is
|
||||
the page title: the one thing on this screen a dealer already knows. It is hidden
|
||||
from the eye rather than removed, so the page keeps its heading for a screen
|
||||
reader and for the browser's own outline. The hand number stays — nothing else on
|
||||
the screen says which hand this is. */
|
||||
#holdemHeader {
|
||||
margin-bottom: 0.4rem;
|
||||
gap: 0.35rem;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#holdemHeader h1 {
|
||||
font-size: 1.05rem;
|
||||
padding-bottom: 0.15rem;
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
clip-path: inset(50%);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.handCounterBadge {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
/* Tightened across, never down: the buttons keep the 44px a thumb needs. */
|
||||
#holdemHeaderActions {
|
||||
flex-wrap: nowrap;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
#holdemHeaderActions .holdemBtn {
|
||||
padding-left: 0.55rem;
|
||||
padding-right: 0.55rem;
|
||||
font-size: 0.78rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.holdemSubtitle {
|
||||
|
||||
@@ -53,7 +53,14 @@ const ActionBar = {
|
||||
// moving the seats, and getting a different answer on the next pass.
|
||||
SEAT_OVERHANG_PX: 37,
|
||||
FELT_GAP_PX: 8,
|
||||
FELT_MIN_PX: 220,
|
||||
// The floor is a guard against a measurement that has gone wrong — not a size the
|
||||
// window has agreed to hand over. It used to be 220px, which a phone on its side
|
||||
// hasn't got: at 844x390 there are 99px between the header and the bar, and holding
|
||||
// out for 220 is how the bottom row of seats came to sit 26px inside the Fold
|
||||
// button. A floor that puts seats behind the bar defeats the one thing the floor is
|
||||
// for, so it drops to the smallest felt still worth drawing and the measurement
|
||||
// wins above it.
|
||||
FELT_FLOOR_PX: 96,
|
||||
|
||||
// How tall the felt can be and still leave the whole ring of seats above the bar.
|
||||
//
|
||||
@@ -66,14 +73,22 @@ const ActionBar = {
|
||||
//
|
||||
// The wrap's offset is taken in document space rather than viewport space, so
|
||||
// scrolling the page doesn't resize the table under the dealer's hands.
|
||||
feltRoomFor(windowHeight, barHeight, topInDocument) {
|
||||
const room = windowHeight - barHeight - topInDocument -
|
||||
this.SEAT_OVERHANG_PX - this.FELT_GAP_PX;
|
||||
return Math.max(this.FELT_FLOOR_PX, Math.round(room));
|
||||
},
|
||||
|
||||
publishFeltRoom(barHeight) {
|
||||
const wrap = document.getElementById("pokerTableWrap");
|
||||
if (!wrap) return;
|
||||
// Taking the top before the height is set matters: the wrap sits below the
|
||||
// header in normal flow, so its own height never moves its top and this can't
|
||||
// chase itself around the screen.
|
||||
const topInDocument = wrap.getBoundingClientRect().top + window.scrollY;
|
||||
const room = window.innerHeight - barHeight - topInDocument -
|
||||
this.SEAT_OVERHANG_PX - this.FELT_GAP_PX;
|
||||
document.documentElement.style.setProperty(
|
||||
"--feltRoomPx", `${Math.max(this.FELT_MIN_PX, Math.round(room))}px`);
|
||||
"--feltRoomPx",
|
||||
`${this.feltRoomFor(window.innerHeight, barHeight, topInDocument)}px`);
|
||||
},
|
||||
|
||||
// Anything to act on? A hand with nobody dealt in doesn't get a bar — and that
|
||||
|
||||
@@ -598,6 +598,72 @@ document.addEventListener("DOMContentLoaded", () => {
|
||||
Toast.show("Hand history cleared.", { duration: 2500 });
|
||||
});
|
||||
|
||||
document.getElementById("saveTableBtn").addEventListener("click", () => {
|
||||
const blob = new Blob([HoldemState.toBackup(state)], { type: "application/json" });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const link = document.createElement("a");
|
||||
link.href = url;
|
||||
link.download = HoldemState.backupFileName();
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
URL.revokeObjectURL(url);
|
||||
Toast.show(`Table saved as ${link.download}.`, { duration: 3500 });
|
||||
});
|
||||
|
||||
document.getElementById("loadTableBtn").addEventListener("click", () => {
|
||||
document.getElementById("loadTableInput").click();
|
||||
});
|
||||
|
||||
document.getElementById("loadTableInput").addEventListener("change", async e => {
|
||||
const file = e.target.files && e.target.files[0];
|
||||
// Cleared straight away so picking the same file twice still fires a change.
|
||||
e.target.value = "";
|
||||
if (!file) return;
|
||||
|
||||
let text;
|
||||
try {
|
||||
text = await file.text();
|
||||
} catch {
|
||||
Toast.show("That file couldn't be read.", { duration: 4000 });
|
||||
return;
|
||||
}
|
||||
|
||||
const result = HoldemState.fromBackup(text);
|
||||
if (result.error) {
|
||||
Toast.show(result.error, { duration: 5000 });
|
||||
return;
|
||||
}
|
||||
|
||||
// Loading replaces everything: stacks, buy-ins, the button, the log. Naming
|
||||
// what is about to be lost is the difference between a dealer choosing that
|
||||
// and discovering it — and the current table might be the live one.
|
||||
const here = HoldemState.sessionStandings(state).length;
|
||||
const incoming = HoldemState.sessionStandings(result.table).length;
|
||||
const when = result.savedAt ? new Date(result.savedAt) : null;
|
||||
const saidWhen = when && !Number.isNaN(when.getTime())
|
||||
? ` It was saved ${when.toLocaleString()}.`
|
||||
: "";
|
||||
const ok = await Dialog.confirm({
|
||||
title: "Replace this table?",
|
||||
message:
|
||||
`The file has a table with ${incoming} ${incoming === 1 ? "player" : "players"} in it.${saidWhen} ` +
|
||||
`Loading it replaces the table on screen — ${here} ${here === 1 ? "player" : "players"}, ` +
|
||||
`${(state.handHistory || []).length} logged ${(state.handHistory || []).length === 1 ? "hand" : "hands"}. ` +
|
||||
`Undo will bring it back for a few seconds; after that it is gone.`,
|
||||
confirmLabel: "Load it",
|
||||
danger: true,
|
||||
});
|
||||
if (!ok) return;
|
||||
|
||||
runUndoable("loading a saved table", () => {
|
||||
// Replace the contents rather than the reference: everything on the page
|
||||
// holds a pointer to this object.
|
||||
Object.keys(state).forEach(key => { delete state[key]; });
|
||||
Object.assign(state, result.table);
|
||||
});
|
||||
});
|
||||
|
||||
// The filter is how the dealer looks at the log, not something about the table, so
|
||||
// it lives on the view: it isn't saved, isn't undoable, and doesn't reach the other
|
||||
// tab. Clearing the history clears it too, since there is nothing left to filter.
|
||||
|
||||
@@ -82,26 +82,100 @@ const Render = {
|
||||
|
||||
// ---- Seats around the table (compact pucks) ----
|
||||
|
||||
seatPosition(index, count) {
|
||||
return this.positionOnRing(index, count, 44, 42);
|
||||
seatPosition(index, count, aspect = this.feltAspect()) {
|
||||
return this.positionOnRing(index, count, 44, 42, aspect);
|
||||
},
|
||||
|
||||
// How many times wider than tall the felt actually is, which is the one thing the
|
||||
// ring needs from the layout and can't work out from percentages. Falls back to a
|
||||
// circle when there's nothing to measure — the same answer the ring gave before it
|
||||
// asked.
|
||||
feltAspect() {
|
||||
if (typeof document === "undefined") return 1;
|
||||
const wrap = document.getElementById("pokerTableWrap");
|
||||
if (!wrap) return 1;
|
||||
const box = wrap.getBoundingClientRect();
|
||||
if (!box.width || !box.height) return 1;
|
||||
return box.width / box.height;
|
||||
},
|
||||
|
||||
// Bets sit on the felt between their player and the pot, the way chips actually
|
||||
// do — closer in than the seats, on the same spoke. The bets layer is inset to
|
||||
// match the seat ring (see the CSS), so this one radius holds at every size.
|
||||
betPosition(index, count) {
|
||||
return this.positionOnRing(index, count, 27, 25);
|
||||
//
|
||||
// The angle is the seat's own rather than one walked again round a tighter ellipse.
|
||||
// The two answers are within half a degree of each other, so this is not a fix for
|
||||
// anything visible — it is just the honest way to say "on that player's spoke",
|
||||
// and it saves the second walk.
|
||||
betPosition(index, count, aspect = this.feltAspect()) {
|
||||
const angle = this.ringAngles(count, 44, 42, aspect)[index];
|
||||
return { left: 50 + 27 * Math.cos(angle), top: 50 + 25 * Math.sin(angle) };
|
||||
},
|
||||
|
||||
positionOnRing(index, count, rx, ry) {
|
||||
const angle = -90 + (360 / count) * index;
|
||||
const radians = (angle * Math.PI) / 180;
|
||||
// Seats spaced evenly around the rim — by the distance between them, not by the
|
||||
// angle they sit at.
|
||||
//
|
||||
// Equal angles are only equal spacing on a circle. The felt is an ellipse, and a
|
||||
// phone on its side makes it a very flat one: 601x126 at 640x360. Ten seats at 36°
|
||||
// apart then put four of them down each steep side, where 36° of turn is barely any
|
||||
// distance — seats 3 and 4 came out at the same x and 20px apart vertically, each
|
||||
// puck 72px tall. Their centres landed on each other, so tapping a player got their
|
||||
// neighbour, and the layout audit had been calling it at 640x360 and 667x375.
|
||||
//
|
||||
// Walking the perimeter instead puts the seats where a real table has them: along
|
||||
// the two long rails, one at each end. The arc length is summed numerically because
|
||||
// an ellipse's has no closed form — 720 steps is far more than enough for a rim a
|
||||
// few hundred pixels long, and it runs once per render.
|
||||
positionOnRing(index, count, rx, ry, aspect = 1) {
|
||||
const target = this.ringAngles(count, rx, ry, aspect)[index];
|
||||
return {
|
||||
left: 50 + rx * Math.cos(radians),
|
||||
top: 50 + ry * Math.sin(radians),
|
||||
left: 50 + rx * Math.cos(target),
|
||||
top: 50 + ry * Math.sin(target),
|
||||
};
|
||||
},
|
||||
|
||||
RING_STEPS: 720,
|
||||
ringCache: {},
|
||||
|
||||
// The angles that cut the rim into `count` equal lengths, starting at the top.
|
||||
// Every seat on a ring wants the same answer, so it is worked out once per shape
|
||||
// and kept — the ring only changes when the table is resized or the window is.
|
||||
ringAngles(count, rx, ry, aspect) {
|
||||
if (count <= 0) return [];
|
||||
const key = `${count}:${rx}:${ry}:${aspect.toFixed(3)}`;
|
||||
if (this.ringCache[key]) return this.ringCache[key];
|
||||
|
||||
const start = -Math.PI / 2;
|
||||
// Percentages of the width and of the height are not the same distance, so the
|
||||
// horizontal radius is scaled into the vertical one's units before measuring.
|
||||
const a = rx * aspect;
|
||||
const b = ry;
|
||||
const step = (2 * Math.PI) / this.RING_STEPS;
|
||||
const cumulative = [0];
|
||||
for (let i = 1; i <= this.RING_STEPS; i++) {
|
||||
const from = start + (i - 1) * step;
|
||||
const to = start + i * step;
|
||||
const dx = a * (Math.cos(to) - Math.cos(from));
|
||||
const dy = b * (Math.sin(to) - Math.sin(from));
|
||||
cumulative.push(cumulative[i - 1] + Math.hypot(dx, dy));
|
||||
}
|
||||
|
||||
const perimeter = cumulative[this.RING_STEPS];
|
||||
const angles = [];
|
||||
let walked = 0;
|
||||
for (let seat = 0; seat < count; seat++) {
|
||||
const wanted = (perimeter * seat) / count;
|
||||
while (walked < this.RING_STEPS && cumulative[walked + 1] < wanted) walked++;
|
||||
// Interpolate inside the step the seat falls in, so the answer doesn't
|
||||
// jump in 0.5° increments.
|
||||
const spanned = cumulative[walked + 1] - cumulative[walked];
|
||||
const into = spanned > 0 ? (wanted - cumulative[walked]) / spanned : 0;
|
||||
angles.push(start + (walked + into) * step);
|
||||
}
|
||||
this.ringCache[key] = angles;
|
||||
return angles;
|
||||
},
|
||||
|
||||
// Colour a bet by the biggest chip that fits it, so a table with a chip legend
|
||||
// gets bets that look like the chips actually being pushed out.
|
||||
chipColorFor(amount) {
|
||||
|
||||
@@ -164,13 +164,18 @@ const HoldemState = {
|
||||
return this.createDefault();
|
||||
},
|
||||
|
||||
load() {
|
||||
let raw = null;
|
||||
try {
|
||||
raw = localStorage.getItem(this.STORAGE_KEY);
|
||||
if (!raw) return this.createDefault();
|
||||
const parsed = JSON.parse(raw);
|
||||
if (!parsed || !Array.isArray(parsed.seats)) return this.failedLoad(raw);
|
||||
// Everything a table has to be put through before it can be trusted, whichever
|
||||
// direction it arrived from.
|
||||
//
|
||||
// Pulled out of load() so a table read from a file goes through exactly the same
|
||||
// checks as one read from storage. A second, looser path for imports is how a
|
||||
// format grows two meanings of the same field.
|
||||
//
|
||||
// Returns null for anything that isn't a table at all; every other repair is
|
||||
// silent and forward, the way a save from an older version is treated.
|
||||
migrate(parsed) {
|
||||
if (!parsed || !Array.isArray(parsed.seats)) return null;
|
||||
{
|
||||
if (typeof parsed.handNumber !== "number" || parsed.handNumber < 1) parsed.handNumber = 1;
|
||||
if (!Array.isArray(parsed.handHistory)) parsed.handHistory = [];
|
||||
if (typeof parsed.discarded !== "number" || !(parsed.discarded >= 0)) parsed.discarded = 0;
|
||||
@@ -215,12 +220,85 @@ const HoldemState = {
|
||||
});
|
||||
|
||||
return parsed;
|
||||
}
|
||||
},
|
||||
|
||||
load() {
|
||||
let raw = null;
|
||||
try {
|
||||
raw = localStorage.getItem(this.STORAGE_KEY);
|
||||
if (!raw) return this.createDefault();
|
||||
const migrated = this.migrate(JSON.parse(raw));
|
||||
if (!migrated) return this.failedLoad(raw);
|
||||
return migrated;
|
||||
} catch {
|
||||
// Malformed JSON — a truncated write, another tab, a browser hiccup.
|
||||
return this.failedLoad(raw);
|
||||
}
|
||||
},
|
||||
|
||||
// ---- Taking the table off this device ------------------------------------
|
||||
//
|
||||
// A night lives in one browser's localStorage and nowhere else. A dealer whose
|
||||
// phone dies, or who wants to carry on from the tablet after the break, loses the
|
||||
// stacks, the buy-ins, where the button is and the whole hand log — and the CSV
|
||||
// export can't bring any of that back, because it records what happened rather
|
||||
// than where the table stands.
|
||||
//
|
||||
// So the table can be written out as a file and read back in. Same shape that goes
|
||||
// into storage, wrapped in enough to recognise it later.
|
||||
BACKUP_KIND: "casino.holdem.table",
|
||||
BACKUP_VERSION: 1,
|
||||
|
||||
toBackup(state) {
|
||||
return JSON.stringify({
|
||||
kind: this.BACKUP_KIND,
|
||||
version: this.BACKUP_VERSION,
|
||||
savedAt: new Date().toISOString(),
|
||||
table: state,
|
||||
}, null, 2);
|
||||
},
|
||||
|
||||
// Reads a file back. Returns { table } on success, or { error } with something a
|
||||
// dealer can act on — never a half-loaded table, because the failure mode there is
|
||||
// a night that looks restored and isn't.
|
||||
fromBackup(text) {
|
||||
let parsed;
|
||||
try {
|
||||
parsed = JSON.parse(text);
|
||||
} catch {
|
||||
return { error: "That file isn't a saved table — it couldn't be read as JSON." };
|
||||
}
|
||||
if (!parsed || typeof parsed !== "object") {
|
||||
return { error: "That file isn't a saved table." };
|
||||
}
|
||||
// A bare table, from someone who copied the storage value out by hand, is
|
||||
// still a table. The envelope is a convenience, not a password.
|
||||
const table = parsed.kind === this.BACKUP_KIND || parsed.table ? parsed.table : parsed;
|
||||
if (parsed.kind && parsed.kind !== this.BACKUP_KIND) {
|
||||
return { error: "That file is a save from something else, not a Hold'em table." };
|
||||
}
|
||||
const migrated = this.migrate(table);
|
||||
if (!migrated) {
|
||||
return { error: "That file doesn't have a table in it — no seats were found." };
|
||||
}
|
||||
if (parsed.version > this.BACKUP_VERSION) {
|
||||
// Newer than this build understands. Loading it anyway risks reading a
|
||||
// field that has changed meaning, and the dealer would find out from the
|
||||
// money, so say so instead.
|
||||
return { error: "That table was saved by a newer version of this tool. Update, then load it." };
|
||||
}
|
||||
return { table: migrated, savedAt: parsed.savedAt || null };
|
||||
},
|
||||
|
||||
// What the file is called. Dated, because a dealer who saves twice in a night
|
||||
// should not have to guess which is which.
|
||||
backupFileName(now = new Date()) {
|
||||
const pad = n => String(n).padStart(2, "0");
|
||||
return `holdem-table-${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(now.getDate())}` +
|
||||
`-${pad(now.getHours())}${pad(now.getMinutes())}.json`;
|
||||
},
|
||||
|
||||
// True once a save has failed. The UI reads this to keep saying so, because a
|
||||
// toast is a moment and this is a fact about the rest of the night.
|
||||
saveFailed: false,
|
||||
|
||||
@@ -0,0 +1,73 @@
|
||||
// How tall the felt is allowed to be.
|
||||
//
|
||||
// The bar is fixed to the bottom of the screen and grows with the hand, so the table
|
||||
// has to be told what is left. Everything below is the arithmetic that decides it —
|
||||
// the part that can be wrong without anyone noticing until a seat is behind the Fold
|
||||
// button.
|
||||
const test = require("node:test");
|
||||
const { describe } = require("node:test");
|
||||
const assert = require("node:assert");
|
||||
const { ActionBar } = require("./load");
|
||||
|
||||
// window height, bar height, and how far down the page the felt starts.
|
||||
const room = (windowHeight, barHeight, top) => ActionBar.feltRoomFor(windowHeight, barHeight, top);
|
||||
|
||||
describe("the room left for the felt", () => {
|
||||
test("is what the window has after the bar, the header and the bottom seat", () => {
|
||||
const reserved = ActionBar.SEAT_OVERHANG_PX + ActionBar.FELT_GAP_PX;
|
||||
assert.equal(room(900, 127, 146), 900 - 127 - 146 - reserved);
|
||||
});
|
||||
|
||||
test("shrinks when the bar grows mid-hand", () => {
|
||||
// Side pots make the bar taller exactly when the dealer most needs to see who
|
||||
// is still in.
|
||||
const quiet = room(900, 117, 146);
|
||||
const sidePots = room(900, 172, 146);
|
||||
assert.equal(quiet - sidePots, 55);
|
||||
});
|
||||
|
||||
test("leaves the bottom seat's overhang out of it", () => {
|
||||
// The seat pucks hang below the felt's edge; the felt has to stop short by that
|
||||
// much or the ring ends up in the bar even though the felt doesn't.
|
||||
assert.ok(ActionBar.SEAT_OVERHANG_PX > 30, "half a puck");
|
||||
assert.ok(room(900, 127, 146) < 900 - 127 - 146);
|
||||
});
|
||||
});
|
||||
|
||||
describe("a window too short to give what was asked", () => {
|
||||
// A phone on its side: 390px tall, 127px of that is the bar and 119px is
|
||||
// everything above the felt. What's left is under 100.
|
||||
const landscape = () => room(390, 127, 119);
|
||||
|
||||
test("gets the measurement, not a comfortable number", () => {
|
||||
// The floor used to be 220px, which this window hasn't got. Holding out for it
|
||||
// put the bottom row of seats 26px inside the action bar — the exact fault the
|
||||
// measurement exists to prevent.
|
||||
assert.ok(landscape() < 150, `${landscape()}px`);
|
||||
assert.ok(landscape() + 119 + 127 <= 390, "the felt still ends above the bar");
|
||||
});
|
||||
|
||||
test("still draws a table rather than a line", () => {
|
||||
assert.equal(ActionBar.feltRoomFor(200, 160, 100), ActionBar.FELT_FLOOR_PX);
|
||||
assert.equal(ActionBar.feltRoomFor(0, 0, 0), ActionBar.FELT_FLOOR_PX);
|
||||
});
|
||||
|
||||
test("never returns something a browser can't lay out", () => {
|
||||
[[390, 300, 200], [100, 90, 90], [-10, 0, 0]].forEach(([h, bar, top]) => {
|
||||
const answer = ActionBar.feltRoomFor(h, bar, top);
|
||||
assert.ok(Number.isFinite(answer) && answer > 0, `${h}/${bar}/${top} gave ${answer}`);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("a window with room to spare", () => {
|
||||
test("hands over everything that's left, floor or no floor", () => {
|
||||
const reserved = ActionBar.SEAT_OVERHANG_PX + ActionBar.FELT_GAP_PX;
|
||||
assert.equal(room(1000, 127, 146), 1000 - 127 - 146 - reserved);
|
||||
assert.equal(room(1366, 120, 206), 1366 - 120 - 206 - reserved);
|
||||
});
|
||||
|
||||
test("gives a whole number of pixels", () => {
|
||||
assert.equal(room(844.4, 127.6, 223.2) % 1, 0);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,147 @@
|
||||
// Where the seats sit on the rim.
|
||||
//
|
||||
// The ring used to space seats by angle, which is only the same as spacing them evenly
|
||||
// when the felt is a circle. On a phone held sideways the felt is 601x126, and equal
|
||||
// angles put four seats down each steep end, 20px apart, with pucks 72px tall — so a
|
||||
// seat's centre belonged to its neighbour and tapping a player got the wrong one.
|
||||
const test = require("node:test");
|
||||
const { describe } = require("node:test");
|
||||
const assert = require("node:assert");
|
||||
const { Render } = require("./load");
|
||||
|
||||
// The seats as a dealer sees them: pixels on a felt of a given size.
|
||||
const ringPixels = (count, width, height, rx = 44, ry = 42) => {
|
||||
const aspect = width / height;
|
||||
return Array.from({ length: count }, (_, i) => {
|
||||
const pos = Render.positionOnRing(i, count, rx, ry, aspect);
|
||||
return { x: (pos.left / 100) * width, y: (pos.top / 100) * height };
|
||||
});
|
||||
};
|
||||
|
||||
const gaps = (points) => points.map((p, i) => {
|
||||
const next = points[(i + 1) % points.length];
|
||||
return Math.hypot(next.x - p.x, next.y - p.y);
|
||||
});
|
||||
|
||||
// What the ring did before: one turn cut into equal angles.
|
||||
const byAngle = (index, count, rx, ry) => {
|
||||
const radians = ((-90 + (360 / count) * index) * Math.PI) / 180;
|
||||
return { left: 50 + rx * Math.cos(radians), top: 50 + ry * Math.sin(radians) };
|
||||
};
|
||||
|
||||
describe("a round table", () => {
|
||||
test("still spaces seats by angle, because on a circle that is the same thing", () => {
|
||||
for (let seat = 0; seat < 9; seat++) {
|
||||
const now = Render.positionOnRing(seat, 9, 40, 40, 1);
|
||||
const before = byAngle(seat, 9, 40, 40);
|
||||
assert.ok(Math.abs(now.left - before.left) < 0.2, `seat ${seat} left`);
|
||||
assert.ok(Math.abs(now.top - before.top) < 0.2, `seat ${seat} top`);
|
||||
}
|
||||
});
|
||||
|
||||
test("seat one is at the top, whatever shape the felt is", () => {
|
||||
[[600, 600], [601, 126], [351, 351], [949, 683]].forEach(([w, h]) => {
|
||||
const first = Render.positionOnRing(0, 10, 44, 42, w / h);
|
||||
assert.ok(Math.abs(first.left - 50) < 0.01, `${w}x${h} left`);
|
||||
assert.ok(first.top < 50, `${w}x${h} is above the middle`);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("a felt wider than it is tall", () => {
|
||||
// 640x360 landscape: the size the audit was failing at.
|
||||
const wide = () => ringPixels(10, 601, 126);
|
||||
|
||||
const byAnglePixels = () => Array.from({ length: 10 }, (_, i) => {
|
||||
const pos = byAngle(i, 10, 44, 42);
|
||||
return { x: (pos.left / 100) * 601, y: (pos.top / 100) * 126 };
|
||||
});
|
||||
|
||||
// The two seats at the right-hand end, which is where they crowd.
|
||||
const endPairApart = (seats) => {
|
||||
const rightmost = [...seats].sort((a, b) => b.x - a.x).slice(0, 2);
|
||||
return Math.abs(rightmost[0].y - rightmost[1].y);
|
||||
};
|
||||
|
||||
test("pulls the pair at each end apart", () => {
|
||||
// They still share the end — ten seats on a rim this flat have nowhere else to
|
||||
// be — but they stop sitting on top of each other.
|
||||
const now = endPairApart(wide());
|
||||
const before = endPairApart(byAnglePixels());
|
||||
assert.ok(now > before * 1.4, `${now.toFixed(1)}px now, ${before.toFixed(1)}px before`);
|
||||
});
|
||||
|
||||
test("nearly doubles the room between the closest two neighbours", () => {
|
||||
// Not equal spacing in a straight line — at the ends the rim turns back on
|
||||
// itself, so the same walk along it covers less ground across. Even there the
|
||||
// gap goes from a third of a puck to most of one.
|
||||
const now = Math.min(...gaps(wide()));
|
||||
const before = Math.min(...gaps(byAnglePixels()));
|
||||
assert.ok(now > before * 1.7, `${now.toFixed(1)}px now, ${before.toFixed(1)}px before`);
|
||||
assert.ok(now > 55, `${now.toFixed(1)}px`);
|
||||
});
|
||||
|
||||
test("never sits two seats on the same spot", () => {
|
||||
const seats = wide();
|
||||
seats.forEach((seat, i) => {
|
||||
seats.slice(i + 1).forEach((other, j) => {
|
||||
const apart = Math.hypot(seat.x - other.x, seat.y - other.y);
|
||||
assert.ok(apart > 50, `seats ${i + 1} and ${i + j + 2} are ${apart.toFixed(1)}px apart`);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("the shape of the ring", () => {
|
||||
test("is a mirror image left to right", () => {
|
||||
const seats = ringPixels(10, 601, 126);
|
||||
for (let seat = 1; seat < 5; seat++) {
|
||||
const mirrored = seats[10 - seat];
|
||||
assert.ok(Math.abs((seats[seat].x - 300.5) + (mirrored.x - 300.5)) < 0.5, `seat ${seat} across`);
|
||||
assert.ok(Math.abs(seats[seat].y - mirrored.y) < 0.5, `seat ${seat} down`);
|
||||
}
|
||||
});
|
||||
|
||||
test("holds for the smallest and largest tables the seat count allows", () => {
|
||||
[2, 3, 4, 9, 12, 24].forEach(count => {
|
||||
const seats = ringPixels(count, 601, 126);
|
||||
assert.equal(seats.length, count);
|
||||
seats.forEach((seat, i) => {
|
||||
assert.ok(Number.isFinite(seat.x) && Number.isFinite(seat.y), `${count}-handed seat ${i + 1}`);
|
||||
assert.ok(seat.x >= 0 && seat.x <= 601, `${count}-handed seat ${i + 1} is on the felt`);
|
||||
});
|
||||
assert.ok(Math.min(...gaps(seats)) > 0, `${count}-handed seats are distinct`);
|
||||
});
|
||||
});
|
||||
|
||||
test("shares the rim out equally on a round table at any size", () => {
|
||||
[3, 6, 9, 10, 24].forEach(count => {
|
||||
const spacing = gaps(ringPixels(count, 500, 500, 40, 40));
|
||||
const shortest = Math.min(...spacing);
|
||||
const longest = Math.max(...spacing);
|
||||
assert.ok(longest - shortest < 0.5,
|
||||
`${count}-handed gaps ran ${shortest.toFixed(1)}-${longest.toFixed(1)}px`);
|
||||
});
|
||||
});
|
||||
|
||||
test("asked for no seats, offers no positions", () => {
|
||||
assert.deepEqual(Render.ringAngles(0, 44, 42, 1), []);
|
||||
});
|
||||
|
||||
test("puts each bet between its own player and the pot", () => {
|
||||
// Where a dealer pushes the chips: on that player's line to the middle, short
|
||||
// of the seat.
|
||||
const bearing = (point) => Math.atan2(point.top - 50, point.left - 50);
|
||||
const outFromMiddle = (point) => Math.hypot(point.left - 50, point.top - 50);
|
||||
|
||||
[[601, 126], [810, 583], [351, 351]].forEach(([w, h]) => {
|
||||
for (let seat = 0; seat < 9; seat++) {
|
||||
const player = Render.seatPosition(seat, 9, w / h);
|
||||
const bet = Render.betPosition(seat, 9, w / h);
|
||||
const offBy = Math.abs(bearing(bet) - bearing(player)) * (180 / Math.PI);
|
||||
assert.ok(offBy < 1, `${w}x${h} seat ${seat + 1} is ${offBy.toFixed(1)}° off its spoke`);
|
||||
assert.ok(outFromMiddle(bet) < outFromMiddle(player), `${w}x${h} seat ${seat + 1} is short of the seat`);
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,155 @@
|
||||
// Taking the table off this device.
|
||||
//
|
||||
// A night lives in one browser's localStorage and nowhere else. A dealer whose phone
|
||||
// dies, or who wants to carry on from the tablet after the break, loses the stacks,
|
||||
// the buy-ins, where the button is and the whole hand log — and the CSV export can't
|
||||
// bring any of that back, because it records what happened rather than where the
|
||||
// table stands.
|
||||
const test = require("node:test");
|
||||
const { describe } = require("node:test");
|
||||
const assert = require("node:assert");
|
||||
const { HoldemState, Betting, makeTable } = require("./load");
|
||||
|
||||
const aNight = () => {
|
||||
const state = makeTable({ seatCount: 9, seated: [0, 1, 2, 3], stack: 200, dealerSeatIndex: 1 });
|
||||
["Ann", "Ben", "Cal", "Dee"].forEach((name, i) => {
|
||||
state.seats[i].name = name;
|
||||
state.seats[i].buyIns = 200;
|
||||
});
|
||||
state.seats[2].stack = 340;
|
||||
state.notes = "Cal owes the bar $12";
|
||||
Betting.beginHand(state);
|
||||
HoldemState.recordHand(state, [{ id: state.seats[2].id, label: "Cal", amount: 60 }]);
|
||||
return state;
|
||||
};
|
||||
|
||||
describe("a table written out and read back", () => {
|
||||
test("comes back the same table", () => {
|
||||
const before = aNight();
|
||||
const after = HoldemState.fromBackup(HoldemState.toBackup(before)).table;
|
||||
|
||||
assert.deepEqual(after.seats.map(p => p.name), before.seats.map(p => p.name));
|
||||
assert.deepEqual(after.seats.map(p => p.stack), before.seats.map(p => p.stack));
|
||||
assert.deepEqual(after.seats.map(p => p.buyIns), before.seats.map(p => p.buyIns));
|
||||
assert.equal(after.dealerSeatIndex, before.dealerSeatIndex);
|
||||
assert.equal(after.handNumber, before.handNumber);
|
||||
assert.equal(after.notes, before.notes);
|
||||
assert.equal(after.handHistory.length, before.handHistory.length);
|
||||
});
|
||||
|
||||
test("keeps the things a CSV can't carry", () => {
|
||||
// The whole reason this exists: an export records what happened, not where the
|
||||
// table stands.
|
||||
const before = aNight();
|
||||
const after = HoldemState.fromBackup(HoldemState.toBackup(before)).table;
|
||||
|
||||
assert.equal(after.bettingOpen, before.bettingOpen, "a hand in progress is still in progress");
|
||||
assert.deepEqual(after.postedBlinds, before.postedBlinds, "so the next rotation is right");
|
||||
assert.equal(after.street, before.street);
|
||||
assert.deepEqual(after.seats.map(p => p.committed), before.seats.map(p => p.committed));
|
||||
assert.deepEqual(after.chipLegend, before.chipLegend);
|
||||
});
|
||||
|
||||
test("the standings and the bank check agree across the trip", () => {
|
||||
const before = aNight();
|
||||
const after = HoldemState.fromBackup(HoldemState.toBackup(before)).table;
|
||||
|
||||
assert.deepEqual(HoldemState.sessionStandings(after), HoldemState.sessionStandings(before));
|
||||
assert.deepEqual(HoldemState.bankReconciliation(after), HoldemState.bankReconciliation(before));
|
||||
});
|
||||
|
||||
test("it can be dealt from straight away", () => {
|
||||
const before = aNight();
|
||||
HoldemState.startNextHand(before);
|
||||
const after = HoldemState.fromBackup(HoldemState.toBackup(before)).table;
|
||||
|
||||
Betting.beginHand(after);
|
||||
assert.equal(after.bettingOpen, true);
|
||||
assert.ok(after.actingSeatIndex !== null, "somebody is on the clock");
|
||||
});
|
||||
});
|
||||
|
||||
describe("what it refuses", () => {
|
||||
const refuses = (text, because) => {
|
||||
const result = HoldemState.fromBackup(text);
|
||||
assert.ok(result.error, because);
|
||||
assert.equal(result.table, undefined, "and never hands back half a table");
|
||||
};
|
||||
|
||||
test("something that isn't JSON", () => {
|
||||
refuses("not a file", "unreadable");
|
||||
refuses("", "empty");
|
||||
});
|
||||
|
||||
test("JSON that isn't a table", () => {
|
||||
refuses('{"hello":"world"}', "no seats in it");
|
||||
refuses("[1,2,3]", "an array of nothing");
|
||||
refuses("null", "null");
|
||||
});
|
||||
|
||||
test("a save from something else that happens to be JSON", () => {
|
||||
refuses('{"kind":"some.other.tool","table":{"seats":[]}}', "wrong kind");
|
||||
});
|
||||
|
||||
test("a file from a newer version, rather than guessing at it", () => {
|
||||
// Loading it risks reading a field whose meaning has changed, and the dealer
|
||||
// would find out from the money.
|
||||
const backup = JSON.parse(HoldemState.toBackup(aNight()));
|
||||
backup.version = HoldemState.BACKUP_VERSION + 1;
|
||||
const result = HoldemState.fromBackup(JSON.stringify(backup));
|
||||
assert.match(result.error, /newer version/i);
|
||||
});
|
||||
});
|
||||
|
||||
describe("what it accepts anyway", () => {
|
||||
test("a bare table, with no envelope around it", () => {
|
||||
// Somebody who copied the storage value out by hand. The envelope is a
|
||||
// convenience, not a password.
|
||||
const state = aNight();
|
||||
const result = HoldemState.fromBackup(JSON.stringify(state));
|
||||
assert.ok(!result.error);
|
||||
assert.deepEqual(result.table.seats.map(p => p.name), state.seats.map(p => p.name));
|
||||
});
|
||||
|
||||
test("a table from before fields that exist now, migrated on the way in", () => {
|
||||
// Same repairs a save from an older version gets, because it is the same
|
||||
// function — a second, looser path for imports is how a format grows two
|
||||
// meanings of the same field.
|
||||
const state = aNight();
|
||||
const raw = JSON.parse(JSON.stringify(state));
|
||||
delete raw.deadButton;
|
||||
delete raw.postedBlinds;
|
||||
delete raw.dealtLastHand;
|
||||
delete raw.discarded;
|
||||
raw.seats.forEach(p => { delete p.buyIns; });
|
||||
|
||||
const { table, error } = HoldemState.fromBackup(JSON.stringify({
|
||||
kind: HoldemState.BACKUP_KIND, version: 1, table: raw,
|
||||
}));
|
||||
assert.ok(!error);
|
||||
assert.equal(table.deadButton, false);
|
||||
assert.deepEqual(table.dealtLastHand, []);
|
||||
assert.equal(table.discarded, 0);
|
||||
assert.equal(table.seats[0].buyIns, 0);
|
||||
});
|
||||
|
||||
test("the time it was saved comes back with it", () => {
|
||||
const result = HoldemState.fromBackup(HoldemState.toBackup(aNight()));
|
||||
assert.ok(result.savedAt, "so the dealer can tell two files apart");
|
||||
assert.ok(!Number.isNaN(new Date(result.savedAt).getTime()));
|
||||
});
|
||||
});
|
||||
|
||||
describe("the file itself", () => {
|
||||
test("is named with the date and time, so two saves in a night are told apart", () => {
|
||||
const at = new Date(2026, 8, 2, 21, 5);
|
||||
assert.equal(HoldemState.backupFileName(at), "holdem-table-2026-09-02-2105.json");
|
||||
});
|
||||
|
||||
test("says what it is, for anyone finding it in a downloads folder", () => {
|
||||
const parsed = JSON.parse(HoldemState.toBackup(aNight()));
|
||||
assert.equal(parsed.kind, "casino.holdem.table");
|
||||
assert.equal(parsed.version, 1);
|
||||
assert.ok(parsed.table.seats.length > 0);
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user