From ed7a58a6982967f68d71cef28e5937e5dff03c15 Mon Sep 17 00:00:00 2001
From: Eric Wagoner <ewagoner@gmail.com>
Date: Tue, 18 Aug 2026 09:13:31 -0400
Subject: [PATCH] The workshop gains 'The standing fires': board furniture on
 display
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

FirewallEdge (both orientations), the illusion shimmer, and the sight
trace (direct and through-a-warp) join the /?fx gallery — and to keep
the display honest, the shimmer and sight trace were extracted from
Board.svelte's inline markup into IllusionShimmer.svelte and
SightTraceOverlay.svelte, so the workshop mounts the very components
the live board does. No copies to drift.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0138A8CjeQRpvzKxuMfz1Bqc
---
 packages/web/src/Board.svelte             | 66 ++--------------------
 packages/web/src/FxGallery.svelte         | 69 +++++++++++++++++++++++
 packages/web/src/IllusionShimmer.svelte   | 42 ++++++++++++++
 packages/web/src/SightTraceOverlay.svelte | 54 ++++++++++++++++++
 4 files changed, 171 insertions(+), 60 deletions(-)
 create mode 100644 packages/web/src/IllusionShimmer.svelte
 create mode 100644 packages/web/src/SightTraceOverlay.svelte

diff --git a/packages/web/src/Board.svelte b/packages/web/src/Board.svelte
index c3c891f..36bc742 100644
--- a/packages/web/src/Board.svelte
+++ b/packages/web/src/Board.svelte
@@ -6,6 +6,8 @@
   import { colorIndexOf as sharedColorIndex, wizardColor } from "./colors";
   import { CREATURE_ART, objectArt, TERRAIN_ART, tokenArt } from "./art";
   import FirewallEdge from "./FirewallEdge.svelte";
+  import IllusionShimmer from "./IllusionShimmer.svelte";
+  import SightTraceOverlay from "./SightTraceOverlay.svelte";
   import TokenArt from "./TokenArt.svelte";
   import { FX_SPRITES } from "./fx-sprites";
 
@@ -437,18 +439,11 @@
   <!-- untested illusions: the wall stands, but it shimmers — click to doubt it -->
   {#each Object.entries(view.illusionEdges) as [key, verdict] (key)}
     {#if verdict === "untested"}
-      {@const kind = key.split(":")[0]}
+      {@const kind = key.split(":")[0] === "V" ? "V" as const : "H" as const}
       {@const ix = Number(key.split(":")[1]?.split(",")[0])}
       {@const iy = Number(key.split(":")[1]?.split(",")[1])}
-      {@const x1 = kind === "V" ? (ix + 1) * CELL : ix * CELL + 2}
-      {@const y1 = kind === "V" ? iy * CELL + 2 : (iy + 1) * CELL}
-      {@const x2 = kind === "V" ? (ix + 1) * CELL : (ix + 1) * CELL - 2}
-      {@const y2 = kind === "V" ? (iy + 1) * CELL - 2 : (iy + 1) * CELL}
-      <line {x1} {y1} {x2} {y2} class="illusion-shimmer" />
-      <line {x1} {y1} {x2} {y2} class="illusion-hit"
-        role="button" tabindex="-1" aria-label="a shimmering wall — test your eyes"
-        onclick={(ev) => { ev.stopPropagation(); onIllusionClick?.({ x: ix, y: iy }, kind === "V" ? "E" : "S"); }}
-        onkeydown={() => {}} />
+      <IllusionShimmer x={ix} y={iy} {kind}
+        onclick={() => onIllusionClick?.({ x: ix, y: iy }, kind === "V" ? "E" : "S")} />
     {/if}
   {/each}
 
@@ -645,20 +640,7 @@
   {/if}
   <!-- the sight line an attack traveled, leg by leg through any warp mouth -->
   {#if sightTrace}
-    {@const A = { x: sightTrace.from.x * CELL + CELL / 2, y: sightTrace.from.y * CELL + CELL * 0.36 }}
-    {@const B = { x: sightTrace.to.x * CELL + CELL / 2, y: sightTrace.to.y * CELL + CELL * 0.36 }}
-    <g class="sight-layer" aria-hidden="true">
-      {#if sightTrace.trace.kind === "direct"}
-        <line x1={A.x} y1={A.y} x2={B.x} y2={B.y} class="sight-line" />
-      {:else}
-        {@const entry = { x: sightTrace.trace.entry.x * CELL, y: sightTrace.trace.entry.y * CELL }}
-        {@const exit = { x: sightTrace.trace.exit.x * CELL, y: sightTrace.trace.exit.y * CELL }}
-        <line x1={A.x} y1={A.y} x2={entry.x} y2={entry.y} class="sight-line" />
-        <line x1={exit.x} y1={exit.y} x2={B.x} y2={B.y} class="sight-line" />
-        <circle cx={entry.x} cy={entry.y} r={7} class="sight-mouth" />
-        <circle cx={exit.x} cy={exit.y} r={7} class="sight-mouth" />
-      {/if}
-    </g>
+    <SightTraceOverlay from={sightTrace.from} to={sightTrace.to} trace={sightTrace.trace} />
   {/if}
   <!-- spell flourishes: one sprite component per effect (src/fx-sprites/) -->
   <g class="fx-layer" aria-hidden="true">
@@ -737,23 +719,6 @@
   .creature-ring.selected { stroke-width: 4; stroke-dasharray: 5 3; }
   .ground-object { fill: #a6812e; stroke: #4a3a10; stroke-width: 1; }
   .illusion { stroke: #7a6f9a; stroke-width: 4; stroke-dasharray: 6 5; opacity: 0.7; }
-  .illusion-shimmer {
-    stroke: #cfc3f0;
-    stroke-width: 3;
-    stroke-dasharray: 4 5;
-    stroke-linecap: round;
-    pointer-events: none;
-    animation: shimmer-drift 1.4s linear infinite;
-  }
-  .illusion-hit { stroke: transparent; stroke-width: 14; cursor: pointer; }
-  @keyframes shimmer-drift {
-    0% { stroke-dashoffset: 0; opacity: 0.9; }
-    50% { opacity: 0.4; }
-    100% { stroke-dashoffset: -18; opacity: 0.9; }
-  }
-  @media (prefers-reduced-motion: reduce) {
-    .illusion-shimmer { animation: none; opacity: 0.7; }
-  }
   .creature { cursor: pointer; }
   .creature-body { fill: #3b3428; stroke-width: 2.5; }
   .creature-body.selected { fill: #6b5a34; }
@@ -823,24 +788,6 @@
   .ghost-slot:hover { fill: rgba(122, 162, 122, 0.22); }
 
   .fx-layer { pointer-events: none; }
-  .sight-layer { pointer-events: none; }
-  .sight-line {
-    stroke: #c9a72a;
-    stroke-width: 2.5;
-    stroke-linecap: round;
-    stroke-dasharray: 7 6;
-    opacity: 0.85;
-    animation: sight-march 0.8s linear infinite;
-  }
-  .sight-mouth {
-    fill: none;
-    stroke: #c9a72a;
-    stroke-width: 2;
-    animation: warp-pulse 1.6s ease-in-out infinite;
-  }
-  @keyframes sight-march {
-    to { stroke-dashoffset: -13; }
-  }
   .mover { transition: transform 260ms cubic-bezier(0.25, 0.8, 0.35, 1); }
   .mover.snap { transition: none; }
 
@@ -867,7 +814,6 @@
   }
   @media (prefers-reduced-motion: reduce) {
     .marked-cell, .marked-sector, .ghost-slot, .warp-dest { animation: none; }
-    .sight-line, .sight-mouth { animation: none; }
     .fx-layer { display: none; }
     :global(.token-art.ghosted) { animation: none; }
     .mover { transition: none; }
diff --git a/packages/web/src/FxGallery.svelte b/packages/web/src/FxGallery.svelte
index 268d927..8c75ec4 100644
--- a/packages/web/src/FxGallery.svelte
+++ b/packages/web/src/FxGallery.svelte
@@ -5,6 +5,9 @@
   import type { Component } from "svelte";
   import { FX_SPRITES } from "./fx-sprites";
   import type { BoardFx, FxShape } from "./fx";
+  import FirewallEdge from "./FirewallEdge.svelte";
+  import IllusionShimmer from "./IllusionShimmer.svelte";
+  import SightTraceOverlay from "./SightTraceOverlay.svelte";
 
   let tick = $state(0);
   $effect(() => {
@@ -73,6 +76,63 @@
       </figure>
     {/each}
   </div>
+
+  <h1 class="furniture-head">The standing fires</h1>
+  <p class="sub">
+    Board furniture that burns as long as its spell holds — these loop by
+    nature, no beat needed. Same components the live board mounts.
+  </p>
+  <div class="grid">
+    <figure>
+      <svg viewBox="-4 -4 152 152">
+        {#each [0, 1, 2] as cy (cy)}{#each [0, 1, 2] as cx (cx)}
+          <rect x={cx * 48} y={cy * 48} width="48" height="48" class="cell" />
+        {/each}{/each}
+        <FirewallEdge x={1} y={0} kind="H" />
+      </svg>
+      <figcaption>wall of fire (H)</figcaption>
+    </figure>
+    <figure>
+      <svg viewBox="-4 -4 152 152">
+        {#each [0, 1, 2] as cy (cy)}{#each [0, 1, 2] as cx (cx)}
+          <rect x={cx * 48} y={cy * 48} width="48" height="48" class="cell" />
+        {/each}{/each}
+        <FirewallEdge x={0} y={1} kind="V" />
+      </svg>
+      <figcaption>wall of fire (V)</figcaption>
+    </figure>
+    <figure>
+      <svg viewBox="-4 -4 152 152">
+        {#each [0, 1, 2] as cy (cy)}{#each [0, 1, 2] as cx (cx)}
+          <rect x={cx * 48} y={cy * 48} width="48" height="48" class="cell" />
+        {/each}{/each}
+        <rect x={93.5} y={44.5} width={7} height={55} class="demo-wall" />
+        <IllusionShimmer x={1} y={1} kind="V" />
+      </svg>
+      <figcaption>illusion shimmer</figcaption>
+    </figure>
+    <figure>
+      <svg viewBox="-4 -4 152 152">
+        {#each [0, 1, 2] as cy (cy)}{#each [0, 1, 2] as cx (cx)}
+          <rect x={cx * 48} y={cy * 48} width="48" height="48" class="cell" />
+        {/each}{/each}
+        <SightTraceOverlay from={{ x: 0, y: 2 }} to={{ x: 2, y: 0 }} trace={{ kind: "direct" }} />
+      </svg>
+      <figcaption>sight trace (direct)</figcaption>
+    </figure>
+    <figure>
+      <svg viewBox="-4 -4 152 152">
+        {#each [0, 1, 2] as cy (cy)}{#each [0, 1, 2] as cx (cx)}
+          <rect x={cx * 48} y={cy * 48} width="48" height="48" class="cell" />
+        {/each}{/each}
+        <SightTraceOverlay from={{ x: 0, y: 2 }} to={{ x: 2, y: 1 }}
+          trace={{ kind: "warp", mouthA: { cell: { x: 1, y: 0 }, side: "N" },
+            mouthB: { cell: { x: 1, y: 2 }, side: "S" },
+            entry: { x: 1.5, y: 0 }, exit: { x: 1.5, y: 3 } }} />
+      </svg>
+      <figcaption>sight trace (through a warp)</figcaption>
+    </figure>
+  </div>
 </div>
 
 <style>
@@ -92,6 +152,15 @@
     margin: 0 0 0.2rem;
   }
   .sub { color: #8d8672; margin: 0 0 1.2rem; }
+  .furniture-head {
+    font-family: "Oswald", sans-serif;
+    text-transform: uppercase;
+    letter-spacing: 0.14em;
+    font-size: 1.2rem;
+    color: #e9e1cb;
+    margin: 1.6rem 0 0.2rem;
+  }
+  .demo-wall { fill: #4d4438; }
   .sub code { color: #c9a72a; }
   .grid {
     display: grid;
diff --git a/packages/web/src/IllusionShimmer.svelte b/packages/web/src/IllusionShimmer.svelte
new file mode 100644
index 0000000..af6e531
--- /dev/null
+++ b/packages/web/src/IllusionShimmer.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+  // An UNTESTED illusion wall: the wall renders solid underneath (it is a
+  // wall to you until your eyes rule) — this is the tell-tale shimmer laid
+  // over it, and the tap target that offers the belief test.
+  let { x, y, kind, onclick }: {
+    x: number; y: number; kind: "V" | "H";
+    onclick?: () => void;
+  } = $props();
+  const CELL = 48;
+  const x1 = $derived(kind === "V" ? (x + 1) * CELL : x * CELL + 2);
+  const y1 = $derived(kind === "V" ? y * CELL + 2 : (y + 1) * CELL);
+  const x2 = $derived(kind === "V" ? (x + 1) * CELL : (x + 1) * CELL - 2);
+  const y2 = $derived(kind === "V" ? (y + 1) * CELL - 2 : (y + 1) * CELL);
+</script>
+
+<line {x1} {y1} {x2} {y2} class="illusion-shimmer" />
+{#if onclick}
+  <line {x1} {y1} {x2} {y2} class="illusion-hit"
+    role="button" tabindex="-1" aria-label="a shimmering wall — test your eyes"
+    onclick={(ev) => { ev.stopPropagation(); onclick?.(); }}
+    onkeydown={() => {}} />
+{/if}
+
+<style>
+  .illusion-shimmer {
+    stroke: #cfc3f0;
+    stroke-width: 3;
+    stroke-dasharray: 4 5;
+    stroke-linecap: round;
+    pointer-events: none;
+    animation: shimmer-drift 1.4s linear infinite;
+  }
+  .illusion-hit { stroke: transparent; stroke-width: 14; cursor: pointer; }
+  @keyframes shimmer-drift {
+    0% { stroke-dashoffset: 0; opacity: 0.9; }
+    50% { opacity: 0.4; }
+    100% { stroke-dashoffset: -18; opacity: 0.9; }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .illusion-shimmer { animation: none; opacity: 0.7; }
+  }
+</style>
diff --git a/packages/web/src/SightTraceOverlay.svelte b/packages/web/src/SightTraceOverlay.svelte
new file mode 100644
index 0000000..fe3b18a
--- /dev/null
+++ b/packages/web/src/SightTraceOverlay.svelte
@@ -0,0 +1,54 @@
+<script lang="ts">
+  // The sight line an attack traveled — straight when direct, leg by leg
+  // through both warp mouths (with pulsing rings) when the maze wrapped.
+  import type { SightTrace } from "@wizwar/engine";
+  let { from, to, trace }: {
+    from: { x: number; y: number };
+    to: { x: number; y: number };
+    trace: SightTrace;
+  } = $props();
+  const CELL = 48;
+  const A = $derived({ x: from.x * CELL + CELL / 2, y: from.y * CELL + CELL * 0.36 });
+  const B = $derived({ x: to.x * CELL + CELL / 2, y: to.y * CELL + CELL * 0.36 });
+</script>
+
+<g class="sight-layer" aria-hidden="true">
+  {#if trace.kind === "direct"}
+    <line x1={A.x} y1={A.y} x2={B.x} y2={B.y} class="sight-line" />
+  {:else}
+    {@const entry = { x: trace.entry.x * CELL, y: trace.entry.y * CELL }}
+    {@const exit = { x: trace.exit.x * CELL, y: trace.exit.y * CELL }}
+    <line x1={A.x} y1={A.y} x2={entry.x} y2={entry.y} class="sight-line" />
+    <line x1={exit.x} y1={exit.y} x2={B.x} y2={B.y} class="sight-line" />
+    <circle cx={entry.x} cy={entry.y} r={7} class="sight-mouth" />
+    <circle cx={exit.x} cy={exit.y} r={7} class="sight-mouth" />
+  {/if}
+</g>
+
+<style>
+  .sight-layer { pointer-events: none; }
+  .sight-line {
+    stroke: #c9a72a;
+    stroke-width: 2.5;
+    stroke-linecap: round;
+    stroke-dasharray: 7 6;
+    opacity: 0.85;
+    animation: sight-march 0.8s linear infinite;
+  }
+  .sight-mouth {
+    fill: none;
+    stroke: #c9a72a;
+    stroke-width: 2;
+    animation: sight-pulse 1.6s ease-in-out infinite;
+  }
+  @keyframes sight-march {
+    to { stroke-dashoffset: -13; }
+  }
+  @keyframes sight-pulse {
+    0%, 100% { opacity: 0.9; }
+    50% { opacity: 0.35; }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .sight-line, .sight-mouth { animation: none; }
+  }
+</style>