@rpgjs/client 5.0.0-alpha.23 → 5.0.0-alpha.25

package/src/RpgClientEngine.ts

@@ -12,8 +12,7 @@ import { load } from "@signe/sync";
 import { RpgClientMap } from "./Game/Map"
 import { RpgGui } from "./Gui/Gui";
 import { AnimationManager } from "./Game/AnimationManager";
-import { TransitionManager } from "./Game/TransitionManager";
-import { lastValueFrom, Observable } from "rxjs";
+import { lastValueFrom, Observable, combineLatest, BehaviorSubject, filter, switchMap, take } from "rxjs";
 import { GlobalConfigToken } from "./module";
 import * as PIXI from "pixi.js";
 import { PrebuiltComponentAnimations } from "./components/animations";
@@ -37,7 +36,6 @@ export class RpgClientEngine<T = any> {
   spritesheets: Map<string, any> = new Map();
   sounds: Map<string, any> = new Map();
   componentAnimations: any[] = [];
-  transitions: any[] = [];
   private spritesheetResolver?: (id: string) => any | Promise<any>;
   private soundResolver?: (id: string) => any | Promise<any>;
   particleSettings: {
@@ -47,6 +45,8 @@ export class RpgClientEngine<T = any> {
     }
   renderer: PIXI.Renderer;
   tick: Observable<number>;
+  private canvasApp?: any;
+  private canvasElement?: any;
   playerIdSignal = signal<string | null>(null);
   spriteComponentsBehind = signal<any[]>([]);
   spriteComponentsInFront = signal<any[]>([]);
@@ -55,6 +55,8 @@ export class RpgClientEngine<T = any> {
   /** Trigger for map shake animation */
   mapShakeTrigger = trigger();
 
+  controlsReady = signal(undefined); 
+
   private predictionEnabled = false;
   private prediction?: PredictionController<Direction>;
   private readonly SERVER_CORRECTION_THRESHOLD = 30;
@@ -65,6 +67,16 @@ export class RpgClientEngine<T = any> {
   private pingInterval: any = null;
   private readonly PING_INTERVAL_MS = 5000; // Send ping every 5 seconds
   private lastInputTime = 0;
+  // Track map loading state for onAfterLoading hook using RxJS
+  private mapLoadCompleted$ = new BehaviorSubject<boolean>(false);
+  private playerIdReceived$ = new BehaviorSubject<boolean>(false);
+  private playersReceived$ = new BehaviorSubject<boolean>(false);
+  private eventsReceived$ = new BehaviorSubject<boolean>(false);
+  private onAfterLoadingSubscription?: any;
+  
+  // Store subscriptions and event listeners for cleanup
+  private tickSubscriptions: any[] = [];
+  private resizeHandler?: () => void;
 
   constructor(public context) {
     this.webSocket = inject(WebSocketToken);
@@ -134,6 +146,7 @@ export class RpgClientEngine<T = any> {
       ...currentValues,
       values: new Map([['__default__', controlInstance]])
     }
+    this.controlsReady.set(undefined);
   }
 
   async start() {
@@ -141,16 +154,19 @@ export class RpgClientEngine<T = any> {
     this.selector = document.body.querySelector("#rpg") as HTMLElement;
 
     const { app, canvasElement } = await bootstrapCanvas(this.selector, Canvas);
+    this.canvasApp = app;
+    this.canvasElement = canvasElement;
     this.renderer = app.renderer as PIXI.Renderer;
     this.tick = canvasElement?.propObservables?.context['tick'].observable
 
-    this.tick.subscribe(() => {
+    const inputCheckSubscription = this.tick.subscribe(() => {
       if (Date.now() - this.lastInputTime > 100) {
         const player = this.getCurrentPlayer();
         if (!player) return;
         (this.sceneMap as any).stopMovement(player);
       }
-    })
+    });
+    this.tickSubscriptions.push(inputCheckSubscription);
 
 
     this.hooks.callHooks("client-spritesheets-load", this).subscribe();
@@ -163,17 +179,17 @@ export class RpgClientEngine<T = any> {
     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-transitions-load", this).subscribe();
     this.hooks.callHooks("client-sprite-load", this).subscribe();
 
     await lastValueFrom(this.hooks.callHooks("client-engine-onStart", this));
 
     // wondow is resize
-    window.addEventListener('resize', () => {
+    this.resizeHandler = () => {
       this.hooks.callHooks("client-engine-onWindowResize", this).subscribe();
-    })
+    };
+    window.addEventListener('resize', this.resizeHandler);
 
-    this.tick.subscribe((tick) => {
+    const tickSubscription = this.tick.subscribe((tick) => {
       this.hooks.callHooks("client-engine-onStep", this, tick).subscribe();
 
       // Clean up old prediction states and input history every 60 ticks (approximately every second at 60fps)
@@ -182,7 +198,8 @@ export class RpgClientEngine<T = any> {
         this.prediction?.cleanup(now);
         this.prediction?.tryApplyPendingSnapshot();
       }
-    })
+    });
+    this.tickSubscriptions.push(tickSubscription);
 
     await this.webSocket.connection(() => {
       this.initListeners()
@@ -192,12 +209,27 @@ export class RpgClientEngine<T = any> {
 
   private initListeners() {
     this.webSocket.on("sync", (data) => {
-      if (data.pId) this.playerIdSignal.set(data.pId)
+      if (data.pId) {
+        this.playerIdSignal.set(data.pId);
+        // Signal that player ID was received
+        this.playerIdReceived$.next(true);
+      }
 
       // Apply client-side prediction filtering and server reconciliation
       this.hooks.callHooks("client-sceneMap-onChanges", this.sceneMap, { partial: data }).subscribe();
 
       load(this.sceneMap, data, true);
+      
+      // Check if players and events are present in sync data
+      const players = data.players || this.sceneMap.players();
+      if (players && Object.keys(players).length > 0) {
+        this.playersReceived$.next(true);
+      }
+      
+      const events = data.events || this.sceneMap.events();
+      if (events !== undefined) {
+        this.eventsReceived$.next(true);
+      }
     });
 
     // Handle pong responses for RTT measurement
@@ -269,7 +301,7 @@ export class RpgClientEngine<T = any> {
 
     this.webSocket.on("shakeMap", (data) => {
       const { intensity, duration, frequency, direction } = data || {};
-      this.mapShakeTrigger.start({
+      (this.mapShakeTrigger as any).start({
         intensity,
         duration,
         frequency,
@@ -366,11 +398,25 @@ export class RpgClientEngine<T = any> {
   }
 
   private async loadScene(mapId: string) {
-    this.hooks.callHooks("client-sceneMap-onBeforeLoading", this.sceneMap).subscribe();
+    await lastValueFrom(this.hooks.callHooks("client-sceneMap-onBeforeLoading", this.sceneMap));
 
     // Clear client prediction states when changing maps
     this.clearClientPredictionStates();
 
+    // Reset all conditions for new map loading
+    this.mapLoadCompleted$.next(false);
+    this.playerIdReceived$.next(false);
+    this.playersReceived$.next(false);
+    this.eventsReceived$.next(false);
+
+    // Unsubscribe previous subscription if exists
+    if (this.onAfterLoadingSubscription) {
+      this.onAfterLoadingSubscription.unsubscribe();
+    }
+
+    // Setup RxJS observable to wait for all conditions
+    this.setupOnAfterLoadingObserver();
+
     this.webSocket.updateProperties({ room: mapId })
     await this.webSocket.reconnect(() => {
       this.initListeners()
@@ -378,7 +424,25 @@ export class RpgClientEngine<T = any> {
     })
     const res = await this.loadMapService.load(mapId)
     this.sceneMap.data.set(res)
-    this.hooks.callHooks("client-sceneMap-onAfterLoading", this.sceneMap).subscribe();
+    
+    // Check if playerId is already present
+    if (this.playerIdSignal()) {
+      this.playerIdReceived$.next(true);
+    }
+    
+    // Check if players and events are already present in sceneMap
+    const players = this.sceneMap.players();
+    if (players && Object.keys(players).length > 0) {
+      this.playersReceived$.next(true);
+    }
+    
+    const events = this.sceneMap.events();
+    if (events !== undefined) {
+      this.eventsReceived$.next(true);
+    }
+    
+    // Signal that map loading is completed (this should be last to ensure other checks are done)
+    this.mapLoadCompleted$.next(true);
     this.sceneMap.loadPhysic()
   }
 
@@ -937,158 +1001,13 @@ export class RpgClientEngine<T = any> {
     return componentAnimation.instance
   }
 
-  /**
-   * Add a transition to the engine
-   * 
-   * Transitions are screen effects that can be displayed during scene changes,
-   * map loading, or any other moment where a visual transition is needed.
-   * They are displayed on top of the entire canvas and can have custom props
-   * that can be functions (similar to ComponentAnimation).
-   * 
-   * @param transition - The transition configuration
-   * @param transition.id - Unique identifier for the transition
-   * @param transition.component - The component function to render
-   * @param transition.props - Optional props to pass to the component (can be a function)
-   * @returns The added transition configuration
-   * 
-   * @example
-   * ```ts
-   * // Add a fade transition
-   * engine.addTransition({
-   *   id: 'fade',
-   *   component: FadeComponent
-   * });
-   * 
-   * // Add a transition with props
-   * engine.addTransition({
-   *   id: 'slide',
-   *   component: SlideComponent,
-   *   props: { direction: 'left', duration: 500 }
-   * });
-   * 
-   * // Add a transition with function props
-   * engine.addTransition({
-   *   id: 'custom',
-   *   component: CustomTransition,
-   *   props: (engine) => ({ width: engine.width(), height: engine.height() })
-   * });
-   * ```
-   */
-  addTransition(transition: {
-    component: any,
-    id: string,
-    props?: any | ((engine: RpgClientEngine) => any)
-  }) {
-    const instance = new TransitionManager()
-    this.transitions.push({
-      id: transition.id,
-      component: transition.component,
-      props: transition.props,
-      instance: instance,
-      current: instance.current
-    })
-    return transition;
-  }
-
-  /**
-   * Remove a transition from the engine
-   * 
-   * Removes a transition by its ID. This will not affect any currently
-   * running transitions, only prevent new ones from being started.
-   * 
-   * @param id - The unique identifier of the transition to remove
-   * @returns true if the transition was found and removed, false otherwise
-   * 
-   * @example
-   * ```ts
-   * // Remove a transition
-   * engine.removeTransition('fade');
-   * ```
-   */
-  removeTransition(id: string): boolean {
-    const index = this.transitions.findIndex((transition) => transition.id === id);
-    if (index !== -1) {
-      this.transitions.splice(index, 1);
-      return true;
-    }
-    return false;
-  }
-
-  /**
-   * Modify an existing transition
-   * 
-   * Updates the component or props of an existing transition. This will
-   * not affect any currently running transitions, only future ones.
-   * 
-   * @param id - The unique identifier of the transition to modify
-   * @param updates - The updates to apply (component and/or props)
-   * @returns true if the transition was found and modified, false otherwise
-   * 
-   * @example
-   * ```ts
-   * // Update transition props
-   * engine.modifyTransition('fade', {
-   *   props: { duration: 2000, color: 'white' }
-   * });
-   * 
-   * // Update transition component
-   * engine.modifyTransition('fade', {
-   *   component: NewFadeComponent
-   * });
-   * ```
-   */
-  modifyTransition(id: string, updates: {
-    component?: any,
-    props?: any | ((engine: RpgClientEngine) => any)
-  }): boolean {
-    const transition = this.transitions.find((transition) => transition.id === id);
-    if (!transition) {
-      return false;
-    }
-    if (updates.component !== undefined) {
-      transition.component = updates.component;
-    }
-    if (updates.props !== undefined) {
-      transition.props = updates.props;
-    }
-    return true;
-  }
-
-  /**
-   * Get a transition by its ID
-   * 
-   * Retrieves the TransitionManager instance for a specific transition,
-   * which can be used to start the transition.
-   * 
-   * @param id - The unique identifier of the transition
-   * @returns The TransitionManager instance for the transition
-   * @throws Error if the transition is not found
-   * 
-   * @example
-   * ```ts
-   * // Get a transition and start it
-   * const fadeTransition = engine.getTransition('fade');
-   * fadeTransition.start({ duration: 1000 });
-   * ```
-   */
-  getTransition(id: string): TransitionManager {
-    const transition = this.transitions.find((transition) => transition.id === id)
-    if (!transition) {
-      throw new Error(`Transition with id ${id} not found`)
-    }
-    return transition.instance
-  }
-
   /**
    * Start a transition
    * 
-   * Convenience method to start a transition by its ID. This combines
-   * getTransition and start into a single call. The transition will
-   * automatically receive an onFinish callback to remove itself when done.
+   * Convenience method to display a transition by its ID using the GUI system.
    * 
    * @param id - The unique identifier of the transition to start
-   * @param props - Additional props to pass to the transition component
-   * @returns The created transition object
+   * @param props - Props to pass to the transition component
    * 
    * @example
    * ```ts
@@ -1103,28 +1022,10 @@ export class RpgClientEngine<T = any> {
    * ```
    */
   startTransition(id: string, props: any = {}) {
-    const transition = this.transitions.find((t) => t.id === id);
-    if (!transition) {
-      throw new Error(`Transition with id ${id} not found`);
-    }
-
-    // Get base props (can be a function or object)
-    let baseProps = {};
-    if (transition.props) {
-      if (typeof transition.props === 'function') {
-        baseProps = transition.props(this);
-      } else {
-        baseProps = transition.props;
-      }
+    if (!this.guiService.exists(id)) {
+      throw new Error(`Transition with id ${id} not found. Make sure to add it using engine.addTransition() or in your module's transitions property.`);
     }
-
-    // Merge base props with provided props (provided props take precedence)
-    const finalProps = {
-      ...baseProps,
-      ...props,
-    };
-
-    return transition.instance.start(finalProps);
+    this.guiService.display(id, props);
   }
 
   async processInput({ input }: { input: Direction }) {
@@ -1230,6 +1131,46 @@ export class RpgClientEngine<T = any> {
     return this.sceneMap.getCurrentPlayer()
   }
 
+  /**
+   * Setup RxJS observer to wait for all conditions before calling onAfterLoading hook
+   * 
+   * This method uses RxJS `combineLatest` to wait for all conditions to be met,
+   * regardless of the order in which they arrive:
+   * 1. The map loading is completed (loadMapService.load is finished)
+   * 2. We received a player ID (pId)
+   * 3. Players array has at least one element
+   * 4. Events property is present in the sync data
+   * 
+   * Once all conditions are met, it uses `switchMap` to call the onAfterLoading hook once.
+   * 
+   * ## Design
+   * 
+   * Uses BehaviorSubjects to track each condition state, allowing events to arrive
+   * in any order. The `combineLatest` operator waits until all observables emit `true`,
+   * then `take(1)` ensures the hook is called only once, and `switchMap` handles
+   * the hook execution.
+   * 
+   * @example
+   * ```ts
+   * // Called automatically in loadScene to setup the observer
+   * this.setupOnAfterLoadingObserver();
+   * ```
+   */
+  private setupOnAfterLoadingObserver(): void {
+    this.onAfterLoadingSubscription = combineLatest([
+      this.mapLoadCompleted$.pipe(filter(completed => completed === true)),
+      this.playerIdReceived$.pipe(filter(received => received === true)),
+      this.playersReceived$.pipe(filter(received => received === true)),
+      this.eventsReceived$.pipe(filter(received => received === true))
+    ]).pipe(
+      take(1), // Only execute once when all conditions are met
+      switchMap(() => {
+        // Call the hook and return the observable
+        return this.hooks.callHooks("client-sceneMap-onAfterLoading", this.sceneMap);
+      })
+    ).subscribe();
+  }
+
   /**
    * Clear client prediction states for cleanup
    * 
@@ -1364,4 +1305,179 @@ export class RpgClientEngine<T = any> {
   private async replayUnackedInputsFromFrame(_startFrame: number): Promise<void> {
     // Prediction controller handles replay internally. Kept for backwards compatibility.
   }
+
+  /**
+   * Clear all client resources and reset state
+   * 
+   * This method should be called to clean up all client-side resources when
+   * shutting down or resetting the client engine. It:
+   * - Destroys the PIXI renderer
+   * - Stops all sounds
+   * - Cleans up subscriptions and event listeners
+   * - Resets scene map
+   * - Stops ping/pong interval
+   * - Clears prediction states
+   * 
+   * ## Design
+   * 
+   * This method is used primarily in testing environments to ensure clean
+   * state between tests. In production, the client engine typically persists
+   * for the lifetime of the application.
+   * 
+   * @example
+   * ```ts
+   * // In test cleanup
+   * afterEach(() => {
+   *   clientEngine.clear();
+   * });
+   * ```
+   */
+  clear(): void {
+    try {
+      // First, unsubscribe from all tick subscriptions to stop rendering attempts
+      for (const subscription of this.tickSubscriptions) {
+        if (subscription && typeof subscription.unsubscribe === 'function') {
+          subscription.unsubscribe();
+        }
+      }
+      this.tickSubscriptions = [];
+
+      // Stop ping/pong interval
+      if (this.pingInterval) {
+        clearInterval(this.pingInterval);
+        this.pingInterval = null;
+      }
+
+      // Clean up onAfterLoading subscription
+      if (this.onAfterLoadingSubscription && typeof this.onAfterLoadingSubscription.unsubscribe === 'function') {
+        this.onAfterLoadingSubscription.unsubscribe();
+        this.onAfterLoadingSubscription = undefined;
+      }
+
+      // Clean up canvasElement (CanvasEngine) BEFORE destroying PIXI app
+      // This prevents CanvasEngine from trying to render after PIXI is destroyed
+      // CanvasEngine manages its own render loop which could try to access PIXI after destruction
+      if (this.canvasElement) {
+        try {
+          // Try to stop or cleanup canvasElement if it has cleanup methods
+          if (typeof (this.canvasElement as any).destroy === 'function') {
+            (this.canvasElement as any).destroy();
+          }
+          // Clear the reference
+          this.canvasElement = undefined;
+        } catch (error) {
+          // Ignore errors during canvasElement cleanup
+        }
+      }
+
+      // Reset scene map if it exists (this should stop any ongoing animations/renders)
+      if (this.sceneMap && typeof (this.sceneMap as any).reset === 'function') {
+        (this.sceneMap as any).reset();
+      }
+
+      // Stop all sounds
+      this.stopAllSounds();
+
+      // Remove resize event listener
+      if (this.resizeHandler && typeof window !== 'undefined') {
+        window.removeEventListener('resize', this.resizeHandler);
+        this.resizeHandler = undefined;
+      }
+
+      // Destroy PIXI app and renderer if they exist
+      // Destroy the app first, which will destroy the renderer
+      // Store renderer reference before destroying app (since app.destroy() will destroy the renderer)
+      const rendererStillExists = this.renderer && typeof this.renderer.destroy === 'function';
+      
+      if (this.canvasApp && typeof this.canvasApp.destroy === 'function') {
+        try {
+          // Stop the ticker first to prevent any render calls during destruction
+          if (this.canvasApp.ticker) {
+            if (typeof this.canvasApp.ticker.stop === 'function') {
+              this.canvasApp.ticker.stop();
+            }
+            // Also remove all listeners from ticker to prevent callbacks
+            if (typeof this.canvasApp.ticker.removeAll === 'function') {
+              this.canvasApp.ticker.removeAll();
+            }
+          }
+          
+          // Stop the renderer's ticker if it exists separately
+          if (this.renderer && (this.renderer as any).ticker) {
+            if (typeof (this.renderer as any).ticker.stop === 'function') {
+              (this.renderer as any).ticker.stop();
+            }
+            if (typeof (this.renderer as any).ticker.removeAll === 'function') {
+              (this.renderer as any).ticker.removeAll();
+            }
+          }
+          
+          // Remove the canvas from DOM before destroying to prevent render attempts
+          if (this.canvasApp.canvas && this.canvasApp.canvas.parentNode) {
+            this.canvasApp.canvas.parentNode.removeChild(this.canvasApp.canvas);
+          }
+          
+          // Destroy with minimal options to avoid issues
+          // Don't pass options that might trigger additional cleanup that could fail
+          this.canvasApp.destroy(true);
+        } catch (error) {
+          // Ignore errors during destruction
+        }
+        this.canvasApp = undefined;
+        // canvasApp.destroy() already destroyed the renderer, so just null it
+        this.renderer = null as any;
+      } else if (rendererStillExists) {
+        // Fallback: destroy renderer directly only if app doesn't exist or wasn't destroyed
+        try {
+          // Stop the renderer's ticker if it has one
+          if ((this.renderer as any).ticker) {
+            if (typeof (this.renderer as any).ticker.stop === 'function') {
+              (this.renderer as any).ticker.stop();
+            }
+            if (typeof (this.renderer as any).ticker.removeAll === 'function') {
+              (this.renderer as any).ticker.removeAll();
+            }
+          }
+          
+          this.renderer.destroy(true);
+        } catch (error) {
+          // Ignore errors during destruction
+        }
+        this.renderer = null as any;
+      }
+
+      // Clean up prediction controller
+      if (this.prediction) {
+        // Prediction controller cleanup is handled internally when destroyed
+        this.prediction = undefined;
+      }
+
+      // Reset signals
+      this.playerIdSignal.set(null);
+      this.cameraFollowTargetId.set(null);
+      this.spriteComponentsBehind.set([]);
+      this.spriteComponentsInFront.set([]);
+      
+      // Clear maps and arrays
+      this.spritesheets.clear();
+      this.sounds.clear();
+      this.componentAnimations = [];
+      this.particleSettings.emitters = [];
+
+      // Reset state
+      this.stopProcessingInput = false;
+      this.lastInputTime = 0;
+      this.inputFrameCounter = 0;
+      this.frameOffset = 0;
+      this.rtt = 0;
+
+      // Reset behavior subjects
+      this.mapLoadCompleted$.next(false);
+      this.playerIdReceived$.next(false);
+      this.playersReceived$.next(false);
+      this.eventsReceived$.next(false);
+    } catch (error) {
+      console.warn('Error during client engine cleanup:', error);
+    }
+  }
 }

package/src/components/character.ce

@@ -13,15 +13,14 @@
         tint 
         hitbox 
         flash={flashConfig}
-        
-        />
+      />
     }
   </Container>
   @for (compConfig of normalizedComponentsInFront) {
     <Container dependencies={@compConfig.@dependencies}>
       <compConfig.component object ...compConfig.props />
     </Container>
-  } 
+  }
   @for (attachedGui of attachedGuis) {
     @if (shouldDisplayAttachedGui) {
       <Container>

package/src/components/gui/mobile/index.ts

@@ -16,7 +16,7 @@ export const withMobile = () => (
                 autoDisplay: true,
                 dependencies: () => {
                     const engine = inject(RpgClientEngine);
-                    return [signal(isMobile() ||undefined), engine.scene.currentPlayer]
+                    return [signal(isMobile() ||undefined), engine.controlsReady]
                 }
             }
         ]