@rpgjs/client 5.0.0-beta.10 → 5.0.0-beta.11

package/src/Game/ProjectileManager.spec.ts

@@ -0,0 +1,338 @@
+import { afterEach, describe, expect, test, vi } from "vitest";
+import { Hooks } from "@rpgjs/common";
+import { ProjectileManager } from "./ProjectileManager";
+
+describe("ProjectileManager", () => {
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  test("renders registered projectile components from compact spawn data", () => {
+    const onSpawn = vi.fn();
+    const hooks = new Hooks([{ projectiles: { onSpawn } }], "client");
+    const manager = new ProjectileManager(hooks);
+    const component = () => null;
+
+    manager.register("fireball", component);
+    manager.spawnBatch([
+      {
+        id: "p1",
+        type: "fireball",
+        origin: { x: 10, y: 20 },
+        direction: { x: 1, y: 0 },
+        speed: 100,
+        range: 500,
+        ttl: 5,
+        spawnTick: 1,
+      },
+    ]);
+
+    const current = manager.current();
+    expect(current).toHaveLength(1);
+    expect(current[0].component).toBe(component);
+    expect(current[0].props.x).toBeGreaterThanOrEqual(10);
+    expect(current[0].props.angle).toBe(0);
+    expect(onSpawn).toHaveBeenCalledWith(expect.objectContaining({ id: "p1", type: "fireball" }));
+  });
+
+  test("starts visuals at the spawn origin even when a server tick estimate exists", () => {
+    vi.useFakeTimers();
+    vi.setSystemTime(2000);
+
+    const hooks = new Hooks([], "client");
+    const manager = new ProjectileManager(hooks);
+    manager.register("arrow", () => null);
+    manager.spawnBatch([
+      {
+        id: "p-latency",
+        type: "arrow",
+        origin: { x: 0, y: 0 },
+        direction: { x: 1, y: 0 },
+        speed: 120,
+        range: 500,
+        ttl: 5,
+        spawnTick: 10,
+      },
+    ], {
+      currentServerTick: 16,
+      tickDurationMs: 1000 / 60,
+    });
+
+    const current = manager.current();
+    expect(current).toHaveLength(1);
+    expect(current[0].props.elapsed).toBeCloseTo(0, 3);
+    expect(current[0].props.x).toBeCloseTo(0, 3);
+  });
+
+  test("keeps delayed projectiles until their visual delay has elapsed", () => {
+    vi.useFakeTimers();
+    vi.setSystemTime(1000);
+
+    const hooks = new Hooks([], "client");
+    const manager = new ProjectileManager(hooks);
+    manager.register("spark", () => null);
+    manager.spawnBatch([
+      {
+        id: "p-delayed",
+        type: "spark",
+        origin: { x: 0, y: 0 },
+        direction: { x: 1, y: 0 },
+        speed: 100,
+        range: 500,
+        ttl: 5,
+        spawnTick: 1,
+        delay: 0.1,
+      },
+    ]);
+
+    vi.setSystemTime(1050);
+    manager.step();
+    expect(manager.current()).toHaveLength(0);
+
+    vi.setSystemTime(1110);
+    manager.step();
+    const current = manager.current();
+    expect(current).toHaveLength(1);
+    expect(current[0].props.elapsed).toBeCloseTo(0.01, 3);
+  });
+
+  test("keeps impacted projectiles briefly so components can react", () => {
+    const hooks = new Hooks([], "client");
+    const manager = new ProjectileManager(hooks);
+    manager.register("arrow", () => null);
+    manager.spawnBatch([
+      {
+        id: "p2",
+        type: "arrow",
+        origin: { x: 0, y: 0 },
+        direction: { x: 1, y: 0 },
+        speed: 100,
+        range: 500,
+        ttl: 5,
+        spawnTick: 1,
+      },
+    ]);
+
+    manager.impactBatch([{ id: "p2", x: 42, y: 0, distance: 42 }]);
+
+    const current = manager.current();
+    expect(current).toHaveLength(1);
+    expect(current[0].props.impact?.x).toBe(42);
+    expect(current[0].props.destroyed).toBe(true);
+  });
+
+  test("keeps hit destroys briefly even if the destroy packet arrives before impact", () => {
+    const hooks = new Hooks([], "client");
+    const manager = new ProjectileManager(hooks);
+    manager.register("arrow", () => null);
+    manager.spawnBatch([
+      {
+        id: "p3",
+        type: "arrow",
+        origin: { x: 0, y: 0 },
+        direction: { x: 1, y: 0 },
+        speed: 100,
+        range: 500,
+        ttl: 5,
+        spawnTick: 1,
+      },
+    ]);
+
+    manager.destroyBatch([{ id: "p3", reason: "hit", x: 48, y: 0, distance: 48 }]);
+
+    const current = manager.current();
+    expect(current).toHaveLength(1);
+    expect(current[0].props.impact?.x).toBe(48);
+    expect(current[0].props.destroyed).toBe(true);
+  });
+
+  test("freezes hit destroys at the authoritative impact position until the impact completes", () => {
+    vi.useFakeTimers();
+    vi.setSystemTime(1000);
+
+    const hooks = new Hooks([], "client");
+    const manager = new ProjectileManager(hooks);
+    manager.register("arrow", () => null);
+    manager.spawnBatch([
+      {
+        id: "p4",
+        type: "arrow",
+        origin: { x: 0, y: 0 },
+        direction: { x: 1, y: 0 },
+        speed: 100,
+        range: 500,
+        ttl: 5,
+        spawnTick: 1,
+      },
+    ]);
+
+    vi.setSystemTime(1200);
+    manager.destroyBatch([{ id: "p4", reason: "hit", x: 48, y: 0, distance: 48 }]);
+
+    vi.setSystemTime(1300);
+    manager.step();
+    let current = manager.current();
+    expect(current).toHaveLength(1);
+    expect(current[0].props.x).toBe(48);
+    expect(current[0].props.distance).toBe(48);
+    expect(current[0].props.impactProgress).toBeCloseTo(100 / 350, 3);
+
+    vi.setSystemTime(1600);
+    manager.step();
+    current = manager.current();
+    expect(current).toHaveLength(0);
+  });
+
+  test("clamps visual movement at the predicted impact without starting the impact animation", () => {
+    vi.useFakeTimers();
+    vi.setSystemTime(1000);
+
+    const hooks = new Hooks([], "client");
+    const manager = new ProjectileManager(hooks, () => ({
+      id: "p5",
+      targetId: "target",
+      x: 30,
+      y: 0,
+      distance: 30,
+    }));
+    manager.register("arrow", () => null);
+    manager.spawnBatch([
+      {
+        id: "p5",
+        type: "arrow",
+        origin: { x: 0, y: 0 },
+        direction: { x: 1, y: 0 },
+        speed: 100,
+        range: 500,
+        ttl: 5,
+        spawnTick: 1,
+      },
+    ]);
+
+    vi.setSystemTime(1200);
+    manager.step();
+    let current = manager.current();
+    expect(current).toHaveLength(1);
+    expect(current[0].props.x).toBe(20);
+    expect(current[0].props.impact).toBeUndefined();
+    expect(current[0].props.destroyed).toBe(false);
+
+    vi.setSystemTime(1400);
+    manager.step();
+    current = manager.current();
+    expect(current).toHaveLength(1);
+    expect(current[0].props.x).toBe(30);
+    expect(current[0].props.distance).toBe(30);
+    expect(current[0].props.impact).toBeUndefined();
+    expect(current[0].props.destroyed).toBe(false);
+
+    manager.impactBatch([{ id: "p5", targetId: "target", x: 32, y: 0, distance: 32 }]);
+    current = manager.current();
+    expect(current[0].props.x).toBe(30);
+    expect(current[0].props.distance).toBe(30);
+    expect(current[0].props.impact?.x).toBe(32);
+    expect(current[0].props.destroyed).toBe(true);
+  });
+
+  test("uses the authoritative impact position when the predicted target differs", () => {
+    vi.useFakeTimers();
+    vi.setSystemTime(1000);
+
+    const hooks = new Hooks([], "client");
+    const manager = new ProjectileManager(hooks, () => ({
+      id: "p7",
+      targetId: "wall",
+      x: 30,
+      y: 0,
+      distance: 30,
+    }));
+    manager.register("arrow", () => null);
+    manager.spawnBatch([
+      {
+        id: "p7",
+        type: "arrow",
+        origin: { x: 0, y: 0 },
+        direction: { x: 1, y: 0 },
+        speed: 100,
+        range: 500,
+        ttl: 5,
+        spawnTick: 1,
+      },
+    ]);
+
+    vi.setSystemTime(1400);
+    manager.step();
+    manager.impactBatch([{ id: "p7", targetId: "target", x: 45, y: 0, distance: 45 }]);
+
+    const current = manager.current();
+    expect(current[0].props.x).toBe(45);
+    expect(current[0].props.distance).toBe(45);
+    expect(current[0].props.impact?.x).toBe(45);
+  });
+
+  test("keeps an unconfirmed predicted impact clamped until the server resolves it", () => {
+    vi.useFakeTimers();
+    vi.setSystemTime(1000);
+
+    const hooks = new Hooks([], "client");
+    const manager = new ProjectileManager(hooks, () => ({
+      id: "p6",
+      targetId: "ignored",
+      x: 30,
+      y: 0,
+      distance: 30,
+    }));
+    manager.register("arrow", () => null);
+    manager.spawnBatch([
+      {
+        id: "p6",
+        type: "arrow",
+        origin: { x: 0, y: 0 },
+        direction: { x: 1, y: 0 },
+        speed: 100,
+        range: 500,
+        ttl: 5,
+        spawnTick: 1,
+      },
+    ]);
+
+    vi.setSystemTime(1400);
+    manager.step();
+    expect(manager.current()[0].props.x).toBe(30);
+
+    vi.setSystemTime(1900);
+    manager.step();
+    const current = manager.current();
+    expect(current).toHaveLength(1);
+    expect(current[0].props.x).toBe(30);
+    expect(current[0].props.impact).toBeUndefined();
+    expect(current[0].props.destroyed).toBe(false);
+
+    manager.destroyBatch([{ id: "p6", reason: "range" }]);
+    expect(manager.current()[0].props.x).toBe(30);
+    expect(manager.current()[0].props.destroyed).toBe(true);
+  });
+
+  test("skips local impact prediction when the server marks the projectile as non-predictable", () => {
+    const hooks = new Hooks([], "client");
+    const predictionResolver = vi.fn();
+    const manager = new ProjectileManager(hooks, predictionResolver);
+    manager.register("arrow", () => null);
+
+    manager.spawnBatch([
+      {
+        id: "p-no-predict",
+        type: "arrow",
+        origin: { x: 0, y: 0 },
+        direction: { x: 1, y: 0 },
+        speed: 100,
+        range: 500,
+        ttl: 5,
+        spawnTick: 1,
+        predictImpact: false,
+      },
+    ]);
+
+    expect(predictionResolver).not.toHaveBeenCalled();
+  });
+});

package/src/Game/ProjectileManager.ts

@@ -0,0 +1,324 @@
+import { computed, signal } from "canvasengine";
+import { Hooks } from "@rpgjs/common";
+
+export interface ClientProjectileSpawn {
+  id: string;
+  type: string;
+  ownerId?: string;
+  origin: { x: number; y: number };
+  direction: { x: number; y: number };
+  speed: number;
+  range: number;
+  ttl: number;
+  spawnTick: number;
+  delay?: number;
+  index?: number;
+  count?: number;
+  params?: Record<string, unknown>;
+  collisionMask?: number;
+  ignoreOwner?: boolean;
+  predictImpact?: boolean;
+}
+
+export interface ClientProjectileImpact {
+  id: string;
+  targetId?: string;
+  x: number;
+  y: number;
+  distance?: number;
+}
+
+export interface ClientProjectileDestroy {
+  id: string;
+  reason?: string;
+  targetId?: string;
+  x?: number;
+  y?: number;
+  distance?: number;
+}
+
+export interface RenderedProjectileProps extends ClientProjectileSpawn {
+  x: number;
+  y: number;
+  angle: number;
+  distance: number;
+  elapsed: number;
+  progress: number;
+  impact?: ClientProjectileImpact;
+  impactElapsed?: number;
+  impactProgress?: number;
+  destroyed?: boolean;
+}
+
+export interface RenderedProjectile {
+  id: string;
+  type: string;
+  component: any;
+  props: RenderedProjectileProps;
+}
+
+export type ProjectilePredictionResolver = (
+  projectile: ClientProjectileSpawn,
+) => ClientProjectileImpact | null | undefined;
+
+export interface ProjectileSpawnClock {
+  now?: number;
+  currentServerTick?: number;
+  tickDurationMs?: number;
+}
+
+interface RuntimeProjectile {
+  spawn: ClientProjectileSpawn;
+  component: any;
+  createdAt: number;
+  impact?: ClientProjectileImpact;
+  visualImpact?: ClientProjectileImpact;
+  predictedImpact?: ClientProjectileImpact;
+  impactStartedAt?: number;
+  destroyAt?: number;
+  destroyReason?: string;
+}
+
+export class ProjectileManager {
+  private readonly components = new Map<string, any>();
+  private readonly projectiles = new Map<string, RuntimeProjectile>();
+  private readonly version = signal(0);
+  private readonly impactDurationMs = 350;
+
+  constructor(
+    private readonly hooks: Hooks,
+    private readonly predictionResolver?: ProjectilePredictionResolver,
+  ) {}
+
+  current = computed<RenderedProjectile[]>(() => {
+    this.version();
+    const now = Date.now();
+    const rendered: RenderedProjectile[] = [];
+    for (const projectile of this.projectiles.values()) {
+      const props = this.toProps(projectile, now);
+      if (!props) {
+        continue;
+      }
+      rendered.push({
+        id: projectile.spawn.id,
+        type: projectile.spawn.type,
+        component: projectile.component,
+        props,
+      });
+    }
+    return rendered;
+  });
+
+  register(type: string, component: any): any {
+    this.components.set(type, component);
+    return component;
+  }
+
+  get(type: string): any {
+    return this.components.get(type);
+  }
+
+  spawnBatch(projectiles: ClientProjectileSpawn[], clock: ProjectileSpawnClock = {}): void {
+    const now = clock.now ?? Date.now();
+    for (const projectile of projectiles) {
+      const component = this.components.get(projectile.type);
+      if (!component) {
+        continue;
+      }
+      const runtime: RuntimeProjectile = {
+        spawn: {
+          ...projectile,
+          delay: projectile.delay ?? 0,
+          index: projectile.index ?? 0,
+          count: projectile.count ?? 1,
+        },
+        component,
+        createdAt: now,
+      };
+      this.setPredictedImpact(runtime);
+      this.projectiles.set(projectile.id, runtime);
+      this.hooks.callHooks("client-projectiles-onSpawn", runtime.spawn).subscribe();
+    }
+    this.touch();
+  }
+
+  impactBatch(impacts: ClientProjectileImpact[]): void {
+    const now = Date.now();
+    for (const impact of impacts) {
+      const projectile = this.projectiles.get(impact.id);
+      if (!projectile) {
+        continue;
+      }
+      this.setImpact(projectile, impact, now);
+      this.hooks.callHooks("client-projectiles-onImpact", this.toProps(projectile, now)).subscribe();
+    }
+    this.touch();
+  }
+
+  destroyBatch(projectiles: ClientProjectileDestroy[]): void {
+    const now = Date.now();
+    for (const destroyed of projectiles) {
+      const projectile = this.projectiles.get(destroyed.id);
+      if (!projectile) {
+        continue;
+      }
+      if (destroyed.reason === "hit") {
+        const current = this.toProps(projectile, now);
+        this.setImpact(projectile, {
+          id: destroyed.id,
+          targetId: destroyed.targetId ?? projectile.impact?.targetId,
+          x: destroyed.x ?? projectile.impact?.x ?? current?.x ?? projectile.spawn.origin.x,
+          y: destroyed.y ?? projectile.impact?.y ?? current?.y ?? projectile.spawn.origin.y,
+          distance: destroyed.distance ?? projectile.impact?.distance ?? current?.distance,
+        }, now);
+      }
+      projectile.destroyReason = destroyed.reason;
+      projectile.destroyAt = projectile.destroyAt ?? (
+        projectile.impact && projectile.impactStartedAt !== undefined
+          ? projectile.impactStartedAt + this.impactDurationMs
+          : now
+      );
+      this.hooks.callHooks("client-projectiles-onDestroy", this.toProps(projectile, now)).subscribe();
+    }
+    this.touch();
+  }
+
+  clear(): void {
+    this.projectiles.clear();
+    this.touch();
+  }
+
+  step(): void {
+    const now = Date.now();
+    let changed = false;
+    for (const [id, projectile] of this.projectiles) {
+      const props = this.toProps(projectile, now);
+      if (
+        (!props && !this.isWaitingForDelay(projectile, now)) ||
+        (projectile.destroyAt !== undefined && now >= projectile.destroyAt)
+      ) {
+        this.projectiles.delete(id);
+        changed = true;
+      }
+    }
+    this.touch(changed || this.projectiles.size > 0);
+  }
+
+  private toProps(projectile: RuntimeProjectile, now: number): RenderedProjectileProps | null {
+    const spawn = projectile.spawn;
+    const delayMs = (spawn.delay ?? 0) * 1000;
+    const elapsedMs = now - projectile.createdAt - delayMs;
+    if (elapsedMs < 0) {
+      return null;
+    }
+    const elapsed = elapsedMs / 1000;
+    const ttl = Math.max(0.001, spawn.ttl);
+    const rawDistance = Math.min(spawn.speed * elapsed, spawn.range);
+    const predictedImpact = this.getActivePredictedImpact(projectile, now, rawDistance);
+    const visualImpact = projectile.visualImpact ?? projectile.impact;
+    const distance = visualImpact?.distance ?? predictedImpact?.distance ?? rawDistance;
+    const progress = Math.min(1, distance / spawn.range);
+    const x = visualImpact?.x ?? predictedImpact?.x ?? spawn.origin.x + spawn.direction.x * distance;
+    const y = visualImpact?.y ?? predictedImpact?.y ?? spawn.origin.y + spawn.direction.y * distance;
+    const impactElapsedMs = projectile.impactStartedAt !== undefined
+      ? Math.max(0, now - projectile.impactStartedAt)
+      : undefined;
+    return {
+      ...spawn,
+      x,
+      y,
+      angle: Math.atan2(spawn.direction.y, spawn.direction.x),
+      distance,
+      elapsed,
+      progress,
+      impact: projectile.impact,
+      impactElapsed: impactElapsedMs === undefined ? undefined : impactElapsedMs / 1000,
+      impactProgress: impactElapsedMs === undefined
+        ? undefined
+        : Math.min(1, impactElapsedMs / this.impactDurationMs),
+      destroyed: projectile.destroyAt !== undefined,
+      ttl,
+    };
+  }
+
+  private isWaitingForDelay(projectile: RuntimeProjectile, now: number): boolean {
+    const delayMs = (projectile.spawn.delay ?? 0) * 1000;
+    return now - projectile.createdAt - delayMs < 0;
+  }
+
+  private setPredictedImpact(projectile: RuntimeProjectile): void {
+    if (projectile.spawn.predictImpact === false) {
+      return;
+    }
+    const impact = this.predictionResolver?.(projectile.spawn);
+    if (!impact || !Number.isFinite(impact.x) || !Number.isFinite(impact.y)) {
+      return;
+    }
+    const distance = typeof impact.distance === "number" && Number.isFinite(impact.distance)
+      ? impact.distance
+      : Math.hypot(impact.x - projectile.spawn.origin.x, impact.y - projectile.spawn.origin.y);
+    if (!Number.isFinite(distance) || distance < 0 || distance > projectile.spawn.range) {
+      return;
+    }
+    projectile.predictedImpact = {
+      ...impact,
+      distance,
+    };
+  }
+
+  private getActivePredictedImpact(
+    projectile: RuntimeProjectile,
+    now: number,
+    rawDistance: number,
+  ): ClientProjectileImpact | undefined {
+    if (!projectile.predictedImpact || projectile.impact) {
+      return undefined;
+    }
+    const distance = projectile.predictedImpact.distance;
+    if (distance === undefined || rawDistance < distance) {
+      return undefined;
+    }
+    return projectile.predictedImpact;
+  }
+
+  private setImpact(projectile: RuntimeProjectile, impact: ClientProjectileImpact, now: number): void {
+    projectile.visualImpact = this.resolveVisualImpact(projectile, impact, now);
+    projectile.impact = impact;
+    projectile.predictedImpact = undefined;
+    projectile.impactStartedAt = projectile.impactStartedAt ?? now;
+    const impactDestroyAt = projectile.impactStartedAt + this.impactDurationMs;
+    projectile.destroyAt = Math.max(projectile.destroyAt ?? 0, impactDestroyAt);
+  }
+
+  private resolveVisualImpact(
+    projectile: RuntimeProjectile,
+    impact: ClientProjectileImpact,
+    now: number,
+  ): ClientProjectileImpact {
+    const predicted = projectile.predictedImpact;
+    if (!predicted || !this.isSameTarget(predicted, impact)) {
+      return impact;
+    }
+    const distance = predicted.distance;
+    if (distance === undefined) {
+      return impact;
+    }
+    const delayMs = (projectile.spawn.delay ?? 0) * 1000;
+    const elapsedMs = now - projectile.createdAt - delayMs;
+    if (elapsedMs < 0) {
+      return impact;
+    }
+    const rawDistance = Math.min(projectile.spawn.speed * (elapsedMs / 1000), projectile.spawn.range);
+    return rawDistance >= distance ? predicted : impact;
+  }
+
+  private isSameTarget(a: ClientProjectileImpact, b: ClientProjectileImpact): boolean {
+    return a.targetId !== undefined && a.targetId === b.targetId;
+  }
+
+  private touch(force = true): void {
+    if (force) {
+      this.version.update((value) => value + 1);
+    }
+  }
+}