Make the four seat states readable across the table

A seat could be live in the hand, folded, sitting out, or empty, and three of those looked nearly the same: a plain dark puck, or a dimmed one. An unclaimed chair was indistinguishable from a nameless player, and nothing positively said "this player is in" — the dealer had to infer it from whether a dollar badge happened to be showing. Each state now has one look. Live gets a green edge. Folded gets a red edge and a struck-through name, so it reads as out rather than merely faint. An empty chair is the only dashed outline and says so. Sitting out just fades — and fades less than it used to, since that player is still someone the dealer may need to deal back in, and at 0.4 the name was nearly gone. Co-Authored-By: Claude Sonnet 5 <[email protected]> Claude-Session: https://claude.ai/code/session_015bnp7xKUPFFSpwkYNFaPgb
2026-08-31 18:36:54 -06:00
parent d01c67fc45
commit 1e1bdcccce
2 changed files with 57 additions and 4 deletions
@@ -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