5 files changed, 59 insertions, 8 deletions

diff --git a/web/play/src/blackjack.ts b/web/play/src/blackjack.ts
index 3537f45..49d46fa 100644
--- a/web/play/src/blackjack.ts
+++ b/web/play/src/blackjack.ts
@@ -1,6 +1,14 @@
 import type { View } from "./types";
 import { cardFace, clear, money, node } from "./dom";
 
+let lastAction = 0;
+
+function actionAllowed(): boolean {
+  if (Date.now() - lastAction < 400) return false;
+  lastAction = Date.now();
+  return true;
+}
+
 function cardElement(card: string): HTMLElement {
   if (card === "?") {
     const back = node("div", "card back");
@@ -124,6 +132,7 @@ export function renderBlackjack(
           ? node("button", "btn primary", label)
           : node("button", "btn", label);
       button.addEventListener("click", () => {
+        if (!actionAllowed()) return;
         if (action === "hit") send("Hit");
         else if (action === "stand") send("Stand");
         else send("Double");
@@ -133,12 +142,15 @@ export function renderBlackjack(
     actions.append(actionsRow);
     const forfeit = node("button", "btn danger wide", "Forfeit hand");
     forfeit.addEventListener("click", () => {
+      if (!actionAllowed()) return;
       if (window.confirm("Forfeit this hand? The reserved bet is lost.")) send("Forfeit");
     });
     actions.append(forfeit);
   } else if (canDeal) {
     const deal = node("button", "btn primary wide big", "DEAL");
-    deal.addEventListener("click", () => send("Deal"));
+    deal.addEventListener("click", () => {
+      if (actionAllowed()) send("Deal");
+    });
     actions.append(deal);
   }
 
diff --git a/web/play/src/crash.ts b/web/play/src/crash.ts
index 6f3c8dd..a683dcd 100644
--- a/web/play/src/crash.ts
+++ b/web/play/src/crash.ts
@@ -31,6 +31,7 @@ let sendCommand: ((command: unknown) => void) | null = null;
 let frameHandle: number | undefined;
 let verifyToken = 0;
 let lastStatus = "";
+let lastAction = 0;
 
 function build(
   board: HTMLElement,
@@ -88,6 +89,8 @@ function build(
   const primary = node("button", "btn primary wide big", "START") as HTMLButtonElement;
   const leave = node("button", "btn ghost wide", "Leave table") as HTMLButtonElement;
   primary.addEventListener("click", () => {
+    if (Date.now() - lastAction < 500) return;
+    lastAction = Date.now();
     if (current?.status === "running") sendCommand?.("CashOut");
     else sendCommand?.("Start");
   });
@@ -118,6 +121,15 @@ function build(
   };
 }
 
+/// Stop the chart loop when another screen takes over.
+export function stopCrashAnimation(): void {
+  if (frameHandle !== undefined) {
+    cancelAnimationFrame(frameHandle);
+    frameHandle = undefined;
+  }
+  current = null;
+}
+
 export function renderCrash(
   board: HTMLElement,
   side: HTMLElement,
@@ -125,7 +137,7 @@ export function renderCrash(
   send: (command: unknown) => void,
   now: Clock,
 ): void {
-  if (!parts || parts.board !== board) {
+  if (!parts || parts.board !== board || !parts.canvas.isConnected) {
     parts = build(board, side, send, now);
     lastStatus = "";
   }
diff --git a/web/play/src/main.ts b/web/play/src/main.ts
index fd55250..f051429 100644
--- a/web/play/src/main.ts
+++ b/web/play/src/main.ts
@@ -1,10 +1,10 @@
 import { byId, money, node, sha256Hex, toast, toneFor } from "./dom";
 import { Gateway } from "./net";
 import { renderBlackjack } from "./blackjack";
-import { renderCrash } from "./crash";
+import { renderCrash, stopCrashAnimation } from "./crash";
 import { renderHistory } from "./history";
 import { renderRoulette } from "./roulette";
-import { renderSlots } from "./slots";
+import { renderSlots, stopSlotsAnimation } from "./slots";
 import type { View } from "./types";
 
 const authScreen = byId("auth-screen");
@@ -72,6 +72,8 @@ const gateway = new Gateway(wsUrl, {
   },
   onView(next) {
     view = next;
+    if (next.screen !== "slots") stopSlotsAnimation();
+    if (next.screen !== "crash") stopCrashAnimation();
     // Game and history views carry no account field; the lobby is the source
     // of truth for who is signed in. A null lobby user is a logout or an
     // expired session.
diff --git a/web/play/src/roulette.ts b/web/play/src/roulette.ts
index cbb7c6e..a42686a 100644
--- a/web/play/src/roulette.ts
+++ b/web/play/src/roulette.ts
@@ -20,6 +20,9 @@ type Hotspot = {
   rank: number;
 };
 
+let observer: ResizeObserver | null = null;
+let lastSpin = 0;
+
 type Layout = {
   width: number;
   height: number;
@@ -413,9 +416,11 @@ export function renderRoulette(
     const zone = hit(event.clientX, event.clientY);
     canvas.style.cursor = zone && !spinning ? "pointer" : "default";
   });
-  new ResizeObserver(() => {
+  observer?.disconnect();
+  observer = new ResizeObserver(() => {
     current = draw(canvas, view);
-  }).observe(canvas);
+  });
+  observer.observe(canvas);
 
   // Sidebar
   side.append(node("div", "label", "Roulette"));
@@ -459,7 +464,11 @@ export function renderRoulette(
   const actions = node("div", "actions");
   const spin = node("button", "btn primary wide big", spinning ? "SPINNING…" : "SPIN WHEEL");
   spin.disabled = spinning || total === 0;
-  spin.addEventListener("click", () => send("Spin"));
+  spin.addEventListener("click", () => {
+    if (Date.now() - lastSpin < 600) return;
+    lastSpin = Date.now();
+    send("Spin");
+  });
   const clearBets = node("button", "btn wide", "Clear bets");
   clearBets.disabled = spinning || total === 0;
   clearBets.addEventListener("click", () => send("ClearBets"));
diff --git a/web/play/src/slots.ts b/web/play/src/slots.ts
index dba1e25..7c4677d 100644
--- a/web/play/src/slots.ts
+++ b/web/play/src/slots.ts
@@ -7,6 +7,7 @@ const SYMBOLS = "CLOGDS";
 const LINE_NAMES = ["top", "middle", "bottom", "V", "inverted V"];
 
 let spinUntil = 0;
+let lastSpin = 0;
 let animation: number | undefined;
 let latest: View | null = null;
 let latestBoard: HTMLElement | null = null;
@@ -15,6 +16,17 @@ export function requestSlotsSpin(): void {
   spinUntil = Date.now() + 900;
 }
 
+/// Stop the reel animation when another screen takes over.
+export function stopSlotsAnimation(): void {
+  if (animation !== undefined) {
+    window.clearInterval(animation);
+    animation = undefined;
+  }
+  latest = null;
+  latestBoard = null;
+  spinUntil = 0;
+}
+
 function spinning(view: View): boolean {
   return view.phase === "spinning" || Date.now() < spinUntil;
 }
@@ -42,7 +54,9 @@ export function renderSlots(
 
   const reels = node("div", "reels");
   const tiles: HTMLElement[] = [];
-  const flat = String(view.reels ?? "");
+  const flat = Array.isArray(view.reels)
+    ? view.reels.join("")
+    : String(view.reels ?? "");
   for (let column = 0; column < REELS; column += 1) {
     const reel = node("div", "reel");
     for (let row = 0; row < ROWS; row += 1) {
@@ -133,6 +147,8 @@ export function renderSlots(
   const spin = node("button", "btn primary wide big", active ? "SPINNING…" : "SPIN");
   spin.disabled = active;
   spin.addEventListener("click", () => {
+    if (Date.now() - lastSpin < 900) return;
+    lastSpin = Date.now();
     requestSlotsSpin();
     send("Spin");
   });