jheapsandClaude Opus 5
1c2e716508
The round before this found the bank check and the standings reading a seat's own
stack where the felt reads the table's starting stack — two parts of the tool
disagreeing about how much money was on the table. That was worth a sweep, and
the sweep found more.
The colour-up panel had the same fault. It is the panel that says "count out
2×$100 for this player", and on a table opened the ordinary way — a starting
stack and some names — it showed nothing at all. The one table where every stack
is a round number made of the largest chips there are was the table it had
nothing to say about.
The other question, "is anybody in this chair", existed in four spellings: in the
seat count, in the seat menu twice, in the waiting list, and twice more in the
state module. Three of them looked at name, chips and cash; one also looked at a
hand being dealt. A chair that counts as occupied for one and empty for another
is how somebody's chips get given away — measured, a seat marked in hand with no
name and no stack yet was on offer to the next person in the waiting queue, on
top of whoever was already playing it.
Both questions now have one implementation and one name:
"What is this seat holding?" HoldemState.chipsHeldBy
"Is anybody in this chair?" HoldemState.seatInPlay
10 new tests, including one that pins the bank check, the standings and the
settle-up plan to the same total, and one that pins the seat count and the open
seats to the same set of empty chairs. The occupancy test was cut back to its old
three-part form on purpose to confirm the waiting-list case fails.
Co-Authored-By: Claude Opus 5 <[email protected]>
Claude-Session: https://claude.ai/code/session_015bnp7xKUPFFSpwkYNFaPgb
1445 lines
68 KiB
JavaScript
1445 lines
68 KiB
JavaScript
// All DOM rendering + drag/drop for the table. Talks to the outside world only through
|
||
// the `hooks` object passed to mount(): hooks.save(state) persists, hooks.rerender()
|
||
// re-draws everything (used after structural changes like resizing seats or the chip
|
||
// legend).
|
||
//
|
||
// The table itself only shows compact seat "pucks" — name, cards, total, blind/dealer
|
||
// badges — because a full data-entry form (chip counts, custom fields, etc.) doesn't fit
|
||
// next to nine others arranged in a circle at any screen size. Clicking a puck opens the
|
||
// full form in the seat editor panel instead.
|
||
const Render = {
|
||
state: null,
|
||
hooks: null,
|
||
selectedSeatIndex: null,
|
||
|
||
mount(state, hooks) {
|
||
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();
|
||
},
|
||
|
||
renderAll() {
|
||
if (this.selectedSeatIndex !== null && this.selectedSeatIndex >= this.state.seatCount) {
|
||
this.selectedSeatIndex = null;
|
||
}
|
||
this.renderSeats();
|
||
this.renderSeatEditor();
|
||
this.renderChipLegend();
|
||
this.renderNotes();
|
||
this.updatePotBadge();
|
||
this.renderSetupFields();
|
||
this.renderHeaderActions();
|
||
this.renderTableHint();
|
||
this.renderStandings();
|
||
this.renderHandHistory();
|
||
if (typeof ActionBar !== "undefined" && ActionBar.state) ActionBar.render();
|
||
},
|
||
|
||
renderSetupFields() {
|
||
document.getElementById("seatCountInput").value = this.state.seatCount;
|
||
document.getElementById("directionSelect").value = this.state.direction;
|
||
document.getElementById("basePotInput").value = this.state.basePotAmount ?? "";
|
||
document.getElementById("dedicatedDealerToggle").checked = !!this.state.dedicatedDealer;
|
||
document.getElementById("smallBlindInput").value = this.state.smallBlind ?? "";
|
||
document.getElementById("bigBlindInput").value = this.state.bigBlind ?? "";
|
||
document.getElementById("defaultStackInput").value = this.state.defaultStack ?? "";
|
||
|
||
const rake = this.state.rake || {};
|
||
document.getElementById("rakePercentInput").value = rake.percent || "";
|
||
document.getElementById("rakeCapInput").value = rake.cap ?? "";
|
||
document.getElementById("rakeNoFlopInput").checked = rake.noFlopNoDrop !== false;
|
||
|
||
// What the house has actually taken tonight, said where the rake is set rather
|
||
// than only in the bank check — a dealer who changes the percentage mid-session
|
||
// wants to see the running total right there.
|
||
const taken = Math.max(0, Number(this.state.rakeTaken) || 0);
|
||
const hint = document.getElementById("rakeTakenHint");
|
||
hint.hidden = taken <= 0;
|
||
if (taken > 0) hint.textContent = `Taken so far tonight: ${Money.format(taken)}.`;
|
||
},
|
||
|
||
// Misdeal is only a thing you can call on a hand that is out. Before the deal there
|
||
// is nothing to take back, and afterwards the header would be offering to unwind a
|
||
// hand that has already been paid — so the button comes and goes with the hand
|
||
// rather than sitting there all night waiting to be pressed by accident.
|
||
renderHeaderActions() {
|
||
const misdeal = document.getElementById("misdealBtn");
|
||
if (!misdeal) return;
|
||
misdeal.hidden = !this.state.bettingOpen;
|
||
},
|
||
|
||
// Whether this device can actually drag a seat. HTML5 drag events are never
|
||
// generated from a touch screen, so on a phone the last clause of the hint below
|
||
// described something impossible — on the device the rest of the sentence was
|
||
// written for. Touch gets told about the menu route instead, which works.
|
||
canDragSeats() {
|
||
return typeof matchMedia !== "function" || matchMedia("(hover: hover)").matches;
|
||
},
|
||
|
||
renderTableHint() {
|
||
const hint = document.getElementById("tableHint");
|
||
// Gestures are invisible until someone tells you about them, and this is the
|
||
// only place on the table with room to say so.
|
||
hint.textContent = this.canDragSeats()
|
||
? "Tap a seat to edit · double-tap to fold · press and hold for quick actions · drag to swap seats."
|
||
: "Tap a seat to edit · double-tap to fold · press and hold for quick actions, including moving a seat.";
|
||
},
|
||
|
||
renderNotes() {
|
||
const notesEl = document.getElementById("tableNotes");
|
||
if (document.activeElement !== notesEl) notesEl.value = this.state.notes || "";
|
||
},
|
||
|
||
updatePotBadge() {
|
||
// Chips still sitting in front of players on the current street are part of
|
||
// the pot as far as anyone at the table is concerned, so count them — waiting
|
||
// until the street closes would show a stale number for most of every hand.
|
||
const swept = HoldemState.totalPot(this.state);
|
||
const onStreet = this.state.seats.reduce((sum, p) => sum + Betting.committed(p), 0);
|
||
document.getElementById("potBadgeAmount").textContent = Money.format(swept + onStreet);
|
||
},
|
||
|
||
// ---- Seats around the table (compact pucks) ----
|
||
|
||
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() {
|
||
const box = this.ringBox();
|
||
return box ? box.width / box.height : 1;
|
||
},
|
||
|
||
// The box a seat's left/top percentages actually resolve against. Not the felt: on
|
||
// a phone the seat layer is inset by half a puck so the outermost seats don't hang
|
||
// off the screen, and measuring the felt instead put the ring's shape out by that
|
||
// inset — twelve seats at 640x360 were computed 90px apart and drawn 60px apart,
|
||
// which is the difference between "fine" and "overlapping".
|
||
ringBox() {
|
||
if (typeof document === "undefined") return null;
|
||
const layer = document.getElementById("seatsLayer") || document.getElementById("pokerTableWrap");
|
||
if (!layer) return null;
|
||
const box = layer.getBoundingClientRect();
|
||
return box.width && box.height ? box : null;
|
||
},
|
||
|
||
// 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.
|
||
//
|
||
// 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 seat = this.seatPosition(index, count, aspect);
|
||
return {
|
||
left: 50 + (seat.left - 50) * (27 / 44),
|
||
top: 50 + (seat.top - 50) * (25 / 42),
|
||
};
|
||
},
|
||
|
||
// 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) {
|
||
return this.ringPositions(count, rx, ry, aspect)[index];
|
||
},
|
||
|
||
// Past this much wider than tall, the rim stops being an ellipse and becomes a
|
||
// stadium — two straight rails with a semicircular cap at each end.
|
||
//
|
||
// An ellipse that flat has nowhere to put the seats near its ends. At 640x360 with
|
||
// the bar grown by a side pot the felt is 616x96, and six seats came out with two
|
||
// of them stacked 25px apart at each end, pucks 64px tall. No puck size fixes 25px:
|
||
// the shape is wrong. A stadium's cap is a half-circle of the felt's own height, so
|
||
// an end holds one seat and the rest of the table is rail — which is how a real
|
||
// poker table is built, and why it is shaped that way.
|
||
//
|
||
// Only where it is needed. Anything rounder than this keeps the ellipse it has
|
||
// always had: measured, the cut-off lands between a landscape phone (4.4 and up)
|
||
// and every other layout the tool has (1.45 at 1280x900, 1.0 to 1.4 on a phone
|
||
// upright), so no currently-working table changes shape.
|
||
STADIUM_RATIO: 2.5,
|
||
|
||
// Seats spaced evenly around whichever rim this table has, as percentages.
|
||
ringPositions(count, rx, ry, aspect = 1) {
|
||
if (count <= 0) return [];
|
||
const halfWidth = rx * aspect;
|
||
const halfHeight = ry;
|
||
if (halfWidth <= halfHeight * this.STADIUM_RATIO) {
|
||
return this.ringAngles(count, rx, ry, aspect).map(angle => ({
|
||
left: 50 + rx * Math.cos(angle),
|
||
top: 50 + ry * Math.sin(angle),
|
||
}));
|
||
}
|
||
return this.stadiumPositions(count, halfWidth, halfHeight, aspect);
|
||
},
|
||
|
||
// The same walk, around a stadium instead. Its perimeter has a closed form, so
|
||
// this needs no sampling: two rails of 2(A-B) and two caps of piB.
|
||
stadiumPositions(count, halfWidth, halfHeight, aspect) {
|
||
const rail = halfWidth - halfHeight;
|
||
const cap = Math.PI * halfHeight;
|
||
const perimeter = 4 * rail + 2 * cap;
|
||
|
||
return Array.from({ length: count }, (_, seat) => {
|
||
// Clockwise from the top centre, so seat one sits where it always has.
|
||
let walked = (perimeter * seat) / count;
|
||
let x;
|
||
let y;
|
||
if (walked <= rail) { // top rail, going right
|
||
x = walked;
|
||
y = -halfHeight;
|
||
} else if (walked <= rail + cap) { // right cap
|
||
const turned = (walked - rail) / halfHeight;
|
||
x = rail + halfHeight * Math.sin(turned);
|
||
y = -halfHeight * Math.cos(turned);
|
||
} else if (walked <= 3 * rail + cap) { // bottom rail, going left
|
||
x = rail - (walked - rail - cap);
|
||
y = halfHeight;
|
||
} else if (walked <= 3 * rail + 2 * cap) { // left cap
|
||
const turned = (walked - 3 * rail - cap) / halfHeight;
|
||
x = -rail - halfHeight * Math.sin(turned);
|
||
y = halfHeight * Math.cos(turned);
|
||
} else { // top rail, back to the start
|
||
x = -rail + (walked - 3 * rail - 2 * cap);
|
||
y = -halfHeight;
|
||
}
|
||
return { left: 50 + x / aspect, top: 50 + y };
|
||
});
|
||
},
|
||
|
||
RING_STEPS: 720,
|
||
ringCache: {},
|
||
|
||
// The closest two neighbouring seats come to each other, straight line, in pixels.
|
||
//
|
||
// Rim length divided by seat count was the first answer and it is the wrong one:
|
||
// it measures the walk between two seats rather than the gap between them, and on
|
||
// a flat ellipse those are nothing alike. At 640x360 six seats had 193px of rim
|
||
// each and sat 56px apart, because at the ends of a long oval the rim doubles back
|
||
// and two seats a long walk apart are stacked one above the other.
|
||
closestSeatGapPx(count, box = this.ringBox()) {
|
||
if (count < 2 || !box || !box.width || !box.height) return Infinity;
|
||
|
||
const points = this.ringPositions(count, 44, 42, box.width / box.height).map(seat => ({
|
||
x: (seat.left / 100) * box.width,
|
||
y: (seat.top / 100) * box.height,
|
||
}));
|
||
return points.reduce((closest, point, i) => {
|
||
const next = points[(i + 1) % points.length];
|
||
return Math.min(closest, Math.hypot(point.x - next.x, point.y - next.y));
|
||
}, Infinity);
|
||
},
|
||
|
||
// A puck is 76px across, so neighbours whose centres are closer than that overlap
|
||
// by definition; a few pixels more keeps them from touching. Under it the pucks
|
||
// come down a size rather than the table pretending it has room it hasn't.
|
||
SEAT_ROOM_PX: 84,
|
||
|
||
// Called on every render and again whenever the felt is resized — the action bar
|
||
// growing mid-hand shortens the table, and the seats have to answer that without
|
||
// waiting for the next render to come along.
|
||
updateSeatDensity() {
|
||
const layer = document.getElementById("seatsLayer");
|
||
if (!layer || !this.state) return;
|
||
layer.classList.toggle("seatsTight",
|
||
this.closestSeatGapPx(this.state.seatCount) < this.SEAT_ROOM_PX);
|
||
},
|
||
|
||
// 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) {
|
||
const legend = [...(this.state.chipLegend || [])]
|
||
.filter(chip => Number(chip.value) > 0)
|
||
.sort((a, b) => Number(b.value) - Number(a.value));
|
||
const match = legend.find(chip => amount >= Number(chip.value));
|
||
return (match || legend[legend.length - 1] || {}).color || "#8a8a8a";
|
||
},
|
||
|
||
// ---- Bets on the felt ----
|
||
|
||
makeBetChip(bet) {
|
||
const chip = document.createElement("div");
|
||
chip.className = "betChip";
|
||
|
||
const disc = document.createElement("span");
|
||
disc.className = "betChipDisc";
|
||
disc.style.background = this.chipColorFor(bet);
|
||
|
||
const amount = document.createElement("span");
|
||
amount.className = "betChipAmount";
|
||
amount.textContent = Money.format(bet);
|
||
|
||
chip.appendChild(disc);
|
||
chip.appendChild(amount);
|
||
return chip;
|
||
},
|
||
|
||
// A phone's felt has no room for a third ring: measured every radius between the
|
||
// seats and the pot badge and each one collides with one or the other. So on a
|
||
// narrow screen the bet clings to its own puck instead — same chip, no ring —
|
||
// sitting on whichever side faces the middle of the table.
|
||
renderBets() {
|
||
const layer = document.getElementById("betsLayer");
|
||
if (!layer) return;
|
||
layer.innerHTML = "";
|
||
|
||
const anchorToSeat = window.matchMedia("(max-width: 700px)").matches;
|
||
|
||
this.state.seats.forEach((player, index) => {
|
||
const bet = Betting.committed(player);
|
||
if (bet <= 0) return;
|
||
|
||
const chip = this.makeBetChip(bet);
|
||
const pos = this.betPosition(index, this.state.seatCount);
|
||
|
||
if (anchorToSeat) {
|
||
const seat = document.querySelector(`.seat[data-seat-index="${index}"]`);
|
||
if (!seat) return;
|
||
const seatPos = this.seatPosition(index, this.state.seatCount);
|
||
chip.classList.add("betChipAnchored", seatPos.top > 50 ? "betChipAbove" : "betChipBelow");
|
||
seat.appendChild(chip);
|
||
return;
|
||
}
|
||
|
||
chip.style.left = `${pos.left}%`;
|
||
chip.style.top = `${pos.top}%`;
|
||
layer.appendChild(chip);
|
||
});
|
||
},
|
||
|
||
puckLabel(player, seatIndex) {
|
||
return HoldemState.displayName(player, seatIndex);
|
||
},
|
||
|
||
renderSeats() {
|
||
const layer = document.getElementById("seatsLayer");
|
||
layer.innerHTML = "";
|
||
this.updateSeatDensity();
|
||
const template = document.getElementById("seatTemplate");
|
||
const { dealerIndex, sbIndex, bbIndex, manual: manualBlinds } = HoldemState.getBlindSeats(this.state);
|
||
// A button on an empty chair normally means the table has drifted and wants
|
||
// fixing. Once it's the dead button it means the opposite — it's exactly where
|
||
// it belongs — so it gets marked rather than looking like the thing to correct.
|
||
const deadButtonHere = this.state.deadButton &&
|
||
HoldemState.deadPositionsApply(this.state) &&
|
||
!this.state.seats[dealerIndex].inHand;
|
||
|
||
this.state.seats.forEach((player, index) => {
|
||
const node = template.content.firstElementChild.cloneNode(true);
|
||
const pos = this.seatPosition(index, this.state.seatCount);
|
||
node.style.left = `${pos.left}%`;
|
||
node.style.top = `${pos.top}%`;
|
||
node.dataset.seatIndex = String(index);
|
||
|
||
// Which side of the seat the pot is on, which is the side its bet chip
|
||
// arrives from — the chip sits on the same spoke, closer in. For a seat on
|
||
// the top of the ring that's from below; on the bottom, from above.
|
||
//
|
||
// The blind badge has to be on the other side or the chip lands on top of
|
||
// it. Measured on a 390px phone: the big blind's own $2 chip covered 196 of
|
||
// the badge's 288 square pixels, and it sits a layer higher, so the marker
|
||
// telling the dealer who the big blind is was simply gone.
|
||
node.classList.toggle("seatBelowCentre", pos.top > 50);
|
||
|
||
node.querySelector(".seatChairNumber").textContent = index + 1;
|
||
|
||
const dealerChip = node.querySelector(".dealerChip");
|
||
const hasButton = index === dealerIndex;
|
||
dealerChip.classList.toggle("active", hasButton);
|
||
dealerChip.classList.toggle("hidden", !!this.state.dedicatedDealer);
|
||
// Every one of these announced itself as "D", so a screen reader heard a row
|
||
// of nine identical buttons and couldn't tell which seat held the real one.
|
||
// The label now says whose it is, or what pressing it would do.
|
||
const who = (player.name || "").trim() || `seat ${index + 1}`;
|
||
dealerChip.classList.toggle("dealerChipDead", hasButton && deadButtonHere);
|
||
const chipLabel = hasButton
|
||
? (deadButtonHere
|
||
? `Dead button on empty seat ${index + 1} — its player left out of the blinds`
|
||
: `${who} has the dealer button`)
|
||
: `Give the dealer button to ${who}`;
|
||
dealerChip.setAttribute("aria-label", chipLabel);
|
||
dealerChip.title = chipLabel;
|
||
// 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.hooks.onGiveButton(index);
|
||
});
|
||
|
||
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);
|
||
|
||
// A straddle is a blind too, and the seat wearing it is the one the action
|
||
// comes back to. Marked from what the deal actually posted rather than from
|
||
// the count, so the badge can't outlive the chips it stands for — before
|
||
// the cards there is nothing out there yet.
|
||
const straddleBadge = node.querySelector(".strBadge");
|
||
const straddled = (this.state.postedStraddles || []).includes(index);
|
||
straddleBadge.classList.toggle("visible", this.state.bettingOpen && straddled);
|
||
|
||
this.updatePuckContent(node, player, index);
|
||
node.classList.toggle("seatSelected", index === this.selectedSeatIndex);
|
||
|
||
this.wireSeatGestures(node, index);
|
||
this.wireDragAndDrop(node, index);
|
||
|
||
layer.appendChild(node);
|
||
});
|
||
|
||
this.renderBets();
|
||
},
|
||
|
||
isRedSuit(card) {
|
||
return /[HD]$/i.test(card || "");
|
||
},
|
||
|
||
SUIT_SYMBOLS: { S: "♠", H: "♥", D: "♦", C: "♣" },
|
||
|
||
// "KD" -> "K♦". Stored cards stay two plain characters so every existing reader
|
||
// keeps working; the suit only becomes a symbol on its way to a human.
|
||
formatCard(card) {
|
||
const value = (card || "").toUpperCase();
|
||
if (!value) return "";
|
||
return `${value[0]}${this.SUIT_SYMBOLS[value[1]] || value[1] || ""}`;
|
||
},
|
||
|
||
// An empty slot has to look like something you can tap, so it gets a placeholder
|
||
// rather than going blank.
|
||
paintCardSlot(slot, card) {
|
||
const value = (card || "").toUpperCase();
|
||
slot.classList.toggle("cardRed", this.isRedSuit(value));
|
||
slot.classList.toggle("cardSlotEmpty", !value);
|
||
slot.textContent = value ? this.formatCard(value) : "＋";
|
||
},
|
||
|
||
// A chair nobody has claimed: no name typed, not dealt in, nothing in the pot.
|
||
// Worth calling out, because at a short-handed table the open seats are what
|
||
// the dealer is looking for.
|
||
isEmptySeat(player) {
|
||
const named = !!(player.name && player.name.trim());
|
||
const contributing =
|
||
HoldemState.computeContribution(player, this.state.chipLegend, this.state.basePotAmount) > 0;
|
||
return !named && !player.inHand && !contributing;
|
||
},
|
||
|
||
updatePuckContent(node, player, index) {
|
||
const empty = this.isEmptySeat(player);
|
||
const nameEl = node.querySelector(".seatPuckName");
|
||
nameEl.textContent = empty ? "Empty" : (player.name || "").trim();
|
||
nameEl.classList.toggle("seatEmptyLabel", empty);
|
||
|
||
const cardsEl = node.querySelector(".seatPuckCards");
|
||
cardsEl.innerHTML = "";
|
||
(player.cards || []).filter(Boolean).forEach((card, i) => {
|
||
if (i > 0) cardsEl.appendChild(document.createTextNode(" "));
|
||
const span = document.createElement("span");
|
||
if (this.isRedSuit(card)) span.className = "cardRed";
|
||
span.textContent = this.formatCard(card);
|
||
cardsEl.appendChild(span);
|
||
});
|
||
// Always this player's total for the hand. What they've just pushed out on this
|
||
// street is shown as a chip on the felt instead — the puck used to flip between
|
||
// the two meanings depending on the moment, which is a bad thing for a number
|
||
// sitting next to a stack size to do.
|
||
const handTotal = Betting.handTotal(player);
|
||
const total = handTotal > 0
|
||
? handTotal
|
||
: HoldemState.computeContribution(player, this.state.chipLegend, this.state.basePotAmount);
|
||
const totalEl = node.querySelector(".seatPuckTotal");
|
||
totalEl.textContent = total > 0 ? Money.format(total) : "";
|
||
this.fitAmount(totalEl);
|
||
|
||
// A player with nothing behind used to leave this line blank, so the felt drew
|
||
// an all-in exactly like a seat whose stack nobody had entered. On a table with
|
||
// side pots that's the one distinction the dealer is working from — who can
|
||
// still be bet at, and who is already committed for everything they have.
|
||
const stackEl = node.querySelector(".seatPuckStack");
|
||
const stack = Betting.stackOf(this.state, player);
|
||
const allIn = Betting.isAllIn(this.state, player);
|
||
stackEl.textContent = empty ? "" : allIn ? "ALL IN" : stack > 0 ? Money.format(stack) : "";
|
||
stackEl.classList.toggle("seatPuckAllIn", allIn);
|
||
this.fitAmount(stackEl);
|
||
|
||
node.classList.toggle("seatAllIn", allIn);
|
||
node.classList.toggle("seatActing", index === this.state.actingSeatIndex);
|
||
node.classList.toggle("seatEmpty", empty);
|
||
node.classList.toggle("seatInactive", !player.inHand && !empty);
|
||
node.classList.toggle("seatFolded", player.folded);
|
||
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) {
|
||
const node = document.querySelector(`.seat[data-seat-index="${index}"]`);
|
||
if (node) this.updatePuckContent(node, this.state.seats[index], index);
|
||
},
|
||
|
||
// ---- Seat gestures ----
|
||
//
|
||
// One puck, three intents: tap to edit, double-tap to fold, press and hold for
|
||
// the quick menu. The single tap waits out the double-tap window before it
|
||
// fires — a fifth of a second of latency on opening a form, in exchange for a
|
||
// fold that doesn't also fling a sheet up over the table.
|
||
|
||
LONG_PRESS_MS: 500,
|
||
DOUBLE_TAP_MS: 220,
|
||
DRAG_SLOP_PX: 8,
|
||
pendingTap: null,
|
||
|
||
wireSeatGestures(node, index) {
|
||
let longPressTimer = null;
|
||
let longPressFired = false;
|
||
let startX = 0;
|
||
let startY = 0;
|
||
|
||
const cancelLongPress = () => {
|
||
if (longPressTimer) {
|
||
clearTimeout(longPressTimer);
|
||
longPressTimer = null;
|
||
}
|
||
};
|
||
|
||
node.addEventListener("pointerdown", e => {
|
||
longPressFired = false;
|
||
startX = e.clientX;
|
||
startY = e.clientY;
|
||
cancelLongPress();
|
||
longPressTimer = setTimeout(() => {
|
||
longPressTimer = null;
|
||
longPressFired = true;
|
||
this.cancelPendingTap();
|
||
node.classList.remove("seatPressing");
|
||
this.hooks.onSeatLongPress(index);
|
||
}, this.LONG_PRESS_MS);
|
||
node.classList.add("seatPressing");
|
||
});
|
||
|
||
// Moving means they're dragging the seat, not holding it.
|
||
node.addEventListener("pointermove", e => {
|
||
if (Math.abs(e.clientX - startX) > this.DRAG_SLOP_PX || Math.abs(e.clientY - startY) > this.DRAG_SLOP_PX) {
|
||
cancelLongPress();
|
||
node.classList.remove("seatPressing");
|
||
}
|
||
});
|
||
|
||
["pointerup", "pointercancel", "pointerleave"].forEach(type => {
|
||
node.addEventListener(type, () => {
|
||
cancelLongPress();
|
||
node.classList.remove("seatPressing");
|
||
});
|
||
});
|
||
node.addEventListener("dragstart", () => {
|
||
cancelLongPress();
|
||
this.cancelPendingTap();
|
||
node.classList.remove("seatPressing");
|
||
});
|
||
|
||
node.addEventListener("click", e => {
|
||
// The long press already did something; don't also treat the release as a tap.
|
||
if (longPressFired) {
|
||
longPressFired = false;
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
return;
|
||
}
|
||
this.handleSeatTap(index);
|
||
});
|
||
},
|
||
|
||
cancelPendingTap() {
|
||
if (this.pendingTap) {
|
||
clearTimeout(this.pendingTap.timer);
|
||
this.pendingTap = null;
|
||
}
|
||
},
|
||
|
||
handleSeatTap(index) {
|
||
if (this.pendingTap && this.pendingTap.index === index) {
|
||
this.cancelPendingTap();
|
||
this.hooks.onSeatDoubleTap(index);
|
||
return;
|
||
}
|
||
|
||
this.cancelPendingTap();
|
||
const timer = setTimeout(() => {
|
||
this.pendingTap = null;
|
||
this.toggleSeatEditor(index);
|
||
}, this.DOUBLE_TAP_MS);
|
||
this.pendingTap = { index, timer };
|
||
},
|
||
|
||
// Tapping the open seat again closes it — on a phone the editor is a sheet over
|
||
// the table, and the seat you just tapped is the closest thing to hand for
|
||
// dismissing it.
|
||
toggleSeatEditor(index) {
|
||
this.selectedSeatIndex = this.selectedSeatIndex === index ? null : index;
|
||
this.renderSeats();
|
||
this.renderSeatEditor();
|
||
},
|
||
|
||
wireDragAndDrop(node, index) {
|
||
node.addEventListener("dragstart", e => {
|
||
e.dataTransfer.setData("text/plain", String(index));
|
||
e.dataTransfer.effectAllowed = "move";
|
||
node.classList.add("dragging");
|
||
});
|
||
node.addEventListener("dragend", () => node.classList.remove("dragging"));
|
||
node.addEventListener("dragover", e => {
|
||
e.preventDefault();
|
||
node.classList.add("dropTarget");
|
||
});
|
||
node.addEventListener("dragleave", () => node.classList.remove("dropTarget"));
|
||
node.addEventListener("drop", e => {
|
||
e.preventDefault();
|
||
node.classList.remove("dropTarget");
|
||
const sourceIndex = Number(e.dataTransfer.getData("text/plain"));
|
||
const targetIndex = index;
|
||
if (Number.isNaN(sourceIndex) || sourceIndex === targetIndex) return;
|
||
const seats = this.state.seats;
|
||
[seats[sourceIndex], seats[targetIndex]] = [seats[targetIndex], seats[sourceIndex]];
|
||
this.hooks.save(this.state);
|
||
this.renderSeats();
|
||
if (this.selectedSeatIndex === sourceIndex || this.selectedSeatIndex === targetIndex) {
|
||
this.renderSeatEditor();
|
||
}
|
||
});
|
||
},
|
||
|
||
// ---- Seat editor panel (the full form for whichever seat is selected) ----
|
||
|
||
closeSeatEditor() {
|
||
this.selectedSeatIndex = null;
|
||
this.renderSeats();
|
||
this.renderSeatEditor();
|
||
},
|
||
|
||
renderSeatEditor() {
|
||
const title = document.getElementById("seatEditorTitle");
|
||
const body = document.getElementById("seatEditorBody");
|
||
|
||
// Drives the mobile bottom sheet: the panel only slides up over the table
|
||
// while a seat is actually being edited.
|
||
document.body.classList.toggle("seatSheetOpen", this.selectedSeatIndex !== null);
|
||
|
||
if (this.selectedSeatIndex === null) {
|
||
title.textContent = "Select a seat";
|
||
body.innerHTML = '<p class="fieldHint">Click a seat at the table to edit their name, cards, chips and anything else.</p>';
|
||
return;
|
||
}
|
||
|
||
const index = this.selectedSeatIndex;
|
||
const player = this.state.seats[index];
|
||
title.textContent = this.puckLabel(player, index);
|
||
|
||
body.innerHTML = "";
|
||
const template = document.getElementById("seatEditorTemplate");
|
||
const form = template.content.firstElementChild.cloneNode(true);
|
||
|
||
this.wireSeatFields(form, player, index);
|
||
this.renderChipCounts(form, player, index);
|
||
this.renderCustomFields(form, player, index);
|
||
this.renderSeatTotal(form, player);
|
||
|
||
body.appendChild(form);
|
||
},
|
||
|
||
renderSeatTotal(form, player) {
|
||
const total = HoldemState.computeContribution(player, this.state.chipLegend, this.state.basePotAmount);
|
||
form.querySelector(".seatTotalAmount").textContent = Money.format(total);
|
||
},
|
||
|
||
commitSeatChange(form, player, index) {
|
||
this.hooks.save(this.state);
|
||
this.updatePotBadge();
|
||
this.renderSeatTotal(form, player);
|
||
this.refreshPuck(index);
|
||
// The editor deliberately refreshes narrowly rather than redrawing everything —
|
||
// a full render on every keystroke would take the name field out from under the
|
||
// dealer mid-word. But the action bar answers "is there a table here at all",
|
||
// and seating somebody is exactly what changes that answer. Without this it
|
||
// stayed hidden until something else happened to redraw: two players seated, a
|
||
// dealable hand, and a blank bar until the page was reloaded.
|
||
//
|
||
// Safe to do on every keystroke: the bar is small, it's rebuilt on every action
|
||
// anyway, and nothing inside it can hold focus while the sidebar has it.
|
||
if (typeof ActionBar !== "undefined" && ActionBar.state) ActionBar.render();
|
||
},
|
||
|
||
wireSeatFields(form, player, index) {
|
||
const nameInput = form.querySelector(".seatNameInput");
|
||
nameInput.value = player.name;
|
||
nameInput.addEventListener("input", () => {
|
||
// Putting a name on an empty chair is somebody sitting down, so they get
|
||
// dealt in. It used to be two separate acts, and the second one was easy to
|
||
// miss: a dealer setting up typed six names, got six seats that still
|
||
// weren't in the hand, and the action bar hid itself because by its reckoning
|
||
// nobody was playing. Six people at the table and a blank screen.
|
||
//
|
||
// Only for a chair that was empty — no name and not dealt in. Renaming
|
||
// somebody who is sitting out is a correction, not an arrival, and dealing
|
||
// them back in over a typo would be the tool overruling the dealer.
|
||
const wasEmpty = !player.name.trim() && !player.inHand;
|
||
player.name = nameInput.value;
|
||
if (wasEmpty && player.name.trim()) {
|
||
player.inHand = true;
|
||
player.folded = false;
|
||
const inHandBox = form.querySelector(".inHandCheckbox");
|
||
if (inHandBox) inHandBox.checked = true;
|
||
const foldBox = form.querySelector(".foldCheckbox");
|
||
if (foldBox) { foldBox.checked = false; foldBox.disabled = false; }
|
||
}
|
||
document.getElementById("seatEditorTitle").textContent = this.puckLabel(player, index);
|
||
this.commitSeatChange(form, player, index);
|
||
});
|
||
|
||
const inHandCheckbox = form.querySelector(".inHandCheckbox");
|
||
inHandCheckbox.checked = player.inHand;
|
||
inHandCheckbox.addEventListener("change", () => {
|
||
player.inHand = inHandCheckbox.checked;
|
||
if (!player.inHand) player.folded = false;
|
||
foldCheckboxRef.checked = player.folded;
|
||
foldCheckboxRef.disabled = !player.inHand;
|
||
this.commitSeatChange(form, player, index);
|
||
});
|
||
|
||
const foldCheckboxRef = form.querySelector(".foldCheckbox");
|
||
foldCheckboxRef.checked = player.folded;
|
||
foldCheckboxRef.disabled = !player.inHand;
|
||
foldCheckboxRef.addEventListener("change", () => {
|
||
player.folded = foldCheckboxRef.checked;
|
||
this.commitSeatChange(form, player, index);
|
||
});
|
||
|
||
const slots = [form.querySelector(".card1Slot"), form.querySelector(".card2Slot")];
|
||
slots.forEach((slot, cardIdx) => {
|
||
this.paintCardSlot(slot, player.cards[cardIdx]);
|
||
slot.addEventListener("click", () => {
|
||
CardPicker.open(this.state, {
|
||
onPick: (seatIndex, pickedIdx, card) => {
|
||
this.paintCardSlot(slots[pickedIdx], card);
|
||
this.commitSeatChange(form, player, seatIndex);
|
||
},
|
||
}, index, cardIdx);
|
||
});
|
||
});
|
||
|
||
// What they've handed over tonight, shown next to what's in front of them so a
|
||
// cash-out is one subtraction rather than a memory test.
|
||
const boughtIn = Number(player.buyIns) || 0;
|
||
const boughtInEl = form.querySelector(".seatBuyIns");
|
||
boughtInEl.textContent = boughtIn > 0 ? `Bought in ${Money.format(boughtIn)}` : "";
|
||
boughtInEl.hidden = boughtIn <= 0;
|
||
|
||
const stackInput = form.querySelector(".stackInput");
|
||
stackInput.value = player.stack ?? "";
|
||
stackInput.addEventListener("input", () => {
|
||
player.stack = stackInput.value === "" ? null : Number(stackInput.value);
|
||
this.commitSeatChange(form, player, index);
|
||
});
|
||
|
||
const amountInput = form.querySelector(".amountOverrideInput");
|
||
amountInput.value = player.amountOverride ?? "";
|
||
amountInput.addEventListener("input", () => {
|
||
player.amountOverride = amountInput.value === "" ? null : amountInput.value;
|
||
this.commitSeatChange(form, player, index);
|
||
});
|
||
|
||
const addFieldBtn = form.querySelector(".addFieldBtn");
|
||
addFieldBtn.addEventListener("click", () => {
|
||
player.customFields.push({ label: "", value: "" });
|
||
this.renderCustomFields(form, player, index);
|
||
this.hooks.save(this.state);
|
||
});
|
||
},
|
||
|
||
renderChipCounts(form, player, index) {
|
||
const container = form.querySelector(".chipCounts");
|
||
container.innerHTML = "";
|
||
const template = document.getElementById("chipCountTemplate");
|
||
|
||
this.state.chipLegend.forEach(chip => {
|
||
const row = template.content.firstElementChild.cloneNode(true);
|
||
row.querySelector(".chipSwatch").style.background = chip.color;
|
||
row.title = `$${chip.value} chips`;
|
||
const input = row.querySelector(".chipCountInput");
|
||
input.value = player.chipCounts[chip.id] || 0;
|
||
input.addEventListener("input", () => {
|
||
const count = Math.max(0, Math.floor(Number(input.value)) || 0);
|
||
player.chipCounts[chip.id] = count;
|
||
this.commitSeatChange(form, player, index);
|
||
});
|
||
container.appendChild(row);
|
||
});
|
||
},
|
||
|
||
renderCustomFields(form, player, index) {
|
||
const container = form.querySelector(".customFields");
|
||
container.innerHTML = "";
|
||
const template = document.getElementById("customFieldTemplate");
|
||
|
||
player.customFields.forEach((field, fieldIdx) => {
|
||
const row = template.content.firstElementChild.cloneNode(true);
|
||
const labelInput = row.querySelector(".customFieldLabel");
|
||
const valueInput = row.querySelector(".customFieldValue");
|
||
labelInput.value = field.label;
|
||
valueInput.value = field.value;
|
||
labelInput.addEventListener("input", () => {
|
||
field.label = labelInput.value;
|
||
this.hooks.save(this.state);
|
||
});
|
||
valueInput.addEventListener("input", () => {
|
||
field.value = valueInput.value;
|
||
this.hooks.save(this.state);
|
||
});
|
||
row.querySelector(".removeFieldBtn").addEventListener("click", () => {
|
||
player.customFields.splice(fieldIdx, 1);
|
||
this.renderCustomFields(form, player, index);
|
||
this.hooks.save(this.state);
|
||
});
|
||
container.appendChild(row);
|
||
});
|
||
},
|
||
|
||
// ---- Chip legend ----
|
||
|
||
renderChipLegend() {
|
||
const list = document.getElementById("chipLegendList");
|
||
list.innerHTML = "";
|
||
const template = document.getElementById("chipLegendRowTemplate");
|
||
|
||
this.state.chipLegend.forEach(chip => {
|
||
const row = template.content.firstElementChild.cloneNode(true);
|
||
const colorInput = row.querySelector(".chipColorInput");
|
||
const valueInput = row.querySelector(".chipValueInput");
|
||
colorInput.value = chip.color;
|
||
valueInput.value = chip.value;
|
||
|
||
colorInput.addEventListener("input", () => {
|
||
chip.color = colorInput.value;
|
||
this.hooks.save(this.state);
|
||
});
|
||
valueInput.addEventListener("input", () => {
|
||
chip.value = Number(valueInput.value) || 0;
|
||
this.hooks.save(this.state);
|
||
this.renderSeats();
|
||
this.renderSeatEditor();
|
||
this.updatePotBadge();
|
||
});
|
||
row.querySelector(".removeChipColorBtn").addEventListener("click", () => {
|
||
this.state.chipLegend = this.state.chipLegend.filter(c => c.id !== chip.id);
|
||
this.hooks.save(this.state);
|
||
this.renderAll();
|
||
});
|
||
|
||
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;
|
||
|
||
// What each player is holding, asked the same way the felt asks it — which
|
||
// includes the table's starting stack standing in for a seat that has never
|
||
// been given one. Reading `player.stack` here meant that a table opened the
|
||
// ordinary way, with "everyone starts with 200", showed an empty colour-up
|
||
// panel: nobody to count out, at the table where every single stack is a
|
||
// round number made of the largest chips there are.
|
||
const legend = this.state.chipLegend || [];
|
||
const rows = this.state.seats
|
||
.map((player, index) => ({ player, index, held: HoldemState.chipsHeldBy(this.state, player) }))
|
||
.filter(({ held }) => held > 0)
|
||
.map(({ player, index, held }) => ({
|
||
name: HoldemState.displayName(player, index),
|
||
stack: held,
|
||
chips: Money.formatChipBreakdown(held, 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 ----
|
||
|
||
// Shared by the action bar (live, mid-hand) and the pot wizard (before winners are
|
||
// picked), because both are showing the dealer the same announcement.
|
||
buildPotBreakdown(pots, returns, nameFor, heading) {
|
||
if (pots.length < 2 && returns.length === 0) return null;
|
||
|
||
const wrap = document.createElement("div");
|
||
wrap.className = "potBreakdown";
|
||
|
||
if (heading) {
|
||
const title = document.createElement("p");
|
||
title.className = "potBreakdownHeading";
|
||
title.textContent = heading;
|
||
wrap.appendChild(title);
|
||
}
|
||
|
||
const addRow = (label, amount, who, className) => {
|
||
const row = document.createElement("div");
|
||
row.className = `potLayer ${className || ""}`;
|
||
|
||
const labelEl = document.createElement("span");
|
||
labelEl.className = "potLayerLabel";
|
||
labelEl.textContent = label;
|
||
|
||
const amountEl = document.createElement("span");
|
||
amountEl.className = "potLayerAmount";
|
||
amountEl.textContent = Money.format(amount);
|
||
|
||
const whoEl = document.createElement("span");
|
||
whoEl.className = "potLayerWho";
|
||
whoEl.textContent = who;
|
||
|
||
row.appendChild(labelEl);
|
||
row.appendChild(amountEl);
|
||
row.appendChild(whoEl);
|
||
wrap.appendChild(row);
|
||
};
|
||
|
||
pots.forEach(pot => addRow(pot.label, pot.amount, pot.eligible.map(nameFor).join(", ")));
|
||
returns.forEach(ret => addRow("Uncalled", ret.amount, `back to ${nameFor(ret.id)}`, "potLayerReturn"));
|
||
|
||
return wrap;
|
||
},
|
||
|
||
// ---- Session standings ----
|
||
|
||
renderStandings() {
|
||
const list = document.getElementById("standingsList");
|
||
const emptyHint = document.getElementById("standingsEmptyHint");
|
||
const table = document.getElementById("standingsTable");
|
||
const standings = HoldemState.sessionStandings(this.state);
|
||
|
||
list.innerHTML = "";
|
||
emptyHint.hidden = standings.length > 0;
|
||
table.hidden = standings.length === 0;
|
||
|
||
const template = document.getElementById("standingsRowTemplate");
|
||
standings.forEach(row => {
|
||
const node = template.content.firstElementChild.cloneNode(true);
|
||
// Somebody who has gone home is still on the list — they played, and the
|
||
// box took their cash — but the number beside them is money already handed
|
||
// over, not chips waiting to be counted. Marked, or a dealer settling up at
|
||
// 2am pays them twice.
|
||
node.classList.toggle("standingsGone", !!row.cashedOut);
|
||
node.querySelector(".standingsName").textContent = row.cashedOut
|
||
? `${row.name} · paid out`
|
||
: row.name;
|
||
node.querySelector(".standingsIn").textContent = Money.format(row.in);
|
||
node.querySelector(".standingsWon").textContent = Money.format(row.won);
|
||
|
||
const netEl = node.querySelector(".standingsNet");
|
||
netEl.textContent = Money.formatSigned(row.net);
|
||
netEl.classList.toggle("netUp", row.net > 0);
|
||
netEl.classList.toggle("netDown", row.net < 0);
|
||
|
||
// The cash to count out, which is a plain amount and never signed — this
|
||
// is the one the banker's hands follow. It sat only in the CSV: on screen
|
||
// the column headed "Cash out" held the difference against their buy-in
|
||
// instead, so a player up $140 on a $340 stack read as "$140" at the exact
|
||
// moment somebody was counting money onto the table.
|
||
node.querySelector(".standingsChips").textContent = Money.format(row.chipsInFront);
|
||
|
||
// And whether that leaves them up or down, which is the question the rest
|
||
// of the table asks and the one the old column was actually answering.
|
||
const cashEl = node.querySelector(".standingsCashOut");
|
||
cashEl.textContent = Money.formatSigned(row.cashPosition);
|
||
cashEl.classList.toggle("netUp", row.cashPosition > 0);
|
||
cashEl.classList.toggle("netDown", row.cashPosition < 0);
|
||
|
||
list.appendChild(node);
|
||
});
|
||
|
||
this.renderBankReconciliation();
|
||
this.renderSettleUp(standings);
|
||
this.renderWaitingList();
|
||
this.renderStorageWarning();
|
||
},
|
||
|
||
// Who is standing behind the chairs, in the order they turned up. Each one carries
|
||
// the two things a dealer does with them: sit them down, or take them off the list
|
||
// because they've gone to the bar.
|
||
renderWaitingList() {
|
||
const list = document.getElementById("waitingList");
|
||
const hint = document.getElementById("waitingEmptyHint");
|
||
if (!list) return;
|
||
|
||
const waiting = this.state.waitingList || [];
|
||
const open = HoldemState.openSeats(this.state);
|
||
list.innerHTML = "";
|
||
hint.hidden = waiting.length > 0;
|
||
|
||
waiting.forEach((entry, position) => {
|
||
const row = document.createElement("li");
|
||
row.className = "waitingRow";
|
||
|
||
const name = document.createElement("span");
|
||
name.className = "waitingName";
|
||
name.textContent = entry.name;
|
||
row.appendChild(name);
|
||
|
||
// Only the person at the front is offered a seat, because a list nobody
|
||
// keeps in order is just a pile of names — and jumping the queue is the
|
||
// thing the dealer gets shouted at for.
|
||
if (position === 0 && open.length > 0) {
|
||
const seat = document.createElement("button");
|
||
seat.type = "button";
|
||
seat.className = "holdemBtn holdemBtnSmall waitingSeatBtn";
|
||
seat.textContent = `Seat ${open[0] + 1}`;
|
||
seat.title = `Sit ${entry.name} in seat ${open[0] + 1}`;
|
||
seat.addEventListener("click", () => this.hooks.seatWaiting(entry.id, open[0]));
|
||
row.appendChild(seat);
|
||
} else if (position === 0) {
|
||
const full = document.createElement("span");
|
||
full.className = "waitingNote";
|
||
full.textContent = "table full";
|
||
row.appendChild(full);
|
||
}
|
||
|
||
const drop = document.createElement("button");
|
||
drop.type = "button";
|
||
drop.className = "holdemBtn holdemBtnSmall holdemBtnGhost waitingDropBtn";
|
||
drop.textContent = "✕";
|
||
drop.setAttribute("aria-label", `Take ${entry.name} off the waiting list`);
|
||
drop.title = `Take ${entry.name} off the list`;
|
||
drop.addEventListener("click", () => this.hooks.dropWaiting(entry.id));
|
||
row.appendChild(drop);
|
||
|
||
list.appendChild(row);
|
||
});
|
||
},
|
||
|
||
// A toast is a moment; this table not being saved is a fact about the rest of the
|
||
// night. It sits at the top of the panel a dealer opens to check the money, and it
|
||
// stays there, because the raise pad dismisses toasts and the one time this warning
|
||
// matters is the one time it must not have been missed.
|
||
renderStorageWarning() {
|
||
const host = document.getElementById("storageWarning");
|
||
if (!host) return;
|
||
host.hidden = !HoldemState.saveFailed && !HoldemState.loadFailed && !HoldemState.otherTabActive;
|
||
if (host.hidden) return;
|
||
|
||
// 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
|
||
// the answer to "who pays whom" — it's the arithmetic the dealer still has to do,
|
||
// and it's the part of the night people actually get wrong.
|
||
renderSettleUp(standings) {
|
||
const host = document.getElementById("settleUp");
|
||
if (!host) return;
|
||
|
||
const plan = SettleUp.plan(standings);
|
||
const note = document.getElementById("settleUpNote");
|
||
const list = document.getElementById("settleUpList");
|
||
|
||
// Nothing to show before anyone is up or down. A panel that says "no payments"
|
||
// to a table that hasn't played a hand is just noise in the sidebar.
|
||
host.hidden = plan.payments.length === 0 && plan.balanced;
|
||
if (host.hidden) return;
|
||
|
||
list.innerHTML = "";
|
||
plan.payments.forEach(payment => {
|
||
const row = document.createElement("li");
|
||
row.className = "settleUpRow";
|
||
|
||
const who = document.createElement("span");
|
||
who.className = "settleUpWho";
|
||
// An arrow rather than "pays": the direction is the whole content of the
|
||
// line, and it survives being read at a glance from across the table.
|
||
who.textContent = `${payment.from} → ${payment.to}`;
|
||
row.appendChild(who);
|
||
|
||
const amount = document.createElement("span");
|
||
amount.className = "settleUpAmount";
|
||
amount.textContent = Money.format(payment.amount);
|
||
row.appendChild(amount);
|
||
|
||
list.appendChild(row);
|
||
});
|
||
|
||
if (plan.balanced) {
|
||
const count = plan.payments.length;
|
||
note.textContent = count === 1
|
||
? "One payment and the night is square."
|
||
: `${count} payments and the night is square.`;
|
||
} else if (plan.shortBy > 0) {
|
||
note.textContent =
|
||
`${Money.format(plan.shortBy)} of winnings has nothing to pay it — there are more chips on the table than cash was taken for. Fix that above before anyone cashes out.`;
|
||
} else {
|
||
// If a pot was thrown away on purpose, that's where the gap went, and the
|
||
// dealer already answered a dialog about it. Telling them to go and fix it
|
||
// would be sending them after their own decision.
|
||
const discarded = Math.max(0, Number(this.state.discarded) || 0);
|
||
note.textContent = discarded > 0
|
||
? `${Money.format(plan.overBy)} is owed with nobody to pay it to. ${Money.format(discarded)} was taken off the table when a hand was abandoned, which accounts for ${discarded >= plan.overBy ? "it" : "some of it"}.`
|
||
: `${Money.format(plan.overBy)} is owed with nobody to pay it to — more cash was taken than there are chips in play. Fix that above before anyone cashes out.`;
|
||
}
|
||
note.classList.toggle("settleUpOff", !plan.balanced);
|
||
},
|
||
|
||
// Does the cash box cover the chips on the table? Nothing asked this before, and
|
||
// it's the question that decides whether the last two players can be paid.
|
||
renderBankReconciliation() {
|
||
const host = document.getElementById("bankReconcile");
|
||
if (!host) return;
|
||
|
||
const bank = HoldemState.bankReconciliation(this.state);
|
||
// Nothing to reconcile before anybody has handed over money or taken a chip.
|
||
host.hidden = bank.cashIn === 0 && bank.chipsInPlay === 0;
|
||
if (host.hidden) return;
|
||
|
||
document.getElementById("bankCashIn").textContent = Money.format(bank.cashIn);
|
||
document.getElementById("bankChipsInPlay").textContent = Money.format(bank.chipsInPlay);
|
||
|
||
// An abandoned pot the dealer confirmed throwing away is money that left the
|
||
// table on purpose. It gets its own line so the two columns still add up in
|
||
// front of them, rather than looking like a shortfall they have to explain.
|
||
const discardedRow = document.getElementById("bankDiscardedRow");
|
||
if (discardedRow) {
|
||
discardedRow.hidden = !(bank.discarded > 0);
|
||
if (bank.discarded > 0) {
|
||
document.getElementById("bankDiscarded").textContent = Money.format(bank.discarded);
|
||
}
|
||
}
|
||
|
||
// Same idea for the house's cut, and the more important of the two: a raked
|
||
// game moves chips off the table every single hand, so without this line the
|
||
// check reads as a shortfall that grows all night.
|
||
const rakedRow = document.getElementById("bankRakedRow");
|
||
if (rakedRow) {
|
||
rakedRow.hidden = !(bank.raked > 0);
|
||
if (bank.raked > 0) {
|
||
document.getElementById("bankRaked").textContent = Money.format(bank.raked);
|
||
}
|
||
}
|
||
|
||
// Chips handed back to people who have gone home. The third way money leaves
|
||
// this table on purpose, and the one a dealer is asked about most: "where did
|
||
// Ann's four hundred go?"
|
||
const paidRow = document.getElementById("bankPaidOutRow");
|
||
if (paidRow) {
|
||
paidRow.hidden = !(bank.paidOut > 0);
|
||
if (bank.paidOut > 0) {
|
||
document.getElementById("bankPaidOut").textContent = Money.format(bank.paidOut);
|
||
}
|
||
}
|
||
|
||
const verdict = document.getElementById("bankReconcileVerdict");
|
||
// What has left the table on purpose, whichever way it went.
|
||
const accountedFor = [
|
||
bank.discarded > 0 ? `${Money.format(bank.discarded)} taken off it` : null,
|
||
bank.raked > 0 ? `${Money.format(bank.raked)} in the house's cut` : null,
|
||
bank.paidOut > 0 ? `${Money.format(bank.paidOut)} paid out to players who have left` : null,
|
||
].filter(Boolean);
|
||
if (bank.balanced) {
|
||
verdict.textContent = accountedFor.length > 0
|
||
? `Balanced — the cash covers every chip on the table, once the ${accountedFor.join(" and the ")} is counted.`
|
||
: "Balanced — the cash covers every chip on the table.";
|
||
} else if (bank.difference > 0) {
|
||
// Name them. "Somebody's rebuy wasn't recorded" is true and useless; the
|
||
// dealer's next move is to go to a particular seat, and the tool knows
|
||
// which. The commonest cause by far is the table's own starting stack:
|
||
// seats holding chips that were never bought, because "everyone starts
|
||
// with 200" is how a night opens.
|
||
const owing = HoldemState.seatsOwingCash(this.state);
|
||
const names = owing.map(row => row.name);
|
||
const who = names.length === 1
|
||
? names[0]
|
||
: `${names.slice(0, -1).join(", ")} and ${names[names.length - 1]}`;
|
||
verdict.textContent = owing.length > 0
|
||
? `${Money.format(bank.difference)} more in chips than cash taken. ${who} ` +
|
||
`${owing.length === 1 ? "is" : "are"} holding chips with no buy-in written down.`
|
||
: `${Money.format(bank.difference)} more in chips than cash taken. Someone's rebuy probably wasn't recorded — the box will be short at cash-out.`;
|
||
} else {
|
||
verdict.textContent =
|
||
`${Money.format(Math.abs(bank.difference))} more cash than chips in play. Someone has paid for chips they haven't been given.`;
|
||
}
|
||
verdict.classList.toggle("bankBalanced", bank.balanced);
|
||
verdict.classList.toggle("bankOff", !bank.balanced);
|
||
|
||
// One tap for the seats that are only holding the table's starting stack —
|
||
// which is the dealer's own instruction, said once in the setup panel, rather
|
||
// than the tool inventing cash. Anybody else's unrecorded rebuy is named in the
|
||
// sentence above and left to them, because only they know what it was.
|
||
const record = document.getElementById("bankRecordBuyInsBtn");
|
||
if (record) {
|
||
const starting = HoldemState.seatsOwingCash(this.state).filter(row => row.fromStartingStack);
|
||
const total = Money.round(starting.reduce((sum, row) => sum + row.chips, 0));
|
||
record.hidden = starting.length === 0;
|
||
if (starting.length > 0) {
|
||
record.textContent = `Take ${Money.format(total)} from ${starting.length} ${starting.length === 1 ? "player" : "players"}`;
|
||
record.title = starting.length === 1
|
||
? `Write down ${Money.format(total)} taken from ${starting[0].name}`
|
||
: `Write down the starting stack as cash taken from ${starting.map(row => row.name).join(", ")}`;
|
||
}
|
||
}
|
||
},
|
||
|
||
// ---- 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 {
|
||
formatted = new Date(timestamp).toLocaleTimeString(undefined, { hour: "2-digit", minute: "2-digit" });
|
||
} catch {
|
||
formatted = "";
|
||
}
|
||
this.handTimeCache.set(timestamp, formatted);
|
||
return formatted;
|
||
},
|
||
|
||
// 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 : "",
|
||
// Typing in the filter changes the list without changing the history, and
|
||
// the redraw is skipped when the signature matches — leave this out and the
|
||
// box takes input and does nothing.
|
||
this.historyFilter || "",
|
||
].join("|");
|
||
},
|
||
|
||
// What the dealer opens the log for is one hand: the one somebody is arguing
|
||
// about. A night runs to sixty or more, five at a time in the panel, so finding it
|
||
// meant scrolling and reading every row. A name, an amount, or a hand number
|
||
// narrows it instead.
|
||
//
|
||
// Matching is deliberately loose. "fay" finds Fay whatever case it's typed in;
|
||
// "190" finds a $190 pot, a $190 payout, or hand 190, because a dealer half
|
||
// remembering an amount shouldn't have to know which of those they mean; "#12"
|
||
// pins it to the hand number, for when they do.
|
||
handMatchesFilter(entry, query) {
|
||
if (!query) return true;
|
||
const term = query.trim().toLowerCase();
|
||
if (!term) return true;
|
||
|
||
const handNumber = String(entry.handNumber || "");
|
||
if (term.startsWith("#")) return handNumber.startsWith(term.slice(1));
|
||
|
||
// Only what the row itself shows. Matching the hand's full ledger as well was
|
||
// the first attempt, on the reasoning that a dealer might hunt for the hand
|
||
// that broke somebody by the loser's name — but the ledger holds everyone who
|
||
// put a chip in, so at a table where nobody folds it matched every hand.
|
||
// Measured on a seven-handed night: "Fay" returned 60 of 60. Searching text the
|
||
// panel doesn't display is a filter that looks broken even when it's right.
|
||
const labels = (entry.payouts || []).map(p => String(p.label || "").toLowerCase()).join(" ");
|
||
if (labels.includes(term)) return true;
|
||
|
||
// Amounts, matched on the digits so "$190", "190" and "1,90" all behave.
|
||
const digits = term.replace(/[^0-9.]/g, "");
|
||
if (digits) {
|
||
const amounts = [entry.pot, ...(entry.payouts || []).map(p => p.amount)]
|
||
.map(a => String(Money.round(Number(a) || 0)));
|
||
if (amounts.some(a => a.startsWith(digits))) return true;
|
||
if (handNumber === digits) return true;
|
||
}
|
||
return false;
|
||
},
|
||
|
||
// 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 || [];
|
||
emptyHint.hidden = history.length > 0;
|
||
document.getElementById("exportHistoryBtn").disabled = history.length === 0;
|
||
|
||
const query = this.historyFilter || "";
|
||
const shown = query ? history.filter(entry => this.handMatchesFilter(entry, query)) : history;
|
||
|
||
// How much of the night is being hidden. Without it a filter that matches one
|
||
// hand looks exactly like a table that only played one, which is the sort of
|
||
// thing a dealer reads wrong at 2am with somebody leaning over the rail.
|
||
const count = document.getElementById("handHistoryCount");
|
||
if (count) {
|
||
count.hidden = !query || history.length === 0;
|
||
count.textContent = `${shown.length} of ${history.length}`;
|
||
}
|
||
const noMatch = document.getElementById("handHistoryNoMatch");
|
||
if (noMatch) {
|
||
noMatch.hidden = !(query && history.length > 0 && shown.length === 0);
|
||
noMatch.textContent = `No hand matches “${query.trim()}”. The log still has all ${history.length}.`;
|
||
}
|
||
const filterBox = document.getElementById("handHistoryFilter");
|
||
if (filterBox) filterBox.hidden = 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");
|
||
shown.forEach(entry => {
|
||
const row = template.content.firstElementChild.cloneNode(true);
|
||
row.querySelector(".handHistoryHandNumber").textContent = `Hand #${entry.handNumber}`;
|
||
row.querySelector(".handHistoryPot").textContent = Money.format(entry.pot);
|
||
row.querySelector(".handHistoryTime").textContent = this.formatHandTime(entry.timestamp);
|
||
|
||
const payoutsEl = row.querySelector(".handHistoryPayouts");
|
||
payoutsEl.textContent = entry.payouts.map(p => `${p.label} ${Money.format(p.amount)}`).join(", ");
|
||
|
||
fragment.appendChild(row);
|
||
});
|
||
list.innerHTML = "";
|
||
list.appendChild(fragment);
|
||
},
|
||
};
|
||
|
||
if (typeof module !== "undefined" && module.exports) {
|
||
module.exports = { Render };
|
||
}
|