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:
@@ -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 ----
|
||||
|
||||
Reference in New Issue
Block a user