1 files changed, 41 insertions, 15 deletions

diff --git a/web/play/src/crash.ts b/web/play/src/crash.ts
index a683dcd..0f18bd2 100644
--- a/web/play/src/crash.ts
+++ b/web/play/src/crash.ts
@@ -44,26 +44,22 @@ function build(
   sendCommand = send;
   clock = now;
 
-  board.append(node("h2", undefined, "Crash"));
-  board.append(
-    node("p", "note", "The multiplier rises from 1.00×. Cash out before it crashes."),
-  );
-
   const wrap = node("div", "crash-wrap");
   const number = node("div", "crash-number", "1.00×");
+  const phase = node("div", "label", "READY");
   const meta = node("div", "crash-meta");
   const canvas = node("canvas", "crash-canvas") as HTMLCanvasElement;
   const verify = node("div", "verify", "Waiting for a round commitment.");
-  wrap.append(number, meta, canvas, verify);
+  wrap.append(number, phase, meta, canvas, verify);
   board.append(wrap);
 
-  side.append(node("div", "label", "Crash"));
-  side.append(node("p", "note", "The server commits to a seed before the round. The seed is revealed when it ends."));
+  side.append(node("h2", undefined, "Crash"));
+  side.append(node("p", "note", "Cash out before the multiplier crashes."));
 
   const betRow = node("div", "row");
-  const minus = node("button", "btn small", "−10") as HTMLButtonElement;
+  const minus = node("button", "btn small", "−") as HTMLButtonElement;
   const bet = node("strong", "mono", "—");
-  const plus = node("button", "btn small", "+10") as HTMLButtonElement;
+  const plus = node("button", "btn small", "+") as HTMLButtonElement;
   minus.addEventListener("click", () => sendCommand?.({ AdjustBet: -10 }));
   plus.addEventListener("click", () => sendCommand?.({ AdjustBet: 10 }));
   betRow.append(minus, bet, plus);
@@ -80,7 +76,7 @@ function build(
     side.append(row);
   }
 
-  const status = node("p", "note", "Ready.");
+  const status = node("p", "note", "Press START to play.");
   const lastCrash = node("p", "note", "");
   const error = node("p", "error-text");
   side.append(status, lastCrash, error);
@@ -188,7 +184,7 @@ export function renderCrash(
     p.status.textContent = "Round forfeited.";
     p.status.className = "note error-text";
   } else {
-    p.status.textContent = "Ready. Start a round when you want.";
+    p.status.textContent = "Press START to play.";
     p.status.className = "note";
   }
 
@@ -197,7 +193,9 @@ export function renderCrash(
   }
 
   const commit = view.commit ? String(view.commit) : "";
-  p.meta.textContent = commit ? `commit ${shortHash(commit, 12)}` : "no commitment yet";
+  p.meta.textContent = commit ? `commit ${shortHash(commit, 12)}` : "";
+  p.meta.style.display = commit ? "" : "none";
+  p.verify.style.display = commit ? "" : "none";
 
   if (view.seed && commit) {
     const token = ++verifyToken;
@@ -249,6 +247,19 @@ function currentMultiplier(view: View, now: Clock): number {
 function update(p: Parts, view: View, now: Clock): void {
   const multiplier = currentMultiplier(view, now);
   p.number.textContent = `${multiplier.toFixed(2)}×`;
+  const phase = p.number.nextElementSibling as HTMLElement | null;
+  if (phase) {
+    phase.textContent =
+      view.status === "running"
+        ? "RUNNING"
+        : view.status === "cashed"
+          ? "CASHED OUT"
+          : view.status === "crashed"
+            ? "CRASHED"
+            : view.status === "starting"
+              ? "STARTING"
+              : "READY";
+  }
   p.number.className = `crash-number ${
     view.status === "running"
       ? "running"
@@ -296,6 +307,8 @@ function drawChart(canvas: HTMLCanvasElement, view: View, multiplier: number, no
   ctx.strokeStyle = "#242e38";
   ctx.fillStyle = "#8a98a6";
   ctx.font = "11px ui-monospace, monospace";
+  ctx.textAlign = "left";
+  ctx.textBaseline = "middle";
   ctx.lineWidth = 1;
   for (let step = 0; step <= 4; step += 1) {
     const value = 1 + ((yMax - 1) * step) / 4;
@@ -304,7 +317,7 @@ function drawChart(canvas: HTMLCanvasElement, view: View, multiplier: number, no
     ctx.moveTo(padL, py);
     ctx.lineTo(width - padR, py);
     ctx.stroke();
-    ctx.fillText(`${value.toFixed(1)}×`, 6, py + 4);
+    ctx.fillText(`${value.toFixed(1)}×`, 10, py);
   }
   for (let step = 0; step <= 4; step += 1) {
     const seconds = (xMax * step) / 4;
@@ -315,7 +328,20 @@ function drawChart(canvas: HTMLCanvasElement, view: View, multiplier: number, no
     ctx.strokeStyle = "#1b232c";
     ctx.stroke();
     ctx.fillStyle = "#5b6773";
-    ctx.fillText(`${seconds.toFixed(0)}s`, px - 10, height - 12);
+    ctx.textAlign = "center";
+    ctx.textBaseline = "alphabetic";
+    ctx.fillText(`${seconds.toFixed(0)}s`, px, height - 12);
+    ctx.textAlign = "left";
+    ctx.textBaseline = "middle";
+  }
+
+  if (!["running", "cashed", "crashed"].includes(String(view.status))) {
+    ctx.fillStyle = "#5b6773";
+    ctx.textAlign = "center";
+    ctx.textBaseline = "middle";
+    ctx.font = '13px "Open Sans", sans-serif';
+    ctx.fillText("Press START to play", padL + plotW / 2, padT + plotH / 2);
+    return;
   }
 
   const line =