@rpgjs/client 5.0.0-beta.5 → 5.0.0-beta.7

package/dist/Gui/NotificationManager.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationManager.js","names":[],"sources":["../../src/Gui/NotificationManager.ts"],"sourcesContent":["import { signal, animatedSignal } from \"canvasengine\";\n\nexport type NotificationType = \"info\" | \"warn\" | \"error\";\n\nexport interface NotificationPayload {\n  message: string;\n  type?: NotificationType;\n  icon?: string;\n  time?: number;\n  sound?: string;\n}\n\nexport interface NotificationItem extends NotificationPayload {\n  id: number;\n  opacity: any;\n  offset: any;\n  layoutY: any;\n  removing: boolean;\n}\n\nconst DEFAULT_DURATION = 220;\n\nexport class NotificationManager {\n  stack = signal<NotificationItem[]>([]);\n  private _counter = 0;\n\n  add(payload: NotificationPayload, engine?: { playSound?: (id: string) => void }) {\n    const id = ++this._counter;\n    const opacity = animatedSignal(0, { duration: DEFAULT_DURATION });\n    const offset = animatedSignal(12, { duration: DEFAULT_DURATION });\n    const layoutY = animatedSignal(0, { duration: DEFAULT_DURATION });\n    const item: NotificationItem = {\n      id,\n      message: payload.message,\n      type: payload.type || \"info\",\n      icon: payload.icon,\n      time: payload.time,\n      sound: payload.sound,\n      opacity,\n      offset,\n      layoutY,\n      removing: false,\n    };\n    this.stack.update((list) => [...list, item]);\n    opacity.set(1);\n    offset.set(0);\n\n    if (payload.sound && engine?.playSound) {\n      engine.playSound(payload.sound);\n    }\n\n    const delay = typeof payload.time === \"number\" ? payload.time : 2000;\n    setTimeout(() => {\n      this.remove(id);\n    }, delay);\n  }\n\n  remove(id: number) {\n    const list = this.stack();\n    const item = list.find((it) => it.id === id);\n    if (!item || item.removing) return;\n    item.removing = true;\n    item.opacity.set(0);\n    item.offset.set(-8);\n    setTimeout(() => {\n      this.stack.update((items) => items.filter((it) => it.id !== id));\n    }, DEFAULT_DURATION);\n  }\n}\n"],"mappings":";;AAoBA,IAAM,mBAAmB;AAEzB,IAAa,sBAAb,MAAiC;;eACvB,OAA2B,EAAE,CAAC;kBACnB;;CAEnB,IAAI,SAA8B,QAA+C;EAC/E,MAAM,KAAK,EAAE,KAAK;EAClB,MAAM,UAAU,eAAe,GAAG,EAAE,UAAU,kBAAkB,CAAC;EACjE,MAAM,SAAS,eAAe,IAAI,EAAE,UAAU,kBAAkB,CAAC;EACjE,MAAM,UAAU,eAAe,GAAG,EAAE,UAAU,kBAAkB,CAAC;EACjE,MAAM,OAAyB;GAC7B;GACA,SAAS,QAAQ;GACjB,MAAM,QAAQ,QAAQ;GACtB,MAAM,QAAQ;GACd,MAAM,QAAQ;GACd,OAAO,QAAQ;GACf;GACA;GACA;GACA,UAAU;GACX;AACD,OAAK,MAAM,QAAQ,SAAS,CAAC,GAAG,MAAM,KAAK,CAAC;AAC5C,UAAQ,IAAI,EAAE;AACd,SAAO,IAAI,EAAE;AAEb,MAAI,QAAQ,SAAS,QAAQ,UAC3B,QAAO,UAAU,QAAQ,MAAM;EAGjC,MAAM,QAAQ,OAAO,QAAQ,SAAS,WAAW,QAAQ,OAAO;AAChE,mBAAiB;AACf,QAAK,OAAO,GAAG;KACd,MAAM;;CAGX,OAAO,IAAY;EAEjB,MAAM,OADO,KAAK,OACL,CAAK,MAAM,OAAO,GAAG,OAAO,GAAG;AAC5C,MAAI,CAAC,QAAQ,KAAK,SAAU;AAC5B,OAAK,WAAW;AAChB,OAAK,QAAQ,IAAI,EAAE;AACnB,OAAK,OAAO,IAAI,GAAG;AACnB,mBAAiB;AACf,QAAK,MAAM,QAAQ,UAAU,MAAM,QAAQ,OAAO,GAAG,OAAO,GAAG,CAAC;KAC/D,iBAAiB"}
+{"version":3,"file":"NotificationManager.js","names":[],"sources":["../../src/Gui/NotificationManager.ts"],"sourcesContent":["import { signal, animatedSignal } from \"canvasengine\";\n\nexport type NotificationType = \"info\" | \"warn\" | \"error\";\n\nexport interface NotificationPayload {\n  message: string;\n  type?: NotificationType;\n  icon?: string;\n  time?: number;\n  sound?: string;\n}\n\nexport interface NotificationItem extends NotificationPayload {\n  id: number;\n  opacity: any;\n  offset: any;\n  layoutY: any;\n  removing: boolean;\n}\n\nconst DEFAULT_DURATION = 220;\n\nexport class NotificationManager {\n  stack = signal<NotificationItem[]>([]);\n  private _counter = 0;\n\n  add(payload: NotificationPayload, engine?: { playSound?: (id: string) => void }) {\n    const id = ++this._counter;\n    const opacity = animatedSignal(0, { duration: DEFAULT_DURATION });\n    const offset = animatedSignal(12, { duration: DEFAULT_DURATION });\n    const layoutY = animatedSignal(0, { duration: DEFAULT_DURATION });\n    const item: NotificationItem = {\n      id,\n      message: payload.message,\n      type: payload.type || \"info\",\n      icon: payload.icon,\n      time: payload.time,\n      sound: payload.sound,\n      opacity,\n      offset,\n      layoutY,\n      removing: false,\n    };\n    this.stack.update((list) => [...list, item]);\n    opacity.set(1);\n    offset.set(0);\n\n    if (payload.sound && engine?.playSound) {\n      engine.playSound(payload.sound);\n    }\n\n    const delay = typeof payload.time === \"number\" ? payload.time : 2000;\n    setTimeout(() => {\n      this.remove(id);\n    }, delay);\n  }\n\n  remove(id: number) {\n    const list = this.stack();\n    const item = list.find((it) => it.id === id);\n    if (!item || item.removing) return;\n    item.removing = true;\n    item.opacity.set(0);\n    item.offset.set(-8);\n    setTimeout(() => {\n      this.stack.update((items) => items.filter((it) => it.id !== id));\n    }, DEFAULT_DURATION);\n  }\n}\n"],"mappings":";;AAoBA,IAAM,mBAAmB;AAEzB,IAAa,sBAAb,MAAiC;;eACvB,OAA2B,EAAE,CAAC;kBACnB;;CAEnB,IAAI,SAA8B,QAA+C;EAC/E,MAAM,KAAK,EAAE,KAAK;EAClB,MAAM,UAAU,eAAe,GAAG,EAAE,UAAU,kBAAkB,CAAC;EACjE,MAAM,SAAS,eAAe,IAAI,EAAE,UAAU,kBAAkB,CAAC;EACjE,MAAM,UAAU,eAAe,GAAG,EAAE,UAAU,kBAAkB,CAAC;EACjE,MAAM,OAAyB;GAC7B;GACA,SAAS,QAAQ;GACjB,MAAM,QAAQ,QAAQ;GACtB,MAAM,QAAQ;GACd,MAAM,QAAQ;GACd,OAAO,QAAQ;GACf;GACA;GACA;GACA,UAAU;GACX;EACD,KAAK,MAAM,QAAQ,SAAS,CAAC,GAAG,MAAM,KAAK,CAAC;EAC5C,QAAQ,IAAI,EAAE;EACd,OAAO,IAAI,EAAE;EAEb,IAAI,QAAQ,SAAS,QAAQ,WAC3B,OAAO,UAAU,QAAQ,MAAM;EAGjC,MAAM,QAAQ,OAAO,QAAQ,SAAS,WAAW,QAAQ,OAAO;EAChE,iBAAiB;GACf,KAAK,OAAO,GAAG;KACd,MAAM;;CAGX,OAAO,IAAY;EAEjB,MAAM,OADO,KAAK,OACL,CAAK,MAAM,OAAO,GAAG,OAAO,GAAG;EAC5C,IAAI,CAAC,QAAQ,KAAK,UAAU;EAC5B,KAAK,WAAW;EAChB,KAAK,QAAQ,IAAI,EAAE;EACnB,KAAK,OAAO,IAAI,GAAG;EACnB,iBAAiB;GACf,KAAK,MAAM,QAAQ,UAAU,MAAM,QAAQ,OAAO,GAAG,OAAO,GAAG,CAAC;KAC/D,iBAAiB"}

package/dist/Resource.js.map

@@ -1 +1 @@
-{"version":3,"file":"Resource.js","names":[],"sources":["../src/Resource.ts"],"sourcesContent":["import { RpgClientEngine } from './RpgClientEngine';\n\n/**\n * RpgResource class\n * \n * Provides a unified API to access resource file links (images and sounds) in the game.\n * Resources are stored as Maps of resource IDs to file paths/URLs.\n * \n * ## Design\n * \n * RpgResource acts as a facade over the engine's resource storage, providing\n * easy access to resource file links. It maintains Maps that are synchronized\n * with the engine's internal storage, but only stores the file paths/URLs,\n * not the full resource objects.\n * \n * @example\n * ```ts\n * import { RpgResource } from '@rpgjs/client'\n * \n * // Get spritesheet image link\n * const imageLink = RpgResource.spritesheets.get('hero')\n * \n * // Get sound file link\n * const soundLink = RpgResource.sounds.get('town-music')\n * \n * // Set a new resource link\n * RpgResource.spritesheets.set('new-sprite', './assets/new-sprite.png')\n * ```\n */\nexport class RpgResource {\n  private static engine: RpgClientEngine | null = null;\n  private static _spritesheets: Map<string, string> = new Map();\n  private static _sounds: Map<string, string> = new Map();\n\n  /**\n   * Initialize RpgResource with the engine instance\n   * \n   * This is called automatically by the engine during initialization.\n   * It synchronizes the resource Maps with the engine's internal storage.\n   * \n   * @param engine - The RpgClientEngine instance\n   */\n  static init(engine: RpgClientEngine): void {\n    RpgResource.engine = engine;\n    RpgResource.syncResources();\n  }\n\n  /**\n   * Synchronize resource Maps with the engine's internal storage\n   * \n   * Extracts file links from spritesheets and sounds stored in the engine\n   * and updates the Maps accordingly.\n   * \n   * @private\n   */\n  private static syncResources(): void {\n    if (!RpgResource.engine) {\n      return;\n    }\n\n    // Sync spritesheets\n    RpgResource._spritesheets.clear();\n    RpgResource.engine.spritesheets.forEach((spritesheet, id) => {\n      // Extract image path from spritesheet\n      const imageLink = spritesheet?.image || spritesheet?.imageSource || undefined;\n      if (imageLink) {\n        RpgResource._spritesheets.set(id, imageLink);\n      }\n    });\n\n    // Sync sounds\n    RpgResource._sounds.clear();\n    RpgResource.engine.sounds.forEach((sound, id) => {\n      // Extract src path from sound\n      let soundLink: string | undefined;\n      \n      // If it's a Howler instance, try to get src from _src or src property\n      if (sound && typeof sound === 'object') {\n        if (sound._src && Array.isArray(sound._src) && sound._src.length > 0) {\n          soundLink = sound._src[0];\n        } else if (sound.src && typeof sound.src === 'string') {\n          soundLink = sound.src;\n        } else if (sound.src && Array.isArray(sound.src) && sound.src.length > 0) {\n          soundLink = sound.src[0];\n        }\n      }\n      \n      if (soundLink) {\n        RpgResource._sounds.set(id, soundLink);\n      }\n    });\n  }\n\n  /**\n   * Get/Set image links for spritesheets\n   * \n   * Map of spritesheet IDs to their image file paths/URLs.\n   * This Map is synchronized with the engine's spritesheet storage.\n   * \n   * @type {Map<string, string>}\n   * \n   * @example\n   * ```ts\n   * // Get an image link\n   * const imageLink = RpgResource.spritesheets.get('hero')\n   * \n   * // Set a new image link\n   * RpgResource.spritesheets.set('new-sprite', './assets/new-sprite.png')\n   * \n   * // Check if a spritesheet exists\n   * if (RpgResource.spritesheets.has('monster')) {\n   *   const link = RpgResource.spritesheets.get('monster')\n   * }\n   * ```\n   */\n  static get spritesheets(): Map<string, string> {\n    // Sync before returning to ensure we have the latest data\n    RpgResource.syncResources();\n    return RpgResource._spritesheets;\n  }\n\n  /**\n   * Get/Set sound file links\n   * \n   * Map of sound IDs to their audio file paths/URLs.\n   * This Map is synchronized with the engine's sound storage.\n   * \n   * @type {Map<string, string>}\n   * \n   * @example\n   * ```ts\n   * // Get a sound link\n   * const soundLink = RpgResource.sounds.get('town-music')\n   * \n   * // Set a new sound link\n   * RpgResource.sounds.set('new-sound', './assets/new-sound.ogg')\n   * \n   * // Iterate over all sounds\n   * RpgResource.sounds.forEach((link, id) => {\n   *   console.log(`Sound ${id}: ${link}`)\n   * })\n   * ```\n   */\n  static get sounds(): Map<string, string> {\n    // Sync before returning to ensure we have the latest data\n    RpgResource.syncResources();\n    return RpgResource._sounds;\n  }\n}\n\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BA,IAAa,cAAb,MAAa,YAAY;;gBACyB;;;uCACI,IAAI,KAAK;;;iCACf,IAAI,KAAK;;;;;;;;;;CAUvD,OAAO,KAAK,QAA+B;AACzC,cAAY,SAAS;AACrB,cAAY,eAAe;;;;;;;;;;CAW7B,OAAe,gBAAsB;AACnC,MAAI,CAAC,YAAY,OACf;AAIF,cAAY,cAAc,OAAO;AACjC,cAAY,OAAO,aAAa,SAAS,aAAa,OAAO;GAE3D,MAAM,YAAY,aAAa,SAAS,aAAa,eAAe,KAAA;AACpE,OAAI,UACF,aAAY,cAAc,IAAI,IAAI,UAAU;IAE9C;AAGF,cAAY,QAAQ,OAAO;AAC3B,cAAY,OAAO,OAAO,SAAS,OAAO,OAAO;GAE/C,IAAI;AAGJ,OAAI,SAAS,OAAO,UAAU;QACxB,MAAM,QAAQ,MAAM,QAAQ,MAAM,KAAK,IAAI,MAAM,KAAK,SAAS,EACjE,aAAY,MAAM,KAAK;aACd,MAAM,OAAO,OAAO,MAAM,QAAQ,SAC3C,aAAY,MAAM;aACT,MAAM,OAAO,MAAM,QAAQ,MAAM,IAAI,IAAI,MAAM,IAAI,SAAS,EACrE,aAAY,MAAM,IAAI;;AAI1B,OAAI,UACF,aAAY,QAAQ,IAAI,IAAI,UAAU;IAExC;;;;;;;;;;;;;;;;;;;;;;;;CAyBJ,WAAW,eAAoC;AAE7C,cAAY,eAAe;AAC3B,SAAO,YAAY;;;;;;;;;;;;;;;;;;;;;;;;CAyBrB,WAAW,SAA8B;AAEvC,cAAY,eAAe;AAC3B,SAAO,YAAY"}
+{"version":3,"file":"Resource.js","names":[],"sources":["../src/Resource.ts"],"sourcesContent":["import { RpgClientEngine } from './RpgClientEngine';\n\n/**\n * RpgResource class\n * \n * Provides a unified API to access resource file links (images and sounds) in the game.\n * Resources are stored as Maps of resource IDs to file paths/URLs.\n * \n * ## Design\n * \n * RpgResource acts as a facade over the engine's resource storage, providing\n * easy access to resource file links. It maintains Maps that are synchronized\n * with the engine's internal storage, but only stores the file paths/URLs,\n * not the full resource objects.\n * \n * @example\n * ```ts\n * import { RpgResource } from '@rpgjs/client'\n * \n * // Get spritesheet image link\n * const imageLink = RpgResource.spritesheets.get('hero')\n * \n * // Get sound file link\n * const soundLink = RpgResource.sounds.get('town-music')\n * \n * // Set a new resource link\n * RpgResource.spritesheets.set('new-sprite', './assets/new-sprite.png')\n * ```\n */\nexport class RpgResource {\n  private static engine: RpgClientEngine | null = null;\n  private static _spritesheets: Map<string, string> = new Map();\n  private static _sounds: Map<string, string> = new Map();\n\n  /**\n   * Initialize RpgResource with the engine instance\n   * \n   * This is called automatically by the engine during initialization.\n   * It synchronizes the resource Maps with the engine's internal storage.\n   * \n   * @param engine - The RpgClientEngine instance\n   */\n  static init(engine: RpgClientEngine): void {\n    RpgResource.engine = engine;\n    RpgResource.syncResources();\n  }\n\n  /**\n   * Synchronize resource Maps with the engine's internal storage\n   * \n   * Extracts file links from spritesheets and sounds stored in the engine\n   * and updates the Maps accordingly.\n   * \n   * @private\n   */\n  private static syncResources(): void {\n    if (!RpgResource.engine) {\n      return;\n    }\n\n    // Sync spritesheets\n    RpgResource._spritesheets.clear();\n    RpgResource.engine.spritesheets.forEach((spritesheet, id) => {\n      // Extract image path from spritesheet\n      const imageLink = spritesheet?.image || spritesheet?.imageSource || undefined;\n      if (imageLink) {\n        RpgResource._spritesheets.set(id, imageLink);\n      }\n    });\n\n    // Sync sounds\n    RpgResource._sounds.clear();\n    RpgResource.engine.sounds.forEach((sound, id) => {\n      // Extract src path from sound\n      let soundLink: string | undefined;\n      \n      // If it's a Howler instance, try to get src from _src or src property\n      if (sound && typeof sound === 'object') {\n        if (sound._src && Array.isArray(sound._src) && sound._src.length > 0) {\n          soundLink = sound._src[0];\n        } else if (sound.src && typeof sound.src === 'string') {\n          soundLink = sound.src;\n        } else if (sound.src && Array.isArray(sound.src) && sound.src.length > 0) {\n          soundLink = sound.src[0];\n        }\n      }\n      \n      if (soundLink) {\n        RpgResource._sounds.set(id, soundLink);\n      }\n    });\n  }\n\n  /**\n   * Get/Set image links for spritesheets\n   * \n   * Map of spritesheet IDs to their image file paths/URLs.\n   * This Map is synchronized with the engine's spritesheet storage.\n   * \n   * @type {Map<string, string>}\n   * \n   * @example\n   * ```ts\n   * // Get an image link\n   * const imageLink = RpgResource.spritesheets.get('hero')\n   * \n   * // Set a new image link\n   * RpgResource.spritesheets.set('new-sprite', './assets/new-sprite.png')\n   * \n   * // Check if a spritesheet exists\n   * if (RpgResource.spritesheets.has('monster')) {\n   *   const link = RpgResource.spritesheets.get('monster')\n   * }\n   * ```\n   */\n  static get spritesheets(): Map<string, string> {\n    // Sync before returning to ensure we have the latest data\n    RpgResource.syncResources();\n    return RpgResource._spritesheets;\n  }\n\n  /**\n   * Get/Set sound file links\n   * \n   * Map of sound IDs to their audio file paths/URLs.\n   * This Map is synchronized with the engine's sound storage.\n   * \n   * @type {Map<string, string>}\n   * \n   * @example\n   * ```ts\n   * // Get a sound link\n   * const soundLink = RpgResource.sounds.get('town-music')\n   * \n   * // Set a new sound link\n   * RpgResource.sounds.set('new-sound', './assets/new-sound.ogg')\n   * \n   * // Iterate over all sounds\n   * RpgResource.sounds.forEach((link, id) => {\n   *   console.log(`Sound ${id}: ${link}`)\n   * })\n   * ```\n   */\n  static get sounds(): Map<string, string> {\n    // Sync before returning to ensure we have the latest data\n    RpgResource.syncResources();\n    return RpgResource._sounds;\n  }\n}\n\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BA,IAAa,cAAb,MAAa,YAAY;;gBACyB;;;uCACI,IAAI,KAAK;;;iCACf,IAAI,KAAK;;;;;;;;;;CAUvD,OAAO,KAAK,QAA+B;EACzC,YAAY,SAAS;EACrB,YAAY,eAAe;;;;;;;;;;CAW7B,OAAe,gBAAsB;EACnC,IAAI,CAAC,YAAY,QACf;EAIF,YAAY,cAAc,OAAO;EACjC,YAAY,OAAO,aAAa,SAAS,aAAa,OAAO;GAE3D,MAAM,YAAY,aAAa,SAAS,aAAa,eAAe,KAAA;GACpE,IAAI,WACF,YAAY,cAAc,IAAI,IAAI,UAAU;IAE9C;EAGF,YAAY,QAAQ,OAAO;EAC3B,YAAY,OAAO,OAAO,SAAS,OAAO,OAAO;GAE/C,IAAI;GAGJ,IAAI,SAAS,OAAO,UAAU;QACxB,MAAM,QAAQ,MAAM,QAAQ,MAAM,KAAK,IAAI,MAAM,KAAK,SAAS,GACjE,YAAY,MAAM,KAAK;SAClB,IAAI,MAAM,OAAO,OAAO,MAAM,QAAQ,UAC3C,YAAY,MAAM;SACb,IAAI,MAAM,OAAO,MAAM,QAAQ,MAAM,IAAI,IAAI,MAAM,IAAI,SAAS,GACrE,YAAY,MAAM,IAAI;;GAI1B,IAAI,WACF,YAAY,QAAQ,IAAI,IAAI,UAAU;IAExC;;;;;;;;;;;;;;;;;;;;;;;;CAyBJ,WAAW,eAAoC;EAE7C,YAAY,eAAe;EAC3B,OAAO,YAAY;;;;;;;;;;;;;;;;;;;;;;;;CAyBrB,WAAW,SAA8B;EAEvC,YAAY,eAAe;EAC3B,OAAO,YAAY"}

package/dist/RpgClient.d.ts

@@ -5,6 +5,17 @@ import { RpgClientObject } from './Game/Object';
 import { MapPhysicsEntityContext, MapPhysicsInitContext } from '@rpgjs/common';
 type RpgComponent = RpgClientObject;
 type SceneMap = Container;
+export interface RpgSpriteBeforeRemoveContext {
+    reason?: string;
+    data?: any;
+    transition?: {
+        animation?: string;
+        graphic?: string | string[];
+        duration?: number;
+        effect?: string;
+    };
+    timeoutMs?: number;
+}
 export interface RpgClientEngineHooks {
     /**
      * When the engine is started. If you send false, you prevent the client from connecting to the server
@@ -103,6 +114,17 @@ export interface RpgSpriteHooks {
      * @memberof RpgSpriteHooks
      */
     onDestroy?: (sprite: RpgComponent) => any;
+    /**
+     * Called when a sprite removal is requested, before it disappears from the scene.
+     *
+     * Return a promise to keep the sprite visible while an animation, effect, or
+     * sound transition is running. The server still owns gameplay removal and
+     * uses the timeout carried by the remove request as a safety limit.
+     *
+     * @prop { (sprite: RpgSprite, context: RpgSpriteBeforeRemoveContext) => any } [onBeforeRemove]
+     * @memberof RpgSpriteHooks
+     */
+    onBeforeRemove?: (sprite: RpgComponent, context: RpgSpriteBeforeRemoveContext) => any;
     /**
      * As soon as a data is changed on the server side (the name for example), you are able to know the new data but also the old data.
      *

package/dist/RpgClientEngine.d.ts

@@ -15,8 +15,8 @@ export declare class RpgClientEngine<T = any> {
     globalConfig: T;
     sceneComponent: any;
     stopProcessingInput: boolean;
-    width: import('canvasengine').WritableSignal<string>;
-    height: import('canvasengine').WritableSignal<string>;
+    width: any;
+    height: any;
     spritesheets: Map<string, any>;
     sounds: Map<string, any>;
     componentAnimations: any[];
@@ -29,15 +29,15 @@ export declare class RpgClientEngine<T = any> {
     tick: Observable<number>;
     private canvasApp?;
     private canvasElement?;
-    playerIdSignal: import('canvasengine').WritableSignal<string | null>;
-    spriteComponentsBehind: import('canvasengine').WritableArraySignal<any[]>;
-    spriteComponentsInFront: import('canvasengine').WritableArraySignal<any[]>;
+    playerIdSignal: any;
+    spriteComponentsBehind: any;
+    spriteComponentsInFront: any;
     /** ID of the sprite that the camera should follow. null means follow the current player */
-    cameraFollowTargetId: import('canvasengine').WritableSignal<string | null>;
+    cameraFollowTargetId: any;
     /** Trigger for map shake animation */
-    mapShakeTrigger: import('canvasengine').Trigger<any>;
-    controlsReady: import('canvasengine').WritableSignal<undefined>;
-    gamePause: import('canvasengine').WritableSignal<boolean>;
+    mapShakeTrigger: any;
+    controlsReady: any;
+    gamePause: any;
     private predictionEnabled;
     private prediction?;
     private readonly SERVER_CORRECTION_THRESHOLD;
@@ -520,9 +520,12 @@ export declare class RpgClientEngine<T = any> {
      *   duration: 1000,
      *   onFinish: () => console.log('Fade complete')
      * });
+     *
+     * // Wait until the transition component calls onFinish
+     * await engine.startTransition('fade', { duration: 1000 });
      * ```
      */
-    startTransition(id: string, props?: any): void;
+    startTransition(id: string, props?: any): Promise<void>;
     processInput({ input }: {
         input: Direction;
     }): Promise<void>;
@@ -531,7 +534,7 @@ export declare class RpgClientEngine<T = any> {
     }): void;
     get PIXI(): typeof PIXI;
     get socket(): AbstractWebsocket;
-    get playerId(): string | null;
+    get playerId(): any;
     get scene(): RpgClientMap;
     private getPhysicsTick;
     private ensureCurrentPlayerBody;
@@ -543,7 +546,7 @@ export declare class RpgClientEngine<T = any> {
     private getLocalPlayerState;
     private applyAuthoritativeState;
     private initializePredictionController;
-    getCurrentPlayer(): import('.').RpgClientPlayer;
+    getCurrentPlayer(): any;
     emitSceneMapHook(hookName: string, ...args: any[]): void;
     /**
      * Setup RxJS observer to wait for all conditions before calling onAfterLoading hook

package/dist/RpgClientEngine.js

@@ -2,11 +2,11 @@ import { inject } from "./core/inject.js";
 import { WebSocketToken } from "./services/AbstractSocket.js";
 import { SaveClientService } from "./services/save.js";
 import { RpgGui } from "./Gui/Gui.js";
-import component from "./components/scenes/canvas.ce.js";
+import __ce_component from "./components/scenes/canvas.ce.js";
 import { LoadMapToken } from "./services/loadMap.js";
 import { RpgSound } from "./Sound.js";
 import { RpgResource } from "./Resource.js";
-import { load } from "./node_modules/.pnpm/@signe_sync@2.9.0/node_modules/@signe/sync/dist/index.js";
+import { load } from "./node_modules/.pnpm/@signe_sync@2.10.0/node_modules/@signe/sync/dist/index.js";
 import { RpgClientMap } from "./Game/Map.js";
 import { AnimationManager } from "./Game/AnimationManager.js";
 import { GlobalConfigToken } from "./module.js";
@@ -122,7 +122,7 @@ var RpgClientEngine = class {
 		this.sceneMap.loadPhysic();
 		this.selector = document.body.querySelector("#rpg");
 		const bootstrapOptions = this.globalConfig?.bootstrapCanvasOptions;
-		const { app, canvasElement } = await bootstrapCanvas(this.selector, component, bootstrapOptions);
+		const { app, canvasElement } = await bootstrapCanvas(this.selector, __ce_component, bootstrapOptions);
 		this.canvasApp = app;
 		this.canvasElement = canvasElement;
 		this.renderer = app.renderer;
@@ -888,11 +888,26 @@ var RpgClientEngine = class {
 	*   duration: 1000,
 	*   onFinish: () => console.log('Fade complete')
 	* });
+	*
+	* // Wait until the transition component calls onFinish
+	* await engine.startTransition('fade', { duration: 1000 });
 	* ```
 	*/
 	startTransition(id, props = {}) {
 		if (!this.guiService.exists(id)) throw new Error(`Transition with id ${id} not found. Make sure to add it using engine.addTransition() or in your module's transitions property.`);
-		this.guiService.display(id, props);
+		return new Promise((resolve) => {
+			let finished = false;
+			const finish = (data) => {
+				if (finished) return;
+				finished = true;
+				props?.onFinish?.(data);
+				resolve();
+			};
+			this.guiService.display(id, {
+				...props,
+				onFinish: finish
+			});
+		});
 	}
 	async processInput({ input }) {
 		if (this.stopProcessingInput) return;