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

package/dist/index2.js

@@ -10,8 +10,7 @@ import { load } from './index28.js';
 import { RpgClientMap } from './index29.js';
 import { RpgGui } from './index9.js';
 import { AnimationManager } from './index30.js';
-import { TransitionManager } from './index31.js';
-import { lastValueFrom } from 'rxjs';
+import { BehaviorSubject, lastValueFrom, combineLatest, filter, take, switchMap } from 'rxjs';
 import { GlobalConfigToken } from './index8.js';
 import * as PIXI from 'pixi.js';
 import { PrebuiltComponentAnimations } from './index12.js';
@@ -25,7 +24,6 @@ class RpgClientEngine {
     this.spritesheets = /* @__PURE__ */ new Map();
     this.sounds = /* @__PURE__ */ new Map();
     this.componentAnimations = [];
-    this.transitions = [];
     this.particleSettings = {
       emitters: []
     };
@@ -36,6 +34,7 @@ class RpgClientEngine {
     this.cameraFollowTargetId = signal(null);
     /** Trigger for map shake animation */
     this.mapShakeTrigger = trigger();
+    this.controlsReady = signal(void 0);
     this.predictionEnabled = false;
     this.SERVER_CORRECTION_THRESHOLD = 30;
     this.inputFrameCounter = 0;
@@ -47,6 +46,11 @@ class RpgClientEngine {
     this.PING_INTERVAL_MS = 5e3;
     // Send ping every 5 seconds
     this.lastInputTime = 0;
+    // Track map loading state for onAfterLoading hook using RxJS
+    this.mapLoadCompleted$ = new BehaviorSubject(false);
+    this.playerIdReceived$ = new BehaviorSubject(false);
+    this.playersReceived$ = new BehaviorSubject(false);
+    this.eventsReceived$ = new BehaviorSubject(false);
     this.webSocket = inject(WebSocketToken);
     this.guiService = inject(RpgGui);
     this.loadMapService = inject(LoadMapToken);
@@ -110,6 +114,7 @@ class RpgClientEngine {
       ...currentValues,
       values: /* @__PURE__ */ new Map([["__default__", controlInstance]])
     };
+    this.controlsReady.set(true);
   }
   async start() {
     this.sceneMap = new RpgClientMap();
@@ -133,7 +138,6 @@ class RpgClientEngine {
     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));
     window.addEventListener("resize", () => {
@@ -154,9 +158,20 @@ class RpgClientEngine {
   }
   initListeners() {
     this.webSocket.on("sync", (data) => {
-      if (data.pId) this.playerIdSignal.set(data.pId);
+      if (data.pId) {
+        this.playerIdSignal.set(data.pId);
+        this.playerIdReceived$.next(true);
+      }
       this.hooks.callHooks("client-sceneMap-onChanges", this.sceneMap, { partial: data }).subscribe();
       load(this.sceneMap, data, true);
+      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 !== void 0) {
+        this.eventsReceived$.next(true);
+      }
     });
     this.webSocket.on("pong", (data) => {
       const now = Date.now();
@@ -292,8 +307,16 @@ class RpgClientEngine {
     });
   }
   async loadScene(mapId) {
-    this.hooks.callHooks("client-sceneMap-onBeforeLoading", this.sceneMap).subscribe();
+    await lastValueFrom(this.hooks.callHooks("client-sceneMap-onBeforeLoading", this.sceneMap));
     this.clearClientPredictionStates();
+    this.mapLoadCompleted$.next(false);
+    this.playerIdReceived$.next(false);
+    this.playersReceived$.next(false);
+    this.eventsReceived$.next(false);
+    if (this.onAfterLoadingSubscription) {
+      this.onAfterLoadingSubscription.unsubscribe();
+    }
+    this.setupOnAfterLoadingObserver();
     this.webSocket.updateProperties({ room: mapId });
     await this.webSocket.reconnect(() => {
       this.initListeners();
@@ -301,7 +324,18 @@ class RpgClientEngine {
     });
     const res = await this.loadMapService.load(mapId);
     this.sceneMap.data.set(res);
-    this.hooks.callHooks("client-sceneMap-onAfterLoading", this.sceneMap).subscribe();
+    if (this.playerIdSignal()) {
+      this.playerIdReceived$.next(true);
+    }
+    const players = this.sceneMap.players();
+    if (players && Object.keys(players).length > 0) {
+      this.playersReceived$.next(true);
+    }
+    const events = this.sceneMap.events();
+    if (events !== void 0) {
+      this.eventsReceived$.next(true);
+    }
+    this.mapLoadCompleted$.next(true);
     this.sceneMap.loadPhysic();
   }
   addSpriteSheet(spritesheetClass, id) {
@@ -788,147 +822,13 @@ class RpgClientEngine {
     }
     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) {
-    const instance = new TransitionManager();
-    this.transitions.push({
-      id: transition.id,
-      component: transition.component,
-      props: transition.props,
-      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) {
-    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, updates) {
-    const transition = this.transitions.find((transition2) => transition2.id === id);
-    if (!transition) {
-      return false;
-    }
-    if (updates.component !== void 0) {
-      transition.component = updates.component;
-    }
-    if (updates.props !== void 0) {
-      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) {
-    const transition = this.transitions.find((transition2) => transition2.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
@@ -943,23 +843,10 @@ class RpgClientEngine {
    * ```
    */
   startTransition(id, props = {}) {
-    const transition = this.transitions.find((t) => t.id === id);
-    if (!transition) {
-      throw new Error(`Transition with id ${id} not found`);
-    }
-    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.`);
     }
-    const finalProps = {
-      ...baseProps,
-      ...props
-    };
-    return transition.instance.start(finalProps);
+    this.guiService.display(id, props);
   }
   async processInput({ input }) {
     const timestamp = Date.now();
@@ -1050,6 +937,45 @@ class RpgClientEngine {
   getCurrentPlayer() {
     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();
+   * ```
+   */
+  setupOnAfterLoadingObserver() {
+    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(() => {
+        return this.hooks.callHooks("client-sceneMap-onAfterLoading", this.sceneMap);
+      })
+    ).subscribe();
+  }
   /**
    * Clear client prediction states for cleanup
    *