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

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/RpgClient.d.ts

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

package/dist/RpgClientEngine.d.ts

@@ -1,5 +1,8 @@
 import { Context } from '@signe/di';
-import { EffectManager } from './Game/EffectManager';
+import { AbstractWebsocket } from './services/AbstractSocket';
+import { AnimationManager } from './Game/AnimationManager';
+import { Observable } from 'rxjs';
+import * as PIXI from "pixi.js";
 export declare class RpgClientEngine<T = any> {
     context: Context;
     private guiService;
@@ -15,10 +18,15 @@ export declare class RpgClientEngine<T = any> {
     height: import('canvasengine').WritableSignal<string>;
     spritesheets: Map<string, any>;
     sounds: Map<string, any>;
-    effects: any[];
+    componentAnimations: any[];
     particleSettings: {
         emitters: any[];
     };
+    renderer: PIXI.Renderer;
+    tick: Observable<number>;
+    playerIdSignal: import('canvasengine').WritableSignal<string | null>;
+    spriteComponentsBehind: import('canvasengine').WritableArraySignal<any[]>;
+    spriteComponentsInFront: import('canvasengine').WritableArraySignal<any[]>;
     constructor(context: Context);
     start(): Promise<void>;
     private initListeners;
@@ -26,18 +34,92 @@ export declare class RpgClientEngine<T = any> {
     addSpriteSheet<T = any>(spritesheetClass: any, id?: string): any;
     addSound(sound: any, id?: string): any;
     addParticle(particle: any): any;
-    addEffect(effect: {
+    /**
+     * Add a component to render behind sprites
+     * Components added with this method will be displayed with a lower z-index than the sprite
+     *
+     * @param component - The component to add behind sprites
+     * @returns The added component
+     *
+     * @example
+     * ```ts
+     * // Add a shadow component behind all sprites
+     * engine.addSpriteComponentBehind(ShadowComponent);
+     * ```
+     */
+    addSpriteComponentBehind(component: any): any;
+    /**
+     * Add a component to render in front of sprites
+     * Components added with this method will be displayed with a higher z-index than the sprite
+     *
+     * @param component - The component to add in front of sprites
+     * @returns The added component
+     *
+     * @example
+     * ```ts
+     * // Add a health bar component in front of all sprites
+     * engine.addSpriteComponentInFront(HealthBarComponent);
+     * ```
+     */
+    addSpriteComponentInFront(component: any): any;
+    /**
+     * Add a component animation to the engine
+     *
+     * Component animations are temporary visual effects that can be displayed
+     * on sprites or objects, such as hit indicators, spell effects, or status animations.
+     *
+     * @param componentAnimation - The component animation configuration
+     * @param componentAnimation.id - Unique identifier for the animation
+     * @param componentAnimation.component - The component function to render
+     * @returns The added component animation configuration
+     *
+     * @example
+     * ```ts
+     * // Add a hit animation component
+     * engine.addComponentAnimation({
+     *   id: 'hit',
+     *   component: HitComponent
+     * });
+     *
+     * // Add an explosion effect component
+     * engine.addComponentAnimation({
+     *   id: 'explosion',
+     *   component: ExplosionComponent
+     * });
+     * ```
+     */
+    addComponentAnimation(componentAnimation: {
         component: any;
         id: string;
     }): {
         component: any;
         id: string;
     };
-    getEffect(id: string): EffectManager;
+    /**
+     * Get a component animation by its ID
+     *
+     * Retrieves the EffectManager instance for a specific component animation,
+     * which can be used to display the animation on sprites or objects.
+     *
+     * @param id - The unique identifier of the component animation
+     * @returns The EffectManager instance for the animation
+     * @throws Error if the component animation is not found
+     *
+     * @example
+     * ```ts
+     * // Get the hit animation and display it
+     * const hitAnimation = engine.getComponentAnimation('hit');
+     * hitAnimation.displayEffect({ text: "Critical!" }, player);
+     * ```
+     */
+    getComponentAnimation(id: string): AnimationManager;
     processInput({ input }: {
         input: number;
     }): void;
     processAction({ action }: {
         action: number;
     }): void;
+    get PIXI(): typeof PIXI;
+    get socket(): AbstractWebsocket;
+    get playerId(): string | null;
 }

package/dist/components/animations/index.d.ts

@@ -0,0 +1,4 @@
+export declare const PrebuiltComponentAnimations: {
+    Hit: any;
+    Animation: any;
+};

package/dist/components/index.d.ts

@@ -1,2 +1,3 @@
 import { default as EventLayerComponent } from './scenes/event-layer.ce';
-export { EventLayerComponent };
+import { default as CharacterComponent } from './character.ce';
+export { EventLayerComponent, CharacterComponent };

package/dist/index.d.ts

@@ -8,6 +8,6 @@ export * from './services/loadMap';
 export * from './module';
 export * from './Gui/Gui';
 export * from './components/gui';
-export * from './components/effects';
+export * from './components/animations';
 export * from './presets';
 export * from './components';

package/dist/index.js

@@ -7,7 +7,8 @@ export { LoadMapService, LoadMapToken, provideLoadMap } from './index7.js';
 export { GlobalConfigToken, provideClientGlobalConfig, provideClientModules, provideGlobalConfig } from './index8.js';
 export { RpgGui } from './index9.js';
 export { PrebuiltGui } from './index10.js';
-export { PrebuiltEffects } from './index11.js';
+export { PrebuiltComponentAnimations } from './index11.js';
 export { Presets } from './index12.js';
 export { default as EventLayerComponent } from './index13.js';
+export { default as CharacterComponent } from './index14.js';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}

package/dist/index10.js

@@ -1,4 +1,4 @@
-import component from './index22.js';
+import component from './index23.js';
 
 const PrebuiltGui = {
   Dialogbox: component

package/dist/index11.js

@@ -1,10 +1,10 @@
-import component$1 from './index23.js';
-import component from './index24.js';
+import component$1 from './index24.js';
+import component from './index25.js';
 
-const PrebuiltEffects = {
+const PrebuiltComponentAnimations = {
   Hit: component$1,
   Animation: component
 };
 
-export { PrebuiltEffects };
+export { PrebuiltComponentAnimations };
 //# sourceMappingURL=index11.js.map

package/dist/index11.js.map

@@ -1 +1 @@
-{"version":3,"file":"index11.js","sources":["../src/components/effects/index.ts"],"sourcesContent":["import Hit from \"./hit.ce\";\nimport Animation from \"./animation.ce\";\n\nexport const PrebuiltEffects = {\n    Hit,\n    Animation\n}"],"names":["Hit","Animation"],"mappings":";;;AAGO,MAAM,eAAkB,GAAA;AAAA,OAC3BA,WAAA;AAAA,aACAC;AACJ;;;;"}
+{"version":3,"file":"index11.js","sources":["../src/components/animations/index.ts"],"sourcesContent":["import Hit from \"./hit.ce\";\nimport Animation from \"./animation.ce\";\n\nexport const PrebuiltComponentAnimations = {\n    Hit,\n    Animation\n}"],"names":["Hit","Animation"],"mappings":";;;AAGO,MAAM,2BAA8B,GAAA;AAAA,OACvCA,WAAA;AAAA,aACAC;AACJ;;;;"}

package/dist/index12.js

@@ -1,7 +1,11 @@
-import { RMSpritesheet } from './index25.js';
+import { AnimationSpritesheetPreset } from './index26.js';
+import { LPCSpritesheetPreset } from './index27.js';
+import { RMSpritesheet } from './index28.js';
 
 const Presets = {
-  RMSpritesheet
+  RMSpritesheet,
+  LPCSpritesheetPreset,
+  AnimationSpritesheetPreset
 };
 
 export { Presets };

package/dist/index12.js.map

@@ -1 +1 @@
-{"version":3,"file":"index12.js","sources":["../src/presets/index.ts"],"sourcesContent":["import { RMSpritesheet } from \"./rmspritesheet\";\n\nexport const Presets = {\n    RMSpritesheet\n}"],"names":[],"mappings":";;AAEO,MAAM,OAAU,GAAA;AAAA,EACnB;AACJ;;;;"}
+{"version":3,"file":"index12.js","sources":["../src/presets/index.ts"],"sourcesContent":["import { AnimationSpritesheetPreset } from \"./animation\";\nimport { LPCSpritesheetPreset } from \"./lpc\";\nimport { RMSpritesheet } from \"./rmspritesheet\";\n\nexport const Presets = {\n    RMSpritesheet,\n    LPCSpritesheetPreset,\n    AnimationSpritesheetPreset\n}"],"names":[],"mappings":";;;;AAIO,MAAM,OAAU,GAAA;AAAA,EACnB,aAAA;AAAA,EACA,oBAAA;AAAA,EACA;AACJ;;;;"}

package/dist/index13.js

@@ -1,7 +1,7 @@
 import { useProps, useDefineProps, h, Container, loop } from 'canvasengine';
 import { inject } from './index6.js';
 import { RpgClientEngine } from './index2.js';
-import component$1 from './index35.js';
+import component$1 from './index14.js';
 
 function component($$props) {
         useProps($$props);
@@ -9,7 +9,7 @@ function component($$props) {
         var engine = inject(RpgClientEngine);
 var players = engine.sceneMap.players;
 var events = engine.sceneMap.events;
-        let $this = h(Container, { sortableChildren: true }, [loop(events, (event, id) => h(component$1, { id: id, object: event, isMe: false })), loop(players, (player, id) => h(component$1, { id: id, object: player, isMe: true }))]);
+        let $this = h(Container, { sortableChildren: true }, [loop(events, (event, id) => h(component$1, { id: id, object: event })), loop(players, (player, id) => h(component$1, { id: id, object: player }))]);
         return $this
       }
 

package/dist/index13.js.map

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