Get to the right ruling in one tap, and cover the string bet

The rulings sheet is opened mid-argument, with players waiting. It was eight rulings
of prose in a row with no way in. Reaching the last one meant scrolling:

  1.6 screens on a desktop
  2.1 on a phone
  3.5 on a phone held sideways

A dealer looking for the odd-chip rule had to read past seven others to find it.

There is an index across the top now, one chip per ruling, and tapping one scrolls its
section into view and puts the keyboard and a screen reader on its heading. 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.

And the missing ruling

I went looking for what home games actually argue about rather than guessing, and the
answer that kept coming back alongside misdeals -- which were already here -- was the
string bet. It was the one common dispute the sheet had nothing to say about.

  Betting in one motion - the string bet

  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.

  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.

That second paragraph is deliberate. The sheet's whole stance is that house rules win,
so a ruling that tells a home game it must enforce something would be the wrong voice.

What it costs: the index is 342px at the top of a 390px-wide sheet, so a dealer who
wants to read straight through now scrolls past it first. That is the trade -- it is a
jump table you use once and then read, and the alternative was scrolling blind.

Driven through at four sizes across touch and pointer contexts: nine rulings, nine
index entries, every one of them 44px on touch, tapping the last one lands it on screen
and focused. Focus stays inside the sheet across fourteen tabs, Enter on a chip jumps,
Escape closes, and opening it three times still builds nine entries rather than
twenty-seven. Contrast clean, no console errors, 244 tests still passing.

Sources: cardplayerlifestyle.com and pokernews on string bets; the sheet still follows
the TDA rules it cites.

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

JoshHeaps.Net/Pages/Casino/TexasHoldem.cshtml

@@ -294,6 +294,8 @@
             not during it.
         </p>
 
+        <nav id="rulingsIndex" class="rulingsIndex" aria-label="Jump to a ruling"></nav>
+
         <section class="ruling">
             <h3>Redeal it — misdeal</h3>
             <ul>
@@ -383,6 +385,22 @@
             </p>
         </section>
 
+        <section class="ruling">
+            <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.

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

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

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

@@ -458,7 +458,42 @@ 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";
+            jump.textContent = 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();