@rpgjs/client 5.0.0-alpha.32 → 5.0.0-alpha.35

package/dist/RpgClientEngine.js

@@ -6,7 +6,7 @@ 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 './node_modules/.pnpm/@signe_sync@2.8.2/node_modules/@signe/sync/dist/index.js';
+import { load } from './node_modules/.pnpm/@signe_sync@2.8.3/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';
@@ -41,6 +41,8 @@ class RpgClientEngine {
     this.predictionEnabled = false;
     this.SERVER_CORRECTION_THRESHOLD = 30;
     this.inputFrameCounter = 0;
+    this.pendingPredictionFrames = [];
+    this.lastClientPhysicsStepAt = 0;
     this.frameOffset = 0;
     // Ping/Pong for RTT measurement
     this.rtt = 0;
@@ -49,6 +51,10 @@ class RpgClientEngine {
     this.PING_INTERVAL_MS = 5e3;
     // Send ping every 5 seconds
     this.lastInputTime = 0;
+    this.MOVE_PATH_RESEND_INTERVAL_MS = 120;
+    this.MAX_MOVE_TRAJECTORY_POINTS = 240;
+    this.lastMovePathSentAt = 0;
+    this.lastMovePathSentFrame = 0;
     // Track map loading state for onAfterLoading hook using RxJS
     this.mapLoadCompleted$ = new BehaviorSubject(false);
     this.playerIdReceived$ = new BehaviorSubject(false);
@@ -125,6 +131,8 @@ class RpgClientEngine {
   }
   async start() {
     this.sceneMap = new RpgClientMap();
+    this.sceneMap.configureClientPrediction(this.predictionEnabled);
+    this.sceneMap.loadPhysic();
     this.selector = document.body.querySelector("#rpg");
     const bootstrapOptions = this.globalConfig?.bootstrapCanvasOptions;
     const { app, canvasElement } = await bootstrapCanvas(
@@ -160,6 +168,9 @@ class RpgClientEngine {
     };
     window.addEventListener("resize", this.resizeHandler);
     const tickSubscription = this.tick.subscribe((tick) => {
+      this.stepClientPhysicsTick();
+      this.flushPendingPredictedStates();
+      this.flushPendingMovePath();
       this.hooks.callHooks("client-engine-onStep", this, tick).subscribe();
       if (tick % 60 === 0) {
         const now = Date.now();
@@ -173,8 +184,45 @@ class RpgClientEngine {
       saveClient.initialize(this.webSocket);
       this.initListeners();
       this.guiService._initialize();
+      this.startPingPong();
     });
   }
+  prepareSyncPayload(data) {
+    const payload = { ...data ?? {} };
+    delete payload.ack;
+    delete payload.timestamp;
+    const myId = this.playerIdSignal();
+    const players = payload.players;
+    const shouldMaskLocalPosition = this.predictionEnabled && !!this.prediction?.hasPendingInputs();
+    if (shouldMaskLocalPosition && myId && players && players[myId]) {
+      const localPatch = { ...players[myId] };
+      delete localPatch.x;
+      delete localPatch.y;
+      delete localPatch.direction;
+      delete localPatch._frames;
+      payload.players = {
+        ...players,
+        [myId]: localPatch
+      };
+    }
+    return payload;
+  }
+  normalizeAckWithSyncState(ack, syncData) {
+    const myId = this.playerIdSignal();
+    if (!myId) {
+      return ack;
+    }
+    const localPatch = syncData?.players?.[myId];
+    if (typeof localPatch?.x !== "number" || typeof localPatch?.y !== "number") {
+      return ack;
+    }
+    return {
+      ...ack,
+      x: localPatch.x,
+      y: localPatch.y,
+      direction: localPatch.direction ?? ack.direction
+    };
+  }
   initListeners() {
     this.webSocket.on("sync", (data) => {
       if (data.pId) {
@@ -183,22 +231,29 @@ class RpgClientEngine {
       }
       if (this.sceneResetQueued) {
         this.sceneMap.reset();
+        this.sceneMap.loadPhysic();
         this.sceneResetQueued = false;
       }
       this.hooks.callHooks("client-sceneMap-onChanges", this.sceneMap, { partial: data }).subscribe();
-      load(this.sceneMap, data, true);
-      for (const playerId in data.players ?? {}) {
-        const player = data.players[playerId];
+      const ack = data?.ack;
+      const normalizedAck = ack && typeof ack.frame === "number" ? this.normalizeAckWithSyncState(ack, data) : void 0;
+      const payload = this.prepareSyncPayload(data);
+      load(this.sceneMap, payload, true);
+      if (normalizedAck) {
+        this.applyServerAck(normalizedAck);
+      }
+      for (const playerId in payload.players ?? {}) {
+        const player = payload.players[playerId];
         if (!player._param) continue;
         for (const param in player._param) {
           this.sceneMap.players()[playerId]._param()[param] = player._param[param];
         }
       }
-      const players = data.players || this.sceneMap.players();
+      const players = payload.players || this.sceneMap.players();
       if (players && Object.keys(players).length > 0) {
         this.playersReceived$.next(true);
       }
-      const events = data.events || this.sceneMap.events();
+      const events = payload.events || this.sceneMap.events();
       if (events !== void 0) {
         this.eventsReceived$.next(true);
       }
@@ -216,7 +271,8 @@ class RpgClientEngine {
     this.webSocket.on("changeMap", (data) => {
       this.sceneResetQueued = true;
       this.cameraFollowTargetId.set(null);
-      this.loadScene(data.mapId);
+      const transferToken = typeof data?.transferToken === "string" ? data.transferToken : void 0;
+      this.loadScene(data.mapId, transferToken);
     });
     this.webSocket.on("showComponentAnimation", (data) => {
       const { params, object, position, id } = data;
@@ -269,8 +325,29 @@ class RpgClientEngine {
         direction
       });
     });
+    this.webSocket.on("weatherState", (data) => {
+      const raw = data && typeof data === "object" && "value" in data ? data.value : data;
+      if (raw === null) {
+        this.sceneMap.weatherState.set(null);
+        return;
+      }
+      const validEffects = ["rain", "snow", "fog", "cloud"];
+      if (!raw || !validEffects.includes(raw.effect)) {
+        return;
+      }
+      this.sceneMap.weatherState.set({
+        effect: raw.effect,
+        preset: raw.preset,
+        params: raw.params,
+        transitionMs: raw.transitionMs,
+        durationMs: raw.durationMs,
+        startedAt: raw.startedAt,
+        seed: raw.seed
+      });
+    });
     this.webSocket.on("open", () => {
       this.hooks.callHooks("client-engine-onConnected", this, this.socket).subscribe();
+      this.startPingPong();
     });
     this.webSocket.on("close", () => {
       this.hooks.callHooks("client-engine-onDisconnected", this, this.socket).subscribe();
@@ -343,7 +420,7 @@ class RpgClientEngine {
       clientFrame
     });
   }
-  async loadScene(mapId) {
+  async loadScene(mapId, transferToken) {
     await lastValueFrom(this.hooks.callHooks("client-sceneMap-onBeforeLoading", this.sceneMap));
     this.clearClientPredictionStates();
     this.mapLoadCompleted$.next(false);
@@ -354,7 +431,10 @@ class RpgClientEngine {
       this.onAfterLoadingSubscription.unsubscribe();
     }
     this.setupOnAfterLoadingObserver();
-    this.webSocket.updateProperties({ room: mapId });
+    this.webSocket.updateProperties({
+      room: mapId,
+      query: transferToken ? { transferToken } : void 0
+    });
     await this.webSocket.reconnect(() => {
       const saveClient = inject(SaveClientService);
       saveClient.initialize(this.webSocket);
@@ -375,6 +455,7 @@ class RpgClientEngine {
       this.eventsReceived$.next(true);
     }
     this.mapLoadCompleted$.next(true);
+    this.sceneMap.configureClientPrediction(this.predictionEnabled);
     this.sceneMap.loadPhysic();
   }
   addSpriteSheet(spritesheetClass, id) {
@@ -899,19 +980,22 @@ class RpgClientEngine {
       frame = ++this.inputFrameCounter;
       tick = this.getPhysicsTick();
     }
+    this.inputFrameCounter = frame;
     this.hooks.callHooks("client-engine-onInput", this, { input, playerId: this.playerId }).subscribe();
-    this.webSocket.emit("move", {
-      input,
-      timestamp,
-      frame,
-      tick
-    });
     const currentPlayer = this.sceneMap.getCurrentPlayer();
-    if (currentPlayer) {
+    const bodyReady = this.ensureCurrentPlayerBody();
+    if (currentPlayer && bodyReady) {
+      currentPlayer.changeDirection(input);
       this.sceneMap.moveBody(currentPlayer, input);
+      if (this.predictionEnabled && this.prediction) {
+        this.pendingPredictionFrames.push(frame);
+        if (this.pendingPredictionFrames.length > 240) {
+          this.pendingPredictionFrames = this.pendingPredictionFrames.slice(-240);
+        }
+      }
     }
+    this.emitMovePacket(input, frame, tick, timestamp, true);
     this.lastInputTime = Date.now();
-    this.playerIdSignal();
   }
   processAction({ action }) {
     if (this.stopProcessingInput) return;
@@ -933,6 +1017,110 @@ class RpgClientEngine {
   getPhysicsTick() {
     return this.sceneMap?.getTick?.() ?? 0;
   }
+  ensureCurrentPlayerBody() {
+    const player = this.sceneMap?.getCurrentPlayer();
+    const myId = this.playerIdSignal();
+    if (!player || !myId) {
+      return false;
+    }
+    if (!player.id) {
+      player.id = myId;
+    }
+    if (this.sceneMap.getBody(myId)) {
+      return true;
+    }
+    try {
+      this.sceneMap.loadPhysic();
+    } catch (error) {
+      console.error("[RPGJS] Unable to initialize client physics before input:", error);
+      return false;
+    }
+    return !!this.sceneMap.getBody(myId);
+  }
+  stepClientPhysicsTick() {
+    if (!this.predictionEnabled || !this.sceneMap) {
+      return;
+    }
+    const now = Date.now();
+    if (this.lastClientPhysicsStepAt === 0) {
+      this.lastClientPhysicsStepAt = now;
+    }
+    const deltaMs = Math.max(1, Math.min(100, now - this.lastClientPhysicsStepAt));
+    this.lastClientPhysicsStepAt = now;
+    this.sceneMap.stepClientPhysics(deltaMs);
+  }
+  flushPendingPredictedStates() {
+    if (!this.predictionEnabled || !this.prediction || this.pendingPredictionFrames.length === 0) {
+      return;
+    }
+    const state = this.getLocalPlayerState();
+    while (this.pendingPredictionFrames.length > 0) {
+      const frame = this.pendingPredictionFrames.shift();
+      if (typeof frame === "number") {
+        this.prediction.attachPredictedState(frame, state);
+      }
+    }
+  }
+  buildPendingMoveTrajectory() {
+    if (!this.predictionEnabled || !this.prediction) {
+      return [];
+    }
+    const pendingInputs = this.prediction.getPendingInputs();
+    const trajectory = [];
+    for (const entry of pendingInputs) {
+      const state = entry.state;
+      if (!state) continue;
+      if (typeof state.x !== "number" || typeof state.y !== "number") continue;
+      trajectory.push({
+        frame: entry.frame,
+        tick: entry.tick,
+        timestamp: entry.timestamp,
+        input: entry.direction,
+        x: state.x,
+        y: state.y,
+        direction: state.direction ?? entry.direction
+      });
+    }
+    if (trajectory.length > this.MAX_MOVE_TRAJECTORY_POINTS) {
+      return trajectory.slice(-this.MAX_MOVE_TRAJECTORY_POINTS);
+    }
+    return trajectory;
+  }
+  emitMovePacket(input, frame, tick, timestamp, force = false) {
+    const trajectory = this.buildPendingMoveTrajectory();
+    const latestTrajectoryFrame = trajectory.length > 0 ? trajectory[trajectory.length - 1].frame : frame;
+    const shouldThrottle = !force && latestTrajectoryFrame <= this.lastMovePathSentFrame && timestamp - this.lastMovePathSentAt < this.MOVE_PATH_RESEND_INTERVAL_MS;
+    if (shouldThrottle) {
+      return;
+    }
+    this.webSocket.emit("move", {
+      input,
+      timestamp,
+      frame,
+      tick,
+      trajectory
+    });
+    this.lastMovePathSentAt = timestamp;
+    this.lastMovePathSentFrame = Math.max(this.lastMovePathSentFrame, latestTrajectoryFrame, frame);
+  }
+  flushPendingMovePath() {
+    if (!this.predictionEnabled || !this.prediction) {
+      return;
+    }
+    const pendingInputs = this.prediction.getPendingInputs();
+    if (pendingInputs.length === 0) {
+      return;
+    }
+    const latest = pendingInputs[pendingInputs.length - 1];
+    if (!latest) {
+      return;
+    }
+    const now = Date.now();
+    if (now - this.lastMovePathSentAt < this.MOVE_PATH_RESEND_INTERVAL_MS) {
+      return;
+    }
+    this.emitMovePacket(latest.direction, latest.frame, latest.tick, now, false);
+  }
   getLocalPlayerState() {
     const currentPlayer = this.sceneMap?.getCurrentPlayer();
     if (!currentPlayer) {
@@ -963,11 +1151,18 @@ class RpgClientEngine {
   initializePredictionController() {
     if (!this.predictionEnabled) {
       this.prediction = void 0;
+      this.sceneMap?.configureClientPrediction?.(false);
       return;
     }
+    const configuredTtl = this.globalConfig?.prediction?.historyTtlMs;
+    const historyTtlMs = typeof configuredTtl === "number" ? configuredTtl : 1e4;
+    const configuredMaxEntries = this.globalConfig?.prediction?.maxHistoryEntries;
+    const maxHistoryEntries = typeof configuredMaxEntries === "number" ? configuredMaxEntries : Math.max(600, Math.ceil(historyTtlMs / 16) + 120);
+    this.sceneMap?.configureClientPrediction?.(true);
     this.prediction = new PredictionController({
       correctionThreshold: this.globalConfig?.prediction?.correctionThreshold ?? this.SERVER_CORRECTION_THRESHOLD,
-      historyTtlMs: this.globalConfig?.prediction?.historyTtlMs ?? 2e3,
+      historyTtlMs,
+      maxHistoryEntries,
       getPhysicsTick: () => this.getPhysicsTick(),
       getCurrentState: () => this.getLocalPlayerState(),
       setAuthoritativeState: (state) => this.applyAuthoritativeState(state)
@@ -1031,6 +1226,10 @@ class RpgClientEngine {
     this.initializePredictionController();
     this.frameOffset = 0;
     this.inputFrameCounter = 0;
+    this.pendingPredictionFrames = [];
+    this.lastClientPhysicsStepAt = 0;
+    this.lastMovePathSentAt = 0;
+    this.lastMovePathSentFrame = 0;
   }
   /**
    * Trigger a flash animation on a sprite
@@ -1089,11 +1288,14 @@ class RpgClientEngine {
   }
   applyServerAck(ack) {
     if (this.predictionEnabled && this.prediction) {
-      this.prediction.applyServerAck({
+      const result = this.prediction.applyServerAck({
         frame: ack.frame,
         serverTick: ack.serverTick,
         state: typeof ack.x === "number" && typeof ack.y === "number" ? { x: ack.x, y: ack.y, direction: ack.direction } : void 0
       });
+      if (result.state && result.needsReconciliation) {
+        this.reconcilePrediction(result.state, result.pendingInputs);
+      }
       return;
     }
     if (typeof ack.x !== "number" || typeof ack.y !== "number") {
@@ -1117,6 +1319,24 @@ class RpgClientEngine {
       player.changeDirection(ack.direction);
     }
   }
+  reconcilePrediction(authoritativeState, pendingInputs) {
+    const player = this.getCurrentPlayer();
+    if (!player) {
+      return;
+    }
+    this.sceneMap.stopMovement(player);
+    this.applyAuthoritativeState(authoritativeState);
+    if (!pendingInputs.length) {
+      return;
+    }
+    const replayInputs = pendingInputs.slice(-600);
+    for (const entry of replayInputs) {
+      if (!entry?.direction) continue;
+      this.sceneMap.moveBody(player, entry.direction);
+      this.sceneMap.stepPredictionTick();
+      this.prediction?.attachPredictedState(entry.frame, this.getLocalPlayerState());
+    }
+  }
   /**
    * Replay unacknowledged inputs from a given frame to resimulate client prediction
    * after applying server authority at a certain frame.
@@ -1248,6 +1468,8 @@ class RpgClientEngine {
       this.inputFrameCounter = 0;
       this.frameOffset = 0;
       this.rtt = 0;
+      this.lastMovePathSentAt = 0;
+      this.lastMovePathSentFrame = 0;
       this.mapLoadCompleted$.next(false);
       this.playerIdReceived$.next(false);
       this.playersReceived$.next(false);