Shorten the rulings index to the words a dealer would say

Last change added an index to the rulings sheet and I wrote down what it cost: 342px at the top of a 390px-wide sheet, so a dealer reading straight through scrolls past the whole thing first. That was an honest trade at the time. It is also fixable. The index was labelled with the section headings, which are sentences -- "A short all-in doesn't reopen the betting" -- so nine of them stacked one per row. A dealer hunting for that ruling is looking for the words "short all-in", not the sentence. Misdeal Board card early Out of turn Short all-in Uncalled bet Oversized chip Minimum raise Odd chip String bet phone 342px -> 143px 9 rows -> 3 desktop ~200 -> 70px -> 2 landscape -> 94px -> 2 The first ruling now starts 309px into the sheet on a phone rather than 440. Each short label lives on its own section as data-short, next to the heading it shortens, and the index falls back to the heading when there is not one -- so a ruling added later still appears, still without anyone having to write it twice. The full sentence stays as the button's aria-label, so the short label never costs a screen reader the heading. Checked at four sizes across touch and pointer contexts: nine labels, nine aria-labels, every chip 44px on touch, jumping still lands and focuses the right heading, contrast clean, no console errors. 244 tests still passing. Also looked at, and left alone: the card picker refuses a card already dealt -- disabled, titled "Already dealt to Ann" -- and every one of its 52 buttons clears 44px. A messy nine-seat table with 25/50 blinds, two folded players, a busted seat, accented and hyphenated names, a $125,000 stack and a filled notes field audits clean at every size but the landscape phone already known from #63. Co-Authored-By: Claude Opus 5 <[email protected]> Claude-Session: https://claude.ai/code/session_015bnp7xKUPFFSpwkYNFaPgb
Get to the right ruling in one tap, and cover the string bet
2026-09-01 17:36:37 -06:00 · 2026-09-01 17:21:40 -06:00
3 changed files with 115 additions and 9 deletions
@@ -294,7 +294,9 @@
            not during it.
        </p>

-        <section class="ruling">
+        <nav id="rulingsIndex" class="rulingsIndex" aria-label="Jump to a ruling"></nav>
+
+        <section class="ruling" data-short="Misdeal">
            <h3>Redeal it — misdeal</h3>
            <ul>
                <li>The first card goes to the wrong seat.</li>
@@ -304,7 +306,7 @@
            </ul>
        </section>

-        <section class="ruling">
+        <section class="ruling" data-short="Board card early">
            <h3>A board card turned too early</h3>
            <p>
                If the fourth board card gets turned before the betting round is finished,
@@ -313,7 +315,7 @@
            </p>
        </section>

-        <section class="ruling">
+        <section class="ruling" data-short="Out of turn">
            <h3>Acting out of turn</h3>
            <p>
                A one-off is usually just backed up if no one has acted behind them.
@@ -321,7 +323,7 @@
            </p>
        </section>

-        <section class="ruling">
+        <section class="ruling" data-short="Short all-in">
            <h3>A short all-in doesn't reopen the betting</h3>
            <p>
                Somebody shoving in less than a full raise — say $3 more when the last
@@ -336,7 +338,7 @@
            </p>
        </section>

-        <section class="ruling">
+        <section class="ruling" data-short="Uncalled bet">
            <h3>Chips nobody called come back</h3>
            <p>
                Bet more than anyone was able to call and the excess is returned to you
@@ -346,7 +348,7 @@
            </p>
        </section>

-        <section class="ruling">
+        <section class="ruling" data-short="Oversized chip">
            <h3>One big chip, nothing said</h3>
            <p>
                The most common argument at a home table. A player facing a bet who
@@ -362,7 +364,7 @@
            </p>
        </section>

-        <section class="ruling">
+        <section class="ruling" data-short="Minimum raise">
            <h3>A raise has to be a full raise</h3>
            <p>
                At least as much again as the last raise, or the big blind if there
@@ -373,7 +375,7 @@
            </p>
        </section>

-        <section class="ruling">
+        <section class="ruling" data-short="Odd chip">
            <h3>The odd chip in a split pot</h3>
            <p>
                When a chopped pot won't divide evenly, the odd chip goes to the first
@@ -383,6 +385,22 @@
            </p>
        </section>

+        <section class="ruling" data-short="String bet">
+            <h3>Betting in one motion — the string bet</h3>
+            <p>
+                A bet is whatever goes in on the first trip to the stack, unless the
+                amount was said out loud first. Reaching back for more chips without
+                having said "raise" is a string bet, and only the first motion stands.
+                Saying the number is always enough on its own: "raise to sixty" binds
+                whatever order the chips arrive in.
+            </p>
+            <p>
+                It's the rule home games invoke most and enforce least, and both are
+                fine — the point is that a player can't watch the table react and then
+                decide how much to bet. Say it, or push it all at once.
+            </p>
+        </section>
+
        <p class="rulingsSource">
            Follows the Tournament Directors Association rules, which most rooms and
            home games take their lead from.
@@ -1095,6 +1095,51 @@ button,
    line-height: 1.5;
 }

+/* One chip per ruling, wrapped across the top of the sheet. Names rather than icons:
+   a dealer scanning this is looking for the words somebody at the table just said. */
+.rulingsIndex {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.35rem;
+    margin: 0 0 1rem;
+}
+
+.rulingsIndexBtn {
+    box-sizing: border-box;
+    min-height: 32px;
+    padding: 0.3rem 0.6rem;
+    border-radius: 999px;
+    border: 1px solid #3a3a3a;
+    background: #232323;
+    color: #d8b46a;
+    font-family: inherit;
+    font-size: 0.72rem;
+    line-height: 1.25;
+    text-align: left;
+    cursor: pointer;
+}
+
+@media (hover: hover) {
+    .rulingsIndexBtn:hover {
+        background: #2e2e2e;
+        border-color: #4a4a4a;
+    }
+}
+
+/* A thumb needs the same 44px here as everywhere else. */
+@media (pointer: coarse) {
+    .rulingsIndexBtn {
+        min-height: 44px;
+        font-size: 0.78rem;
+    }
+}
+
+/* The heading the index jumps to takes focus, and a focus ring on a heading that the
+   dealer just asked for reads as noise rather than as help. */
+.ruling h3:focus {
+    outline: none;
+}
+
 .ruling {
    margin-bottom: 1rem;
    padding-left: 0.7rem;
@@ -458,7 +458,50 @@ document.addEventListener("DOMContentLoaded", () => {
    // Escape is Modal's job now, for this sheet and the five others that never had it.
    const rulingsOverlay = document.getElementById("rulingsOverlay");
    const closeRulings = () => { rulingsOverlay.hidden = true; };
-    document.getElementById("openRulingsBtn").addEventListener("click", () => { rulingsOverlay.hidden = false; });
+    // An index across the top of the rulings sheet, one chip per ruling.
+    //
+    // This is opened mid-argument with players waiting, and it was nine rulings of
+    // prose with no way in: reaching the last one meant scrolling 1.6 screens on a
+    // desktop, 2.1 on a phone and 3.5 on a phone held sideways. A dealer looking for
+    // the odd-chip rule had to read past seven others to find it.
+    //
+    // Built from the sections rather than written out beside them, so a ruling added
+    // later turns up in the index without anyone having to remember to add it twice.
+    const buildRulingsIndex = () => {
+        const index = document.getElementById("rulingsIndex");
+        if (!index || index.childElementCount > 0) return;
+        [...rulingsOverlay.querySelectorAll(".ruling")].forEach((section, i) => {
+            const heading = section.querySelector("h3");
+            if (!heading) return;
+            if (!section.id) section.id = `ruling${i + 1}`;
+
+            const jump = document.createElement("button");
+            jump.type = "button";
+            jump.className = "rulingsIndexBtn";
+            // A short label where the ruling gives one. The headings are sentences —
+            // "A short all-in doesn't reopen the betting" — and nine of those stacked
+            // one per row made the index 342px tall on a phone, which is most of the
+            // sheet before the first ruling. "Short all-in" says the same thing to
+            // somebody who is looking for it, and three fit on a line.
+            jump.textContent = section.dataset.short || heading.textContent;
+            // The full heading is still what it announces, so the short label never
+            // costs a screen reader the sentence.
+            if (section.dataset.short) jump.setAttribute("aria-label", heading.textContent);
+            jump.addEventListener("click", () => {
+                section.scrollIntoView({ block: "start", behavior: "smooth" });
+                // The heading is what the dealer is now reading, so that is where the
+                // keyboard and a screen reader should be too.
+                heading.setAttribute("tabindex", "-1");
+                heading.focus({ preventScroll: true });
+            });
+            index.appendChild(jump);
+        });
+    };
+
+    document.getElementById("openRulingsBtn").addEventListener("click", () => {
+        buildRulingsIndex();
+        rulingsOverlay.hidden = false;
+    });
    document.getElementById("closeRulingsBtn").addEventListener("click", closeRulings);
    rulingsOverlay.addEventListener("click", e => {
        if (e.target === rulingsOverlay) closeRulings();