Rebuild comboBattler: procedural skill VFX

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

web/comboBattler.js

@@ -6036,6 +6036,106 @@ async function createEmoteLayer(pixi, parent, { url, unit, sizeTiles = 1.3, head
   return { show, update, clear, destroy, keys: Object.keys(CELL) };
 }
 
+// ../auto-battler/src/render/skillVfx.js
+function createSkillVfx(pixi, parent, { gScale = 1 } = {}) {
+  const { Container, Graphics } = pixi;
+  const layer = new Container();
+  layer.zIndex = 6e8;
+  parent.addChild(layer);
+  const active = [];
+  const hex = (s) => {
+    const n = parseInt(String(s || "").replace("#", ""), 16);
+    return Number.isFinite(n) ? n : 16777215;
+  };
+  const lwOf = (base) => base / gScale;
+  function play(visual, x, y, radius, now, { aim } = {}) {
+    const g = new Graphics();
+    layer.addChild(g);
+    active.push({ g, born: now, dur: 0.45 + (visual?.intensity || 2) * 0.13, shape: visual?.shape || "nova", color: hex(visual?.color), intensity: visual?.intensity || 2, x, y, radius: radius || 120, aim });
+  }
+  function update(now) {
+    for (let i = active.length - 1; i >= 0; i--) {
+      const e = active[i];
+      const t = (now - e.born) / e.dur;
+      if (t >= 1 || t < 0) {
+        try {
+          e.g.destroy();
+        } catch {
+        }
+        active.splice(i, 1);
+        continue;
+      }
+      draw(e, t);
+    }
+  }
+  function draw(e, t) {
+    const g = e.g;
+    g.clear();
+    const ease = 1 - Math.pow(1 - t, 2);
+    const a = 1 - t;
+    const lw = lwOf(2 + e.intensity);
+    const c = e.color, R = e.radius;
+    switch (e.shape) {
+      case "ring":
+      case "shockwave": {
+        const r = R * ease;
+        g.circle(e.x, e.y, r).stroke({ width: lw * 1.6, color: c, alpha: a * 0.95 });
+        if (e.shape === "shockwave") g.circle(e.x, e.y, r * 0.66).stroke({ width: lw, color: c, alpha: a * 0.5 });
+        break;
+      }
+      case "beam": {
+        const aim = e.aim || { x: e.x + R, y: e.y };
+        g.moveTo(e.x, e.y).lineTo(aim.x, aim.y).stroke({ width: lw * 2.4 * (1 - t * 0.5), color: c, alpha: a });
+        g.circle(aim.x, aim.y, R * 0.18 * ease).fill({ color: c, alpha: a * 0.7 });
+        break;
+      }
+      case "pillar": {
+        const w = R * 0.5 * (1 - t * 0.3), h = R * 1.5;
+        g.rect(e.x - w / 2, e.y - h, w, h).fill({ color: c, alpha: a * 0.32 });
+        g.rect(e.x - w / 2, e.y - h, w, h).stroke({ width: lw, color: c, alpha: a * 0.85 });
+        break;
+      }
+      case "projectile": {
+        const r = R * ease;
+        g.circle(e.x, e.y, Math.max(lwOf(4), R * 0.16)).fill({ color: c, alpha: a });
+        g.circle(e.x, e.y, r).stroke({ width: lw, color: c, alpha: a * 0.4 });
+        break;
+      }
+      case "slash": {
+        const r = R * (0.6 + ease * 0.5);
+        g.arc(e.x, e.y, r, -0.8 + t * 1.2, 0.8 + t * 1.2).stroke({ width: lw * 2, color: c, alpha: a });
+        break;
+      }
+      case "nova":
+      default: {
+        const r = R * ease;
+        g.circle(e.x, e.y, r).fill({ color: c, alpha: a * 0.22 });
+        g.circle(e.x, e.y, r).stroke({ width: lw * 1.5, color: c, alpha: a * 0.9 });
+        const spokes = e.intensity * 4;
+        for (let k = 0; k < spokes; k++) {
+          const ang = k / spokes * Math.PI * 2;
+          g.moveTo(e.x, e.y).lineTo(e.x + Math.cos(ang) * r, e.y + Math.sin(ang) * r).stroke({ width: lw * 0.6, color: c, alpha: a * 0.5 });
+        }
+        break;
+      }
+    }
+  }
+  function destroy() {
+    for (const e of active) {
+      try {
+        e.g.destroy();
+      } catch {
+      }
+    }
+    active.length = 0;
+    try {
+      layer.destroy({ children: true });
+    } catch {
+    }
+  }
+  return { play, update, destroy };
+}
+
 // ../auto-battler/src/render/comboBattler.js
 var TILE8 = 8;
 var SKILL_YELLOW = 16769357;
@@ -6092,6 +6192,7 @@ function mountComboBattler(pixi, host, opts = {}) {
   })();
   let battle = null, R = null, combatRoot = null, rings = null, markers = null, navDbg = null, spawnFn = null, dead = false;
   let emoteLayer = null;
+  let skillVfxLayer = null;
   const emoPrev = /* @__PURE__ */ new Map();
   let idleEmoAcc = 0;
   let runState = { time: 0, kills: 0, diff: 1 };
@@ -6417,6 +6518,18 @@ function mountComboBattler(pixi, host, opts = {}) {
     for (const e of ea()) if (e.alive) m = Math.min(m, dist3(p, e));
     return m;
   };
+  const nearestFoeTo = (a) => {
+    if (!a) return null;
+    let m = Infinity, best = null;
+    for (const e of ea()) if (e.alive) {
+      const d = dist3(a, e);
+      if (d < m) {
+        m = d;
+        best = e;
+      }
+    }
+    return best;
+  };
   function tick(ticker) {
     if (!battle || !R) return;
     if (paused) return;
@@ -6504,6 +6617,23 @@ function mountComboBattler(pixi, host, opts = {}) {
     R.updateFloats(dtMS);
     R.drawProjectiles(battle);
     R.processLog(battle, cursor, {
+      onCast: (e) => {
+        const caster = battle.actors.find((x) => x.id === e.who);
+        const skill = caster?.bar?.find((s) => s && s.id === e.skillId);
+        if (skill?.visual && skillVfxLayer) {
+          const aoe = (skill.effects || []).find((x) => x.scope === "area_around_caster");
+          const radius = aoe?.range || 110;
+          let aim = null;
+          if (skill.visual.shape === "beam" || skill.visual.shape === "projectile") {
+            const f = nearestFoeTo(caster);
+            if (f) aim = { x: f.x, y: f.y };
+          }
+          skillVfxLayer.play(skill.visual, caster.x, caster.y, radius, battle.t, { aim });
+          const inten = skill.visual.intensity || 2;
+          addShake(0.1 + inten * 0.05, 2 + inten * 1.5);
+        }
+        return {};
+      },
       onHit: (e) => {
         const p2 = pa();
         if (!p2) return;
@@ -6539,6 +6669,7 @@ function mountComboBattler(pixi, host, opts = {}) {
       }
     }
     updateEmotes(dt);
+    skillVfxLayer?.update(battle.t);
     updateHud();
     drawRings();
     drawMarkers();
@@ -6693,6 +6824,11 @@ function mountComboBattler(pixi, host, opts = {}) {
     }
     emoteLayer = null;
     emoPrev.clear();
+    try {
+      skillVfxLayer?.destroy();
+    } catch {
+    }
+    skillVfxLayer = null;
     hitstopT = 0;
     shake.t = 0;
     shake.mag = 0;
@@ -6782,9 +6918,16 @@ function mountComboBattler(pixi, host, opts = {}) {
         emoteLayer = null;
       }
     }
+    try {
+      skillVfxLayer = createSkillVfx(pixi, combatRoot, { gScale: G });
+    } catch {
+      skillVfxLayer = null;
+    }
     if (!alive) {
       emoteLayer?.destroy();
       emoteLayer = null;
+      skillVfxLayer?.destroy();
+      skillVfxLayer = null;
       return;
     }
     let foeN = 0;