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

package/dist/index9.js

@@ -1,19 +1,30 @@
 import { inject } from './index16.js';
 import { signal } from 'canvasengine';
-import { WebSocketToken } from './index17.js';
-import { PrebuiltGui } from './index10.js';
+import { WebSocketToken } from './index18.js';
+import component from './index10.js';
+import { combineLatest } from 'rxjs';
+import '@rpgjs/common';
+import './index19.js';
+import './index20.js';
+import 'pixi.js';
+import './index22.js';
+import './index23.js';
+import '@canvasengine/presets';
 
 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",
-      component: PrebuiltGui.Dialogbox
+      component: component
     });
   }
   async _initialize() {
@@ -24,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,
@@ -37,38 +97,192 @@ class RpgGui {
       data
     });
   }
+  /**
+   * 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 (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)
+   * @param gui.dependencies - Function returning Signal dependencies
+   * 
+   * @example
+   * ```ts
+   * gui.add({
+   *   name: 'inventory',
+   *   component: InventoryComponent, // Must be a .ce component
+   *   autoDisplay: true,
+   *   dependencies: () => [playerSignal, inventorySignal]
+   * });
+   * ```
+   */
   add(gui) {
-    this.gui()[gui.name] = {
-      name: gui.name,
+    const guiId = gui.name || gui.id;
+    if (!guiId) {
+      throw new Error("GUI must have a name or id");
+    }
+    const guiInstance = {
+      name: guiId,
       component: gui.component,
       display: signal(gui.display || false),
-      data: signal(gui.data || {})
+      data: signal(gui.data || {}),
+      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 && typeof gui.component === "function") {
+      this.display(guiId);
+    }
   }
   get(id) {
-    if (typeof id != "string") {
-      id = id.name;
+    const canvasGui = this.gui()[id];
+    if (canvasGui) {
+      return canvasGui;
     }
-    return this.gui()[id];
+    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(id, data = {}) {
+  /**
+   * Display a GUI component
+   * 
+   * 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
+   * @param dependencies - Optional runtime dependencies (overrides config dependencies)
+   * 
+   * @example
+   * ```ts
+   * // Display immediately
+   * gui.display('inventory', { items: [] });
+   * 
+   * // Display with runtime dependencies
+   * gui.display('shop', { shopId: 1 }, [playerSignal, shopSignal]);
+   * ```
+   */
+  display(id, data = {}, dependencies = []) {
     if (!this.exists(id)) {
       throw throwError(id);
     }
-    this.get(id).data.set(data);
-    this.get(id).display.set(true);
+    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;
+    }
+    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);
+        }
+      });
+      return;
+    }
+    guiInstance.data.set(data);
+    guiInstance.display.set(true);
+  }
+  /**
+   * 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
+   * 
+   * @example
+   * ```ts
+   * gui.hide('inventory');
+   * ```
+   */
   hide(id) {
     if (!this.exists(id)) {
       throw throwError(id);
     }
-    this.get(id).display.set(false);
+    const guiInstance = this.get(id);
+    if (guiInstance.subscription) {
+      guiInstance.subscription.unsubscribe();
+      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 } from \"canvasengine\";\nimport { AbstractWebsocket, WebSocketToken } from \"../services/AbstractSocket\";\nimport { PrebuiltGui } from \"../components/gui\";\n\ninterface GuiOptions {\n  name: string;\n  component: any;\n  display?: boolean;\n  data?: any;\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<any>({});\n\n  constructor(private context: Context) {\n    this.webSocket = inject(context, WebSocketToken);\n    this.add({\n      name: \"rpg-dialog\",\n      component: PrebuiltGui.Dialogbox,\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  add(gui: GuiOptions) {\n    this.gui()[gui.name] = {\n      name: gui.name,\n      component: gui.component,\n      display: signal(gui.display || false),\n      data: signal(gui.data || {}),\n    };\n  }\n\n  get(id: string | GuiOptions) {\n    if (typeof id != \"string\") {\n      id = id.name;\n    }\n    return this.gui()[id];\n  }\n\n  exists(id: string): boolean {\n    return !!this.get(id);\n  }\n\n  getAll() {\n    return this.gui();\n  }\n\n  display(id: string, data = {}) {\n    if (!this.exists(id)) {\n      throw throwError(id);\n    }\n    this.get(id).data.set(data);\n    this.get(id).display.set(true);\n  }\n\n  hide(id: string) {\n    if (!this.exists(id)) {\n      throw throwError(id);\n    }\n    this.get(id).display.set(false);\n  }\n}\n"],"names":[],"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":"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"}

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/dist/services/mmorpg.d.ts

@@ -26,7 +26,7 @@ declare class UpdateMapStandaloneService extends UpdateMapService {
     constructor(context: Context, options: MmorpgOptions);
     update(map: any): Promise<void>;
 }
-export declare function provideMmorpg(options: MmorpgOptions): (typeof RpgGui | typeof RpgClientEngine | {
+export declare function provideMmorpg(options: MmorpgOptions): (typeof RpgClientEngine | typeof RpgGui | {
     provide: string;
     useFactory: (context: Context) => BridgeWebsocket;
 } | {

package/dist/services/standalone.d.ts

@@ -22,7 +22,7 @@ declare class UpdateMapStandaloneService extends UpdateMapService {
     private server;
     update(mapId: string, map: any): Promise<void>;
 }
-export declare function provideRpg(server: any): (typeof RpgGui | typeof RpgClientEngine | {
+export declare function provideRpg(server: any): (typeof RpgClientEngine | typeof RpgGui | {
     provide: string;
     useFactory: (context: Context) => BridgeWebsocket;
     useClass?: undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpgjs/client",
-  "version": "5.0.0-alpha.10",
+  "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",
@@ -22,10 +22,12 @@
     "pixi.js": "^8.9.2"
   },
   "dependencies": {
-    "@rpgjs/common": "5.0.0-alpha.10",
-    "@signe/di": "^2.3.3",
-    "@signe/room": "^2.3.3",
-    "@signe/sync": "^2.3.3",
+    "@rpgjs/client": "*",
+    "@rpgjs/common": "*",
+    "@rpgjs/server": "*",
+    "@signe/di": "^2.4.0",
+    "@signe/room": "^2.4.0",
+    "@signe/sync": "^2.4.0",
     "rxjs": "^7.8.2"
   },
   "devDependencies": {

package/src/Game/AnimationManager.ts

@@ -11,6 +11,7 @@ export class AnimationManager {
       id,
       x: player.x,
       y: player.y,
+      object: player,
       onFinish: () => {
         const index = this.current().findIndex((value) => value.id === id);
         this.current().splice(index, 1);

package/src/Game/Map.ts

@@ -1,10 +1,18 @@
 import { RpgCommonMap } from "@rpgjs/common";
 import { sync, users } from "@signe/sync";
 import { RpgClientPlayer } from "./Player";
-import { Signal, signal } from "canvasengine";
+import { Signal, signal, computed } from "canvasengine";
 import { RpgClientEvent } from "./Event";
+import { RpgClientEngine } from "../RpgClientEngine";
+import { inject } from "../core/inject";
 
 export class RpgClientMap extends RpgCommonMap<RpgClientPlayer> {
+  engine: RpgClientEngine = inject(RpgClientEngine)
   @users(RpgClientPlayer) players = signal<Record<string, RpgClientPlayer>>({});
   @sync(RpgClientEvent) events = signal<Record<string, RpgClientEvent>>({});
+  currentPlayer = computed(() => this.players()[this.engine.playerIdSignal()!])
+
+  getCurrentPlayer() {
+    return this.currentPlayer()
+  }
 }

package/src/Game/Object.ts

@@ -1,6 +1,9 @@
-import { RpgCommonPlayer } from "@rpgjs/common";
+import { Hooks, ModulesToken, RpgCommonPlayer } from "@rpgjs/common";
+import { sync } from "@signe/sync";
 import { trigger, signal } from "canvasengine";
 import { Subscription } from "rxjs";
+import { inject } from "../core/inject";
+import { RpgClientEngine } from "../RpgClientEngine";
 
 export abstract class RpgClientObject extends RpgCommonPlayer {
   abstract type: string;
@@ -8,14 +11,28 @@ export abstract class RpgClientObject extends RpgCommonPlayer {
   particleName = signal('')
   animationCurrentIndex = signal(0)
   animationIsPlaying = signal(false)
+  _param = signal({})
+
+  constructor() {
+    super()
+    this.hooks.callHooks("client-sprite-onInit", this).subscribe();
+  }
+
+  get hooks() {
+    return inject<Hooks>(ModulesToken);
+  }
+  
   private animationSubscription?: Subscription
 
   flash(color: string, duration: number = 100) {
-    const lastTint = this.tint()
-    this.tint.set(color);
-    setTimeout(() => {
-      this.tint.set(lastTint)
-    }, duration)
+    return new Promise((resolve) => {
+      const lastTint = this.tint()
+      this.tint.set(color);
+      setTimeout(() => {
+        this.tint.set(lastTint)
+        resolve(true)
+      }, duration)
+    })
   }
 
   /**
@@ -82,4 +99,9 @@ export abstract class RpgClientObject extends RpgCommonPlayer {
     })
     this.animationName.set(animationName);
   }
+
+  showComponentAnimation(id: string, params: any) {
+    const engine = inject(RpgClientEngine)
+    engine.getComponentAnimation(id).displayEffect(params, this)
+  }
 }