eric/wizwar6e
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

The lobby leads with your wizard, then fills the table

Browse Source 
Pick your color first; then one section, "Fill the table", holds the
invite link, the roster, and the computer wizards, with a line saying
friends, automatons, or a mix all count toward the two to six. Abandon
sits below Start on its own line.

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:53:48 -04:00
co-authored by Claude Fable 5.1
parent c2506dae69
commit 9d2c66f0bd
1 changed files with 37 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/web/src/App.svelte
+37 -35
View File
@@ -2095,8 +2095,28 @@
<section class="boxlid">
<div class="boxlid-inner">
<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>
{#if !net.spectating}
<div class="lobby-head">Your color</div>
<div class="standee-row" role="group" aria-label="choose your wizard">
{#each [0, 1, 2, 3, 4, 5] as c (c)}
{@const takenBy = Object.entries(net.roomColors).find(([, v]) => v === c)?.[0]}
<button
class="standee"
class:current={net.you != null && net.roomColors[net.you] === c}
class:taken={takenBy !== undefined && takenBy !== net.you}
disabled={takenBy !== undefined && takenBy !== net.you}
style:--ring={PLAYER_COLORS[c]}
onclick={() => net.pickColor(c)}
aria-label={`wizard color ${c + 1}${takenBy && takenBy !== net.you ? ` (taken by ${takenBy})` : ""}`}
>
<img src={tokenArt(`wizard-${c}`, "players")} alt="" />
</button>
{/each}
</div>
{/if}
<div class="lobby-head">Fill the table</div>
<div class="boxlid-tag">Two to six wizards enter the maze — friends by code or link,
computer wizards seated below, or a mix of both.</div>
<div class="invite-row">
<code class="invite-link">{inviteLink}</code>
<button class="stamp tiny" onclick={copyInvite}>{inviteCopied ? "copied!" : "copy link"}</button>
@@ -2119,39 +2139,19 @@
{/each}
</ul>
{#if net.spectating}
<p class="waiting">👁 You watch from the Peanut Gallery. Waiting for the boards to flip…</p>
{#if net.players.length < 6}
<div class="gallery-join">
<input bind:value={name} maxlength="20" placeholder="e.g. Mordecai" aria-label="your wizard's name" />
<button class="stamp" disabled={!name.trim()}
onclick={() => { setPref("wizardName", name.trim()); net.join(net.roomId!, name.trim()); }}>
…or take a seat
</button>
</div>
{/if}
{:else}
<div class="lobby-head">Your color</div>
<div class="standee-row" role="group" aria-label="choose your wizard">
{#each [0, 1, 2, 3, 4, 5] as c (c)}
{@const takenBy = Object.entries(net.roomColors).find(([, v]) => v === c)?.[0]}
<button
class="standee"
class:current={net.you != null && net.roomColors[net.you] === c}
class:taken={takenBy !== undefined && takenBy !== net.you}
disabled={takenBy !== undefined && takenBy !== net.you}
style:--ring={PLAYER_COLORS[c]}
onclick={() => net.pickColor(c)}
aria-label={`wizard color ${c + 1}${takenBy && takenBy !== net.you ? ` (taken by ${takenBy})` : ""}`}
>
<img src={tokenArt(`wizard-${c}`, "players")} alt="" />
</button>
{/each}
</div>
{#if net.you === net.hostId}
<button class="stamp tiny abandon" title="dissolve this room for everyone"
onclick={() => net.abandonRoom()}>abandon room</button>
<p class="waiting">👁 You watch from the Peanut Gallery. Waiting for the boards to flip…</p>
{#if net.players.length < 6}
<div class="lobby-head">Or seat a computer wizard</div>
<div class="gallery-join">
<input bind:value={name} maxlength="20" placeholder="e.g. Mordecai" aria-label="your wizard's name" />
<button class="stamp" disabled={!name.trim()}
onclick={() => { setPref("wizardName", name.trim()); net.join(net.roomId!, name.trim()); }}>
…or take a seat
</button>
</div>
{/if}
{:else if net.you === net.hostId}
{#if net.players.length < 6}
<div class="lobby-head">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">
@@ -2183,10 +2183,11 @@
{#if net.players.length < 2}
<div class="begin-hint">Seat a computer wizard, or invite a friend, and the boards can flip.</div>
{/if}
<button class="stamp tiny abandon" title="dissolve this room for everyone"
onclick={() => net.abandonRoom()}>abandon room</button>
{:else}
<p class="waiting">Waiting for {net.hostId} to flip the boards…</p>
{/if}
{/if}
</div>
</section>
{:else if view}
@@ -3185,6 +3186,7 @@
.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; }
.stamp.tiny.abandon { display: block; margin: 0.9rem auto 0; }
.about-link {
background: none;
border: none;