Eight quality-of-life turns for strangers, newcomers, and veterans

For visitors: the landing shows a clip card of the maze before asking
for a name; "Play now against a clockwork wizard" is one tap from the
landing to the first turn (the room, the seat, and the flip each
follow as the server confirms the last); pass-the-device and seat
transfer fold behind "More ways to play".

For a first game: automatons default to apprentice until this browser
has seen a game through, then step up to adept unless the tier was
picked by hand; the council speaks once unasked on a first turn; a
finished game offers "play again" (the same bots re-seated in a fresh
room) and "share the tale" (the whole replay as a link).

For players who know the box: a House rulings tab in help — what the
digital table does differently, every rulings revision (now exported
from the engine as RULES_REVISIONS, which the deckRev doc block points
at), and the 76 cards the FAQ has spoken on. And the arrow keys and
WASD walk on the board as they already did in the first-person pane.

The recorder's poster settle lengthens to outlast a change-of-eyes
wipe; two cards had caught the title card instead of the maze.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Jm2auWk6RP71CjaAb4FMoG

packages/web/src/App.svelte

@@ -244,7 +244,7 @@
   let faqCardId = $state<string | null>(null);
   /** A discard-pile card enlarged above the pile. */
   let discardPeek = $state<CardInstance | null>(null);
-  let helpTab = $state<"play" | "rules" | "cards" | "about" | "tally">("play");
+  let helpTab = $state<"play" | "rules" | "cards" | "rulings" | "about" | "tally">("play");
   let hotseatCount = $state(2);
   let setupName = $state("");
   let setupColor = $state(0);
@@ -1316,6 +1316,94 @@
     councilHints = tableHints(view);
   }
 
+  /** "Play now": one tap from the landing to a game against a clockwork
+   * wizard. The room is created, a bot seated, the boards flipped, each
+   * step as the server confirms the last; the same chain re-seats the
+   * bots of a finished game for "play again". */
+  let playNowPending = $state<{ stage: "create" | "seating" | "starting"; bots: { style?: string; tier: string }[]; seated: number } | null>(null);
+  function playNow() {
+    setPref("wizardName", name.trim());
+    playNowPending = { stage: "create", bots: [{ tier: prefs.botTier }], seated: 0 };
+    net.create(name.trim());
+  }
+  function playAgain() {
+    // The bots of the table just finished, as the roster names them ("adept hunter").
+    const bots = Object.values(net.roomBots).map((label) => {
+      const [tier, style] = String(label).split(" ");
+      return { tier: tier ?? prefs.botTier, style: style && style !== "mystery" ? style : undefined };
+    });
+    const me = net.you ?? name.trim();
+    net.leave();
+    playNowPending = { stage: "create", bots: bots.length ? bots : [{ tier: prefs.botTier }], seated: 0 };
+    setTimeout(() => net.create(me), 300);
+  }
+  $effect(() => {
+    const p = playNowPending;
+    if (!p || !net.roomId || net.you !== net.hostId) return;
+    if (net.started) { playNowPending = null; return; }
+    const botsNow = Object.keys(net.roomBots).length;
+    if (p.stage !== "starting" && botsNow < p.bots.length && botsNow === p.seated) {
+      const b = p.bots[botsNow]!;
+      net.addBot(b.style, b.tier);
+      playNowPending = { ...p, stage: "seating", seated: botsNow + 1 };
+    } else if (p.stage !== "starting" && botsNow >= p.bots.length && net.players.length >= 2) {
+      net.start(withExpansion);
+      playNowPending = { ...p, stage: "starting" };
+    }
+  });
+
+  /** The whole tale, as a link to hand around. */
+  let taleState = $state<"idle" | "minting" | "copied" | "failed">("idle");
+  async function shareTale() {
+    if (taleState === "minting") return;
+    taleState = "minting";
+    try {
+      const url = await net.requestShare(-1);
+      await navigator.clipboard.writeText(url);
+      taleState = "copied";
+    } catch {
+      taleState = "failed";
+    }
+    setTimeout(() => (taleState = "idle"), 4000);
+  }
+
+  /** A finished game counts toward this browser's experience: after the
+   * first, the automatons step up from apprentice unless the tier was
+   * picked by hand. */
+  let finishedRoom: string | null = null;
+  $effect(() => {
+    if (view?.phase !== "finished" || !view.winner || local.active) return;
+    const room = net.roomId;
+    if (!room || finishedRoom === room) return;
+    finishedRoom = room;
+    setPref("finishedGames", prefs.finishedGames + 1);
+    if (!prefs.tierChosen && prefs.botTier === "apprentice") setPref("botTier", "adept");
+  });
+
+  /** On a first turn the council speaks unasked, once — a newcomer will
+   * not know to ask, and a minute's silence is how they leave. */
+  let counciled = false;
+  $effect(() => {
+    if (!view || !isYourTurn || prefs.coached || view.turn.round !== 1 || counciled || councilHints !== null) return;
+    counciled = true;
+    void askCouncil();
+  });
+
+  /** Arrow keys and WASD walk on the board, as they do in the first-person
+   * pane — that pane takes the keys itself while it is up. */
+  function onBoardKey(e: KeyboardEvent) {
+    if (!view || !isYourTurn || prefs.liveFp || net.spectating || showHelp || caution || youMustRespond) return;
+    const t = e.target as HTMLElement | null;
+    if (t && (t.tagName === "INPUT" || t.tagName === "TEXTAREA" || t.tagName === "SELECT" || t.isContentEditable)) return;
+    const k = e.key.toLowerCase();
+    const side: Side | null =
+      k === "arrowup" || k === "w" ? "N" : k === "arrowdown" || k === "s" ? "S" :
+      k === "arrowleft" || k === "a" ? "W" : k === "arrowright" || k === "d" ? "E" : null;
+    if (!side) return;
+    e.preventDefault();
+    tryMove(side);
+  }
+
   let pickChoice = $state(false);
   function pickUp() {
     if (treasuresHere.length > 1) { pickChoice = true; return; }
@@ -1442,6 +1530,8 @@
   }
 </script>
 
+<svelte:window onkeydown={onBoardKey} />
+
 {#if fpvWorkshop}
   <FpvWorkshop />
 {:else if tokenWorkshop}
@@ -1984,11 +2074,17 @@
         <button class="about-link" onclick={() => { helpTab = "about"; showHelp = true; }}>
           about this game — a labor of love
         </button>
+        <a class="hero" href="/clips" aria-label="watch clips from the labyrinth">
+          <img src="/hero.jpg" alt="Through a wizard's eyes: an ambush watches its corridor through a wormhole" />
+        </a>
         <a class="about-link clips-link" href="/clips">watch clips from the labyrinth</a>
         <label class="field">
           <span>Your wizard's name</span>
           <input bind:value={name} maxlength="20" placeholder="e.g. Mordecai" />
         </label>
+        <button class="stamp primary play-now" disabled={!name.trim() || playNowPending !== null} onclick={playNow}>
+          {playNowPending ? "Flipping the boards…" : "Play now against a clockwork wizard"}
+        </button>
         <div class="boxlid-actions">
           <button class="stamp" disabled={!name.trim()} onclick={() => { setPref("wizardName", name.trim()); net.create(name); }}>
             Create a game
@@ -2005,6 +2101,8 @@
           </button>
         </div>
 
+        <details class="more-ways" open={local.hasSave()}>
+        <summary>More ways to play — pass one device around, or claim a transferred seat</summary>
         <div class="hotseat-row">
           <span class="hotseat-label">or play here, passing the device:</span>
           <div class="count-picker" role="group" aria-label="number of wizards">
@@ -2032,6 +2130,7 @@
             Claim a transferred seat
           </button>
         </div>
+        </details>
 
         {#if net.seats.length > 0}
           <div class="ledger">
@@ -2157,7 +2256,7 @@
             <span class="bot-row">
               <span class="bot-label">⚙ seat a</span>
               <select class="tier-pick" bind:value={botTier} aria-label="automaton difficulty"
-                onchange={() => setPref("botTier", botTier)}>
+                onchange={() => { setPref("botTier", botTier); setPref("tierChosen", true); }}>
                 <option value="apprentice">apprentice</option>
                 <option value="adept">adept</option>
                 <option value="archmage">archmage</option>
@@ -2449,7 +2548,16 @@
           </div>
         {/if}
         {#if view.phase === "finished"}
-          <div class="slip winner">🏆 {view.winner} wins!</div>
+          <div class="slip winner">🏆 {view.winner} wins!
+            {#if !local.active}
+              {#if net.you === net.hostId}
+                <button class="stamp tiny" onclick={playAgain}>play again</button>
+              {/if}
+              <button class="stamp tiny" onclick={shareTale}>
+                {taleState === "idle" ? "share the tale" : taleState === "minting" ? "…" : taleState === "copied" ? "link copied" : "share failed"}
+              </button>
+            {/if}
+          </div>
         {:else if youMustRespond}
           <div class="slip urgent">
             {#if reflectSwapCard}
@@ -3175,6 +3283,13 @@
     color: #6b5a41;
     margin: 0.5rem 0 0.4rem;
   }
+  .hero { display: block; margin: 0.6rem auto 0; max-width: 24rem; border-radius: 6px; overflow: hidden;
+          border: 1.5px solid #43331f; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); }
+  .hero img { display: block; width: 100%; }
+  .play-now { display: block; margin: 0.2rem auto 0.8rem; font-size: 0.95rem; padding: 0.6rem 1.2rem; }
+  .more-ways { margin-top: 1.2rem; }
+  .more-ways summary { cursor: pointer; font-family: "Caveat", cursive; font-size: 1.05rem; color: #8a6d3f; }
+  .more-ways summary:hover { color: #43331f; }
   .lobby-head {
     font-family: "Oswald", sans-serif;
     text-transform: uppercase;

packages/web/src/Help.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { allCardDefs } from "@wizwar/engine";
+  import { allCardDefs, RULES_REVISIONS } from "@wizwar/engine";
   import Card from "./Card.svelte";
   import Faq from "./Faq.svelte";
   import { HOW_TO_PLAY, RULES_SECTIONS } from "./rules";
@@ -13,13 +13,15 @@
     onstats,
   }: {
     onclose: () => void;
-    initialTab?: "play" | "rules" | "cards" | "about" | "tally";
+    initialTab?: "play" | "rules" | "cards" | "rulings" | "about" | "tally";
     stats?: Record<string, number | string | null> | null;
     onstats?: () => void;
   } = $props();
 
   // svelte-ignore state_referenced_locally -- the initial tab is intentionally a one-time value
-  let tab = $state<"play" | "rules" | "cards" | "about" | "tally">(initialTab);
+  let tab = $state<"play" | "rules" | "cards" | "rulings" | "about" | "tally">(initialTab);
+  /** Cards the FAQ has spoken on, in the library's order. */
+  const ruledCards = allCardDefs().filter((c) => c.faqRulings.length > 0);
   let faqCardId = $state<string | null>(null);
   let libPeek = $state<string | null>(null);
 
@@ -81,6 +83,7 @@
         <button class:current={tab === "play"} onclick={() => (tab = "play")}>How to play</button>
         <button class:current={tab === "rules"} onclick={() => (tab = "rules")}>The rules</button>
         <button class:current={tab === "cards"} onclick={() => (tab = "cards")}>Card library</button>
+        <button class:current={tab === "rulings"} onclick={() => (tab = "rulings")}>House rulings</button>
         <button class:current={tab === "about"} onclick={() => (tab = "about")}>About</button>
         <button class:current={tab === "tally"} onclick={openTally}>The tally</button>
       </nav>
@@ -184,6 +187,50 @@
           <h3>{section.title}</h3>
           {#each section.body as p, i (i)}<p>{p}</p>{/each}
         {/each}
+      {:else if tab === "rulings"}
+        <p class="colophon">
+          For players who know the box. Where this table departs from the
+          cardboard, and the calls it makes where the rulebook is silent.
+          Every game is frozen at the revision it was dealt under, so an old
+          game replays exactly as it was played. If the table rules against
+          your memory of the rules, the 🐞 report button pins the moment
+          for review — the reply lands in your lobby.
+        </p>
+        <h3>What the digital table does differently</h3>
+        <p>THE THUMB OF GOD is a divine meteor. Aim it at a square; the die
+          drifts up to two squares in a random direction, then every token in
+          and around the landing square — objects, treasures, creatures, even
+          wizards — is flung to a random nearby square. Walls mean nothing to
+          falling cardboard, and there is no counteraction.</p>
+        <p>An ILLUSION WALL is real only to those who believe it. Its creator
+          sees through it from the start; everyone else sees stone until they
+          walk into it or see through it, and the maze remembers each
+          wizard's verdict separately. An untested illusion shimmers faintly.</p>
+        <p>An ambush (OPPORTUNITY FIRE) is set with the attack card it will
+          fire and a trigger of your choice: an opponent entering your line of
+          sight, coming within one square, or picking up any treasure. It
+          springs on their turn, out of yours.</p>
+        <p>Clockwork wizards — the automatons — play from the same redacted
+          view a human seat gets and obey every rule; a tier changes what
+          they draw and know, never how correctly they play.</p>
+        <p>A turn need not be taken at once. Games wait on the lobby ledger
+          for days; the browser holds your seat; a replay of any game can be
+          watched from above or through a wizard's eyes and shared by link.</p>
+        <h3>Rulings by revision</h3>
+        <p class="colophon">Each revision below changed how something resolves; games dealt before it keep the old reading.</p>
+        <dl class="revisions">
+          {#each RULES_REVISIONS as r (r.rev)}
+            <dt>Rev {r.rev}</dt><dd>{r.note}</dd>
+          {/each}
+        </dl>
+        <h3>Card rulings from the FAQ</h3>
+        <p class="colophon">{ruledCards.length} cards carry rulings from the official FAQ; the engine follows them.</p>
+        {#each ruledCards as c (c.id)}
+          <details class="ruling">
+            <summary>{c.name}</summary>
+            {#each c.faqRulings as q, i (i)}<p>{q}</p>{/each}
+          </details>
+        {/each}
       {:else if tab === "rules"}
         <p class="colophon">
           Sixth edition rules, from the original rulebook. © 1985 Jolly Games —
@@ -336,6 +383,13 @@
     margin: 1.2rem 0 0.4rem;
   }
   .booklet-body h3:first-child { margin-top: 0; }
+  .revisions { margin: 0.4rem 0 1rem; }
+  .revisions dt { font-family: "Oswald", sans-serif; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.75rem; margin-top: 0.6rem; }
+  .revisions dd { margin: 0.1rem 0 0; }
+  .revisions dd::first-letter { text-transform: uppercase; }
+  .ruling { margin: 0.3rem 0; }
+  .ruling summary { cursor: pointer; font-weight: 600; }
+  .ruling p { margin: 0.3rem 0 0.5rem 1rem; }
   .booklet-body p { margin: 0.35rem 0; }
   .colophon { font-style: italic; color: #6b5a41; font-size: 0.85rem; }
   .booklet-body a { color: #8a4a1f; text-decoration-style: dotted; }

packages/web/src/prefs.svelte.ts

@@ -27,6 +27,10 @@ export interface Prefs {
   handLeft: boolean;
   /** The first-turn coaching slip has been read and dismissed. */
   coached: boolean;
+  /** The automaton tier was picked by hand (so a finished game leaves it alone). */
+  tierChosen: boolean;
+  /** Games this browser has seen through to a winner. */
+  finishedGames: number;
 }
 
 const KEY = "wizwar-prefs";
@@ -34,8 +38,8 @@ const KEY = "wizwar-prefs";
 function load(): Prefs {
   const fallback: Prefs = {
     art: "photo", autoGrab: false, flourishes: true, wizardName: "", color: null,
-    cautions: true, botTier: "adept", instantReplay: true, liveFp: false, handLeft: false,
-    coached: false,
+    cautions: true, botTier: "apprentice", instantReplay: true, liveFp: false, handLeft: false,
+    coached: false, tierChosen: false, finishedGames: 0,
   };
   try {
     const raw = localStorage.getItem(KEY);
@@ -48,11 +52,15 @@ function load(): Prefs {
       wizardName: typeof p.wizardName === "string" ? p.wizardName.slice(0, 20) : "",
       color: typeof p.color === "number" && p.color >= 0 && p.color <= 5 ? p.color : null,
       cautions: p.cautions !== false,
-      botTier: p.botTier === "apprentice" || p.botTier === "archmage" ? p.botTier : "adept",
+      // A first game is against an apprentice; a browser that has finished
+      // one is promoted to adept unless the tier was picked by hand.
+      botTier: p.botTier === "adept" || p.botTier === "archmage" ? p.botTier : "apprentice",
       instantReplay: p.instantReplay !== false,
       liveFp: p.liveFp === true,
       handLeft: p.handLeft === true,
       coached: p.coached === true,
+      tierChosen: p.tierChosen === true,
+      finishedGames: typeof p.finishedGames === "number" ? p.finishedGames : 0,
     };
   } catch {
     return fallback;