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

Reviewed-on: #31

JoshHeaps.Net/Pages/Casino/TexasHoldem.cshtml

@@ -31,9 +31,13 @@
                         <span id="potBadgeAmount">$0</span>
                     </div>
                 </div>
+                <div id="betsLayer" aria-hidden="true"></div>
                 <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">
@@ -234,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>

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

@@ -223,6 +223,68 @@ body {
     inset: 0;
 }
 
+/* ---------- Bets on the felt ---------- */
+
+/* Shares the seat ring's box exactly, so a bet always lands on the spoke between its
+   player and the pot. When the seat ring gets inset on a phone, this moves with it —
+   measured the alternative, and a bets ring on its own geometry ends up either behind
+   the pucks or on top of the pot badge. */
+#betsLayer {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+}
+
+.betChip {
+    position: absolute;
+    transform: translate(-50%, -50%);
+    display: flex;
+    align-items: center;
+    gap: 0.28rem;
+    padding: 0.1rem 0.42rem 0.1rem 0.2rem;
+    background: rgba(0, 0, 0, 0.55);
+    border: 1px solid rgba(255, 255, 255, 0.14);
+    border-radius: 999px;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
+    white-space: nowrap;
+}
+
+/* Reads as a chip seen from above: a lighter top-left, a rim, and the notches a
+   casino chip has around its edge. */
+.betChipDisc {
+    width: 13px;
+    height: 13px;
+    border-radius: 50%;
+    border: 1px solid rgba(255, 255, 255, 0.45);
+    box-shadow:
+        inset 0 1px 1px rgba(255, 255, 255, 0.45),
+        inset 0 -1px 2px rgba(0, 0, 0, 0.45);
+}
+
+.betChipAmount {
+    font-size: 0.62rem;
+    font-weight: 700;
+    color: #f0f0f0;
+    font-variant-numeric: tabular-nums;
+}
+
+/* Clinging to a puck rather than sitting on its own ring — the phone layout. */
+.betChipAnchored {
+    left: 50%;
+    z-index: 3;
+}
+
+.betChipAbove {
+    top: -11px;
+    transform: translate(-50%, -50%);
+}
+
+.betChipBelow {
+    top: auto;
+    bottom: -11px;
+    transform: translate(-50%, 50%);
+}
+
 /* ---------- Seats (compact pucks on the table) ---------- */
 
 .seat {
@@ -523,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
@@ -1734,7 +1911,8 @@ body.hasActionBar #toastHost {
 
     /* Keeps every puck inside the viewport: the ring is drawn within this box,
        so half a puck of padding is exactly enough to stop the overhang. */
-    #seatsLayer {
+    #seatsLayer,
+    #betsLayer {
         inset: 26px 44px;
     }
 

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

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

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

@@ -69,13 +69,85 @@ const Render = {
     // ---- Seats around the table (compact pucks) ----
 
     seatPosition(index, count) {
+        return this.positionOnRing(index, count, 44, 42);
+    },
+
+    // Bets sit on the felt between their player and the pot, the way chips actually
+    // do — closer in than the seats, on the same spoke. The bets layer is inset to
+    // match the seat ring (see the CSS), so this one radius holds at every size.
+    betPosition(index, count) {
+        return this.positionOnRing(index, count, 27, 25);
+    },
+
+    positionOnRing(index, count, rx, ry) {
         const angle = -90 + (360 / count) * index;
         const radians = (angle * Math.PI) / 180;
-        const rx = 44;
-        const ry = 42;
-        const left = 50 + rx * Math.cos(radians);
-        const top = 50 + ry * Math.sin(radians);
-        return { left, top };
+        return {
+            left: 50 + rx * Math.cos(radians),
+            top: 50 + ry * Math.sin(radians),
+        };
+    },
+
+    // Colour a bet by the biggest chip that fits it, so a table with a chip legend
+    // gets bets that look like the chips actually being pushed out.
+    chipColorFor(amount) {
+        const legend = [...(this.state.chipLegend || [])]
+            .filter(chip => Number(chip.value) > 0)
+            .sort((a, b) => Number(b.value) - Number(a.value));
+        const match = legend.find(chip => amount >= Number(chip.value));
+        return (match || legend[legend.length - 1] || {}).color || "#8a8a8a";
+    },
+
+    // ---- Bets on the felt ----
+
+    makeBetChip(bet) {
+        const chip = document.createElement("div");
+        chip.className = "betChip";
+
+        const disc = document.createElement("span");
+        disc.className = "betChipDisc";
+        disc.style.background = this.chipColorFor(bet);
+
+        const amount = document.createElement("span");
+        amount.className = "betChipAmount";
+        amount.textContent = Money.format(bet);
+
+        chip.appendChild(disc);
+        chip.appendChild(amount);
+        return chip;
+    },
+
+    // A phone's felt has no room for a third ring: measured every radius between the
+    // seats and the pot badge and each one collides with one or the other. So on a
+    // narrow screen the bet clings to its own puck instead — same chip, no ring —
+    // sitting on whichever side faces the middle of the table.
+    renderBets() {
+        const layer = document.getElementById("betsLayer");
+        if (!layer) return;
+        layer.innerHTML = "";
+
+        const anchorToSeat = window.matchMedia("(max-width: 700px)").matches;
+
+        this.state.seats.forEach((player, index) => {
+            const bet = Betting.committed(player);
+            if (bet <= 0) return;
+
+            const chip = this.makeBetChip(bet);
+            const pos = this.betPosition(index, this.state.seatCount);
+
+            if (anchorToSeat) {
+                const seat = document.querySelector(`.seat[data-seat-index="${index}"]`);
+                if (!seat) return;
+                const seatPos = this.seatPosition(index, this.state.seatCount);
+                chip.classList.add("betChipAnchored", seatPos.top > 50 ? "betChipAbove" : "betChipBelow");
+                seat.appendChild(chip);
+                return;
+            }
+
+            chip.style.left = `${pos.left}%`;
+            chip.style.top = `${pos.top}%`;
+            layer.appendChild(chip);
+        });
     },
 
     puckLabel(player, seatIndex) {
@@ -118,6 +190,8 @@ const Render = {
 
             layer.appendChild(node);
         });
+
+        this.renderBets();
     },
 
     isRedSuit(card) {
@@ -168,11 +242,13 @@ const Render = {
             span.textContent = this.formatCard(card);
             cardsEl.appendChild(span);
         });
-        // What's in front of them this street reads as the live number during betting;
-        // between hands it falls back to their total for the hand.
-        const streetBet = Betting.committed(player);
-        const total = streetBet > 0
-            ? streetBet
+        // Always this player's total for the hand. What they've just pushed out on this
+        // street is shown as a chip on the felt instead — the puck used to flip between
+        // the two meanings depending on the moment, which is a bad thing for a number
+        // sitting next to a stack size to do.
+        const handTotal = Betting.handTotal(player);
+        const total = handTotal > 0
+            ? handTotal
             : HoldemState.computeContribution(player, this.state.chipLegend, this.state.basePotAmount);
         node.querySelector(".seatPuckTotal").textContent = total > 0 ? Money.format(total) : "";
 

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

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