@rpgjs/client 5.0.0-alpha.33 → 5.0.0-alpha.36

package/dist/Game/Map.d.ts

@@ -1,4 +1,4 @@
-import { RpgCommonMap } from '@rpgjs/common';
+import { RpgCommonMap, WeatherState } from '@rpgjs/common';
 import { RpgClientPlayer } from './Player';
 import { RpgClientEvent } from './Event';
 import { RpgClientEngine } from '../RpgClientEngine';
@@ -7,8 +7,18 @@ export declare class RpgClientMap extends RpgCommonMap<any> {
     players: import('canvasengine').WritableObjectSignal<Record<string, RpgClientPlayer>>;
     events: import('canvasengine').WritableObjectSignal<Record<string, RpgClientEvent>>;
     currentPlayer: import('canvasengine').ComputedSignal<RpgClientPlayer>;
+    weatherState: import('canvasengine').WritableSignal<WeatherState | null>;
+    localWeatherOverride: import('canvasengine').WritableSignal<WeatherState | null>;
+    weather: import('canvasengine').ComputedSignal<WeatherState | null>;
+    private manualClientPhysicsTick;
+    private readonly isTestEnvironment;
     constructor();
+    configureClientPrediction(enabled: boolean): void;
     getCurrentPlayer(): RpgClientPlayer;
     reset(force?: boolean): void;
+    getWeather(): WeatherState | null;
+    setLocalWeather(next: WeatherState | null): void;
+    clearLocalWeather(): void;
+    stepClientPhysics(deltaMs: number): number;
     stepPredictionTick(): void;
 }

package/dist/Game/Map.js

@@ -22,11 +22,24 @@ class RpgClientMap extends RpgCommonMap {
     this.players = signal({});
     this.events = signal({});
     this.currentPlayer = computed(() => this.players()[this.engine.playerIdSignal()]);
+    this.weatherState = signal(null);
+    this.localWeatherOverride = signal(null);
+    this.weather = computed(() => {
+      const local = this.localWeatherOverride();
+      const state = this.weatherState();
+      return local ?? state;
+    });
+    this.manualClientPhysicsTick = false;
     const isTest = typeof process !== "undefined" && process.env?.TEST === "true" || typeof window !== "undefined" && window.__RPGJS_TEST__ === true;
+    this.isTestEnvironment = isTest;
     if (isTest) {
       this.autoTickEnabled = false;
     }
   }
+  configureClientPrediction(enabled) {
+    this.manualClientPhysicsTick = enabled;
+    this.autoTickEnabled = enabled ? false : !this.isTestEnvironment;
+  }
   getCurrentPlayer() {
     return this.currentPlayer();
   }
@@ -37,8 +50,25 @@ class RpgClientMap extends RpgCommonMap {
       currentPlayerId && currentPlayer ? { [currentPlayerId]: currentPlayer } : {}
     );
     this.events.set({});
+    this.weatherState.set(null);
+    this.localWeatherOverride.set(null);
     this.clearPhysic();
   }
+  getWeather() {
+    return this.weather();
+  }
+  setLocalWeather(next) {
+    this.localWeatherOverride.set(next);
+  }
+  clearLocalWeather() {
+    this.localWeatherOverride.set(null);
+  }
+  stepClientPhysics(deltaMs) {
+    if (!this.manualClientPhysicsTick) {
+      return 0;
+    }
+    return this.nextTick(deltaMs);
+  }
   stepPredictionTick() {
     this.forceSingleTick();
   }

package/dist/Game/Map.js.map

@@ -1 +1 @@
-{"version":3,"file":"Map.js","sources":["../../src/Game/Map.ts"],"sourcesContent":["import { RpgCommonMap } from \"@rpgjs/common\";\nimport { sync, users } from \"@signe/sync\";\nimport { RpgClientPlayer } from \"./Player\";\nimport { Signal, signal, computed, effect } from \"canvasengine\";\nimport { RpgClientEvent } from \"./Event\";\nimport { RpgClientEngine } from \"../RpgClientEngine\";\nimport { inject } from \"../core/inject\";\n\nexport class RpgClientMap extends RpgCommonMap<any> {\n  engine: RpgClientEngine = inject(RpgClientEngine)\n  @users(RpgClientPlayer) players = signal<Record<string, RpgClientPlayer>>({});\n  @sync(RpgClientEvent) events = signal<Record<string, RpgClientEvent>>({});\n  currentPlayer = computed(() => this.players()[this.engine.playerIdSignal()!])\n\n  constructor() {\n    super();\n    // Détecter l'environnement de test\n    const isTest = (typeof process !== 'undefined' && process.env?.TEST === 'true') \n      || (typeof window !== 'undefined' && (window as any).__RPGJS_TEST__ === true);\n    if (isTest) {\n      this.autoTickEnabled = false;\n    }\n  }\n\n  getCurrentPlayer() {\n    return this.currentPlayer()\n  }\n\n  reset(force = false) {\n    const currentPlayerId = this.engine.playerIdSignal();\n    const currentPlayer = !force && currentPlayerId\n      ? this.players()[currentPlayerId]\n      : undefined;\n\n    this.players.set(\n      currentPlayerId && currentPlayer ? { [currentPlayerId]: currentPlayer } : {}\n    );\n    this.events.set({})\n    this.clearPhysic()\n  }\n\n  stepPredictionTick(): void {\n    this.forceSingleTick();\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAQO,MAAM,qBAAqB,YAAA,CAAkB;AAAA,EAMlD,WAAA,GAAc;AACZ,IAAA,KAAA,EAAM;AANR,IAAA,IAAA,CAAA,MAAA,GAA0B,OAAO,eAAe,CAAA;AACxB,IAAA,IAAA,CAAA,OAAA,GAAU,MAAA,CAAwC,EAAE,CAAA;AACtD,IAAA,IAAA,CAAA,MAAA,GAAS,MAAA,CAAuC,EAAE,CAAA;AACxE,IAAA,IAAA,CAAA,aAAA,GAAgB,QAAA,CAAS,MAAM,IAAA,CAAK,OAAA,GAAU,IAAA,CAAK,MAAA,CAAO,cAAA,EAAiB,CAAC,CAAA;AAK1E,IAAA,MAAM,MAAA,GAAU,OAAO,OAAA,KAAY,WAAA,IAAe,OAAA,CAAQ,GAAA,EAAK,IAAA,KAAS,MAAA,IAClE,OAAO,MAAA,KAAW,WAAA,IAAgB,MAAA,CAAe,cAAA,KAAmB,IAAA;AAC1E,IAAA,IAAI,MAAA,EAAQ;AACV,MAAA,IAAA,CAAK,eAAA,GAAkB,KAAA;AAAA,IACzB;AAAA,EACF;AAAA,EAEA,gBAAA,GAAmB;AACjB,IAAA,OAAO,KAAK,aAAA,EAAc;AAAA,EAC5B;AAAA,EAEA,KAAA,CAAM,QAAQ,KAAA,EAAO;AACnB,IAAA,MAAM,eAAA,GAAkB,IAAA,CAAK,MAAA,CAAO,cAAA,EAAe;AACnD,IAAA,MAAM,aAAA,GAAgB,CAAC,KAAA,IAAS,eAAA,GAC5B,KAAK,OAAA,EAAQ,CAAE,eAAe,CAAA,GAC9B,MAAA;AAEJ,IAAA,IAAA,CAAK,OAAA,CAAQ,GAAA;AAAA,MACX,eAAA,IAAmB,gBAAgB,EAAE,CAAC,eAAe,GAAG,aAAA,KAAkB;AAAC,KAC7E;AACA,IAAA,IAAA,CAAK,MAAA,CAAO,GAAA,CAAI,EAAE,CAAA;AAClB,IAAA,IAAA,CAAK,WAAA,EAAY;AAAA,EACnB;AAAA,EAEA,kBAAA,GAA2B;AACzB,IAAA,IAAA,CAAK,eAAA,EAAgB;AAAA,EACvB;AACF;AAlC0B,eAAA,CAAA;AAAA,EAAvB,MAAM,eAAe;AAAA,CAAA,EAFX,YAAA,CAEa,SAAA,EAAA,SAAA,CAAA;AACF,eAAA,CAAA;AAAA,EAArB,KAAK,cAAc;AAAA,CAAA,EAHT,YAAA,CAGW,SAAA,EAAA,QAAA,CAAA;;;;"}
+{"version":3,"file":"Map.js","sources":["../../src/Game/Map.ts"],"sourcesContent":["import { RpgCommonMap, type WeatherState } from \"@rpgjs/common\";\nimport { sync, users } from \"@signe/sync\";\nimport { RpgClientPlayer } from \"./Player\";\nimport { Signal, signal, computed, effect } from \"canvasengine\";\nimport { RpgClientEvent } from \"./Event\";\nimport { RpgClientEngine } from \"../RpgClientEngine\";\nimport { inject } from \"../core/inject\";\n\nexport class RpgClientMap extends RpgCommonMap<any> {\n  engine: RpgClientEngine = inject(RpgClientEngine)\n  @users(RpgClientPlayer) players = signal<Record<string, RpgClientPlayer>>({});\n  @sync(RpgClientEvent) events = signal<Record<string, RpgClientEvent>>({});\n  currentPlayer = computed(() => this.players()[this.engine.playerIdSignal()!])\n  weatherState = signal<WeatherState | null>(null);\n  localWeatherOverride = signal<WeatherState | null>(null);\n  weather = computed<WeatherState | null>(() => {\n    const local = this.localWeatherOverride() \n    const state = this.weatherState()\n    return local ?? state\n  });\n  private manualClientPhysicsTick = false;\n  private readonly isTestEnvironment: boolean;\n\n  constructor() {\n    super();\n    // Détecter l'environnement de test\n    const isTest = (typeof process !== 'undefined' && process.env?.TEST === 'true')\n      || (typeof window !== 'undefined' && (window as any).__RPGJS_TEST__ === true);\n    this.isTestEnvironment = isTest;\n    if (isTest) {\n      this.autoTickEnabled = false;\n    }\n  }\n\n  configureClientPrediction(enabled: boolean): void {\n    this.manualClientPhysicsTick = enabled;\n    this.autoTickEnabled = enabled ? false : !this.isTestEnvironment;\n  }\n\n  getCurrentPlayer() {\n    return this.currentPlayer()\n  }\n\n  reset(force = false) {\n    const currentPlayerId = this.engine.playerIdSignal();\n    const currentPlayer = !force && currentPlayerId\n      ? this.players()[currentPlayerId]\n      : undefined;\n\n    this.players.set(\n      currentPlayerId && currentPlayer ? { [currentPlayerId]: currentPlayer } : {}\n    );\n    this.events.set({})\n    this.weatherState.set(null);\n    this.localWeatherOverride.set(null);\n    this.clearPhysic()\n  }\n\n  getWeather(): WeatherState | null {\n    return this.weather();\n  }\n\n  setLocalWeather(next: WeatherState | null): void {\n    this.localWeatherOverride.set(next);\n  }\n\n  clearLocalWeather(): void {\n    this.localWeatherOverride.set(null);\n  }\n\n  stepClientPhysics(deltaMs: number): number {\n    if (!this.manualClientPhysicsTick) {\n      return 0;\n    }\n    return this.nextTick(deltaMs);\n  }\n\n  stepPredictionTick(): void {\n    this.forceSingleTick();\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/Game/Object.js

@@ -51,7 +51,7 @@ class RpgClientObject extends RpgCommonPlayer {
     this.engine.tick.pipe().subscribe(() => {
       const frame = this.frames.shift();
       if (frame) {
-        if (!frame.x || !frame.y) return;
+        if (typeof frame.x !== "number" || typeof frame.y !== "number") return;
         this.engine.scene.setBodyPosition(
           this.id,
           frame.x,

package/dist/Game/Object.js.map

@@ -1 +1 @@
-{"version":3,"file":"Object.js","sources":["../../src/Game/Object.ts"],"sourcesContent":["import { Hooks, ModulesToken, RpgCommonPlayer } from \"@rpgjs/common\";\nimport { trigger, signal, effect } from \"canvasengine\";\nimport { filter, from, map, Subscription, switchMap } from \"rxjs\";\nimport { inject } from \"../core/inject\";\nimport { RpgClientEngine } from \"../RpgClientEngine\";\nimport TextComponent from \"../components/dynamics/text.ce\";\n\nconst DYNAMIC_COMPONENTS = {\n  text: TextComponent,\n}\n\nexport abstract class RpgClientObject extends RpgCommonPlayer {\n  abstract type: string;\n  emitParticleTrigger = trigger();\n  particleName = signal(\"\");\n  animationCurrentIndex = signal(0);\n  animationIsPlaying = signal(false);\n  _param = signal({});\n  frames: { x: number; y: number; ts: number }[] = [];\n  graphicsSignals = signal<any[]>([]);\n  _component = {} // temporary component memory\n  flashTrigger = trigger();\n\n  constructor() {\n    super();\n    this.hooks.callHooks(\"client-sprite-onInit\", this).subscribe();\n\n    this._frames.observable.subscribe(({ items }) => {\n      if (!this.id) return;\n      //if (this.id == this.engine.playerIdSignal()!) return;\n      this.frames = [...this.frames, ...items];\n    });\n\n    this.graphics.observable\n    .pipe(\n      map(({ items }) => items),\n      filter(graphics => graphics.length > 0),\n      switchMap(graphics => from(Promise.all(graphics.map(graphic => this.engine.getSpriteSheet(graphic)))))\n    )\n    .subscribe((sheets) => {  \n      this.graphicsSignals.set(sheets);\n    });\n\n    this.componentsTop.observable\n    .pipe(\n      filter(value => value !== null && value !== undefined),\n      map((value) => typeof value === 'string' ? JSON.parse(value) : value),\n    )\n    .subscribe(({components}) => {\n      for (const component of components) {\n        for (const [key, value] of Object.entries(component)) {\n          this._component = value as any; // temporary component memory\n          console.log(value)\n          const type = (value as any).type as keyof typeof DYNAMIC_COMPONENTS;\n          if (DYNAMIC_COMPONENTS[type]) {\n            this.engine.addSpriteComponentInFront(DYNAMIC_COMPONENTS[type]);\n          }\n        }\n      }\n    });\n\n    this.engine.tick\n      .pipe\n      //throttleTime(10)\n      ()\n      .subscribe(() => {\n        const frame = this.frames.shift();\n        if (frame) {\n          if (!frame.x || !frame.y) return;\n          this.engine.scene.setBodyPosition(\n            this.id,\n            frame.x,\n            frame.y,\n            \"top-left\"\n          );\n        }\n      });\n  }\n\n  get hooks() {\n    return inject<Hooks>(ModulesToken);\n  }\n\n  get engine() {\n    return inject(RpgClientEngine);\n  }\n\n  private animationSubscription?: Subscription;\n\n  /**\n   * Trigger a flash animation on this sprite\n   * \n   * This method triggers a flash effect using CanvasEngine's flash directive.\n   * The flash can be configured with various options including type (alpha, tint, or both),\n   * duration, cycles, and color.\n   * \n   * ## Design\n   * \n   * The flash uses a trigger system that is connected to the flash directive in the\n   * character component. This allows for flexible configuration and can be triggered\n   * from both server events and client-side code.\n   * \n   * @param options - Flash configuration options\n   * @param options.type - Type of flash effect: 'alpha' (opacity), 'tint' (color), or 'both' (default: 'alpha')\n   * @param options.duration - Duration of the flash animation in milliseconds (default: 300)\n   * @param options.cycles - Number of flash cycles (flash on/off) (default: 1)\n   * @param options.alpha - Alpha value when flashing, from 0 to 1 (default: 0.3)\n   * @param options.tint - Tint color when flashing as hex value or color name (default: 0xffffff - white)\n   * \n   * @example\n   * ```ts\n   * // Simple flash with default settings (alpha flash)\n   * player.flash();\n   * \n   * // Flash with red tint\n   * player.flash({ type: 'tint', tint: 0xff0000 });\n   * \n   * // Flash with both alpha and tint\n   * player.flash({ \n   *   type: 'both', \n   *   alpha: 0.5, \n   *   tint: 0xff0000,\n   *   duration: 200,\n   *   cycles: 2\n   * });\n   * \n   * // Quick damage flash\n   * player.flash({ \n   *   type: 'tint', \n   *   tint: 0xff0000, \n   *   duration: 150,\n   *   cycles: 1\n   * });\n   * ```\n   */\n  flash(options?: {\n    type?: 'alpha' | 'tint' | 'both';\n    duration?: number;\n    cycles?: number;\n    alpha?: number;\n    tint?: number | string;\n  }): void {\n    const flashOptions = {\n      type: options?.type || 'alpha',\n      duration: options?.duration ?? 300,\n      cycles: options?.cycles ?? 1,\n      alpha: options?.alpha ?? 0.3,\n      tint: options?.tint ?? 0xffffff,\n    };\n    \n    // Convert color name to hex if needed\n    let tintValue = flashOptions.tint;\n    if (typeof tintValue === 'string') {\n      // Common color name to hex mapping\n      const colorMap: Record<string, number> = {\n        'white': 0xffffff,\n        'red': 0xff0000,\n        'green': 0x00ff00,\n        'blue': 0x0000ff,\n        'yellow': 0xffff00,\n        'cyan': 0x00ffff,\n        'magenta': 0xff00ff,\n        'black': 0x000000,\n      };\n      tintValue = colorMap[tintValue.toLowerCase()] ?? 0xffffff;\n    }\n    \n    this.flashTrigger.start({\n      ...flashOptions,\n      tint: tintValue,\n    });\n  }\n\n  /**\n   * Reset animation state when animation changes externally\n   *\n   * This method should be called when the animation changes due to movement\n   * or other external factors to ensure the animation system doesn't get stuck\n   *\n   * @example\n   * ```ts\n   * // Reset when player starts moving\n   * player.resetAnimationState();\n   * ```\n   */\n  resetAnimationState() {\n    this.animationIsPlaying.set(false);\n    this.animationCurrentIndex.set(0);\n    if (this.animationSubscription) {\n      this.animationSubscription.unsubscribe();\n      this.animationSubscription = undefined;\n    }\n  }\n\n  /**\n   * Set a custom animation for a specific number of times\n   *\n   * Plays a custom animation for the specified number of repetitions.\n   * The animation system prevents overlapping animations and automatically\n   * returns to the previous animation when complete.\n   *\n   * @param animationName - Name of the animation to play\n   * @param nbTimes - Number of times to repeat the animation (default: Infinity for continuous)\n   *\n   * @example\n   * ```ts\n   * // Play attack animation 3 times\n   * player.setAnimation('attack', 3);\n   *\n   * // Play continuous spell animation\n   * player.setAnimation('spell');\n   * ```\n   */\n  setAnimation(animationName: string, nbTimes?: number): void;\n  /**\n   * Set a custom animation with temporary graphic change\n   *\n   * Plays a custom animation for the specified number of repetitions and temporarily\n   * changes the player's graphic (sprite sheet) during the animation. The graphic\n   * is automatically reset when the animation finishes.\n   *\n   * @param animationName - Name of the animation to play\n   * @param graphic - The graphic(s) to temporarily use during the animation\n   * @param nbTimes - Number of times to repeat the animation (default: Infinity for continuous)\n   *\n   * @example\n   * ```ts\n   * // Play attack animation with temporary graphic change\n   * player.setAnimation('attack', 'hero_attack', 3);\n   * ```\n   */\n  setAnimation(animationName: string, graphic?: string | string[], nbTimes?: number): void;\n  setAnimation(animationName: string, graphicOrNbTimes?: string | string[] | number, nbTimes?: number): void {\n    if (this.animationIsPlaying()) return;\n    this.animationIsPlaying.set(true);\n    const previousAnimationName = this.animationName();\n    const previousGraphics = this.graphics();\n    this.animationCurrentIndex.set(0);\n\n    let graphic: string | string[] | undefined;\n    let finalNbTimes: number = Infinity;\n\n    // Handle overloads\n    if (typeof graphicOrNbTimes === 'number') {\n      // setAnimation(animationName, nbTimes)\n      finalNbTimes = graphicOrNbTimes;\n    } else if (graphicOrNbTimes !== undefined) {\n      // setAnimation(animationName, graphic, nbTimes)\n      graphic = graphicOrNbTimes;\n      finalNbTimes = nbTimes ?? Infinity;\n    } else {\n      // setAnimation(animationName) - nbTimes remains Infinity\n      finalNbTimes = Infinity;\n    }\n\n    // Temporarily change graphic if provided\n    if (graphic !== undefined) {\n      if (Array.isArray(graphic)) {\n        this.graphics.set(graphic);\n      } else {\n        this.graphics.set([graphic]);\n      }\n    }\n\n    // Clean up any existing subscription\n    if (this.animationSubscription) {\n      this.animationSubscription.unsubscribe();\n    }\n\n    this.animationSubscription =\n      this.animationCurrentIndex.observable.subscribe((index) => {\n        if (index >= finalNbTimes) {\n          this.animationCurrentIndex.set(0);\n          this.animationName.set(previousAnimationName);\n          // Reset graphic to previous value if it was changed\n          if (graphic !== undefined) {\n            this.graphics.set(previousGraphics);\n          }\n          this.animationIsPlaying.set(false);\n          if (this.animationSubscription) {\n            this.animationSubscription.unsubscribe();\n            this.animationSubscription = undefined;\n          }\n        }\n      });\n    this.animationName.set(animationName);\n  }\n\n  showComponentAnimation(id: string, params: any) {\n    const engine = inject(RpgClientEngine);\n    engine.getComponentAnimation(id).displayEffect(params, this);\n  }\n  \n  isEvent(): boolean {\n    return this.type === 'event';\n  }\n\n  isPlayer(): boolean {\n    return this.type === 'player';\n  }\n}\n"],"names":["TextComponent"],"mappings":"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"}
+{"version":3,"file":"Object.js","sources":["../../src/Game/Object.ts"],"sourcesContent":["import { Hooks, ModulesToken, RpgCommonPlayer } from \"@rpgjs/common\";\nimport { trigger, signal, effect } from \"canvasengine\";\nimport { filter, from, map, Subscription, switchMap } from \"rxjs\";\nimport { inject } from \"../core/inject\";\nimport { RpgClientEngine } from \"../RpgClientEngine\";\nimport TextComponent from \"../components/dynamics/text.ce\";\n\nconst DYNAMIC_COMPONENTS = {\n  text: TextComponent,\n}\n\nexport abstract class RpgClientObject extends RpgCommonPlayer {\n  abstract type: string;\n  emitParticleTrigger = trigger();\n  particleName = signal(\"\");\n  animationCurrentIndex = signal(0);\n  animationIsPlaying = signal(false);\n  _param = signal({});\n  frames: { x: number; y: number; ts: number }[] = [];\n  graphicsSignals = signal<any[]>([]);\n  _component = {} // temporary component memory\n  flashTrigger = trigger();\n\n  constructor() {\n    super();\n    this.hooks.callHooks(\"client-sprite-onInit\", this).subscribe();\n\n    this._frames.observable.subscribe(({ items }) => {\n      if (!this.id) return;\n      //if (this.id == this.engine.playerIdSignal()!) return;\n      this.frames = [...this.frames, ...items];\n    });\n\n    this.graphics.observable\n    .pipe(\n      map(({ items }) => items),\n      filter(graphics => graphics.length > 0),\n      switchMap(graphics => from(Promise.all(graphics.map(graphic => this.engine.getSpriteSheet(graphic)))))\n    )\n    .subscribe((sheets) => {  \n      this.graphicsSignals.set(sheets);\n    });\n\n    this.componentsTop.observable\n    .pipe(\n      filter(value => value !== null && value !== undefined),\n      map((value) => typeof value === 'string' ? JSON.parse(value) : value),\n    )\n    .subscribe(({components}) => {\n      for (const component of components) {\n        for (const [key, value] of Object.entries(component)) {\n          this._component = value as any; // temporary component memory\n          console.log(value)\n          const type = (value as any).type as keyof typeof DYNAMIC_COMPONENTS;\n          if (DYNAMIC_COMPONENTS[type]) {\n            this.engine.addSpriteComponentInFront(DYNAMIC_COMPONENTS[type]);\n          }\n        }\n      }\n    });\n\n    this.engine.tick\n      .pipe\n      //throttleTime(10)\n      ()\n      .subscribe(() => {\n        const frame = this.frames.shift();\n        if (frame) {\n          if (typeof frame.x !== \"number\" || typeof frame.y !== \"number\") return;\n          this.engine.scene.setBodyPosition(\n            this.id,\n            frame.x,\n            frame.y,\n            \"top-left\"\n          );\n        }\n      });\n  }\n\n  get hooks() {\n    return inject<Hooks>(ModulesToken);\n  }\n\n  get engine() {\n    return inject(RpgClientEngine);\n  }\n\n  private animationSubscription?: Subscription;\n\n  /**\n   * Trigger a flash animation on this sprite\n   * \n   * This method triggers a flash effect using CanvasEngine's flash directive.\n   * The flash can be configured with various options including type (alpha, tint, or both),\n   * duration, cycles, and color.\n   * \n   * ## Design\n   * \n   * The flash uses a trigger system that is connected to the flash directive in the\n   * character component. This allows for flexible configuration and can be triggered\n   * from both server events and client-side code.\n   * \n   * @param options - Flash configuration options\n   * @param options.type - Type of flash effect: 'alpha' (opacity), 'tint' (color), or 'both' (default: 'alpha')\n   * @param options.duration - Duration of the flash animation in milliseconds (default: 300)\n   * @param options.cycles - Number of flash cycles (flash on/off) (default: 1)\n   * @param options.alpha - Alpha value when flashing, from 0 to 1 (default: 0.3)\n   * @param options.tint - Tint color when flashing as hex value or color name (default: 0xffffff - white)\n   * \n   * @example\n   * ```ts\n   * // Simple flash with default settings (alpha flash)\n   * player.flash();\n   * \n   * // Flash with red tint\n   * player.flash({ type: 'tint', tint: 0xff0000 });\n   * \n   * // Flash with both alpha and tint\n   * player.flash({ \n   *   type: 'both', \n   *   alpha: 0.5, \n   *   tint: 0xff0000,\n   *   duration: 200,\n   *   cycles: 2\n   * });\n   * \n   * // Quick damage flash\n   * player.flash({ \n   *   type: 'tint', \n   *   tint: 0xff0000, \n   *   duration: 150,\n   *   cycles: 1\n   * });\n   * ```\n   */\n  flash(options?: {\n    type?: 'alpha' | 'tint' | 'both';\n    duration?: number;\n    cycles?: number;\n    alpha?: number;\n    tint?: number | string;\n  }): void {\n    const flashOptions = {\n      type: options?.type || 'alpha',\n      duration: options?.duration ?? 300,\n      cycles: options?.cycles ?? 1,\n      alpha: options?.alpha ?? 0.3,\n      tint: options?.tint ?? 0xffffff,\n    };\n    \n    // Convert color name to hex if needed\n    let tintValue = flashOptions.tint;\n    if (typeof tintValue === 'string') {\n      // Common color name to hex mapping\n      const colorMap: Record<string, number> = {\n        'white': 0xffffff,\n        'red': 0xff0000,\n        'green': 0x00ff00,\n        'blue': 0x0000ff,\n        'yellow': 0xffff00,\n        'cyan': 0x00ffff,\n        'magenta': 0xff00ff,\n        'black': 0x000000,\n      };\n      tintValue = colorMap[tintValue.toLowerCase()] ?? 0xffffff;\n    }\n    \n    this.flashTrigger.start({\n      ...flashOptions,\n      tint: tintValue,\n    });\n  }\n\n  /**\n   * Reset animation state when animation changes externally\n   *\n   * This method should be called when the animation changes due to movement\n   * or other external factors to ensure the animation system doesn't get stuck\n   *\n   * @example\n   * ```ts\n   * // Reset when player starts moving\n   * player.resetAnimationState();\n   * ```\n   */\n  resetAnimationState() {\n    this.animationIsPlaying.set(false);\n    this.animationCurrentIndex.set(0);\n    if (this.animationSubscription) {\n      this.animationSubscription.unsubscribe();\n      this.animationSubscription = undefined;\n    }\n  }\n\n  /**\n   * Set a custom animation for a specific number of times\n   *\n   * Plays a custom animation for the specified number of repetitions.\n   * The animation system prevents overlapping animations and automatically\n   * returns to the previous animation when complete.\n   *\n   * @param animationName - Name of the animation to play\n   * @param nbTimes - Number of times to repeat the animation (default: Infinity for continuous)\n   *\n   * @example\n   * ```ts\n   * // Play attack animation 3 times\n   * player.setAnimation('attack', 3);\n   *\n   * // Play continuous spell animation\n   * player.setAnimation('spell');\n   * ```\n   */\n  setAnimation(animationName: string, nbTimes?: number): void;\n  /**\n   * Set a custom animation with temporary graphic change\n   *\n   * Plays a custom animation for the specified number of repetitions and temporarily\n   * changes the player's graphic (sprite sheet) during the animation. The graphic\n   * is automatically reset when the animation finishes.\n   *\n   * @param animationName - Name of the animation to play\n   * @param graphic - The graphic(s) to temporarily use during the animation\n   * @param nbTimes - Number of times to repeat the animation (default: Infinity for continuous)\n   *\n   * @example\n   * ```ts\n   * // Play attack animation with temporary graphic change\n   * player.setAnimation('attack', 'hero_attack', 3);\n   * ```\n   */\n  setAnimation(animationName: string, graphic?: string | string[], nbTimes?: number): void;\n  setAnimation(animationName: string, graphicOrNbTimes?: string | string[] | number, nbTimes?: number): void {\n    if (this.animationIsPlaying()) return;\n    this.animationIsPlaying.set(true);\n    const previousAnimationName = this.animationName();\n    const previousGraphics = this.graphics();\n    this.animationCurrentIndex.set(0);\n\n    let graphic: string | string[] | undefined;\n    let finalNbTimes: number = Infinity;\n\n    // Handle overloads\n    if (typeof graphicOrNbTimes === 'number') {\n      // setAnimation(animationName, nbTimes)\n      finalNbTimes = graphicOrNbTimes;\n    } else if (graphicOrNbTimes !== undefined) {\n      // setAnimation(animationName, graphic, nbTimes)\n      graphic = graphicOrNbTimes;\n      finalNbTimes = nbTimes ?? Infinity;\n    } else {\n      // setAnimation(animationName) - nbTimes remains Infinity\n      finalNbTimes = Infinity;\n    }\n\n    // Temporarily change graphic if provided\n    if (graphic !== undefined) {\n      if (Array.isArray(graphic)) {\n        this.graphics.set(graphic);\n      } else {\n        this.graphics.set([graphic]);\n      }\n    }\n\n    // Clean up any existing subscription\n    if (this.animationSubscription) {\n      this.animationSubscription.unsubscribe();\n    }\n\n    this.animationSubscription =\n      this.animationCurrentIndex.observable.subscribe((index) => {\n        if (index >= finalNbTimes) {\n          this.animationCurrentIndex.set(0);\n          this.animationName.set(previousAnimationName);\n          // Reset graphic to previous value if it was changed\n          if (graphic !== undefined) {\n            this.graphics.set(previousGraphics);\n          }\n          this.animationIsPlaying.set(false);\n          if (this.animationSubscription) {\n            this.animationSubscription.unsubscribe();\n            this.animationSubscription = undefined;\n          }\n        }\n      });\n    this.animationName.set(animationName);\n  }\n\n  showComponentAnimation(id: string, params: any) {\n    const engine = inject(RpgClientEngine);\n    engine.getComponentAnimation(id).displayEffect(params, this);\n  }\n  \n  isEvent(): boolean {\n    return this.type === 'event';\n  }\n\n  isPlayer(): boolean {\n    return this.type === 'player';\n  }\n}\n"],"names":["TextComponent"],"mappings":"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"}

package/dist/Gui/Gui.js

@@ -2,6 +2,7 @@ import { inject } from '../node_modules/.pnpm/@signe_di@2.8.3/node_modules/@sign
 import { signal } from 'canvasengine';
 import { WebSocketToken } from '../services/AbstractSocket.js';
 import component from '../components/gui/dialogbox/index.ce.js';
+import '@canvasengine/presets';
 import { combineLatest } from 'rxjs';
 import { PrebuiltGui } from '@rpgjs/common';
 import '../Sound.js';
@@ -11,7 +12,6 @@ import '../Game/Map.js';
 import 'pixi.js';
 import '../node_modules/.pnpm/@signe_room@2.8.3/node_modules/@signe/room/dist/index.js';
 import '../node_modules/.pnpm/@signe_sync@2.8.3/node_modules/@signe/sync/dist/client/index.js';
-import '@canvasengine/presets';
 import component$2 from '../components/gui/shop/shop.ce.js';
 import component$4 from '../components/gui/save-load.ce.js';
 import component$1 from '../components/gui/menu/main-menu.ce.js';

package/dist/RpgClientEngine.d.ts

@@ -42,11 +42,17 @@ export declare class RpgClientEngine<T = any> {
     private prediction?;
     private readonly SERVER_CORRECTION_THRESHOLD;
     private inputFrameCounter;
+    private pendingPredictionFrames;
+    private lastClientPhysicsStepAt;
     private frameOffset;
     private rtt;
     private pingInterval;
     private readonly PING_INTERVAL_MS;
     private lastInputTime;
+    private readonly MOVE_PATH_RESEND_INTERVAL_MS;
+    private readonly MAX_MOVE_TRAJECTORY_POINTS;
+    private lastMovePathSentAt;
+    private lastMovePathSentFrame;
     private mapLoadCompleted$;
     private playerIdReceived$;
     private playersReceived$;
@@ -92,6 +98,8 @@ export declare class RpgClientEngine<T = any> {
      */
     setKeyboardControls(controlInstance: any): void;
     start(): Promise<void>;
+    private prepareSyncPayload;
+    private normalizeAckWithSyncState;
     private initListeners;
     /**
      * Start periodic ping/pong for client-server synchronization
@@ -526,6 +534,12 @@ export declare class RpgClientEngine<T = any> {
     get playerId(): string | null;
     get scene(): RpgClientMap;
     private getPhysicsTick;
+    private ensureCurrentPlayerBody;
+    private stepClientPhysicsTick;
+    private flushPendingPredictedStates;
+    private buildPendingMoveTrajectory;
+    private emitMovePacket;
+    private flushPendingMovePath;
     private getLocalPlayerState;
     private applyAuthoritativeState;
     private initializePredictionController;
@@ -624,6 +638,7 @@ export declare class RpgClientEngine<T = any> {
         tint?: number | string;
     }): void;
     private applyServerAck;
+    private reconcilePrediction;
     /**
      * Replay unacknowledged inputs from a given frame to resimulate client prediction
      * after applying server authority at a certain frame.

package/dist/RpgClientEngine.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);