web: accept the serialized reels array and stop game loops on navigation

The Rust SlotsView serializes reels as an array of chars, so the browser joins it instead of String(array). The crash chart, reel animation and roulette observer now stop when another screen takes over, and a returning crash screen rebuilds its detached canvas. Action buttons ignore a double click before the server view arrives.

Also tightens the gateway session registry with a generation token, caps WebSocket messages at 64 KiB, uses the __Host- cookie prefix on HTTPS, and ships the systemd unit.

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");
   });