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

package/dist/Game/ProjectileManager.js

@@ -0,0 +1,196 @@
+import { normalizeRoomMapId } from "../utils/mapId.js";
+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);
+	}
+	setMapId(mapId) {
+		const normalizedMapId = normalizeRoomMapId(mapId);
+		if (this.mapId === normalizedMapId) return;
+		this.mapId = normalizedMapId;
+		this.clear();
+	}
+	getMapId() {
+		return this.mapId;
+	}
+	spawnBatch(projectiles, clock = {}) {
+		if (!this.acceptsMap(clock.mapId)) return;
+		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, context = {}) {
+		if (!this.acceptsMap(context.mapId)) return;
+		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, context = {}) {
+		if (!this.acceptsMap(context.mapId)) return;
+		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
+		};
+	}
+	acceptsMap(mapId) {
+		const normalizedMapId = normalizeRoomMapId(mapId);
+		return !normalizedMapId || !this.mapId || normalizedMapId === this.mapId;
+	}
+	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\";\nimport { normalizeRoomMapId } from \"../utils/mapId\";\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  mapId?: string;\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  private mapId?: string;\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  setMapId(mapId: string | undefined): void {\n    const normalizedMapId = normalizeRoomMapId(mapId);\n    if (this.mapId === normalizedMapId) return;\n    this.mapId = normalizedMapId;\n    this.clear();\n  }\n\n  getMapId(): string | undefined {\n    return this.mapId;\n  }\n\n  spawnBatch(projectiles: ClientProjectileSpawn[], clock: ProjectileSpawnClock = {}): void {\n    if (!this.acceptsMap(clock.mapId)) return;\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[], context: { mapId?: string } = {}): void {\n    if (!this.acceptsMap(context.mapId)) return;\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[], context: { mapId?: string } = {}): void {\n    if (!this.acceptsMap(context.mapId)) return;\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 acceptsMap(mapId: string | undefined): boolean {\n    const normalizedMapId = normalizeRoomMapId(mapId);\n    return !normalizedMapId || !this.mapId || normalizedMapId === this.mapId;\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,10 @@ 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 { RpgClientEvent } from './Game/Event';
+import { MapPhysicsEntityContext, MapPhysicsInitContext, RpgActionName } from '@rpgjs/common';
+import { ClientProjectileSpawn, RenderedProjectileProps } from './Game/ProjectileManager';
+import { ClientVisualMap } from './Game/ClientVisuals';
 type RpgComponent = RpgClientObject;
 type SceneMap = Container;
 export type SpriteComponentConfig = ComponentFunction | {
@@ -11,6 +14,14 @@ export type SpriteComponentConfig = ComponentFunction | {
     data?: Record<string, any> | ((object: RpgClientObject) => Record<string, any>);
     dependencies?: (object: RpgClientObject) => any[];
 };
+export type EventComponentSprite = RpgClientEvent & Record<string, any>;
+export type EventComponentConfig = ComponentFunction | {
+    component: ComponentFunction;
+    props?: Record<string, any> | ((event: EventComponentSprite) => Record<string, any>);
+    data?: Record<string, any> | ((event: EventComponentSprite) => Record<string, any>);
+    dependencies?: (event: EventComponentSprite) => any[];
+    renderGraphic?: boolean;
+};
 export interface RpgSpriteBeforeRemoveContext {
     reason?: string;
     data?: any;
@@ -40,15 +51,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 +76,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
@@ -126,6 +141,30 @@ export interface RpgSpriteHooks {
      * ```
      */
     components?: Record<string, ComponentFunction>;
+    /**
+     * Resolve a custom CanvasEngine component for a specific event.
+     *
+     * The component always receives the synced event object as the `sprite` prop.
+     * Custom props are merged in addition to `sprite`, but cannot replace it.
+     * Return `null` or `undefined` to keep the default graphic renderer.
+     *
+     * @prop { (event: EventComponentSprite) => EventComponentConfig | null | undefined } [eventComponent]
+     * @memberof RpgSpriteHooks
+     * @example
+     * ```ts
+     * import ChestEvent from './components/chest-event.ce'
+     *
+     * const sprite: RpgSpriteHooks = {
+     *   eventComponent(sprite) {
+     *     if (sprite.name === 'CHEST') {
+     *       return ChestEvent
+     *     }
+     *     return null
+     *   }
+     * }
+     * ```
+     */
+    eventComponent?: (event: EventComponentSprite) => EventComponentConfig | null | undefined;
     /**
      * As soon as the sprite is initialized
      *
@@ -222,6 +261,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 +307,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 +652,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 +709,42 @@ export interface RpgClient {
         id: string;
         component: ComponentFunction;
     }[];
+    /**
+     * Named client-side visual macros.
+     *
+     * Use client visuals when the server needs to trigger a group of existing
+     * client visual primitives at once, such as a flash, damage text, sound,
+     * component animation, and camera shake. The server sends only the visual
+     * name and a serializable payload; the rendering details live on the client.
+     *
+     * For a single sound, flash, or component animation, prefer the direct
+     * server APIs (`playSound`, `flash`, `showComponentAnimation`). Client
+     * visuals are meant to group several visual operations and reduce bandwidth.
+     *
+     * ```ts
+     * import { defineModule, RpgClient } from '@rpgjs/client'
+     *
+     * export default defineModule<RpgClient>({
+     *   clientVisuals: {
+     *     hit({ target, data }, helpers) {
+     *       helpers.flash(target, { type: 'tint', tint: 'red' })
+     *       helpers.showHit(target, `-${data.damage}`)
+     *       helpers.sound('hit')
+     *     }
+     *   }
+     * })
+     * ```
+     *
+     * @prop {Record<string, ClientVisualHandler>} [clientVisuals]
+     * @memberof RpgClient
+     */
+    clientVisuals?: ClientVisualMap;
+    /**
+     * 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,15 @@
 import { Trigger } from 'canvasengine';
 import { AbstractWebsocket } from './services/AbstractSocket';
-import { Direction } from '@rpgjs/common';
+import { Direction, RpgActionInput, RpgActionName } from '@rpgjs/common';
+import { EventComponentConfig } from './RpgClient';
+import { RpgClientEvent } from './Game/Event';
 import { RpgClientMap } from './Game/Map';
 import { AnimationManager } from './Game/AnimationManager';
 import { Observable } from 'rxjs';
+import { ProjectileManager } from './Game/ProjectileManager';
+import { ClientVisualRegistry, ClientVisualHandler, ClientVisualMap, ClientVisualPacket } from './Game/ClientVisuals';
+import { ClientPointerContext } from './services/pointerContext';
+import { EventComponentResolver } from './Game/EventComponentResolver';
 import * as PIXI from "pixi.js";
 type ConfigurableTrigger<T> = Omit<Trigger<T>, "start"> & {
     start(config?: T): Promise<void>;
@@ -24,12 +30,16 @@ 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[];
+    clientVisuals: ClientVisualRegistry;
+    projectiles: ProjectileManager;
+    pointer: ClientPointerContext;
     private spritesheetResolver?;
     private soundResolver?;
     particleSettings: {
@@ -43,6 +53,7 @@ export declare class RpgClientEngine<T = any> {
     spriteComponentsBehind: import('canvasengine').WritableArraySignal<any[]>;
     spriteComponentsInFront: import('canvasengine').WritableArraySignal<any[]>;
     spriteComponents: Map<string, any>;
+    private eventComponentResolvers;
     /** ID of the sprite that the camera should follow. null means follow the current player */
     cameraFollowTargetId: import('canvasengine').WritableSignal<string | null>;
     /** Trigger for map shake animation */
@@ -56,6 +67,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;
@@ -70,8 +83,14 @@ export declare class RpgClientEngine<T = any> {
     private eventsReceived$;
     private onAfterLoadingSubscription?;
     private sceneResetQueued;
+    private mapTransitionInProgress;
+    private currentMapRoomId?;
+    private socketListenersInitialized;
     private tickSubscriptions;
     private resizeHandler?;
+    private pointerMoveHandler?;
+    private pointerCanvas?;
+    private pendingSyncPackets;
     private notificationManager;
     constructor(context: any);
     /**
@@ -109,9 +128,18 @@ 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 beginMapTransfer;
+    private clearComponentAnimations;
+    private shouldProcessProjectilePacket;
+    private callConnectError;
+    private flushPendingSyncPackets;
+    private applySyncPacket;
     /**
      * Start periodic ping/pong for client-server synchronization
      *
@@ -486,6 +514,52 @@ export declare class RpgClientEngine<T = any> {
      * @returns The CanvasEngine component, or undefined when missing
      */
     getSpriteComponent(id: string): any;
+    /**
+     * Register a custom event component resolver.
+     *
+     * The last resolver returning a component wins. This lets later modules
+     * override earlier defaults without replacing the whole map scene.
+     *
+     * @param resolver - Function receiving the synced event object
+     * @returns The registered resolver
+     */
+    addEventComponentResolver(resolver: EventComponentResolver): EventComponentResolver;
+    /**
+     * Resolve the custom CanvasEngine component for an event, if any.
+     *
+     * @param event - Synced client event object
+     * @returns The component/config returned by the last matching resolver
+     */
+    resolveEventComponent(event: RpgClientEvent): EventComponentConfig | null;
+    registerProjectileComponent(type: string, component: any): any;
+    getProjectileComponent(type: string): any;
+    /**
+     * Register a named client visual macro.
+     *
+     * Client visuals are small client-side functions that group existing visual
+     * primitives such as flash, sound, component animations, sprite animation, or
+     * map shake. The server sends only the visual name and a serializable payload.
+     *
+     * @param name - Stable visual name sent by the server
+     * @param handler - Client-side visual handler
+     * @returns The registered handler
+     */
+    registerClientVisual(name: string, handler: ClientVisualHandler): ClientVisualHandler;
+    /**
+     * Register several named client visual macros.
+     *
+     * @param visuals - Map of visual names to client-side handlers
+     */
+    registerClientVisuals(visuals: ClientVisualMap): void;
+    /**
+     * Play a registered client visual locally.
+     *
+     * This is also used by the websocket listener when the server calls
+     * `player.clientVisual()` or `map.clientVisual()`.
+     *
+     * @param packet - Visual name and serializable payload
+     */
+    playClientVisual(packet: ClientVisualPacket): Promise<void>;
     /**
      * Add a component animation to the engine
      *
@@ -564,14 +638,18 @@ 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;
+    getObjectById(id: string): any;
     private getPhysicsTick;
+    private getPhysicsTickDurationMs;
+    private updateServerTickEstimate;
+    private estimateServerTick;
+    private predictProjectileImpact;
     private ensureCurrentPlayerBody;
     private stepClientPhysicsTick;
     private flushPendingPredictedStates;