A table for a dozen wizards, begun by its host

Rooms take up to twelve seats and the host begins the duel with whoever
is seated; a full table begins by itself. The lobby is a roster with a
bot seat and the host's begin button. The ledger pins the turn and your
own columns and scrolls sideways to the rest; the phone bar shows every
wizard's health; a wizard who is out watches the rest; each charmed
wizard gets their own gesture; an unnamed spell goes at whoever hurt you
last, else the weakest opponent; a stab has a target from the start.

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

src/lib/components/MobileBar.svelte

@@ -8,9 +8,12 @@
 
 {#if !duel.state.over}
 	<div class="bar">
-		<div class="health">
+		<div class="health" class:many={duel.others.length > 1}>
 			<span><em>{duel.you.name}</em> {duel.you.hp}/{MAX_HP}</span>
-			<span><em>{duel.foe.name}</em> {duel.foe.hp}/{MAX_HP}</span>
+			{#each duel.others as id (id)}
+				{@const w = duel.state.wizards[id]}
+				<span class:gone={!w.alive || w.surrendered}><em>{w.name}</em> {w.hp}/{MAX_HP}</span>
+			{/each}
 		</div>
 		<div class="gestures" aria-label="Chosen gestures">
 			{#each HANDS as hand (hand)}
@@ -18,7 +21,7 @@
 			{/each}
 		</div>
 		<button type="button" class="reveal" disabled={!duel.ready} onclick={() => duel.reveal()}>
-			{duel.surrendering ? 'Surrender' : duel.timeStopped ? 'Act' : 'Reveal'}
+			{duel.out ? 'Out' : duel.moved ? 'Waiting' : duel.surrendering ? 'Surrender' : duel.timeStopped ? 'Act' : 'Reveal'}
 		</button>
 	</div>
 {/if}
@@ -55,10 +58,22 @@
 		line-height: 1.3;
 	}
 
+	.health.many {
+		flex-direction: row;
+		flex-wrap: wrap;
+		gap: 0 0.6rem;
+		font-size: 0.72rem;
+	}
+
 	.health em {
 		color: var(--bone);
 	}
 
+	.health .gone {
+		text-decoration: line-through;
+		opacity: 0.6;
+	}
+
 	.gestures {
 		display: flex;
 		gap: 0.5rem;