Pick your standee: hotseat wizards choose their color while naming

The naming round now shows the six real wizard standees; each player
taps theirs before typing their name, claimed standees gray out, and
the next player defaults to the first free one. The choice travels as
an optional colors array in the engine config, the view exposes each
player's colorIndex, and the board, score sheet, treasure chests, and
wizard art all follow the chosen color instead of seat order —
persisting through hotseat saves. Verified: Alice claimed the yellow
standee and marched onto the board as the yellow wizard with yellow
treasure chests. (Online rooms still assign by seat order; a lobby
color picker can reuse the same config field later.)

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

packages/web/src/local.svelte.ts

@@ -36,7 +36,7 @@ function actorId(state: GameState): PlayerId {
 class LocalGame {
   active = $state(false);
   /** Hotseat setup round: players name themselves one by one. */
-  setup = $state<{ count: number; expansion: boolean; names: PlayerId[] } | null>(null);
+  setup = $state<{ count: number; expansion: boolean; names: PlayerId[]; colors: number[] } | null>(null);
   gameState = $state<GameState | null>(null);
   viewerId = $state<PlayerId | null>(null);
   /** Set while the device should be handed to the named player. */
@@ -54,31 +54,38 @@ class LocalGame {
   }
 
   beginSetup(count: number, expansion: boolean): void {
-    this.setup = { count, expansion, names: [] };
+    this.setup = { count, expansion, names: [], colors: [] };
   }
 
   cancelSetup(): void {
     this.setup = null;
   }
 
-  /** One wizard names themselves; the last name starts the game. */
-  submitName(raw: string): string | null {
+  /** One wizard names themselves and picks a standee; the last starts the game. */
+  submitName(raw: string, colorIndex: number): string | null {
     if (!this.setup) return "no setup in progress";
     const name = raw.trim();
     if (!name) return "every wizard needs a name";
     if (this.setup.names.some((n) => n.toLowerCase() === name.toLowerCase())) {
       return "that name is already taken at this table";
     }
-    this.setup = { ...this.setup, names: [...this.setup.names, name] };
+    if (this.setup.colors.includes(colorIndex)) {
+      return "that wizard has already been claimed";
+    }
+    this.setup = {
+      ...this.setup,
+      names: [...this.setup.names, name],
+      colors: [...this.setup.colors, colorIndex],
+    };
     if (this.setup.names.length === this.setup.count) {
-      const { names, expansion } = this.setup;
+      const { names, expansion, colors } = this.setup;
       this.setup = null;
-      return this.start(names, expansion);
+      return this.start(names, expansion, colors);
     }
     return null;
   }
 
-  start(names: PlayerId[], expansion: boolean): string | null {
+  start(names: PlayerId[], expansion: boolean, colors?: number[]): string | null {
     const cleaned = [...new Set(names.map((n) => n.trim()).filter(Boolean))];
     if (cleaned.length < 2 || cleaned.length > 6) return "two to six wizards, each with a name";
     const seed = crypto.getRandomValues(new Uint32Array(1))[0]!;
@@ -86,6 +93,7 @@ class LocalGame {
       playerIds: cleaned,
       seed,
       sets: expansion ? ["basic", "expansion1"] : ["basic"],
+      ...(colors ? { colors } : {}),
     };
     const { state, events } = createGame(config);
     this.config = config;