incanto 0.57.0 → 0.58.0

package/templates-app/star-survivor/src/behaviors.ts

@@ -0,0 +1,624 @@
+/**
+ * Hollow Horde — the custom behaviors for a top-down SURVIVORS-LIKE (Vampire
+ * Survivors genre). Spawning + chasing + contact damage are BUILT-INS wired in
+ * `game.scene.json` (two `Spawner`s clone goblin/ghost templates; each enemy
+ * `Chase`s the player and a `DamageOnContact` hitbox drains the player's `Health`).
+ * What a renderer-agnostic library can't give you — the SURVIVOR loop — is here:
+ *
+ *   Survivor  — the player: top-down move + facing/anim, AUTO-ATTACK (fire bolts at
+ *     the nearest enemy on a cooldown, managed in one list), XP pickup + MAGNET,
+ *     LEVEL-UP that pauses the game and offers 3 random UPGRADES, survive-timer win,
+ *     and the DOM HUD (HP/XP/level/kills/timer + banner + level-up cards).
+ *   Director  — escalates the horde: scatters each freshly-spawned enemy onto a ring
+ *     AROUND the player (built-in Spawners spawn at the origin) and ramps spawn rate
+ *     + enemy HP/speed with elapsed time.
+ *   EnemyDrop — on an enemy's death, drop an XP shard and tally the kill.
+ *   EnemyFace — flip the enemy sprite toward its travel direction + play 'move'.
+ *
+ * One script per node, so the player's `Health` lives on a child `Vitals` node
+ * (DamageOnContact finds it by searching the contacted body's descendants).
+ */
+
+import type { Node } from 'incanto';
+import { Behavior } from 'incanto';
+import type { AnimatedSprite2D, Camera2D, CharacterBody2D, Node2D } from 'incanto/2d';
+import { ColorRect2D, Particles2D } from 'incanto/2d';
+
+const RAD2DEG = 180 / Math.PI;
+const hasDom = typeof document !== 'undefined';
+const dist2 = (ax: number, ay: number, bx: number, by: number): number => {
+  const dx = ax - bx;
+  const dy = ay - by;
+  return dx * dx + dy * dy;
+};
+
+interface HealthLike {
+  current: number;
+  max: number;
+  isDead: boolean;
+  damage(n: number): void;
+  heal(n: number): void;
+}
+interface ScoreLike {
+  scoreToWin: number;
+  setScore(n: number): void;
+}
+
+const MOVE_SPEED = 205;
+const ATTACK_RANGE = 360; // only auto-fire at enemies within this radius
+const BOLT_SPEED = 520;
+const BOLT_LIFE = 0.9;
+const PICKUP_RADIUS = 30;
+const SURVIVE_SECONDS = 90;
+const HIT_KNOCK = 18; // px an enemy is shoved back when a bolt connects (hit feedback)
+
+interface Bolt {
+  node: Node2D;
+  vx: number;
+  vy: number;
+  life: number;
+  pierce: number;
+  hit: Set<Node>;
+}
+interface Upgrade {
+  key: string;
+  label: string;
+  apply: (s: Survivor) => void;
+}
+
+const UPGRADES: Upgrade[] = [
+  { key: 'dmg', label: '⚔ +1 Damage', apply: (s) => (s.damage += 1) },
+  { key: 'rate', label: '⏱ +20% Fire rate', apply: (s) => (s.fireCd *= 0.82) },
+  { key: 'multi', label: '✦ +1 Bolt', apply: (s) => (s.bolts += 1) },
+  { key: 'pierce', label: '➹ +1 Pierce', apply: (s) => (s.pierce += 1) },
+  { key: 'speed', label: '👟 +12% Move speed', apply: (s) => (s.moveSpeed *= 1.12) },
+  { key: 'magnet', label: '🧲 +50% Magnet', apply: (s) => (s.magnet *= 1.5) },
+  {
+    key: 'hp',
+    label: '❤ +20 Max HP & heal',
+    apply: (s) => {
+      const h = s.health;
+      if (h) {
+        h.max += 20;
+        h.heal(20);
+      }
+    },
+  },
+];
+
+export class Survivor extends Behavior {
+  moveSpeed = MOVE_SPEED;
+  damage = 1;
+  fireCd = 0.55;
+  bolts = 1;
+  pierce = 0;
+  magnet = 95;
+
+  level = 1;
+  xp = 0;
+  xpToLevel = 5;
+  kills = 0;
+  elapsed = 0;
+  private fireTimer = 0;
+  private facing = 1;
+  private over = false;
+  private paused = false;
+  private boltList: Bolt[] = [];
+  private lastClip = '';
+
+  get health(): HealthLike | null {
+    return (this.getNode('Vitals').behavior as unknown as HealthLike) ?? null;
+  }
+  private get body(): CharacterBody2D {
+    return this.node as unknown as CharacterBody2D;
+  }
+  private get skin(): AnimatedSprite2D {
+    return this.getNode('Skin') as unknown as AnimatedSprite2D;
+  }
+
+  override onReady(): void {
+    this.getNode('/root').on('lost', () => {
+      this.over = true;
+      this.banner('YOU FELL', '#ef476f');
+    });
+  }
+
+  addKill(): void {
+    this.kills += 1;
+  }
+  addXp(n: number): void {
+    this.xp += n;
+    while (this.xp >= this.xpToLevel) {
+      this.xp -= this.xpToLevel;
+      this.level += 1;
+      this.xpToLevel = Math.round(this.xpToLevel * 1.35 + 2);
+      this.onLevelUp();
+    }
+  }
+
+  override fixedUpdate(dt: number): void {
+    if (this.over || this.paused) {
+      this.body.velocity = [0, 0];
+      return;
+    }
+    this.elapsed += dt;
+
+    const dir = this.input.getVector('move');
+    this.body.velocity = [dir.x * this.moveSpeed, dir.y * this.moveSpeed];
+    this.body.moveAndSlide();
+    if (dir.x > 0.1) this.facing = 1;
+    else if (dir.x < -0.1) this.facing = -1;
+
+    this.fireTimer -= dt;
+    if (this.fireTimer <= 0) {
+      const target = this.nearestEnemy();
+      if (target) {
+        this.fireTimer = this.fireCd;
+        this.fireAt(target);
+      }
+    }
+
+    this.stepBolts(dt);
+    this.collectXp(dt);
+
+    if (this.elapsed >= SURVIVE_SECONDS) {
+      this.over = true;
+      const sk = this.getNode('/root').behavior as unknown as ScoreLike;
+      sk.setScore(sk.scoreToWin); // → ScoreKeeper emits 'won'
+      this.banner('YOU SURVIVED!', '#ffd166');
+    }
+  }
+
+  private px(): number {
+    return this.body.position[0] ?? 0;
+  }
+  private py(): number {
+    return this.body.position[1] ?? 0;
+  }
+
+  private nearestEnemy(): Node2D | null {
+    const tree = this.node.tree;
+    if (!tree) return null;
+    const px = this.px();
+    const py = this.py();
+    let best: Node2D | null = null;
+    let bestD = ATTACK_RANGE * ATTACK_RANGE;
+    for (const e of tree.getNodesInGroup('enemy')) {
+      const en = e as unknown as Node2D;
+      const d = dist2(px, py, en.position[0] ?? 0, en.position[1] ?? 0);
+      if (d < bestD) {
+        bestD = d;
+        best = en;
+      }
+    }
+    return best;
+  }
+
+  private fireAt(target: Node2D): void {
+    const px = this.px();
+    const py = this.py();
+    const baseAng = Math.atan2((target.position[1] ?? 0) - py, (target.position[0] ?? 0) - px);
+    const spread = 0.18;
+    const n = this.bolts;
+    for (let i = 0; i < n; i++) {
+      const ang = baseAng + (i - (n - 1) / 2) * spread;
+      const b = new ColorRect2D('Bolt');
+      b.size = [13, 13];
+      b.color = '#ffe9a8';
+      b.position = [px, py];
+      b.rotation = ang * RAD2DEG + 45;
+      this.node.getRoot().addChild(b as unknown as Node);
+      this.boltList.push({
+        node: b as unknown as Node2D,
+        vx: Math.cos(ang) * BOLT_SPEED,
+        vy: Math.sin(ang) * BOLT_SPEED,
+        life: BOLT_LIFE,
+        pierce: this.pierce,
+        hit: new Set<Node>(),
+      });
+    }
+    (this.getNode('/root/SfxShoot') as unknown as { play?: () => void } | null)?.play?.();
+  }
+
+  private stepBolts(dt: number): void {
+    if (this.boltList.length === 0) return;
+    const tree = this.node.tree;
+    const enemies = tree ? tree.getNodesInGroup('enemy') : [];
+    const keep: Bolt[] = [];
+    for (const b of this.boltList) {
+      b.life -= dt;
+      const nx = (b.node.position[0] ?? 0) + b.vx * dt;
+      const ny = (b.node.position[1] ?? 0) + b.vy * dt;
+      b.node.position = [nx, ny];
+      let dead = b.life <= 0;
+      if (!dead) {
+        for (const e of enemies) {
+          if (b.hit.has(e)) continue;
+          const en = e as unknown as Node2D;
+          if (dist2(nx, ny, en.position[0] ?? 0, en.position[1] ?? 0) < 26 * 26) {
+            b.hit.add(e);
+            // HIT FEEDBACK: damage (→ the enemy's EnemyFace flashes on 'damaged'),
+            // shove it back along the bolt, and pop an impact spark at the contact.
+            (e as unknown as { behavior?: HealthLike }).behavior?.damage?.(this.damage);
+            const il = Math.hypot(b.vx, b.vy) || 1;
+            en.position = [
+              (en.position[0] ?? 0) + (b.vx / il) * HIT_KNOCK,
+              (en.position[1] ?? 0) + (b.vy / il) * HIT_KNOCK,
+            ];
+            this.spark(nx, ny);
+            if (b.pierce <= 0) {
+              dead = true;
+              break;
+            }
+            b.pierce -= 1;
+          }
+        }
+      }
+      if (dead) b.node.parent?.removeChild(b.node as unknown as Node);
+      else keep.push(b);
+    }
+    this.boltList = keep;
+  }
+
+  /** A tiny additive impact spark at a bolt hit (pops on the dark arena). */
+  private spark(x: number, y: number): void {
+    const p = new Particles2D('Spark');
+    p.position = [x, y];
+    p.preset = 'custom';
+    p.emitting = false;
+    p.rate = 0;
+    p.burst = 10;
+    p.spreadDeg = 360;
+    p.lifetime = [0.12, 0.3];
+    p.speed = [150, 360];
+    p.drag = 2.6;
+    p.sizeStart = 20;
+    p.sizeEnd = 2;
+    p.colorStart = '#ffffff';
+    p.colorEnd = '#ffcf5a';
+    p.blend = 'add';
+    p.maxParticles = 8;
+    this.node.getRoot().addChild(p as unknown as Node);
+    p.on('finished', () => p.parent?.removeChild(p as unknown as Node));
+  }
+
+  private collectXp(dt: number): void {
+    const tree = this.node.tree;
+    if (!tree) return;
+    const px = this.px();
+    const py = this.py();
+    const mag2 = this.magnet * this.magnet;
+    const pick2 = PICKUP_RADIUS * PICKUP_RADIUS;
+    for (const g of tree.getNodesInGroup('xp')) {
+      const gn = g as unknown as Node2D & { _xp?: number };
+      const gx = gn.position[0] ?? 0;
+      const gy = gn.position[1] ?? 0;
+      const d = dist2(px, py, gx, gy);
+      if (d < pick2) {
+        this.addXp(gn._xp ?? 1);
+        (this.getNode('/root/SfxXp') as unknown as { play?: () => void } | null)?.play?.();
+        g.queueFree();
+      } else if (d < mag2) {
+        const ang = Math.atan2(py - gy, px - gx);
+        gn.position = [gx + Math.cos(ang) * 360 * dt, gy + Math.sin(ang) * 360 * dt];
+      }
+    }
+  }
+
+  private onLevelUp(): void {
+    this.health?.heal(8);
+    if (!hasDom) {
+      UPGRADES[0]?.apply(this); // headless: auto-pick so the loop is testable
+      return;
+    }
+    const pick = this.pickThree();
+    const overlay = document.getElementById('levelup');
+    const cards = document.getElementById('levelup-cards');
+    if (!overlay || !cards) {
+      pick[0]?.apply(this);
+      return;
+    }
+    const lv = document.getElementById('levelup-level');
+    if (lv) lv.textContent = `Level ${this.level}`;
+    cards.replaceChildren();
+    this.paused = true;
+    this.engine.stop(); // freeze the whole world while choosing
+    for (const up of pick) {
+      const btn = document.createElement('button');
+      btn.className = 'lvl-card';
+      btn.textContent = up.label;
+      btn.onclick = () => {
+        up.apply(this);
+        overlay.style.display = 'none';
+        this.paused = false;
+        this.engine.start();
+      };
+      cards.appendChild(btn);
+    }
+    overlay.style.display = 'flex';
+  }
+
+  private pickThree(): Upgrade[] {
+    const pool = [...UPGRADES];
+    const out: Upgrade[] = [];
+    for (let i = 0; i < 3 && pool.length; i++) {
+      const idx = Math.floor(this.rng.next() * pool.length);
+      out.push(pool.splice(idx, 1)[0] as Upgrade);
+    }
+    return out;
+  }
+
+  override update(): void {
+    const skin = this.skin;
+    if (skin) {
+      skin.flipX = this.facing < 0;
+      const v = this.body.velocity;
+      const moving = Math.abs(v[0] ?? 0) + Math.abs(v[1] ?? 0) > 8;
+      this.playOnce(skin, moving ? 'move' : 'idle');
+    }
+    this.refreshHud();
+  }
+
+  private playOnce(skin: AnimatedSprite2D, name: string): void {
+    if (this.lastClip === name) return;
+    this.lastClip = name;
+    skin.play(name);
+  }
+
+  private set(id: string, text: string): void {
+    const el = document.getElementById(id);
+    if (el) el.textContent = text;
+  }
+  private bar(id: string, frac: number, color?: string): void {
+    const el = document.getElementById(id);
+    if (el) {
+      el.style.width = `${Math.max(0, Math.min(1, frac)) * 100}%`;
+      if (color) el.style.background = color;
+    }
+  }
+  private refreshHud(): void {
+    if (!hasDom) return;
+    const h = this.health;
+    const hp = Math.max(0, Math.round(h?.current ?? 0));
+    this.set('hp-text', `${hp}`);
+    this.bar('hp-fill', hp / (h?.max || 100), hp > 40 ? '#6ee7dc' : '#ef476f');
+    this.bar('xp-fill', this.xp / this.xpToLevel);
+    this.set('level-text', `LV ${this.level}`);
+    this.set('kills-text', `☠ ${this.kills}`);
+    const left = Math.max(0, Math.ceil(SURVIVE_SECONDS - this.elapsed));
+    this.set('timer-text', `${Math.floor(left / 60)}:${String(left % 60).padStart(2, '0')}`);
+  }
+
+  private banner(text: string, color: string): void {
+    if (!hasDom) return;
+    const b = document.getElementById('banner');
+    if (b) {
+      b.textContent = text;
+      b.style.color = color;
+      b.style.opacity = '1';
+    }
+  }
+}
+
+/**
+ * Director — turn the two built-in `Spawner`s into an escalating horde: each
+ * freshly-spawned enemy is dropped onto a ring AROUND the player (the spawners sit
+ * at the origin), and spawn rate + enemy HP/speed ramp with elapsed time.
+ */
+export class Director extends Behavior {
+  static readonly props = {
+    spawners: { default: [] as string[] },
+    ringMin: { default: 360 },
+    ringMax: { default: 540 },
+  };
+  spawners: string[] = [];
+  ringMin = 360;
+  ringMax = 540;
+
+  private elapsed = 0;
+  private player: Node2D | null = null;
+
+  override onReady(): void {
+    this.player = this.getNode('/root/Player') as unknown as Node2D;
+    for (const path of this.spawners) {
+      this.getNode(path).on('spawned', (clone) => this.onSpawn(clone as Node));
+    }
+  }
+
+  override update(dt: number): void {
+    this.elapsed += dt;
+    const factor = Math.max(0.28, 1 - this.elapsed / 150);
+    for (const path of this.spawners) {
+      const sp = this.getNode(path).behavior as unknown as {
+        interval: number;
+        _baseInterval?: number;
+      };
+      if (sp) {
+        sp._baseInterval ??= sp.interval;
+        sp.interval = sp._baseInterval * factor;
+      }
+    }
+  }
+
+  private onSpawn(clone: Node): void {
+    const c = clone as unknown as Node2D;
+    const px = this.player?.position[0] ?? 0;
+    const py = this.player?.position[1] ?? 0;
+    const ang = this.rng.next() * Math.PI * 2;
+    const r = this.ringMin + this.rng.next() * (this.ringMax - this.ringMin);
+    c.position = [px + Math.cos(ang) * r, py + Math.sin(ang) * r];
+    const diff = 1 + this.elapsed / 50;
+    const hp = (clone as unknown as { behavior?: { max: number; current: number } }).behavior;
+    if (hp && typeof hp.max === 'number') {
+      hp.max = Math.round(hp.max * diff);
+      hp.current = hp.max;
+    }
+    const ai = (clone.getNodeOrNull('AI') as unknown as { behavior?: { speed: number } } | null)
+      ?.behavior;
+    if (ai && typeof ai.speed === 'number') ai.speed *= 1 + this.elapsed / 200;
+  }
+}
+
+/**
+ * EnemyDrop — on the parent enemy's death, drop an XP shard at its spot and tally
+ * the kill on the player's Survivor. Lives on a child node (one script per node);
+ * the parent's `Health` emits `died` on the parent. Cloned with the template, so
+ * every spawned enemy carries it (scene `connections` are NOT cloned).
+ */
+export class EnemyDrop extends Behavior {
+  static readonly props = { xp: { default: 1 }, color: { default: '#ff8a5b' } };
+  xp = 1;
+  color = '#ff8a5b';
+
+  override onReady(): void {
+    const parent = this.node.parent as unknown as { on(s: string, f: () => void): void } | null;
+    parent?.on('died', () => this.drop());
+  }
+
+  private drop(): void {
+    const pos = (this.node.parent as unknown as Node2D).position;
+    const x = pos[0] ?? 0;
+    const y = pos[1] ?? 0;
+    // death POOF — a burst in the enemy's colour so a kill reads clearly
+    const poof = new Particles2D('Poof');
+    poof.position = [x, y];
+    poof.preset = 'custom';
+    poof.emitting = false;
+    poof.rate = 0;
+    poof.burst = 16;
+    poof.spreadDeg = 360;
+    poof.lifetime = [0.22, 0.5];
+    poof.speed = [120, 340];
+    poof.drag = 2.4;
+    poof.sizeStart = 18;
+    poof.sizeEnd = 2;
+    poof.colorStart = '#ffffff';
+    poof.colorEnd = this.color;
+    poof.blend = 'add';
+    poof.maxParticles = 18;
+    this.node.getRoot().addChild(poof as unknown as Node);
+    poof.on('finished', () => poof.parent?.removeChild(poof as unknown as Node));
+    (this.getNode('/root/SfxKill') as unknown as { play?: () => void } | null)?.play?.();
+
+    const shard = new ColorRect2D('Xp');
+    shard.size = [14, 14];
+    shard.color = '#7ad7ff';
+    shard.rotation = 45;
+    shard.position = [x, y];
+    (shard as unknown as { _xp: number })._xp = this.xp;
+    (shard as unknown as Node).addToGroup('xp');
+    this.node.getRoot().addChild(shard as unknown as Node);
+    (this.getNode('/root/Player').behavior as unknown as { addKill?: () => void })?.addKill?.();
+  }
+}
+
+/**
+ * EnemyFace — flip the enemy sprite toward travel, keep the walk clip playing, and
+ * PUNCH the sprite scale up briefly each time the parent takes damage (hit feedback;
+ * paired with the Survivor's knockback + impact spark).
+ */
+const FLASH_TIME = 0.16;
+export class EnemyFace extends Behavior {
+  private lastX = 0;
+  private flash = 0;
+  private wasFlashing = false;
+  private baseScale: [number, number] = [1, 1];
+  private baseOpacity = 1;
+  private get root(): Node2D {
+    return this.node.parent as unknown as Node2D;
+  }
+  private get skin(): AnimatedSprite2D {
+    return this.getNode('../Skin') as unknown as AnimatedSprite2D;
+  }
+  override onReady(): void {
+    this.lastX = this.root.position[0] ?? 0;
+    const s = this.skin;
+    if (s) {
+      this.baseScale = [s.scale[0] ?? 1, s.scale[1] ?? 1];
+      this.baseOpacity = (s as unknown as { opacity?: number }).opacity ?? 1;
+      s.play('move');
+    }
+    (this.root as unknown as { on(s: string, f: () => void): void }).on('damaged', () => {
+      this.flash = FLASH_TIME;
+    });
+  }
+  override update(dt: number): void {
+    const skin = this.skin as AnimatedSprite2D & { opacity: number };
+    if (!skin) return;
+    const x = this.root.position[0] ?? 0;
+    const dx = x - this.lastX;
+    this.lastX = x;
+    if (Math.abs(dx) > 0.05) skin.flipX = dx < 0;
+    if (this.flash > 0) {
+      this.flash = Math.max(0, this.flash - dt);
+      const t = this.flash / FLASH_TIME;
+      skin.scale = [this.baseScale[0] * (1 + 0.55 * t), this.baseScale[1] * (1 + 0.55 * t)];
+      skin.opacity = this.baseOpacity * (0.4 + 0.6 * (1 - t)); // dip to ~0.4 then back up
+      this.wasFlashing = true;
+    } else if (this.wasFlashing) {
+      skin.scale = [this.baseScale[0], this.baseScale[1]]; // restore once
+      skin.opacity = this.baseOpacity;
+      this.wasFlashing = false;
+    }
+  }
+}
+
+/**
+ * GridFloor — an INFINITE arena floor. A camera-following solid backdrop (so there's
+ * never a visible edge however far you roam) plus a grid that follows the camera but
+ * snaps its lines to world multiples of `cell` (modulo scroll), so the lines look
+ * world-fixed and tile forever. Replaces a fixed-size floor whose border showed once
+ * the player wandered past it. Builds its rects in code; all sit behind the action.
+ */
+export class GridFloor extends Behavior {
+  static readonly props = {
+    color: { default: '#12152a' },
+    line: { default: '#1d244a' },
+    cell: { default: 200 },
+    lines: { default: 26 },
+  };
+  color = '#12152a';
+  line = '#1d244a';
+  cell = 200;
+  lines = 26;
+
+  private cam: Node2D | null = null;
+  private bg: Node2D | null = null;
+  private vlines: Node2D[] = [];
+  private hlines: Node2D[] = [];
+
+  override onReady(): void {
+    this.cam = this.getNode('/root/Camera') as unknown as Camera2D as unknown as Node2D;
+    const span = this.lines * this.cell + this.cell;
+    const bg = new ColorRect2D('Bg');
+    bg.size = [span + 1600, span + 1600];
+    bg.color = this.color;
+    bg.renderOrder = -60;
+    this.node.addChild(bg as unknown as Node);
+    this.bg = bg as unknown as Node2D;
+    const mk = (name: string, w: number, h: number): Node2D => {
+      const r = new ColorRect2D(name);
+      r.size = [w, h];
+      r.color = this.line;
+      r.renderOrder = -59;
+      this.node.addChild(r as unknown as Node);
+      return r as unknown as Node2D;
+    };
+    for (let i = 0; i < this.lines; i++) this.vlines.push(mk(`V${i}`, 3, span));
+    for (let i = 0; i < this.lines; i++) this.hlines.push(mk(`H${i}`, span, 3));
+  }
+
+  override update(): void {
+    const cam = this.cam;
+    if (!cam) return;
+    const cx = cam.position[0] ?? 0;
+    const cy = cam.position[1] ?? 0;
+    if (this.bg) this.bg.position = [cx, cy];
+    const cell = this.cell;
+    const half = (this.lines * cell) / 2;
+    const startX = Math.floor((cx - half) / cell) * cell;
+    const startY = Math.floor((cy - half) / cell) * cell;
+    for (let i = 0; i < this.vlines.length; i++) this.vlines[i].position = [startX + i * cell, cy];
+    for (let i = 0; i < this.hlines.length; i++) this.hlines[i].position = [cx, startY + i * cell];
+  }
+}