Merge branch 'master' into feature/casino-holdem-rulings

Add a rulings reference for the calls that come up mid-hand
The tool handles the money; the other half of dealing is the calls. A home-game dealer who isn't a pro has to rule on a misdeal or a prematurely turned board card with a table watching, and the usual outcome is an argument settled by whoever is loudest. A "Common rulings" link under the table opens a reference for exactly the situations that come up: what counts as a misdeal, what to do when the fourth board card gets turned before the betting is finished, and how acting out of turn is normally treated. It follows the Tournament Directors Association rules, and says plainly that house rules win and that a dispute gets settled between hands rather than during one. It's a sheet rather than a sixth sidebar panel — a dealer consults this rarely and needs it immediately, which is the opposite of what a panel is for. Co-Authored-By: Claude Sonnet 5 <[email protected]> Claude-Session: https://claude.ai/code/session_015bnp7xKUPFFSpwkYNFaPgb
2026-08-31 23:56:32 -06:00 · 2026-08-31 23:35:59 -06:00
7 changed files with 184 additions and 334 deletions
@@ -35,6 +35,9 @@
                <div id="seatsLayer"></div>
            </div>
            <p id="tableHint" class="tableHint"></p>
            <p class="tableHintActions">
                <button type="button" id="openRulingsBtn" class="linkBtn">Common rulings</button>
            </p>
        </section>
        <aside id="holdemSidebar">
@@ -235,6 +238,54 @@
    </div>
 </template>
 <div id="rulingsOverlay" hidden>
    <div id="rulingsSheet" role="dialog" aria-labelledby="rulingsTitle">
        <div class="seatSheetGrip" aria-hidden="true"></div>
        <div class="rulingsHeader">
            <h2 id="rulingsTitle">Common rulings</h2>
            <button id="closeRulingsBtn" class="holdemBtn holdemBtnSmall holdemBtnGhost" type="button">Done</button>
        </div>
        <p class="rulingsIntro">
            The conventions most rooms follow, for the calls that come up mid-hand.
            Your house rules always win — and settle a dispute before the next hand,
            not during it.
        </p>
        <section class="ruling">
            <h3>Redeal it — misdeal</h3>
            <ul>
                <li>The first card goes to the wrong seat.</li>
                <li>A seat entitled to a hand gets dealt out, or a seat that isn't entitled gets dealt in.</li>
                <li>Two or more boxed cards turn up on the initial deal.</li>
                <li>Either of the first two cards is exposed by dealer error.</li>
            </ul>
        </section>
        <section class="ruling">
            <h3>A board card turned too early</h3>
            <p>
                If the fourth board card gets turned before the betting round is finished,
                that card is out of play for the round. Finish the betting, then burn and
                turn what would have been the fifth card in the fourth card's place.
            </p>
        </section>
        <section class="ruling">
            <h3>Acting out of turn</h3>
            <p>
                A one-off is usually just backed up if no one has acted behind them.
                Doing it repeatedly is what earns a penalty.
            </p>
        </section>
        <p class="rulingsSource">
            Follows the Tournament Directors Association rules, which most rooms and
            home games take their lead from.
        </p>
    </div>
 </div>
 <div id="seatMenuOverlay" hidden>
    <div id="seatMenuSheet" role="dialog" aria-labelledby="seatMenuTitle">
        <div class="seatSheetGrip" aria-hidden="true"></div>
@@ -11,11 +11,6 @@
        <p class="splitSubtitle">Chop a pot without setting up a table.</p>
    </header>
    <div id="modeToggle" class="chipRow" role="group" aria-label="How the money went in">
        <button type="button" id="modeEvenBtn" class="choiceChip selected">Everyone matched</button>
        <button type="button" id="modeUnevenBtn" class="choiceChip">Someone's all-in</button>
    </div>
    <div id="splitResult" aria-live="polite">
        <div id="splitResultLabel">Each player gets</div>
        <div id="splitResultAmount">$0.00</div>
@@ -23,18 +18,7 @@
        <div id="splitDustNote" hidden></div>
    </div>
-    <div id="unevenResult" hidden aria-live="polite">
+    <section class="splitField">
        <div id="unevenPots"></div>
        <p id="unevenEmpty" class="unevenEmpty">Enter what each player put in.</p>
    </div>
    <section class="splitField unevenOnly" hidden>
        <span class="splitLabel">What each player put in</span>
        <div id="unevenRows"></div>
        <button type="button" id="addPlayerBtn" class="splitBtn splitBtnGhost">+ Add player</button>
    </section>
    <section class="splitField evenOnly">
        <label for="potInput" class="splitLabel">Pot</label>
        <div class="potInputWrap">
            <span class="potCurrency">$</span>
@@ -44,12 +28,12 @@
        </div>
    </section>
-    <section class="splitField evenOnly">
+    <section class="splitField">
        <span class="splitLabel" id="waysLabel">Split between</span>
        <div id="waysChoices" class="chipRow" role="group" aria-labelledby="waysLabel"></div>
    </section>
-    <section class="splitField evenOnly">
+    <section class="splitField">
        <span class="splitLabel" id="chipLabel">Smallest chip in play</span>
        <div id="chipChoices" class="chipRow" role="group" aria-labelledby="chipLabel"></div>
    </section>
@@ -59,30 +43,12 @@
        <a href="/casino/texasholdem" class="splitBtn splitBtnGhost">Full dealer table →</a>
    </div>
-    <p class="splitFootnote evenOnly">
+    <p class="splitFootnote">
-        If somebody was all-in for less than the others, switch to
+        Uneven pots — someone all-in for less — need the side-pot walkthrough on the
-        <strong>Someone's all-in</strong> above.
+        <a href="/casino/texasholdem">full table</a>.
    </p>
    <p class="splitFootnote unevenOnly" hidden>
        Pots are listed with who can win each. Award them by hand strength, best hand
        first. Nothing here is saved — the <a href="/casino/texasholdem">full table</a>
        keeps a log.
    </p>
 </div>
 <template id="unevenRowTemplate">
    <div class="unevenRow">
        <span class="unevenRowLabel"></span>
        <div class="unevenAmountWrap">
            <span class="unevenCurrency">$</span>
            <input type="text" class="unevenAmount" inputmode="decimal" autocomplete="off" placeholder="0" />
        </div>
        <button type="button" class="unevenFoldBtn" aria-pressed="false">Folded</button>
        <button type="button" class="unevenRemoveBtn" aria-label="Remove player">✕</button>
    </div>
 </template>
@section Styles {
    <link href="/css/casino/quicksplit.css?v=@ViewData["cssVersion"]" rel="stylesheet" type="text/css" />
 }
@@ -90,6 +56,5 @@
@section Scripts {
    <script src="~/js/casino/holdem/money.js?v=@ViewData["cssVersion"]"></script>
    <script src="~/js/casino/holdem/splitCalculator.js?v=@ViewData["cssVersion"]"></script>
    <script src="~/js/casino/holdem/potCalculator.js?v=@ViewData["cssVersion"]"></script>
    <script src="~/js/casino/holdem/quickSplit.js?v=@ViewData["cssVersion"]"></script>
 }
@@ -585,6 +585,121 @@ body {
    font-weight: 400;
 }
 /* ---------- Rulings reference ---------- */
 .tableHintActions {
    margin: 0.35rem 0 0;
    text-align: center;
 }
 .linkBtn {
    background: none;
    border: none;
    padding: 0;
    color: #a9782f;
    font-family: inherit;
    font-size: 0.78rem;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
 }
 .linkBtn:hover {
    color: #d8b46a;
 }
 #rulingsOverlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 97;
 }
 #rulingsOverlay[hidden] {
    display: none;
 }
 #rulingsSheet {
    width: 100%;
    max-width: 460px;
    max-height: 86vh;
    overflow-y: auto;
    background: linear-gradient(180deg, #242424, #1a1a1a);
    border: 1px solid #3a3a3a;
    border-bottom: none;
    border-radius: 16px 16px 0 0;
    padding: 0.35rem 1.1rem calc(1.2rem + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -14px 40px rgba(0, 0, 0, 0.65);
 }
 .rulingsHeader {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.5rem;
 }
 .rulingsHeader h2 {
    flex: 1;
    margin: 0;
    font-size: 1.05rem;
    font-weight: 500;
    color: #f5f5f5;
 }
 .rulingsIntro {
    margin: 0 0 1rem;
    color: #9a9a9a;
    font-size: 0.8rem;
    line-height: 1.5;
 }
 .ruling {
    margin-bottom: 1rem;
    padding-left: 0.7rem;
    border-left: 2px solid rgba(216, 180, 106, 0.4);
 }
 .ruling h3 {
    margin: 0 0 0.35rem;
    color: #d8b46a;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.03em;
 }
 .ruling p,
 .ruling li {
    color: #c4c4c4;
    font-size: 0.82rem;
    line-height: 1.5;
 }
 .ruling p {
    margin: 0;
 }
 .ruling ul {
    margin: 0;
    padding-left: 1.1rem;
 }
 .ruling li + li {
    margin-top: 0.25rem;
 }
 .rulingsSource {
    margin: 0;
    padding-top: 0.6rem;
    border-top: 1px solid #2c2c2c;
    color: #7a7a7a;
    font-size: 0.72rem;
    line-height: 1.45;
 }
 /* ---------- Seat long-press menu ---------- */
 /* Held down, before the menu opens — the only feedback that a press is being
@@ -45,171 +45,6 @@ body {
    font-size: 0.85rem;
 }
 /* ---------- Mode toggle ---------- */
 #modeToggle {
    margin-bottom: 1.1rem;
 }
 /* ---------- Uneven amounts ---------- */
 #unevenRows {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin-bottom: 0.6rem;
 }
 .unevenRow {
    display: flex;
    align-items: center;
    gap: 0.45rem;
 }
 .unevenRowLabel {
    flex: none;
    width: 2rem;
    color: #8f8f8f;
    font-size: 0.8rem;
    font-weight: 600;
 }
 .unevenAmountWrap {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    background: #141414;
    border: 1px solid #3a3a3a;
    border-radius: 10px;
    padding: 0 0.6rem;
 }
 .unevenAmountWrap:focus-within {
    border-color: #d8b46a;
 }
 .unevenCurrency {
    color: #777;
 }
 .unevenAmount {
    flex: 1;
    min-width: 0;
    background: none;
    border: none;
    outline: none;
    color: #f2f2f2;
    font-family: inherit;
    font-size: 16px;
    font-variant-numeric: tabular-nums;
    padding: 0.6rem 0;
 }
 .unevenFoldBtn {
    flex: none;
    min-height: 44px;
    padding: 0 0.6rem;
    border-radius: 9px;
    border: 1px solid #3a3a3a;
    background: #232323;
    color: #8f8f8f;
    font-family: inherit;
    font-size: 0.72rem;
    cursor: pointer;
 }
 .unevenFoldBtn.selected {
    background: linear-gradient(180deg, #3d1f1f, #2c1515);
    border-color: #5b2626;
    color: #ffd6d6;
 }
 .unevenRemoveBtn {
    flex: none;
    width: 30px;
    height: 44px;
    border: none;
    background: none;
    color: #6a6a6a;
    font-size: 0.85rem;
    cursor: pointer;
 }
 .unevenRemoveBtn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
 }
 #unevenResult {
    background: linear-gradient(160deg, #1f2a21, #161c17);
    border: 1px solid #2c3a2f;
    border-radius: 14px;
    padding: 0.9rem 1rem;
    margin-bottom: 1.5rem;
 }
 #unevenResult[hidden] {
    display: none;
 }
 .unevenPot {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    padding: 0.3rem 0;
    font-size: 0.85rem;
 }
 .unevenPot + .unevenPot {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
 }
 .unevenPotLabel {
    flex: none;
    color: #d8b46a;
    font-weight: 600;
 }
 .unevenPotAmount {
    flex: none;
    color: #f2f2f2;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
 }
 .unevenPotWho {
    flex: 1;
    min-width: 0;
    text-align: right;
    color: #9a9a9a;
    font-size: 0.78rem;
 }
 .unevenPotReturn .unevenPotLabel,
 .unevenPotReturn .unevenPotAmount {
    color: #9a9a9a;
    font-weight: 500;
 }
 .unevenPotTotal {
    margin-top: 0.15rem;
    border-top: 1px solid rgba(255, 255, 255, 0.14) !important;
 }
 .unevenPotTotal .unevenPotLabel {
    color: #8f9d92;
    font-weight: 500;
 }
 .unevenEmpty {
    margin: 0;
    color: #8f9d92;
    font-size: 0.82rem;
    line-height: 1.45;
 }
 /* ---------- The answer ---------- */
 #splitResult {
@@ -269,12 +104,6 @@ body {
    margin-bottom: 1.35rem;
 }
 /* A `display` declaration outranks the browser's own [hidden] rule, so anything
   given one has to opt back out explicitly or toggling `hidden` does nothing. */
 [hidden] {
    display: none !important;
 }
 .splitLabel {
    display: block;
    margin-bottom: 0.5rem;
@@ -260,6 +260,17 @@ document.addEventListener("DOMContentLoaded", () => {
    document.getElementById("closeSeatEditorBtn").addEventListener("click", () => Render.closeSeatEditor());
    const rulingsOverlay = document.getElementById("rulingsOverlay");
    const closeRulings = () => { rulingsOverlay.hidden = true; };
    document.getElementById("openRulingsBtn").addEventListener("click", () => { rulingsOverlay.hidden = false; });
    document.getElementById("closeRulingsBtn").addEventListener("click", closeRulings);
    rulingsOverlay.addEventListener("click", e => {
        if (e.target === rulingsOverlay) closeRulings();
    });
    document.addEventListener("keydown", e => {
        if (e.key === "Escape" && !rulingsOverlay.hidden) closeRulings();
    });
    document.getElementById("seatMenuCancelBtn").addEventListener("click", () => SeatMenu.close());
    document.getElementById("seatMenuOverlay").addEventListener("click", e => {
        if (e.target.id === "seatMenuOverlay") SeatMenu.close();
@@ -15,28 +15,12 @@ const QuickSplit = {
    ways: 2,
    chip: 1,
    // "even" is the common case — one pot, everyone matched. "uneven" is the one this
    // screen used to send people back to the full table for: somebody all-in for less,
    // so the money splits into a main pot and side pots.
    mode: "even",
    entries: [],
    mount() {
        this.potInput = document.getElementById("potInput");
        this.clearPotBtn = document.getElementById("clearPotBtn");
        this.entries = [{ amount: "", folded: false }, { amount: "", folded: false }, { amount: "", folded: false }];
        this.renderWayChoices();
        this.renderChipChoices();
        this.renderUnevenRows();
        document.getElementById("modeEvenBtn").addEventListener("click", () => this.setMode("even"));
        document.getElementById("modeUnevenBtn").addEventListener("click", () => this.setMode("uneven"));
        document.getElementById("addPlayerBtn").addEventListener("click", () => {
            this.entries.push({ amount: "", folded: false });
            this.renderUnevenRows();
            this.update();
        });
        this.potInput.addEventListener("input", () => {
            this.sanitizePotInput();
@@ -143,112 +127,7 @@ const QuickSplit = {
        });
    },
    setMode(mode) {
        this.mode = mode;
        document.getElementById("modeEvenBtn").classList.toggle("selected", mode === "even");
        document.getElementById("modeUnevenBtn").classList.toggle("selected", mode === "uneven");
        document.querySelectorAll(".evenOnly").forEach(el => { el.hidden = mode !== "even"; });
        document.querySelectorAll(".unevenOnly").forEach(el => { el.hidden = mode !== "uneven"; });
        document.getElementById("splitResult").hidden = mode !== "even";
        document.getElementById("unevenResult").hidden = mode !== "uneven";
        this.update();
    },
    renderUnevenRows() {
        const host = document.getElementById("unevenRows");
        const template = document.getElementById("unevenRowTemplate");
        host.innerHTML = "";
        this.entries.forEach((entry, index) => {
            const row = template.content.firstElementChild.cloneNode(true);
            row.querySelector(".unevenRowLabel").textContent = `P${index + 1}`;
            const amount = row.querySelector(".unevenAmount");
            amount.value = entry.amount;
            amount.setAttribute("aria-label", `Player ${index + 1} amount`);
            amount.addEventListener("input", () => {
                entry.amount = amount.value.replace(/[^0-9.]/g, "").replace(/(\..*)\./g, "$1");
                if (entry.amount !== amount.value) amount.value = entry.amount;
                this.update();
            });
            // Folded money stays in the pot as dead money, but its owner can't win any
            // of it — which is exactly the distinction that makes side pots tricky.
            const fold = row.querySelector(".unevenFoldBtn");
            fold.classList.toggle("selected", entry.folded);
            fold.setAttribute("aria-pressed", String(entry.folded));
            fold.addEventListener("click", () => {
                entry.folded = !entry.folded;
                this.renderUnevenRows();
                this.update();
            });
            const remove = row.querySelector(".unevenRemoveBtn");
            remove.disabled = this.entries.length <= 2;
            remove.addEventListener("click", () => {
                this.entries.splice(index, 1);
                this.renderUnevenRows();
                this.update();
            });
            host.appendChild(row);
        });
    },
    updateUneven() {
        const players = this.entries
            .map((entry, index) => ({ id: `P${index + 1}`, contribution: Number(entry.amount) || 0, folded: entry.folded }))
            .filter(p => p.contribution > 0);
        const pots = PotCalculator.layers(players);
        const returns = PotCalculator.uncalledReturns(players);
        const host = document.getElementById("unevenPots");
        const empty = document.getElementById("unevenEmpty");
        host.innerHTML = "";
        if (pots.length === 0 && returns.length === 0) {
            empty.hidden = false;
            empty.textContent = players.length === 0
                ? "Enter what each player put in."
                : "Nobody left who can win — un-fold whoever should take it.";
            return;
        }
        empty.hidden = true;
        const addRow = (label, amount, who, className) => {
            const row = document.createElement("div");
            row.className = `unevenPot ${className || ""}`;
            const name = document.createElement("span");
            name.className = "unevenPotLabel";
            name.textContent = label;
            const value = document.createElement("span");
            value.className = "unevenPotAmount";
            value.textContent = Money.format(amount);
            const eligible = document.createElement("span");
            eligible.className = "unevenPotWho";
            eligible.textContent = who;
            row.appendChild(name);
            row.appendChild(value);
            row.appendChild(eligible);
            host.appendChild(row);
        };
        pots.forEach(pot => addRow(pot.label, pot.amount, pot.eligible.join(", ")));
        returns.forEach(ret => addRow("Uncalled", ret.amount, `back to ${ret.id}`, "unevenPotReturn"));
        const total = players.reduce((sum, p) => sum + p.contribution, 0);
        addRow("On the table", Math.round(total * 100) / 100, "", "unevenPotTotal");
    },
    update() {
        if (this.mode === "uneven") {
            this.updateUneven();
            return;
        }
        const potValue = Number(this.potInput.value);
        const pot = Number.isNaN(potValue) ? 0 : potValue;
        this.clearPotBtn.hidden = this.potInput.value === "";
@@ -35,7 +35,7 @@ const Shortcuts = {
    // An overlay owns the keyboard while it's up: the confirm dialog already binds
    // Enter and Escape, and the card picker and seat menu are modal.
    overlayOpen() {
-        return ["confirmOverlay", "potWizardOverlay", "cardPickerOverlay", "seatMenuOverlay"]
+        return ["confirmOverlay", "potWizardOverlay", "cardPickerOverlay", "seatMenuOverlay", "rulingsOverlay"]
            .some(id => {
                const el = document.getElementById(id);
                return el && !el.hidden;