Expansion wave 1: the creature system and first eight monster cards

Creatures are first-class citizens: TROLL (D4 punches, 6 damage to
kill, regenerates at its creator's turn end), SKELETON (2-point
punches), WRAITH (walks through one wall a turn; its touch deals 2
and steals a random card), FIRE IMP (a stationary turret scorching
anyone in sight once per turn — including its creator — killed only
by Waterbolt or a Waterwall wave), DEMOCRATIC MONSTER (moved three
spaces by EVERY player on their turn, one claw per round), SHADOW (a
second body costing a life point per turn, destroyed by any damage),
and ALTER EGO (a stationary double). Monsters obey their creators,
move on the controller's turn, attack once per turn but never on
their creation turn (summoning IS your attack), refuse to strike
their creators, and vanish when their creator dies. Attacks can
target creatures directly (no counteraction window — monsters don't
counter); Dispel Creation un-creates them. Plus MEGA-MONSTER (double
a monster's toughness or speed), ADRENALINE (two attacks a turn),
MAD DASH, and LIFESAVER. Expansion Set #2 confirmed by Eric as a
5e-era product — marked historical-only in the data; the 6e game is
exactly base + Expansion #1 (200 cards, all verified). Lobby gains an
"include Expansion Set #1" toggle; the client renders creatures as
diamond tokens with select-move-attack interaction. 95 tests passing.

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

packages/web/src/Board.svelte

@@ -8,15 +8,19 @@
   let {
     view,
     edgeSelectMode = false,
+    selectedCreatureId = null,
     onCellClick,
     onEdgeClick,
     onPlayerClick,
+    onCreatureClick,
   }: {
     view: GameView;
     edgeSelectMode?: boolean;
+    selectedCreatureId?: string | null;
     onCellClick?: (cell: { x: number; y: number }) => void;
     onEdgeClick?: (cell: { x: number; y: number }, side: Side) => void;
     onPlayerClick?: (playerId: string) => void;
+    onCreatureClick?: (creatureId: string) => void;
   } = $props();
 
   const PLAYER_COLORS = ["#1a9c46", "#d3352b", "#c9308f", "#3a3ac0", "#2ab0c9", "#c9a72a"];
@@ -187,6 +191,28 @@
     {/each}
   {/each}
 
+  <!-- creatures -->
+  {#each view.creatures as c (c.id)}
+    {@const ccx = c.position.x * CELL + CELL * 0.72}
+    {@const ccy = c.position.y * CELL + CELL * 0.7}
+    <g
+      role="button" tabindex="-1" class="creature"
+      onclick={(ev) => { ev.stopPropagation(); onCreatureClick?.(c.id); }}
+      onkeydown={() => {}}
+    >
+      <rect
+        x={ccx - 10} y={ccy - 10} width={20} height={20} rx="3"
+        transform={`rotate(45 ${ccx} ${ccy})`}
+        class="creature-body"
+        class:selected={c.id === selectedCreatureId}
+        stroke={playerColor(c.controllerId)}
+      >
+        <title>{c.kind} ({c.controllerId}) — {c.damage}/{Number.isFinite(c.maxDamage) ? c.maxDamage : "∞"} dmg</title>
+      </rect>
+      <text x={ccx} y={ccy + 4} class="creature-label">{c.kind === "fire-imp" ? "I" : c.kind === "democratic-monster" ? "D" : c.kind[0]?.toUpperCase()}</text>
+    </g>
+  {/each}
+
   <!-- edge selection hitboxes -->
   {#each edgeHitboxes as h (`${h.cell.x},${h.cell.y},${h.side}`)}
     <rect
@@ -221,6 +247,10 @@
   .bush { fill: #2e7d32; stroke: #1b4d1e; stroke-width: 2; }
   .ground-object { fill: #a6812e; stroke: #4a3a10; stroke-width: 1; }
   .illusion { stroke: #7a6f9a; stroke-width: 4; stroke-dasharray: 6 5; opacity: 0.7; }
+  .creature { cursor: pointer; }
+  .creature-body { fill: #3b3428; stroke-width: 2.5; }
+  .creature-body.selected { fill: #6b5a34; }
+  .creature-label { font-size: 11px; font-weight: bold; fill: #f4ead2; text-anchor: middle; pointer-events: none; }
   .home { font-size: 26px; text-anchor: middle; dominant-baseline: middle; opacity: 0.85; }
   .treasure { stroke: #111; stroke-width: 1.2; }
   .warp { font-size: 13px; text-anchor: middle; fill: #6a5f4b; font-weight: bold; }