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
Close two blind spots in the contrast check
2026-09-01 19:36:29 -06:00 · 2026-09-01 19:21:06 -06:00
4 changed files with 97 additions and 7 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 ----
@@ -368,8 +368,18 @@ const LayoutAudit = {
            : [...document.querySelectorAll("*")];

        nodes.forEach(el => {
-            if (el.children.length > 0) return;               // leaf text only
-            const text = (el.textContent || "").trim();
+            // An element's *own* text, not its descendants' — they get measured on
+            // their own turn, against their own colour.
+            //
+            // This used to be "leaf elements only", which quietly stopped measuring
+            // anything the moment a child was added to it. The undo control went that
+            // way the day a <kbd> was appended to it: its label became invisible to
+            // this check, with no sign that anything had changed.
+            const text = [...el.childNodes]
+                .filter(node => node.nodeType === 3)
+                .map(node => node.textContent)
+                .join(" ")
+                .trim();
            if (!text) return;
            const rect = el.getBoundingClientRect();
            if (rect.width === 0 || rect.height === 0) return;
@@ -390,11 +400,18 @@ const LayoutAudit = {
                unmeasured.push(`${this.describe(el)} :: faded (opacity ${opacity}), contrast not checked`);
                return;
            }
-            // Decoration is exempt by definition: the watermark on the felt is meant
-            // to be barely there, and holding it to a reading threshold would mean
-            // making it not a watermark. Marked aria-hidden so screen readers skip it
-            // too, which is the same claim expressed where it also does some good.
-            if (el.closest("[aria-hidden='true']")) return;
+            // aria-hidden used to exempt text here, on the grounds that decoration
+            // marked for screen readers was decoration for everyone. Those are two
+            // different questions and the answer differs: the bet chips on the felt are
+            // aria-hidden because their amounts are already announced by the seat and
+            // the action bar, and repeating them would be noise — but they are exactly
+            // what a sighted dealer reads the felt for, and this check had stopped
+            // looking at them. Hiding something from one audience is not a claim about
+            // whether the other audience can read it.
+            //
+            // Nothing is exempt now. If something genuinely decorative turns up, it
+            // should say so in its own words rather than borrowing an attribute that
+            // means something else.

            const fgRaw = this.parseColour(style.color);
            if (!fgRaw) return;