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

package/src/RpgClient.ts

@@ -1,10 +1,9 @@
-import { ComponentFunction } from 'canvasengine'
 import { RpgClientEngine } from './RpgClientEngine'
-import { Loader, Container } from 'pixi.js'
+import { Loader } from 'pixi.js'
 
 type RpgClass<T = any> = new (...args: any[]) => T
-type RpgComponent = Container
-type SceneMap = Container
+type RpgComponent = any
+type SceneMap = any
 
 export interface RpgClientEngineHooks {
     /**
@@ -13,7 +12,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
@@ -66,36 +65,6 @@ export interface RpgClientEngineHooks {
 }
 
 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
      * 
@@ -209,13 +178,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:
@@ -254,7 +224,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) {
@@ -262,9 +232,10 @@ export interface RpgClient {
      *      }
      * }
      * 
-     * defineModule<RpgClient>({
+     * @RpgModule<RpgClient>({
      *      engine
      * })
+     * class RpgClientModule {}
      * ```
      * 
      * @prop {RpgClientEngineHooks} [engine]
@@ -274,32 +245,29 @@ export interface RpgClient {
 
     /** 
      * 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[],
@@ -307,49 +275,72 @@ export interface RpgClient {
     /** 
      * 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]
@@ -361,18 +352,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]
@@ -382,34 +374,8 @@ export interface RpgClient {
         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
     }[]
 }

package/src/RpgClientEngine.ts

@@ -7,11 +7,10 @@ import { Hooks, ModulesToken } from "@rpgjs/common";
 import { load } from "@signe/sync";
 import { RpgClientMap } from "./Game/Map"
 import { RpgGui } from "./Gui/Gui";
-import { AnimationManager } from "./Game/AnimationManager";
-import { lastValueFrom, Observable } from "rxjs";
+import { EffectManager } from "./Game/EffectManager";
+import { lastValueFrom } from "rxjs";
 import { GlobalConfigToken } from "./module";
-import * as PIXI from "pixi.js";
-import { PrebuiltComponentAnimations } from "./components/animations";
+import { ClientIo } from "@signe/room";
 
 export class RpgClientEngine<T = any> {
   private guiService: RpgGui;
@@ -23,21 +22,17 @@ export class RpgClientEngine<T = any> {
   public globalConfig: T;
   public sceneComponent: any;
   stopProcessingInput = false;
+
   width = signal("100%");
   height = signal("100%");
   spritesheets: Map<string, any> = new Map();
   sounds: Map<string, any> = new Map();
-  componentAnimations: any[] = [];
+  effects: any[] = [];
   particleSettings: {
     emitters: any[]
   } = {
     emitters: []
   }
-  renderer: PIXI.Renderer;
-  tick: Observable<number>;
-  playerIdSignal = signal<string | null>(null);
-  spriteComponentsBehind = signal<any[]>([]);
-  spriteComponentsInFront = signal<any[]>([]);
 
   constructor(public context: Context) {
     this.webSocket = inject(context, WebSocketToken);
@@ -45,37 +40,20 @@ export class RpgClientEngine<T = any> {
     this.loadMapService = inject(context, LoadMapToken);
     this.hooks = inject<Hooks>(context, ModulesToken);
     this.globalConfig = inject(context, GlobalConfigToken)
-
-    this.addComponentAnimation({
-      id: "animation",
-      component: PrebuiltComponentAnimations.Animation
-    })
   }
 
   async start() {
     this.selector = document.body.querySelector("#rpg") as HTMLElement;
 
-    const { app, canvasElement } = await bootstrapCanvas(this.selector, Canvas);
-    this.renderer = app.renderer as PIXI.Renderer;
-    this.tick = canvasElement?.propObservables?.context['tick'].observable
+    await bootstrapCanvas(this.selector, Canvas);
 
     await lastValueFrom(this.hooks.callHooks("client-engine-onStart", this));
 
-    // wondow is resize
-    window.addEventListener('resize', () => {
-      this.hooks.callHooks("client-engine-onWindowResize", this).subscribe();
-    })
-
-    this.tick.subscribe((tick) => {
-      this.hooks.callHooks("client-engine-onStep", this, tick).subscribe();
-    })
-
     this.hooks.callHooks("client-spritesheets-load", this).subscribe();
     this.hooks.callHooks("client-sounds-load", this).subscribe();
     this.hooks.callHooks("client-gui-load", this).subscribe();
     this.hooks.callHooks("client-particles-load", this).subscribe();
-    this.hooks.callHooks("client-componentAnimations-load", this).subscribe();
-    this.hooks.callHooks("client-sprite-load", this).subscribe();
+    this.hooks.callHooks("client-effects-load", this).subscribe();
 
   
     await this.webSocket.connection(() => {
@@ -86,8 +64,6 @@ export class RpgClientEngine<T = any> {
 
   private initListeners() {
     this.webSocket.on("sync", (data) => {
-      if (data.pId) this.playerIdSignal.set(data.pId)
-      this.hooks.callHooks("client-sceneMap-onChanges", this.sceneMap, { partial: data }).subscribe();
       load(this.sceneMap, data, true);
     });
 
@@ -95,32 +71,14 @@ export class RpgClientEngine<T = any> {
       this.loadScene(data.mapId);
     });
 
-    this.webSocket.on("showComponentAnimation", (data) => {
-      const { params, object, position, id } = data;
-      if (!object && position === undefined) {
-        throw new Error("Please provide an object or x and y coordinates");
+    this.webSocket.on("showEffect", (data) => {
+      const { params, object, id } = data;
+      if (!object) {
+        throw new Error("Object not found");
       }
-      const player = object ? this.sceneMap.getObjectById(object) : undefined;
-      this.getComponentAnimation(id).displayEffect(params, player || position)
-    });
-
-    this.webSocket.on("setAnimation", (data) => {
-      const { animationName, nbTimes, object } = data;
       const player = this.sceneMap.getObjectById(object);
-      player.setAnimation(animationName, nbTimes)
-    })
-
-    this.webSocket.on('open', () => {
-      this.hooks.callHooks("client-engine-onConnected", this, this.socket).subscribe();
-    })
-
-    this.webSocket.on('close', () => {
-      this.hooks.callHooks("client-engine-onDisconnected", this, this.socket).subscribe();
-    })
-
-    this.webSocket.on('error', (error) => {
-      this.hooks.callHooks("client-engine-onConnectError", this, error, this.socket).subscribe();
-    })
+      this.getEffect(id).displayEffect(params, player)
+    });
   }
   
   private async loadScene(mapId: string) {
@@ -150,127 +108,34 @@ export class RpgClientEngine<T = any> {
     return particle;
   }
 
-  /**
-   * 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) {
-    this.spriteComponentsBehind.update((components: any[]) => [...components, component])
-    return component
-  }
-
-  /**
-   * 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) {
-    this.spriteComponentsInFront.update((components: any[]) => [...components, component])
-    return component
-  }
-
-  /**
-   * 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
   }) {
-    const instance = new AnimationManager()
-    this.componentAnimations.push({
-      id: componentAnimation.id,
-      component: componentAnimation.component,
+    const instance = new EffectManager()
+    this.effects.push({
+      id: effect.id,
+      component: effect.component,
       instance: instance,
       current: instance.current
     })
-    return componentAnimation;
+    return effect;
   }
 
-  /**
-   * 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 {
-    const componentAnimation = this.componentAnimations.find((componentAnimation) => componentAnimation.id === id)
-    if (!componentAnimation) {
-      throw new Error(`Component animation with id ${id} not found`)
+  getEffect(id: string): EffectManager {
+    const effect = this.effects.find((effect) => effect.id === id)
+    if (!effect) {
+      throw new Error(`Effect with id ${id} not found`)
     }
-    return componentAnimation.instance
+    return effect.instance
   }
 
   processInput({ input }: { input: number }) {
-    this.hooks.callHooks("client-engine-onInput", this, { input, playerId: this.playerId }).subscribe();
     this.webSocket.emit('move', { input })
   }
 
   processAction({ action }: { action: number }) {
     if (this.stopProcessingInput) return;
-    this.hooks.callHooks("client-engine-onInput", this, { input: 'action', playerId: this.playerId }).subscribe();
     this.webSocket.emit('action', { action })
   }
-
-  get PIXI() {
-    return PIXI
-  }
-
-  get socket() {
-    return this.webSocket
-  }
-  
-  get playerId() {
-    return this.playerIdSignal()
-  }
 }

package/src/components/character.ce

@@ -1,57 +1,52 @@
 <Container x y zIndex={y} viewportFollow={isMe} controls>
-  @for (component of componentsBehind) {
-    <Container>
-      <component object />
-    </Container>
-  } 
   <Particle emit={@emitParticleTrigger} settings={@particleSettings} zIndex={1000} name={particleName} />
-  <Container>
-    @for (graphicId of graphics) {
-      <Sprite sheet={@sheet(@graphicId)} direction tint hitbox />
-    }
-  </Container>
-  @for (component of componentsInFront) {
-    <Container>
-      <component object />
-    </Container>
-  } 
+  @for (graphicId of graphics) {
+    <Sprite sheet={@sheet(@graphicId)} direction tint />
+  }
+  <!-- <Ellipse 
+    x={shadow.@x} 
+    y={shadow.@y} 
+    width={shadow.@width} 
+    height={shadow.@height} 
+    color="black" 
+    blur={10} 
+    alpha={0.5}
+  /> -->
 </Container>
 
 <script>
-  import { signal, effect, mount, computed, tick } from "canvasengine";
+  import { signal, effect, mount, computed } from "canvasengine";
   import { Particle } from "@canvasengine/presets";
-  import { GameEngineToken, ModulesToken } from "@rpgjs/common";
+  import { GameEngineToken } from "@rpgjs/common";
   import { RpgClientEngine } from "../RpgClientEngine";
   import { inject } from "../core/inject";  
   import { Direction } from "@rpgjs/common";
   import Hit from "./effects/hit.ce";
 
-  const { object, id } = defineProps();
-  
+  const { object, id, isMe } = defineProps();
+
   const client = inject(RpgClientEngine);
-  const hooks = inject(ModulesToken);
 
   const spritesheets = client.spritesheets;
-  const playerId = client.playerId;
-  const componentsBehind = client.spriteComponentsBehind;
-  const componentsInFront = client.spriteComponentsInFront;
-  const isMe = computed(() => id() === playerId);
-
-  const { 
-    x, 
-    y, 
-    tint, 
-    direction, 
-    animationName, 
-    animationCurrentIndex,
-    emitParticleTrigger, 
-    particleName, 
-    graphics, 
-    hitbox 
-  } = object;
 
+  const x = object.x;
+  const y = object.y;
+  const tint = object.tint;
+  const direction = object.direction;
+  const animationName = object.animationName;
+  const emitParticleTrigger = object.emitParticleTrigger;
   const particleSettings = client.particleSettings;
+  const particleName = object.particleName;
+  const graphics = object.graphics;
 
+  const hitbox = object.hitbox;
+  const widthShadow = 10;
+  const shadow = computed(() => ({
+    x: hitbox().w / 2,
+    y: hitbox().h - (hitbox().h / 2),
+    width: hitbox().w + widthShadow,
+    height: hitbox().h,
+  }))
   const canControls = () => isMe() && object.canMove()
   const keyboardControls = client.globalConfig.keyboardControls;
 
@@ -89,7 +84,7 @@
       keyDown() {
         if (canControls()) {
           client.processAction({ action: 'action' })
-           // particleName.set('hit') 
+          // particleName.set('hit') 
           // emitParticleTrigger.start()
           // object.flash('red')
         }
@@ -104,42 +99,6 @@
       params: {
         direction
       },
-      onFinish() {
-        animationCurrentIndex.update(index => index + 1)
-      }
     };
   }
-
-  // Track animation changes to reset animation state when needed
-  let previousAnimationName = animationName();
-  effect(() => {
-    const currentAnimationName = animationName();
-    
-    // If animation changed externally (not through setAnimation), reset the state
-    if (currentAnimationName !== previousAnimationName && object.animationIsPlaying && object.animationIsPlaying()) {
-      // Check if this is a movement animation (walk, stand) that should interrupt custom animations
-      const movementAnimations = ['walk', 'stand'];
-      if (movementAnimations.includes(currentAnimationName)) {
-        if (typeof object.resetAnimationState === 'function') {
-          object.resetAnimationState();
-        }
-      }
-    }
-    
-    previousAnimationName = currentAnimationName;
-  });
-
-  mount((element) => {
-    hooks.callHooks("client-sprite-onInit", element.componentInstance)
-    hooks.callHooks("client-sceneMap-onAddSprite", client.sceneMap, element.componentInstance)
-
-    return () => {
-      hooks.callHooks("client-sprite-onDestroy", element.componentInstance)
-      hooks.callHooks("client-sceneMap-onRemoveSprite", client.sceneMap, element.componentInstance)
-    }
-  })
-
-  tick(() => {
-    hooks.callHooks("client-sprite-onUpdate")
-  })
 </script>