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

package/dist/{index2.js → RpgClientEngine.js}

@@ -1,20 +1,19 @@
-import component from './index26.js';
-import { inject } from './index6.js';
+import component from './components/scenes/canvas.ce.js';
+import { inject } from './core/inject.js';
 import { signal, trigger, bootstrapCanvas, Howl } from 'canvasengine';
-import { WebSocketToken } from './index27.js';
-import { LoadMapToken } from './index7.js';
-import { RpgSound } from './index18.js';
-import { RpgResource } from './index19.js';
+import { WebSocketToken } from './services/AbstractSocket.js';
+import { LoadMapToken } from './services/loadMap.js';
+import { RpgSound } from './Sound.js';
+import { RpgResource } from './Resource.js';
 import { Direction, PredictionController, ModulesToken } from '@rpgjs/common';
-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 { GlobalConfigToken } from './index8.js';
+import { load } from './node_modules/.pnpm/@signe_sync@2.6.0/node_modules/@signe/sync/dist/index.js';
+import { RpgClientMap } from './Game/Map.js';
+import { RpgGui } from './Gui/Gui.js';
+import { AnimationManager } from './Game/AnimationManager.js';
+import { BehaviorSubject, lastValueFrom, combineLatest, filter, take, switchMap } from 'rxjs';
+import { GlobalConfigToken } from './module.js';
 import * as PIXI from 'pixi.js';
-import { PrebuiltComponentAnimations } from './index12.js';
+import { PrebuiltComponentAnimations } from './components/animations/index.js';
 
 class RpgClientEngine {
   constructor(context) {
@@ -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,13 @@ 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);
+    // Store subscriptions and event listeners for cleanup
+    this.tickSubscriptions = [];
     this.webSocket = inject(WebSocketToken);
     this.guiService = inject(RpgGui);
     this.loadMapService = inject(LoadMapToken);
@@ -110,20 +116,24 @@ class RpgClientEngine {
       ...currentValues,
       values: /* @__PURE__ */ new Map([["__default__", controlInstance]])
     };
+    this.controlsReady.set(void 0);
   }
   async start() {
     this.sceneMap = new RpgClientMap();
     this.selector = document.body.querySelector("#rpg");
     const { app, canvasElement } = await bootstrapCanvas(this.selector, component);
+    this.canvasApp = app;
+    this.canvasElement = canvasElement;
     this.renderer = app.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.stopMovement(player);
       }
     });
+    this.tickSubscriptions.push(inputCheckSubscription);
     this.hooks.callHooks("client-spritesheets-load", this).subscribe();
     this.hooks.callHooks("client-spritesheetResolver-load", this).subscribe();
     this.hooks.callHooks("client-sounds-load", this).subscribe();
@@ -133,13 +143,13 @@ 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", () => {
+    this.resizeHandler = () => {
       this.hooks.callHooks("client-engine-onWindowResize", this).subscribe();
-    });
-    this.tick.subscribe((tick) => {
+    };
+    window.addEventListener("resize", this.resizeHandler);
+    const tickSubscription = this.tick.subscribe((tick) => {
       this.hooks.callHooks("client-engine-onStep", this, tick).subscribe();
       if (tick % 60 === 0) {
         const now = Date.now();
@@ -147,6 +157,7 @@ class RpgClientEngine {
         this.prediction?.tryApplyPendingSnapshot();
       }
     });
+    this.tickSubscriptions.push(tickSubscription);
     await this.webSocket.connection(() => {
       this.initListeners();
       this.guiService._initialize();
@@ -154,9 +165,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 +314,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 +331,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 +829,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 +850,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 +944,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
    * 
@@ -1166,7 +1099,132 @@ class RpgClientEngine {
    */
   async replayUnackedInputsFromFrame(_startFrame) {
   }
+  /**
+   * 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() {
+    try {
+      for (const subscription of this.tickSubscriptions) {
+        if (subscription && typeof subscription.unsubscribe === "function") {
+          subscription.unsubscribe();
+        }
+      }
+      this.tickSubscriptions = [];
+      if (this.pingInterval) {
+        clearInterval(this.pingInterval);
+        this.pingInterval = null;
+      }
+      if (this.onAfterLoadingSubscription && typeof this.onAfterLoadingSubscription.unsubscribe === "function") {
+        this.onAfterLoadingSubscription.unsubscribe();
+        this.onAfterLoadingSubscription = void 0;
+      }
+      if (this.canvasElement) {
+        try {
+          if (typeof this.canvasElement.destroy === "function") {
+            this.canvasElement.destroy();
+          }
+          this.canvasElement = void 0;
+        } catch (error) {
+        }
+      }
+      if (this.sceneMap && typeof this.sceneMap.reset === "function") {
+        this.sceneMap.reset();
+      }
+      this.stopAllSounds();
+      if (this.resizeHandler && typeof window !== "undefined") {
+        window.removeEventListener("resize", this.resizeHandler);
+        this.resizeHandler = void 0;
+      }
+      const rendererStillExists = this.renderer && typeof this.renderer.destroy === "function";
+      if (this.canvasApp && typeof this.canvasApp.destroy === "function") {
+        try {
+          if (this.canvasApp.ticker) {
+            if (typeof this.canvasApp.ticker.stop === "function") {
+              this.canvasApp.ticker.stop();
+            }
+            if (typeof this.canvasApp.ticker.removeAll === "function") {
+              this.canvasApp.ticker.removeAll();
+            }
+          }
+          if (this.renderer && this.renderer.ticker) {
+            if (typeof this.renderer.ticker.stop === "function") {
+              this.renderer.ticker.stop();
+            }
+            if (typeof this.renderer.ticker.removeAll === "function") {
+              this.renderer.ticker.removeAll();
+            }
+          }
+          if (this.canvasApp.canvas && this.canvasApp.canvas.parentNode) {
+            this.canvasApp.canvas.parentNode.removeChild(this.canvasApp.canvas);
+          }
+          this.canvasApp.destroy(true);
+        } catch (error) {
+        }
+        this.canvasApp = void 0;
+        this.renderer = null;
+      } else if (rendererStillExists) {
+        try {
+          if (this.renderer.ticker) {
+            if (typeof this.renderer.ticker.stop === "function") {
+              this.renderer.ticker.stop();
+            }
+            if (typeof this.renderer.ticker.removeAll === "function") {
+              this.renderer.ticker.removeAll();
+            }
+          }
+          this.renderer.destroy(true);
+        } catch (error) {
+        }
+        this.renderer = null;
+      }
+      if (this.prediction) {
+        this.prediction = void 0;
+      }
+      this.playerIdSignal.set(null);
+      this.cameraFollowTargetId.set(null);
+      this.spriteComponentsBehind.set([]);
+      this.spriteComponentsInFront.set([]);
+      this.spritesheets.clear();
+      this.sounds.clear();
+      this.componentAnimations = [];
+      this.particleSettings.emitters = [];
+      this.stopProcessingInput = false;
+      this.lastInputTime = 0;
+      this.inputFrameCounter = 0;
+      this.frameOffset = 0;
+      this.rtt = 0;
+      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);
+    }
+  }
 }
 
 export { RpgClientEngine };
-//# sourceMappingURL=index2.js.map
+//# sourceMappingURL=RpgClientEngine.js.map