The art workshop's side door

The hand-drawn SVG token set wires in behind deliberately
undocumented query params — svgPlayers, svgCreatures, svgTerrain,
svgObjects, each =true — swapping that category's art everywhere it
draws: board tokens, lobby standees, roster. public/tokens-svg
symlinks research/tokens-svg, so under the dev server an edit to the
source art shows on the next refresh, and the production build copies
real files through the link. Nobody finds the door unless handed the
key; the photographed set remains the face of the game.

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

packages/web/src/Board.svelte

@@ -2,6 +2,7 @@
   import type { GameView } from "@wizwar/engine";
   import type { Side } from "@wizwar/engine";
   import { colorIndexOf as sharedColorIndex, wizardColor } from "./colors";
+  import { tokenArt } from "./art";
   import { FX_SPRITES } from "./fx-sprites";
 
   const CELL = 48;
@@ -119,10 +120,10 @@
     return 1;
   }
   function wizardArt(id: string): string {
-    return `/tokens/wizard-${sharedColorIndex(view, id) % 6}.png`;
+    return tokenArt(`wizard-${sharedColorIndex(view, id) % 6}`, "players");
   }
   function treasureArt(owner: string): string {
-    return `/tokens/treasure-${sharedColorIndex(view, owner) % 6}.png`;
+    return tokenArt(`treasure-${sharedColorIndex(view, owner) % 6}`, "objects");
   }
 
   function playerColor(id: string): string {
@@ -298,7 +299,7 @@
     {@const sy = Number(key.split(",")[1])}
     {#if USE_TOKEN_ART && TERRAIN_ART[content.kind]}
       <image
-        href={`/tokens/${TERRAIN_ART[content.kind]}.png`}
+        href={tokenArt(TERRAIN_ART[content.kind]!, "terrain")}
         x={sx * CELL + 3} y={sy * CELL + 3}
         width={CELL - 6} height={CELL - 6}
         preserveAspectRatio="xMidYMid slice"
@@ -328,7 +329,7 @@
     {#each [w.a, w.b] as tok, i (i)}
       {#if USE_TOKEN_ART}
         <image
-          href="/tokens/dimensional-warp.png"
+          href={tokenArt("dimensional-warp", "terrain")}
           x={tok.x * CELL + CELL * 0.04} y={tok.y * CELL + CELL * 0.04}
           width={CELL * 0.44} height={CELL * 0.44}
           preserveAspectRatio="xMidYMid slice" class="token-art"
@@ -356,7 +357,7 @@
       {@const art = USE_TOKEN_ART ? objectArt(o.cardId) : null}
       {#if art}
         <image
-          href={`/tokens/${art}.png`}
+          href={tokenArt(art, "objects")}
           x={gx * CELL + 4 + i * 9} y={gy * CELL + CELL - CELL * 0.42 - 3}
           width={CELL * 0.4} height={CELL * 0.4}
           preserveAspectRatio="xMidYMid slice"
@@ -556,7 +557,7 @@
       >
         {#if USE_TOKEN_ART && CREATURE_ART[c.kind]}
           <image
-            href={`/tokens/${CREATURE_ART[c.kind]}.png`}
+            href={tokenArt(CREATURE_ART[c.kind]!, "creatures")}
             x={-CELL * 0.26} y={-CELL * 0.26}
             width={CELL * 0.52} height={CELL * 0.52}
             preserveAspectRatio="xMidYMid slice"