eric/wizwar6e
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

The workshop gains 'The standing fires': board furniture on display

Browse Source 
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
This commit is contained in:
Eric Wagoner
2026-08-18 09:13:31 -04:00
co-authored by Claude Fable 5
parent ce556b5508
commit ed7a58a698
4 changed files with 171 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/web/src/FxGallery.svelte
+69
View File
@@ -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;