Merge pull request 'Make the four seat states readable across the table' (#18) from feature/casino-holdem-seat-legibility into feature/casino-holdem-undo-toasts

Reviewed-on: #18

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

@@ -250,13 +250,50 @@ body {
     outline-offset: 2px;
 }
 
+/* Four states a dealer needs to tell apart from across the table, without
+   reading anything: live in this hand, folded, sitting out, and nobody there.
+   Live gets a green edge, folded gets a red one and a struck-through name,
+   sitting-out just fades, and an empty chair is the only dashed outline. */
+
+.seat.seatLive {
+    border-color: rgba(78, 201, 122, 0.45);
+    box-shadow:
+        0 0 0 1px rgba(78, 201, 122, 0.18),
+        0 3px 10px rgba(0, 0, 0, 0.5),
+        inset 0 1px 0 rgba(255, 255, 255, 0.05);
+}
+
+/* Sitting out, not gone: still a person the dealer may need to deal back in, so
+   the name has to stay readable rather than fading almost to the felt. */
 .seat.seatInactive {
-    opacity: 0.4;
+    opacity: 0.58;
 }
 
 .seat.seatFolded {
+    border-color: rgba(224, 123, 123, 0.4);
+    opacity: 0.5;
+}
+
+.seat.seatFolded .seatPuckName {
+    text-decoration: line-through;
+    text-decoration-color: rgba(224, 123, 123, 0.75);
+}
+
+.seat.seatEmpty {
+    background: rgba(255, 255, 255, 0.02);
     border-style: dashed;
-    opacity: 0.55;
+    border-color: rgba(255, 255, 255, 0.13);
+    box-shadow: none;
+    /* Deliberately louder than seatInactive: an open seat is information a
+       dealer wants, not something to squint at. */
+    opacity: 0.7;
+}
+
+.seatEmptyLabel {
+    color: #6d6d6d;
+    font-size: 0.6rem;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
 }
 
 .seat.seatSelected {

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

@@ -124,8 +124,22 @@ const Render = {
         return /[HD]$/i.test(card || "");
     },
 
+    // A chair nobody has claimed: no name typed, not dealt in, nothing in the pot.
+    // Worth calling out, because at a short-handed table the open seats are what
+    // the dealer is looking for.
+    isEmptySeat(player) {
+        const named = !!(player.name && player.name.trim());
+        const contributing =
+            HoldemState.computeContribution(player, this.state.chipLegend, this.state.basePotAmount) > 0;
+        return !named && !player.inHand && !contributing;
+    },
+
     updatePuckContent(node, player, index) {
-        node.querySelector(".seatPuckName").textContent = player.name && player.name.trim() ? player.name.trim() : "";
+        const empty = this.isEmptySeat(player);
+        const nameEl = node.querySelector(".seatPuckName");
+        nameEl.textContent = empty ? "Empty" : (player.name || "").trim();
+        nameEl.classList.toggle("seatEmptyLabel", empty);
+
         const cardsEl = node.querySelector(".seatPuckCards");
         cardsEl.innerHTML = "";
         (player.cards || []).filter(Boolean).forEach((card, i) => {
@@ -137,8 +151,10 @@ const Render = {
         });
         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);
+        node.classList.toggle("seatEmpty", empty);
+        node.classList.toggle("seatInactive", !player.inHand && !empty);
         node.classList.toggle("seatFolded", player.folded);
+        node.classList.toggle("seatLive", player.inHand && !player.folded);
     },
 
     // Cheaper than a full renderSeats() — used after edits so the seat editor's inputs