Merge pull request 'Feature/casino texas holdem' (#13) from feature/casino-texas-holdem into master

Reviewed-on: #13

JoshHeaps.Net/Pages/Casino/TexasHoldem.cshtml

@@ -23,6 +23,7 @@
         <section id="tableSection">
             <div id="pokerTableWrap">
                 <div id="pokerTable">
+                    <div id="tableWatermark">Texas Hold'em</div>
                     <div id="potBadge">
                         <span id="potBadgeLabel">Pot</span>
                         <span id="potBadgeAmount">$0</span>
@@ -30,7 +31,7 @@
                 </div>
                 <div id="seatsLayer"></div>
             </div>
-            <p class="tableHint">Drag a seat onto another seat to swap players. Click the dealer chip on a seat to make it the button.</p>
+            <p id="tableHint" class="tableHint"></p>
         </section>
 
         <aside id="holdemSidebar">
@@ -55,6 +56,11 @@
                             <option value="counterclockwise">Counterclockwise</option>
                         </select>
                     </label>
+                    <label class="fieldRow">
+                        <span>Dedicated dealer (not a seat)</span>
+                        <input type="checkbox" id="dedicatedDealerToggle" />
+                    </label>
+                    <p class="fieldHint">Turn this on if a person outside the game deals — no seat shows the dealer button, but blinds still rotate automatically each hand.</p>
                     <label class="fieldRow">
                         <span>Base pot amount ($)</span>
                         <input type="number" id="basePotInput" min="0" step="1" placeholder="e.g. 500" />

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

@@ -1,5 +1,5 @@
 body {
-    background: #141414;
+    background: radial-gradient(ellipse at 50% -10%, #1c1c1c 0%, #101010 55%, #0a0a0a 100%);
     min-height: 100vh;
     margin: 0;
     color: #e6e6e6;
@@ -29,6 +29,20 @@ body {
     font-weight: 300;
     letter-spacing: 0.04em;
     color: #f5f5f5;
+    position: relative;
+    display: inline-block;
+    padding-bottom: 0.4rem;
+}
+
+#holdemHeader h1::after {
+    content: "";
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 42px;
+    height: 3px;
+    border-radius: 2px;
+    background: linear-gradient(90deg, #d8b46a, #a9782f);
 }
 
 .holdemSubtitle {
@@ -44,43 +58,45 @@ body {
 }
 
 .holdemBtn {
-    background: #2a2a2a;
+    background: linear-gradient(180deg, #2e2e2e, #232323);
     color: #eee;
     border: 1px solid #3a3a3a;
-    border-radius: 6px;
+    border-radius: 7px;
     padding: 0.6rem 1rem;
     font-size: 0.85rem;
     cursor: pointer;
-    transition: all 0.2s ease;
+    transition: all 0.15s ease;
     text-decoration: none;
     display: inline-flex;
     align-items: center;
     gap: 0.3rem;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.05);
 }
 
 .holdemBtn:hover {
-    background: #333;
+    background: linear-gradient(180deg, #383838, #2a2a2a);
     border-color: #4a4a4a;
+    transform: translateY(-1px);
 }
 
 .holdemBtnAccent {
-    background: #0f5c1c;
+    background: linear-gradient(180deg, #16783a, #0d5225);
     border-color: #1e8449;
-    color: #d6ffe0;
+    color: #ecffef;
 }
 
 .holdemBtnAccent:hover {
-    background: #146623;
+    background: linear-gradient(180deg, #1a8a44, #0f602c);
 }
 
 .holdemBtnDanger {
-    background: #3a1717;
+    background: linear-gradient(180deg, #4a1f1f, #351515);
     border-color: #6b2626;
     color: #ffd6d6;
 }
 
 .holdemBtnDanger:hover {
-    background: #4a1c1c;
+    background: linear-gradient(180deg, #572525, #401818);
 }
 
 .holdemBtnGhost {
@@ -124,35 +140,57 @@ body {
     position: absolute;
     inset: 6%;
     border-radius: 50%;
-    background: radial-gradient(ellipse at center, #1f6b3a 0%, #124a27 70%, #0d3a1e 100%);
+    background: radial-gradient(ellipse at 50% 42%, #227a45 0%, #175f37 45%, #0e4527 75%, #082c19 100%);
-    border: 10px solid #4a2e1a;
+    border: 14px solid #6b4225;
-    box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.5), 0 8px 24px rgba(0, 0, 0, 0.5);
+    box-shadow:
+        inset 0 0 0 3px rgba(216, 180, 106, 0.55),
+        inset 0 0 80px rgba(0, 0, 0, 0.55),
+        0 0 0 4px #2c1a0d,
+        0 20px 50px rgba(0, 0, 0, 0.55);
     display: flex;
     align-items: center;
     justify-content: center;
 }
 
+#tableWatermark {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: rgba(255, 255, 255, 0.06);
+    font-size: 2.4rem;
+    font-weight: 700;
+    letter-spacing: 0.15em;
+    text-transform: uppercase;
+    text-align: center;
+    pointer-events: none;
+    user-select: none;
+}
+
 #potBadge {
-    background: rgba(0, 0, 0, 0.45);
+    position: relative;
-    border: 1px solid rgba(255, 255, 255, 0.15);
+    background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.55));
-    border-radius: 10px;
+    border: 1px solid rgba(255, 255, 255, 0.14);
-    padding: 0.6rem 1.2rem;
+    border-radius: 999px;
+    padding: 0.7rem 1.7rem;
     text-align: center;
     display: flex;
     flex-direction: column;
     gap: 0.15rem;
+    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6), 0 4px 14px rgba(0, 0, 0, 0.45);
 }
 
 #potBadgeLabel {
-    font-size: 0.7rem;
+    font-size: 0.68rem;
-    letter-spacing: 0.1em;
+    letter-spacing: 0.14em;
     text-transform: uppercase;
-    color: #bde9c9;
+    color: #d8b46a;
 }
 
 #potBadgeAmount {
-    font-size: 1.4rem;
+    font-size: 1.5rem;
-    font-weight: 600;
+    font-weight: 700;
     color: #fff;
 }
 
@@ -168,14 +206,15 @@ body {
     transform: translate(-50%, -50%);
     width: 96px;
     min-height: 54px;
-    background: #232323;
+    background: linear-gradient(160deg, #2c2c2c, #1b1b1b);
-    border: 2px solid #3a3a3a;
+    border: 1px solid rgba(255, 255, 255, 0.08);
-    border-radius: 10px;
+    border-radius: 14px;
     padding: 0.3rem 0.4rem;
-    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
+    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
     cursor: grab;
     z-index: 1;
     text-align: center;
+    transition: box-shadow 0.15s ease, border-color 0.15s ease;
 }
 
 .seat.dragging {
@@ -183,36 +222,36 @@ body {
 }
 
 .seat.dropTarget {
-    outline: 2px dashed #09ff00;
+    outline: 2px dashed #d8b46a;
     outline-offset: 2px;
 }
 
 .seat.seatInactive {
-    opacity: 0.45;
+    opacity: 0.4;
 }
 
 .seat.seatFolded {
     border-style: dashed;
-    opacity: 0.6;
+    opacity: 0.55;
 }
 
 .seat.seatSelected {
-    border-color: #09ff00;
+    border-color: rgba(9, 255, 0, 0.6);
-    box-shadow: 0 0 0 2px rgba(9, 255, 0, 0.35), 0 4px 10px rgba(0, 0, 0, 0.4);
+    box-shadow: 0 0 0 2px rgba(9, 255, 0, 0.4), 0 4px 14px rgba(0, 0, 0, 0.5);
 }
 
 .seatChairNumber {
     position: absolute;
     top: 2px;
-    left: 5px;
+    left: 6px;
-    font-size: 0.6rem;
+    font-size: 0.58rem;
     color: #777;
 }
 
 .seatPuckName {
     font-size: 0.72rem;
     font-weight: 600;
-    color: #eee;
+    color: #f0f0f0;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -220,17 +259,29 @@ body {
 }
 
 .seatPuckCards {
-    font-size: 0.65rem;
+    font-size: 0.68rem;
+    font-weight: 700;
     font-family: var(--font-mono, monospace);
-    color: #bbb;
+    color: #ddd;
-    min-height: 0.9em;
+    min-height: 0.95em;
+    letter-spacing: 0.05em;
+}
+
+.seatPuckCards .cardRed {
+    color: #ff6b6b;
 }
 
 .seatPuckTotal {
-    font-size: 0.7rem;
+    display: inline-block;
+    margin-top: 0.15rem;
+    font-size: 0.64rem;
     font-weight: 700;
-    color: #9be6a8;
+    color: #a9f5b8;
-    min-height: 1em;
+    background: rgba(9, 255, 0, 0.1);
+    border-radius: 999px;
+    padding: 0 0.35rem;
+    min-height: 1.1em;
+    line-height: 1.4;
 }
 
 .dealerChip {
@@ -240,19 +291,31 @@ body {
     width: 22px;
     height: 22px;
     border-radius: 50%;
-    background: #444;
+    background: radial-gradient(circle at 35% 30%, #fff, #d8d8d8 55%, #b8b8b8 100%);
-    color: #ccc;
+    color: #222;
-    border: 2px solid #666;
+    border: 2px solid #999;
     font-weight: 700;
     font-size: 0.68rem;
     cursor: pointer;
     z-index: 2;
+    opacity: 0.32;
+    transition: opacity 0.15s ease;
+}
+
+.seat:hover .dealerChip,
+.dealerChip:focus-visible {
+    opacity: 1;
 }
 
 .dealerChip.active {
-    background: #f5d547;
+    background: radial-gradient(circle at 35% 30%, #ffe9a8, #f5d547 55%, #cba428 100%);
-    border-color: #cba428;
+    border-color: #a9782f;
     color: #3a2e00;
+    opacity: 1;
+}
+
+.dealerChip.hidden {
+    display: none;
 }
 
 .blindBadge {
@@ -261,9 +324,10 @@ body {
     top: -9px;
     font-size: 0.58rem;
     font-weight: 700;
-    padding: 0.05rem 0.3rem;
+    padding: 0.05rem 0.34rem;
-    border-radius: 8px;
+    border-radius: 999px;
     z-index: 2;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
 }
 
 .blindBadge.visible {
@@ -272,13 +336,13 @@ body {
 
 .sbBadge {
     left: -6px;
-    background: #2b6cb0;
+    background: linear-gradient(180deg, #3f82d1, #2b5fa0);
-    color: #dbeafe;
+    color: #eaf3ff;
 }
 
 .bbBadge {
     left: 22px;
-    background: #b7791f;
+    background: linear-gradient(180deg, #dba13f, #b7791f);
     color: #fff7e6;
 }
 
@@ -290,9 +354,11 @@ body {
 
 .seatEditorPanel h2 {
     margin: 0 0 0.6rem;
+    padding-bottom: 0.5rem;
     font-size: 0.95rem;
     font-weight: 500;
     color: #f5f5f5;
+    border-bottom: 1px solid rgba(216, 180, 106, 0.35);
 }
 
 .seatEditorForm {
@@ -340,10 +406,15 @@ body {
     background: #fdfdfd;
     color: #111;
     border: 1px solid #3a3a3a;
-    border-radius: 5px;
+    border-radius: 6px;
     padding: 0.35rem 0;
     font-weight: 700;
     font-family: var(--font-mono, monospace);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+.cardInput.cardRed {
+    color: #c0392b;
 }
 
 .seatContribution {
@@ -444,10 +515,11 @@ body {
 }
 
 .sidebarPanel {
-    background: #1e1e1e;
+    background: linear-gradient(160deg, #212121, #1a1a1a);
     border: 1px solid #333;
-    border-radius: 8px;
+    border-radius: 10px;
     padding: 0.2rem 0.9rem;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
 }
 
 .sidebarPanel summary {

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

@@ -26,6 +26,13 @@ document.addEventListener("DOMContentLoaded", () => {
         Render.renderAll();
     });
 
+    document.getElementById("dedicatedDealerToggle").addEventListener("change", e => {
+        state.dedicatedDealer = e.target.checked;
+        hooks.save(state);
+        Render.renderSeats();
+        Render.renderTableHint();
+    });
+
     document.getElementById("tableNotes").addEventListener("input", e => {
         state.notes = e.target.value;
         hooks.save(state);

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

@@ -29,12 +29,21 @@ const Render = {
         this.renderNotes();
         this.updatePotBadge();
         this.renderSetupFields();
+        this.renderTableHint();
     },
 
     renderSetupFields() {
         document.getElementById("seatCountInput").value = this.state.seatCount;
         document.getElementById("directionSelect").value = this.state.direction;
         document.getElementById("basePotInput").value = this.state.basePotAmount ?? "";
+        document.getElementById("dedicatedDealerToggle").checked = !!this.state.dedicatedDealer;
+    },
+
+    renderTableHint() {
+        const hint = document.getElementById("tableHint");
+        hint.textContent = this.state.dedicatedDealer
+            ? "Drag a seat onto another seat to swap players."
+            : "Drag a seat onto another seat to swap players. Click the dealer chip on a seat to make it the button.";
     },
 
     renderNotes() {
@@ -80,6 +89,7 @@ const Render = {
 
             const dealerChip = node.querySelector(".dealerChip");
             dealerChip.classList.toggle("active", index === dealerIndex);
+            dealerChip.classList.toggle("hidden", !!this.state.dedicatedDealer);
             dealerChip.addEventListener("click", e => {
                 e.stopPropagation();
                 this.state.dealerSeatIndex = index;
@@ -105,10 +115,21 @@ const Render = {
         });
     },
 
+    isRedSuit(card) {
+        return /[HD]$/i.test(card || "");
+    },
+
     updatePuckContent(node, player, index) {
         node.querySelector(".seatPuckName").textContent = player.name && player.name.trim() ? player.name.trim() : "";
-        const cards = (player.cards || []).filter(Boolean).join(" ");
+        const cardsEl = node.querySelector(".seatPuckCards");
-        node.querySelector(".seatPuckCards").textContent = cards;
+        cardsEl.innerHTML = "";
+        (player.cards || []).filter(Boolean).forEach((card, i) => {
+            if (i > 0) cardsEl.appendChild(document.createTextNode(" "));
+            const span = document.createElement("span");
+            if (this.isRedSuit(card)) span.className = "cardRed";
+            span.textContent = card;
+            cardsEl.appendChild(span);
+        });
         const total = HoldemState.computeContribution(player, this.state.chipLegend, this.state.basePotAmount);
         node.querySelector(".seatPuckTotal").textContent = total > 0 ? Money.format(total) : "";
         node.classList.toggle("seatInactive", !player.inHand);
@@ -222,8 +243,10 @@ const Render = {
         card1.value = player.cards[0] || "";
         card2.value = player.cards[1] || "";
         [card1, card2].forEach((input, cardIdx) => {
+            input.classList.toggle("cardRed", this.isRedSuit(input.value));
             input.addEventListener("input", () => {
                 input.value = input.value.toUpperCase();
+                input.classList.toggle("cardRed", this.isRedSuit(input.value));
                 player.cards[cardIdx] = input.value;
                 this.commitSeatChange(form, player, index);
             });

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

@@ -36,6 +36,7 @@ const HoldemState = {
             direction: "clockwise",
             basePotAmount: null,
             dealerSeatIndex: 0,
+            dedicatedDealer: false,
             chipLegend: this.DEFAULT_CHIP_LEGEND.map(c => ({ ...c })),
             seats: Array.from({ length: seatCount }, () => this.makePlayer()),
             notes: "",