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

package/dist/index2.js

@@ -1,15 +1,17 @@
-import component from './index14.js';
-import { inject } from './index15.js';
+import component from './index15.js';
+import { inject } from './index16.js';
 import { signal, bootstrapCanvas } from 'canvasengine';
-import { WebSocketToken } from './index16.js';
+import { WebSocketToken } from './index17.js';
 import { LoadMapToken } from './index7.js';
 import { ModulesToken } from '@rpgjs/common';
-import { load } from './index17.js';
-import { RpgClientMap } from './index18.js';
+import { load } from './index18.js';
+import { RpgClientMap } from './index19.js';
 import { RpgGui } from './index9.js';
-import { EffectManager } from './index19.js';
+import { AnimationManager } from './index20.js';
 import { lastValueFrom } from 'rxjs';
 import { GlobalConfigToken } from './index8.js';
+import * as PIXI from 'pixi.js';
+import { PrebuiltComponentAnimations } from './index11.js';
 
 class RpgClientEngine {
   constructor(context) {
@@ -20,25 +22,41 @@ class RpgClientEngine {
     this.height = signal("100%");
     this.spritesheets = /* @__PURE__ */ new Map();
     this.sounds = /* @__PURE__ */ new Map();
-    this.effects = [];
+    this.componentAnimations = [];
     this.particleSettings = {
       emitters: []
     };
+    this.playerIdSignal = signal(null);
+    this.spriteComponentsBehind = signal([]);
+    this.spriteComponentsInFront = signal([]);
     this.webSocket = inject(context, WebSocketToken);
     this.guiService = inject(context, RpgGui);
     this.loadMapService = inject(context, LoadMapToken);
     this.hooks = inject(context, ModulesToken);
     this.globalConfig = inject(context, GlobalConfigToken);
+    this.addComponentAnimation({
+      id: "animation",
+      component: PrebuiltComponentAnimations.Animation
+    });
   }
   async start() {
     this.selector = document.body.querySelector("#rpg");
-    await bootstrapCanvas(this.selector, component);
+    const { app, canvasElement } = await bootstrapCanvas(this.selector, component);
+    this.renderer = app.renderer;
+    this.tick = canvasElement?.propObservables?.context["tick"].observable;
     await lastValueFrom(this.hooks.callHooks("client-engine-onStart", this));
+    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(() => {
       this.initListeners();
       this.guiService._initialize();
@@ -46,18 +64,34 @@ class RpgClientEngine {
   }
   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);
     });
     this.webSocket.on("changeMap", (data) => {
       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 === void 0) {
+        throw new Error("Please provide an object or x and y coordinates");
       }
+      const player = object ? this.sceneMap.getObjectById(object) : void 0;
+      this.getComponentAnimation(id).displayEffect(params, player || position);
+    });
+    this.webSocket.on("setAnimation", (data) => {
+      const { animationName, nbTimes, object } = data;
       const player = this.sceneMap.getObjectById(object);
-      this.getEffect(id).displayEffect(params, player);
+      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();
     });
   }
   async loadScene(mapId) {
@@ -82,30 +116,118 @@ class RpgClientEngine {
     this.particleSettings.emitters.push(particle);
     return particle;
   }
-  addEffect(effect) {
-    const instance = new EffectManager();
-    this.effects.push({
-      id: effect.id,
-      component: effect.component,
+  /**
+   * 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) {
+    this.spriteComponentsBehind.update((components) => [...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) {
+    this.spriteComponentsInFront.update((components) => [...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) {
+    const instance = new AnimationManager();
+    this.componentAnimations.push({
+      id: componentAnimation.id,
+      component: componentAnimation.component,
       instance,
       current: instance.current
     });
-    return effect;
+    return componentAnimation;
   }
-  getEffect(id) {
-    const effect = this.effects.find((effect2) => effect2.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) {
+    const componentAnimation = this.componentAnimations.find((componentAnimation2) => componentAnimation2.id === id);
+    if (!componentAnimation) {
+      throw new Error(`Component animation with id ${id} not found`);
     }
-    return effect.instance;
+    return componentAnimation.instance;
   }
   processInput({ input }) {
+    this.hooks.callHooks("client-engine-onInput", this, { input, playerId: this.playerId }).subscribe();
     this.webSocket.emit("move", { input });
   }
   processAction({ action }) {
     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();
+  }
 }
 
 export { RpgClientEngine };

package/dist/index2.js.map

@@ -1 +1 @@
-{"version":3,"file":"index2.js","sources":["../src/RpgClientEngine.ts"],"sourcesContent":["import Canvas from \"./components/scenes/canvas.ce\";\nimport { Context, inject } from \"@signe/di\";\nimport { signal, bootstrapCanvas } from \"canvasengine\";\nimport { AbstractWebsocket, WebSocketToken } from \"./services/AbstractSocket\";\nimport { LoadMapService, LoadMapToken } from \"./services/loadMap\";\nimport { Hooks, ModulesToken } from \"@rpgjs/common\";\nimport { load } from \"@signe/sync\";\nimport { RpgClientMap } from \"./Game/Map\"\nimport { RpgGui } from \"./Gui/Gui\";\nimport { EffectManager } from \"./Game/EffectManager\";\nimport { lastValueFrom } from \"rxjs\";\nimport { GlobalConfigToken } from \"./module\";\nimport { ClientIo } from \"@signe/room\";\n\nexport class RpgClientEngine<T = any> {\n  private guiService: RpgGui;\n  private webSocket: AbstractWebsocket;\n  private loadMapService: LoadMapService;\n  private hooks: Hooks;\n  private sceneMap: RpgClientMap = new RpgClientMap();\n  private selector: HTMLElement;\n  public globalConfig: T;\n  public sceneComponent: any;\n  stopProcessingInput = false;\n\n  width = signal(\"100%\");\n  height = signal(\"100%\");\n  spritesheets: Map<string, any> = new Map();\n  sounds: Map<string, any> = new Map();\n  effects: any[] = [];\n  particleSettings: {\n    emitters: any[]\n  } = {\n    emitters: []\n  }\n\n  constructor(public context: Context) {\n    this.webSocket = inject(context, WebSocketToken);\n    this.guiService = inject(context, RpgGui);\n    this.loadMapService = inject(context, LoadMapToken);\n    this.hooks = inject<Hooks>(context, ModulesToken);\n    this.globalConfig = inject(context, GlobalConfigToken)\n  }\n\n  async start() {\n    this.selector = document.body.querySelector(\"#rpg\") as HTMLElement;\n\n    await bootstrapCanvas(this.selector, Canvas);\n\n    await lastValueFrom(this.hooks.callHooks(\"client-engine-onStart\", this));\n\n    this.hooks.callHooks(\"client-spritesheets-load\", this).subscribe();\n    this.hooks.callHooks(\"client-sounds-load\", this).subscribe();\n    this.hooks.callHooks(\"client-gui-load\", this).subscribe();\n    this.hooks.callHooks(\"client-particles-load\", this).subscribe();\n    this.hooks.callHooks(\"client-effects-load\", this).subscribe();\n\n  \n    await this.webSocket.connection(() => {\n      this.initListeners()\n      this.guiService._initialize()\n    });\n  }\n\n  private initListeners() {\n    this.webSocket.on(\"sync\", (data) => {\n      load(this.sceneMap, data, true);\n    });\n\n    this.webSocket.on(\"changeMap\", (data) => {\n      this.loadScene(data.mapId);\n    });\n\n    this.webSocket.on(\"showEffect\", (data) => {\n      const { params, object, id } = data;\n      if (!object) {\n        throw new Error(\"Object not found\");\n      }\n      const player = this.sceneMap.getObjectById(object);\n      this.getEffect(id).displayEffect(params, player)\n    });\n  }\n  \n  private async loadScene(mapId: string) {\n    this.webSocket.updateProperties({ room: mapId })\n    await this.webSocket.reconnect(() => {\n      this.initListeners()\n      this.guiService._initialize()\n    })\n    const res = await this.loadMapService.load(mapId)\n    this.sceneMap.data.set(res)\n    this.hooks.callHooks(\"client-sceneMap-onAfterLoading\", this.sceneMap).subscribe();\n    //this.sceneMap.loadPhysic()\n  }\n\n  addSpriteSheet<T = any>(spritesheetClass: any, id?: string): any {\n    this.spritesheets.set(id || spritesheetClass.id, spritesheetClass);\n    return spritesheetClass as any;\n  }\n\n  addSound(sound: any, id?: string) {\n    this.sounds.set(id || sound.id, sound);\n    return sound;\n  }\n\n  addParticle(particle: any) {\n    this.particleSettings.emitters.push(particle)\n    return particle;\n  }\n\n  addEffect(effect: {\n    component: any,\n    id: string\n  }) {\n    const instance = new EffectManager()\n    this.effects.push({\n      id: effect.id,\n      component: effect.component,\n      instance: instance,\n      current: instance.current\n    })\n    return effect;\n  }\n\n  getEffect(id: string): EffectManager {\n    const effect = this.effects.find((effect) => effect.id === id)\n    if (!effect) {\n      throw new Error(`Effect with id ${id} not found`)\n    }\n    return effect.instance\n  }\n\n  processInput({ input }: { input: number }) {\n    this.webSocket.emit('move', { input })\n  }\n\n  processAction({ action }: { action: number }) {\n    if (this.stopProcessingInput) return;\n    this.webSocket.emit('action', { action })\n  }\n}\n"],"names":["Canvas","effect"],"mappings":"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"}
+{"version":3,"file":"index2.js","sources":["../src/RpgClientEngine.ts"],"sourcesContent":["import Canvas from \"./components/scenes/canvas.ce\";\nimport { Context, inject } from \"@signe/di\";\nimport { signal, bootstrapCanvas } from \"canvasengine\";\nimport { AbstractWebsocket, WebSocketToken } from \"./services/AbstractSocket\";\nimport { LoadMapService, LoadMapToken } from \"./services/loadMap\";\nimport { Hooks, ModulesToken } from \"@rpgjs/common\";\nimport { load } from \"@signe/sync\";\nimport { RpgClientMap } from \"./Game/Map\"\nimport { RpgGui } from \"./Gui/Gui\";\nimport { AnimationManager } from \"./Game/AnimationManager\";\nimport { lastValueFrom, Observable } from \"rxjs\";\nimport { GlobalConfigToken } from \"./module\";\nimport * as PIXI from \"pixi.js\";\nimport { PrebuiltComponentAnimations } from \"./components/animations\";\n\nexport class RpgClientEngine<T = any> {\n  private guiService: RpgGui;\n  private webSocket: AbstractWebsocket;\n  private loadMapService: LoadMapService;\n  private hooks: Hooks;\n  private sceneMap: RpgClientMap = new RpgClientMap();\n  private selector: HTMLElement;\n  public globalConfig: T;\n  public sceneComponent: any;\n  stopProcessingInput = false;\n  width = signal(\"100%\");\n  height = signal(\"100%\");\n  spritesheets: Map<string, any> = new Map();\n  sounds: Map<string, any> = new Map();\n  componentAnimations: any[] = [];\n  particleSettings: {\n    emitters: any[]\n  } = {\n    emitters: []\n  }\n  renderer: PIXI.Renderer;\n  tick: Observable<number>;\n  playerIdSignal = signal<string | null>(null);\n  spriteComponentsBehind = signal<any[]>([]);\n  spriteComponentsInFront = signal<any[]>([]);\n\n  constructor(public context: Context) {\n    this.webSocket = inject(context, WebSocketToken);\n    this.guiService = inject(context, RpgGui);\n    this.loadMapService = inject(context, LoadMapToken);\n    this.hooks = inject<Hooks>(context, ModulesToken);\n    this.globalConfig = inject(context, GlobalConfigToken)\n\n    this.addComponentAnimation({\n      id: \"animation\",\n      component: PrebuiltComponentAnimations.Animation\n    })\n  }\n\n  async start() {\n    this.selector = document.body.querySelector(\"#rpg\") as HTMLElement;\n\n    const { app, canvasElement } = await bootstrapCanvas(this.selector, Canvas);\n    this.renderer = app.renderer as PIXI.Renderer;\n    this.tick = canvasElement?.propObservables?.context['tick'].observable\n\n    await lastValueFrom(this.hooks.callHooks(\"client-engine-onStart\", this));\n\n    // wondow is resize\n    window.addEventListener('resize', () => {\n      this.hooks.callHooks(\"client-engine-onWindowResize\", this).subscribe();\n    })\n\n    this.tick.subscribe((tick) => {\n      this.hooks.callHooks(\"client-engine-onStep\", this, tick).subscribe();\n    })\n\n    this.hooks.callHooks(\"client-spritesheets-load\", this).subscribe();\n    this.hooks.callHooks(\"client-sounds-load\", this).subscribe();\n    this.hooks.callHooks(\"client-gui-load\", this).subscribe();\n    this.hooks.callHooks(\"client-particles-load\", this).subscribe();\n    this.hooks.callHooks(\"client-componentAnimations-load\", this).subscribe();\n    this.hooks.callHooks(\"client-sprite-load\", this).subscribe();\n\n  \n    await this.webSocket.connection(() => {\n      this.initListeners()\n      this.guiService._initialize()\n    });\n  }\n\n  private initListeners() {\n    this.webSocket.on(\"sync\", (data) => {\n      if (data.pId) this.playerIdSignal.set(data.pId)\n      this.hooks.callHooks(\"client-sceneMap-onChanges\", this.sceneMap, { partial: data }).subscribe();\n      load(this.sceneMap, data, true);\n    });\n\n    this.webSocket.on(\"changeMap\", (data) => {\n      this.loadScene(data.mapId);\n    });\n\n    this.webSocket.on(\"showComponentAnimation\", (data) => {\n      const { params, object, position, id } = data;\n      if (!object && position === undefined) {\n        throw new Error(\"Please provide an object or x and y coordinates\");\n      }\n      const player = object ? this.sceneMap.getObjectById(object) : undefined;\n      this.getComponentAnimation(id).displayEffect(params, player || position)\n    });\n\n    this.webSocket.on(\"setAnimation\", (data) => {\n      const { animationName, nbTimes, object } = data;\n      const player = this.sceneMap.getObjectById(object);\n      player.setAnimation(animationName, nbTimes)\n    })\n\n    this.webSocket.on('open', () => {\n      this.hooks.callHooks(\"client-engine-onConnected\", this, this.socket).subscribe();\n    })\n\n    this.webSocket.on('close', () => {\n      this.hooks.callHooks(\"client-engine-onDisconnected\", this, this.socket).subscribe();\n    })\n\n    this.webSocket.on('error', (error) => {\n      this.hooks.callHooks(\"client-engine-onConnectError\", this, error, this.socket).subscribe();\n    })\n  }\n  \n  private async loadScene(mapId: string) {\n    this.webSocket.updateProperties({ room: mapId })\n    await this.webSocket.reconnect(() => {\n      this.initListeners()\n      this.guiService._initialize()\n    })\n    const res = await this.loadMapService.load(mapId)\n    this.sceneMap.data.set(res)\n    this.hooks.callHooks(\"client-sceneMap-onAfterLoading\", this.sceneMap).subscribe();\n    //this.sceneMap.loadPhysic()\n  }\n\n  addSpriteSheet<T = any>(spritesheetClass: any, id?: string): any {\n    this.spritesheets.set(id || spritesheetClass.id, spritesheetClass);\n    return spritesheetClass as any;\n  }\n\n  addSound(sound: any, id?: string) {\n    this.sounds.set(id || sound.id, sound);\n    return sound;\n  }\n\n  addParticle(particle: any) {\n    this.particleSettings.emitters.push(particle)\n    return particle;\n  }\n\n  /**\n   * Add a component to render behind sprites\n   * Components added with this method will be displayed with a lower z-index than the sprite\n   * \n   * @param component - The component to add behind sprites\n   * @returns The added component\n   * \n   * @example\n   * ```ts\n   * // Add a shadow component behind all sprites\n   * engine.addSpriteComponentBehind(ShadowComponent);\n   * ```\n   */\n  addSpriteComponentBehind(component: any) {\n    this.spriteComponentsBehind.update((components: any[]) => [...components, component])\n    return component\n  }\n\n  /**\n   * Add a component to render in front of sprites\n   * Components added with this method will be displayed with a higher z-index than the sprite\n   * \n   * @param component - The component to add in front of sprites\n   * @returns The added component\n   * \n   * @example\n   * ```ts\n   * // Add a health bar component in front of all sprites\n   * engine.addSpriteComponentInFront(HealthBarComponent);\n   * ```\n   */\n  addSpriteComponentInFront(component: any) {\n    this.spriteComponentsInFront.update((components: any[]) => [...components, component])\n    return component\n  }\n\n  /**\n   * Add a component animation to the engine\n   * \n   * Component animations are temporary visual effects that can be displayed\n   * on sprites or objects, such as hit indicators, spell effects, or status animations.\n   * \n   * @param componentAnimation - The component animation configuration\n   * @param componentAnimation.id - Unique identifier for the animation\n   * @param componentAnimation.component - The component function to render\n   * @returns The added component animation configuration\n   * \n   * @example\n   * ```ts\n   * // Add a hit animation component\n   * engine.addComponentAnimation({\n   *   id: 'hit',\n   *   component: HitComponent\n   * });\n   * \n   * // Add an explosion effect component\n   * engine.addComponentAnimation({\n   *   id: 'explosion',\n   *   component: ExplosionComponent\n   * });\n   * ```\n   */\n  addComponentAnimation(componentAnimation: {\n    component: any,\n    id: string\n  }) {\n    const instance = new AnimationManager()\n    this.componentAnimations.push({\n      id: componentAnimation.id,\n      component: componentAnimation.component,\n      instance: instance,\n      current: instance.current\n    })\n    return componentAnimation;\n  }\n\n  /**\n   * Get a component animation by its ID\n   * \n   * Retrieves the EffectManager instance for a specific component animation,\n   * which can be used to display the animation on sprites or objects.\n   * \n   * @param id - The unique identifier of the component animation\n   * @returns The EffectManager instance for the animation\n   * @throws Error if the component animation is not found\n   * \n   * @example\n   * ```ts\n   * // Get the hit animation and display it\n   * const hitAnimation = engine.getComponentAnimation('hit');\n   * hitAnimation.displayEffect({ text: \"Critical!\" }, player);\n   * ```\n   */\n  getComponentAnimation(id: string): AnimationManager {\n    const componentAnimation = this.componentAnimations.find((componentAnimation) => componentAnimation.id === id)\n    if (!componentAnimation) {\n      throw new Error(`Component animation with id ${id} not found`)\n    }\n    return componentAnimation.instance\n  }\n\n  processInput({ input }: { input: number }) {\n    this.hooks.callHooks(\"client-engine-onInput\", this, { input, playerId: this.playerId }).subscribe();\n    this.webSocket.emit('move', { input })\n  }\n\n  processAction({ action }: { action: number }) {\n    if (this.stopProcessingInput) return;\n    this.hooks.callHooks(\"client-engine-onInput\", this, { input: 'action', playerId: this.playerId }).subscribe();\n    this.webSocket.emit('action', { action })\n  }\n\n  get PIXI() {\n    return PIXI\n  }\n\n  get socket() {\n    return this.webSocket\n  }\n  \n  get playerId() {\n    return this.playerIdSignal()\n  }\n}\n"],"names":["Canvas","componentAnimation"],"mappings":"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"}