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

JoshHeaps.Net/Pages/Casino/TexasHoldem.cshtml

@@ -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>
 

JoshHeaps.Net/wwwroot/css/casino/holdem.css

@@ -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) {

JoshHeaps.Net/wwwroot/js/casino/holdem/render.js

@@ -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 ----

tests/holdem/uiAudit.js

@@ -368,8 +368,18 @@ const LayoutAudit = {
             : [...document.querySelectorAll("*")];
 
         nodes.forEach(el => {
-            if (el.children.length > 0) return;               // leaf text only
+            // An element's *own* text, not its descendants' — they get measured on
-            const text = (el.textContent || "").trim();
+            // 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
+            // aria-hidden used to exempt text here, on the grounds that decoration
-            // to be barely there, and holding it to a reading threshold would mean
+            // marked for screen readers was decoration for everyone. Those are two
-            // making it not a watermark. Marked aria-hidden so screen readers skip it
+            // different questions and the answer differs: the bet chips on the felt are
-            // too, which is the same claim expressed where it also does some good.
+            // aria-hidden because their amounts are already announced by the seat and
-            if (el.closest("[aria-hidden='true']")) return;
+            // 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;