The lobby says the plain words beside the flavor

Two evening arrivals created a room and left in the lobby: one never
seated anyone, one seated a bot and never pressed the button. The card
led with "share the link" as if company were required, the row of
temperaments had no word saying they were computer opponents, and the
start button said only "Flip the boards".

Now the card has three headings — Invite friends, Your colour, Or seat
a computer wizard — with one line on what a hunter, berserker, and
worrier do; the start button says Start the game with "flip the
boards · N wizards" beneath; and while it is disabled a line says what
would enable it.

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-03 18:48:05 -04:00
co-authored by Claude Fable 5.1
parent 6e1b565228
commit a7c55819ca
+23 -2
View File
@@ -1931,6 +1931,7 @@
<div class="handoff-card"> <div class="handoff-card">
<div class="handoff-eyebrow">wizard {local.setup.names.length + 1} of {local.setup.count}</div> <div class="handoff-eyebrow">wizard {local.setup.names.length + 1} of {local.setup.count}</div>
<div class="handoff-name setup-title">What is your name?</div> <div class="handoff-name setup-title">What is your name?</div>
<div class="lobby-head">Your colour</div>
<div class="standee-row" role="group" aria-label="choose your wizard"> <div class="standee-row" role="group" aria-label="choose your wizard">
{#each [0, 1, 2, 3, 4, 5] as c (c)} {#each [0, 1, 2, 3, 4, 5] as c (c)}
{@const taken = local.setup.colors.includes(c)} {@const taken = local.setup.colors.includes(c)}
@@ -2094,6 +2095,7 @@
<section class="boxlid"> <section class="boxlid">
<div class="boxlid-inner"> <div class="boxlid-inner">
<div class="boxlid-title small">Room {net.roomId}</div> <div class="boxlid-title small">Room {net.roomId}</div>
<div class="lobby-head">Invite friends</div>
<div class="boxlid-tag">Share the code — or the link. Two to six wizards enter the maze.</div> <div class="boxlid-tag">Share the code — or the link. Two to six wizards enter the maze.</div>
<div class="invite-row"> <div class="invite-row">
<code class="invite-link">{inviteLink}</code> <code class="invite-link">{inviteLink}</code>
@@ -2128,6 +2130,7 @@
</div> </div>
{/if} {/if}
{:else} {:else}
<div class="lobby-head">Your colour</div>
<div class="standee-row" role="group" aria-label="choose your wizard"> <div class="standee-row" role="group" aria-label="choose your wizard">
{#each [0, 1, 2, 3, 4, 5] as c (c)} {#each [0, 1, 2, 3, 4, 5] as c (c)}
{@const takenBy = Object.entries(net.roomColors).find(([, v]) => v === c)?.[0]} {@const takenBy = Object.entries(net.roomColors).find(([, v]) => v === c)?.[0]}
@@ -2148,6 +2151,9 @@
<button class="stamp tiny abandon" title="dissolve this room for everyone" <button class="stamp tiny abandon" title="dissolve this room for everyone"
onclick={() => net.abandonRoom()}>abandon room</button> onclick={() => net.abandonRoom()}>abandon room</button>
{#if net.players.length < 6} {#if net.players.length < 6}
<div class="lobby-head">Or seat a computer wizard</div>
<div class="boxlid-tag">An automaton plays a full seat by the rules — a hunter goes for treasure,
a berserker for blood, a worrier for the shadows between; mystery deals one at random.</div>
<span class="bot-row"> <span class="bot-row">
<span class="bot-label">⚙ seat a</span> <span class="bot-label">⚙ seat a</span>
<select class="tier-pick" bind:value={botTier} aria-label="automaton difficulty" <select class="tier-pick" bind:value={botTier} aria-label="automaton difficulty"
@@ -2167,12 +2173,16 @@
Include Expansion Set #1 — monsters &amp; wands Include Expansion Set #1 — monsters &amp; wands
</label> </label>
<button <button
class="stamp big" class="stamp big begin"
disabled={net.players.length < 2 || net.players.length > 6} disabled={net.players.length < 2 || net.players.length > 6}
onclick={() => net.start(withExpansion)} onclick={() => net.start(withExpansion)}
> >
Flip the boards ({net.players.length} wizard{net.players.length === 1 ? "" : "s"}) Start the game
<span class="sub">flip the boards · {net.players.length} wizard{net.players.length === 1 ? "" : "s"}</span>
</button> </button>
{#if net.players.length < 2}
<div class="begin-hint">Seat a computer wizard, or invite a friend, and the boards can flip.</div>
{/if}
{:else} {:else}
<p class="waiting">Waiting for {net.hostId} to flip the boards…</p> <p class="waiting">Waiting for {net.hostId} to flip the boards…</p>
{/if} {/if}
@@ -3164,6 +3174,17 @@
color: #6b5a41; color: #6b5a41;
margin: 0.5rem 0 0.4rem; margin: 0.5rem 0 0.4rem;
} }
.lobby-head {
font-family: "Oswald", sans-serif;
text-transform: uppercase;
letter-spacing: 0.14em;
font-size: 0.72rem;
color: #8a6d3f;
margin: 1.1rem 0 0;
}
.stamp.big.begin { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.15; }
.stamp.big.begin .sub { font-size: 0.68rem; letter-spacing: 0.1em; opacity: 0.75; margin-top: 0.15rem; }
.begin-hint { font-size: 0.85rem; color: #8a6d3f; margin-top: 0.4rem; }
.about-link { .about-link {
background: none; background: none;
border: none; border: none;