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

package/CHANGELOG.md

@@ -0,0 +1,9 @@
+# @rpgjs/client
+
+## 5.0.0-alpha.3
+
+### Patch Changes
+
+- alpha
+- Updated dependencies
+  - @rpgjs/common@5.0.0-alpha.3

package/dist/Game/EffectManager.d.ts

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

package/dist/RpgClient.d.ts

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

package/dist/RpgClientEngine.d.ts

@@ -1,8 +1,5 @@
 import { Context } from '@signe/di';
-import { AbstractWebsocket } from './services/AbstractSocket';
-import { AnimationManager } from './Game/AnimationManager';
-import { Observable } from 'rxjs';
-import * as PIXI from "pixi.js";
+import { EffectManager } from './Game/EffectManager';
 export declare class RpgClientEngine<T = any> {
     context: Context;
     private guiService;
@@ -18,15 +15,10 @@ export declare class RpgClientEngine<T = any> {
     height: import('canvasengine').WritableSignal<string>;
     spritesheets: Map<string, any>;
     sounds: Map<string, any>;
-    componentAnimations: any[];
+    effects: 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;
@@ -34,92 +26,18 @@ export declare class RpgClientEngine<T = any> {
     addSpriteSheet<T = any>(spritesheetClass: any, id?: string): any;
     addSound(sound: any, id?: string): any;
     addParticle(particle: any): any;
-    /**
-     * Add a component to render behind sprites
-     * Components added with this method will be displayed with a lower z-index than the sprite
-     *
-     * @param component - The component to add behind sprites
-     * @returns The added component
-     *
-     * @example
-     * ```ts
-     * // Add a shadow component behind all sprites
-     * engine.addSpriteComponentBehind(ShadowComponent);
-     * ```
-     */
-    addSpriteComponentBehind(component: any): any;
-    /**
-     * Add a component to render in front of sprites
-     * Components added with this method will be displayed with a higher z-index than the sprite
-     *
-     * @param component - The component to add in front of sprites
-     * @returns The added component
-     *
-     * @example
-     * ```ts
-     * // Add a health bar component in front of all sprites
-     * engine.addSpriteComponentInFront(HealthBarComponent);
-     * ```
-     */
-    addSpriteComponentInFront(component: any): any;
-    /**
-     * 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: {
+    addEffect(effect: {
         component: any;
         id: string;
     }): {
         component: any;
         id: string;
     };
-    /**
-     * 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;
+    getEffect(id: string): EffectManager;
     processInput({ input }: {
         input: number;
     }): void;
     processAction({ action }: {
         action: number;
     }): void;
-    get PIXI(): typeof PIXI;
-    get socket(): AbstractWebsocket;
-    get playerId(): string | null;
 }

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

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

package/dist/components/index.d.ts

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

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/animations';
+export * from './components/effects';
 export * from './presets';
 export * from './components';

package/dist/index.js

@@ -7,8 +7,7 @@ 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 { PrebuiltComponentAnimations } from './index11.js';
+export { PrebuiltEffects } 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 './index23.js';
+import component from './index22.js';
 
 const PrebuiltGui = {
   Dialogbox: component

package/dist/index11.js

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

package/dist/index11.js.map

@@ -1 +1 @@
-{"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;;;;"}
+{"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;;;;"}

package/dist/index12.js

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

package/dist/index12.js.map

@@ -1 +1 @@
-{"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;;;;"}
+{"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;;;;"}

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 './index14.js';
+import component$1 from './index35.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 })), loop(players, (player, id) => h(component$1, { id: id, object: player }))]);
+        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 }))]);
         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}  />\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;;;;"}
+{"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;;;;"}