The effects move out of Board.svelte into src/fx-sprites/ — one component per flourish, markup and animation CSS together, so editing the fireball means opening Fireball.svelte and nothing else. A registry (index.ts) maps kind to sprite; Board renders through it. The event mapping stays in fx.ts. And a viewer: /?fx opens the Flourish Workshop — every sprite on a labeled parchment tile, replaying on a 2.2-second beat. Under the dev server, editing any sprite file hot-reloads the gallery mid-loop. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
8 lines
243 B
TypeScript
8 lines
243 B
TypeScript
// Shared geometry for effect sprites. CELL must match Board.svelte's grid.
|
|
export const CELL = 48;
|
|
export const SECTOR = 5;
|
|
export const center = (c: { x: number; y: number }) => ({
|
|
x: c.x * CELL + CELL / 2,
|
|
y: c.y * CELL + CELL / 2,
|
|
});
|