A first game's first turn: the step light, the goal, and a held opening

Three strangers this week pressed play, looked at the board for a
minute, and closed it. What they saw: a small maze under a roll-off
card, a column of prose, seven strange cards, and nothing that said
where they were or what to tap. Now, on a browser's first game, the
squares a stride can reach glow and the rest of the maze falls into
shadow, with one line hung over the wizard for the first stride. The
turn banner says what winning is for the first two rounds. And when
the clockwork rolls first, its opening turn waits behind the roll-off
card instead of playing out unwatched, then arrives a beat at a time.
The step light switches off once that first game is won, and lives in
preferences for anyone who wants it back.

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

packages/web/src/App.svelte

@@ -223,7 +223,7 @@
   });
   const openingRolls = $derived(net.openingRolls ?? local.openingRolls);
   function dismissRolls() {
-    net.openingRolls = null;
+    net.dismissRolls();
     local.openingRolls = null;
   }
   /** A face-up card being peeked at from the scoresheet (view-only). */
@@ -1405,6 +1405,8 @@
     const room = net.roomId;
     if (!room || finishedRoom === room) return;
     finishedRoom = room;
+    // The step light is for a first game; the second is played by sight.
+    if (prefs.finishedGames === 0) setPref("stepLight", false);
     setPref("finishedGames", prefs.finishedGames + 1);
     if (!prefs.tierChosen && prefs.botTier === "apprentice") setPref("botTier", "adept");
   });
@@ -1479,7 +1481,26 @@
   // answer to "how can he even see me?" when sight ran through a warp mouth.
   const sightTrace = $derived(view ? stackSightTrace(view) : null);
 
+  /** The step light: with no card in hand, your square and the squares a
+   * stride reaches are lit and the rest of the maze falls into shadow. */
+  const stepLight = $derived(
+    !!view && !!me && prefs.stepLight && isYourTurn && !view.turn.actionsEnded && !selectedCard &&
+    !net.spectating && !youMustRespond && view.turn.movementAllowance - view.turn.movementUsed > 0,
+  );
+  const stepCells = $derived.by(() => {
+    if (!stepLight || !view || !me) return [];
+    return SIDES.map((side) => stepTarget(view!.board, me!.position, side))
+      .filter((t) => t.kind !== "blocked")
+      .map((t) => cellKey(t.to));
+  });
+  /** The first stride of a first game gets one line on the board itself. */
+  const stepCaption = $derived(
+    stepLight && view && me && view.turn.round === 1 && view.turn.movementUsed === 0
+      ? { cell: me.position, text: "This is you — tap a lit square to walk" }
+      : null,
+  );
   const litCells = $derived.by(() => {
+    if (view && me && !selectedDef && stepLight) return new Set([cellKey(me.position), ...stepCells]);
     if (!view || !selectedDef || !yourMoment) return null;
     if (ambushVia || ambushSpell || ambushTrigger) return null; // ambushes aim at the future
     if (!me) return null;
@@ -1833,6 +1854,11 @@
             onchange={(e) => setPref("handLeft", e.currentTarget.checked)} />
           <span>Hand at the left: your cards stand in a column beside the board (wide screens)</span>
         </label>
+        <label class="pref-row pref-check">
+          <input type="checkbox" checked={prefs.stepLight}
+            onchange={(e) => setPref("stepLight", e.currentTarget.checked)} />
+          <span>Step light: on your turn, the squares you can walk to glow and the rest of the maze dims (on for a first game)</span>
+        </label>
         <label class="pref-row pref-check">
           <input type="checkbox" checked={prefs.cautions}
             onchange={(e) => setPref("cautions", e.currentTarget.checked)} />
@@ -2603,6 +2629,8 @@
           onIllusionClick={(cell, side) => (illusionPrompt = { cell, side })}
           onEdgePeek={(tip) => (peekEdge = tip)}
           {litCells}
+          spotCells={stepCells}
+          spotCaption={stepCaption}
           {sightTrace}
           povFacing={prefs.liveFp && view.you && !net.spectating ? fpvFacing : null}
           povCreatureId={prefs.liveFp && !net.spectating ? fpvBody : null}
@@ -2675,6 +2703,9 @@
         {:else if isYourTurn}
           <div class="slip yours">
             Your turn — round {view.turn.round}.
+            {#if prefs.stepLight && view.turn.round <= 2}
+              <div class="goal">Win by carrying two treasures that aren't yours to your home, or by being the last wizard standing.</div>
+            {/if}
             {#if view.turn.actionsEnded}
               {#if me?.carriedTreasureId}
                 picking up ended your actions for this turn, and the treasure comes with you —
@@ -3751,6 +3782,7 @@
     transform: rotate(-0.4deg);
   }
   .slip.yours { border-left: 4px solid #2e7d32; }
+  .slip .goal { margin-top: 0.3rem; font-size: 0.86rem; opacity: 0.85; }
   .slip.coach { border-left: 4px solid #c9a72a; }
   .slip.coach .stamp { margin-left: 0.5rem; }
   .slip.urgent { border-left: 4px solid #b3372b; transform: rotate(0.4deg); }