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

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @rpgjs/client
 
+## 5.0.0-beta.11
+
+### Patch Changes
+
+- Add projectile runtime support with client-side prediction, action input payload handling, pointer context helpers, standalone message handling, and MMORPG connection authentication.
+
+  Add composable CanvasEngine scene map components and update built-in GUI/dynamic components for the current CanvasEngine release.
+
+  - @rpgjs/common@5.0.0-beta.11
+  - @rpgjs/server@5.0.0-beta.11
+  - @rpgjs/ui-css@5.0.0-beta.11
+
 ## 5.0.0-beta.10
 
 ### Patch Changes

package/dist/Game/ProjectileManager.d.ts

@@ -0,0 +1,89 @@
+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;
+}
+export declare class ProjectileManager {
+    private readonly hooks;
+    private readonly predictionResolver?;
+    private readonly components;
+    private readonly projectiles;
+    private readonly version;
+    private readonly impactDurationMs;
+    constructor(hooks: Hooks, predictionResolver?: ProjectilePredictionResolver | undefined);
+    current: import('canvasengine').ComputedSignal<RenderedProjectile[]>;
+    register(type: string, component: any): any;
+    get(type: string): any;
+    spawnBatch(projectiles: ClientProjectileSpawn[], clock?: ProjectileSpawnClock): void;
+    impactBatch(impacts: ClientProjectileImpact[]): void;
+    destroyBatch(projectiles: ClientProjectileDestroy[]): void;
+    clear(): void;
+    step(): void;
+    private toProps;
+    private isWaitingForDelay;
+    private setPredictedImpact;
+    private getActivePredictedImpact;
+    private setImpact;
+    private resolveVisualImpact;
+    private isSameTarget;
+    private touch;
+}

package/dist/Game/ProjectileManager.js

@@ -0,0 +1,179 @@
+import { computed, signal } from "canvasengine";
+//#region src/Game/ProjectileManager.ts
+var ProjectileManager = class {
+	constructor(hooks, predictionResolver) {
+		this.hooks = hooks;
+		this.predictionResolver = predictionResolver;
+		this.components = /* @__PURE__ */ new Map();
+		this.projectiles = /* @__PURE__ */ new Map();
+		this.version = signal(0);
+		this.impactDurationMs = 350;
+		this.current = computed(() => {
+			this.version();
+			const now = Date.now();
+			const rendered = [];
+			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, component) {
+		this.components.set(type, component);
+		return component;
+	}
+	get(type) {
+		return this.components.get(type);
+	}
+	spawnBatch(projectiles, clock = {}) {
+		const now = clock.now ?? Date.now();
+		for (const projectile of projectiles) {
+			const component = this.components.get(projectile.type);
+			if (!component) continue;
+			const runtime = {
+				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) {
+		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) {
+		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 !== void 0 ? projectile.impactStartedAt + this.impactDurationMs : now);
+			this.hooks.callHooks("client-projectiles-onDestroy", this.toProps(projectile, now)).subscribe();
+		}
+		this.touch();
+	}
+	clear() {
+		this.projectiles.clear();
+		this.touch();
+	}
+	step() {
+		const now = Date.now();
+		let changed = false;
+		for (const [id, projectile] of this.projectiles) if (!this.toProps(projectile, now) && !this.isWaitingForDelay(projectile, now) || projectile.destroyAt !== void 0 && now >= projectile.destroyAt) {
+			this.projectiles.delete(id);
+			changed = true;
+		}
+		this.touch(changed || this.projectiles.size > 0);
+	}
+	toProps(projectile, now) {
+		const spawn = projectile.spawn;
+		const delayMs = (spawn.delay ?? 0) * 1e3;
+		const elapsedMs = now - projectile.createdAt - delayMs;
+		if (elapsedMs < 0) return null;
+		const elapsed = elapsedMs / 1e3;
+		const ttl = Math.max(.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 !== void 0 ? Math.max(0, now - projectile.impactStartedAt) : void 0;
+		return {
+			...spawn,
+			x,
+			y,
+			angle: Math.atan2(spawn.direction.y, spawn.direction.x),
+			distance,
+			elapsed,
+			progress,
+			impact: projectile.impact,
+			impactElapsed: impactElapsedMs === void 0 ? void 0 : impactElapsedMs / 1e3,
+			impactProgress: impactElapsedMs === void 0 ? void 0 : Math.min(1, impactElapsedMs / this.impactDurationMs),
+			destroyed: projectile.destroyAt !== void 0,
+			ttl
+		};
+	}
+	isWaitingForDelay(projectile, now) {
+		const delayMs = (projectile.spawn.delay ?? 0) * 1e3;
+		return now - projectile.createdAt - delayMs < 0;
+	}
+	setPredictedImpact(projectile) {
+		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
+		};
+	}
+	getActivePredictedImpact(projectile, now, rawDistance) {
+		if (!projectile.predictedImpact || projectile.impact) return;
+		const distance = projectile.predictedImpact.distance;
+		if (distance === void 0 || rawDistance < distance) return;
+		return projectile.predictedImpact;
+	}
+	setImpact(projectile, impact, now) {
+		projectile.visualImpact = this.resolveVisualImpact(projectile, impact, now);
+		projectile.impact = impact;
+		projectile.predictedImpact = void 0;
+		projectile.impactStartedAt = projectile.impactStartedAt ?? now;
+		const impactDestroyAt = projectile.impactStartedAt + this.impactDurationMs;
+		projectile.destroyAt = Math.max(projectile.destroyAt ?? 0, impactDestroyAt);
+	}
+	resolveVisualImpact(projectile, impact, now) {
+		const predicted = projectile.predictedImpact;
+		if (!predicted || !this.isSameTarget(predicted, impact)) return impact;
+		const distance = predicted.distance;
+		if (distance === void 0) return impact;
+		const delayMs = (projectile.spawn.delay ?? 0) * 1e3;
+		const elapsedMs = now - projectile.createdAt - delayMs;
+		if (elapsedMs < 0) return impact;
+		return Math.min(projectile.spawn.speed * (elapsedMs / 1e3), projectile.spawn.range) >= distance ? predicted : impact;
+	}
+	isSameTarget(a, b) {
+		return a.targetId !== void 0 && a.targetId === b.targetId;
+	}
+	touch(force = true) {
+		if (force) this.version.update((value) => value + 1);
+	}
+};
+//#endregion
+export { ProjectileManager };
+
+//# sourceMappingURL=ProjectileManager.js.map

package/dist/Game/ProjectileManager.js.map

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

package/dist/Game/ProjectileManager.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/RpgClient.d.ts

@@ -2,7 +2,8 @@ import { ComponentFunction, Signal } from 'canvasengine';
 import { RpgClientEngine } from './RpgClientEngine';
 import { Loader, Container } from 'pixi.js';
 import { RpgClientObject } from './Game/Object';
-import { MapPhysicsEntityContext, MapPhysicsInitContext } from '@rpgjs/common';
+import { MapPhysicsEntityContext, MapPhysicsInitContext, RpgActionName } from '@rpgjs/common';
+import { ClientProjectileSpawn, RenderedProjectileProps } from './Game/ProjectileManager';
 type RpgComponent = RpgClientObject;
 type SceneMap = Container;
 export type SpriteComponentConfig = ComponentFunction | {
@@ -40,15 +41,18 @@ export interface RpgClientEngineHooks {
     /**
      * Recover keys from the pressed keyboard
      *
-     * @prop { (engine: RpgClientEngine, obj: { input: string, playerId: number }) => any } [onInput]
+     * @prop { (engine: RpgClientEngine, obj: { input: string | number, action?: string | number, data?: any, playerId: number }) => any } [onInput]
      * @memberof RpgEngineHooks
      */
     onInput?: (engine: RpgClientEngine, obj: {
-        input: string;
+        input: RpgActionName;
+        action?: RpgActionName;
+        data?: any;
         playerId: number;
     }) => any;
     /**
-     * Called when the user is connected to the server
+     * Called when the user is connected to the server. In MMORPG mode, this
+     * runs after the server sends the RPGJS connection acceptance packet.
      *
      * @prop { (engine: RpgClientEngine, socket: any) => any } [onConnected]
      * @memberof RpgEngineHooks
@@ -62,7 +66,8 @@ export interface RpgClientEngineHooks {
      */
     onDisconnect?: (engine: RpgClientEngine, reason: any, socket: any) => any;
     /**
-     * Called when there was a connection error
+     * Called when there was a connection error. In MMORPG mode, this also runs
+     * when server-side auth refuses the connection.
      *
      * @prop { (engine: RpgClientEngine, err: any, socket: any) => any } [onConnectError]
      * @memberof RpgEngineHooks
@@ -222,6 +227,13 @@ export interface RpgSceneHooks<Scene> {
     onDraw?: (scene: Scene, t: number) => any;
 }
 export interface RpgSceneMapHooks extends RpgSceneHooks<SceneMap> {
+    /**
+     * Root CanvasEngine component used to render the RPG scene map.
+     *
+     * Use the exported `SceneMap` component inside your custom component to
+     * keep the default map rendering and compose additional scene children.
+     */
+    component?: ComponentFunction;
     /**
      * The map and resources are being loaded
      *
@@ -261,6 +273,24 @@ export interface RpgSceneMapHooks extends RpgSceneHooks<SceneMap> {
      */
     onPhysicsReset?: (scene: SceneMap) => any;
 }
+export interface RpgProjectileHooks {
+    /**
+     * CanvasEngine components used to render server-authoritative projectiles.
+     */
+    components?: Record<string, ComponentFunction>;
+    /**
+     * Called when a projectile spawn batch is received from the server.
+     */
+    onSpawn?: (projectile: ClientProjectileSpawn) => any;
+    /**
+     * Called when the server confirms a projectile impact.
+     */
+    onImpact?: (projectile: RenderedProjectileProps | null) => any;
+    /**
+     * Called when the server destroys a projectile.
+     */
+    onDestroy?: (projectile: RenderedProjectileProps | null) => any;
+}
 export interface RpgClient {
     /**
      * Add hooks to the player or engine. All modules can listen to the hook
@@ -588,30 +618,33 @@ export interface RpgClient {
      * */
     sprite?: RpgSpriteHooks;
     /**
-     * Reference the scenes of the game. Here you can put your own class that inherits RpgSceneMap
+     * Reference the scenes of the game.
      *
      * ```ts
      * import { RpgSceneMapHooks, RpgClient, defineModule } from '@rpgjs/client'
+     * import MyScene from './my-scene.ce'
      *
      * export const sceneMap: RpgSceneMapHooks = {
-     *
+     *     component: MyScene
      * }
      *
      * defineModule<RpgClient>({
-     *      scenes: {
-     *          // If you put the RpgSceneMap scene, Thhe key is called mandatory `map`
-     *          map: sceneMap
-     *      }
+     *      sceneMap
      * })
      * ```
      *
-     * @prop { [sceneName: string]: RpgSceneMapHooks } [scenes]
+     * @prop {RpgSceneMapHooks} [sceneMap]
      * @memberof RpgClient
      * */
+    sceneMap?: RpgSceneMapHooks;
+    /**
+     * Legacy scene map hook container.
+     *
+     * Prefer `sceneMap` for new code.
+     */
     scenes?: {
         map: RpgSceneMapHooks;
     };
-    sceneMap?: RpgSceneMapHooks;
     /**
      * Array containing the list of component animations
      * Each element defines a temporary component to display for animations like hits, effects, etc.
@@ -642,5 +675,12 @@ export interface RpgClient {
         id: string;
         component: ComponentFunction;
     }[];
+    /**
+     * Client-side projectile rendering configuration.
+     *
+     * Register a CanvasEngine component per projectile type. The server sends
+     * compact spawn/impact/destroy events and the client predicts x/y locally.
+     */
+    projectiles?: RpgProjectileHooks;
 }
 export {};

package/dist/RpgClientEngine.d.ts

@@ -1,9 +1,11 @@
 import { Trigger } from 'canvasengine';
 import { AbstractWebsocket } from './services/AbstractSocket';
-import { Direction } from '@rpgjs/common';
+import { Direction, RpgActionInput, RpgActionName } from '@rpgjs/common';
 import { RpgClientMap } from './Game/Map';
 import { AnimationManager } from './Game/AnimationManager';
 import { Observable } from 'rxjs';
+import { ProjectileManager } from './Game/ProjectileManager';
+import { ClientPointerContext } from './services/pointerContext';
 import * as PIXI from "pixi.js";
 type ConfigurableTrigger<T> = Omit<Trigger<T>, "start"> & {
     start(config?: T): Promise<void>;
@@ -24,12 +26,15 @@ export declare class RpgClientEngine<T = any> {
     private selector;
     globalConfig: T;
     sceneComponent: any;
+    sceneMapComponent: any;
     stopProcessingInput: boolean;
     width: import('canvasengine').WritableSignal<string>;
     height: import('canvasengine').WritableSignal<string>;
     spritesheets: Map<string | number, any>;
     sounds: Map<string, any>;
     componentAnimations: any[];
+    projectiles: ProjectileManager;
+    pointer: ClientPointerContext;
     private spritesheetResolver?;
     private soundResolver?;
     particleSettings: {
@@ -56,6 +61,8 @@ export declare class RpgClientEngine<T = any> {
     private pendingPredictionFrames;
     private lastClientPhysicsStepAt;
     private frameOffset;
+    private latestServerTick?;
+    private latestServerTickAt;
     private rtt;
     private pingInterval;
     private readonly PING_INTERVAL_MS;
@@ -72,6 +79,9 @@ export declare class RpgClientEngine<T = any> {
     private sceneResetQueued;
     private tickSubscriptions;
     private resizeHandler?;
+    private pointerMoveHandler?;
+    private pointerCanvas?;
+    private pendingSyncPackets;
     private notificationManager;
     constructor(context: any);
     /**
@@ -109,9 +119,15 @@ export declare class RpgClientEngine<T = any> {
      */
     setKeyboardControls(controlInstance: any): void;
     start(): Promise<void>;
+    private resolveSceneMapComponent;
+    private setupPointerTracking;
+    private findViewportInstance;
     private prepareSyncPayload;
     private normalizeAckWithSyncState;
     private initListeners;
+    private callConnectError;
+    private flushPendingSyncPackets;
+    private applySyncPacket;
     /**
      * Start periodic ping/pong for client-server synchronization
      *
@@ -486,6 +502,8 @@ export declare class RpgClientEngine<T = any> {
      * @returns The CanvasEngine component, or undefined when missing
      */
     getSpriteComponent(id: string): any;
+    registerProjectileComponent(type: string, component: any): any;
+    getProjectileComponent(type: string): any;
     /**
      * Add a component animation to the engine
      *
@@ -564,14 +582,17 @@ export declare class RpgClientEngine<T = any> {
     processInput({ input }: {
         input: Direction;
     }): Promise<void>;
-    processAction({ action }: {
-        action: number;
-    }): void;
+    processAction(action: RpgActionName, data?: any): void;
+    processAction(action: RpgActionInput): void;
     get PIXI(): typeof PIXI;
     get socket(): AbstractWebsocket;
     get playerId(): string | null;
     get scene(): RpgClientMap;
     private getPhysicsTick;
+    private getPhysicsTickDurationMs;
+    private updateServerTickEstimate;
+    private estimateServerTick;
+    private predictProjectileImpact;
     private ensureCurrentPlayerBody;
     private stepClientPhysicsTick;
     private flushPendingPredictedStates;