Compare commits
5
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
a92a389245 | ||
|
|
3d1ce1f45c | ||
|
|
29188d6049 | ||
|
|
4c1ac222a8 | ||
|
|
784315f2ea |
@@ -130,6 +130,12 @@
|
||||
<p id="bankReconcileVerdict" class="bankReconcileVerdict"></p>
|
||||
</div>
|
||||
|
||||
<div id="settleUp" hidden>
|
||||
<h3 class="panelSubhead">Settle up</h3>
|
||||
<ul id="settleUpList" class="settleUpList"></ul>
|
||||
<p id="settleUpNote" class="fieldHint"></p>
|
||||
</div>
|
||||
|
||||
<h3 class="panelSubhead">Hands</h3>
|
||||
<div id="handHistoryList"></div>
|
||||
<p id="handHistoryEmptyHint" class="fieldHint">Resolved pots are logged here, in case a chip count is disputed later.</p>
|
||||
@@ -163,7 +169,7 @@
|
||||
<template id="seatTemplate">
|
||||
<div class="seat" draggable="true">
|
||||
<div class="seatChairNumber"></div>
|
||||
<button class="dealerChip" title="Make this seat the dealer button">D</button>
|
||||
<button class="dealerChip" type="button" title="Make this seat the dealer button">D</button>
|
||||
<span class="blindBadge sbBadge">SB</span>
|
||||
<span class="blindBadge bbBadge">BB</span>
|
||||
<div class="seatPuckName"></div>
|
||||
@@ -443,6 +449,7 @@
|
||||
<script src="~/js/casino/holdem/feedback.js?v=@ViewData["cssVersion"]"></script>
|
||||
<script src="~/js/casino/holdem/potCalculator.js?v=@ViewData["cssVersion"]"></script>
|
||||
<script src="~/js/casino/holdem/state.js?v=@ViewData["cssVersion"]"></script>
|
||||
<script src="~/js/casino/holdem/settleUp.js?v=@ViewData["cssVersion"]"></script>
|
||||
<script src="~/js/casino/holdem/render.js?v=@ViewData["cssVersion"]"></script>
|
||||
<script src="~/js/casino/holdem/cardPicker.js?v=@ViewData["cssVersion"]"></script>
|
||||
<script src="~/js/casino/holdem/seatMenu.js?v=@ViewData["cssVersion"]"></script>
|
||||
|
||||
@@ -308,9 +308,22 @@ button,
|
||||
|
||||
#pokerTableWrap {
|
||||
position: relative;
|
||||
/* The shape is stated once, and both the height and the cap below are derived from
|
||||
it. It used to be a `padding-bottom: 72%` box, which has a trap in it: percentage
|
||||
padding resolves against the *containing block's* width, not the element's own,
|
||||
so narrowing the wrap left it exactly as tall as before. Capping the width was
|
||||
therefore no way to shorten the table — measured, after trying it: the felt went
|
||||
822px wide to 746px and stayed 617px tall, and the bottom seat sat as far into
|
||||
the action bar as it had. aspect-ratio ties the two together properly. */
|
||||
--feltAspect: 0.72;
|
||||
width: 100%;
|
||||
padding-bottom: 72%;
|
||||
aspect-ratio: 1 / var(--feltAspect);
|
||||
margin: 0 auto;
|
||||
/* Capping the width is how the felt is told to stay above the action bar.
|
||||
--feltRoomPx is published by actionBar.js with the bar's real height and the
|
||||
bottom seat's overhang already taken out; the fallback leaves the table its full
|
||||
size if that ever fails to arrive. */
|
||||
max-width: calc(var(--feltRoomPx, 100vh) / var(--feltAspect));
|
||||
}
|
||||
|
||||
|
||||
@@ -591,7 +604,6 @@ button,
|
||||
font-size: 0.68rem;
|
||||
cursor: pointer;
|
||||
z-index: 2;
|
||||
opacity: 0.32;
|
||||
transition: opacity 0.15s ease;
|
||||
/* A dealer puck should look like a puck — small, sitting on the rim of its seat.
|
||||
But tapping it hands the button to that seat and re-posts the blinds, and 22px
|
||||
@@ -622,16 +634,40 @@ button,
|
||||
left: -18px;
|
||||
}
|
||||
|
||||
.dealerChip:focus-visible {
|
||||
opacity: 1;
|
||||
/* A poker table has one dealer button. This one drew nine.
|
||||
|
||||
Every seat carried a puck — the button's, and eight ghosts at 0.32 opacity that
|
||||
were there to be pressed. Measured on a nine-seat table: eight pale discs, all
|
||||
eight showing the letter D, one of them real. Finding the button meant comparing
|
||||
nine identical shapes for the one that's gold, when it should be the only thing
|
||||
of its kind on the felt. The ghosts also sat on top of their neighbours: every
|
||||
remaining "something important is covered" offender on a crowded table was a
|
||||
seat covered by the seat-next-door's ghost puck.
|
||||
|
||||
So a seat that doesn't have the button doesn't draw one. The affordance is still
|
||||
there — hovering a seat fades its slot in, which is a preview of where the button
|
||||
would go — and on touch, where there is no hover, "Give the button" has always
|
||||
been in the seat's long-press menu. Keyboard reaches it by focus.
|
||||
|
||||
pointer-events matters as much as the opacity: an invisible puck that still takes
|
||||
taps would be worse than a visible one. */
|
||||
.dealerChip:not(.active) {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
.seat:hover .dealerChip {
|
||||
opacity: 1;
|
||||
.seat:hover .dealerChip:not(.active) {
|
||||
opacity: 0.5;
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.dealerChip:not(.active):focus-visible {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.dealerChip.active {
|
||||
background: radial-gradient(circle at 35% 30%, #ffe9a8, #f5d547 55%, #cba428 100%);
|
||||
border-color: #a9782f;
|
||||
@@ -1619,6 +1655,46 @@ button,
|
||||
color: #f0b46a;
|
||||
}
|
||||
|
||||
/* The settle-up list is read out loud, one line per payment, so it's laid out like
|
||||
the bank rows above it: name on the left, money hard right on tabular figures so a
|
||||
column of amounts lines up on the decimal point. */
|
||||
.settleUpList {
|
||||
list-style: none;
|
||||
margin: 0.35rem 0 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.settleUpRow {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
gap: 0.75rem;
|
||||
font-size: 0.8rem;
|
||||
padding: 0.18rem 0;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.settleUpRow:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.settleUpWho {
|
||||
color: #ddd;
|
||||
}
|
||||
|
||||
.settleUpAmount {
|
||||
color: #f2d489;
|
||||
font-weight: 600;
|
||||
font-variant-numeric: tabular-nums;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Same amber the bank check uses when the columns don't agree — it's the same fault
|
||||
being reported twice, and it should look like it. */
|
||||
.fieldHint.settleUpOff {
|
||||
color: #f0b46a;
|
||||
}
|
||||
|
||||
.standingsHeader {
|
||||
color: #8a8a8a;
|
||||
font-size: 0.7rem;
|
||||
@@ -2103,6 +2179,23 @@ body.hasActionBar #holdemSidebar {
|
||||
margin-top: 0.1rem;
|
||||
}
|
||||
|
||||
/* "ALL IN" takes the stack line's place, so it has to not read as a stack. Wider
|
||||
letters and a warm colour separate it from the grey money above it at a glance —
|
||||
which is the whole job, because the dealer is scanning the ring for who can still
|
||||
be bet at. */
|
||||
.seatPuckStack.seatPuckAllIn {
|
||||
color: #ffcf6b;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
|
||||
/* And the seat itself carries a hint of it, so the mark survives being read out of
|
||||
the corner of an eye. Deliberately quieter than .seatActing — all-in is a standing
|
||||
fact about a player, not a request for the dealer's attention. */
|
||||
.seat.seatAllIn {
|
||||
border-color: rgba(255, 207, 107, 0.45);
|
||||
}
|
||||
|
||||
/* Tournament-sized amounts. A number has no spaces to break on, so an amount too
|
||||
wide for the 64px puck neither wraps nor ellipsises — it draws straight out over
|
||||
the seat next to it. These step the size down so every digit stays on its own
|
||||
@@ -2481,6 +2574,16 @@ body.hasActionBar #toastHost {
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
/* The narrow layout already had an answer for the bar: it reserves the bar's height
|
||||
as scroll room below the table, and a phone is a thing you scroll. Capping the
|
||||
felt here as well was measured and rejected — at 360x640 it took the table from
|
||||
321px to 226px, which fixed the six-seat ring but broke the nine-seat one, two
|
||||
covered seats traded for two seats whose centre landed on a neighbour. The cap is
|
||||
for the wide layout, which never consulted the bar's height at all. */
|
||||
#pokerTableWrap {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
/* Stacked, with the action that ends the hand furthest from a stray thumb. */
|
||||
.potWizardActions {
|
||||
flex-direction: column-reverse;
|
||||
@@ -2496,8 +2599,9 @@ body.hasActionBar #toastHost {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
/* One column, so the table has the full width and can afford to be round. */
|
||||
#pokerTableWrap {
|
||||
padding-bottom: 100%;
|
||||
--feltAspect: 1;
|
||||
}
|
||||
|
||||
.seat {
|
||||
@@ -2822,7 +2926,11 @@ body.hasActionBar #toastHost {
|
||||
width: 100%;
|
||||
height: var(--feltRoom);
|
||||
min-height: 7rem;
|
||||
padding-bottom: 0;
|
||||
/* 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. */
|
||||
aspect-ratio: auto;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
/* The header ate 148px of a 390px-tall window, which was most of the reason the
|
||||
|
||||
@@ -29,6 +29,7 @@ const ActionBar = {
|
||||
const visible = !host.hidden;
|
||||
const height = visible ? host.getBoundingClientRect().height : 0;
|
||||
document.documentElement.style.setProperty("--actionBarHeight", `${Math.round(height)}px`);
|
||||
this.publishFeltRoom(height);
|
||||
};
|
||||
|
||||
if (typeof ResizeObserver === "function") {
|
||||
@@ -40,6 +41,36 @@ const ActionBar = {
|
||||
publish();
|
||||
},
|
||||
|
||||
// Half a seat, the gap left under the lowest one, and the smallest felt worth
|
||||
// drawing. A seat is about 73px tall at every width — the puck is text-sized, not
|
||||
// table-sized — so the overhang is a constant rather than something read back off
|
||||
// the layout this is about to change. Measuring it would mean shrinking the felt,
|
||||
// moving the seats, and getting a different answer on the next pass.
|
||||
SEAT_OVERHANG_PX: 37,
|
||||
FELT_GAP_PX: 8,
|
||||
FELT_MIN_PX: 220,
|
||||
|
||||
// How tall the felt can be and still leave the whole ring of seats above the bar.
|
||||
//
|
||||
// Publishing the bar's height was only half the job. The wide layout never used it:
|
||||
// the felt sizes itself from its own width — a box 72% as tall as it is wide — and
|
||||
// so has no idea what is underneath it. The bar meanwhile grows with the hand, from
|
||||
// 117px to 172px the moment there's a side pot to show, which is exactly when the
|
||||
// dealer most needs to see who is still in. Measured with two side pots, the bottom
|
||||
// seat sat 22px into the bar at 1280x900, 54px at 1600x1000, 23px at 768x1024.
|
||||
//
|
||||
// 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.
|
||||
publishFeltRoom(barHeight) {
|
||||
const wrap = document.getElementById("pokerTableWrap");
|
||||
if (!wrap) return;
|
||||
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`);
|
||||
},
|
||||
|
||||
// Anything to act on? A hand with nobody dealt in doesn't get a bar — and that
|
||||
// still holds during setup, because a seated player is a live seat whether or not
|
||||
// the betting has been opened. An empty table stays uncluttered.
|
||||
|
||||
@@ -117,6 +117,20 @@ const Betting = {
|
||||
return null;
|
||||
},
|
||||
|
||||
// A player still in the hand with chips in the pot and nothing left behind. This is
|
||||
// the same stack test nextToAct uses to pass over them, which is the point: the
|
||||
// seat the felt marks all-in is exactly the seat the dealer will never be asked to
|
||||
// act on again.
|
||||
//
|
||||
// The "chips in the pot" half matters. A seat with an empty stack who hasn't put
|
||||
// anything in is a busted player who shouldn't have been dealt in, not a player
|
||||
// who moved all-in, and calling them all-in on the felt would be a lie.
|
||||
isAllIn(state, player) {
|
||||
if (!player || !player.inHand || player.folded) return false;
|
||||
return this.handTotal(player) > this.EPSILON_CHIPS &&
|
||||
this.stackOf(state, player) <= this.EPSILON_CHIPS;
|
||||
},
|
||||
|
||||
// Which chair sits `step` places along in the direction of play. The table owns
|
||||
// this — walking the seats is exactly where the button, the blinds and the action
|
||||
// used to drift apart from each other, so there is one implementation of it.
|
||||
|
||||
@@ -53,6 +53,27 @@ const HandHistoryExport = {
|
||||
Money.forSheet(row.cashPosition || 0),
|
||||
]);
|
||||
});
|
||||
|
||||
// And the answer the standings are read to get to. Whoever opens this file
|
||||
// wants the payment list, not to redo the arithmetic in a spreadsheet.
|
||||
const plan = SettleUp.plan(standings);
|
||||
if (plan.payments.length > 0) {
|
||||
rows.push([]);
|
||||
rows.push(["Settle Up"]);
|
||||
rows.push(["Pays", "Receives", "Amount"]);
|
||||
plan.payments.forEach(payment => {
|
||||
rows.push([payment.from, payment.to, Money.forSheet(payment.amount)]);
|
||||
});
|
||||
if (!plan.balanced) {
|
||||
// The file is the paper trail, so the caveat travels with it rather
|
||||
// than living only in a sidebar nobody exported.
|
||||
rows.push([
|
||||
plan.shortBy > 0
|
||||
? `Unpaid: ${Money.forSheet(plan.shortBy)} — more chips in play than cash taken`
|
||||
: `Unclaimed: ${Money.forSheet(plan.overBy)} — more cash taken than chips in play`,
|
||||
]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return rows.map(row => row.map(f => this.csvField(f)).join(",")).join("\r\n");
|
||||
|
||||
@@ -174,8 +174,18 @@ const Render = {
|
||||
node.querySelector(".seatChairNumber").textContent = index + 1;
|
||||
|
||||
const dealerChip = node.querySelector(".dealerChip");
|
||||
dealerChip.classList.toggle("active", index === dealerIndex);
|
||||
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}`;
|
||||
const chipLabel = hasButton
|
||||
? `${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.
|
||||
@@ -269,11 +279,18 @@ const Render = {
|
||||
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);
|
||||
stackEl.textContent = !empty && stack > 0 ? Money.format(stack) : "";
|
||||
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);
|
||||
@@ -713,6 +730,58 @@ const Render = {
|
||||
});
|
||||
|
||||
this.renderBankReconciliation();
|
||||
this.renderSettleUp(standings);
|
||||
},
|
||||
|
||||
// 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 {
|
||||
note.textContent =
|
||||
`${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
|
||||
|
||||
@@ -0,0 +1,66 @@
|
||||
// Who hands cash to whom at the end of the night.
|
||||
//
|
||||
// The standings panel already works out what everyone is up or down. It then stopped,
|
||||
// which leaves the dealer with six signed numbers at 2am and the actual job still to
|
||||
// do: turning them into payments. That's the step people get wrong — not the poker.
|
||||
//
|
||||
// Everything is done in cents. A settlement that has to come out exactly right is the
|
||||
// last place to let a float land on 41.99999999.
|
||||
const SettleUp = {
|
||||
// Largest debt against largest win, repeatedly. It's greedy rather than optimal,
|
||||
// and for this problem that's the right trade: finding the true minimum number of
|
||||
// transfers is NP-hard, while this is guaranteed to need at most one payment fewer
|
||||
// than there are people, and each payment it does emit clears somebody out of the
|
||||
// list entirely. A dealer wants a short list they can read down, not a proof.
|
||||
//
|
||||
// Payers are the outer loop so that everything one person owes is printed together
|
||||
// — the list is read out loud, one player at a time.
|
||||
plan(standings) {
|
||||
const owed = [];
|
||||
const owing = [];
|
||||
|
||||
(standings || []).forEach(row => {
|
||||
const cents = Money.toCents(row.cashPosition);
|
||||
if (cents > 0) owed.push({ name: row.name, cents });
|
||||
else if (cents < 0) owing.push({ name: row.name, cents: -cents });
|
||||
});
|
||||
|
||||
owed.sort((a, b) => b.cents - a.cents || a.name.localeCompare(b.name));
|
||||
owing.sort((a, b) => b.cents - a.cents || a.name.localeCompare(b.name));
|
||||
|
||||
const payments = [];
|
||||
let creditor = 0;
|
||||
owing.forEach(payer => {
|
||||
while (payer.cents > 0 && creditor < owed.length) {
|
||||
const taker = owed[creditor];
|
||||
const amount = Math.min(payer.cents, taker.cents);
|
||||
payments.push({ from: payer.name, to: taker.name, amount: Money.fromCents(amount) });
|
||||
payer.cents -= amount;
|
||||
taker.cents -= amount;
|
||||
if (taker.cents === 0) creditor++;
|
||||
}
|
||||
});
|
||||
|
||||
// What's left over when the chips on the table don't match the cash that came
|
||||
// in. It is never a rounding artifact — the arithmetic is integer cents — so it
|
||||
// is always the thing the bank check is already warning about: a rebuy nobody
|
||||
// wrote down, or a miscount. Reported rather than quietly spread across the
|
||||
// payments, because inventing a transfer to make the columns agree is how a
|
||||
// real person ends up short.
|
||||
const unpaid = Money.fromCents(owed.reduce((sum, row) => sum + row.cents, 0));
|
||||
const unspent = Money.fromCents(owing.reduce((sum, row) => sum + row.cents, 0));
|
||||
|
||||
return {
|
||||
payments,
|
||||
// Only one of these can be non-zero: either there are more chips than cash
|
||||
// or less, never both.
|
||||
shortBy: unpaid,
|
||||
overBy: unspent,
|
||||
balanced: unpaid === 0 && unspent === 0,
|
||||
};
|
||||
},
|
||||
};
|
||||
|
||||
if (typeof module !== "undefined" && module.exports) {
|
||||
module.exports = SettleUp;
|
||||
}
|
||||
@@ -40,6 +40,22 @@ const Shortcuts = {
|
||||
return [...document.querySelectorAll('[id$="Overlay"]')].some(el => !el.hidden);
|
||||
},
|
||||
|
||||
// Enter and Space are how a keyboard presses the control it is already sitting on.
|
||||
// Claiming them for "advance" didn't just block that press — it ran a different
|
||||
// action instead. Measured: Tab to Resolve Pot, press Enter, and the table dealt
|
||||
// the next hand. Space on the same button worked, because "advance" happened to
|
||||
// decline that time and the browser's own activation got through. A control that
|
||||
// does something else every other press is worse than one that does nothing.
|
||||
//
|
||||
// Only these two keys are handed back. The letter shortcuts stay live with a
|
||||
// button focused, because a button does nothing with "f" and the dealer's hand
|
||||
// shouldn't have to leave them.
|
||||
focusedControlOwnsKey(key) {
|
||||
if (key !== "enter" && key !== " ") return false;
|
||||
const el = document.activeElement;
|
||||
return !!(el && el.matches && el.matches('button, [role="button"], a[href], summary'));
|
||||
},
|
||||
|
||||
onKey(e) {
|
||||
if (e.metaKey || e.ctrlKey || e.altKey) return;
|
||||
|
||||
@@ -47,6 +63,8 @@ const Shortcuts = {
|
||||
const action = this.KEYS[key];
|
||||
if (!action) return;
|
||||
|
||||
if (this.focusedControlOwnsKey(key)) return;
|
||||
|
||||
// Escape is the exception: it should still close the raise pad even if focus
|
||||
// happens to be sitting in its amount field.
|
||||
if (this.isTyping() && !(action === "cancel")) return;
|
||||
|
||||
@@ -0,0 +1,98 @@
|
||||
// Who the felt marks "ALL IN".
|
||||
//
|
||||
// The mark's whole value is that a dealer can scan the ring and see who can still be
|
||||
// bet at, so the test that matters most is the last one: the seats it marks are
|
||||
// exactly the seats the betting round refuses to ask for another chip.
|
||||
const test = require("node:test");
|
||||
const assert = require("node:assert");
|
||||
const { Betting, HoldemState, makeTable, chipsOnTable } = require("./load");
|
||||
|
||||
test("a player who moved all-in is marked", () => {
|
||||
const state = makeTable({ seatCount: 6, seated: [0, 1, 2, 3], stack: 100 });
|
||||
state.seats[3].stack = 12;
|
||||
Betting.beginHand(state);
|
||||
Betting.allIn(state, state.actingSeatIndex);
|
||||
|
||||
assert.equal(Betting.isAllIn(state, state.seats[3]), true);
|
||||
assert.equal(state.seats[3].stack, 0);
|
||||
});
|
||||
|
||||
test("a player with chips behind is not", () => {
|
||||
const state = makeTable({ seatCount: 6, seated: [0, 1, 2], stack: 100 });
|
||||
Betting.beginHand(state);
|
||||
assert.equal(Betting.isAllIn(state, state.seats[0]), false);
|
||||
assert.equal(Betting.isAllIn(state, state.seats[1]), false);
|
||||
});
|
||||
|
||||
test("a busted player who was dealt in but has put nothing in is not", () => {
|
||||
// An empty stack alone isn't all-in — it's someone who shouldn't have been dealt
|
||||
// in. Calling that "ALL IN" on the felt would be a lie about a live pot.
|
||||
const state = makeTable({ seatCount: 4, seated: [0, 1, 2], stack: 100 });
|
||||
state.seats[2].stack = 0;
|
||||
assert.equal(Betting.isAllIn(state, state.seats[2]), false);
|
||||
});
|
||||
|
||||
test("a folded player with an empty stack is not", () => {
|
||||
const state = makeTable({ seatCount: 4, seated: [0, 1, 2], stack: 100 });
|
||||
state.seats[1].committed = 5;
|
||||
state.seats[1].stack = 0;
|
||||
state.seats[1].folded = true;
|
||||
assert.equal(Betting.isAllIn(state, state.seats[1]), false);
|
||||
});
|
||||
|
||||
test("an empty chair is not", () => {
|
||||
const state = makeTable({ seatCount: 6, seated: [0, 1], stack: 100 });
|
||||
assert.equal(Betting.isAllIn(state, state.seats[4]), false);
|
||||
});
|
||||
|
||||
test("a seat with no stack of its own falls back to the table's and isn't marked", () => {
|
||||
const state = makeTable({ seatCount: 4, seated: [0, 1, 2], stack: 100 });
|
||||
state.defaultStack = 200;
|
||||
state.seats[2].stack = null;
|
||||
state.seats[2].committed = 10;
|
||||
assert.equal(Betting.isAllIn(state, state.seats[2]), false);
|
||||
});
|
||||
|
||||
test("the seats marked are exactly the ones the action passes over", () => {
|
||||
const state = makeTable({ seatCount: 6, seated: [0, 1, 2, 3], stack: 100 });
|
||||
state.seats[1].stack = 8;
|
||||
state.seats[3].stack = 30;
|
||||
Betting.beginHand(state);
|
||||
|
||||
// Everyone in, two of them for less than the others can cover.
|
||||
for (let step = 0; step < 4; step++) Betting.allIn(state, state.actingSeatIndex);
|
||||
|
||||
const marked = state.seats
|
||||
.map((player, index) => (Betting.isAllIn(state, player) ? index : null))
|
||||
.filter(index => index !== null);
|
||||
const skipped = state.seats
|
||||
.map((player, index) =>
|
||||
player.inHand && !player.folded && Betting.nextToAct(state, index - 1) !== index ? index : null)
|
||||
.filter(index => index !== null);
|
||||
|
||||
assert.deepEqual(marked, skipped);
|
||||
assert.ok(marked.length > 0, "the scenario should actually produce all-in players");
|
||||
});
|
||||
|
||||
test("nobody is marked once the next hand starts", () => {
|
||||
const state = makeTable({ seatCount: 4, seated: [0, 1, 2], stack: 100 });
|
||||
state.seats[2].stack = 5;
|
||||
Betting.beginHand(state);
|
||||
Betting.allIn(state, state.actingSeatIndex);
|
||||
assert.ok(state.seats.some(player => Betting.isAllIn(state, player)));
|
||||
|
||||
// The short stack got there by winning nothing; give them chips back the way a
|
||||
// dealer would before the next deal.
|
||||
HoldemState.startNextHand(state);
|
||||
state.seats[2].stack = 50;
|
||||
assert.equal(state.seats.filter(player => Betting.isAllIn(state, player)).length, 0);
|
||||
});
|
||||
|
||||
test("marking nobody doesn't move a chip", () => {
|
||||
const state = makeTable({ seatCount: 6, seated: [0, 1, 2, 3], stack: 100 });
|
||||
state.seats[3].stack = 12;
|
||||
Betting.beginHand(state);
|
||||
const before = chipsOnTable(state);
|
||||
state.seats.forEach(player => Betting.isAllIn(state, player));
|
||||
assert.equal(chipsOnTable(state), before);
|
||||
});
|
||||
@@ -18,6 +18,7 @@ const Money = load("money");
|
||||
const PotCalculator = load("potCalculator");
|
||||
const SplitCalculator = load("splitCalculator");
|
||||
const Betting = load("betting");
|
||||
const SettleUp = load("settleUp");
|
||||
const HandHistoryExport = load("handHistoryExport");
|
||||
|
||||
// render.js exports { Render } rather than the namespace directly.
|
||||
@@ -77,6 +78,7 @@ module.exports = {
|
||||
HandHistoryExport,
|
||||
PotCalculator,
|
||||
SplitCalculator,
|
||||
SettleUp,
|
||||
Betting,
|
||||
HoldemState,
|
||||
makeTable,
|
||||
|
||||
@@ -0,0 +1,124 @@
|
||||
// Turning the standings into "who hands cash to whom".
|
||||
const test = require("node:test");
|
||||
const assert = require("node:assert");
|
||||
const { Money, HoldemState, SettleUp, makeTable } = require("./load");
|
||||
|
||||
const standings = pairs => pairs.map(([name, cashPosition]) => ({ name, cashPosition }));
|
||||
const lines = plan => plan.payments.map(p => `${p.from} -> ${p.to} ${Money.format(p.amount)}`);
|
||||
const paidTo = (plan, name) =>
|
||||
plan.payments.filter(p => p.to === name).reduce((sum, p) => sum + p.amount, 0);
|
||||
const paidBy = (plan, name) =>
|
||||
plan.payments.filter(p => p.from === name).reduce((sum, p) => sum + p.amount, 0);
|
||||
|
||||
test("one loser, one winner", () => {
|
||||
const plan = SettleUp.plan(standings([["Ann", 40], ["Ben", -40]]));
|
||||
assert.deepEqual(lines(plan), ["Ben -> Ann $40"]);
|
||||
assert.equal(plan.balanced, true);
|
||||
});
|
||||
|
||||
test("everybody flat means nothing to do", () => {
|
||||
const plan = SettleUp.plan(standings([["Ann", 0], ["Ben", 0]]));
|
||||
assert.deepEqual(plan.payments, []);
|
||||
assert.equal(plan.balanced, true);
|
||||
});
|
||||
|
||||
test("nobody at all means nothing to do", () => {
|
||||
const plan = SettleUp.plan([]);
|
||||
assert.deepEqual(plan.payments, []);
|
||||
assert.equal(plan.balanced, true);
|
||||
});
|
||||
|
||||
test("each player ends up square", () => {
|
||||
const table = standings([
|
||||
["Ann", 120], ["Ben", -75], ["Cal", -60], ["Dee", 30], ["Eve", -15],
|
||||
]);
|
||||
const plan = SettleUp.plan(table);
|
||||
|
||||
table.forEach(row => {
|
||||
const settled = paidTo(plan, row.name) - paidBy(plan, row.name);
|
||||
assert.equal(settled, row.cashPosition, `${row.name} should end up square`);
|
||||
});
|
||||
assert.equal(plan.balanced, true);
|
||||
});
|
||||
|
||||
test("at most one payment fewer than there are people", () => {
|
||||
const table = standings([
|
||||
["Ann", 120], ["Ben", -75], ["Cal", -60], ["Dee", 30], ["Eve", -15],
|
||||
]);
|
||||
const plan = SettleUp.plan(table);
|
||||
assert.ok(plan.payments.length <= table.length - 1,
|
||||
`${plan.payments.length} payments for ${table.length} players`);
|
||||
});
|
||||
|
||||
test("a player who owes two people has both lines together", () => {
|
||||
// The list gets read out one player at a time, so a payer's obligations must not
|
||||
// be split up by somebody else's.
|
||||
const plan = SettleUp.plan(standings([["Ann", 50], ["Cal", 30], ["Ben", -80]]));
|
||||
assert.deepEqual(lines(plan), ["Ben -> Ann $50", "Ben -> Cal $30"]);
|
||||
});
|
||||
|
||||
test("cents survive", () => {
|
||||
const plan = SettleUp.plan(standings([["Ann", 0.1], ["Ben", 0.2], ["Cal", -0.3]]));
|
||||
assert.deepEqual(lines(plan), ["Cal -> Ben $0.20", "Cal -> Ann $0.10"]);
|
||||
assert.equal(plan.balanced, true);
|
||||
});
|
||||
|
||||
test("more chips than cash leaves somebody unpaid, and says so", () => {
|
||||
// The table is $25 up on the bank — an unrecorded rebuy or a miscount. The winners
|
||||
// cannot all be paid, and pretending otherwise is how a real person ends up short.
|
||||
const plan = SettleUp.plan(standings([["Ann", 100], ["Ben", -75]]));
|
||||
assert.deepEqual(lines(plan), ["Ben -> Ann $75"]);
|
||||
assert.equal(plan.shortBy, 25);
|
||||
assert.equal(plan.overBy, 0);
|
||||
assert.equal(plan.balanced, false);
|
||||
});
|
||||
|
||||
test("less chips than cash leaves a payer with nowhere to send it", () => {
|
||||
const plan = SettleUp.plan(standings([["Ann", 50], ["Ben", -75]]));
|
||||
assert.deepEqual(lines(plan), ["Ben -> Ann $50"]);
|
||||
assert.equal(plan.overBy, 25);
|
||||
assert.equal(plan.shortBy, 0);
|
||||
assert.equal(plan.balanced, false);
|
||||
});
|
||||
|
||||
test("no payment is ever for nothing", () => {
|
||||
const plan = SettleUp.plan(standings([
|
||||
["Ann", 60], ["Ben", -60], ["Cal", 0], ["Dee", 0],
|
||||
]));
|
||||
assert.ok(plan.payments.every(p => p.amount > 0));
|
||||
assert.equal(plan.payments.length, 1);
|
||||
});
|
||||
|
||||
test("nobody pays themselves", () => {
|
||||
const plan = SettleUp.plan(standings([
|
||||
["Ann", 90], ["Ben", -30], ["Cal", -30], ["Dee", -30],
|
||||
]));
|
||||
assert.ok(plan.payments.every(p => p.from !== p.to));
|
||||
});
|
||||
|
||||
test("the payments total what the winners are owed", () => {
|
||||
const table = standings([["Ann", 42.5], ["Ben", 17.5], ["Cal", -60]]);
|
||||
const plan = SettleUp.plan(table);
|
||||
const moved = plan.payments.reduce((sum, p) => sum + p.amount, 0);
|
||||
assert.equal(Money.round(moved), 60);
|
||||
});
|
||||
|
||||
test("it settles a real table's standings, not just hand-made numbers", () => {
|
||||
const state = makeTable({ seatCount: 6, seated: [0, 1, 2], stack: 100 });
|
||||
state.seats[0].buyIns = 100;
|
||||
state.seats[1].buyIns = 100;
|
||||
state.seats[2].buyIns = 100;
|
||||
state.seats[0].stack = 175;
|
||||
state.seats[1].stack = 90;
|
||||
state.seats[2].stack = 35;
|
||||
|
||||
const rows = HoldemState.sessionStandings(state);
|
||||
const plan = SettleUp.plan(rows);
|
||||
|
||||
// Bank balances — 300 in, 300 on the table — so everyone can be paid.
|
||||
assert.equal(HoldemState.bankReconciliation(state).balanced, true);
|
||||
assert.equal(plan.balanced, true);
|
||||
rows.forEach(row => {
|
||||
assert.equal(paidTo(plan, row.name) - paidBy(plan, row.name), row.cashPosition);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,110 @@
|
||||
// The keyboard shortcuts, and the one rule that keeps them from stealing a press.
|
||||
//
|
||||
// Shortcuts talks to `document` directly, so these tests stand a small fake one up
|
||||
// rather than a whole DOM: the only things it asks about are what has focus and
|
||||
// whether an overlay is open.
|
||||
const test = require("node:test");
|
||||
const assert = require("node:assert");
|
||||
const path = require("path");
|
||||
|
||||
const Shortcuts = require(path.join(
|
||||
__dirname, "..", "..", "JoshHeaps.Net", "wwwroot", "js", "casino", "holdem", "shortcuts.js"));
|
||||
|
||||
// A stand-in for a focused element. `matches` answers the same selector list the
|
||||
// real one would, which is the whole of what focusedControlOwnsKey looks at.
|
||||
function element(tagName, { selectors = [], isContentEditable = false } = {}) {
|
||||
return {
|
||||
tagName,
|
||||
isContentEditable,
|
||||
matches: selector => selectors.some(s => selector.includes(s)),
|
||||
};
|
||||
}
|
||||
|
||||
const BUTTON = element("BUTTON", { selectors: ["button"] });
|
||||
const SUMMARY = element("SUMMARY", { selectors: ["summary"] });
|
||||
const LINK = element("A", { selectors: ["a[href]"] });
|
||||
const DIV = element("DIV");
|
||||
const TEXT_FIELD = element("INPUT");
|
||||
|
||||
// Runs one keypress against a fresh Shortcuts and reports which action fired.
|
||||
function press(key, { focused = DIV, overlays = [] } = {}) {
|
||||
const fired = [];
|
||||
let defaultPrevented = false;
|
||||
|
||||
globalThis.document = {
|
||||
activeElement: focused,
|
||||
addEventListener() {},
|
||||
querySelectorAll: () => overlays,
|
||||
};
|
||||
|
||||
const handlers = {};
|
||||
for (const action of Object.values(Shortcuts.KEYS)) {
|
||||
handlers[action] = () => { fired.push(action); return true; };
|
||||
}
|
||||
Shortcuts.handlers = handlers;
|
||||
Shortcuts.onKey({ key, preventDefault: () => { defaultPrevented = true; } });
|
||||
|
||||
return { fired: fired[0] || null, defaultPrevented };
|
||||
}
|
||||
|
||||
test.after(() => { delete globalThis.document; });
|
||||
|
||||
test("Enter on a focused button is left to the button", () => {
|
||||
assert.equal(press("Enter", { focused: BUTTON }).fired, null);
|
||||
});
|
||||
|
||||
test("Space on a focused button is left to the button", () => {
|
||||
assert.equal(press(" ", { focused: BUTTON }).fired, null);
|
||||
});
|
||||
|
||||
test("a key left to the control is not swallowed either", () => {
|
||||
// preventDefault would stop the browser activating the button, which is the
|
||||
// half of the bug that turned "wrong action" into "no action".
|
||||
assert.equal(press("Enter", { focused: BUTTON }).defaultPrevented, false);
|
||||
});
|
||||
|
||||
test("summary and links own Enter and Space too", () => {
|
||||
assert.equal(press("Enter", { focused: SUMMARY }).fired, null);
|
||||
assert.equal(press(" ", { focused: LINK }).fired, null);
|
||||
});
|
||||
|
||||
test("Space still advances when nothing pressable has focus", () => {
|
||||
assert.equal(press(" ", { focused: DIV }).fired, "advance");
|
||||
});
|
||||
|
||||
test("Enter still advances when nothing pressable has focus", () => {
|
||||
assert.equal(press("Enter", { focused: DIV }).fired, "advance");
|
||||
});
|
||||
|
||||
test("the letter shortcuts stay live with a button focused", () => {
|
||||
// A button does nothing with "f", so there is no press to hand back — and a
|
||||
// dealer whose hand is on the keys shouldn't lose them to a stray focus ring.
|
||||
assert.equal(press("f", { focused: BUTTON }).fired, "fold");
|
||||
assert.equal(press("c", { focused: BUTTON }).fired, "checkOrCall");
|
||||
assert.equal(press("r", { focused: BUTTON }).fired, "raise");
|
||||
assert.equal(press("a", { focused: BUTTON }).fired, "allIn");
|
||||
assert.equal(press("u", { focused: BUTTON }).fired, "undo");
|
||||
});
|
||||
|
||||
test("typing still silences everything but Escape", () => {
|
||||
assert.equal(press("f", { focused: TEXT_FIELD }).fired, null);
|
||||
assert.equal(press("Escape", { focused: TEXT_FIELD }).fired, "cancel");
|
||||
});
|
||||
|
||||
test("an open overlay still owns the keyboard", () => {
|
||||
assert.equal(press("f", { focused: DIV, overlays: [{ hidden: false }] }).fired, null);
|
||||
assert.equal(press("f", { focused: DIV, overlays: [{ hidden: true }] }).fired, "fold");
|
||||
});
|
||||
|
||||
test("a focused control wins before the overlay check, not after", () => {
|
||||
// Both would decline here; the point is that neither path fires an action.
|
||||
assert.equal(press("Enter", { focused: BUTTON, overlays: [{ hidden: false }] }).fired, null);
|
||||
});
|
||||
|
||||
test("modified keys are never shortcuts", () => {
|
||||
globalThis.document = { activeElement: DIV, addEventListener() {}, querySelectorAll: () => [] };
|
||||
const fired = [];
|
||||
Shortcuts.handlers = { advance: () => { fired.push("advance"); return true; } };
|
||||
Shortcuts.onKey({ key: " ", ctrlKey: true, preventDefault() {} });
|
||||
assert.deepEqual(fired, []);
|
||||
});
|
||||
@@ -514,6 +514,34 @@ const LayoutAudit = {
|
||||
return { name: "a seat's centre belongs to that seat", offenders };
|
||||
},
|
||||
|
||||
// A poker table has one dealer button. Nine pucks all showing "D", one of them
|
||||
// gold, turns the most-read marker on the felt into a spot-the-difference — and
|
||||
// a screen reader heard nine buttons named "D" with nothing to tell them apart.
|
||||
// Both halves are checked here: what's drawn, and what it announces itself as.
|
||||
oneDealerButton() {
|
||||
const chips = [...document.querySelectorAll(".dealerChip")];
|
||||
const shown = chips.filter(chip => {
|
||||
const style = getComputedStyle(chip);
|
||||
return style.display !== "none" && style.visibility !== "hidden" &&
|
||||
parseFloat(style.opacity) > 0.05;
|
||||
});
|
||||
const offenders = [];
|
||||
|
||||
if (shown.length > 1) {
|
||||
offenders.push(`${shown.length} dealer buttons drawn on the felt at once`);
|
||||
}
|
||||
|
||||
const labels = chips.map(chip => chip.getAttribute("aria-label") || chip.textContent.trim());
|
||||
const duplicated = labels.filter((label, i) => labels.indexOf(label) !== i);
|
||||
if (duplicated.length) {
|
||||
offenders.push(
|
||||
`${duplicated.length + 1} dealer buttons announce themselves as "${duplicated[0]}"`
|
||||
);
|
||||
}
|
||||
|
||||
return { name: "the felt shows one dealer button", offenders };
|
||||
},
|
||||
|
||||
// ---- Runner ----
|
||||
|
||||
runAll(options = {}) {
|
||||
@@ -527,6 +555,7 @@ const LayoutAudit = {
|
||||
this.horizontalOverflow(),
|
||||
this.fieldFontSize(),
|
||||
this.seatOwnership(),
|
||||
this.oneDealerButton(),
|
||||
];
|
||||
if (options.includeTouchTargets) checks.push(this.touchTargets(options.minimumTarget));
|
||||
|
||||
|
||||
Reference in New Issue
Block a user