@rpgjs/client 5.0.0-alpha.11 → 5.0.0-alpha.12

package/dist/index41.js.map

@@ -1 +1 @@
-{"version":3,"file":"index41.js","sources":["../src/Game/Object.ts"],"sourcesContent":["import { Hooks, ModulesToken, RpgCommonPlayer } from \"@rpgjs/common\";\nimport { sync } from \"@signe/sync\";\nimport { trigger, signal } from \"canvasengine\";\nimport { Subscription } from \"rxjs\";\nimport { inject } from \"../core/inject\";\nimport { RpgClientEngine } from \"../RpgClientEngine\";\n\nexport abstract class RpgClientObject extends RpgCommonPlayer {\n  abstract type: string;\n  emitParticleTrigger = trigger()\n  particleName = signal('')\n  animationCurrentIndex = signal(0)\n  animationIsPlaying = signal(false)\n  _param = signal({})\n\n  constructor() {\n    super()\n    this.hooks.callHooks(\"client-sprite-onInit\", this).subscribe();\n  }\n\n  get hooks() {\n    return inject<Hooks>(ModulesToken);\n  }\n  \n  private animationSubscription?: Subscription\n\n  flash(color: string, duration: number = 100) {\n    return new Promise((resolve) => {\n      const lastTint = this.tint()\n      this.tint.set(color);\n      setTimeout(() => {\n        this.tint.set(lastTint)\n        resolve(true)\n      }, duration)\n    })\n  }\n\n  /**\n   * Reset animation state when animation changes externally\n   * \n   * This method should be called when the animation changes due to movement\n   * or other external factors to ensure the animation system doesn't get stuck\n   * \n   * @example\n   * ```ts\n   * // Reset when player starts moving\n   * player.resetAnimationState();\n   * ```\n   */\n  resetAnimationState() {\n    this.animationIsPlaying.set(false);\n    this.animationCurrentIndex.set(0);\n    if (this.animationSubscription) {\n      this.animationSubscription.unsubscribe();\n      this.animationSubscription = undefined;\n    }\n  }\n\n  /**\n   * Set a custom animation for a specific number of times\n   * \n   * Plays a custom animation for the specified number of repetitions.\n   * The animation system prevents overlapping animations and automatically\n   * returns to the previous animation when complete.\n   * \n   * @param animationName - Name of the animation to play\n   * @param nbTimes - Number of times to repeat the animation (default: Infinity for continuous)\n   * \n   * @example\n   * ```ts\n   * // Play attack animation 3 times\n   * player.setAnimation('attack', 3);\n   * \n   * // Play continuous spell animation\n   * player.setAnimation('spell');\n   * ```\n   */\n  setAnimation(animationName: string, nbTimes: number = Infinity) {\n    if (this.animationIsPlaying()) return;\n    this.animationIsPlaying.set(true);\n    const previousAnimationName = this.animationName();\n    this.animationCurrentIndex.set(0);\n    \n    // Clean up any existing subscription\n    if (this.animationSubscription) {\n      this.animationSubscription.unsubscribe();\n    }\n    \n    this.animationSubscription = this.animationCurrentIndex.observable.subscribe(index => {\n      if (index >= nbTimes) {\n        this.animationCurrentIndex.set(0);\n        this.animationName.set(previousAnimationName);\n        this.animationIsPlaying.set(false);\n        if (this.animationSubscription) {\n          this.animationSubscription.unsubscribe();\n          this.animationSubscription = undefined;\n        }\n      }\n    })\n    this.animationName.set(animationName);\n  }\n\n  showComponentAnimation(id: string, params: any) {\n    const engine = inject(RpgClientEngine)\n    engine.getComponentAnimation(id).displayEffect(params, this)\n  }\n}   "],"names":[],"mappings":"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"}
+{"version":3,"file":"index41.js","sources":["../src/components/gui/dialogbox/itemMenu.ce"],"sourcesContent":["<Container>\n    <Rect width height color=\"#595971\" alpha visible={isSelected} />\n    <Container flexDirection=\"row\" alignItems=\"center\" justifyContent=\"center\">\n        <Text text color=\"#fff\" fontSize={18} margin={10} />\n    </Container>\n</Container>\n\n<script>\nimport { animatedSignal } from \"canvasengine\";\n\nconst { text, isSelected } = defineProps();\n\nconst alpha = animatedSignal(1, {\n    repeatType: \"reverse\",\n    duration: 500,\n    repeat: Infinity,\n});\n\nalpha.set(0.5);\n\nconst height = 40;\nconst width = 256;\n</script>"],"names":[],"mappings":";;AAQqB,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,IAAI,GAAG,EAAE,CAAC,IAAI,EAAE,UAAU,GAAG,EAAE,CAAC,UAAU;AAC1E,IAAI,KAAK,GAAG,cAAc,CAAC,CAAC,EAAE;AAC9B,IAAI,UAAU,EAAE,SAAS;AACzB,IAAI,QAAQ,EAAE,GAAG;AACjB,IAAI,MAAM,EAAE,QAAQ;AACpB,CAAC,CAAC;AACF,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC;AACd,IAAI,MAAM,GAAG,EAAE;AACf,IAAI,KAAK,GAAG,GAAG;AACf,QAAQ,IAAI,KAAK,GAAG,CAAC,CAAC,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,UAAU,EAAE,CAAC,EAAE,CAAC,CAAC,SAAS,EAAE,EAAE,aAAa,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,cAAc,EAAE,QAAQ,EAAE,EAAE,CAAC,CAAC,IAAI,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC;AACrQ,QAAQ,OAAO;AACf;;;;"}

package/dist/index42.js

@@ -0,0 +1,96 @@
+import { RpgCommonPlayer, ModulesToken } from '@rpgjs/common';
+import { trigger, signal } from 'canvasengine';
+import { inject } from './index6.js';
+import { RpgClientEngine } from './index2.js';
+
+class RpgClientObject extends RpgCommonPlayer {
+  constructor() {
+    super();
+    this.emitParticleTrigger = trigger();
+    this.particleName = signal("");
+    this.animationCurrentIndex = signal(0);
+    this.animationIsPlaying = signal(false);
+    this._param = signal({});
+    this.hooks.callHooks("client-sprite-onInit", this).subscribe();
+  }
+  get hooks() {
+    return inject(ModulesToken);
+  }
+  flash(color, duration = 100) {
+    return new Promise((resolve) => {
+      const lastTint = this.tint();
+      this.tint.set(color);
+      setTimeout(() => {
+        this.tint.set(lastTint);
+        resolve(true);
+      }, duration);
+    });
+  }
+  /**
+   * Reset animation state when animation changes externally
+   * 
+   * This method should be called when the animation changes due to movement
+   * or other external factors to ensure the animation system doesn't get stuck
+   * 
+   * @example
+   * ```ts
+   * // Reset when player starts moving
+   * player.resetAnimationState();
+   * ```
+   */
+  resetAnimationState() {
+    this.animationIsPlaying.set(false);
+    this.animationCurrentIndex.set(0);
+    if (this.animationSubscription) {
+      this.animationSubscription.unsubscribe();
+      this.animationSubscription = void 0;
+    }
+  }
+  /**
+   * Set a custom animation for a specific number of times
+   * 
+   * Plays a custom animation for the specified number of repetitions.
+   * The animation system prevents overlapping animations and automatically
+   * returns to the previous animation when complete.
+   * 
+   * @param animationName - Name of the animation to play
+   * @param nbTimes - Number of times to repeat the animation (default: Infinity for continuous)
+   * 
+   * @example
+   * ```ts
+   * // Play attack animation 3 times
+   * player.setAnimation('attack', 3);
+   * 
+   * // Play continuous spell animation
+   * player.setAnimation('spell');
+   * ```
+   */
+  setAnimation(animationName, nbTimes = Infinity) {
+    if (this.animationIsPlaying()) return;
+    this.animationIsPlaying.set(true);
+    const previousAnimationName = this.animationName();
+    this.animationCurrentIndex.set(0);
+    if (this.animationSubscription) {
+      this.animationSubscription.unsubscribe();
+    }
+    this.animationSubscription = this.animationCurrentIndex.observable.subscribe((index) => {
+      if (index >= nbTimes) {
+        this.animationCurrentIndex.set(0);
+        this.animationName.set(previousAnimationName);
+        this.animationIsPlaying.set(false);
+        if (this.animationSubscription) {
+          this.animationSubscription.unsubscribe();
+          this.animationSubscription = void 0;
+        }
+      }
+    });
+    this.animationName.set(animationName);
+  }
+  showComponentAnimation(id, params) {
+    const engine = inject(RpgClientEngine);
+    engine.getComponentAnimation(id).displayEffect(params, this);
+  }
+}
+
+export { RpgClientObject };
+//# sourceMappingURL=index42.js.map

package/dist/index42.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index42.js","sources":["../src/Game/Object.ts"],"sourcesContent":["import { Hooks, ModulesToken, RpgCommonPlayer } from \"@rpgjs/common\";\nimport { sync } from \"@signe/sync\";\nimport { trigger, signal } from \"canvasengine\";\nimport { Subscription } from \"rxjs\";\nimport { inject } from \"../core/inject\";\nimport { RpgClientEngine } from \"../RpgClientEngine\";\n\nexport abstract class RpgClientObject extends RpgCommonPlayer {\n  abstract type: string;\n  emitParticleTrigger = trigger()\n  particleName = signal('')\n  animationCurrentIndex = signal(0)\n  animationIsPlaying = signal(false)\n  _param = signal({})\n\n  constructor() {\n    super()\n    this.hooks.callHooks(\"client-sprite-onInit\", this).subscribe();\n  }\n\n  get hooks() {\n    return inject<Hooks>(ModulesToken);\n  }\n  \n  private animationSubscription?: Subscription\n\n  flash(color: string, duration: number = 100) {\n    return new Promise((resolve) => {\n      const lastTint = this.tint()\n      this.tint.set(color);\n      setTimeout(() => {\n        this.tint.set(lastTint)\n        resolve(true)\n      }, duration)\n    })\n  }\n\n  /**\n   * Reset animation state when animation changes externally\n   * \n   * This method should be called when the animation changes due to movement\n   * or other external factors to ensure the animation system doesn't get stuck\n   * \n   * @example\n   * ```ts\n   * // Reset when player starts moving\n   * player.resetAnimationState();\n   * ```\n   */\n  resetAnimationState() {\n    this.animationIsPlaying.set(false);\n    this.animationCurrentIndex.set(0);\n    if (this.animationSubscription) {\n      this.animationSubscription.unsubscribe();\n      this.animationSubscription = undefined;\n    }\n  }\n\n  /**\n   * Set a custom animation for a specific number of times\n   * \n   * Plays a custom animation for the specified number of repetitions.\n   * The animation system prevents overlapping animations and automatically\n   * returns to the previous animation when complete.\n   * \n   * @param animationName - Name of the animation to play\n   * @param nbTimes - Number of times to repeat the animation (default: Infinity for continuous)\n   * \n   * @example\n   * ```ts\n   * // Play attack animation 3 times\n   * player.setAnimation('attack', 3);\n   * \n   * // Play continuous spell animation\n   * player.setAnimation('spell');\n   * ```\n   */\n  setAnimation(animationName: string, nbTimes: number = Infinity) {\n    if (this.animationIsPlaying()) return;\n    this.animationIsPlaying.set(true);\n    const previousAnimationName = this.animationName();\n    this.animationCurrentIndex.set(0);\n    \n    // Clean up any existing subscription\n    if (this.animationSubscription) {\n      this.animationSubscription.unsubscribe();\n    }\n    \n    this.animationSubscription = this.animationCurrentIndex.observable.subscribe(index => {\n      if (index >= nbTimes) {\n        this.animationCurrentIndex.set(0);\n        this.animationName.set(previousAnimationName);\n        this.animationIsPlaying.set(false);\n        if (this.animationSubscription) {\n          this.animationSubscription.unsubscribe();\n          this.animationSubscription = undefined;\n        }\n      }\n    })\n    this.animationName.set(animationName);\n  }\n\n  showComponentAnimation(id: string, params: any) {\n    const engine = inject(RpgClientEngine)\n    engine.getComponentAnimation(id).displayEffect(params, this)\n  }\n}   "],"names":[],"mappings":"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"}

package/dist/index5.js

@@ -1,4 +1,4 @@
-import { Context, injector, inject } from './index17.js';
+import { Context, injector, inject } from './index16.js';
 import { RpgClientEngine } from './index2.js';
 import { setInject } from './index6.js';
 

package/dist/index6.js

@@ -1,4 +1,4 @@
-import { inject as inject$1 } from './index17.js';
+import { inject as inject$1 } from './index16.js';
 
 let context = null;
 function inject(service, _context) {

package/dist/index7.js

@@ -1,4 +1,4 @@
-import { inject } from './index17.js';
+import { inject } from './index16.js';
 import { UpdateMapToken } from '@rpgjs/common';
 
 const LoadMapToken = "LoadMapToken";

package/dist/index8.js

@@ -1,5 +1,5 @@
 import { provideModules, findModules } from '@rpgjs/common';
-import { inject } from './index17.js';
+import { inject } from './index16.js';
 import { RpgGui } from './index9.js';
 
 function provideClientModules(modules) {

package/dist/index9.js

@@ -1,4 +1,4 @@
-import { inject } from './index17.js';
+import { inject } from './index16.js';
 import { signal } from 'canvasengine';
 import { WebSocketToken } from './index18.js';
 import component from './index10.js';
@@ -15,9 +15,12 @@ const throwError = (id) => {
   throw `The GUI named ${id} is non-existent. Please add the component in the gui property of the decorator @RpgClient`;
 };
 class RpgGui {
+  // Reference to VueGui instance
   constructor(context) {
     this.context = context;
     this.gui = signal({});
+    this.extraGuis = [];
+    this.vueGuiInstance = null;
     this.webSocket = inject(context, WebSocketToken);
     this.add({
       name: "rpg-dialog",
@@ -32,6 +35,55 @@ class RpgGui {
       this.hide(guiId);
     });
   }
+  /**
+   * Set the VueGui instance reference for Vue component management
+   * This is called by VueGui when it's initialized
+   * 
+   * @param vueGuiInstance - The VueGui instance
+   */
+  _setVueGuiInstance(vueGuiInstance) {
+    this.vueGuiInstance = vueGuiInstance;
+  }
+  /**
+   * Notify VueGui about GUI state changes
+   * This synchronizes the Vue component display state
+   * 
+   * @param guiId - The GUI component ID
+   * @param display - Display state
+   * @param data - Component data
+   */
+  _notifyVueGui(guiId, display, data = {}) {
+    if (this.vueGuiInstance && this.vueGuiInstance.vm) {
+      const extraGui = this.extraGuis.find((gui) => gui.name === guiId);
+      if (extraGui) {
+        this.vueGuiInstance.vm.gui[guiId] = {
+          name: guiId,
+          display,
+          data,
+          attachToSprite: false
+          // Default value, could be configurable
+        };
+        this.vueGuiInstance.vm.gui = Object.assign({}, this.vueGuiInstance.vm.gui);
+      }
+    }
+  }
+  /**
+   * Initialize Vue components in the VueGui instance
+   * This should be called after VueGui is mounted
+   */
+  _initializeVueComponents() {
+    if (this.vueGuiInstance && this.vueGuiInstance.vm) {
+      this.extraGuis.forEach((gui) => {
+        this.vueGuiInstance.vm.gui[gui.name] = {
+          name: gui.name,
+          display: gui.display(),
+          data: gui.data(),
+          attachToSprite: false
+        };
+      });
+      this.vueGuiInstance.vm.gui = Object.assign({}, this.vueGuiInstance.vm.gui);
+    }
+  }
   guiInteraction(guiId, name, data) {
     this.webSocket.emit("gui.interaction", {
       guiId,
@@ -48,10 +100,13 @@ class RpgGui {
   /**
    * Add a GUI component to the system
    * 
+   * By default, only CanvasEngine components (.ce files) are accepted.
+   * Vue components should be handled by the @rpgjs/vue package.
+   * 
    * @param gui - GUI configuration options
    * @param gui.name - Name or ID of the GUI component
    * @param gui.id - Alternative ID if name is not provided
-   * @param gui.component - The component to render
+   * @param gui.component - The component to render (must be a CanvasEngine component)
    * @param gui.display - Initial display state (default: false)
    * @param gui.data - Initial data for the component
    * @param gui.autoDisplay - Auto display when added (default: false)
@@ -61,7 +116,7 @@ class RpgGui {
    * ```ts
    * gui.add({
    *   name: 'inventory',
-   *   component: InventoryComponent,
+   *   component: InventoryComponent, // Must be a .ce component
    *   autoDisplay: true,
    *   dependencies: () => [playerSignal, inventorySignal]
    * });
@@ -80,19 +135,35 @@ class RpgGui {
       autoDisplay: gui.autoDisplay || false,
       dependencies: gui.dependencies
     };
+    if (typeof gui.component !== "function") {
+      guiInstance.component = gui;
+      this.extraGuis.push(guiInstance);
+      if (guiInstance.autoDisplay) {
+        this._notifyVueGui(guiId, true, gui.data || {});
+      }
+      return;
+    }
     this.gui()[guiId] = guiInstance;
-    if (guiInstance.autoDisplay) {
+    if (guiInstance.autoDisplay && typeof gui.component === "function") {
       this.display(guiId);
     }
   }
   get(id) {
-    return this.gui()[id];
+    const canvasGui = this.gui()[id];
+    if (canvasGui) {
+      return canvasGui;
+    }
+    return this.extraGuis.find((gui) => gui.name === id);
   }
   exists(id) {
     return !!this.get(id);
   }
   getAll() {
-    return this.gui();
+    const allGuis = { ...this.gui() };
+    this.extraGuis.forEach((gui) => {
+      allGuis[gui.name] = gui;
+    });
+    return allGuis;
   }
   /**
    * Display a GUI component
@@ -100,6 +171,7 @@ class RpgGui {
    * Displays the GUI immediately if no dependencies are configured,
    * or waits for all dependencies to be resolved if dependencies are present.
    * Automatically manages subscriptions to prevent memory leaks.
+   * Works with both CanvasEngine components and Vue components.
    * 
    * @param id - The GUI component ID
    * @param data - Data to pass to the component
@@ -119,6 +191,52 @@ class RpgGui {
       throw throwError(id);
     }
     const guiInstance = this.get(id);
+    const isVueComponent = this.extraGuis.some((gui) => gui.name === id);
+    if (isVueComponent) {
+      this._handleVueComponentDisplay(id, data, dependencies, guiInstance);
+    } else {
+      this._handleCanvasComponentDisplay(id, data, dependencies, guiInstance);
+    }
+  }
+  /**
+   * Handle Vue component display logic
+   * 
+   * @param id - GUI component ID
+   * @param data - Component data
+   * @param dependencies - Runtime dependencies
+   * @param guiInstance - GUI instance
+   */
+  _handleVueComponentDisplay(id, data, dependencies, guiInstance) {
+    if (guiInstance.subscription) {
+      guiInstance.subscription.unsubscribe();
+      guiInstance.subscription = void 0;
+    }
+    const deps = dependencies.length > 0 ? dependencies : guiInstance.dependencies ? guiInstance.dependencies() : [];
+    if (deps.length > 0) {
+      guiInstance.subscription = combineLatest(
+        deps.map((dependency) => dependency.observable)
+      ).subscribe((values) => {
+        if (values.every((value) => value !== void 0)) {
+          guiInstance.data.set(data);
+          guiInstance.display.set(true);
+          this._notifyVueGui(id, true, data);
+        }
+      });
+      return;
+    }
+    guiInstance.data.set(data);
+    guiInstance.display.set(true);
+    this._notifyVueGui(id, true, data);
+  }
+  /**
+   * Handle CanvasEngine component display logic
+   * 
+   * @param id - GUI component ID
+   * @param data - Component data
+   * @param dependencies - Runtime dependencies
+   * @param guiInstance - GUI instance
+   */
+  _handleCanvasComponentDisplay(id, data, dependencies, guiInstance) {
     if (guiInstance.subscription) {
       guiInstance.subscription.unsubscribe();
       guiInstance.subscription = void 0;
@@ -142,6 +260,7 @@ class RpgGui {
    * Hide a GUI component
    * 
    * Hides the GUI and cleans up any active subscriptions.
+   * Works with both CanvasEngine components and Vue components.
    * 
    * @param id - The GUI component ID
    * 
@@ -160,6 +279,10 @@ class RpgGui {
       guiInstance.subscription = void 0;
     }
     guiInstance.display.set(false);
+    const isVueComponent = this.extraGuis.some((gui) => gui.name === id);
+    if (isVueComponent) {
+      this._notifyVueGui(id, false);
+    }
   }
 }
 

package/dist/index9.js.map

@@ -1 +1 @@
-{"version":3,"file":"index9.js","sources":["../src/Gui/Gui.ts"],"sourcesContent":["import { Context, inject } from \"@signe/di\";\nimport { signal, Signal, WritableSignal } from \"canvasengine\";\nimport { AbstractWebsocket, WebSocketToken } from \"../services/AbstractSocket\";\nimport { DialogboxComponent } from \"../components/gui\";\nimport { combineLatest, Subscription } from \"rxjs\";\n\ninterface GuiOptions {\n  name?: string;\n  id?: string;\n  component: any;\n  display?: boolean;\n  data?: any;\n  /**\n   * Auto display the GUI when added to the system\n   * @default false\n   */\n  autoDisplay?: boolean;\n  /**\n   * Function that returns an array of Signal dependencies\n   * The GUI will only display when all dependencies are resolved (!= undefined)\n   * @returns Array of Signal dependencies\n   */\n  dependencies?: () => Signal[];\n}\n\ninterface GuiInstance {\n  name: string;\n  component: any;\n  display: WritableSignal<boolean>;\n  data: WritableSignal<any>;\n  autoDisplay: boolean;\n  dependencies?: () => Signal[];\n  subscription?: Subscription;\n}\n\nconst throwError = (id: string) => {\n  throw `The GUI named ${id} is non-existent. Please add the component in the gui property of the decorator @RpgClient`;\n};\n\nexport class RpgGui {\n  private webSocket: AbstractWebsocket;\n  gui = signal<Record<string, GuiInstance>>({});\n\n  constructor(private context: Context) {\n    this.webSocket = inject(context, WebSocketToken);\n    this.add({\n      name: \"rpg-dialog\",\n      component: DialogboxComponent,\n    });\n  }\n\n  async _initialize() {\n    this.webSocket.on(\"gui.open\", (data: { guiId: string; data: any }) => {\n      this.display(data.guiId, data.data);\n    });\n\n    this.webSocket.on(\"gui.exit\", (guiId: string) => {\n      this.hide(guiId);\n    });\n  }\n\n  guiInteraction(guiId: string, name: string, data: any) {\n    this.webSocket.emit(\"gui.interaction\", {\n      guiId,\n      name,\n      data,\n    });\n  }\n\n  guiClose(guiId: string, data?: any) {\n    this.webSocket.emit(\"gui.exit\", {\n      guiId,\n      data,\n    });\n  }\n\n  /**\n   * Add a GUI component to the system\n   * \n   * @param gui - GUI configuration options\n   * @param gui.name - Name or ID of the GUI component\n   * @param gui.id - Alternative ID if name is not provided\n   * @param gui.component - The component to render\n   * @param gui.display - Initial display state (default: false)\n   * @param gui.data - Initial data for the component\n   * @param gui.autoDisplay - Auto display when added (default: false)\n   * @param gui.dependencies - Function returning Signal dependencies\n   * \n   * @example\n   * ```ts\n   * gui.add({\n   *   name: 'inventory',\n   *   component: InventoryComponent,\n   *   autoDisplay: true,\n   *   dependencies: () => [playerSignal, inventorySignal]\n   * });\n   * ```\n   */\n  add(gui: GuiOptions) {\n    const guiId = gui.name || gui.id;\n    if (!guiId) {\n      throw new Error(\"GUI must have a name or id\");\n    }\n\n    const guiInstance: GuiInstance = {\n      name: guiId,\n      component: gui.component,\n      display: signal(gui.display || false),\n      data: signal(gui.data || {}),\n      autoDisplay: gui.autoDisplay || false,\n      dependencies: gui.dependencies,\n    };\n\n    this.gui()[guiId] = guiInstance;\n\n    // Auto display if enabled\n    if (guiInstance.autoDisplay) {\n      this.display(guiId);\n    }\n  }\n\n  get(id: string): GuiInstance | undefined {\n    return this.gui()[id];\n  }\n\n  exists(id: string): boolean {\n    return !!this.get(id);\n  }\n\n  getAll(): Record<string, GuiInstance> {\n    return this.gui();\n  }\n\n  /**\n   * Display a GUI component\n   * \n   * Displays the GUI immediately if no dependencies are configured,\n   * or waits for all dependencies to be resolved if dependencies are present.\n   * Automatically manages subscriptions to prevent memory leaks.\n   * \n   * @param id - The GUI component ID\n   * @param data - Data to pass to the component\n   * @param dependencies - Optional runtime dependencies (overrides config dependencies)\n   * \n   * @example\n   * ```ts\n   * // Display immediately\n   * gui.display('inventory', { items: [] });\n   * \n   * // Display with runtime dependencies\n   * gui.display('shop', { shopId: 1 }, [playerSignal, shopSignal]);\n   * ```\n   */\n  display(id: string, data = {}, dependencies: Signal[] = []) {\n    if (!this.exists(id)) {\n      throw throwError(id);\n    }\n\n    const guiInstance = this.get(id)!;\n    \n    // Unsubscribe from previous subscription if exists\n    if (guiInstance.subscription) {\n      guiInstance.subscription.unsubscribe();\n      guiInstance.subscription = undefined;\n    }\n\n    // Use runtime dependencies or config dependencies\n    const deps = dependencies.length > 0 \n      ? dependencies \n      : (guiInstance.dependencies ? guiInstance.dependencies() : []);\n\n    if (deps.length > 0) {\n      // Subscribe to dependencies\n      guiInstance.subscription = combineLatest(\n        deps.map(dependency => dependency.observable)\n      ).subscribe((values) => {\n        if (values.every(value => value !== undefined)) {\n          guiInstance.data.set(data);\n          guiInstance.display.set(true);\n        }\n      });\n      return;\n    }\n\n    // No dependencies, display immediately\n    guiInstance.data.set(data);\n    guiInstance.display.set(true);\n  }\n\n  /**\n   * Hide a GUI component\n   * \n   * Hides the GUI and cleans up any active subscriptions.\n   * \n   * @param id - The GUI component ID\n   * \n   * @example\n   * ```ts\n   * gui.hide('inventory');\n   * ```\n   */\n  hide(id: string) {\n    if (!this.exists(id)) {\n      throw throwError(id);\n    }\n\n    const guiInstance = this.get(id)!;\n    \n    // Unsubscribe if there's an active subscription\n    if (guiInstance.subscription) {\n      guiInstance.subscription.unsubscribe();\n      guiInstance.subscription = undefined;\n    }\n\n    guiInstance.display.set(false);\n  }\n}\n"],"names":["DialogboxComponent"],"mappings":"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"}
+{"version":3,"file":"index9.js","sources":["../src/Gui/Gui.ts"],"sourcesContent":["import { Context, inject } from \"@signe/di\";\nimport { signal, Signal, WritableSignal } from \"canvasengine\";\nimport { AbstractWebsocket, WebSocketToken } from \"../services/AbstractSocket\";\nimport { DialogboxComponent } from \"../components/gui\";\nimport { combineLatest, Subscription } from \"rxjs\";\n\ninterface GuiOptions {\n  name?: string;\n  id?: string;\n  component: any;\n  display?: boolean;\n  data?: any;\n  /**\n   * Auto display the GUI when added to the system\n   * @default false\n   */\n  autoDisplay?: boolean;\n  /**\n   * Function that returns an array of Signal dependencies\n   * The GUI will only display when all dependencies are resolved (!= undefined)\n   * @returns Array of Signal dependencies\n   */\n  dependencies?: () => Signal[];\n}\n\ninterface GuiInstance {\n  name: string;\n  component: any;\n  display: WritableSignal<boolean>;\n  data: WritableSignal<any>;\n  autoDisplay: boolean;\n  dependencies?: () => Signal[];\n  subscription?: Subscription;\n}\n\nconst throwError = (id: string) => {\n  throw `The GUI named ${id} is non-existent. Please add the component in the gui property of the decorator @RpgClient`;\n};\n\nexport class RpgGui {\n  private webSocket: AbstractWebsocket;\n  gui = signal<Record<string, GuiInstance>>({});\n  extraGuis: GuiInstance[] = [];\n  private vueGuiInstance: any = null; // Reference to VueGui instance\n\n  constructor(private context: Context) {\n    this.webSocket = inject(context, WebSocketToken);\n    this.add({\n      name: \"rpg-dialog\",\n      component: DialogboxComponent,\n    });\n  }\n\n  async _initialize() {\n    this.webSocket.on(\"gui.open\", (data: { guiId: string; data: any }) => {\n      this.display(data.guiId, data.data);\n    });\n\n    this.webSocket.on(\"gui.exit\", (guiId: string) => {\n      this.hide(guiId);\n    });\n  }\n\n  /**\n   * Set the VueGui instance reference for Vue component management\n   * This is called by VueGui when it's initialized\n   * \n   * @param vueGuiInstance - The VueGui instance\n   */\n  _setVueGuiInstance(vueGuiInstance: any) {\n    this.vueGuiInstance = vueGuiInstance;\n  }\n\n  /**\n   * Notify VueGui about GUI state changes\n   * This synchronizes the Vue component display state\n   * \n   * @param guiId - The GUI component ID\n   * @param display - Display state\n   * @param data - Component data\n   */\n  private _notifyVueGui(guiId: string, display: boolean, data: any = {}) {\n    if (this.vueGuiInstance && this.vueGuiInstance.vm) {\n      // Find the GUI in extraGuis\n      const extraGui = this.extraGuis.find(gui => gui.name === guiId);\n      if (extraGui) {\n        // Update the Vue component's display state and data\n        this.vueGuiInstance.vm.gui[guiId] = {\n          name: guiId,\n          display,\n          data,\n          attachToSprite: false // Default value, could be configurable\n        };\n        // Trigger Vue reactivity\n        this.vueGuiInstance.vm.gui = Object.assign({}, this.vueGuiInstance.vm.gui);\n      }\n    }\n  }\n\n  /**\n   * Initialize Vue components in the VueGui instance\n   * This should be called after VueGui is mounted\n   */\n  _initializeVueComponents() {\n    if (this.vueGuiInstance && this.vueGuiInstance.vm) {\n      // Initialize all extraGuis in the Vue instance\n      this.extraGuis.forEach(gui => {\n        this.vueGuiInstance.vm.gui[gui.name] = {\n          name: gui.name,\n          display: gui.display(),\n          data: gui.data(),\n          attachToSprite: false\n        };\n      });\n      \n      // Trigger Vue reactivity\n      this.vueGuiInstance.vm.gui = Object.assign({}, this.vueGuiInstance.vm.gui);\n    }\n  }\n\n  guiInteraction(guiId: string, name: string, data: any) {\n    this.webSocket.emit(\"gui.interaction\", {\n      guiId,\n      name,\n      data,\n    });\n  }\n\n  guiClose(guiId: string, data?: any) {\n    this.webSocket.emit(\"gui.exit\", {\n      guiId,\n      data,\n    });\n  }\n\n  /**\n   * Add a GUI component to the system\n   * \n   * By default, only CanvasEngine components (.ce files) are accepted.\n   * Vue components should be handled by the @rpgjs/vue package.\n   * \n   * @param gui - GUI configuration options\n   * @param gui.name - Name or ID of the GUI component\n   * @param gui.id - Alternative ID if name is not provided\n   * @param gui.component - The component to render (must be a CanvasEngine component)\n   * @param gui.display - Initial display state (default: false)\n   * @param gui.data - Initial data for the component\n   * @param gui.autoDisplay - Auto display when added (default: false)\n   * @param gui.dependencies - Function returning Signal dependencies\n   * \n   * @example\n   * ```ts\n   * gui.add({\n   *   name: 'inventory',\n   *   component: InventoryComponent, // Must be a .ce component\n   *   autoDisplay: true,\n   *   dependencies: () => [playerSignal, inventorySignal]\n   * });\n   * ```\n   */\n  add(gui: GuiOptions) {\n    const guiId = gui.name || gui.id;\n    if (!guiId) {\n      throw new Error(\"GUI must have a name or id\");\n    }\n\n    const guiInstance: GuiInstance = {\n      name: guiId,\n      component: gui.component,\n      display: signal(gui.display || false),\n      data: signal(gui.data || {}),\n      autoDisplay: gui.autoDisplay || false,\n      dependencies: gui.dependencies,\n    };\n\n    // Accept both CanvasEngine components (.ce) and Vue components\n    // Vue components will be handled by VueGui if available\n    if (typeof gui.component !== 'function') {\n      guiInstance.component = gui;\n      this.extraGuis.push(guiInstance);\n      \n      // Auto display Vue components if enabled\n      if (guiInstance.autoDisplay) {\n        this._notifyVueGui(guiId, true, gui.data || {});\n      }\n      return;\n    }\n\n    this.gui()[guiId] = guiInstance;\n\n    // Auto display if enabled and it's a CanvasEngine component\n    if (guiInstance.autoDisplay && typeof gui.component === 'function') {\n      this.display(guiId);\n    }\n  }\n\n  get(id: string): GuiInstance | undefined {\n    // Check CanvasEngine GUIs first\n    const canvasGui = this.gui()[id];\n    if (canvasGui) {\n      return canvasGui;\n    }\n    \n    // Check Vue GUIs in extraGuis\n    return this.extraGuis.find(gui => gui.name === id);\n  }\n\n  exists(id: string): boolean {\n    return !!this.get(id);\n  }\n\n  getAll(): Record<string, GuiInstance> {\n    const allGuis = { ...this.gui() };\n    \n    // Add extraGuis to the result\n    this.extraGuis.forEach(gui => {\n      allGuis[gui.name] = gui;\n    });\n    \n    return allGuis;\n  }\n\n  /**\n   * Display a GUI component\n   * \n   * Displays the GUI immediately if no dependencies are configured,\n   * or waits for all dependencies to be resolved if dependencies are present.\n   * Automatically manages subscriptions to prevent memory leaks.\n   * Works with both CanvasEngine components and Vue components.\n   * \n   * @param id - The GUI component ID\n   * @param data - Data to pass to the component\n   * @param dependencies - Optional runtime dependencies (overrides config dependencies)\n   * \n   * @example\n   * ```ts\n   * // Display immediately\n   * gui.display('inventory', { items: [] });\n   * \n   * // Display with runtime dependencies\n   * gui.display('shop', { shopId: 1 }, [playerSignal, shopSignal]);\n   * ```\n   */\n  display(id: string, data = {}, dependencies: Signal[] = []) {\n    if (!this.exists(id)) {\n      throw throwError(id);\n    }\n\n    const guiInstance = this.get(id)!;\n    \n    // Check if it's a Vue component (in extraGuis)\n    const isVueComponent = this.extraGuis.some(gui => gui.name === id);\n    \n    if (isVueComponent) {\n      // Handle Vue component display\n      this._handleVueComponentDisplay(id, data, dependencies, guiInstance);\n    } else {\n      // Handle CanvasEngine component display\n      this._handleCanvasComponentDisplay(id, data, dependencies, guiInstance);\n    }\n  }\n\n  /**\n   * Handle Vue component display logic\n   * \n   * @param id - GUI component ID\n   * @param data - Component data\n   * @param dependencies - Runtime dependencies\n   * @param guiInstance - GUI instance\n   */\n  private _handleVueComponentDisplay(id: string, data: any, dependencies: Signal[], guiInstance: GuiInstance) {\n    // Unsubscribe from previous subscription if exists\n    if (guiInstance.subscription) {\n      guiInstance.subscription.unsubscribe();\n      guiInstance.subscription = undefined;\n    }\n\n    // Use runtime dependencies or config dependencies\n    const deps = dependencies.length > 0 \n      ? dependencies \n      : (guiInstance.dependencies ? guiInstance.dependencies() : []);\n\n    if (deps.length > 0) {\n      // Subscribe to dependencies\n      guiInstance.subscription = combineLatest(\n        deps.map(dependency => dependency.observable)\n      ).subscribe((values) => {\n        if (values.every(value => value !== undefined)) {\n          guiInstance.data.set(data);\n          guiInstance.display.set(true);\n          this._notifyVueGui(id, true, data);\n        }\n      });\n      return;\n    }\n\n    // No dependencies, display immediately\n    guiInstance.data.set(data);\n    guiInstance.display.set(true);\n    this._notifyVueGui(id, true, data);\n  }\n\n  /**\n   * Handle CanvasEngine component display logic\n   * \n   * @param id - GUI component ID\n   * @param data - Component data\n   * @param dependencies - Runtime dependencies\n   * @param guiInstance - GUI instance\n   */\n  private _handleCanvasComponentDisplay(id: string, data: any, dependencies: Signal[], guiInstance: GuiInstance) {\n    // Unsubscribe from previous subscription if exists\n    if (guiInstance.subscription) {\n      guiInstance.subscription.unsubscribe();\n      guiInstance.subscription = undefined;\n    }\n\n    // Use runtime dependencies or config dependencies\n    const deps = dependencies.length > 0 \n      ? dependencies \n      : (guiInstance.dependencies ? guiInstance.dependencies() : []);\n\n    if (deps.length > 0) {\n      // Subscribe to dependencies\n      guiInstance.subscription = combineLatest(\n        deps.map(dependency => dependency.observable)\n      ).subscribe((values) => {\n        if (values.every(value => value !== undefined)) {\n          guiInstance.data.set(data);\n          guiInstance.display.set(true);\n        }\n      });\n      return;\n    }\n\n    // No dependencies, display immediately\n    guiInstance.data.set(data);\n    guiInstance.display.set(true);\n  }\n\n  /**\n   * Hide a GUI component\n   * \n   * Hides the GUI and cleans up any active subscriptions.\n   * Works with both CanvasEngine components and Vue components.\n   * \n   * @param id - The GUI component ID\n   * \n   * @example\n   * ```ts\n   * gui.hide('inventory');\n   * ```\n   */\n  hide(id: string) {\n    if (!this.exists(id)) {\n      throw throwError(id);\n    }\n\n    const guiInstance = this.get(id)!;\n    \n    // Unsubscribe if there's an active subscription\n    if (guiInstance.subscription) {\n      guiInstance.subscription.unsubscribe();\n      guiInstance.subscription = undefined;\n    }\n\n    guiInstance.display.set(false);\n    \n    // Check if it's a Vue component and notify VueGui\n    const isVueComponent = this.extraGuis.some(gui => gui.name === id);\n    if (isVueComponent) {\n      this._notifyVueGui(id, false);\n    }\n  }\n}\n"],"names":["DialogboxComponent"],"mappings":";;;;;;;;;;;;;AAmCA,MAAM,UAAA,GAAa,CAAC,EAAe,KAAA;AACjC,EAAA,MAAM,iBAAiB,EAAE,CAAA,0FAAA,CAAA;AAC3B,CAAA;AAEO,MAAM,MAAO,CAAA;AAAA;AAAA,EAMlB,YAAoB,OAAkB,EAAA;AAAlB,IAAA,IAAA,CAAA,OAAA,GAAA,OAAA;AAJpB,IAAM,IAAA,CAAA,GAAA,GAAA,MAAA,CAAoC,EAAE,CAAA;AAC5C,IAAA,IAAA,CAAA,SAAA,GAA2B,EAAC;AAC5B,IAAA,IAAA,CAAQ,cAAsB,GAAA,IAAA;AAG5B,IAAK,IAAA,CAAA,SAAA,GAAY,MAAO,CAAA,OAAA,EAAS,cAAc,CAAA;AAC/C,IAAA,IAAA,CAAK,GAAI,CAAA;AAAA,MACP,IAAM,EAAA,YAAA;AAAA,MACN,SAAW,EAAAA;AAAA,KACZ,CAAA;AAAA;AACH,EAEA,MAAM,WAAc,GAAA;AAClB,IAAA,IAAA,CAAK,SAAU,CAAA,EAAA,CAAG,UAAY,EAAA,CAAC,IAAuC,KAAA;AACpE,MAAA,IAAA,CAAK,OAAQ,CAAA,IAAA,CAAK,KAAO,EAAA,IAAA,CAAK,IAAI,CAAA;AAAA,KACnC,CAAA;AAED,IAAA,IAAA,CAAK,SAAU,CAAA,EAAA,CAAG,UAAY,EAAA,CAAC,KAAkB,KAAA;AAC/C,MAAA,IAAA,CAAK,KAAK,KAAK,CAAA;AAAA,KAChB,CAAA;AAAA;AACH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,mBAAmB,cAAqB,EAAA;AACtC,IAAA,IAAA,CAAK,cAAiB,GAAA,cAAA;AAAA;AACxB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUQ,aAAc,CAAA,KAAA,EAAe,OAAkB,EAAA,IAAA,GAAY,EAAI,EAAA;AACrE,IAAA,IAAI,IAAK,CAAA,cAAA,IAAkB,IAAK,CAAA,cAAA,CAAe,EAAI,EAAA;AAEjD,MAAA,MAAM,WAAW,IAAK,CAAA,SAAA,CAAU,KAAK,CAAO,GAAA,KAAA,GAAA,CAAI,SAAS,KAAK,CAAA;AAC9D,MAAA,IAAI,QAAU,EAAA;AAEZ,QAAA,IAAA,CAAK,cAAe,CAAA,EAAA,CAAG,GAAI,CAAA,KAAK,CAAI,GAAA;AAAA,UAClC,IAAM,EAAA,KAAA;AAAA,UACN,OAAA;AAAA,UACA,IAAA;AAAA,UACA,cAAgB,EAAA;AAAA;AAAA,SAClB;AAEA,QAAK,IAAA,CAAA,cAAA,CAAe,EAAG,CAAA,GAAA,GAAM,MAAO,CAAA,MAAA,CAAO,EAAI,EAAA,IAAA,CAAK,cAAe,CAAA,EAAA,CAAG,GAAG,CAAA;AAAA;AAC3E;AACF;AACF;AAAA;AAAA;AAAA;AAAA,EAMA,wBAA2B,GAAA;AACzB,IAAA,IAAI,IAAK,CAAA,cAAA,IAAkB,IAAK,CAAA,cAAA,CAAe,EAAI,EAAA;AAEjD,MAAK,IAAA,CAAA,SAAA,CAAU,QAAQ,CAAO,GAAA,KAAA;AAC5B,QAAA,IAAA,CAAK,cAAe,CAAA,EAAA,CAAG,GAAI,CAAA,GAAA,CAAI,IAAI,CAAI,GAAA;AAAA,UACrC,MAAM,GAAI,CAAA,IAAA;AAAA,UACV,OAAA,EAAS,IAAI,OAAQ,EAAA;AAAA,UACrB,IAAA,EAAM,IAAI,IAAK,EAAA;AAAA,UACf,cAAgB,EAAA;AAAA,SAClB;AAAA,OACD,CAAA;AAGD,MAAK,IAAA,CAAA,cAAA,CAAe,EAAG,CAAA,GAAA,GAAM,MAAO,CAAA,MAAA,CAAO,EAAI,EAAA,IAAA,CAAK,cAAe,CAAA,EAAA,CAAG,GAAG,CAAA;AAAA;AAC3E;AACF,EAEA,cAAA,CAAe,KAAe,EAAA,IAAA,EAAc,IAAW,EAAA;AACrD,IAAK,IAAA,CAAA,SAAA,CAAU,KAAK,iBAAmB,EAAA;AAAA,MACrC,KAAA;AAAA,MACA,IAAA;AAAA,MACA;AAAA,KACD,CAAA;AAAA;AACH,EAEA,QAAA,CAAS,OAAe,IAAY,EAAA;AAClC,IAAK,IAAA,CAAA,SAAA,CAAU,KAAK,UAAY,EAAA;AAAA,MAC9B,KAAA;AAAA,MACA;AAAA,KACD,CAAA;AAAA;AACH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA2BA,IAAI,GAAiB,EAAA;AACnB,IAAM,MAAA,KAAA,GAAQ,GAAI,CAAA,IAAA,IAAQ,GAAI,CAAA,EAAA;AAC9B,IAAA,IAAI,CAAC,KAAO,EAAA;AACV,MAAM,MAAA,IAAI,MAAM,4BAA4B,CAAA;AAAA;AAG9C,IAAA,MAAM,WAA2B,GAAA;AAAA,MAC/B,IAAM,EAAA,KAAA;AAAA,MACN,WAAW,GAAI,CAAA,SAAA;AAAA,MACf,OAAS,EAAA,MAAA,CAAO,GAAI,CAAA,OAAA,IAAW,KAAK,CAAA;AAAA,MACpC,IAAM,EAAA,MAAA,CAAO,GAAI,CAAA,IAAA,IAAQ,EAAE,CAAA;AAAA,MAC3B,WAAA,EAAa,IAAI,WAAe,IAAA,KAAA;AAAA,MAChC,cAAc,GAAI,CAAA;AAAA,KACpB;AAIA,IAAI,IAAA,OAAO,GAAI,CAAA,SAAA,KAAc,UAAY,EAAA;AACvC,MAAA,WAAA,CAAY,SAAY,GAAA,GAAA;AACxB,MAAK,IAAA,CAAA,SAAA,CAAU,KAAK,WAAW,CAAA;AAG/B,MAAA,IAAI,YAAY,WAAa,EAAA;AAC3B,QAAA,IAAA,CAAK,cAAc,KAAO,EAAA,IAAA,EAAM,GAAI,CAAA,IAAA,IAAQ,EAAE,CAAA;AAAA;AAEhD,MAAA;AAAA;AAGF,IAAK,IAAA,CAAA,GAAA,EAAM,CAAA,KAAK,CAAI,GAAA,WAAA;AAGpB,IAAA,IAAI,WAAY,CAAA,WAAA,IAAe,OAAO,GAAA,CAAI,cAAc,UAAY,EAAA;AAClE,MAAA,IAAA,CAAK,QAAQ,KAAK,CAAA;AAAA;AACpB;AACF,EAEA,IAAI,EAAqC,EAAA;AAEvC,IAAA,MAAM,SAAY,GAAA,IAAA,CAAK,GAAI,EAAA,CAAE,EAAE,CAAA;AAC/B,IAAA,IAAI,SAAW,EAAA;AACb,MAAO,OAAA,SAAA;AAAA;AAIT,IAAA,OAAO,KAAK,SAAU,CAAA,IAAA,CAAK,CAAO,GAAA,KAAA,GAAA,CAAI,SAAS,EAAE,CAAA;AAAA;AACnD,EAEA,OAAO,EAAqB,EAAA;AAC1B,IAAA,OAAO,CAAC,CAAC,IAAK,CAAA,GAAA,CAAI,EAAE,CAAA;AAAA;AACtB,EAEA,MAAsC,GAAA;AACpC,IAAA,MAAM,OAAU,GAAA,EAAE,GAAG,IAAA,CAAK,KAAM,EAAA;AAGhC,IAAK,IAAA,CAAA,SAAA,CAAU,QAAQ,CAAO,GAAA,KAAA;AAC5B,MAAQ,OAAA,CAAA,GAAA,CAAI,IAAI,CAAI,GAAA,GAAA;AAAA,KACrB,CAAA;AAED,IAAO,OAAA,OAAA;AAAA;AACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAuBA,QAAQ,EAAY,EAAA,IAAA,GAAO,EAAI,EAAA,YAAA,GAAyB,EAAI,EAAA;AAC1D,IAAA,IAAI,CAAC,IAAA,CAAK,MAAO,CAAA,EAAE,CAAG,EAAA;AACpB,MAAA,MAAM,WAAW,EAAE,CAAA;AAAA;AAGrB,IAAM,MAAA,WAAA,GAAc,IAAK,CAAA,GAAA,CAAI,EAAE,CAAA;AAG/B,IAAA,MAAM,iBAAiB,IAAK,CAAA,SAAA,CAAU,KAAK,CAAO,GAAA,KAAA,GAAA,CAAI,SAAS,EAAE,CAAA;AAEjE,IAAA,IAAI,cAAgB,EAAA;AAElB,MAAA,IAAA,CAAK,0BAA2B,CAAA,EAAA,EAAI,IAAM,EAAA,YAAA,EAAc,WAAW,CAAA;AAAA,KAC9D,MAAA;AAEL,MAAA,IAAA,CAAK,6BAA8B,CAAA,EAAA,EAAI,IAAM,EAAA,YAAA,EAAc,WAAW,CAAA;AAAA;AACxE;AACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUQ,0BAA2B,CAAA,EAAA,EAAY,IAAW,EAAA,YAAA,EAAwB,WAA0B,EAAA;AAE1G,IAAA,IAAI,YAAY,YAAc,EAAA;AAC5B,MAAA,WAAA,CAAY,aAAa,WAAY,EAAA;AACrC,MAAA,WAAA,CAAY,YAAe,GAAA,MAAA;AAAA;AAI7B,IAAM,MAAA,IAAA,GAAO,YAAa,CAAA,MAAA,GAAS,CAC/B,GAAA,YAAA,GACC,YAAY,YAAe,GAAA,WAAA,CAAY,YAAa,EAAA,GAAI,EAAC;AAE9D,IAAI,IAAA,IAAA,CAAK,SAAS,CAAG,EAAA;AAEnB,MAAA,WAAA,CAAY,YAAe,GAAA,aAAA;AAAA,QACzB,IAAK,CAAA,GAAA,CAAI,CAAc,UAAA,KAAA,UAAA,CAAW,UAAU;AAAA,OAC9C,CAAE,SAAU,CAAA,CAAC,MAAW,KAAA;AACtB,QAAA,IAAI,MAAO,CAAA,KAAA,CAAM,CAAS,KAAA,KAAA,KAAA,KAAU,MAAS,CAAG,EAAA;AAC9C,UAAY,WAAA,CAAA,IAAA,CAAK,IAAI,IAAI,CAAA;AACzB,UAAY,WAAA,CAAA,OAAA,CAAQ,IAAI,IAAI,CAAA;AAC5B,UAAK,IAAA,CAAA,aAAA,CAAc,EAAI,EAAA,IAAA,EAAM,IAAI,CAAA;AAAA;AACnC,OACD,CAAA;AACD,MAAA;AAAA;AAIF,IAAY,WAAA,CAAA,IAAA,CAAK,IAAI,IAAI,CAAA;AACzB,IAAY,WAAA,CAAA,OAAA,CAAQ,IAAI,IAAI,CAAA;AAC5B,IAAK,IAAA,CAAA,aAAA,CAAc,EAAI,EAAA,IAAA,EAAM,IAAI,CAAA;AAAA;AACnC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUQ,6BAA8B,CAAA,EAAA,EAAY,IAAW,EAAA,YAAA,EAAwB,WAA0B,EAAA;AAE7G,IAAA,IAAI,YAAY,YAAc,EAAA;AAC5B,MAAA,WAAA,CAAY,aAAa,WAAY,EAAA;AACrC,MAAA,WAAA,CAAY,YAAe,GAAA,MAAA;AAAA;AAI7B,IAAM,MAAA,IAAA,GAAO,YAAa,CAAA,MAAA,GAAS,CAC/B,GAAA,YAAA,GACC,YAAY,YAAe,GAAA,WAAA,CAAY,YAAa,EAAA,GAAI,EAAC;AAE9D,IAAI,IAAA,IAAA,CAAK,SAAS,CAAG,EAAA;AAEnB,MAAA,WAAA,CAAY,YAAe,GAAA,aAAA;AAAA,QACzB,IAAK,CAAA,GAAA,CAAI,CAAc,UAAA,KAAA,UAAA,CAAW,UAAU;AAAA,OAC9C,CAAE,SAAU,CAAA,CAAC,MAAW,KAAA;AACtB,QAAA,IAAI,MAAO,CAAA,KAAA,CAAM,CAAS,KAAA,KAAA,KAAA,KAAU,MAAS,CAAG,EAAA;AAC9C,UAAY,WAAA,CAAA,IAAA,CAAK,IAAI,IAAI,CAAA;AACzB,UAAY,WAAA,CAAA,OAAA,CAAQ,IAAI,IAAI,CAAA;AAAA;AAC9B,OACD,CAAA;AACD,MAAA;AAAA;AAIF,IAAY,WAAA,CAAA,IAAA,CAAK,IAAI,IAAI,CAAA;AACzB,IAAY,WAAA,CAAA,OAAA,CAAQ,IAAI,IAAI,CAAA;AAAA;AAC9B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAeA,KAAK,EAAY,EAAA;AACf,IAAA,IAAI,CAAC,IAAA,CAAK,MAAO,CAAA,EAAE,CAAG,EAAA;AACpB,MAAA,MAAM,WAAW,EAAE,CAAA;AAAA;AAGrB,IAAM,MAAA,WAAA,GAAc,IAAK,CAAA,GAAA,CAAI,EAAE,CAAA;AAG/B,IAAA,IAAI,YAAY,YAAc,EAAA;AAC5B,MAAA,WAAA,CAAY,aAAa,WAAY,EAAA;AACrC,MAAA,WAAA,CAAY,YAAe,GAAA,MAAA;AAAA;AAG7B,IAAY,WAAA,CAAA,OAAA,CAAQ,IAAI,KAAK,CAAA;AAG7B,IAAA,MAAM,iBAAiB,IAAK,CAAA,SAAA,CAAU,KAAK,CAAO,GAAA,KAAA,GAAA,CAAI,SAAS,EAAE,CAAA;AACjE,IAAA,IAAI,cAAgB,EAAA;AAClB,MAAK,IAAA,CAAA,aAAA,CAAc,IAAI,KAAK,CAAA;AAAA;AAC9B;AAEJ;;;;"}

package/dist/presets/faceset.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Creates a faceset preset for character expressions
+ *
+ * This preset allows you to define multiple facial expressions for a character,
+ * where each expression corresponds to a specific frame position (frameX, frameY)
+ * within a single faceset texture. Each expression is defined by its position
+ * in the faceset grid.
+ *
+ * @param options - Object containing the faceset configuration
+ * @param framesWidth - Number of frames horizontally in the faceset texture
+ * @param framesHeight - Number of frames vertically in the faceset texture
+ * @param expressions - Object mapping expression names to their frame positions as tuples [frameX, frameY]
+ * @returns Faceset configuration with animations for each expression
+ *
+ * @example
+ * ```typescript
+ * const faceset = FacesetPreset({
+ *   id: "facesetId",
+ *   image: "faceset.png",
+ *   width: 1024,
+ *   height: 1024,
+ * }, 4, 2, {
+ *   happy: [0, 0],
+ *   sad: [1, 0],
+ *   angry: [2, 0],
+ *   surprised: [3, 0]
+ * });
+ * ```
+ */
+export declare const FacesetPreset: (options: any, framesWidth: number, framesHeight: number, expressions: Record<string, [number, number]>) => any;

package/dist/presets/index.d.ts

@@ -121,4 +121,5 @@ export declare const Presets: {
             };
         };
     };
+    FacesetPreset: (options: any, framesWidth: number, framesHeight: number, expressions: Record<string, [number, number]>) => any;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpgjs/client",
-  "version": "5.0.0-alpha.11",
+  "version": "5.0.0-alpha.12",
   "description": "RPGJS is a framework for creating RPG/MMORPG games",
   "main": "dist/index.js",
   "types": "./dist/index.d.ts",