The tester's second pass: the rule as written, advice that follows the board, the fold, the story on the replay page, and one click to begin

- Help said "walk, then act"; the rules let moves and cards come in any
  order, and now the help does too.
- The council's advice is derived from the live view while its panel is
  open, so a Number just played for movement is no longer recommended.
  It rests when the turn is not yours; "ask again" had nothing to add.
- The landing puts the name and the ways in before the clip, and beside
  it on a desktop: at 1280x720 the play button and Create/Join are above
  the fold.
- The replay page opens with the same deed the share card promises, and
  "play free" stands beside the reel instead of after the history.
- In hotseat the "pass the device" scrim stood above the roll-off, so the
  first click on "begin" landed on the handoff card. The handoff waits
  for the dice.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Jm2auWk6RP71CjaAb4FMoG
This commit is contained in:
Eric Wagoner
2026-09-16 21:43:12 -04:00
co-authored by Claude Fable 5.1
parent 3d88f629b7
commit 4c2a253723
4 changed files with 90 additions and 43 deletions
+17 -2
View File
@@ -15,6 +15,8 @@
actor: string;
round: number;
whole?: boolean;
/** The turn's deed in one line, as the share card says it. */
headline?: string | null;
}
let data = $state<ShareSteps | null>(null);
let failed = $state(false);
@@ -32,7 +34,14 @@
<a class="share-brand" href="/">WIZ-WAR</a>
{#if data}
<div class="share-title">
{#if data.whole}The whole tale{data.actor ? ` — ${data.actor} triumphant` : ""}{:else}Instant replay — {data.actor}'s turn{data.round ? ` (round ${data.round})` : ""}{/if}
{#if data.whole}
<span class="share-deed">The whole tale{data.actor ? ` — ${data.actor} triumphant` : ""}</span>
{:else if data.headline}
<span class="share-deed">{data.headline}</span>
<span class="share-sub">an instant replay of {data.actor}'s turn{data.round ? `, round ${data.round}` : ""}</span>
{:else}
<span class="share-deed">Instant replay — {data.actor}'s turn{data.round ? ` (round ${data.round})` : ""}</span>
{/if}
</div>
{/if}
</header>
@@ -51,6 +60,9 @@
onclose={() => (reelKey += 1)} />
{/key}
</div>
<div class="share-play">
<a class="share-cta" href="/">▶ play free — two to six wizards enter the maze</a>
</div>
{/if}
<footer class="share-foot">
@@ -61,7 +73,6 @@
transcribed, every wall verified, replays rebuilt move by move from
the game's own ledger.
</p>
<a class="share-cta" href="/">▶ play free — two to six wizards enter the maze</a>
</footer>
</div>
@@ -79,6 +90,7 @@
.share-head {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 1rem;
width: min(46rem, 100%);
margin-bottom: 0.6rem;
@@ -97,6 +109,9 @@
font-size: 0.85rem;
color: #e9e1cb;
}
.share-deed { display: block; }
.share-sub { display: block; text-transform: none; letter-spacing: 0.02em; color: #8d8672; font-size: 0.8rem; }
.share-play { width: min(46rem, 100%); margin-top: 0.8rem; text-align: center; }
/* The reel is a modal everywhere else; here it stands in the page. */
.share-stage { width: min(46rem, 100%); }
.share-stage :global(.replay-scrim) {