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

package/src/Gui/Gui.ts

@@ -1,13 +1,36 @@
 import { Context, inject } from "@signe/di";
-import { signal } from "canvasengine";
+import { signal, Signal, WritableSignal } from "canvasengine";
 import { AbstractWebsocket, WebSocketToken } from "../services/AbstractSocket";
-import { PrebuiltGui } from "../components/gui";
+import { DialogboxComponent } from "../components/gui";
+import { combineLatest, Subscription } from "rxjs";
 
 interface GuiOptions {
-  name: string;
+  name?: string;
+  id?: string;
   component: any;
   display?: boolean;
   data?: any;
+  /**
+   * Auto display the GUI when added to the system
+   * @default false
+   */
+  autoDisplay?: boolean;
+  /**
+   * Function that returns an array of Signal dependencies
+   * The GUI will only display when all dependencies are resolved (!= undefined)
+   * @returns Array of Signal dependencies
+   */
+  dependencies?: () => Signal[];
+}
+
+interface GuiInstance {
+  name: string;
+  component: any;
+  display: WritableSignal<boolean>;
+  data: WritableSignal<any>;
+  autoDisplay: boolean;
+  dependencies?: () => Signal[];
+  subscription?: Subscription;
 }
 
 const throwError = (id: string) => {
@@ -16,13 +39,13 @@ const throwError = (id: string) => {
 
 export class RpgGui {
   private webSocket: AbstractWebsocket;
-  gui = signal<any>({});
+  gui = signal<Record<string, GuiInstance>>({});
 
   constructor(private context: Context) {
     this.webSocket = inject(context, WebSocketToken);
     this.add({
       name: "rpg-dialog",
-      component: PrebuiltGui.Dialogbox,
+      component: DialogboxComponent,
     });
   }
 
@@ -51,19 +74,52 @@ export class RpgGui {
     });
   }
 
+  /**
+   * Add a GUI component to the system
+   * 
+   * @param gui - GUI configuration options
+   * @param gui.name - Name or ID of the GUI component
+   * @param gui.id - Alternative ID if name is not provided
+   * @param gui.component - The component to render
+   * @param gui.display - Initial display state (default: false)
+   * @param gui.data - Initial data for the component
+   * @param gui.autoDisplay - Auto display when added (default: false)
+   * @param gui.dependencies - Function returning Signal dependencies
+   * 
+   * @example
+   * ```ts
+   * gui.add({
+   *   name: 'inventory',
+   *   component: InventoryComponent,
+   *   autoDisplay: true,
+   *   dependencies: () => [playerSignal, inventorySignal]
+   * });
+   * ```
+   */
   add(gui: GuiOptions) {
-    this.gui()[gui.name] = {
-      name: gui.name,
+    const guiId = gui.name || gui.id;
+    if (!guiId) {
+      throw new Error("GUI must have a name or id");
+    }
+
+    const guiInstance: GuiInstance = {
+      name: guiId,
       component: gui.component,
       display: signal(gui.display || false),
       data: signal(gui.data || {}),
+      autoDisplay: gui.autoDisplay || false,
+      dependencies: gui.dependencies,
     };
-  }
 
-  get(id: string | GuiOptions) {
-    if (typeof id != "string") {
-      id = id.name;
+    this.gui()[guiId] = guiInstance;
+
+    // Auto display if enabled
+    if (guiInstance.autoDisplay) {
+      this.display(guiId);
     }
+  }
+
+  get(id: string): GuiInstance | undefined {
     return this.gui()[id];
   }
 
@@ -71,22 +127,91 @@ export class RpgGui {
     return !!this.get(id);
   }
 
-  getAll() {
+  getAll(): Record<string, GuiInstance> {
     return this.gui();
   }
 
-  display(id: string, data = {}) {
+  /**
+   * Display a GUI component
+   * 
+   * Displays the GUI immediately if no dependencies are configured,
+   * or waits for all dependencies to be resolved if dependencies are present.
+   * Automatically manages subscriptions to prevent memory leaks.
+   * 
+   * @param id - The GUI component ID
+   * @param data - Data to pass to the component
+   * @param dependencies - Optional runtime dependencies (overrides config dependencies)
+   * 
+   * @example
+   * ```ts
+   * // Display immediately
+   * gui.display('inventory', { items: [] });
+   * 
+   * // Display with runtime dependencies
+   * gui.display('shop', { shopId: 1 }, [playerSignal, shopSignal]);
+   * ```
+   */
+  display(id: string, data = {}, dependencies: Signal[] = []) {
     if (!this.exists(id)) {
       throw throwError(id);
     }
-    this.get(id).data.set(data);
-    this.get(id).display.set(true);
+
+    const guiInstance = this.get(id)!;
+    
+    // Unsubscribe from previous subscription if exists
+    if (guiInstance.subscription) {
+      guiInstance.subscription.unsubscribe();
+      guiInstance.subscription = undefined;
+    }
+
+    // Use runtime dependencies or config dependencies
+    const deps = dependencies.length > 0 
+      ? dependencies 
+      : (guiInstance.dependencies ? guiInstance.dependencies() : []);
+
+    if (deps.length > 0) {
+      // Subscribe to dependencies
+      guiInstance.subscription = combineLatest(
+        deps.map(dependency => dependency.observable)
+      ).subscribe((values) => {
+        if (values.every(value => value !== undefined)) {
+          guiInstance.data.set(data);
+          guiInstance.display.set(true);
+        }
+      });
+      return;
+    }
+
+    // No dependencies, display immediately
+    guiInstance.data.set(data);
+    guiInstance.display.set(true);
   }
 
+  /**
+   * Hide a GUI component
+   * 
+   * Hides the GUI and cleans up any active subscriptions.
+   * 
+   * @param id - The GUI component ID
+   * 
+   * @example
+   * ```ts
+   * gui.hide('inventory');
+   * ```
+   */
   hide(id: string) {
     if (!this.exists(id)) {
       throw throwError(id);
     }
-    this.get(id).display.set(false);
+
+    const guiInstance = this.get(id)!;
+    
+    // Unsubscribe if there's an active subscription
+    if (guiInstance.subscription) {
+      guiInstance.subscription.unsubscribe();
+      guiInstance.subscription = undefined;
+    }
+
+    guiInstance.display.set(false);
   }
 }

package/src/RpgClient.ts

@@ -1,9 +1,10 @@
-import { ComponentFunction } from 'canvasengine'
+import { ComponentFunction, Signal } from 'canvasengine'
 import { RpgClientEngine } from './RpgClientEngine'
 import { Loader, Container } from 'pixi.js'
+import { RpgClientObject } from './Game/Object'
 
 type RpgClass<T = any> = new (...args: any[]) => T
-type RpgComponent = Container
+type RpgComponent = RpgClientObject
 type SceneMap = Container
 
 export interface RpgClientEngineHooks {
@@ -305,15 +306,43 @@ export interface RpgClient {
     spritesheets?: any[],
 
     /** 
-     * Array containing the list of VueJS components
+     * Array containing the list of GUI components
      * 
+     * ```ts
+     * import { defineModule, RpgClient } from '@rpgjs/client'
+     * import InventoryComponent from './inventory.ce'
+     * 
+     * defineModule<RpgClient>({
+     *      gui: [
+     *          {
+     *              id: 'inventory',
+     *              component: InventoryComponent,
+     *              autoDisplay: true,
+     *              dependencies: () => [playerSignal, inventorySignal]
+     *          }
+     *      ]
+     * })
+     * ```
      * 
      * [Guide: Create GUI](/guide/create-gui.html)
      * 
-     * @prop {Array<Component of CanvasEngine>} [gui]
+     * @prop {Array<GuiOptions>} [gui]
      * @memberof RpgClient
      * */
-    gui?: ComponentFunction[],
+    gui?: {
+        id: string,
+        component: ComponentFunction,
+        /**
+         * Auto display the GUI when added to the system
+         * @default false
+         */
+        autoDisplay?: boolean,
+        /**
+         * Function that returns an array of Signal dependencies
+         * The GUI will only display when all dependencies are resolved (!= undefined)
+         */
+        dependencies?: () => Signal[]
+    }[],
 
     /** 
      * Array containing the list of sounds
@@ -382,6 +411,8 @@ export interface RpgClient {
         map: RpgSceneMapHooks
     }
 
+    sceneMap?: RpgSceneMapHooks
+
     /** 
      * Array containing the list of component animations
      * Each element defines a temporary component to display for animations like hits, effects, etc.

package/src/RpgClientEngine.ts

@@ -18,7 +18,7 @@ export class RpgClientEngine<T = any> {
   private webSocket: AbstractWebsocket;
   private loadMapService: LoadMapService;
   private hooks: Hooks;
-  private sceneMap: RpgClientMap = new RpgClientMap();
+  private sceneMap: RpgClientMap
   private selector: HTMLElement;
   public globalConfig: T;
   public sceneComponent: any;
@@ -53,6 +53,7 @@ export class RpgClientEngine<T = any> {
   }
 
   async start() {
+    this.sceneMap = new RpgClientMap()
     this.selector = document.body.querySelector("#rpg") as HTMLElement;
 
     const { app, canvasElement } = await bootstrapCanvas(this.selector, Canvas);
@@ -124,6 +125,7 @@ export class RpgClientEngine<T = any> {
   }
   
   private async loadScene(mapId: string) {
+    this.hooks.callHooks("client-sceneMap-onBeforeLoading", this.sceneMap).subscribe();
     this.webSocket.updateProperties({ room: mapId })
     await this.webSocket.reconnect(() => {
       this.initListeners()
@@ -273,4 +275,12 @@ export class RpgClientEngine<T = any> {
   get playerId() {
     return this.playerIdSignal()
   }
+
+  get scene() {
+    return this.sceneMap
+  }
+
+  getCurrentPlayer() {
+    return this.sceneMap.getCurrentPlayer()
+  }
 }

package/src/components/character.ce

@@ -1,4 +1,4 @@
-<Container x y zIndex={y} viewportFollow={isMe} controls>
+<Container x y zIndex={y} viewportFollow={isMe} controls onBeforeDestroy>
   @for (component of componentsBehind) {
     <Container>
       <component object />
@@ -19,6 +19,7 @@
 
 <script>
   import { signal, effect, mount, computed, tick } from "canvasengine";
+  import { lastValueFrom } from "rxjs";
   import { Particle } from "@canvasengine/presets";
   import { GameEngineToken, ModulesToken } from "@rpgjs/common";
   import { RpgClientEngine } from "../RpgClientEngine";
@@ -127,19 +128,20 @@
     }
     
     previousAnimationName = currentAnimationName;
+    
   });
 
-  mount((element) => {
-    hooks.callHooks("client-sprite-onInit", element.componentInstance)
-    hooks.callHooks("client-sceneMap-onAddSprite", client.sceneMap, element.componentInstance)
+  const onBeforeDestroy = async () => {
+    await lastValueFrom(hooks.callHooks("client-sprite-onDestroy", object)) 
+    await lastValueFrom(hooks.callHooks("client-sceneMap-onRemoveSprite", client.sceneMap, object))
+  }
 
-    return () => {
-      hooks.callHooks("client-sprite-onDestroy", element.componentInstance)
-      hooks.callHooks("client-sceneMap-onRemoveSprite", client.sceneMap, element.componentInstance)
-    }
+  mount((element) => {
+    hooks.callHooks("client-sprite-onAdd", object).subscribe()
+    hooks.callHooks("client-sceneMap-onAddSprite", client.sceneMap, object).subscribe()
   })
 
   tick(() => {
-    hooks.callHooks("client-sprite-onUpdate")
+    hooks.callHooks("client-sprite-onUpdate").subscribe()
   })
 </script>

package/src/components/gui/box.ce

@@ -0,0 +1,17 @@
+<Container positionType="absolute" top={top} left={left}>
+    <Container
+      anchor={[0.5, 0.5]}
+    >
+    <Rect width height color={_color} />
+    <Container attach={child}></Container>
+  </Container>  
+</Container>
+
+<script>
+  import { RpgClientEngine, inject } from "../../index";
+
+  const { width, height, children, color, top, left } = defineProps();
+  const engine = inject(RpgClientEngine)
+  const child = children[0]
+  const _color = computed(() => engine.globalConfig.gui?.windowColor || color?.() || "#1a1a2e")
+</script>

package/src/components/gui/dialogbox/index.ce

@@ -59,6 +59,7 @@
 
   import { inject } from "../../../core/inject";
   import { RpgClientEngine } from "../../../RpgClientEngine";
+  import BoxComponent from "../box.ce";
 
   const {
     message,

package/src/components/gui/index.ts

@@ -1,5 +1,4 @@
-import Dialogbox from "./dialogbox/index.ce";
+import DialogboxComponent from "./dialogbox/index.ce";
+import BoxComponent from "./box.ce";
 
-export const PrebuiltGui = {
-    Dialogbox
-}
+export { DialogboxComponent, BoxComponent }

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

@@ -6,6 +6,10 @@
     @for ((player,id) of players) {
         <Character id={id} object={player} />
     }
+
+    @for (child of children) {
+        <child />
+    }
 </Container>
 
 <script>
@@ -15,6 +19,8 @@
     import Character from "../character.ce";
    
     const engine = inject(RpgClientEngine);
+    const { children } = defineProps()
+    
     const players = engine.sceneMap.players
     const events = engine.sceneMap.events
 </script>

package/src/index.ts

@@ -10,4 +10,5 @@ export * from "./Gui/Gui";
 export * from "./components/gui";
 export * from "./components/animations";
 export * from "./presets";
-export * from "./components";
+export * from "./components";
+export * from "./components/gui";