1 files changed, 34 insertions, 24 deletions

diff --git a/web/play/src/blackjack.ts b/web/play/src/blackjack.ts
index 49d46fa..3288244 100644
--- a/web/play/src/blackjack.ts
+++ b/web/play/src/blackjack.ts
@@ -24,12 +24,11 @@ function cardElement(card: string): HTMLElement {
 
 function handBlock(label: string, cards: string[], total: number): HTMLElement {
   const block = node("div", "hand");
-  block.append(node("div", "label", label));
+  const head = node("div", "hand-head");
+  head.append(node("span", "label", label), node("strong", "total", String(total)));
   const row = node("div", "cards");
   for (const card of cards) row.append(cardElement(card));
-  const sum = node("div", "total");
-  sum.append(document.createTextNode("Total "), node("strong", undefined, String(total)));
-  block.append(row, sum);
+  block.append(head, row);
   return block;
 }
 
@@ -70,36 +69,31 @@ export function renderBlackjack(
   const done = hand?.phase === "done" || view.status === "done";
   const canDeal = !hand || done;
 
-  board.append(node("h2", undefined, "Blackjack"));
-  board.append(
-    node("p", "note", "Six decks. Dealer stands on all 17. Blackjack pays 3:2."),
-  );
-
+  const table = node("div", "bj-table");
   if (hand) {
-    board.append(handBlock("Dealer", hand.dealer ?? [], Number(hand.dealer_total ?? 0)));
-    board.append(handBlock("You", hand.player ?? [], Number(hand.player_total ?? 0)));
+    table.append(handBlock("DEALER", hand.dealer ?? [], Number(hand.dealer_total ?? 0)));
+    table.append(node("div", "bj-divider"));
+    table.append(handBlock("YOU", hand.player ?? [], Number(hand.player_total ?? 0)));
   } else {
-    const empty = node("div", "outcome");
-    empty.textContent = "Press DEAL to start a hand.";
-    board.append(empty);
+    const empty = node("div", "empty-table", "Place a bet and deal a hand.");
+    table.append(empty);
   }
+  board.append(table);
 
-  if (done || (hand && !playerPhase)) {
-    const result = node("div", "outcome");
-    result.textContent = outcome(view, hand);
-    if (String(hand?.result) === "win" || String(hand?.result) === "blackjack" || String(hand?.result) === "push") {
-      result.classList.add("win-text");
-    }
-    board.append(result);
-  }
+  const foot = node("div", "board-foot");
+  foot.append(
+    node("span", "label", "Hand"),
+    node("span", undefined, hand ? outcome(view, hand) : "Waiting"),
+  );
+  board.append(foot);
 
   if (view.error) board.append(node("p", "error-text", String(view.error)));
 
   // Sidebar
-  side.append(node("div", "label", "Blackjack"));
+  side.append(node("h2", undefined, "Blackjack"));
   const bet = Number(hand?.bet ?? view.bet ?? 0);
   const balance = view.balance ?? view.hand?.balance;
-  side.append(node("p", "note", "Hit, stand or double. Forfeiting loses the reserved bet."));
+  side.append(node("p", "note", "Get closer to 21 without going over."));
 
   if (canDeal) {
     const betRow = node("div", "row");
@@ -122,6 +116,22 @@ export function renderBlackjack(
     side.append(stat);
   }
 
+  if (done || (hand && !playerPhase)) {
+    const resultLine = node("p", "note win-text");
+    resultLine.textContent = `${String(hand?.result ?? "").toUpperCase()}  ${money(Number(hand?.winnings ?? 0))}`;
+    if (!["win", "blackjack", "push"].includes(String(hand?.result))) {
+      resultLine.className = "note";
+    }
+    side.append(resultLine);
+  } else if (playerPhase) {
+    const actionsText = (hand?.actions ?? []).includes("double")
+      ? "Hit, stand or double."
+      : "Hit or stand.";
+    side.append(node("p", "note", actionsText));
+  } else if (!hand) {
+    side.append(node("p", "note", "Press DEAL to start a hand."));
+  }
+
   const actions = node("div", "actions");
   if (playerPhase) {
     const actionsRow = node("div", "row wrap");