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

package/dist/services/standalone.js.map

@@ -1 +1 @@
-{"version":3,"file":"standalone.js","names":[],"sources":["../../src/services/standalone.ts"],"sourcesContent":["import { AbstractWebsocket, SocketUpdateProperties, WebSocketToken } from \"./AbstractSocket\";\nimport { ClientIo, ServerIo } from \"@signe/room\";\nimport { Context } from \"@signe/di\";\nimport { RpgClientEngine } from \"../RpgClientEngine\";\nimport { UpdateMapService, UpdateMapToken } from \"@rpgjs/common\";\nimport { LoadMapToken } from \"./loadMap\";\nimport { RpgGui } from \"../Gui/Gui\";\nimport { provideKeyboardControls } from \"./keyboardControls\";\nimport { provideSaveClient } from \"./save\";\nimport { normalizeStandaloneMessage } from \"./standalone-message\";\n\ntype ServerIo = any;\ntype ClientIo = any;\n\ninterface StandaloneOptions {\n  env?: Record<string, any>;\n}\n\nclass BridgeWebsocket extends AbstractWebsocket {\n  private room: ServerIo;\n  private socket: ClientIo;\n  private pendingOn: Array<{ event: string; callback: (data: any) => void }> = [];\n  private rooms = {\n    partyFn: async (roomId: string) => {\n      this.room = new ServerIo(roomId, this.rooms);\n      const server = new this.server(this.room)\n      await server.onStart();\n      await server.subRoom.onStart()\n      this.context.set('server', server)\n      return server\n    },\n    env: {}\n  }\n  private serverInstance: any;\n\n  constructor(protected context: Context, private server: any, options: StandaloneOptions = {}) {\n    super(context);\n    // fake room\n    this.rooms.env = options.env || {};\n    this.room = new ServerIo(\"lobby-1\", this.rooms);\n  }\n\n  async connection(listeners?: (data: any) => void) {\n    this.serverInstance = new this.server(this.room);\n    await this.serverInstance.onStart();\n    await this.serverInstance.subRoom.onStart()\n    this.context.set('server', this.serverInstance)\n    return this._connection(listeners)\n  }\n\n  private async _connection(listeners?: (data: any) => void) {\n    this.serverInstance = this.context.get('server')\n    this.socket = new ClientIo(this.serverInstance, 'player-client-id');\n    const url = new URL('http://localhost')\n    const request = new Request(url.toString(), {\n      method: 'GET',\n      headers: {\n        'Content-Type': 'application/json'\n      }\n    })\n    listeners?.(this.socket)\n    this.room.clients.set(this.socket.id, this.socket);\n    this.pendingOn.forEach(({ event, callback }) => this.socket.addEventListener(event, callback));\n    this.pendingOn = [];\n    await this.serverInstance.onConnect(this.socket.conn as any, { request } as any);\n    return this.socket\n  }\n\n  on(key: string, callback: (data: any) => void) {\n    const handler = (event) => {\n      const object = normalizeStandaloneMessage(event);\n      if (object.type === key) {\n        callback(object.value);\n      }\n    };\n    if (!this.socket) {\n      this.pendingOn.push({ event: \"message\", callback: handler });\n      return;\n    }\n    this.socket.addEventListener(\"message\", handler);\n  }\n\n  off(event: string, callback: (data: any) => void) {\n    if (!this.socket) return;\n    this.socket.removeEventListener(event, callback);\n  }\n\n  emit(event: string, data: any) {\n    this.socket.send({\n      action: event,\n      value: data,\n    });\n  }\n\n  /**\n   * Update underlying connection properties before a reconnect\n   *\n   * Design\n   * - Dynamically register a factory for the requested room to ensure a fresh server instance\n   * - Swap the internal ServerIo to target the new room\n   *\n   * @param params - Properties to update\n   * @param params.room - The target room id (e.g. `map-simplemap2`)\n   *\n   * @example\n   * ```ts\n   * websocket.updateProperties({ room: 'map-simplemap2' })\n   * await websocket.reconnect()\n   * ```\n   */\n  updateProperties(_params: SocketUpdateProperties) {\n    // empty\n  }\n\n  /**\n   * Reconnect the client to the current Party room\n   *\n   * Design\n   * - Must be called after `updateProperties()` when switching rooms\n   * - Rebuilds the client <-> server bridge and re-triggers connection listeners\n   *\n   * @param listeners - Optional callback to re-bind event handlers on the new socket\n   *\n   * @example\n   * ```ts\n   * websocket.updateProperties({ room: 'map-dungeon' })\n   * await websocket.reconnect((socket) => {\n   *   // re-bind events here\n   * })\n   * ```\n   */\n  async reconnect(listeners?: (data: any) => void): Promise<void> {\n    await this._connection((socket) => {\n      listeners?.(socket)\n    })\n  }\n\n  getServer() {\n    return this.serverInstance\n  }\n\n  getSocket() {\n    return this.socket\n  }\n}\n\nclass UpdateMapStandaloneService extends UpdateMapService {\n  private server: any;\n\n  /**\n   * Update the current room map data on the server side\n   *\n   * Design\n   * - Uses the in-memory server instance stored in context (standalone mode)\n   * - Builds a local HTTP-like request to the current Party room endpoint\n   *\n   * @param map - The map payload to apply on the server\n   *\n   * @example\n   * ```ts\n   * await updateMapService.update({ width: 1024, height: 768, events: [] })\n   * ```\n   */\n  async update(map: any) {\n    this.server = this.context.get('server')\n    const roomId = this.server?.room?.id ?? 'lobby-1'\n    const req = {\n      url: `http://localhost/parties/main/${roomId}/map/update`,\n      method: 'POST',\n      headers: new Headers({}),\n      json: async () => {\n        return map;\n      }\n    };\n    await this.server.onRequest(req)\n  }\n}\n\nexport function provideRpg(server: any, options: StandaloneOptions = {}) {\n  return [\n    {\n      provide: WebSocketToken,\n      useFactory: (context: Context) => new BridgeWebsocket(context, server, options),\n    },\n    {\n      provide: UpdateMapToken,\n      useClass: UpdateMapStandaloneService,\n    },\n    provideKeyboardControls(),\n    provideSaveClient(),\n    RpgGui,\n    RpgClientEngine,\n  ];\n}\n"],"mappings":"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"}
+{"version":3,"file":"standalone.js","names":[],"sources":["../../src/services/standalone.ts"],"sourcesContent":["import { AbstractWebsocket, SocketUpdateProperties, WebSocketToken } from \"./AbstractSocket\";\nimport { ClientIo, ServerIo } from \"@signe/room\";\nimport { Context } from \"@signe/di\";\nimport { RpgClientEngine } from \"../RpgClientEngine\";\nimport { UpdateMapService, UpdateMapToken } from \"@rpgjs/common\";\nimport { LoadMapToken } from \"./loadMap\";\nimport { RpgGui } from \"../Gui/Gui\";\nimport { provideKeyboardControls } from \"./keyboardControls\";\nimport { provideSaveClient } from \"./save\";\nimport { normalizeStandaloneMessage } from \"./standalone-message\";\n\ntype ServerIo = any;\ntype ClientIo = any;\n\ninterface StandaloneOptions {\n  env?: Record<string, any>;\n}\n\nclass BridgeWebsocket extends AbstractWebsocket {\n  private room: ServerIo;\n  private socket: ClientIo;\n  private socketRoom?: ServerIo;\n  private listeners: Array<{\n    event: string;\n    callback: (data: any) => void;\n    handler: (event: any) => void;\n  }> = [];\n  private rooms = {\n    partyFn: async (roomId: string) => {\n      this.room = new ServerIo(roomId, this.rooms);\n      const server = new this.server(this.room)\n      await server.onStart();\n      await server.subRoom.onStart()\n      this.context.set('server', server)\n      return server\n    },\n    env: {}\n  }\n  private serverInstance: any;\n\n  constructor(protected context: Context, private server: any, options: StandaloneOptions = {}) {\n    super(context);\n    // fake room\n    this.rooms.env = options.env || {};\n    this.room = new ServerIo(\"lobby-1\", this.rooms);\n  }\n\n  async connection(listeners?: (data: any) => void) {\n    this.serverInstance = new this.server(this.room);\n    await this.serverInstance.onStart();\n    await this.serverInstance.subRoom.onStart()\n    this.context.set('server', this.serverInstance)\n    return this._connection(listeners)\n  }\n\n  private async _connection(listeners?: (data: any) => void) {\n    this.detachCurrentSocket();\n    this.serverInstance = this.context.get('server')\n    this.socket = new ClientIo(this.serverInstance, 'player-client-id');\n    const url = new URL('http://localhost')\n    const request = new Request(url.toString(), {\n      method: 'GET',\n      headers: {\n        'Content-Type': 'application/json'\n      }\n    })\n    listeners?.(this.socket)\n    this.room.clients.set(this.socket.id, this.socket);\n    this.socketRoom = this.room;\n    this.listeners.forEach(({ handler }) => {\n      this.socket.addEventListener(\"message\", handler);\n    });\n    await this.serverInstance.onConnect(this.socket.conn as any, { request } as any);\n    return this.socket\n  }\n\n  on(key: string, callback: (data: any) => void) {\n    if (\n      this.listeners.some(\n        (listener) => listener.event === key && listener.callback === callback\n      )\n    ) {\n      return;\n    }\n    const handler = (event) => {\n      const object = normalizeStandaloneMessage(event);\n      if (object.type === key) {\n        callback(object.value);\n      }\n    };\n    this.listeners.push({ event: key, callback, handler });\n    this.socket?.addEventListener(\"message\", handler);\n  }\n\n  off(event: string, callback: (data: any) => void) {\n    const remaining: typeof this.listeners = [];\n    for (const listener of this.listeners) {\n      if (listener.event === event && listener.callback === callback) {\n        this.socket?.removeEventListener(\"message\", listener.handler);\n        continue;\n      }\n      remaining.push(listener);\n    }\n    this.listeners = remaining;\n  }\n\n  emit(event: string, data: any) {\n    this.socket.send({\n      action: event,\n      value: data,\n    });\n  }\n\n  /**\n   * Update underlying connection properties before a reconnect\n   *\n   * Design\n   * - Dynamically register a factory for the requested room to ensure a fresh server instance\n   * - Swap the internal ServerIo to target the new room\n   *\n   * @param params - Properties to update\n   * @param params.room - The target room id (e.g. `map-simplemap2`)\n   *\n   * @example\n   * ```ts\n   * websocket.updateProperties({ room: 'map-simplemap2' })\n   * await websocket.reconnect()\n   * ```\n   */\n  updateProperties(_params: SocketUpdateProperties) {\n    // empty\n  }\n\n  /**\n   * Reconnect the client to the current Party room\n   *\n   * Design\n   * - Must be called after `updateProperties()` when switching rooms\n   * - Rebuilds the client <-> server bridge and re-triggers connection listeners\n   *\n   * @param listeners - Optional callback to re-bind event handlers on the new socket\n   *\n   * @example\n   * ```ts\n   * websocket.updateProperties({ room: 'map-dungeon' })\n   * await websocket.reconnect((socket) => {\n   *   // re-bind events here\n   * })\n   * ```\n   */\n  async reconnect(listeners?: (data: any) => void): Promise<void> {\n    await this._connection((socket) => {\n      listeners?.(socket)\n    })\n  }\n\n  private detachCurrentSocket() {\n    if (!this.socket) return;\n    this.listeners.forEach(({ handler }) => {\n      this.socket.removeEventListener(\"message\", handler);\n    });\n    this.socketRoom?.clients?.delete?.(this.socket.id);\n    this.socket = undefined as any;\n    this.socketRoom = undefined;\n  }\n\n  getServer() {\n    return this.serverInstance\n  }\n\n  getSocket() {\n    return this.socket\n  }\n}\n\nclass UpdateMapStandaloneService extends UpdateMapService {\n  private server: any;\n\n  /**\n   * Update the current room map data on the server side\n   *\n   * Design\n   * - Uses the in-memory server instance stored in context (standalone mode)\n   * - Builds a local HTTP-like request to the current Party room endpoint\n   *\n   * @param map - The map payload to apply on the server\n   *\n   * @example\n   * ```ts\n   * await updateMapService.update({ width: 1024, height: 768, events: [] })\n   * ```\n   */\n  async update(map: any) {\n    this.server = this.context.get('server')\n    const roomId = this.server?.room?.id ?? 'lobby-1'\n    const req = {\n      url: `http://localhost/parties/main/${roomId}/map/update`,\n      method: 'POST',\n      headers: new Headers({}),\n      json: async () => {\n        return map;\n      }\n    };\n    await this.server.onRequest(req)\n  }\n}\n\nexport function provideRpg(server: any, options: StandaloneOptions = {}) {\n  return [\n    {\n      provide: WebSocketToken,\n      useFactory: (context: Context) => new BridgeWebsocket(context, server, options),\n    },\n    {\n      provide: UpdateMapToken,\n      useClass: UpdateMapStandaloneService,\n    },\n    provideKeyboardControls(),\n    provideSaveClient(),\n    RpgGui,\n    RpgClientEngine,\n  ];\n}\n"],"mappings":";;;;;;;;;AAkBA,IAAM,kBAAN,cAA8B,kBAAkB;CAsB9C,YAAY,SAA4B,QAAqB,UAA6B,CAAC,GAAG;EAC5F,MAAM,OAAO;EADO,KAAA,UAAA;EAA0B,KAAA,SAAA;mBAd3C,CAAC;eACU;GACd,SAAS,OAAO,WAAmB;IACjC,KAAK,OAAO,IAAI,SAAS,QAAQ,KAAK,KAAK;IAC3C,MAAM,SAAS,IAAI,KAAK,OAAO,KAAK,IAAI;IACxC,MAAM,OAAO,QAAQ;IACrB,MAAM,OAAO,QAAQ,QAAQ;IAC7B,KAAK,QAAQ,IAAI,UAAU,MAAM;IACjC,OAAO;GACT;GACA,KAAK,CAAC;EACR;EAME,KAAK,MAAM,MAAM,QAAQ,OAAO,CAAC;EACjC,KAAK,OAAO,IAAI,SAAS,WAAW,KAAK,KAAK;CAChD;CAEA,MAAM,WAAW,WAAiC;EAChD,KAAK,iBAAiB,IAAI,KAAK,OAAO,KAAK,IAAI;EAC/C,MAAM,KAAK,eAAe,QAAQ;EAClC,MAAM,KAAK,eAAe,QAAQ,QAAQ;EAC1C,KAAK,QAAQ,IAAI,UAAU,KAAK,cAAc;EAC9C,OAAO,KAAK,YAAY,SAAS;CACnC;CAEA,MAAc,YAAY,WAAiC;EACzD,KAAK,oBAAoB;EACzB,KAAK,iBAAiB,KAAK,QAAQ,IAAI,QAAQ;EAC/C,KAAK,SAAS,IAAI,SAAS,KAAK,gBAAgB,kBAAkB;EAClE,MAAM,MAAM,IAAI,IAAI,kBAAkB;EACtC,MAAM,UAAU,IAAI,QAAQ,IAAI,SAAS,GAAG;GAC1C,QAAQ;GACR,SAAS,EACP,gBAAgB,mBAClB;EACF,CAAC;EACD,YAAY,KAAK,MAAM;EACvB,KAAK,KAAK,QAAQ,IAAI,KAAK,OAAO,IAAI,KAAK,MAAM;EACjD,KAAK,aAAa,KAAK;EACvB,KAAK,UAAU,SAAS,EAAE,cAAc;GACtC,KAAK,OAAO,iBAAiB,WAAW,OAAO;EACjD,CAAC;EACD,MAAM,KAAK,eAAe,UAAU,KAAK,OAAO,MAAa,EAAE,QAAQ,CAAQ;EAC/E,OAAO,KAAK;CACd;CAEA,GAAG,KAAa,UAA+B;EAC7C,IACE,KAAK,UAAU,MACZ,aAAa,SAAS,UAAU,OAAO,SAAS,aAAa,QAChE,GAEA;EAEF,MAAM,WAAW,UAAU;GACzB,MAAM,SAAS,2BAA2B,KAAK;GAC/C,IAAI,OAAO,SAAS,KAClB,SAAS,OAAO,KAAK;EAEzB;EACA,KAAK,UAAU,KAAK;GAAE,OAAO;GAAK;GAAU;EAAQ,CAAC;EACrD,KAAK,QAAQ,iBAAiB,WAAW,OAAO;CAClD;CAEA,IAAI,OAAe,UAA+B;EAChD,MAAM,YAAmC,CAAC;EAC1C,KAAK,MAAM,YAAY,KAAK,WAAW;GACrC,IAAI,SAAS,UAAU,SAAS,SAAS,aAAa,UAAU;IAC9D,KAAK,QAAQ,oBAAoB,WAAW,SAAS,OAAO;IAC5D;GACF;GACA,UAAU,KAAK,QAAQ;EACzB;EACA,KAAK,YAAY;CACnB;CAEA,KAAK,OAAe,MAAW;EAC7B,KAAK,OAAO,KAAK;GACf,QAAQ;GACR,OAAO;EACT,CAAC;CACH;;;;;;;;;;;;;;;;;CAkBA,iBAAiB,SAAiC,CAElD;;;;;;;;;;;;;;;;;;CAmBA,MAAM,UAAU,WAAgD;EAC9D,MAAM,KAAK,aAAa,WAAW;GACjC,YAAY,MAAM;EACpB,CAAC;CACH;CAEA,sBAA8B;EAC5B,IAAI,CAAC,KAAK,QAAQ;EAClB,KAAK,UAAU,SAAS,EAAE,cAAc;GACtC,KAAK,OAAO,oBAAoB,WAAW,OAAO;EACpD,CAAC;EACD,KAAK,YAAY,SAAS,SAAS,KAAK,OAAO,EAAE;EACjD,KAAK,SAAS,KAAA;EACd,KAAK,aAAa,KAAA;CACpB;CAEA,YAAY;EACV,OAAO,KAAK;CACd;CAEA,YAAY;EACV,OAAO,KAAK;CACd;AACF;AAEA,IAAM,6BAAN,cAAyC,iBAAiB;;;;;;;;;;;;;;;CAiBxD,MAAM,OAAO,KAAU;EACrB,KAAK,SAAS,KAAK,QAAQ,IAAI,QAAQ;EAEvC,MAAM,MAAM;GACV,KAAK,iCAFQ,KAAK,QAAQ,MAAM,MAAM,UAEO;GAC7C,QAAQ;GACR,SAAS,IAAI,QAAQ,CAAC,CAAC;GACvB,MAAM,YAAY;IAChB,OAAO;GACT;EACF;EACA,MAAM,KAAK,OAAO,UAAU,GAAG;CACjC;AACF;AAEA,SAAgB,WAAW,QAAa,UAA6B,CAAC,GAAG;CACvE,OAAO;EACL;GACE,SAAS;GACT,aAAa,YAAqB,IAAI,gBAAgB,SAAS,QAAQ,OAAO;EAChF;EACA;GACE,SAAS;GACT,UAAU;EACZ;EACA,wBAAwB;EACxB,kBAAkB;EAClB;EACA;CACF;AACF"}

package/dist/utils/mapId.d.ts

@@ -0,0 +1 @@
+export declare const normalizeRoomMapId: (mapId: string | undefined) => string | undefined;

package/dist/utils/mapId.js

@@ -0,0 +1,6 @@
+//#region src/utils/mapId.ts
+var normalizeRoomMapId = (mapId) => typeof mapId === "string" ? mapId.replace(/^map-/, "") : void 0;
+//#endregion
+export { normalizeRoomMapId };
+
+//# sourceMappingURL=mapId.js.map

package/dist/utils/mapId.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mapId.js","names":[],"sources":["../../src/utils/mapId.ts"],"sourcesContent":["export const normalizeRoomMapId = (mapId: string | undefined): string | undefined =>\n  typeof mapId === \"string\" ? mapId.replace(/^map-/, \"\") : undefined;\n"],"mappings":";AAAA,IAAa,sBAAsB,UACjC,OAAO,UAAU,WAAW,MAAM,QAAQ,SAAS,EAAE,IAAI,KAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpgjs/client",
-  "version": "5.0.0-beta.11",
+  "version": "5.0.0-beta.13",
   "description": "RPGJS is a framework for creating RPG/MMORPG games",
   "main": "dist/index.js",
   "types": "./dist/index.d.ts",
@@ -22,9 +22,9 @@
     "pixi.js": "^8.9.2"
   },
   "dependencies": {
-    "@rpgjs/common": "5.0.0-beta.11",
-    "@rpgjs/server": "5.0.0-beta.11",
-    "@rpgjs/ui-css": "5.0.0-beta.11",
+    "@rpgjs/common": "5.0.0-beta.13",
+    "@rpgjs/server": "5.0.0-beta.13",
+    "@rpgjs/ui-css": "5.0.0-beta.12",
     "@signe/di": "3.0.1",
     "@signe/room": "3.0.1",
     "@signe/sync": "3.0.1",

package/src/Game/AnimationManager.ts

@@ -4,6 +4,10 @@ import { signal } from "canvasengine";
 export class AnimationManager {
   current = signal<any[]>([]);
 
+  clear(): void {
+    this.current.set([]);
+  }
+
   displayEffect(params: any, player: RpgCommonPlayer | { x: number, y: number }): Promise<void> {
     const id = generateUID();
     const effectParams = params ?? {};

package/src/Game/ClientVisuals.spec.ts

@@ -0,0 +1,56 @@
+import { describe, expect, test, vi } from "vitest";
+import { ClientVisualRegistry } from "./ClientVisuals";
+
+describe("ClientVisualRegistry", () => {
+  test("plays registered visual handlers with resolved objects and helpers", async () => {
+    const target = {
+      flash: vi.fn(),
+      showHit: vi.fn(),
+      setAnimation: vi.fn(),
+    };
+    const componentAnimation = {
+      displayEffect: vi.fn(),
+    };
+    const engine = {
+      scene: {},
+      getObjectById: vi.fn(() => target),
+      getComponentAnimation: vi.fn(() => componentAnimation),
+      playSound: vi.fn().mockResolvedValue(undefined),
+      mapShakeTrigger: {
+        start: vi.fn(),
+      },
+    } as any;
+    const registry = new ClientVisualRegistry();
+
+    registry.register("hit", ({ target, data }, helpers) => {
+      helpers.flash(target, { type: "tint", tint: "red" });
+      helpers.showHit(target, `-${data.damage}`);
+      helpers.component("hit-spark", target, { scale: 2 });
+      helpers.sound("hit");
+      helpers.animation(target, "hurt");
+      helpers.shake({ intensity: 2 });
+    });
+
+    await registry.play(
+      {
+        name: "hit",
+        data: {
+          targetId: "enemy-1",
+          damage: 12,
+        },
+      },
+      engine
+    );
+
+    expect(engine.getObjectById).toHaveBeenCalledWith("enemy-1");
+    expect(target.flash).toHaveBeenCalledWith({ type: "tint", tint: "red" });
+    expect(target.showHit).toHaveBeenCalledWith("-12");
+    expect(componentAnimation.displayEffect).toHaveBeenCalledWith(
+      { scale: 2 },
+      target
+    );
+    expect(engine.playSound).toHaveBeenCalledWith("hit", undefined);
+    expect(target.setAnimation).toHaveBeenCalledWith("hurt", 1);
+    expect(engine.mapShakeTrigger.start).toHaveBeenCalledWith({ intensity: 2 });
+  });
+});

package/src/Game/ClientVisuals.ts

@@ -0,0 +1,184 @@
+import type { RpgClientEngine } from "../RpgClientEngine";
+import type { RpgClientMap } from "./Map";
+
+export type ClientVisualPosition = {
+  x: number;
+  y: number;
+  z?: number;
+};
+
+export type ClientVisualPayload = Record<string, any> & {
+  source?: string;
+  sourceId?: string;
+  target?: string;
+  targetId?: string;
+  object?: string;
+  objectId?: string;
+  position?: ClientVisualPosition;
+};
+
+export type ClientVisualPacket = {
+  name: string;
+  data?: ClientVisualPayload;
+};
+
+export type ClientVisualObjectTarget = string | Record<string, any> | undefined | null;
+export type ClientVisualComponentTarget =
+  | ClientVisualObjectTarget
+  | ClientVisualPosition;
+
+export type ClientVisualContext = {
+  name: string;
+  data: ClientVisualPayload;
+  engine: RpgClientEngine;
+  scene: RpgClientMap;
+  source?: any;
+  target?: any;
+  object?: any;
+  position?: ClientVisualPosition;
+};
+
+export type ClientVisualHelpers = {
+  getObject(id?: string | null): any;
+  flash(target?: ClientVisualObjectTarget, options?: Record<string, any>): void;
+  showHit(target: ClientVisualObjectTarget, text: string): void;
+  component(
+    id: string,
+    target?: ClientVisualComponentTarget,
+    params?: Record<string, any>
+  ): void;
+  sound(id: string, options?: { volume?: number; loop?: boolean }): Promise<void>;
+  animation(
+    target: ClientVisualObjectTarget,
+    animationName: string,
+    options?: { graphic?: string | string[]; repeat?: number }
+  ): void;
+  shake(options?: {
+    intensity?: number;
+    duration?: number;
+    frequency?: number;
+    direction?: string;
+  }): void;
+};
+
+export type ClientVisualHandler = (
+  context: ClientVisualContext,
+  helpers: ClientVisualHelpers
+) => void | Promise<void>;
+
+export type ClientVisualMap = Record<string, ClientVisualHandler>;
+
+const isPosition = (value: any): value is ClientVisualPosition =>
+  value &&
+  typeof value === "object" &&
+  typeof value.x === "number" &&
+  typeof value.y === "number";
+
+const resolvePosition = (data: ClientVisualPayload): ClientVisualPosition | undefined => {
+  if (isPosition(data.position)) return data.position;
+  if (typeof data.x === "number" && typeof data.y === "number") {
+    return { x: data.x, y: data.y, z: data.z };
+  }
+  return undefined;
+};
+
+const resolveObject = (engine: RpgClientEngine, target: ClientVisualObjectTarget) => {
+  if (!target) return undefined;
+  if (typeof target === "string") return engine.getObjectById(target);
+  return target;
+};
+
+const resolvePayloadObject = (
+  engine: RpgClientEngine,
+  data: ClientVisualPayload,
+  keys: string[]
+) => {
+  const id = keys
+    .map((key) => data[key])
+    .find((value) => typeof value === "string");
+  return resolveObject(engine, id);
+};
+
+const createClientVisualHelpers = (
+  engine: RpgClientEngine
+): ClientVisualHelpers => ({
+  getObject(id) {
+    if (!id) return undefined;
+    return engine.getObjectById(id);
+  },
+  flash(target, options = {}) {
+    const object = resolveObject(engine, target);
+    object?.flash?.(options);
+  },
+  showHit(target, text) {
+    const object = resolveObject(engine, target);
+    object?.showHit?.(text);
+  },
+  component(id, target, params = {}) {
+    const object = isPosition(target) ? undefined : resolveObject(engine, target);
+    const position = isPosition(target) ? target : undefined;
+    const anchor = object ?? position;
+    if (!anchor) return;
+    engine.getComponentAnimation(id).displayEffect(params, anchor);
+  },
+  sound(id, options) {
+    return engine.playSound(id, options);
+  },
+  animation(target, animationName, options = {}) {
+    const object = resolveObject(engine, target);
+    if (!object?.setAnimation) return;
+    if (options.graphic !== undefined) {
+      object.setAnimation(animationName, options.graphic, options.repeat ?? 1);
+      return;
+    }
+    object.setAnimation(animationName, options.repeat ?? 1);
+  },
+  shake(options = {}) {
+    engine.mapShakeTrigger.start(options);
+  },
+});
+
+export class ClientVisualRegistry {
+  private readonly handlers = new Map<string, ClientVisualHandler>();
+
+  register(name: string, handler: ClientVisualHandler) {
+    this.handlers.set(name, handler);
+    return handler;
+  }
+
+  registerMany(visuals: ClientVisualMap) {
+    Object.entries(visuals).forEach(([name, handler]) => {
+      this.register(name, handler);
+    });
+  }
+
+  get(name: string) {
+    return this.handlers.get(name);
+  }
+
+  async play(packet: ClientVisualPacket, engine: RpgClientEngine) {
+    const handler = this.handlers.get(packet.name);
+    if (!handler) {
+      console.warn(`Client visual "${packet.name}" is not registered`);
+      return;
+    }
+
+    const data = packet.data ?? {};
+    const context: ClientVisualContext = {
+      name: packet.name,
+      data,
+      engine,
+      scene: engine.scene,
+      source: resolvePayloadObject(engine, data, ["sourceId", "source"]),
+      target: resolvePayloadObject(engine, data, ["targetId", "target"]),
+      object: resolvePayloadObject(engine, data, ["objectId", "object"]),
+      position: resolvePosition(data),
+    };
+
+    try {
+      await handler(context, createClientVisualHelpers(engine));
+    } catch (error) {
+      console.error(`Client visual "${packet.name}" failed`, error);
+    }
+  }
+}

package/src/Game/EventComponentResolver.spec.ts

@@ -0,0 +1,84 @@
+import { describe, expect, test } from "vitest";
+import { EventComponentResolverRegistry, normalizeEventComponent } from "./EventComponentResolver";
+
+describe("EventComponentResolverRegistry", () => {
+  test("uses the last resolver returning a custom event component", () => {
+    const registry = new EventComponentResolverRegistry();
+    const firstComponent = (() => null) as any;
+    const secondComponent = (() => null) as any;
+    const event = { id: "event-1" } as any;
+
+    registry.add(() => firstComponent);
+    registry.add(() => null);
+    registry.add(() => ({ component: secondComponent, props: { variant: "open" } }));
+
+    expect(registry.resolve(event)).toEqual({
+      component: secondComponent,
+      props: { variant: "open" }
+    });
+  });
+
+  test("returns null when no resolver matches", () => {
+    const registry = new EventComponentResolverRegistry();
+
+    registry.add(() => undefined);
+    registry.add(() => null);
+
+    expect(registry.resolve({ id: "event-1" } as any)).toBeNull();
+  });
+
+  test("can clear registered resolvers", () => {
+    const registry = new EventComponentResolverRegistry();
+    const component = (() => null) as any;
+
+    registry.add(() => component);
+    registry.clear();
+
+    expect(registry.resolve({ id: "event-1" } as any)).toBeNull();
+  });
+
+  test("always injects the real sprite prop for direct components", () => {
+    const component = (() => null) as any;
+    const sprite = { id: "event-1" } as any;
+
+    expect(normalizeEventComponent(component, sprite)).toEqual({
+      component,
+      props: { sprite },
+      dependencies: [],
+      renderGraphic: false
+    });
+  });
+
+  test("keeps custom props from replacing the sprite prop", () => {
+    const component = (() => null) as any;
+    const sprite = { id: "real-event" } as any;
+    const spoofedSprite = { id: "spoofed-event" };
+
+    const normalized = normalizeEventComponent({
+      component,
+      props: { sprite: spoofedSprite, variant: "wood" },
+      dependencies: () => ["ready"],
+      renderGraphic: true
+    }, sprite);
+
+    expect(normalized).toEqual({
+      component,
+      props: { variant: "wood", sprite },
+      dependencies: ["ready"],
+      renderGraphic: true
+    });
+  });
+
+  test("supports dynamic props", () => {
+    const component = (() => null) as any;
+    const sprite = { id: "event-1", name: "CHEST" } as any;
+
+    expect(normalizeEventComponent({
+      component,
+      props: (event) => ({ label: (event as any).name })
+    }, sprite)?.props).toEqual({
+      label: "CHEST",
+      sprite
+    });
+  });
+});

package/src/Game/EventComponentResolver.ts

@@ -0,0 +1,74 @@
+import type { EventComponentConfig, EventComponentSprite } from "../RpgClient";
+import type { RpgClientEvent } from "./Event";
+
+export type EventComponentResolver = (event: EventComponentSprite) => EventComponentConfig | null | undefined;
+
+export interface NormalizedEventComponentConfig {
+  component: any;
+  props: Record<string, any>;
+  dependencies: any[];
+  renderGraphic: boolean;
+}
+
+export class EventComponentResolverRegistry {
+  private resolvers: EventComponentResolver[] = [];
+
+  add(resolver: EventComponentResolver) {
+    this.resolvers.push(resolver);
+    return resolver;
+  }
+
+  resolve(event: RpgClientEvent): EventComponentConfig | null {
+    let resolved: EventComponentConfig | null = null;
+    this.resolvers.forEach((resolver) => {
+      const result = resolver(event as EventComponentSprite);
+      if (result !== undefined && result !== null) {
+        resolved = result;
+      }
+    });
+    return resolved;
+  }
+
+  clear() {
+    this.resolvers = [];
+  }
+}
+
+function withoutReservedSpriteProp(props: unknown): Record<string, any> {
+  if (!props || typeof props !== "object") return {};
+  const { sprite: _ignoredSprite, ...safeProps } = props as Record<string, any>;
+  return safeProps;
+}
+
+export function normalizeEventComponent(
+  componentConfig: EventComponentConfig | null | undefined,
+  sprite: RpgClientEvent
+): NormalizedEventComponentConfig | null {
+  if (!componentConfig) return null;
+
+  if (typeof componentConfig === "object" && "component" in componentConfig) {
+    const propsValue = componentConfig.props !== undefined
+      ? componentConfig.props
+      : componentConfig.data;
+    const props = typeof propsValue === "function"
+      ? propsValue(sprite as EventComponentSprite)
+      : propsValue;
+
+    return {
+      component: componentConfig.component,
+      props: {
+        ...withoutReservedSpriteProp(props),
+        sprite
+      },
+      dependencies: componentConfig.dependencies ? componentConfig.dependencies(sprite as EventComponentSprite) : [],
+      renderGraphic: componentConfig.renderGraphic === true
+    };
+  }
+
+  return {
+    component: componentConfig,
+    props: { sprite },
+    dependencies: [],
+    renderGraphic: false
+  };
+}

package/src/Game/Map.ts

@@ -88,6 +88,16 @@ export class RpgClientMap extends RpgCommonMap<any> {
     const currentPlayer = !force && currentPlayerId
       ? this.players()[currentPlayerId]
       : undefined;
+    const players = this.players();
+    const events = this.events();
+
+    Object.entries(players).forEach(([id, player]) => {
+      if (!player || (!force && id === currentPlayerId)) return;
+      (player as any).resetAnimationState?.();
+    });
+    Object.values(events).forEach((event) => {
+      (event as any)?.resetAnimationState?.();
+    });
 
     this.players.set(
       currentPlayerId && currentPlayer ? { [currentPlayerId]: currentPlayer } : {}

package/src/Game/Object.spec.ts

@@ -0,0 +1,59 @@
+import { describe, expect, test, vi } from "vitest";
+import { signal } from "canvasengine";
+import { appendFramePayload, RpgClientObject, withGraphicDisplayScale } from "./Object";
+
+vi.mock("../RpgClientEngine", () => ({
+  RpgClientEngine: class RpgClientEngine {},
+}));
+
+vi.mock("../core/inject", () => ({
+  inject: () => ({}),
+}));
+
+function createObject() {
+  const object = Object.create(RpgClientObject.prototype) as RpgClientObject;
+  object.animationName = signal("stand");
+  object.graphics = signal(["hero"]) as any;
+  object.animationCurrentIndex = signal(0);
+  object.animationIsPlaying = signal(false);
+  return object;
+}
+
+describe("RpgClientObject animations", () => {
+  test("accepts a single frame payload without requiring iterable spread", () => {
+    expect(
+      appendFramePayload({ stale: true }, { x: 10, y: 20, ts: 1 }),
+    ).toEqual([{ x: 10, y: 20, ts: 1 }]);
+  });
+
+  test("keeps instance scale outside the spritesheet transform scale", () => {
+    expect(withGraphicDisplayScale({ id: "hero" }, 0.5)).toEqual({
+      id: "hero",
+      displayScale: 0.5,
+    });
+  });
+
+  test("marks temporary animation as finished before restoring locomotion animation", async () => {
+    const object = createObject();
+    const animationChanges: Array<{ name: string; isPlaying: boolean }> = [];
+
+    object.animationName.observable.subscribe((name) => {
+      animationChanges.push({
+        name,
+        isPlaying: object.animationIsPlaying(),
+      });
+    });
+
+    const done = object.setAnimation("attack", 1, { timeoutMs: 10000 });
+    object.animationCurrentIndex.set(1);
+
+    await done;
+
+    expect(object.animationName()).toBe("stand");
+    expect(object.animationIsPlaying()).toBe(false);
+    expect(animationChanges).toContainEqual({
+      name: "stand",
+      isPlaying: false,
+    });
+  });
+});

package/src/Game/Object.ts

@@ -1,6 +1,6 @@
 import { Hooks, ModulesToken, RpgCommonPlayer } from "@rpgjs/common";
 import { trigger, signal, type Trigger } from "canvasengine";
-import { from, map, of, Subscription, switchMap } from "rxjs";
+import { combineLatest, from, map, of, startWith, Subscription, switchMap } from "rxjs";
 import { inject } from "../core/inject";
 import { RpgClientEngine } from "../RpgClientEngine";
 type Frame = { x: number; y: number; ts: number };
@@ -29,6 +29,24 @@ type ConfigurableTrigger<T> = Omit<Trigger<T>, "start"> & {
   start(config?: T): Promise<void>;
 };
 
+export const withGraphicDisplayScale = (spritesheet: any, scale: unknown): any => {
+  if (!spritesheet || typeof spritesheet !== "object") return spritesheet;
+  if (scale === undefined || scale === null) return spritesheet;
+  return {
+    ...spritesheet,
+    displayScale: scale,
+  };
+};
+
+export const appendFramePayload = (current: unknown, items: unknown): Frame[] => {
+  const frameItems = Array.isArray(items) ? items : items ? [items] : [];
+  const nextFrames = frameItems.flatMap((item): Frame[] =>
+    Array.isArray(item) ? item : [item as Frame]
+  );
+  const currentFrames = Array.isArray(current) ? current as Frame[] : [];
+  return currentFrames.concat(nextFrames);
+};
+
 export abstract class RpgClientObject extends RpgCommonPlayer {
   abstract _type: string;
   emitParticleTrigger = trigger();
@@ -51,18 +69,24 @@ export abstract class RpgClientObject extends RpgCommonPlayer {
     this._frames.observable.subscribe(({ items }) => {
       if (!this.id) return;
       //if (this.id == this.engine.playerIdSignal()!) return;
-      const nextFrames = items.flatMap((item): Frame[] =>
-        Array.isArray(item) ? item : [item]
-      );
-      this.frames = [...this.frames, ...nextFrames];
+      this.frames = appendFramePayload(this.frames, items);
     });
 
-    this.graphics.observable
+    const graphics$ = this.graphics.observable.pipe(map(({ items }) => items));
+    const graphicScale$ = this._graphicScale.observable.pipe(
+      startWith({ value: this._graphicScale() }),
+      map((payload: any) => payload?.value ?? payload),
+    );
+
+    combineLatest([graphics$, graphicScale$])
     .pipe(
-      map(({ items }) => items),
-      switchMap(graphics => {
-        if (graphics.length === 0) return of([]);
-        return from(Promise.all(graphics.map(graphic => this.engine.getSpriteSheet(graphic))));
+      switchMap(([graphics, scale]) => {
+        const graphicRefs = Array.isArray(graphics) ? graphics : [];
+        if (graphicRefs.length === 0) return of([]);
+        return from(Promise.all(graphicRefs.map(async (graphic) => {
+          const spritesheet = await this.engine.getSpriteSheet(graphic);
+          return withGraphicDisplayScale(spritesheet, scale);
+        })));
       })
     )
     .subscribe((sheets) => {  
@@ -130,12 +154,12 @@ export abstract class RpgClientObject extends RpgCommonPlayer {
     const restoreState = this.animationRestoreState;
     this.clearAnimationControls();
     this.animationCurrentIndex.set(0);
+    this.animationRestoreState = undefined;
+    this.animationIsPlaying.set(false);
     if (restoreState) {
       this.animationName.set(restoreState.animationName);
       this.graphics.set([...restoreState.graphics]);
     }
-    this.animationRestoreState = undefined;
-    this.animationIsPlaying.set(false);
     this.resolveAnimationWait();
   }