Show the side-pot breakdown before the showdown, not after

Dealing guides are consistent that the most common side-pot error isn't miscounting the chips, it's failing to announce the breakdown clearly before the showdown. The tool had the arithmetic right but only revealed it after the hand, one layer at a time, as the wizard asked who won each. The breakdown is now visible while the hand is still running: as soon as an all-in splits the money, the action bar lists the main pot and each side pot with the amount and who can win it, and the wizard repeats it under "Announce before the showdown" before asking for a winner. A hand with a single undivided pot shows nothing, so the line means something when it appears. Chips nobody could call are called what they are. Money above the largest live contribution was never contested — usually an overbet by someone who then folded — so it's listed as "Uncalled, back to X" rather than padding a side pot nobody can win. The wizard's leftover warning says the same thing instead of telling the dealer to un-fold someone to win it, which was the wrong advice for chips that should simply be pushed back. Co-Authored-By: Claude Sonnet 5 <[email protected]> Claude-Session: https://claude.ai/code/session_015bnp7xKUPFFSpwkYNFaPgb
2026-08-31 22:10:19 -06:00
parent dabf1100c9
commit ee25e2a4fa
5 changed files with 240 additions and 8 deletions
@@ -1102,6 +1102,67 @@ body.hasActionBar #holdemSidebar {
    white-space: nowrap;
 }

+/* ---------- Side-pot breakdown ---------- */
+
+.potBreakdown {
+    display: flex;
+    flex-direction: column;
+    gap: 0.2rem;
+    margin-bottom: 0.55rem;
+    padding: 0.4rem 0.55rem;
+    background: rgba(216, 180, 106, 0.07);
+    border: 1px solid rgba(216, 180, 106, 0.25);
+    border-radius: 8px;
+}
+
+.potBreakdownHeading {
+    margin: 0 0 0.35rem;
+    color: #d8b46a;
+    font-size: 0.68rem;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+}
+
+.potLayer {
+    display: flex;
+    align-items: baseline;
+    gap: 0.5rem;
+    font-size: 0.76rem;
+}
+
+.potLayerLabel {
+    color: #d8b46a;
+    font-weight: 600;
+    flex: none;
+}
+
+.potLayerAmount {
+    color: #f2f2f2;
+    font-variant-numeric: tabular-nums;
+    font-weight: 600;
+    flex: none;
+}
+
+.potLayerWho {
+    color: #9a9a9a;
+    flex: 1;
+    min-width: 0;
+    text-align: right;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.potBreakdownWizard {
+    margin-bottom: 1rem;
+}
+
+.potLayerReturn .potLayerLabel,
+.potLayerReturn .potLayerAmount {
+    color: #9a9a9a;
+    font-weight: 500;
+}
+
 .actionButtons {
    display: flex;
    gap: 0.5rem;
@@ -34,6 +34,9 @@ const ActionBar = {

        host.appendChild(this.renderStatus());

+        const breakdown = this.renderPotBreakdown();
+        if (breakdown) host.appendChild(breakdown);
+
        if (Betting.isHandOver(this.state)) {
            host.appendChild(this.renderHandOver());
        } else if (this.state.actingSeatIndex === null || this.state.actingSeatIndex === undefined) {
@@ -71,6 +74,28 @@ const ActionBar = {
        return row;
    },

+    // Shown only once someone is all-in and the money has actually split — a single
+    // undivided pot needs no announcement, and a line that's always there stops being
+    // read.
+    renderPotBreakdown() {
+        const contributions = this.state.seats.map((player, index) => ({
+            id: player.id,
+            index,
+            contribution: Betting.handTotal(player),
+            folded: player.folded,
+        }));
+
+        const nameById = new Map(
+            this.state.seats.map((player, index) => [player.id, HoldemState.displayName(player, index)])
+        );
+
+        return Render.buildPotBreakdown(
+            PotCalculator.layers(contributions),
+            PotCalculator.uncalledReturns(contributions),
+            id => nameById.get(id)
+        );
+    },
+
    button(label, className, onClick, sublabel) {
        const btn = document.createElement("button");
        btn.type = "button";
@@ -24,6 +24,79 @@ const PotCalculator = {
        return entries.filter(e => !e.folded && e.remaining > this.EPSILON);
    },

+    // Splits the money on the table into the main pot and any side pots, with who can
+    // win each. Read-only — this is what a dealer says out loud before the showdown
+    // ("main pot four-eighty, side pot ninety between seats 3 and 5"), which is the
+    // announcement that goes missing far more often than the arithmetic goes wrong.
+    //
+    // Every distinct all-in amount opens a new layer: each player pays into a layer up
+    // to their own contribution, and only players who reached that height can win it.
+    // Folded money stays in — it's dead money owed to whoever wins the layer it fell in.
+    layers(players) {
+        const live = players.filter(p => p.contribution > this.EPSILON);
+        if (live.length === 0) return [];
+
+        const heights = [...new Set(live.map(p => Math.round(p.contribution * 100)))].sort((a, b) => a - b);
+
+        const layers = [];
+        let floor = 0;
+        heights.forEach(height => {
+            const band = height - floor;
+            const payers = live.filter(p => Math.round(p.contribution * 100) >= height);
+            const amount = band * payers.length;
+            const eligible = payers.filter(p => !p.folded).map(p => p.id);
+
+            // A band nobody can win isn't a pot — it's an overbet that never got
+            // called, and it goes back to whoever put it in. Announcing it as a side
+            // pot would overstate what's actually being played for.
+            if (amount > 0 && eligible.length > 0) {
+                layers.push({ amount: amount / 100, eligible });
+            }
+            floor = height;
+        });
+
+        // Consecutive layers with the same set of eligible players are one pot to a
+        // dealer — nobody announces two side pots between the same two people.
+        const merged = [];
+        layers.forEach(layer => {
+            const previous = merged[merged.length - 1];
+            const sameEligibility =
+                previous &&
+                previous.eligible.length === layer.eligible.length &&
+                previous.eligible.every(id => layer.eligible.includes(id));
+
+            if (sameEligibility) {
+                previous.amount = Math.round((previous.amount + layer.amount) * 100) / 100;
+            } else {
+                merged.push({ ...layer });
+            }
+        });
+
+        return merged.map((layer, index) => ({
+            ...layer,
+            label: index === 0 ? "Main pot" : `Side pot ${index}`,
+        }));
+    },
+
+    // Chips nobody could call, which the dealer pushes back rather than into the pot.
+    // Anything above the biggest live contribution was never contested — most often an
+    // overbet by someone who then folded.
+    uncalledReturns(players) {
+        const contributing = players.filter(p => p.contribution > this.EPSILON);
+        const liveCents = contributing.filter(p => !p.folded).map(p => Math.round(p.contribution * 100));
+
+        // Nobody live at all means the fold flags are wrong, not that every chip on
+        // the table was uncalled. That's a correction for the dealer to make, so say
+        // nothing here and let the wizard ask them to fix it.
+        if (liveCents.length === 0) return [];
+
+        const cap = Math.max(...liveCents);
+
+        return contributing
+            .map(p => ({ id: p.id, amount: (Math.round(p.contribution * 100) - cap) / 100 }))
+            .filter(r => r.amount > this.EPSILON);
+    },
+
    // Awards the current pot layer to `winnerIds` (one id, or several for a split/tie).
    // The payout is capped at the smallest remaining contribution among the winners —
    // that's the classic side-pot rule: an all-in player can only win what everyone at
@@ -18,13 +18,16 @@ const PotWizard = {
        this.playerLabelById = new Map(
            players.map(p => [p.id, this.labelFor(p, state.seats.indexOf(p))])
        );
-        this.entries = PotCalculator.buildEntries(
-            players.map(p => ({
-                id: p.id,
-                contribution: HoldemState.computeContribution(p, state.chipLegend, state.basePotAmount),
-                folded: p.folded,
-            }))
-        );
+        const contributions = players.map(p => ({
+            id: p.id,
+            contribution: HoldemState.computeContribution(p, state.chipLegend, state.basePotAmount),
+            folded: p.folded,
+        }));
+        this.entries = PotCalculator.buildEntries(contributions);
+        // Kept so the wizard can show the whole breakdown up front, not just the layer
+        // it happens to be asking about.
+        this.layers = PotCalculator.layers(contributions);
+        this.returns = PotCalculator.uncalledReturns(contributions);
        this.log = [];
        this.totals = new Map();

@@ -58,6 +61,7 @@ const PotWizard = {

        const body = document.getElementById("potWizardBody");
        body.innerHTML = "";
+        if (this.log.length === 0) body.appendChild(this.renderBreakdown());
        body.appendChild(this.renderLog());

        const remaining = PotCalculator.totalPot(this.entries.filter(e => e.remaining > PotCalculator.EPSILON));
@@ -65,7 +69,17 @@ const PotWizard = {
        if (contenders.length === 0 && remaining > PotCalculator.EPSILON) {
            const warning = document.createElement("p");
            warning.className = "potWizardPrompt";
-            warning.textContent = `${Money.format(remaining)} is still unassigned, but every remaining player is marked Folded. Uncheck Fold on whoever should win it.`;
+
+            // Money left over because nobody could call it isn't a pot anyone won —
+            // it goes back to whoever put it in. Telling the dealer to un-fold someone
+            // to "win" it would be wrong.
+            const returned = (this.returns || []).reduce((sum, r) => sum + r.amount, 0);
+            if (Math.abs(returned - remaining) <= PotCalculator.EPSILON && returned > 0) {
+                const who = this.returns.map(r => this.playerLabelById.get(r.id)).join(", ");
+                warning.textContent = `${Money.format(remaining)} was never called — push it back to ${who} rather than paying it out.`;
+            } else {
+                warning.textContent = `${Money.format(remaining)} is still unassigned, but every remaining player is marked Folded. Uncheck Fold on whoever should win it.`;
+            }
            body.appendChild(warning);
            body.appendChild(this.renderSummary());
            return;
@@ -131,6 +145,20 @@ const PotWizard = {
        });
    },

+    // The announcement, spelled out before anyone is asked to pick a winner: what the
+    // main pot is worth, what each side pot is worth, and who can win each.
+    renderBreakdown() {
+        const node = Render.buildPotBreakdown(
+            this.layers || [],
+            this.returns || [],
+            id => this.playerLabelById.get(id),
+            "Announce before the showdown"
+        );
+        if (!node) return document.createDocumentFragment();
+        node.classList.add("potBreakdownWizard");
+        return node;
+    },
+
    renderLog() {
        const wrap = document.createElement("div");
        wrap.className = "potWizardLog";
@@ -520,6 +520,51 @@ const Render = {
        });
    },

+    // ---- Pot breakdown ----
+
+    // Shared by the action bar (live, mid-hand) and the pot wizard (before winners are
+    // picked), because both are showing the dealer the same announcement.
+    buildPotBreakdown(pots, returns, nameFor, heading) {
+        if (pots.length < 2 && returns.length === 0) return null;
+
+        const wrap = document.createElement("div");
+        wrap.className = "potBreakdown";
+
+        if (heading) {
+            const title = document.createElement("p");
+            title.className = "potBreakdownHeading";
+            title.textContent = heading;
+            wrap.appendChild(title);
+        }
+
+        const addRow = (label, amount, who, className) => {
+            const row = document.createElement("div");
+            row.className = `potLayer ${className || ""}`;
+
+            const labelEl = document.createElement("span");
+            labelEl.className = "potLayerLabel";
+            labelEl.textContent = label;
+
+            const amountEl = document.createElement("span");
+            amountEl.className = "potLayerAmount";
+            amountEl.textContent = Money.format(amount);
+
+            const whoEl = document.createElement("span");
+            whoEl.className = "potLayerWho";
+            whoEl.textContent = who;
+
+            row.appendChild(labelEl);
+            row.appendChild(amountEl);
+            row.appendChild(whoEl);
+            wrap.appendChild(row);
+        };
+
+        pots.forEach(pot => addRow(pot.label, pot.amount, pot.eligible.map(nameFor).join(", ")));
+        returns.forEach(ret => addRow("Uncalled", ret.amount, `back to ${nameFor(ret.id)}`, "potLayerReturn"));
+
+        return wrap;
+    },
+
    // ---- Session standings ----

    renderStandings() {