@rpgjs/client 5.0.0-alpha.8 → 5.0.0-alpha.9

package/dist/RpgClient.d.ts

@@ -1,8 +1,8 @@
+import { ComponentFunction } from 'canvasengine';
 import { RpgClientEngine } from './RpgClientEngine';
-import { Loader } from 'pixi.js';
-type RpgClass<T = any> = new (...args: any[]) => T;
-type RpgComponent = any;
-type SceneMap = any;
+import { Loader, Container } from 'pixi.js';
+type RpgComponent = Container;
+type SceneMap = Container;
 export interface RpgClientEngineHooks {
     /**
      * When the engine is started. If you send false, you prevent the client from connecting to the server
@@ -59,6 +59,34 @@ export interface RpgClientEngineHooks {
     onWindowResize?: () => any;
 }
 export interface RpgSpriteHooks {
+    /**
+     * Array of components to render behind the sprite
+     * These components will be displayed with a lower z-index than the sprite itself
+     *
+     * @prop { ComponentFunction[] } [componentsBehind]
+     * @memberof RpgSpriteHooks
+     * @example
+     * ```ts
+     * const sprite: RpgSpriteHooks = {
+     *   componentsBehind: [ShadowComponent, AuraComponent]
+     * }
+     * ```
+     */
+    componentsBehind?: ComponentFunction[];
+    /**
+     * Array of components to render in front of the sprite
+     * These components will be displayed with a higher z-index than the sprite itself
+     *
+     * @prop { ComponentFunction[] } [componentsInFront]
+     * @memberof RpgSpriteHooks
+     * @example
+     * ```ts
+     * const sprite: RpgSpriteHooks = {
+     *   componentsInFront: [HealthBarComponent, StatusEffectComponent]
+     * }
+     * ```
+     */
+    componentsInFront?: ComponentFunction[];
     /**
      * As soon as the sprite is initialized
      *
@@ -163,14 +191,13 @@ export interface RpgClient {
      * @example
      *
      * ```ts
-     * import { RpgClient, RpgModule } from '@rpgjs/client'
+     * import { RpgClient, defineModule } from '@rpgjs/client'
      *
-     * @RpgModule<RpgClient>({
+     * defineModule<RpgClient>({
      *     hooks: {
      *        player: ['onAuth']
      *    }
      * })
-     * class RpgClientEngine { }
      * ```
      *
      * Emit the hook:
@@ -207,7 +234,7 @@ export interface RpgClient {
      * Object containing the hooks concerning the engine
      *
      * ```ts
-     * import { RpgClientEngine, RpgClientEngineHooks, RpgModule, RpgClient } from '@rpgjs/client'
+     * import { RpgClientEngine, RpgClientEngineHooks, defineModule, RpgClient } from '@rpgjs/client'
      *
      * const engine: RpgClientEngineHooks = {
      *      onConnected(engine: RpgClientEngine) {
@@ -215,10 +242,9 @@ export interface RpgClient {
      *      }
      * }
      *
-     * @RpgModule<RpgClient>({
+     * defineModule<RpgClient>({
      *      engine
      * })
-     * class RpgClientModule {}
      * ```
      *
      * @prop {RpgClientEngineHooks} [engine]
@@ -227,99 +253,79 @@ export interface RpgClient {
     engine?: RpgClientEngineHooks;
     /**
      * Array containing the list of spritesheets
-     * An element contains a class with the `@Spritesheet` decorator
+     * Each element is a simple object containing spritesheet definitions
      *
      * ```ts
-     * import { Spritesheet, Animation, Direction, RpgClient, RpgModule } from '@rpgjs/client'
-     *
-     * @Spritesheet({
-     *      id: 'chest',
-     *      image: require('./assets/chest.png'),
-     *      // other options
-     * })
-     * class Chest  { }
+     * import { defineModule, RpgClient } from '@rpgjs/client'
      *
-     * @RpgModule<RpgClient>({
+     * defineModule<RpgClient>({
      *      spritesheets: [
-     *          Chest
+     *          {
+     *              id: 'chest',
+     *              image: require('./assets/chest.png'),
+     *              framesWidth: 32,
+     *              framesHeight: 32,
+     *              animations: {
+     *                  default: {
+     *                      frames: [0, 1, 2],
+     *                      duration: 1000
+     *                  }
+     *              }
+     *          }
      *      ]
      * })
-     * class RpgClientEngine {}
      * ```
      *
      * [Guide: Create Sprite](/guide/create-sprite.html)
      *
-     * @prop {Array<Class>} [spritesheets]
+     * @prop {Array<Object>} [spritesheets]
      * @memberof RpgClient
      * */
     spritesheets?: any[];
     /**
      * Array containing the list of VueJS components
      *
-     * ```ts
-     * import { RpgClient, RpgModule } from '@rpgjs/client'
-     *
-     * const component = {
-     *      name: 'my-gui',
-     *      template: `
-     *          <div>
-     *              Component
-     *          </div>
-     *      `
-     * }
-     *
-     * @RpgModule<RpgClient>({
-     *      gui: [
-     *          component
-     *      ]
-     * })
-     * class RpgClientEngine {}
-     * ```
      *
      * [Guide: Create GUI](/guide/create-gui.html)
      *
-     * @prop {Array<Component of VueJS>} [gui]
+     * @prop {Array<Component of CanvasEngine>} [gui]
      * @memberof RpgClient
      * */
-    gui?: any[];
+    gui?: ComponentFunction[];
     /**
      * Array containing the list of sounds
-     * An element contains a class with the `@Sound` decorator
+     * Each element is a simple object containing sound definitions
      *
      * ```ts
-     * import { Sound, RpgModule, RpgClient } from '@rpgjs/client'
-     *
-     * @Sound({
-     *      sounds: {
-     *          town: require('./assets/Town_Theme.ogg')
-     *      }
-     * })
-     * class Sounds {}
-     *
-     * @RpgModule<RpgClient>({
-     *      sounds: [ Sounds ]
+     * import { defineModule, RpgClient } from '@rpgjs/client'
+     *
+     * defineModule<RpgClient>({
+     *      sounds: [
+     *          {
+     *              town: require('./assets/Town_Theme.ogg'),
+     *              battle: require('./assets/Battle_Theme.ogg')
+     *          }
+     *      ]
      * })
-     * class RpgClientEngine {}
      * ```
      *
-     * @prop {Array<Class>} [sounds]
+     * @prop {Array<Object>} [sounds]
      * @memberof RpgClient
      * */
-    sounds?: RpgClass[];
+    sounds?: any[];
     /**
      * Give the `RpgSprite` class. A Sprite represents a player or an event
      *
      * ```ts
-     * import { RpgSprite, RpgSpriteHooks, RpgClient, RpgModule } from '@rpgjs/client'
+     * import { RpgSprite, RpgSpriteHooks, RpgClient, defineModule } from '@rpgjs/client'
      *
      * export const sprite: RpgSpriteHooks = {
      *    onInit(sprite: RpgSprite) {}
      * }
      *
-     * @RpgModule<RpgClient>({
+     * defineModule<RpgClient>({
      *      sprite
      * })
-     * class RpgClientEngine {}
      * ```
      *
      * @prop {RpgSpriteHooks} [sprite]
@@ -330,19 +336,18 @@ export interface RpgClient {
      * Reference the scenes of the game. Here you can put your own class that inherits RpgSceneMap
      *
      * ```ts
-     * import { RpgSceneMapHooks, RpgClient, RpgModule } from '@rpgjs/client'
+     * import { RpgSceneMapHooks, RpgClient, defineModule } from '@rpgjs/client'
      *
      * export const sceneMap: RpgSceneMapHooks = {
      *
      * }
      *
-     * @RpgModule<RpgClient>({
+     * defineModule<RpgClient>({
      *      scenes: {
      *          // If you put the RpgSceneMap scene, Thhe key is called mandatory `map`
      *          map: sceneMap
      *      }
      * })
-     * class RpgClientEngine {}
      * ```
      *
      * @prop { [sceneName: string]: RpgSceneMapHooks } [scenes]
@@ -353,7 +358,7 @@ export interface RpgClient {
     };
     effects?: {
         id: string;
-        component: any;
+        component: ComponentFunction;
     }[];
 }
 export {};

package/dist/RpgClientEngine.d.ts

@@ -1,5 +1,8 @@
 import { Context } from '@signe/di';
+import { AbstractWebsocket } from './services/AbstractSocket';
 import { EffectManager } from './Game/EffectManager';
+import { Observable } from 'rxjs';
+import * as PIXI from "pixi.js";
 export declare class RpgClientEngine<T = any> {
     context: Context;
     private guiService;
@@ -19,6 +22,11 @@ export declare class RpgClientEngine<T = any> {
     particleSettings: {
         emitters: any[];
     };
+    renderer: PIXI.Renderer;
+    tick: Observable<number>;
+    playerIdSignal: import('canvasengine').WritableSignal<string | null>;
+    spriteComponentsBehind: import('canvasengine').WritableArraySignal<any[]>;
+    spriteComponentsInFront: import('canvasengine').WritableArraySignal<any[]>;
     constructor(context: Context);
     start(): Promise<void>;
     private initListeners;
@@ -26,6 +34,34 @@ export declare class RpgClientEngine<T = any> {
     addSpriteSheet<T = any>(spritesheetClass: any, id?: string): any;
     addSound(sound: any, id?: string): any;
     addParticle(particle: any): any;
+    /**
+     * Add a component to render behind sprites
+     * Components added with this method will be displayed with a lower z-index than the sprite
+     *
+     * @param component - The component to add behind sprites
+     * @returns The added component
+     *
+     * @example
+     * ```ts
+     * // Add a shadow component behind all sprites
+     * engine.addSpriteComponentBehind(ShadowComponent);
+     * ```
+     */
+    addSpriteComponentBehind(component: any): any;
+    /**
+     * Add a component to render in front of sprites
+     * Components added with this method will be displayed with a higher z-index than the sprite
+     *
+     * @param component - The component to add in front of sprites
+     * @returns The added component
+     *
+     * @example
+     * ```ts
+     * // Add a health bar component in front of all sprites
+     * engine.addSpriteComponentInFront(HealthBarComponent);
+     * ```
+     */
+    addSpriteComponentInFront(component: any): any;
     addEffect(effect: {
         component: any;
         id: string;
@@ -40,4 +76,7 @@ export declare class RpgClientEngine<T = any> {
     processAction({ action }: {
         action: number;
     }): void;
+    get PIXI(): typeof PIXI;
+    get socket(): AbstractWebsocket;
+    get playerId(): string | null;
 }

package/dist/index13.js

@@ -9,7 +9,7 @@ function component($$props) {
         var engine = inject(RpgClientEngine);
 var players = engine.sceneMap.players;
 var events = engine.sceneMap.events;
-        let $this = h(Container, { sortableChildren: true }, [loop(events, (event, id) => h(component$1, { id: id, object: event, isMe: false })), loop(players, (player, id) => h(component$1, { id: id, object: player, isMe: true }))]);
+        let $this = h(Container, { sortableChildren: true }, [loop(events, (event, id) => h(component$1, { id: id, object: event })), loop(players, (player, id) => h(component$1, { id: id, object: player }))]);
         return $this
       }
 

package/dist/index13.js.map

@@ -1 +1 @@
-{"version":3,"file":"index13.js","sources":["../src/components/scenes/event-layer.ce"],"sourcesContent":["<Container sortableChildren={true}>\n    @for ((event,id) of events) {\n        <Character id={id} object={event} isMe={false}  />\n    }\n\n    @for ((player,id) of players) {\n        <Character id={id} object={player} isMe={true} />\n    }\n</Container>\n\n<script>\n    import { effect, signal } from 'canvasengine'\n    import { inject } from \"../../core/inject\";\n    import { RpgClientEngine } from \"../../RpgClientEngine\";\n    import Character from \"../character.ce\";\n   \n    const engine = inject(RpgClientEngine);\n    const players = engine.sceneMap.players\n    const events = engine.sceneMap.events\n</script>"],"names":["Character"],"mappings":";;;;;AAQqB,SAAS,SAAS,CAAC,OAAO,EAAE;AACjD,QAAuB,QAAQ,CAAC,OAAO;AACvC,QAA4B,cAAc,CAAC,OAAO;AAClD,QAAQ,IAAI,MAAM,GAAG,MAAM,CAAC,eAAe,CAAC;AAC5C,IAAI,OAAO,GAAG,MAAM,CAAC,QAAQ,CAAC,OAAO;AACrC,IAAI,MAAM,GAAG,MAAM,CAAC,QAAQ,CAAC;AAC7B,QAAQ,IAAI,KAAK,GAAG,CAAC,CAAC,SAAS,EAAE,EAAE,gBAAgB,EAAE,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,KAAK,EAAE,EAAE,KAAK,CAAC,CAACA,WAAS,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC,MAAM,EAAE,EAAE,KAAK,CAAC,CAACA,WAAS,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;AACrO,QAAQ,OAAO;AACf;;;;"}
+{"version":3,"file":"index13.js","sources":["../src/components/scenes/event-layer.ce"],"sourcesContent":["<Container sortableChildren={true}>\n    @for ((event,id) of events) {\n        <Character id={id} object={event}  />\n    }\n\n    @for ((player,id) of players) {\n        <Character id={id} object={player} />\n    }\n</Container>\n\n<script>\n    import { effect, signal } from 'canvasengine'\n    import { inject } from \"../../core/inject\";\n    import { RpgClientEngine } from \"../../RpgClientEngine\";\n    import Character from \"../character.ce\";\n   \n    const engine = inject(RpgClientEngine);\n    const players = engine.sceneMap.players\n    const events = engine.sceneMap.events\n</script>"],"names":["Character"],"mappings":";;;;;AAQqB,SAAS,SAAS,CAAC,OAAO,EAAE;AACjD,QAAuB,QAAQ,CAAC,OAAO;AACvC,QAA4B,cAAc,CAAC,OAAO;AAClD,QAAQ,IAAI,MAAM,GAAG,MAAM,CAAC,eAAe,CAAC;AAC5C,IAAI,OAAO,GAAG,MAAM,CAAC,QAAQ,CAAC,OAAO;AACrC,IAAI,MAAM,GAAG,MAAM,CAAC,QAAQ,CAAC;AAC7B,QAAQ,IAAI,KAAK,GAAG,CAAC,CAAC,SAAS,EAAE,EAAE,gBAAgB,EAAE,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,KAAK,EAAE,EAAE,KAAK,CAAC,CAACA,WAAS,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC,MAAM,EAAE,EAAE,KAAK,CAAC,CAACA,WAAS,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC;AAC5M,QAAQ,OAAO;AACf;;;;"}

package/dist/index14.js

@@ -1,15 +1,20 @@
-import { useProps, useDefineProps, computed, signal, h, Container, loop, Sprite } from 'canvasengine';
+import { useProps, useDefineProps, computed, signal, mount, tick, h, Container, loop, Sprite } from 'canvasengine';
 import { Particle } from '@canvasengine/presets';
+import { Direction, ModulesToken } from '@rpgjs/common';
 import { RpgClientEngine } from './index2.js';
 import { inject } from './index6.js';
-import { Direction } from '@rpgjs/common';
 
 function component($$props) {
         useProps($$props);
         const defineProps = useDefineProps($$props);
-        var _a = defineProps(), object = _a.object; _a.id; var isMe = _a.isMe;
+        var _a = defineProps(), object = _a.object, id = _a.id;
 var client = inject(RpgClientEngine);
+var hooks = inject(ModulesToken);
 var spritesheets = client.spritesheets;
+var playerId = client.playerId;
+var componentsBehind = client.spriteComponentsBehind;
+var componentsInFront = client.spriteComponentsInFront;
+var isMe = computed(function () { return id() === playerId; });
 var x = object.x;
 var y = object.y;
 var tint = object.tint;
@@ -83,7 +88,18 @@ var sheet = function (graphicId) {
         },
     };
 };
-        let $this = h(Container, { x, y, zIndex: y, viewportFollow: isMe, controls }, [h(Particle, { emit: emitParticleTrigger, settings: particleSettings, zIndex: 1000, name: particleName }), loop(graphics, graphicId => h(Sprite, { sheet: sheet(graphicId), direction, tint }))]);
+mount(function (element) {
+    hooks.callHooks("client-sprite-onInit", element.componentInstance);
+    hooks.callHooks("client-sceneMap-onAddSprite", client.sceneMap, element.componentInstance);
+    return function () {
+        hooks.callHooks("client-sprite-onDestroy", element.componentInstance);
+        hooks.callHooks("client-sceneMap-onRemoveSprite", client.sceneMap, element.componentInstance);
+    };
+});
+tick(function () {
+    hooks.callHooks("client-sprite-onUpdate");
+});
+        let $this = h(Container, { x, y, zIndex: y, viewportFollow: isMe, controls }, [loop(componentsBehind, component => h(Container, null, h(component, { object }))), h(Particle, { emit: emitParticleTrigger, settings: particleSettings, zIndex: 1000, name: particleName }), h(Container, null, loop(graphics, graphicId => h(Sprite, { sheet: sheet(graphicId), direction, tint }))), loop(componentsInFront, component => h(Container, null, h(component, { object })))]);
         return $this
       }
 

package/dist/index14.js.map

@@ -1 +1 @@
-{"version":3,"file":"index14.js","sources":["../src/components/character.ce"],"sourcesContent":["<Container x y zIndex={y} viewportFollow={isMe} controls>\n  <Particle emit={@emitParticleTrigger} settings={@particleSettings} zIndex={1000} name={particleName} />\n  @for (graphicId of graphics) {\n    <Sprite sheet={@sheet(@graphicId)} direction tint />\n  }\n  <!-- <Ellipse \n    x={shadow.@x} \n    y={shadow.@y} \n    width={shadow.@width} \n    height={shadow.@height} \n    color=\"black\" \n    blur={10} \n    alpha={0.5}\n  /> -->\n</Container>\n\n<script>\n  import { signal, effect, mount, computed } from \"canvasengine\";\n  import { Particle } from \"@canvasengine/presets\";\n  import { GameEngineToken } from \"@rpgjs/common\";\n  import { RpgClientEngine } from \"../RpgClientEngine\";\n  import { inject } from \"../core/inject\";  \n  import { Direction } from \"@rpgjs/common\";\n  import Hit from \"./effects/hit.ce\";\n\n  const { object, id, isMe } = defineProps();\n\n  const client = inject(RpgClientEngine);\n\n  const spritesheets = client.spritesheets;\n\n  const x = object.x;\n  const y = object.y;\n  const tint = object.tint;\n  const direction = object.direction;\n  const animationName = object.animationName;\n  const emitParticleTrigger = object.emitParticleTrigger;\n  const particleSettings = client.particleSettings;\n  const particleName = object.particleName;\n  const graphics = object.graphics;\n\n  const hitbox = object.hitbox;\n  const widthShadow = 10;\n  const shadow = computed(() => ({\n    x: hitbox().w / 2,\n    y: hitbox().h - (hitbox().h / 2),\n    width: hitbox().w + widthShadow,\n    height: hitbox().h,\n  }))\n  const canControls = () => isMe() && object.canMove()\n  const keyboardControls = client.globalConfig.keyboardControls;\n\n  const controls = signal({\n    down: {\n      repeat: true,\n      bind: keyboardControls.down,\n      keyDown() {\n        if (canControls()) client.processInput({ input: Direction.Down })\n      },\n    },\n    up: {\n      repeat: true,\n      bind: keyboardControls.up,\n      keyDown() {\n        if (canControls()) client.processInput({ input: Direction.Up })\n      },\n    },\n    left: {\n      repeat: true,\n      bind: keyboardControls.left,\n      keyDown() {\n        if (canControls()) client.processInput({ input: Direction.Left })\n      },\n    },\n    right: {\n      repeat: true,\n      bind: keyboardControls.right,\n      keyDown() {\n        if (canControls()) client.processInput({ input: Direction.Right })\n      },\n    },\n    action: {\n      bind: keyboardControls.action,\n      keyDown() {\n        if (canControls()) {\n          client.processAction({ action: 'action' })\n          // particleName.set('hit') \n          // emitParticleTrigger.start()\n          // object.flash('red')\n        }\n      },\n    },\n  });\n\n  const sheet = (graphicId) => {\n    return {\n      definition: spritesheets.get(graphicId),\n      playing: animationName,\n      params: {\n        direction\n      },\n    };\n  }\n</script>"],"names":[],"mappings":"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"}
+{"version":3,"file":"index14.js","sources":["../src/components/character.ce"],"sourcesContent":["<Container x y zIndex={y} viewportFollow={isMe} controls>\n  @for (component of componentsBehind) {\n    <Container>\n      <component object />\n    </Container>\n  } \n  <Particle emit={@emitParticleTrigger} settings={@particleSettings} zIndex={1000} name={particleName} />\n  <Container>\n    @for (graphicId of graphics) {\n      <Sprite sheet={@sheet(@graphicId)} direction tint />\n    }\n  </Container>\n  @for (component of componentsInFront) {\n    <Container>\n      <component object />\n    </Container>\n  } \n  <!-- <Ellipse \n    x={shadow.@x} \n    y={shadow.@y} \n    width={shadow.@width} \n    height={shadow.@height} \n    color=\"black\" \n    blur={10} \n    alpha={0.5}\n  /> -->\n</Container>\n\n<script>\n  import { signal, effect, mount, computed, tick } from \"canvasengine\";\n  import { Particle } from \"@canvasengine/presets\";\n  import { GameEngineToken, ModulesToken } from \"@rpgjs/common\";\n  import { RpgClientEngine } from \"../RpgClientEngine\";\n  import { inject } from \"../core/inject\";  \n  import { Direction } from \"@rpgjs/common\";\n  import Hit from \"./effects/hit.ce\";\n\n  const { object, id } = defineProps();\n  \n  const client = inject(RpgClientEngine);\n  const hooks = inject(ModulesToken);\n\n  const spritesheets = client.spritesheets;\n  const playerId = client.playerId;\n  const componentsBehind = client.spriteComponentsBehind;\n  const componentsInFront = client.spriteComponentsInFront;\n  const isMe = computed(() => id() === playerId);\n\n  const x = object.x;\n  const y = object.y;\n  const tint = object.tint;\n  const direction = object.direction;\n  const animationName = object.animationName;\n  const emitParticleTrigger = object.emitParticleTrigger;\n  const particleSettings = client.particleSettings;\n  const particleName = object.particleName;\n  const graphics = object.graphics;\n\n  const hitbox = object.hitbox;\n  const widthShadow = 10;\n  const shadow = computed(() => ({\n    x: hitbox().w / 2,\n    y: hitbox().h - (hitbox().h / 2),\n    width: hitbox().w + widthShadow,\n    height: hitbox().h,\n  }))\n  const canControls = () => isMe() && object.canMove()\n  const keyboardControls = client.globalConfig.keyboardControls;\n\n  const controls = signal({\n    down: {\n      repeat: true,\n      bind: keyboardControls.down,\n      keyDown() {\n        if (canControls()) client.processInput({ input: Direction.Down })\n      },\n    },\n    up: {\n      repeat: true,\n      bind: keyboardControls.up,\n      keyDown() {\n        if (canControls()) client.processInput({ input: Direction.Up })\n      },\n    },\n    left: {\n      repeat: true,\n      bind: keyboardControls.left,\n      keyDown() {\n        if (canControls()) client.processInput({ input: Direction.Left })\n      },\n    },\n    right: {\n      repeat: true,\n      bind: keyboardControls.right,\n      keyDown() {\n        if (canControls()) client.processInput({ input: Direction.Right })\n      },\n    },\n    action: {\n      bind: keyboardControls.action,\n      keyDown() {\n        if (canControls()) {\n          client.processAction({ action: 'action' })\n           // particleName.set('hit') \n          // emitParticleTrigger.start()\n          // object.flash('red')\n        }\n      },\n    },\n  });\n\n  const sheet = (graphicId) => {\n    return {\n      definition: spritesheets.get(graphicId),\n      playing: animationName,\n      params: {\n        direction\n      },\n    };\n  }\n\n  mount((element) => {\n    hooks.callHooks(\"client-sprite-onInit\", element.componentInstance)\n    hooks.callHooks(\"client-sceneMap-onAddSprite\", client.sceneMap, element.componentInstance)\n\n    return () => {\n      hooks.callHooks(\"client-sprite-onDestroy\", element.componentInstance)\n      hooks.callHooks(\"client-sceneMap-onRemoveSprite\", client.sceneMap, element.componentInstance)\n    }\n  })\n\n  tick(() => {\n    hooks.callHooks(\"client-sprite-onUpdate\")\n  })\n</script>"],"names":[],"mappings":";;;;;;AAYqB,SAAS,SAAS,CAAC,OAAO,EAAE;AACjD,QAAuB,QAAQ,CAAC,OAAO;AACvC,QAAQ,MAAM,WAAW,GAAG,cAAc,CAAC,OAAO;AAClD,QAAQ,IAAI,EAAE,GAAG,WAAW,EAAE,EAAE,MAAM,GAAG,EAAE,CAAC,MAAM,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE;AAC9D,IAAI,MAAM,GAAG,MAAM,CAAC,eAAe,CAAC;AACpC,IAAI,KAAK,GAAG,MAAM,CAAC,YAAY,CAAC;AAChC,IAAI,YAAY,GAAG,MAAM,CAAC,YAAY;AACtC,IAAI,QAAQ,GAAG,MAAM,CAAC,QAAQ;AAC9B,IAAI,gBAAgB,GAAG,MAAM,CAAC,sBAAsB;AACpD,IAAI,iBAAiB,GAAG,MAAM,CAAC,uBAAuB;AACtD,IAAI,IAAI,GAAG,QAAQ,CAAC,YAAY,EAAE,OAAO,EAAE,EAAE,KAAK,QAAQ,CAAC,EAAE,CAAC;AAC9D,IAAI,CAAC,GAAG,MAAM,CAAC,CAAC;AAChB,IAAI,CAAC,GAAG,MAAM,CAAC,CAAC;AAChB,IAAI,IAAI,GAAG,MAAM,CAAC,IAAI;AACtB,IAAI,SAAS,GAAG,MAAM,CAAC,SAAS;AAChC,IAAI,aAAa,GAAG,MAAM,CAAC,aAAa;AACxC,IAAI,mBAAmB,GAAG,MAAM,CAAC,mBAAmB;AACpD,IAAI,gBAAgB,GAAG,MAAM,CAAC,gBAAgB;AAC9C,IAAI,YAAY,GAAG,MAAM,CAAC,YAAY;AACtC,IAAI,QAAQ,GAAG,MAAM,CAAC,QAAQ;AAC9B,IAAI,MAAM,GAAG,MAAM,CAAC,MAAM;AAC1B,IAAI,WAAW,GAAG,EAAE;AACP,QAAQ,CAAC,YAAY,EAAE,QAAQ;AAC5C,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC,GAAG,CAAC;AACrB,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC,IAAI,MAAM,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC;AACpC,IAAI,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC,GAAG,WAAW;AACnC,IAAI,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC;AACtB,CAAC,EAAE,EAAE;AACL,IAAI,WAAW,GAAG,YAAY,EAAE,OAAO,IAAI,EAAE,IAAI,MAAM,CAAC,OAAO,EAAE,CAAC,EAAE;AACpE,IAAI,gBAAgB,GAAG,MAAM,CAAC,YAAY,CAAC,gBAAgB;AAC3D,IAAI,QAAQ,GAAG,MAAM,CAAC;AACtB,IAAI,IAAI,EAAE;AACV,QAAQ,MAAM,EAAE,IAAI;AACpB,QAAQ,IAAI,EAAE,gBAAgB,CAAC,IAAI;AACnC,QAAQ,OAAO,EAAE,YAAY;AAC7B,YAAY,IAAI,WAAW,EAAE;AAC7B,gBAAgB,MAAM,CAAC,YAAY,CAAC,EAAE,KAAK,EAAE,SAAS,CAAC,IAAI,EAAE,CAAC;AAC9D,SAAS;AACT,KAAK;AACL,IAAI,EAAE,EAAE;AACR,QAAQ,MAAM,EAAE,IAAI;AACpB,QAAQ,IAAI,EAAE,gBAAgB,CAAC,EAAE;AACjC,QAAQ,OAAO,EAAE,YAAY;AAC7B,YAAY,IAAI,WAAW,EAAE;AAC7B,gBAAgB,MAAM,CAAC,YAAY,CAAC,EAAE,KAAK,EAAE,SAAS,CAAC,EAAE,EAAE,CAAC;AAC5D,SAAS;AACT,KAAK;AACL,IAAI,IAAI,EAAE;AACV,QAAQ,MAAM,EAAE,IAAI;AACpB,QAAQ,IAAI,EAAE,gBAAgB,CAAC,IAAI;AACnC,QAAQ,OAAO,EAAE,YAAY;AAC7B,YAAY,IAAI,WAAW,EAAE;AAC7B,gBAAgB,MAAM,CAAC,YAAY,CAAC,EAAE,KAAK,EAAE,SAAS,CAAC,IAAI,EAAE,CAAC;AAC9D,SAAS;AACT,KAAK;AACL,IAAI,KAAK,EAAE;AACX,QAAQ,MAAM,EAAE,IAAI;AACpB,QAAQ,IAAI,EAAE,gBAAgB,CAAC,KAAK;AACpC,QAAQ,OAAO,EAAE,YAAY;AAC7B,YAAY,IAAI,WAAW,EAAE;AAC7B,gBAAgB,MAAM,CAAC,YAAY,CAAC,EAAE,KAAK,EAAE,SAAS,CAAC,KAAK,EAAE,CAAC;AAC/D,SAAS;AACT,KAAK;AACL,IAAI,MAAM,EAAE;AACZ,QAAQ,IAAI,EAAE,gBAAgB,CAAC,MAAM;AACrC,QAAQ,OAAO,EAAE,YAAY;AAC7B,YAAY,IAAI,WAAW,EAAE,EAAE;AAC/B,gBAAgB,MAAM,CAAC,aAAa,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC;AAC1D;AACA;AACA;AACA;AACA,SAAS;AACT,KAAK;AACL,CAAC,CAAC;AACF,IAAI,KAAK,GAAG,UAAU,SAAS,EAAE;AACjC,IAAI,OAAO;AACX,QAAQ,UAAU,EAAE,YAAY,CAAC,GAAG,CAAC,SAAS,CAAC;AAC/C,QAAQ,OAAO,EAAE,aAAa;AAC9B,QAAQ,MAAM,EAAE;AAChB,YAAY,SAAS,EAAE;AACvB,SAAS;AACT,KAAK;AACL,CAAC;AACD,KAAK,CAAC,UAAU,OAAO,EAAE;AACzB,IAAI,KAAK,CAAC,SAAS,CAAC,sBAAsB,EAAE,OAAO,CAAC,iBAAiB,CAAC;AACtE,IAAI,KAAK,CAAC,SAAS,CAAC,6BAA6B,EAAE,MAAM,CAAC,QAAQ,EAAE,OAAO,CAAC,iBAAiB,CAAC;AAC9F,IAAI,OAAO,YAAY;AACvB,QAAQ,KAAK,CAAC,SAAS,CAAC,yBAAyB,EAAE,OAAO,CAAC,iBAAiB,CAAC;AAC7E,QAAQ,KAAK,CAAC,SAAS,CAAC,gCAAgC,EAAE,MAAM,CAAC,QAAQ,EAAE,OAAO,CAAC,iBAAiB,CAAC;AACrG,KAAK;AACL,CAAC,CAAC;AACF,IAAI,CAAC,YAAY;AACjB,IAAI,KAAK,CAAC,SAAS,CAAC,wBAAwB,CAAC;AAC7C,CAAC,CAAC;AACF,QAAQ,IAAI,KAAK,GAAG,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,cAAc,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,gBAAgB,EAAE,SAAS,IAAI,CAAC,CAAC,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC,SAAS,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,mBAAmB,EAAE,QAAQ,EAAE,gBAAgB,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,CAAC,EAAE,CAAC,CAAC,SAAS,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,SAAS,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,iBAAiB,EAAE,SAAS,IAAI,CAAC,CAAC,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC,SAAS,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,CAAC;AACjd,QAAQ,OAAO;AACf;;;;"}

package/dist/index2.js

@@ -10,6 +10,7 @@ import { RpgGui } from './index9.js';
 import { EffectManager } from './index20.js';
 import { lastValueFrom } from 'rxjs';
 import { GlobalConfigToken } from './index8.js';
+import * as PIXI from 'pixi.js';
 
 class RpgClientEngine {
   constructor(context) {
@@ -24,6 +25,9 @@ class RpgClientEngine {
     this.particleSettings = {
       emitters: []
     };
+    this.playerIdSignal = signal(null);
+    this.spriteComponentsBehind = signal([]);
+    this.spriteComponentsInFront = signal([]);
     this.webSocket = inject(context, WebSocketToken);
     this.guiService = inject(context, RpgGui);
     this.loadMapService = inject(context, LoadMapToken);
@@ -32,13 +36,22 @@ class RpgClientEngine {
   }
   async start() {
     this.selector = document.body.querySelector("#rpg");
-    await bootstrapCanvas(this.selector, component);
+    const { app, canvasElement } = await bootstrapCanvas(this.selector, component);
+    this.renderer = app.renderer;
+    this.tick = canvasElement?.propObservables?.context["tick"].observable;
     await lastValueFrom(this.hooks.callHooks("client-engine-onStart", this));
+    window.addEventListener("resize", () => {
+      this.hooks.callHooks("client-engine-onWindowResize", this).subscribe();
+    });
+    this.tick.subscribe((tick) => {
+      this.hooks.callHooks("client-engine-onStep", this, tick).subscribe();
+    });
     this.hooks.callHooks("client-spritesheets-load", this).subscribe();
     this.hooks.callHooks("client-sounds-load", this).subscribe();
     this.hooks.callHooks("client-gui-load", this).subscribe();
     this.hooks.callHooks("client-particles-load", this).subscribe();
     this.hooks.callHooks("client-effects-load", this).subscribe();
+    this.hooks.callHooks("client-sprite-load", this).subscribe();
     await this.webSocket.connection(() => {
       this.initListeners();
       this.guiService._initialize();
@@ -46,6 +59,8 @@ class RpgClientEngine {
   }
   initListeners() {
     this.webSocket.on("sync", (data) => {
+      if (data.pId) this.playerIdSignal.set(data.pId);
+      this.hooks.callHooks("client-sceneMap-onChanges", this.sceneMap, { partial: data }).subscribe();
       load(this.sceneMap, data, true);
     });
     this.webSocket.on("changeMap", (data) => {
@@ -59,6 +74,15 @@ class RpgClientEngine {
       const player = this.sceneMap.getObjectById(object);
       this.getEffect(id).displayEffect(params, player);
     });
+    this.webSocket.on("open", () => {
+      this.hooks.callHooks("client-engine-onConnected", this, this.socket).subscribe();
+    });
+    this.webSocket.on("close", () => {
+      this.hooks.callHooks("client-engine-onDisconnected", this, this.socket).subscribe();
+    });
+    this.webSocket.on("error", (error) => {
+      this.hooks.callHooks("client-engine-onConnectError", this, error, this.socket).subscribe();
+    });
   }
   async loadScene(mapId) {
     this.webSocket.updateProperties({ room: mapId });
@@ -82,6 +106,40 @@ class RpgClientEngine {
     this.particleSettings.emitters.push(particle);
     return particle;
   }
+  /**
+   * Add a component to render behind sprites
+   * Components added with this method will be displayed with a lower z-index than the sprite
+   * 
+   * @param component - The component to add behind sprites
+   * @returns The added component
+   * 
+   * @example
+   * ```ts
+   * // Add a shadow component behind all sprites
+   * engine.addSpriteComponentBehind(ShadowComponent);
+   * ```
+   */
+  addSpriteComponentBehind(component) {
+    this.spriteComponentsBehind.update((components) => [...components, component]);
+    return component;
+  }
+  /**
+   * Add a component to render in front of sprites
+   * Components added with this method will be displayed with a higher z-index than the sprite
+   * 
+   * @param component - The component to add in front of sprites
+   * @returns The added component
+   * 
+   * @example
+   * ```ts
+   * // Add a health bar component in front of all sprites
+   * engine.addSpriteComponentInFront(HealthBarComponent);
+   * ```
+   */
+  addSpriteComponentInFront(component) {
+    this.spriteComponentsInFront.update((components) => [...components, component]);
+    return component;
+  }
   addEffect(effect) {
     const instance = new EffectManager();
     this.effects.push({
@@ -100,12 +158,23 @@ class RpgClientEngine {
     return effect.instance;
   }
   processInput({ input }) {
+    this.hooks.callHooks("client-engine-onInput", this, { input, playerId: this.playerId }).subscribe();
     this.webSocket.emit("move", { input });
   }
   processAction({ action }) {
     if (this.stopProcessingInput) return;
+    this.hooks.callHooks("client-engine-onInput", this, { input: "action", playerId: this.playerId }).subscribe();
     this.webSocket.emit("action", { action });
   }
+  get PIXI() {
+    return PIXI;
+  }
+  get socket() {
+    return this.webSocket;
+  }
+  get playerId() {
+    return this.playerIdSignal();
+  }
 }
 
 export { RpgClientEngine };

package/dist/index2.js.map

@@ -1 +1 @@
-{"version":3,"file":"index2.js","sources":["../src/RpgClientEngine.ts"],"sourcesContent":["import Canvas from \"./components/scenes/canvas.ce\";\nimport { Context, inject } from \"@signe/di\";\nimport { signal, bootstrapCanvas } from \"canvasengine\";\nimport { AbstractWebsocket, WebSocketToken } from \"./services/AbstractSocket\";\nimport { LoadMapService, LoadMapToken } from \"./services/loadMap\";\nimport { Hooks, ModulesToken } from \"@rpgjs/common\";\nimport { load } from \"@signe/sync\";\nimport { RpgClientMap } from \"./Game/Map\"\nimport { RpgGui } from \"./Gui/Gui\";\nimport { EffectManager } from \"./Game/EffectManager\";\nimport { lastValueFrom } from \"rxjs\";\nimport { GlobalConfigToken } from \"./module\";\nimport { ClientIo } from \"@signe/room\";\n\nexport class RpgClientEngine<T = any> {\n  private guiService: RpgGui;\n  private webSocket: AbstractWebsocket;\n  private loadMapService: LoadMapService;\n  private hooks: Hooks;\n  private sceneMap: RpgClientMap = new RpgClientMap();\n  private selector: HTMLElement;\n  public globalConfig: T;\n  public sceneComponent: any;\n  stopProcessingInput = false;\n\n  width = signal(\"100%\");\n  height = signal(\"100%\");\n  spritesheets: Map<string, any> = new Map();\n  sounds: Map<string, any> = new Map();\n  effects: any[] = [];\n  particleSettings: {\n    emitters: any[]\n  } = {\n    emitters: []\n  }\n\n  constructor(public context: Context) {\n    this.webSocket = inject(context, WebSocketToken);\n    this.guiService = inject(context, RpgGui);\n    this.loadMapService = inject(context, LoadMapToken);\n    this.hooks = inject<Hooks>(context, ModulesToken);\n    this.globalConfig = inject(context, GlobalConfigToken)\n  }\n\n  async start() {\n    this.selector = document.body.querySelector(\"#rpg\") as HTMLElement;\n\n    await bootstrapCanvas(this.selector, Canvas);\n\n    await lastValueFrom(this.hooks.callHooks(\"client-engine-onStart\", this));\n\n    this.hooks.callHooks(\"client-spritesheets-load\", this).subscribe();\n    this.hooks.callHooks(\"client-sounds-load\", this).subscribe();\n    this.hooks.callHooks(\"client-gui-load\", this).subscribe();\n    this.hooks.callHooks(\"client-particles-load\", this).subscribe();\n    this.hooks.callHooks(\"client-effects-load\", this).subscribe();\n\n  \n    await this.webSocket.connection(() => {\n      this.initListeners()\n      this.guiService._initialize()\n    });\n  }\n\n  private initListeners() {\n    this.webSocket.on(\"sync\", (data) => {\n      load(this.sceneMap, data, true);\n    });\n\n    this.webSocket.on(\"changeMap\", (data) => {\n      this.loadScene(data.mapId);\n    });\n\n    this.webSocket.on(\"showEffect\", (data) => {\n      const { params, object, id } = data;\n      if (!object) {\n        throw new Error(\"Object not found\");\n      }\n      const player = this.sceneMap.getObjectById(object);\n      this.getEffect(id).displayEffect(params, player)\n    });\n  }\n  \n  private async loadScene(mapId: string) {\n    this.webSocket.updateProperties({ room: mapId })\n    await this.webSocket.reconnect(() => {\n      this.initListeners()\n      this.guiService._initialize()\n    })\n    const res = await this.loadMapService.load(mapId)\n    this.sceneMap.data.set(res)\n    this.hooks.callHooks(\"client-sceneMap-onAfterLoading\", this.sceneMap).subscribe();\n    //this.sceneMap.loadPhysic()\n  }\n\n  addSpriteSheet<T = any>(spritesheetClass: any, id?: string): any {\n    this.spritesheets.set(id || spritesheetClass.id, spritesheetClass);\n    return spritesheetClass as any;\n  }\n\n  addSound(sound: any, id?: string) {\n    this.sounds.set(id || sound.id, sound);\n    return sound;\n  }\n\n  addParticle(particle: any) {\n    this.particleSettings.emitters.push(particle)\n    return particle;\n  }\n\n  addEffect(effect: {\n    component: any,\n    id: string\n  }) {\n    const instance = new EffectManager()\n    this.effects.push({\n      id: effect.id,\n      component: effect.component,\n      instance: instance,\n      current: instance.current\n    })\n    return effect;\n  }\n\n  getEffect(id: string): EffectManager {\n    const effect = this.effects.find((effect) => effect.id === id)\n    if (!effect) {\n      throw new Error(`Effect with id ${id} not found`)\n    }\n    return effect.instance\n  }\n\n  processInput({ input }: { input: number }) {\n    this.webSocket.emit('move', { input })\n  }\n\n  processAction({ action }: { action: number }) {\n    if (this.stopProcessingInput) return;\n    this.webSocket.emit('action', { action })\n  }\n}\n"],"names":["Canvas","effect"],"mappings":";;;;;;;;;;;;;AAcO,MAAM,eAAyB,CAAA;AAAA,EAsBpC,YAAmB,OAAkB,EAAA;AAAlB,IAAA,IAAA,CAAA,OAAA,GAAA,OAAA;AAjBnB,IAAQ,IAAA,CAAA,QAAA,GAAyB,IAAI,YAAa,EAAA;AAIlD,IAAsB,IAAA,CAAA,mBAAA,GAAA,KAAA;AAEtB,IAAA,IAAA,CAAA,KAAA,GAAQ,OAAO,MAAM,CAAA;AACrB,IAAA,IAAA,CAAA,MAAA,GAAS,OAAO,MAAM,CAAA;AACtB,IAAA,IAAA,CAAA,YAAA,uBAAqC,GAAI,EAAA;AACzC,IAAA,IAAA,CAAA,MAAA,uBAA+B,GAAI,EAAA;AACnC,IAAA,IAAA,CAAA,OAAA,GAAiB,EAAC;AAClB,IAEI,IAAA,CAAA,gBAAA,GAAA;AAAA,MACF,UAAU;AAAC,KACb;AAGE,IAAK,IAAA,CAAA,SAAA,GAAY,MAAO,CAAA,OAAA,EAAS,cAAc,CAAA;AAC/C,IAAK,IAAA,CAAA,UAAA,GAAa,MAAO,CAAA,OAAA,EAAS,MAAM,CAAA;AACxC,IAAK,IAAA,CAAA,cAAA,GAAiB,MAAO,CAAA,OAAA,EAAS,YAAY,CAAA;AAClD,IAAK,IAAA,CAAA,KAAA,GAAQ,MAAc,CAAA,OAAA,EAAS,YAAY,CAAA;AAChD,IAAK,IAAA,CAAA,YAAA,GAAe,MAAO,CAAA,OAAA,EAAS,iBAAiB,CAAA;AAAA;AACvD,EAEA,MAAM,KAAQ,GAAA;AACZ,IAAA,IAAA,CAAK,QAAW,GAAA,QAAA,CAAS,IAAK,CAAA,aAAA,CAAc,MAAM,CAAA;AAElD,IAAM,MAAA,eAAA,CAAgB,IAAK,CAAA,QAAA,EAAUA,SAAM,CAAA;AAE3C,IAAA,MAAM,cAAc,IAAK,CAAA,KAAA,CAAM,SAAU,CAAA,uBAAA,EAAyB,IAAI,CAAC,CAAA;AAEvE,IAAA,IAAA,CAAK,KAAM,CAAA,SAAA,CAAU,0BAA4B,EAAA,IAAI,EAAE,SAAU,EAAA;AACjE,IAAA,IAAA,CAAK,KAAM,CAAA,SAAA,CAAU,oBAAsB,EAAA,IAAI,EAAE,SAAU,EAAA;AAC3D,IAAA,IAAA,CAAK,KAAM,CAAA,SAAA,CAAU,iBAAmB,EAAA,IAAI,EAAE,SAAU,EAAA;AACxD,IAAA,IAAA,CAAK,KAAM,CAAA,SAAA,CAAU,uBAAyB,EAAA,IAAI,EAAE,SAAU,EAAA;AAC9D,IAAA,IAAA,CAAK,KAAM,CAAA,SAAA,CAAU,qBAAuB,EAAA,IAAI,EAAE,SAAU,EAAA;AAG5D,IAAM,MAAA,IAAA,CAAK,SAAU,CAAA,UAAA,CAAW,MAAM;AACpC,MAAA,IAAA,CAAK,aAAc,EAAA;AACnB,MAAA,IAAA,CAAK,WAAW,WAAY,EAAA;AAAA,KAC7B,CAAA;AAAA;AACH,EAEQ,aAAgB,GAAA;AACtB,IAAA,IAAA,CAAK,SAAU,CAAA,EAAA,CAAG,MAAQ,EAAA,CAAC,IAAS,KAAA;AAClC,MAAK,IAAA,CAAA,IAAA,CAAK,QAAU,EAAA,IAAA,EAAM,IAAI,CAAA;AAAA,KAC/B,CAAA;AAED,IAAA,IAAA,CAAK,SAAU,CAAA,EAAA,CAAG,WAAa,EAAA,CAAC,IAAS,KAAA;AACvC,MAAK,IAAA,CAAA,SAAA,CAAU,KAAK,KAAK,CAAA;AAAA,KAC1B,CAAA;AAED,IAAA,IAAA,CAAK,SAAU,CAAA,EAAA,CAAG,YAAc,EAAA,CAAC,IAAS,KAAA;AACxC,MAAA,MAAM,EAAE,MAAA,EAAQ,MAAQ,EAAA,EAAA,EAAO,GAAA,IAAA;AAC/B,MAAA,IAAI,CAAC,MAAQ,EAAA;AACX,QAAM,MAAA,IAAI,MAAM,kBAAkB,CAAA;AAAA;AAEpC,MAAA,MAAM,MAAS,GAAA,IAAA,CAAK,QAAS,CAAA,aAAA,CAAc,MAAM,CAAA;AACjD,MAAA,IAAA,CAAK,SAAU,CAAA,EAAE,CAAE,CAAA,aAAA,CAAc,QAAQ,MAAM,CAAA;AAAA,KAChD,CAAA;AAAA;AACH,EAEA,MAAc,UAAU,KAAe,EAAA;AACrC,IAAA,IAAA,CAAK,SAAU,CAAA,gBAAA,CAAiB,EAAE,IAAA,EAAM,OAAO,CAAA;AAC/C,IAAM,MAAA,IAAA,CAAK,SAAU,CAAA,SAAA,CAAU,MAAM;AACnC,MAAA,IAAA,CAAK,aAAc,EAAA;AACnB,MAAA,IAAA,CAAK,WAAW,WAAY,EAAA;AAAA,KAC7B,CAAA;AACD,IAAA,MAAM,GAAM,GAAA,MAAM,IAAK,CAAA,cAAA,CAAe,KAAK,KAAK,CAAA;AAChD,IAAK,IAAA,CAAA,QAAA,CAAS,IAAK,CAAA,GAAA,CAAI,GAAG,CAAA;AAC1B,IAAA,IAAA,CAAK,MAAM,SAAU,CAAA,gCAAA,EAAkC,IAAK,CAAA,QAAQ,EAAE,SAAU,EAAA;AAAA;AAElF,EAEA,cAAA,CAAwB,kBAAuB,EAAkB,EAAA;AAC/D,IAAA,IAAA,CAAK,YAAa,CAAA,GAAA,CAAI,EAAM,IAAA,gBAAA,CAAiB,IAAI,gBAAgB,CAAA;AACjE,IAAO,OAAA,gBAAA;AAAA;AACT,EAEA,QAAA,CAAS,OAAY,EAAa,EAAA;AAChC,IAAA,IAAA,CAAK,MAAO,CAAA,GAAA,CAAI,EAAM,IAAA,KAAA,CAAM,IAAI,KAAK,CAAA;AACrC,IAAO,OAAA,KAAA;AAAA;AACT,EAEA,YAAY,QAAe,EAAA;AACzB,IAAK,IAAA,CAAA,gBAAA,CAAiB,QAAS,CAAA,IAAA,CAAK,QAAQ,CAAA;AAC5C,IAAO,OAAA,QAAA;AAAA;AACT,EAEA,UAAU,MAGP,EAAA;AACD,IAAM,MAAA,QAAA,GAAW,IAAI,aAAc,EAAA;AACnC,IAAA,IAAA,CAAK,QAAQ,IAAK,CAAA;AAAA,MAChB,IAAI,MAAO,CAAA,EAAA;AAAA,MACX,WAAW,MAAO,CAAA,SAAA;AAAA,MAClB,QAAA;AAAA,MACA,SAAS,QAAS,CAAA;AAAA,KACnB,CAAA;AACD,IAAO,OAAA,MAAA;AAAA;AACT,EAEA,UAAU,EAA2B,EAAA;AACnC,IAAM,MAAA,MAAA,GAAS,KAAK,OAAQ,CAAA,IAAA,CAAK,CAACC,OAAWA,KAAAA,OAAAA,CAAO,OAAO,EAAE,CAAA;AAC7D,IAAA,IAAI,CAAC,MAAQ,EAAA;AACX,MAAA,MAAM,IAAI,KAAA,CAAM,CAAkB,eAAA,EAAA,EAAE,CAAY,UAAA,CAAA,CAAA;AAAA;AAElD,IAAA,OAAO,MAAO,CAAA,QAAA;AAAA;AAChB,EAEA,YAAA,CAAa,EAAE,KAAA,EAA4B,EAAA;AACzC,IAAA,IAAA,CAAK,SAAU,CAAA,IAAA,CAAK,MAAQ,EAAA,EAAE,OAAO,CAAA;AAAA;AACvC,EAEA,aAAA,CAAc,EAAE,MAAA,EAA8B,EAAA;AAC5C,IAAA,IAAI,KAAK,mBAAqB,EAAA;AAC9B,IAAA,IAAA,CAAK,SAAU,CAAA,IAAA,CAAK,QAAU,EAAA,EAAE,QAAQ,CAAA;AAAA;AAE5C;;;;"}
+{"version":3,"file":"index2.js","sources":["../src/RpgClientEngine.ts"],"sourcesContent":["import Canvas from \"./components/scenes/canvas.ce\";\nimport { Context, inject } from \"@signe/di\";\nimport { signal, bootstrapCanvas } from \"canvasengine\";\nimport { AbstractWebsocket, WebSocketToken } from \"./services/AbstractSocket\";\nimport { LoadMapService, LoadMapToken } from \"./services/loadMap\";\nimport { Hooks, ModulesToken } from \"@rpgjs/common\";\nimport { load } from \"@signe/sync\";\nimport { RpgClientMap } from \"./Game/Map\"\nimport { RpgGui } from \"./Gui/Gui\";\nimport { EffectManager } from \"./Game/EffectManager\";\nimport { lastValueFrom, Observable } from \"rxjs\";\nimport { GlobalConfigToken } from \"./module\";\nimport * as PIXI from \"pixi.js\";\n\nexport class RpgClientEngine<T = any> {\n  private guiService: RpgGui;\n  private webSocket: AbstractWebsocket;\n  private loadMapService: LoadMapService;\n  private hooks: Hooks;\n  private sceneMap: RpgClientMap = new RpgClientMap();\n  private selector: HTMLElement;\n  public globalConfig: T;\n  public sceneComponent: any;\n  stopProcessingInput = false;\n  width = signal(\"100%\");\n  height = signal(\"100%\");\n  spritesheets: Map<string, any> = new Map();\n  sounds: Map<string, any> = new Map();\n  effects: any[] = [];\n  particleSettings: {\n    emitters: any[]\n  } = {\n    emitters: []\n  }\n  renderer: PIXI.Renderer;\n  tick: Observable<number>;\n  playerIdSignal = signal<string | null>(null);\n  spriteComponentsBehind = signal<any[]>([]);\n  spriteComponentsInFront = signal<any[]>([]);\n\n  constructor(public context: Context) {\n    this.webSocket = inject(context, WebSocketToken);\n    this.guiService = inject(context, RpgGui);\n    this.loadMapService = inject(context, LoadMapToken);\n    this.hooks = inject<Hooks>(context, ModulesToken);\n    this.globalConfig = inject(context, GlobalConfigToken)\n  }\n\n  async start() {\n    this.selector = document.body.querySelector(\"#rpg\") as HTMLElement;\n\n    const { app, canvasElement } = await bootstrapCanvas(this.selector, Canvas);\n    this.renderer = app.renderer as PIXI.Renderer;\n    this.tick = canvasElement?.propObservables?.context['tick'].observable\n\n    await lastValueFrom(this.hooks.callHooks(\"client-engine-onStart\", this));\n\n    // wondow is resize\n    window.addEventListener('resize', () => {\n      this.hooks.callHooks(\"client-engine-onWindowResize\", this).subscribe();\n    })\n\n    this.tick.subscribe((tick) => {\n      this.hooks.callHooks(\"client-engine-onStep\", this, tick).subscribe();\n    })\n\n    this.hooks.callHooks(\"client-spritesheets-load\", this).subscribe();\n    this.hooks.callHooks(\"client-sounds-load\", this).subscribe();\n    this.hooks.callHooks(\"client-gui-load\", this).subscribe();\n    this.hooks.callHooks(\"client-particles-load\", this).subscribe();\n    this.hooks.callHooks(\"client-effects-load\", this).subscribe();\n    this.hooks.callHooks(\"client-sprite-load\", this).subscribe();\n\n  \n    await this.webSocket.connection(() => {\n      this.initListeners()\n      this.guiService._initialize()\n    });\n  }\n\n  private initListeners() {\n    this.webSocket.on(\"sync\", (data) => {\n      if (data.pId) this.playerIdSignal.set(data.pId)\n      this.hooks.callHooks(\"client-sceneMap-onChanges\", this.sceneMap, { partial: data }).subscribe();\n      load(this.sceneMap, data, true);\n    });\n\n    this.webSocket.on(\"changeMap\", (data) => {\n      this.loadScene(data.mapId);\n    });\n\n    this.webSocket.on(\"showEffect\", (data) => {\n      const { params, object, id } = data;\n      if (!object) {\n        throw new Error(\"Object not found\");\n      }\n      const player = this.sceneMap.getObjectById(object);\n      this.getEffect(id).displayEffect(params, player)\n    });\n\n    this.webSocket.on('open', () => {\n      this.hooks.callHooks(\"client-engine-onConnected\", this, this.socket).subscribe();\n    })\n\n    this.webSocket.on('close', () => {\n      this.hooks.callHooks(\"client-engine-onDisconnected\", this, this.socket).subscribe();\n    })\n\n    this.webSocket.on('error', (error) => {\n      this.hooks.callHooks(\"client-engine-onConnectError\", this, error, this.socket).subscribe();\n    })\n  }\n  \n  private async loadScene(mapId: string) {\n    this.webSocket.updateProperties({ room: mapId })\n    await this.webSocket.reconnect(() => {\n      this.initListeners()\n      this.guiService._initialize()\n    })\n    const res = await this.loadMapService.load(mapId)\n    this.sceneMap.data.set(res)\n    this.hooks.callHooks(\"client-sceneMap-onAfterLoading\", this.sceneMap).subscribe();\n    //this.sceneMap.loadPhysic()\n  }\n\n  addSpriteSheet<T = any>(spritesheetClass: any, id?: string): any {\n    this.spritesheets.set(id || spritesheetClass.id, spritesheetClass);\n    return spritesheetClass as any;\n  }\n\n  addSound(sound: any, id?: string) {\n    this.sounds.set(id || sound.id, sound);\n    return sound;\n  }\n\n  addParticle(particle: any) {\n    this.particleSettings.emitters.push(particle)\n    return particle;\n  }\n\n  /**\n   * Add a component to render behind sprites\n   * Components added with this method will be displayed with a lower z-index than the sprite\n   * \n   * @param component - The component to add behind sprites\n   * @returns The added component\n   * \n   * @example\n   * ```ts\n   * // Add a shadow component behind all sprites\n   * engine.addSpriteComponentBehind(ShadowComponent);\n   * ```\n   */\n  addSpriteComponentBehind(component: any) {\n    this.spriteComponentsBehind.update((components: any[]) => [...components, component])\n    return component\n  }\n\n  /**\n   * Add a component to render in front of sprites\n   * Components added with this method will be displayed with a higher z-index than the sprite\n   * \n   * @param component - The component to add in front of sprites\n   * @returns The added component\n   * \n   * @example\n   * ```ts\n   * // Add a health bar component in front of all sprites\n   * engine.addSpriteComponentInFront(HealthBarComponent);\n   * ```\n   */\n  addSpriteComponentInFront(component: any) {\n    this.spriteComponentsInFront.update((components: any[]) => [...components, component])\n    return component\n  }\n\n  addEffect(effect: {\n    component: any,\n    id: string\n  }) {\n    const instance = new EffectManager()\n    this.effects.push({\n      id: effect.id,\n      component: effect.component,\n      instance: instance,\n      current: instance.current\n    })\n    return effect;\n  }\n\n  getEffect(id: string): EffectManager {\n    const effect = this.effects.find((effect) => effect.id === id)\n    if (!effect) {\n      throw new Error(`Effect with id ${id} not found`)\n    }\n    return effect.instance\n  }\n\n  processInput({ input }: { input: number }) {\n    this.hooks.callHooks(\"client-engine-onInput\", this, { input, playerId: this.playerId }).subscribe();\n    this.webSocket.emit('move', { input })\n  }\n\n  processAction({ action }: { action: number }) {\n    if (this.stopProcessingInput) return;\n    this.hooks.callHooks(\"client-engine-onInput\", this, { input: 'action', playerId: this.playerId }).subscribe();\n    this.webSocket.emit('action', { action })\n  }\n\n  get PIXI() {\n    return PIXI\n  }\n\n  get socket() {\n    return this.webSocket\n  }\n  \n  get playerId() {\n    return this.playerIdSignal()\n  }\n}\n"],"names":["Canvas","effect"],"mappings":";;;;;;;;;;;;;;AAcO,MAAM,eAAyB,CAAA;AAAA,EA0BpC,YAAmB,OAAkB,EAAA;AAAlB,IAAA,IAAA,CAAA,OAAA,GAAA,OAAA;AArBnB,IAAQ,IAAA,CAAA,QAAA,GAAyB,IAAI,YAAa,EAAA;AAIlD,IAAsB,IAAA,CAAA,mBAAA,GAAA,KAAA;AACtB,IAAA,IAAA,CAAA,KAAA,GAAQ,OAAO,MAAM,CAAA;AACrB,IAAA,IAAA,CAAA,MAAA,GAAS,OAAO,MAAM,CAAA;AACtB,IAAA,IAAA,CAAA,YAAA,uBAAqC,GAAI,EAAA;AACzC,IAAA,IAAA,CAAA,MAAA,uBAA+B,GAAI,EAAA;AACnC,IAAA,IAAA,CAAA,OAAA,GAAiB,EAAC;AAClB,IAEI,IAAA,CAAA,gBAAA,GAAA;AAAA,MACF,UAAU;AAAC,KACb;AAGA,IAAA,IAAA,CAAA,cAAA,GAAiB,OAAsB,IAAI,CAAA;AAC3C,IAAyB,IAAA,CAAA,sBAAA,GAAA,MAAA,CAAc,EAAE,CAAA;AACzC,IAA0B,IAAA,CAAA,uBAAA,GAAA,MAAA,CAAc,EAAE,CAAA;AAGxC,IAAK,IAAA,CAAA,SAAA,GAAY,MAAO,CAAA,OAAA,EAAS,cAAc,CAAA;AAC/C,IAAK,IAAA,CAAA,UAAA,GAAa,MAAO,CAAA,OAAA,EAAS,MAAM,CAAA;AACxC,IAAK,IAAA,CAAA,cAAA,GAAiB,MAAO,CAAA,OAAA,EAAS,YAAY,CAAA;AAClD,IAAK,IAAA,CAAA,KAAA,GAAQ,MAAc,CAAA,OAAA,EAAS,YAAY,CAAA;AAChD,IAAK,IAAA,CAAA,YAAA,GAAe,MAAO,CAAA,OAAA,EAAS,iBAAiB,CAAA;AAAA;AACvD,EAEA,MAAM,KAAQ,GAAA;AACZ,IAAA,IAAA,CAAK,QAAW,GAAA,QAAA,CAAS,IAAK,CAAA,aAAA,CAAc,MAAM,CAAA;AAElD,IAAM,MAAA,EAAE,KAAK,aAAc,EAAA,GAAI,MAAM,eAAgB,CAAA,IAAA,CAAK,UAAUA,SAAM,CAAA;AAC1E,IAAA,IAAA,CAAK,WAAW,GAAI,CAAA,QAAA;AACpB,IAAA,IAAA,CAAK,IAAO,GAAA,aAAA,EAAe,eAAiB,EAAA,OAAA,CAAQ,MAAM,CAAE,CAAA,UAAA;AAE5D,IAAA,MAAM,cAAc,IAAK,CAAA,KAAA,CAAM,SAAU,CAAA,uBAAA,EAAyB,IAAI,CAAC,CAAA;AAGvE,IAAO,MAAA,CAAA,gBAAA,CAAiB,UAAU,MAAM;AACtC,MAAA,IAAA,CAAK,KAAM,CAAA,SAAA,CAAU,8BAAgC,EAAA,IAAI,EAAE,SAAU,EAAA;AAAA,KACtE,CAAA;AAED,IAAK,IAAA,CAAA,IAAA,CAAK,SAAU,CAAA,CAAC,IAAS,KAAA;AAC5B,MAAA,IAAA,CAAK,MAAM,SAAU,CAAA,sBAAA,EAAwB,IAAM,EAAA,IAAI,EAAE,SAAU,EAAA;AAAA,KACpE,CAAA;AAED,IAAA,IAAA,CAAK,KAAM,CAAA,SAAA,CAAU,0BAA4B,EAAA,IAAI,EAAE,SAAU,EAAA;AACjE,IAAA,IAAA,CAAK,KAAM,CAAA,SAAA,CAAU,oBAAsB,EAAA,IAAI,EAAE,SAAU,EAAA;AAC3D,IAAA,IAAA,CAAK,KAAM,CAAA,SAAA,CAAU,iBAAmB,EAAA,IAAI,EAAE,SAAU,EAAA;AACxD,IAAA,IAAA,CAAK,KAAM,CAAA,SAAA,CAAU,uBAAyB,EAAA,IAAI,EAAE,SAAU,EAAA;AAC9D,IAAA,IAAA,CAAK,KAAM,CAAA,SAAA,CAAU,qBAAuB,EAAA,IAAI,EAAE,SAAU,EAAA;AAC5D,IAAA,IAAA,CAAK,KAAM,CAAA,SAAA,CAAU,oBAAsB,EAAA,IAAI,EAAE,SAAU,EAAA;AAG3D,IAAM,MAAA,IAAA,CAAK,SAAU,CAAA,UAAA,CAAW,MAAM;AACpC,MAAA,IAAA,CAAK,aAAc,EAAA;AACnB,MAAA,IAAA,CAAK,WAAW,WAAY,EAAA;AAAA,KAC7B,CAAA;AAAA;AACH,EAEQ,aAAgB,GAAA;AACtB,IAAA,IAAA,CAAK,SAAU,CAAA,EAAA,CAAG,MAAQ,EAAA,CAAC,IAAS,KAAA;AAClC,MAAA,IAAI,KAAK,GAAK,EAAA,IAAA,CAAK,cAAe,CAAA,GAAA,CAAI,KAAK,GAAG,CAAA;AAC9C,MAAK,IAAA,CAAA,KAAA,CAAM,SAAU,CAAA,2BAAA,EAA6B,IAAK,CAAA,QAAA,EAAU,EAAE,OAAS,EAAA,IAAA,EAAM,CAAA,CAAE,SAAU,EAAA;AAC9F,MAAK,IAAA,CAAA,IAAA,CAAK,QAAU,EAAA,IAAA,EAAM,IAAI,CAAA;AAAA,KAC/B,CAAA;AAED,IAAA,IAAA,CAAK,SAAU,CAAA,EAAA,CAAG,WAAa,EAAA,CAAC,IAAS,KAAA;AACvC,MAAK,IAAA,CAAA,SAAA,CAAU,KAAK,KAAK,CAAA;AAAA,KAC1B,CAAA;AAED,IAAA,IAAA,CAAK,SAAU,CAAA,EAAA,CAAG,YAAc,EAAA,CAAC,IAAS,KAAA;AACxC,MAAA,MAAM,EAAE,MAAA,EAAQ,MAAQ,EAAA,EAAA,EAAO,GAAA,IAAA;AAC/B,MAAA,IAAI,CAAC,MAAQ,EAAA;AACX,QAAM,MAAA,IAAI,MAAM,kBAAkB,CAAA;AAAA;AAEpC,MAAA,MAAM,MAAS,GAAA,IAAA,CAAK,QAAS,CAAA,aAAA,CAAc,MAAM,CAAA;AACjD,MAAA,IAAA,CAAK,SAAU,CAAA,EAAE,CAAE,CAAA,aAAA,CAAc,QAAQ,MAAM,CAAA;AAAA,KAChD,CAAA;AAED,IAAK,IAAA,CAAA,SAAA,CAAU,EAAG,CAAA,MAAA,EAAQ,MAAM;AAC9B,MAAA,IAAA,CAAK,MAAM,SAAU,CAAA,2BAAA,EAA6B,MAAM,IAAK,CAAA,MAAM,EAAE,SAAU,EAAA;AAAA,KAChF,CAAA;AAED,IAAK,IAAA,CAAA,SAAA,CAAU,EAAG,CAAA,OAAA,EAAS,MAAM;AAC/B,MAAA,IAAA,CAAK,MAAM,SAAU,CAAA,8BAAA,EAAgC,MAAM,IAAK,CAAA,MAAM,EAAE,SAAU,EAAA;AAAA,KACnF,CAAA;AAED,IAAA,IAAA,CAAK,SAAU,CAAA,EAAA,CAAG,OAAS,EAAA,CAAC,KAAU,KAAA;AACpC,MAAK,IAAA,CAAA,KAAA,CAAM,UAAU,8BAAgC,EAAA,IAAA,EAAM,OAAO,IAAK,CAAA,MAAM,EAAE,SAAU,EAAA;AAAA,KAC1F,CAAA;AAAA;AACH,EAEA,MAAc,UAAU,KAAe,EAAA;AACrC,IAAA,IAAA,CAAK,SAAU,CAAA,gBAAA,CAAiB,EAAE,IAAA,EAAM,OAAO,CAAA;AAC/C,IAAM,MAAA,IAAA,CAAK,SAAU,CAAA,SAAA,CAAU,MAAM;AACnC,MAAA,IAAA,CAAK,aAAc,EAAA;AACnB,MAAA,IAAA,CAAK,WAAW,WAAY,EAAA;AAAA,KAC7B,CAAA;AACD,IAAA,MAAM,GAAM,GAAA,MAAM,IAAK,CAAA,cAAA,CAAe,KAAK,KAAK,CAAA;AAChD,IAAK,IAAA,CAAA,QAAA,CAAS,IAAK,CAAA,GAAA,CAAI,GAAG,CAAA;AAC1B,IAAA,IAAA,CAAK,MAAM,SAAU,CAAA,gCAAA,EAAkC,IAAK,CAAA,QAAQ,EAAE,SAAU,EAAA;AAAA;AAElF,EAEA,cAAA,CAAwB,kBAAuB,EAAkB,EAAA;AAC/D,IAAA,IAAA,CAAK,YAAa,CAAA,GAAA,CAAI,EAAM,IAAA,gBAAA,CAAiB,IAAI,gBAAgB,CAAA;AACjE,IAAO,OAAA,gBAAA;AAAA;AACT,EAEA,QAAA,CAAS,OAAY,EAAa,EAAA;AAChC,IAAA,IAAA,CAAK,MAAO,CAAA,GAAA,CAAI,EAAM,IAAA,KAAA,CAAM,IAAI,KAAK,CAAA;AACrC,IAAO,OAAA,KAAA;AAAA;AACT,EAEA,YAAY,QAAe,EAAA;AACzB,IAAK,IAAA,CAAA,gBAAA,CAAiB,QAAS,CAAA,IAAA,CAAK,QAAQ,CAAA;AAC5C,IAAO,OAAA,QAAA;AAAA;AACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAeA,yBAAyB,SAAgB,EAAA;AACvC,IAAK,IAAA,CAAA,sBAAA,CAAuB,OAAO,CAAC,UAAA,KAAsB,CAAC,GAAG,UAAA,EAAY,SAAS,CAAC,CAAA;AACpF,IAAO,OAAA,SAAA;AAAA;AACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAeA,0BAA0B,SAAgB,EAAA;AACxC,IAAK,IAAA,CAAA,uBAAA,CAAwB,OAAO,CAAC,UAAA,KAAsB,CAAC,GAAG,UAAA,EAAY,SAAS,CAAC,CAAA;AACrF,IAAO,OAAA,SAAA;AAAA;AACT,EAEA,UAAU,MAGP,EAAA;AACD,IAAM,MAAA,QAAA,GAAW,IAAI,aAAc,EAAA;AACnC,IAAA,IAAA,CAAK,QAAQ,IAAK,CAAA;AAAA,MAChB,IAAI,MAAO,CAAA,EAAA;AAAA,MACX,WAAW,MAAO,CAAA,SAAA;AAAA,MAClB,QAAA;AAAA,MACA,SAAS,QAAS,CAAA;AAAA,KACnB,CAAA;AACD,IAAO,OAAA,MAAA;AAAA;AACT,EAEA,UAAU,EAA2B,EAAA;AACnC,IAAM,MAAA,MAAA,GAAS,KAAK,OAAQ,CAAA,IAAA,CAAK,CAACC,OAAWA,KAAAA,OAAAA,CAAO,OAAO,EAAE,CAAA;AAC7D,IAAA,IAAI,CAAC,MAAQ,EAAA;AACX,MAAA,MAAM,IAAI,KAAA,CAAM,CAAkB,eAAA,EAAA,EAAE,CAAY,UAAA,CAAA,CAAA;AAAA;AAElD,IAAA,OAAO,MAAO,CAAA,QAAA;AAAA;AAChB,EAEA,YAAA,CAAa,EAAE,KAAA,EAA4B,EAAA;AACzC,IAAK,IAAA,CAAA,KAAA,CAAM,SAAU,CAAA,uBAAA,EAAyB,IAAM,EAAA,EAAE,KAAO,EAAA,QAAA,EAAU,IAAK,CAAA,QAAA,EAAU,CAAA,CAAE,SAAU,EAAA;AAClG,IAAA,IAAA,CAAK,SAAU,CAAA,IAAA,CAAK,MAAQ,EAAA,EAAE,OAAO,CAAA;AAAA;AACvC,EAEA,aAAA,CAAc,EAAE,MAAA,EAA8B,EAAA;AAC5C,IAAA,IAAI,KAAK,mBAAqB,EAAA;AAC9B,IAAA,IAAA,CAAK,KAAM,CAAA,SAAA,CAAU,uBAAyB,EAAA,IAAA,EAAM,EAAE,KAAA,EAAO,QAAU,EAAA,QAAA,EAAU,IAAK,CAAA,QAAA,EAAU,CAAA,CAAE,SAAU,EAAA;AAC5G,IAAA,IAAA,CAAK,SAAU,CAAA,IAAA,CAAK,QAAU,EAAA,EAAE,QAAQ,CAAA;AAAA;AAC1C,EAEA,IAAI,IAAO,GAAA;AACT,IAAO,OAAA,IAAA;AAAA;AACT,EAEA,IAAI,MAAS,GAAA;AACX,IAAA,OAAO,IAAK,CAAA,SAAA;AAAA;AACd,EAEA,IAAI,QAAW,GAAA;AACb,IAAA,OAAO,KAAK,cAAe,EAAA;AAAA;AAE/B;;;;"}

package/dist/index21.js

@@ -1,7 +1,7 @@
-import { dset } from './index32.js';
-import z from './index33.js';
+import { dset } from './index34.js';
+import z from './index35.js';
 import { syncClass, generateShortUUID as generateShortUUID$1, createStatesSnapshot, id, sync, persist, load, getByPath, DELETE_TOKEN } from './index18.js';
-import { signal } from './index34.js';
+import { signal } from './index36.js';
 
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });

package/dist/index22.js

@@ -1,7 +1,7 @@
 import { __name } from './index27.js';
 import { load } from './index18.js';
-import { PartySocket } from './index35.js';
-import './index36.js';
+import { PartySocket } from './index32.js';
+import './index33.js';
 
 function createConnection(options, roomInstance) {
   const conn = new PartySocket(options);

package/dist/index30.js

@@ -1,4 +1,4 @@
-import { RpgClientObject } from './index38.js';
+import { RpgClientObject } from './index39.js';
 
 class RpgClientPlayer extends RpgClientObject {
   constructor() {

package/dist/index31.js

@@ -1,4 +1,4 @@
-import { RpgClientObject } from './index38.js';
+import { RpgClientObject } from './index39.js';
 
 class RpgClientEvent extends RpgClientObject {
   constructor() {