@rpgjs/client 5.0.0-alpha.2 → 5.0.0-alpha.20

package/dist/Game/AnimationManager.d.ts

@@ -0,0 +1,8 @@
+import { RpgCommonPlayer } from '@rpgjs/common';
+export declare class AnimationManager {
+    current: import('canvasengine').WritableArraySignal<any[]>;
+    displayEffect(params: any, player: RpgCommonPlayer | {
+        x: number;
+        y: number;
+    }): void;
+}

package/dist/Game/Map.d.ts

@@ -1,7 +1,13 @@
 import { RpgCommonMap } from '@rpgjs/common';
 import { RpgClientPlayer } from './Player';
 import { RpgClientEvent } from './Event';
-export declare class RpgClientMap extends RpgCommonMap<RpgClientPlayer> {
+import { RpgClientEngine } from '../RpgClientEngine';
+export declare class RpgClientMap extends RpgCommonMap<any> {
+    engine: RpgClientEngine;
     players: import('canvasengine').WritableObjectSignal<Record<string, RpgClientPlayer>>;
     events: import('canvasengine').WritableObjectSignal<Record<string, RpgClientEvent>>;
+    currentPlayer: import('canvasengine').ComputedSignal<RpgClientPlayer>;
+    getCurrentPlayer(): RpgClientPlayer;
+    reset(): void;
+    stepPredictionTick(): void;
 }

package/dist/Gui/Gui.d.ts

@@ -1,23 +1,146 @@
 import { Context } from '@signe/di';
+import { Signal, WritableSignal } from 'canvasengine';
+import { Subscription } from 'rxjs';
 interface GuiOptions {
-    name: string;
+    name?: string;
+    id?: string;
     component: any;
     display?: boolean;
     data?: any;
+    /**
+     * Auto display the GUI when added to the system
+     * @default false
+     */
+    autoDisplay?: boolean;
+    /**
+     * Function that returns an array of Signal dependencies
+     * The GUI will only display when all dependencies are resolved (!= undefined)
+     * @returns Array of Signal dependencies
+     */
+    dependencies?: () => Signal[];
+}
+interface GuiInstance {
+    name: string;
+    component: any;
+    display: WritableSignal<boolean>;
+    data: WritableSignal<any>;
+    autoDisplay: boolean;
+    dependencies?: () => Signal[];
+    subscription?: Subscription;
 }
 export declare class RpgGui {
     private context;
     private webSocket;
-    gui: import('canvasengine').WritableArraySignal<any>;
+    gui: import('canvasengine').WritableObjectSignal<Record<string, GuiInstance>>;
+    extraGuis: GuiInstance[];
+    private vueGuiInstance;
     constructor(context: Context);
     _initialize(): Promise<void>;
+    /**
+     * 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: any): void;
+    /**
+     * 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
+     */
+    private _notifyVueGui;
+    /**
+     * Initialize Vue components in the VueGui instance
+     * This should be called after VueGui is mounted
+     */
+    _initializeVueComponents(): void;
     guiInteraction(guiId: string, name: string, data: any): void;
     guiClose(guiId: string, data?: any): void;
+    /**
+     * 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: GuiOptions): void;
-    get(id: string | GuiOptions): any;
+    get(id: string): GuiInstance | undefined;
     exists(id: string): boolean;
-    getAll(): any;
-    display(id: string, data?: {}): void;
+    getAll(): Record<string, GuiInstance>;
+    /**
+     * 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: string, data?: {}, dependencies?: Signal[]): void;
+    /**
+     * Handle Vue component display logic
+     *
+     * @param id - GUI component ID
+     * @param data - Component data
+     * @param dependencies - Runtime dependencies
+     * @param guiInstance - GUI instance
+     */
+    private _handleVueComponentDisplay;
+    /**
+     * Handle CanvasEngine component display logic
+     *
+     * @param id - GUI component ID
+     * @param data - Component data
+     * @param dependencies - Runtime dependencies
+     * @param guiInstance - GUI instance
+     */
+    private _handleCanvasComponentDisplay;
+    /**
+     * 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: string): void;
 }
 export {};

package/dist/RpgClient.d.ts

@@ -1,8 +1,9 @@
+import { ComponentFunction, Signal } 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';
+import { RpgClientObject } from './Game/Object';
+type RpgComponent = RpgClientObject;
+type SceneMap = Container;
 export interface RpgClientEngineHooks {
     /**
      * When the engine is started. If you send false, you prevent the client from connecting to the server
@@ -10,7 +11,7 @@ export interface RpgClientEngineHooks {
      * @prop { (engine: RpgClientEngine) => boolean | any } [onStart]
      * @memberof RpgEngineHooks
      */
-    onStart?: (engine: RpgClientEngine) => boolean | void;
+    onStart?: (engine: RpgClientEngine) => boolean | void | Promise<boolean | void>;
     /**
      * Each frame
      *
@@ -59,6 +60,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 +192,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 +235,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 +243,9 @@ export interface RpgClient {
      *      }
      * }
      *
-     * @RpgModule<RpgClient>({
+     * defineModule<RpgClient>({
      *      engine
      * })
-     * class RpgClientModule {}
      * ```
      *
      * @prop {RpgClientEngineHooks} [engine]
@@ -227,99 +254,204 @@ 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
+     * Resolver function for dynamically creating spritesheets
+     *
+     * This function is called when a spritesheet is requested but not found in the cache.
+     * It can be synchronous (returns directly) or asynchronous (returns a Promise).
+     * The resolved spritesheet is automatically cached for future use.
      *
      * ```ts
-     * import { RpgClient, RpgModule } from '@rpgjs/client'
-     *
-     * const component = {
-     *      name: 'my-gui',
-     *      template: `
-     *          <div>
-     *              Component
-     *          </div>
-     *      `
-     * }
+     * import { defineModule, RpgClient } from '@rpgjs/client'
+     *
+     * defineModule<RpgClient>({
+     *      spritesheetResolver: (id: string) => {
+     *          // Synchronous resolver
+     *          if (id === 'dynamic-sprite') {
+     *              return {
+     *                  id: 'dynamic-sprite',
+     *                  image: 'path/to/image.png',
+     *                  framesWidth: 32,
+     *                  framesHeight: 32
+     *              };
+     *          }
+     *          return undefined;
+     *      }
+     * })
      *
-     * @RpgModule<RpgClient>({
+     * // Or asynchronous resolver
+     * defineModule<RpgClient>({
+     *      spritesheetResolver: async (id: string) => {
+     *          const response = await fetch(`/api/spritesheets/${id}`);
+     *          const data = await response.json();
+     *          return data;
+     *      }
+     * })
+     * ```
+     *
+     * @prop {(id: string) => any | Promise<any>} [spritesheetResolver]
+     * @memberof RpgClient
+     * */
+    spritesheetResolver?: (id: string) => any | Promise<any>;
+    /**
+     * Resolver function for dynamically loading sounds
+     *
+     * The resolver is called when a sound is requested but not found in the cache.
+     * It can be synchronous (returns directly) or asynchronous (returns a Promise).
+     * The resolved sound is automatically cached for future use.
+     *
+     * ```ts
+     * import { defineModule, RpgClient } from '@rpgjs/client'
+     *
+     * defineModule<RpgClient>({
+     *     soundResolver: (id: string) => {
+     *         if (id === 'dynamic-sound') {
+     *             return { id: 'dynamic-sound', src: 'path/to/sound.mp3' };
+     *         }
+     *         return undefined;
+     *     }
+     * })
+     * ```
+     *
+     * @prop {(id: string) => any | Promise<any>} [soundResolver]
+     * @memberof RpgClient
+     * */
+    soundResolver?: (id: string) => any | Promise<any>;
+    /**
+     * Array containing the list of GUI components
+     *
+     * ```ts
+     * import { defineModule, RpgClient } from '@rpgjs/client'
+     * import InventoryComponent from './inventory.ce'
+     *
+     * defineModule<RpgClient>({
      *      gui: [
-     *          component
+     *          {
+     *              id: 'inventory',
+     *              component: InventoryComponent,
+     *              autoDisplay: true,
+     *              dependencies: () => [playerSignal, inventorySignal]
+     *          }
      *      ]
      * })
-     * class RpgClientEngine {}
      * ```
      *
      * [Guide: Create GUI](/guide/create-gui.html)
      *
-     * @prop {Array<Component of VueJS>} [gui]
+     * @prop {Array<GuiOptions>} [gui]
      * @memberof RpgClient
      * */
-    gui?: any[];
+    gui?: ({
+        id: string;
+        component: ComponentFunction;
+        /**
+         * Auto display the GUI when added to the system
+         * @default false
+         */
+        autoDisplay?: boolean;
+        /**
+         * Function that returns an array of Signal dependencies
+         * The GUI will only display when all dependencies are resolved (!= undefined)
+         */
+        dependencies?: () => Signal[];
+    } | any)[];
     /**
      * Array containing the list of sounds
-     * An element contains a class with the `@Sound` decorator
+     * Each element can be:
+     * - A simple object containing sound definitions
+     * - A class decorated with @Sound
      *
      * ```ts
-     * import { Sound, RpgModule, RpgClient } from '@rpgjs/client'
+     * import { defineModule, RpgClient, Sound } from '@rpgjs/client'
+     *
+     * // Using simple objects
+     * defineModule<RpgClient>({
+     *      sounds: [
+     *          {
+     *              id: 'typewriter',
+     *              src: 'typewriter.wav'
+     *          },
+     *          {
+     *              id: 'cursor',
+     *              src: 'cursor.wav'
+     *          }
+     *      ]
+     * })
      *
+     * // Using @Sound decorator
      * @Sound({
-     *      sounds: {
-     *          town: require('./assets/Town_Theme.ogg')
-     *      }
+     *     id: 'town-music',
+     *     sound: require('./sound/town.ogg'),
+     *     loop: true,
+     *     volume: 0.5
+     * })
+     * export class TownMusic {}
+     *
+     * defineModule<RpgClient>({
+     *      sounds: [TownMusic]
+     * })
+     *
+     * // Multiple sounds in one class
+     * @Sound({
+     *     sounds: {
+     *         hero: require('./assets/hero.ogg'),
+     *         monster: require('./assets/monster.ogg')
+     *     },
+     *     loop: true
      * })
-     * class Sounds {}
+     * export class CharacterSounds {}
      *
-     * @RpgModule<RpgClient>({
-     *      sounds: [ Sounds ]
+     * defineModule<RpgClient>({
+     *      sounds: [CharacterSounds]
      * })
-     * class RpgClientEngine {}
      * ```
      *
-     * @prop {Array<Class>} [sounds]
+     * @prop {Array<Object | Class>} [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 +462,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]
@@ -351,9 +482,36 @@ export interface RpgClient {
     scenes?: {
         map: RpgSceneMapHooks;
     };
-    effects?: {
+    sceneMap?: RpgSceneMapHooks;
+    /**
+     * Array containing the list of component animations
+     * Each element defines a temporary component to display for animations like hits, effects, etc.
+     *
+     * ```ts
+     * import { defineModule, RpgClient } from '@rpgjs/client'
+     * import HitComponent from './hit.ce'
+     * import ExplosionComponent from './explosion.ce'
+     *
+     * defineModule<RpgClient>({
+     *      componentAnimations: [
+     *          {
+     *              id: 'hit',
+     *              component: HitComponent
+     *          },
+     *          {
+     *              id: 'explosion',
+     *              component: ExplosionComponent
+     *          }
+     *      ]
+     * })
+     * ```
+     *
+     * @prop {Array<{id: string, component: ComponentFunction}>} [componentAnimations]
+     * @memberof RpgClient
+     * */
+    componentAnimations?: {
         id: string;
-        component: any;
+        component: ComponentFunction;
     }[];
 }
 export {};