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

package/src/RpgClientEngine.ts

@@ -7,10 +7,11 @@ import { Hooks, ModulesToken } from "@rpgjs/common";
 import { load } from "@signe/sync";
 import { RpgClientMap } from "./Game/Map"
 import { RpgGui } from "./Gui/Gui";
-import { EffectManager } from "./Game/EffectManager";
-import { lastValueFrom } from "rxjs";
+import { AnimationManager } from "./Game/AnimationManager";
+import { lastValueFrom, Observable } from "rxjs";
 import { GlobalConfigToken } from "./module";
-import { ClientIo } from "@signe/room";
+import * as PIXI from "pixi.js";
+import { PrebuiltComponentAnimations } from "./components/animations";
 
 export class RpgClientEngine<T = any> {
   private guiService: RpgGui;
@@ -22,17 +23,21 @@ 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();
-  effects: any[] = [];
+  componentAnimations: 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);
@@ -40,20 +45,37 @@ 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;
 
-    await bootstrapCanvas(this.selector, Canvas);
+    const { app, canvasElement } = await bootstrapCanvas(this.selector, Canvas);
+    this.renderer = app.renderer as PIXI.Renderer;
+    this.tick = canvasElement?.propObservables?.context['tick'].observable
 
     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-effects-load", this).subscribe();
+    this.hooks.callHooks("client-componentAnimations-load", this).subscribe();
+    this.hooks.callHooks("client-sprite-load", this).subscribe();
 
   
     await this.webSocket.connection(() => {
@@ -64,6 +86,8 @@ 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);
     });
 
@@ -71,14 +95,32 @@ export class RpgClientEngine<T = any> {
       this.loadScene(data.mapId);
     });
 
-    this.webSocket.on("showEffect", (data) => {
-      const { params, object, id } = data;
-      if (!object) {
-        throw new Error("Object not found");
+    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");
       }
-      const player = this.sceneMap.getObjectById(object);
-      this.getEffect(id).displayEffect(params, player)
+      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();
+    })
   }
   
   private async loadScene(mapId: string) {
@@ -108,34 +150,127 @@ export class RpgClientEngine<T = any> {
     return particle;
   }
 
-  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) {
+    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: {
     component: any,
     id: string
   }) {
-    const instance = new EffectManager()
-    this.effects.push({
-      id: effect.id,
-      component: effect.component,
+    const instance = new AnimationManager()
+    this.componentAnimations.push({
+      id: componentAnimation.id,
+      component: componentAnimation.component,
       instance: instance,
       current: instance.current
     })
-    return effect;
+    return componentAnimation;
   }
 
-  getEffect(id: string): EffectManager {
-    const effect = this.effects.find((effect) => effect.id === id)
-    if (!effect) {
-      throw new Error(`Effect with id ${id} not found`)
+  /**
+   * 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`)
     }
-    return effect.instance
+    return componentAnimation.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/{effects → animations}/animation.ce

@@ -1,19 +1,17 @@
 <Sprite sheet x y anchor={0.5} />
 
 <script>
-  import { signal } from "canvasengine";
   import { RpgClientEngine } from "../../RpgClientEngine";
   import { inject } from "../../core/inject";
 
-  const { x, y, name, onFinish } = defineProps();
+  const { x, y, animationName, graphic, onFinish } = defineProps();
 
   const client = inject(RpgClientEngine);
   const spritesheets = client.spritesheets;
 
   const sheet = {
-    definition: spritesheets.get(name()),
-    playing: 'default',
+    definition: spritesheets.get(graphic()),
+    playing: animationName() ?? 'default',
     onFinish
   };
-
 </script>

package/src/components/{effects → animations}/index.ts

@@ -1,7 +1,7 @@
 import Hit from "./hit.ce";
 import Animation from "./animation.ce";
 
-export const PrebuiltEffects = {
+export const PrebuiltComponentAnimations = {
     Hit,
     Animation
 }

package/src/components/character.ce

@@ -1,52 +1,57 @@
 <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} />
-  @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>
+    @for (graphicId of graphics) {
+      <Sprite sheet={@sheet(@graphicId)} direction tint hitbox />
+    }
+  </Container>
+  @for (component of componentsInFront) {
+    <Container>
+      <component object />
+    </Container>
+  } 
 </Container>
 
 <script>
-  import { signal, effect, mount, computed } from "canvasengine";
+  import { signal, effect, mount, computed, tick } from "canvasengine";
   import { Particle } from "@canvasengine/presets";
-  import { GameEngineToken } from "@rpgjs/common";
+  import { GameEngineToken, ModulesToken } 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, isMe } = defineProps();
-
+  const { object, id } = 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;
 
@@ -84,7 +89,7 @@
       keyDown() {
         if (canControls()) {
           client.processAction({ action: 'action' })
-          // particleName.set('hit') 
+           // particleName.set('hit') 
           // emitParticleTrigger.start()
           // object.flash('red')
         }
@@ -99,6 +104,42 @@
       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>

package/src/components/index.ts

@@ -1,3 +1,4 @@
 import EventLayerComponent from "./scenes/event-layer.ce";
+import CharacterComponent from "./character.ce";
 
-export { EventLayerComponent }
+export { EventLayerComponent, CharacterComponent } 

package/src/components/scenes/draw-map.ce

@@ -1,28 +1,12 @@
 <Container sound={backgroundMusic} >
   <Container sound={backgroundAmbientSound} />
 
-  <!-- <Sprite image={map.@fullImage} scale /> -->
-
-  <sceneComponent() data={map.@data} />
+  <sceneComponent() data={map.@data} params={map.@params} />
   
-  <!-- <Container sortableChildren={true}>
-    @for (obj of middleLayer) {
-      <ElementMap ...obj image={map.@gridImage} scale /> 
-    }
-
-    @for ((event,id) of events) {
-      <Character id={id} object={event} isMe={false}  />
-    }
-  
-    @for ((player,id) of players) {
-      <Character id={id} object={player} isMe={true} />
-    }
-  </Container> -->
-
-  @for (effect of effects) {
+  @for (componentAnimation of componentAnimations) {
     <Container>
-      @for (animation of effect.current) {
-        <effect.component ...animation />
+      @for (animation of componentAnimation.current) {
+        <componentAnimation.component ...animation />
       }
     </Container>
   }
@@ -34,17 +18,16 @@
     import { RpgClientEngine } from "../../RpgClientEngine";
 
     const engine = inject(RpgClientEngine);
-    const effects = engine.effects
+    const componentAnimations = engine.componentAnimations
     const map = engine.sceneMap.data
     const sceneComponent = computed(() => map()?.component)
+    const sceneParams = map()?.params
     const mapParams = map().params
     const animations = engine.sceneMap.animations
     const backgroundMusic = { src: mapParams?.backgroundMusic, autoplay: true, loop: true }
     const backgroundAmbientSound = { src: mapParams?.backgroundAmbientSound, autoplay: true, loop: true }
     
     const data = signal(map().data)
-    // const middleLayer = computed(() => data().filter(obj => obj.layer === 1))
-    // const topLayer = computed(() => data().filter(obj => obj.layer === 2))
 
     const scale = mapParams?.scale || 1
     const worldWidth = (mapParams?.width || 2048) * scale

package/src/components/scenes/event-layer.ce

@@ -1,15 +1,15 @@
 <Container sortableChildren={true}>
     @for ((event,id) of events) {
-        <Character id={id} object={event} isMe={false}  />
+        <Character id={id} object={event}  />
     }
 
     @for ((player,id) of players) {
-        <Character id={id} object={player} isMe={true} />
+        <Character id={id} object={player} />
     }
 </Container>
 
 <script>
-    import { effect, signal, computed, mount } from 'canvasengine'
+    import { effect, signal } from 'canvasengine'
     import { inject } from "../../core/inject";
     import { RpgClientEngine } from "../../RpgClientEngine";
     import Character from "../character.ce";

package/src/core/setup.ts

@@ -6,8 +6,10 @@ interface SetupOptions {
   providers: Providers;
 }
 
+
 export async function startGame(options: SetupOptions) {
   const context = new Context();
+  context['side'] = 'client'
   setInject(context);
 
   await injector(context, options.providers);

package/src/index.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/src/module.ts

@@ -43,12 +43,12 @@ export function provideClientModules(modules: RpgClient[]) {
           },
         };
       }
-      if (module.effects) {
-        const effects = [...module.effects];
-        module.effects = {
+      if (module.componentAnimations) {
+        const componentAnimations = [...module.componentAnimations];
+        module.componentAnimations = {
           load: (engine: RpgClientEngine) => {
-            effects.forEach((effect) => {
-              engine.addEffect(effect);
+            componentAnimations.forEach((componentAnimation) => {
+              engine.addComponentAnimation(componentAnimation);
             });
           },
         };
@@ -63,6 +63,24 @@ export function provideClientModules(modules: RpgClient[]) {
           },
         };
       }
+      if (module.sprite) {
+        const sprite = {...module.sprite};
+        module.sprite = {
+          ...sprite,
+          load: (engine: RpgClientEngine) => {
+            if (sprite.componentsBehind) {
+              sprite.componentsBehind.forEach((component) => {
+                engine.addSpriteComponentBehind(component);
+              });
+            }
+            if (sprite.componentsInFront) {
+              sprite.componentsInFront.forEach((component) => {
+                engine.addSpriteComponentInFront(component);
+              });
+            }
+          },
+        };
+      }
       return module;
     });
     return modules

package/src/presets/animation.ts

@@ -0,0 +1,46 @@
+/**
+ * Creates an animation spritesheet preset with automatic frame generation
+ * 
+ * This function generates animation frames based on the provided width and height dimensions.
+ * It creates a sequence of frames that progresses through the spritesheet from left to right,
+ * top to bottom, with each frame having a 10ms time increment.
+ * 
+ * @param {number} framesWidth - The number of frames horizontally in the spritesheet
+ * @param {number} framesHeight - The number of frames vertically in the spritesheet
+ * @returns {Object} Animation preset configuration object
+ * 
+ * @example
+ * ```javascript
+ * // For a 4x4 spritesheet
+ * const preset = AnimationSpritesheetPreset(4, 4);
+ * // This will generate 16 frames with coordinates from (0,0) to (3,3)
+ * ```
+ */
+export const AnimationSpritesheetPreset = (framesWidth: number, framesHeight: number) => {
+    
+    const animations: Array<{ time: number; frameX: number; frameY: number }> = [];
+
+    for (let y = 0; y < framesHeight; y++) {
+        for (let x = 0; x < framesWidth; x++) {
+            const frameIndex = y * framesWidth + x;
+            animations.push({ 
+                time: frameIndex * 10, 
+                frameX: x, 
+                frameY: y 
+            });
+        }
+    }
+    
+    return {
+        framesWidth,
+        framesHeight,
+        textures: {
+            default: {
+                animations: () => [
+                    animations
+                ],
+            }
+        }
+    };
+};
+  

package/src/presets/index.ts

@@ -1,5 +1,9 @@
+import { AnimationSpritesheetPreset } from "./animation";
+import { LPCSpritesheetPreset } from "./lpc";
 import { RMSpritesheet } from "./rmspritesheet";
 
 export const Presets = {
-    RMSpritesheet
+    RMSpritesheet,
+    LPCSpritesheetPreset,
+    AnimationSpritesheetPreset
 }