Travelling effects fly token to token

Projectiles flew cell-center to cell-center, launching from the
caster's feet and landing under the target's chin — tokens sit high
in their squares and fan sideways when crowded. Every travelling
effect (fireball, waterbolt, bolt, streak, and the reflection's
return flight) now resolves token anchors that mirror the board's
exact positioning, fan-out included: caster's center to target's
center, wizard or creature. Spots with no token to aim at fall back
to sensible cell points, and wash/knockback streaks end on the
carried wizard wherever they fanned to.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

packages/web/src/fx-sprites/Bolt.svelte

@@ -1,13 +1,12 @@
 <script lang="ts">
   import type { FxOf } from "../fx";
-  import { center } from "./geom";
 
   let { fx }: { fx: FxOf<"bolt"> } = $props();
   const uid = $props.id();
 
   /** A fresh jagged path every strike, plus two forks off mid-joints. */
   const geom = $derived.by(() => {
-    const a = center(fx.from), b = center(fx.to);
+    const a = fx.a, b = fx.b;
     const segs = 6;
     const joints: { x: number; y: number }[] = [a];
     for (let i = 1; i < segs; i++) {

packages/web/src/fx-sprites/Fireball.svelte

@@ -1,12 +1,11 @@
 <script lang="ts">
   import type { FxOf } from "../fx";
-  import { center } from "./geom";
 
   let { fx }: { fx: FxOf<"fireball"> } = $props();
   const uid = $props.id();
 
-  const a = $derived(center(fx.from));
-  const b = $derived(center(fx.to));
+  const a = $derived(fx.a);
+  const b = $derived(fx.b);
 </script>
 
 <defs>

packages/web/src/fx-sprites/Streak.svelte

@@ -1,10 +1,9 @@
 <script lang="ts">
   import type { FxOf } from "../fx";
-  import { center } from "./geom";
 
   let { fx }: { fx: FxOf<"streak"> } = $props();
-  const a = $derived(center(fx.from));
-  const b = $derived(center(fx.to));
+  const a = $derived(fx.a);
+  const b = $derived(fx.b);
   const d = $derived(`M ${a.x} ${a.y} L ${b.x} ${b.y}`);
 </script>
 

packages/web/src/fx-sprites/Waterbolt.svelte

@@ -1,12 +1,11 @@
 <script lang="ts">
   import type { FxOf } from "../fx";
-  import { center } from "./geom";
 
   let { fx }: { fx: FxOf<"waterbolt"> } = $props();
   const uid = $props.id();
 
-  const a = $derived(center(fx.from));
-  const b = $derived(center(fx.to));
+  const a = $derived(fx.a);
+  const b = $derived(fx.b);
 </script>
 
 <defs>