Wall-segment 'tokens' retire; the gallery shows edges as the maze draws them
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
co-authored by
Claude Fable 5
Claude Fable 5
parent
e1aeeaabff
commit
d8b8f8fd53
@@ -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; }
|
||||
|
||||
@@ -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>
|
||||
@@ -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 & 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;
|
||||
|
||||
Reference in New Issue
Block a user