@rpgjs/client 5.0.0-alpha.8 → 5.0.0-alpha.9

package/src/RpgClientEngine.ts

@@ -8,9 +8,9 @@ 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 { lastValueFrom, Observable } from "rxjs";
 import { GlobalConfigToken } from "./module";
-import { ClientIo } from "@signe/room";
+import * as PIXI from "pixi.js";
 
 export class RpgClientEngine<T = any> {
   private guiService: RpgGui;
@@ -22,7 +22,6 @@ 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();
@@ -33,6 +32,11 @@ export class RpgClientEngine<T = 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,15 +49,27 @@ export class RpgClientEngine<T = any> {
   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-sprite-load", this).subscribe();
 
   
     await this.webSocket.connection(() => {
@@ -64,6 +80,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);
     });
 
@@ -79,6 +97,18 @@ export class RpgClientEngine<T = any> {
       const player = this.sceneMap.getObjectById(object);
       this.getEffect(id).displayEffect(params, player)
     });
+
+    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,6 +138,42 @@ 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
+  }
+
   addEffect(effect: {
     component: any,
     id: string
@@ -131,11 +197,25 @@ export class RpgClientEngine<T = any> {
   }
 
   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,8 +1,20 @@
 <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 />
-  }
+  <Container>
+    @for (graphicId of graphics) {
+      <Sprite sheet={@sheet(@graphicId)} direction tint />
+    }
+  </Container>
+  @for (component of componentsInFront) {
+    <Container>
+      <component object />
+    </Container>
+  } 
   <!-- <Ellipse 
     x={shadow.@x} 
     y={shadow.@y} 
@@ -15,19 +27,24 @@
 </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 = object.x;
   const y = object.y;
@@ -84,7 +101,7 @@
       keyDown() {
         if (canControls()) {
           client.processAction({ action: 'action' })
-          // particleName.set('hit') 
+           // particleName.set('hit') 
           // emitParticleTrigger.start()
           // object.flash('red')
         }
@@ -101,4 +118,18 @@
       },
     };
   }
+
+  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/scenes/event-layer.ce

@@ -1,10 +1,10 @@
 <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>
 

package/src/module.ts

@@ -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/tsconfig.json

@@ -30,6 +30,6 @@
     ],
     "typeRoots": [
         "node_modules/@types",
-        "src/types"
+        "node_modules/@rpgjs/client"
     ],
   }