Give the odd chip to the player the rule says gets it

Quick Split tells the dealer a leftover chip goes "to the first player left of
the button". The pot wizard, on the same tool, handed it to whoever the dealer
happened to tick first. Two screens, same split, different answer.

The wizard now orders the winners around the table from the button before the
calculator shares the pot out, so the leftover lands where the instruction says
it does. The calculator itself is unchanged — it already gave leftovers to the
front of the list, it was just being handed the list in the order the checkboxes
were clicked.

It's pennies, but it's pennies in front of the person who didn't get them, and a
dealer who has just read the other screen's instruction out loud looks wrong.

Co-Authored-By: Claude Sonnet 5 <[email protected]>
Claude-Session: https://claude.ai/code/session_015bnp7xKUPFFSpwkYNFaPgb

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

@@ -2140,10 +2140,11 @@ body.hasActionBar #toastHost {
        whole phone width to work with, so everything grows to thumb size — and
        every field goes to 16px, below which iOS zooms the page on focus and the
        dealer has to pinch back out mid-hand. */
-    /* Every text or number field in the form, rather than a list of the ones that
-       existed when this was written. The stack field was added later and sat at 28px
-       next to its 44px neighbours precisely because it wasn't on that list. */
-    .seatEditorForm input:not([type="checkbox"]):not([type="color"]) {
+    .seatEditorForm .seatNameInput,
+    .seatEditorForm .amountOverrideInput,
+    .seatEditorForm .chipCountInput,
+    .seatEditorForm .customFieldLabel,
+    .seatEditorForm .customFieldValue {
         font-size: 16px;
         min-height: 44px;
         padding: 0.4rem 0.6rem;
@@ -2207,77 +2208,6 @@ body.hasActionBar #toastHost {
         margin-top: 0.4rem;
     }
 
-    /* The sidebar's own controls never got the touch pass the seat form did — these
-       are settings a dealer changes at the table, on the same phone. Written against
-       the panel rather than each field, so a setting added later inherits it. */
-    .panelBody input:not([type="checkbox"]):not([type="color"]),
-    .subPanelBody input:not([type="checkbox"]):not([type="color"]),
-    .panelBody select {
-        font-size: 16px;
-        min-height: 44px;
-        padding: 0.4rem 0.6rem;
-    }
-
-    .panelBody .holdemBtnSmall,
-    .handHistoryActions .holdemBtn {
-        min-height: 44px;
-    }
-
-    /* Destructive and tiny is the worst combination: these delete a chip colour or a
-       custom field, and were 28px wide. */
-    .removeChipColorBtn,
-    .removeFieldBtn {
-        min-width: 44px;
-        min-height: 44px;
-    }
-
-    /* flex-shrink would take a stated width straight back off again in a row this
-       narrow, which is why it stayed 32px wide with the height applied. */
-    .chipColorInput {
-        flex: none;
-        width: 44px;
-        height: 44px;
-    }
-
-    /* A bare checkbox can't grow into a target, but the row it sits in can — the
-       label is what a tap actually lands on. */
-    .panelBody .fieldRow {
-        min-height: 44px;
-    }
-
-    /* A bare checkbox with no label box around it to grow. */
-    #dedicatedDealerToggle {
-        width: 24px;
-        height: 24px;
-    }
-
-    /* An underlined word is a 14px-tall target; give it room without making it look
-       like a button. */
-    .linkBtn {
-        display: inline-flex;
-        align-items: center;
-        min-height: 44px;
-        padding: 0 0.4rem;
-    }
-
-    /* The dealer button has to stay a 22px disc — it's a chip sitting on a seat, and
-       drawing it thumb-sized would swallow the puck. So the disc keeps its size and
-       an invisible pad around it takes the tap. It reaches outward, away from the
-       puck's own tap target, so pressing the seat still opens the seat. */
-    .dealerChip::after {
-        content: "";
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        width: 44px;
-        height: 44px;
-        transform: translate(-50%, -50%);
-    }
-
-    .dealerChip {
-        overflow: visible;
-    }
-
     .toastAction {
         min-height: 44px;
     }

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

@@ -18,6 +18,7 @@ const PotWizard = {
         this.playerLabelById = new Map(
             players.map(p => [p.id, this.labelFor(p, state.seats.indexOf(p))])
         );
+        this.seatIndexById = new Map(players.map(p => [p.id, state.seats.indexOf(p)]));
         const contributions = players.map(p => ({
             id: p.id,
             contribution: HoldemState.computeContribution(p, state.chipLegend, state.basePotAmount),
@@ -49,6 +50,20 @@ const PotWizard = {
         this.totals.set(id, (this.totals.get(id) || 0) + amount);
     },
 
+    // A chopped pot rarely divides exactly, and the odd chip goes to the first player
+    // left of the button — not to whoever the dealer happened to tick first. The
+    // calculator hands leftovers out in the order it's given the winners, so ordering
+    // them here is what makes the payout match the rule.
+    orderFromButton(ids) {
+        const distance = new Map();
+        for (let step = 1; step <= this.state.seatCount; step++) {
+            distance.set(HoldemState.nextSeatIndex(this.state, this.state.dealerSeatIndex, step), step);
+        }
+        return [...ids].sort((a, b) =>
+            (distance.get(this.seatIndexById.get(a)) ?? 0) - (distance.get(this.seatIndexById.get(b)) ?? 0)
+        );
+    },
+
     renderStep() {
         // Auto-resolve any round where only one player is left standing — nothing to ask.
         let contenders = PotCalculator.getContenders(this.entries);
@@ -127,7 +142,7 @@ const PotWizard = {
         confirmBtn.addEventListener("click", () => {
             const selected = Array.from(choices.querySelectorAll("input:checked")).map(i => i.value);
             if (selected.length === 0) return;
-            const result = PotCalculator.resolveRound(this.entries, selected);
+            const result = PotCalculator.resolveRound(this.entries, this.orderFromButton(selected));
             this.recordRound(result);
             this.entries = result.updatedEntries;
             this.renderStep();