Show each stack as the chips that make it

The chip legend has only ever read chips *into* an amount -- counting what is in front
of somebody. Colouring up at the end of a level is the same question backwards, and it
is the one the dealer answers with a rack in one hand: $205 is two hundreds and a five.
So is counting a stack out for a player who is leaving.

The arithmetic already existed. Payouts have been shown in chips since #73; this points
the same function at the stacks.

  Stacks in chips
    Ann — $205        2×$100, 1×$5
    Ben — $1,337      2×$500, 3×$100, 1×$25, 2×$5, 2×$1
    Cal — $40         1×$25, 3×$5
    Eve — $88         3×$25, 2×$5, 3×$1
    Fay — $500        1×$500

Sits under the chip legend, because that is where the denominations it works from are
set, and it only appears when there is both a legend to work from and somebody with
chips. A table that never set its chip colours up gets nothing, which is what it had
before. A seat on zero is left out rather than listed as nothing.

Driven at five sizes across touch and pointer contexts, with a 26-character name and a
$1,337,000 stack: no row spills, no page overflow, contrast clean, layout audit clean
but for the landscape phone already known from #63, no console errors. Every breakdown
checked by hand against its total -- 500+200+75+2 = 777 and so on.

The breakdown itself is covered by the twelve tests from #73; what is new here is which
seats are listed, which the browser run covers: with a legend and stacks it lists five
of six seats, with the legend emptied it disappears, and with every stack zeroed it
disappears. 269 tests still passing.

Co-Authored-By: Claude Opus 5 <[email protected]>
Claude-Session: https://claude.ai/code/session_015bnp7xKUPFFSpwkYNFaPgb
This commit is contained in:
2026-09-01 19:36:29 -06:00
co-authored by Claude Opus 5
parent d297c1a2c9
commit 65f201cdfd
3 changed files with 73 additions and 0 deletions
@@ -153,6 +153,12 @@
<div id="chipLegendList"></div>
<button id="addChipColorBtn" class="holdemBtn holdemBtnSmall">+ Add chip color</button>
<p class="fieldHint">Give each chip color a value, then count chips on a seat instead of typing a total.</p>
<div id="colourUp" hidden>
<h3 class="panelSubhead">Stacks in chips</h3>
<dl id="colourUpList" class="colourUpList"></dl>
<p class="fieldHint">The fewest chips that make each stack — for colouring up, or counting one out.</p>
</div>
</div>
</details>
@@ -1145,6 +1145,30 @@ button,
line-height: 1.4;
}
/* Each stack and the chips that make it, laid out like the shortcut legend below —
the thing being named on one line, the answer under it, so a dealer with a rack in
one hand reads down rather than across. */
.colourUpList {
margin: 0.2rem 0 0;
}
.colourUpWho {
color: #ddd;
font-size: 0.78rem;
font-variant-numeric: tabular-nums;
}
.colourUpChips {
margin: 0 0 0.45rem;
color: #9fb8a6;
font-size: 0.74rem;
font-variant-numeric: tabular-nums;
}
.colourUpChips:last-child {
margin-bottom: 0;
}
/* The shortcut legend. A touch device has no keys to press, so it doesn't get a panel
telling it about them — the same pointer question the touch-target rules ask. */
@media (pointer: coarse) {
@@ -667,6 +667,49 @@ const Render = {
list.appendChild(row);
});
this.renderColourUp();
},
// Each stack as the chips that make it.
//
// The legend has only ever read chips *into* an amount — counting what's in front
// of somebody. Colouring up at the end of a level is the same question backwards,
// and it's the one the dealer has to answer with a rack in one hand: $205 is four
// fifties and a five. So is counting a stack out for a player who's leaving.
//
// Only when there's a legend to work from and a stack to break down; a table that
// never set its chip colours up gets nothing, which is what it had before.
renderColourUp() {
const host = document.getElementById("colourUp");
const list = document.getElementById("colourUpList");
if (!host || !list) return;
const legend = this.state.chipLegend || [];
const rows = this.state.seats
.map((player, index) => ({ player, index }))
.filter(({ player }) => Betting.round(Number(player.stack) || 0) > 0)
.map(({ player, index }) => ({
name: HoldemState.displayName(player, index),
stack: Betting.round(Number(player.stack) || 0),
chips: Money.formatChipBreakdown(Number(player.stack) || 0, legend),
}))
.filter(row => row.chips);
host.hidden = rows.length === 0;
if (host.hidden) return;
list.innerHTML = "";
rows.forEach(row => {
const term = document.createElement("dt");
term.className = "colourUpWho";
term.textContent = `${row.name} — ${Money.format(row.stack)}`;
const detail = document.createElement("dd");
detail.className = "colourUpChips";
detail.textContent = row.chips;
list.appendChild(term);
list.appendChild(detail);
});
},
// ---- Pot breakdown ----