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

Wall-segment 'tokens' retire; the gallery shows edges as the maze draws them

Browse Source 
The game has never used token art for edge effects — created walls,
doors and their lock states, fire walls, illusions are all vector edge
treatments. The ten unreferenced file pairs (wall, wall-2, door,
fire-wall, illusion-wall, destroy-wall, jam-lock, lock-gone,
redirection-a/b) are gone from both art sets, and the Token Workshop
gains 'Walls & doors — as the maze draws them': every edge state
(locked, ajar, held, removed, jammed), the standing fire, and both
faces of an illusion, rendered by the same EdgeGlyph / FirewallEdge /
IllusionShimmer components the board mounts. EdgeGlyph is newly
extracted from Board so the display cannot 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 10:16:28 -04:00
co-authored by Claude Fable 5
parent e1aeeaabff
commit d8b8f8fd53
23 changed files with 116 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/web/public/tokens-svg/destroy-wall.svg
-10
View File
@@ -1,10 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 150" role="img" aria-label="Destroy Wall token">
<defs>
<filter id="w"><feTurbulence baseFrequency=".035" numOctaves="2" seed="4" result="n"/><feDisplacementMap in="SourceGraphic" in2="n" scale=".65"/></filter>
<filter id="s"><feGaussianBlur stdDeviation="2"/></filter>
<pattern id="paper" width="12" height="12" patternUnits="userSpaceOnUse"><rect width="12" height="12" fill="#f4efd9"/><circle cx="2" cy="4" r=".45" fill="#c8bfa4" opacity=".28"/><path d="M1 10l7-1" stroke="#d8cfb8" stroke-width=".35" opacity=".35"/></pattern>
</defs>
<rect x="2" y="2" width="140" height="146" rx="3" fill="url(#paper)" stroke="#242822" stroke-width="2"/>
<text x="72" y="19" text-anchor="middle" font-family="Trebuchet MS,Arial,sans-serif" font-weight="700" font-size="14" fill="#20251f">Destroy Wall</text>
<g filter="url(#w)" stroke="#252923" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><g fill="#777d78"><path d="M25 76h28v19H23Z"/><path d="M56 70h31v22H56Z"/><path d="M91 78h28v19H88Z"/></g><path d="M72 58l-8 16 13-4-5 17 18-23-12 4 4-14Z" fill="#f1c340"/><path d="M27 54l-12-9m101 9l13-10M23 110l-12 7m108-7l12 8" fill="none"/></g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.2 KiB

packages/web/public/tokens-svg/door.svg
-10
View File
@@ -1,10 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 150" role="img" aria-label="Door token">
<defs>
<filter id="w"><feTurbulence baseFrequency=".035" numOctaves="2" seed="4" result="n"/><feDisplacementMap in="SourceGraphic" in2="n" scale=".65"/></filter>
<filter id="s"><feGaussianBlur stdDeviation="2"/></filter>
<pattern id="paper" width="12" height="12" patternUnits="userSpaceOnUse"><rect width="12" height="12" fill="#f4efd9"/><circle cx="2" cy="4" r=".45" fill="#c8bfa4" opacity=".28"/><path d="M1 10l7-1" stroke="#d8cfb8" stroke-width=".35" opacity=".35"/></pattern>
</defs>
<rect x="2" y="2" width="140" height="146" rx="3" fill="url(#paper)" stroke="#242822" stroke-width="2"/>
<text x="72" y="19" text-anchor="middle" font-family="Trebuchet MS,Arial,sans-serif" font-weight="700" font-size="14" fill="#20251f">Door</text>
<g filter="url(#w)" stroke="#252923" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M40 121V48q31-24 64 0v73" fill="#58635e"/><path d="M51 121V57q21-17 42 0v64Z" fill="#9a673e"/><circle cx="84" cy="87" r="3" fill="#f1c44b"/><path d="M40 61l11 5m42 0l11-6M43 95l8-3m42 1l10 5" fill="none" stroke="#bec3b7"/></g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.2 KiB

packages/web/public/tokens-svg/fire-wall.svg
-10
View File
@@ -1,10 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 150" role="img" aria-label="Fire Wall token">
<defs>
<filter id="w"><feTurbulence baseFrequency=".035" numOctaves="2" seed="4" result="n"/><feDisplacementMap in="SourceGraphic" in2="n" scale=".65"/></filter>
<filter id="s"><feGaussianBlur stdDeviation="2"/></filter>
<pattern id="paper" width="12" height="12" patternUnits="userSpaceOnUse"><rect width="12" height="12" fill="#f4efd9"/><circle cx="2" cy="4" r=".45" fill="#c8bfa4" opacity=".28"/><path d="M1 10l7-1" stroke="#d8cfb8" stroke-width=".35" opacity=".35"/></pattern>
</defs>
<rect x="2" y="2" width="140" height="146" rx="3" fill="url(#paper)" stroke="#242822" stroke-width="2"/>
<text x="72" y="19" text-anchor="middle" font-family="Trebuchet MS,Arial,sans-serif" font-weight="700" font-size="14" fill="#20251f">Fire Wall</text>
<g filter="url(#w)" stroke="#252923" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M18 112q12-31 21-11 3-50 19-17 9-62 24-13 15-39 22 9 19-19 21 31Z" fill="#ed355f"/><path d="M31 109q15-28 24-5 10-42 20-7 15-31 28 12" fill="#ffb43e"/><path d="M17 120h110"/></g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 KiB

packages/web/public/tokens-svg/illusion-wall.svg
-10
View File
@@ -1,10 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 150" role="img" aria-label="Illusion Wall token">
<defs>
<filter id="w"><feTurbulence baseFrequency=".035" numOctaves="2" seed="4" result="n"/><feDisplacementMap in="SourceGraphic" in2="n" scale=".65"/></filter>
<filter id="s"><feGaussianBlur stdDeviation="2"/></filter>
<pattern id="paper" width="12" height="12" patternUnits="userSpaceOnUse"><rect width="12" height="12" fill="#f4efd9"/><circle cx="2" cy="4" r=".45" fill="#c8bfa4" opacity=".28"/><path d="M1 10l7-1" stroke="#d8cfb8" stroke-width=".35" opacity=".35"/></pattern>
</defs>
<rect x="2" y="2" width="140" height="146" rx="3" fill="url(#paper)" stroke="#242822" stroke-width="2"/>
<text x="72" y="19" text-anchor="middle" font-family="Trebuchet MS,Arial,sans-serif" font-weight="700" font-size="14" fill="#20251f">Illusion Wall</text>
<g filter="url(#w)" stroke="#252923" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M22 61q16 12 32 0t32 0t36 0v38q-18-12-34 0t-34 0t-32 0Z" fill="#232b2b"/><path d="M22 61q16 12 32 0t32 0t36 0M22 99q16-12 32 0t34 0t34 0" fill="none" stroke="#6dc5c4" stroke-dasharray="5 5"/></g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 KiB

packages/web/public/tokens-svg/jam-lock.svg
-10
View File
@@ -1,10 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 150" role="img" aria-label="Jam Lock token">
<defs>
<filter id="w"><feTurbulence baseFrequency=".035" numOctaves="2" seed="4" result="n"/><feDisplacementMap in="SourceGraphic" in2="n" scale=".65"/></filter>
<filter id="s"><feGaussianBlur stdDeviation="2"/></filter>
<pattern id="paper" width="12" height="12" patternUnits="userSpaceOnUse"><rect width="12" height="12" fill="#f4efd9"/><circle cx="2" cy="4" r=".45" fill="#c8bfa4" opacity=".28"/><path d="M1 10l7-1" stroke="#d8cfb8" stroke-width=".35" opacity=".35"/></pattern>
</defs>
<rect x="2" y="2" width="140" height="146" rx="3" fill="url(#paper)" stroke="#242822" stroke-width="2"/>
<text x="72" y="19" text-anchor="middle" font-family="Trebuchet MS,Arial,sans-serif" font-weight="700" font-size="14" fill="#20251f">Jam Lock</text>
<g filter="url(#w)" stroke="#252923" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><rect x="35" y="70" width="74" height="20" rx="5" fill="#adb0aa"/><path d="M24 62h25v38H24m96-38H95v38h25" fill="#777b75"/><path d="M47 74l12 12m8-12l12 12m8-12l12 12" fill="none"/></g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 KiB

packages/web/public/tokens-svg/lock-gone.svg
-10
View File
@@ -1,10 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 150" role="img" aria-label="Lock Gone token">
<defs>
<filter id="w"><feTurbulence baseFrequency=".035" numOctaves="2" seed="4" result="n"/><feDisplacementMap in="SourceGraphic" in2="n" scale=".65"/></filter>
<filter id="s"><feGaussianBlur stdDeviation="2"/></filter>
<pattern id="paper" width="12" height="12" patternUnits="userSpaceOnUse"><rect width="12" height="12" fill="#f4efd9"/><circle cx="2" cy="4" r=".45" fill="#c8bfa4" opacity=".28"/><path d="M1 10l7-1" stroke="#d8cfb8" stroke-width=".35" opacity=".35"/></pattern>
</defs>
<rect x="2" y="2" width="140" height="146" rx="3" fill="url(#paper)" stroke="#242822" stroke-width="2"/>
<text x="72" y="19" text-anchor="middle" font-family="Trebuchet MS,Arial,sans-serif" font-weight="700" font-size="14" fill="#20251f">Lock Gone</text>
<g filter="url(#w)" stroke="#252923" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M25 62h28v40H25m94-40H91v40h28" fill="#858a84"/><path d="M49 81h20m14 0h12" fill="none" stroke-dasharray="5 6"/><path d="M64 69l15 12-15 12" fill="none" stroke="#d04c43"/></g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 KiB

packages/web/public/tokens-svg/redirection-a.svg
-10
View File
@@ -1,10 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 150" role="img" aria-label="Redirection A token">
<defs>
<filter id="w"><feTurbulence baseFrequency=".035" numOctaves="2" seed="4" result="n"/><feDisplacementMap in="SourceGraphic" in2="n" scale=".65"/></filter>
<filter id="s"><feGaussianBlur stdDeviation="2"/></filter>
<pattern id="paper" width="12" height="12" patternUnits="userSpaceOnUse"><rect width="12" height="12" fill="#f4efd9"/><circle cx="2" cy="4" r=".45" fill="#c8bfa4" opacity=".28"/><path d="M1 10l7-1" stroke="#d8cfb8" stroke-width=".35" opacity=".35"/></pattern>
</defs>
<rect x="2" y="2" width="140" height="146" rx="3" fill="url(#paper)" stroke="#242822" stroke-width="2"/>
<text x="72" y="19" text-anchor="middle" font-family="Trebuchet MS,Arial,sans-serif" font-weight="700" font-size="14" fill="#20251f">Redirection A</text>
<g filter="url(#w)" stroke="#252923" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M35 78h52l-12-13 31 20-31 20 12-13H35Z" fill="#262b29"/><path d="M48 57q12 22 0 44m13-44q12 22 0 44m13-44q12 22 0 44" fill="none" stroke="#6f4aa8"/></g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 KiB

packages/web/public/tokens-svg/redirection-b.svg
-10
View File
@@ -1,10 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 150" role="img" aria-label="Redirection B token">
<defs>
<filter id="w"><feTurbulence baseFrequency=".035" numOctaves="2" seed="4" result="n"/><feDisplacementMap in="SourceGraphic" in2="n" scale=".65"/></filter>
<filter id="s"><feGaussianBlur stdDeviation="2"/></filter>
<pattern id="paper" width="12" height="12" patternUnits="userSpaceOnUse"><rect width="12" height="12" fill="#f4efd9"/><circle cx="2" cy="4" r=".45" fill="#c8bfa4" opacity=".28"/><path d="M1 10l7-1" stroke="#d8cfb8" stroke-width=".35" opacity=".35"/></pattern>
</defs>
<rect x="2" y="2" width="140" height="146" rx="3" fill="url(#paper)" stroke="#242822" stroke-width="2"/>
<text x="72" y="19" text-anchor="middle" font-family="Trebuchet MS,Arial,sans-serif" font-weight="700" font-size="14" fill="#20251f">Redirection B</text>
<g filter="url(#w)" stroke="#252923" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M109 78H57l-12-13 -31 20 31 20 12-13h74Z" fill="#262b29"/><path d="M96 57q-12 22 0 44M83 57q-12 22 0 44M70 57q-12 22 0 44" fill="none" stroke="#6f4aa8"/></g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 KiB

packages/web/public/tokens-svg/wall-2.svg
-10
View File
@@ -1,10 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 150" role="img" aria-label="Wall token">
<defs>
<filter id="w"><feTurbulence baseFrequency=".035" numOctaves="2" seed="4" result="n"/><feDisplacementMap in="SourceGraphic" in2="n" scale=".65"/></filter>
<filter id="s"><feGaussianBlur stdDeviation="2"/></filter>
<pattern id="paper" width="12" height="12" patternUnits="userSpaceOnUse"><rect width="12" height="12" fill="#f4efd9"/><circle cx="2" cy="4" r=".45" fill="#c8bfa4" opacity=".28"/><path d="M1 10l7-1" stroke="#d8cfb8" stroke-width=".35" opacity=".35"/></pattern>
</defs>
<rect x="2" y="2" width="140" height="146" rx="3" fill="url(#paper)" stroke="#242822" stroke-width="2"/>
<text x="72" y="19" text-anchor="middle" font-family="Trebuchet MS,Arial,sans-serif" font-weight="700" font-size="14" fill="#20251f">Wall</text>
<g filter="url(#w)" stroke="#252923" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><g fill="#737a77"><path d="M18 85h28v28H18Z"/><path d="M48 79h30v34H48Z"/><path d="M80 85h28v28H80Z"/><path d="M110 78h17v35h-17Z"/></g><path d="M18 85h28m2-6h30m2 6h28m2-7h17M18 113h109" fill="none" stroke="#c2c4ba"/><path d="M57 82l-7 14 11-3-5 17 15-23-10 4 5-12Z" fill="#343937"/></g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.2 KiB

packages/web/public/tokens-svg/wall.svg
-10
View File
@@ -1,10 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 150" role="img" aria-label="Wall token">
<defs>
<filter id="w"><feTurbulence baseFrequency=".035" numOctaves="2" seed="4" result="n"/><feDisplacementMap in="SourceGraphic" in2="n" scale=".65"/></filter>
<filter id="s"><feGaussianBlur stdDeviation="2"/></filter>
<pattern id="paper" width="12" height="12" patternUnits="userSpaceOnUse"><rect width="12" height="12" fill="#f4efd9"/><circle cx="2" cy="4" r=".45" fill="#c8bfa4" opacity=".28"/><path d="M1 10l7-1" stroke="#d8cfb8" stroke-width=".35" opacity=".35"/></pattern>
</defs>
<rect x="2" y="2" width="140" height="146" rx="3" fill="url(#paper)" stroke="#242822" stroke-width="2"/>
<text x="72" y="19" text-anchor="middle" font-family="Trebuchet MS,Arial,sans-serif" font-weight="700" font-size="14" fill="#20251f">Wall</text>
<g filter="url(#w)" stroke="#252923" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><g fill="#737a77"><path d="M18 85h28v28H18Z"/><path d="M48 79h30v34H48Z"/><path d="M80 85h28v28H80Z"/><path d="M110 78h17v35h-17Z"/></g><path d="M18 85h28m2-6h30m2 6h28m2-7h17M18 113h109" fill="none" stroke="#c2c4ba"/></g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 KiB

packages/web/public/tokens/destroy-wall.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 73 KiB

packages/web/public/tokens/door.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 60 KiB

packages/web/public/tokens/fire-wall.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 43 KiB

packages/web/public/tokens/illusion-wall.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 60 KiB

packages/web/public/tokens/jam-lock.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 34 KiB

packages/web/public/tokens/lock-gone.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 58 KiB

packages/web/public/tokens/redirection-a.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 39 KiB

packages/web/public/tokens/redirection-b.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 37 KiB

packages/web/public/tokens/wall-2.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 58 KiB

packages/web/public/tokens/wall.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 33 KiB

packages/web/src/Board.svelte
+5 -33
View File
@@ -5,6 +5,7 @@
import type { BoardFx } from "./fx";
import { colorIndexOf as sharedColorIndex, wizardColor } from "./colors";
import { CREATURE_ART, objectArt, TERRAIN_ART, tokenArt } from "./art";
import EdgeGlyph from "./EdgeGlyph.svelte";
import FirewallEdge from "./FirewallEdge.svelte";
import IllusionShimmer from "./IllusionShimmer.svelte";
import SightTraceOverlay from "./SightTraceOverlay.svelte";
@@ -388,24 +389,14 @@
{#if e.state === "firewall"}
<FirewallEdge x={e.x} y={e.y} kind={e.kind === "V" ? "V" : "H"} />
{:else}
{@const cls = e.state === "door" ? `door${e.lock ? ` ${e.lock}` : ""}` : "wall"}
{@const lockTitle = e.lock === "removed" ? "lock removed — swings free"
: e.lock === "jammed" ? "lock jammed — sealed for good"
: e.lock === "held" ? "held open by a standing wizard"
: e.lock === "ajar" ? "unlocked until end of turn" : null}
{#if e.kind === "V"}
<rect
x={(e.x + 1) * CELL - WALL / 2} y={e.y * CELL - WALL / 2}
width={WALL} height={CELL + WALL}
class={cls}
>{#if lockTitle}<title>{lockTitle}</title>{/if}</rect>
{:else}
<rect
x={e.x * CELL - WALL / 2} y={(e.y + 1) * CELL - WALL / 2}
width={CELL + WALL} height={WALL}
class={cls}
>{#if lockTitle}<title>{lockTitle}</title>{/if}</rect>
{/if}
<EdgeGlyph x={e.x} y={e.y} kind={e.kind === "V" ? "V" : "H"}
state={e.state === "door" ? "door" : "wall"}
lock={(e.lock ?? null) as "removed" | "jammed" | "held" | "ajar" | null}
title={lockTitle} />
{/if}
{/each}
@@ -675,25 +666,6 @@
cursor: pointer;
}
.floor:hover { fill: #efe8d2; }
.wall {
fill: #f2ecd8;
stroke: #2b2218;
stroke-width: 1.6;
}
.door {
fill: #8b5a2b;
stroke: #2b2218;
stroke-width: 1.4;
rx: 2;
}
/* Lock removed: pale, an open doorway forever. */
.door.removed { fill: #d4bd8e; }
/* Lock jammed: near-black, sealed. */
.door.jammed { fill: #3a2a18; stroke: #14100b; }
/* Picked or keyed open until end of turn. */
.door.ajar { fill: #d4bd8e; stroke-dasharray: 5 3; }
/* Held open: a wizard stands propping it. */
.door.held { fill: #d4bd8e; stroke: #2e7d32; }
.stone { fill: #6a6458; stroke: #3a362e; stroke-width: 2; }
.bush { fill: #2e7d32; stroke: #1b4d1e; stroke-width: 2; }
.rose { fill: #2e7d32; stroke: #b0245a; stroke-width: 3; }
packages/web/src/EdgeGlyph.svelte
+50
View File
@@ -0,0 +1,50 @@
<script lang="ts">
// A wall or door on an edge, exactly as the board draws it. Wall-segment
// effects (locks picked, jammed, removed; doors held) are color states of
// this one glyph — the game has never used tokens for them.
let { x, y, kind, state, lock = null, title = null }: {
x: number; y: number; kind: "V" | "H";
state: "wall" | "door";
lock?: "removed" | "jammed" | "held" | "ajar" | null;
title?: string | null;
} = $props();
const CELL = 48;
const WALL = 7;
const cls = $derived(state === "door" ? `door${lock ? ` ${lock}` : ""}` : "wall");
</script>
{#if kind === "V"}
<rect
x={(x + 1) * CELL - WALL / 2} y={y * CELL - WALL / 2}
width={WALL} height={CELL + WALL}
class={cls}
>{#if title}<title>{title}</title>{/if}</rect>
{:else}
<rect
x={x * CELL - WALL / 2} y={(y + 1) * CELL - WALL / 2}
width={CELL + WALL} height={WALL}
class={cls}
>{#if title}<title>{title}</title>{/if}</rect>
{/if}
<style>
.wall {
fill: #f2ecd8;
stroke: #2b2218;
stroke-width: 1.6;
}
.door {
fill: #8b5a2b;
stroke: #2b2218;
stroke-width: 1.4;
rx: 2;
}
/* Lock removed: pale, an open doorway forever. */
.door.removed { fill: #d4bd8e; }
/* Lock jammed: near-black, sealed. */
.door.jammed { fill: #3a2a18; stroke: #14100b; }
/* Picked or keyed open until end of turn. */
.door.ajar { fill: #d4bd8e; stroke-dasharray: 5 3; }
/* Held open: a wizard stands propping it. */
.door.held { fill: #d4bd8e; stroke: #2e7d32; }
</style>
packages/web/src/TokenGallery.svelte
+61 -3
View File
@@ -16,18 +16,39 @@
title: "Terrain",
files: [
"solid-stone", "thorn-bush", "rosebush", "killer-ooze", "slime", "dustcloud",
"tacks", "pit", "safe", "fire-wall", "illusion-wall", "wall", "wall-2", "door",
"tacks", "pit", "safe",
],
},
{
title: "Objects & markers",
files: [
"dagger", "rock", "magic-stone", "magic-wand", "master-key", "boobytrap",
"dimensional-warp", "redirection-a", "redirection-b", "destroy-wall",
"jam-lock", "lock-gone",
"dimensional-warp",
],
},
];
// Wall-segment effects have never been tokens: the maze draws them as edge
// treatments. Shown here exactly as the board mounts them.
import EdgeGlyph from "./EdgeGlyph.svelte";
import FirewallEdge from "./FirewallEdge.svelte";
import IllusionShimmer from "./IllusionShimmer.svelte";
const EDGE_PIECES: {
caption: string;
state?: "wall" | "door";
lock?: "removed" | "jammed" | "held" | "ajar" | null;
special?: "firewall" | "shimmer" | "known-illusion";
}[] = [
{ caption: "wall", state: "wall" },
{ caption: "door (locked)", state: "door" },
{ caption: "door, picked open (ajar)", state: "door", lock: "ajar" },
{ caption: "door, held open", state: "door", lock: "held" },
{ caption: "door, lock removed", state: "door", lock: "removed" },
{ caption: "door, lock jammed", state: "door", lock: "jammed" },
{ caption: "wall of fire", special: "firewall" },
{ caption: "illusion wall (untested)", special: "shimmer" },
{ caption: "illusion wall (you know it's fake)", special: "known-illusion" },
];
</script>
<div class="gallery">
@@ -64,6 +85,35 @@
{/each}
</div>
{/each}
<h2>Walls &amp; doors — as the maze draws them</h2>
<p class="sub">
Wall-segment effects have never been tokens: locks picked, jammed, and
removed, held doors, standing fires, and illusions are edge treatments,
shown here with the very components the board mounts.
</p>
<div class="grid">
{#each EDGE_PIECES as piece (piece.caption)}
<figure>
<svg viewBox="20 20 104 104" class="edge-demo">
{#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}
{#if piece.special === "firewall"}
<FirewallEdge x={1} y={0} kind="H" />
{:else if piece.special === "shimmer"}
<EdgeGlyph x={1} y={0} kind="H" state="wall" />
<IllusionShimmer x={1} y={0} kind="H" />
{:else if piece.special === "known-illusion"}
<line x1={48} y1={48} x2={96} y2={48} class="known-illusion" />
{:else}
<EdgeGlyph x={1} y={0} kind="H" state={piece.state!} lock={piece.lock ?? null} />
{/if}
</svg>
<figcaption>{piece.caption}</figcaption>
</figure>
{/each}
</div>
</div>
<style>
@@ -107,6 +157,14 @@
font-size: 0.6rem;
color: #8a7a5e;
}
.edge-demo { width: 100%; display: block; }
.cell {
fill: #efe8d4;
stroke: rgba(95, 74, 51, 0.25);
stroke-width: 1;
}
/* Mirrors Board's known-illusion ghost: dashed, violet, see-through. */
.known-illusion { stroke: #7a6f9a; stroke-width: 4; stroke-dasharray: 6 5; opacity: 0.7; }
figcaption {
font-family: "Courier Prime", monospace;
font-size: 0.72rem;