@rpgjs/client 5.0.0-beta.10 → 5.0.0-beta.11

package/src/RpgClient.ts

@@ -2,7 +2,11 @@ import { ComponentFunction, Signal } from 'canvasengine'
 import { RpgClientEngine } from './RpgClientEngine'
 import { Loader, Container } from 'pixi.js'
 import { RpgClientObject } from './Game/Object'
-import { type MapPhysicsEntityContext, type MapPhysicsInitContext } from '@rpgjs/common'
+import { type MapPhysicsEntityContext, type MapPhysicsInitContext, type RpgActionName } from '@rpgjs/common'
+import type {
+    ClientProjectileSpawn,
+    RenderedProjectileProps,
+} from './Game/ProjectileManager'
 
 type RpgClass<T = any> = new (...args: any[]) => T
 type RpgComponent = RpgClientObject
@@ -46,13 +50,14 @@ export interface RpgClientEngineHooks {
     /**
      * Recover keys from the pressed keyboard
      * 
-     * @prop { (engine: RpgClientEngine, obj: { input: string, playerId: number }) => any } [onInput]
+     * @prop { (engine: RpgClientEngine, obj: { input: string | number, action?: string | number, data?: any, playerId: number }) => any } [onInput]
      * @memberof RpgEngineHooks
      */
-    onInput?: (engine: RpgClientEngine, obj: { input: string, playerId: number }) => any
+    onInput?: (engine: RpgClientEngine, obj: { input: RpgActionName, action?: RpgActionName, data?: any, playerId: number }) => any
 
     /**
-     * Called when the user is connected to the server
+     * Called when the user is connected to the server. In MMORPG mode, this
+     * runs after the server sends the RPGJS connection acceptance packet.
      * 
      * @prop { (engine: RpgClientEngine, socket: any) => any } [onConnected]
      * @memberof RpgEngineHooks
@@ -68,7 +73,8 @@ export interface RpgClientEngineHooks {
     onDisconnect?: (engine: RpgClientEngine, reason: any, socket: any) => any
 
     /**
-     * Called when there was a connection error
+     * Called when there was a connection error. In MMORPG mode, this also runs
+     * when server-side auth refuses the connection.
      * 
      * @prop { (engine: RpgClientEngine, err: any, socket: any) => any } [onConnectError]
      * @memberof RpgEngineHooks
@@ -245,6 +251,14 @@ export interface RpgSceneHooks<Scene> {
 }
 
 export interface RpgSceneMapHooks extends RpgSceneHooks<SceneMap> {
+    /**
+     * Root CanvasEngine component used to render the RPG scene map.
+     *
+     * Use the exported `SceneMap` component inside your custom component to
+     * keep the default map rendering and compose additional scene children.
+     */
+    component?: ComponentFunction
+
     /**
      * The map and resources are being loaded
      * 
@@ -289,6 +303,28 @@ export interface RpgSceneMapHooks extends RpgSceneHooks<SceneMap> {
     onPhysicsReset?: (scene: SceneMap) => any
 }
 
+export interface RpgProjectileHooks {
+    /**
+     * CanvasEngine components used to render server-authoritative projectiles.
+     */
+    components?: Record<string, ComponentFunction>
+
+    /**
+     * Called when a projectile spawn batch is received from the server.
+     */
+    onSpawn?: (projectile: ClientProjectileSpawn) => any
+
+    /**
+     * Called when the server confirms a projectile impact.
+     */
+    onImpact?: (projectile: RenderedProjectileProps | null) => any
+
+    /**
+     * Called when the server destroys a projectile.
+     */
+    onDestroy?: (projectile: RenderedProjectileProps | null) => any
+}
+
 export interface RpgClient {
     /**
      * Add hooks to the player or engine. All modules can listen to the hook
@@ -624,33 +660,36 @@ export interface RpgClient {
      * */
     sprite?: RpgSpriteHooks
 
-    /** 
-     * Reference the scenes of the game. Here you can put your own class that inherits RpgSceneMap
+    /**
+     * Reference the scenes of the game.
      * 
      * ```ts
      * import { RpgSceneMapHooks, RpgClient, defineModule } from '@rpgjs/client'
+     * import MyScene from './my-scene.ce'
      * 
      * export const sceneMap: RpgSceneMapHooks = {
-     *     
+     *     component: MyScene
      * }
      * 
      * defineModule<RpgClient>({
-     *      scenes: {
-     *          // If you put the RpgSceneMap scene, Thhe key is called mandatory `map`
-     *          map: sceneMap
-     *      }
+     *      sceneMap
      * })
      * ``` 
      * 
-     * @prop { [sceneName: string]: RpgSceneMapHooks } [scenes]
+     * @prop {RpgSceneMapHooks} [sceneMap]
      * @memberof RpgClient
      * */
+    sceneMap?: RpgSceneMapHooks
+
+    /**
+     * Legacy scene map hook container.
+     *
+     * Prefer `sceneMap` for new code.
+     */
     scenes?: {
         map: RpgSceneMapHooks
     }
 
-    sceneMap?: RpgSceneMapHooks
-
     /** 
      * Array containing the list of component animations
      * Each element defines a temporary component to display for animations like hits, effects, etc.
@@ -681,4 +720,12 @@ export interface RpgClient {
         id: string,
         component: ComponentFunction
     }[]
+
+    /**
+     * Client-side projectile rendering configuration.
+     *
+     * Register a CanvasEngine component per projectile type. The server sends
+     * compact spawn/impact/destroy events and the client predicts x/y locally.
+     */
+    projectiles?: RpgProjectileHooks
 }

package/src/RpgClientEngine.ts

@@ -1,11 +1,12 @@
 import Canvas from "./components/scenes/canvas.ce";
+import BuiltinSceneMap from "./components/scenes/draw-map.ce";
 import { inject } from './core/inject'
 import { signal, bootstrapCanvas, Howl, trigger, type Trigger } from "canvasengine";
 import { AbstractWebsocket, WebSocketToken } from "./services/AbstractSocket";
 import { LoadMapService, LoadMapToken } from "./services/loadMap";
 import { RpgSound } from "./Sound";
 import { RpgResource } from "./Resource";
-import { Hooks, ModulesToken, Direction, normalizeLightingState } from "@rpgjs/common";
+import { Hooks, ModulesToken, Direction, normalizeLightingState, Vector2 } from "@rpgjs/common";
 import { load } from "@signe/sync";
 import { RpgClientMap } from "./Game/Map"
 import { RpgGui } from "./Gui/Gui";
@@ -22,10 +23,15 @@ import {
   PredictionController,
   type PredictionHistoryEntry,
   type PredictionState,
+  type RpgActionInput,
+  type RpgActionName,
 } from "@rpgjs/common";
 import { NotificationManager } from "./Gui/NotificationManager";
 import { SaveClientService } from "./services/save";
 import { getCanMoveValue } from "./utils/readPropValue";
+import { ProjectileManager, type ClientProjectileImpact, type ClientProjectileSpawn } from "./Game/ProjectileManager";
+import { normalizeActionInput } from "./services/actionInput";
+import { createClientPointerContext, type ClientPointerContext } from "./services/pointerContext";
 
 interface MovementTrajectoryPoint {
   frame: number;
@@ -57,12 +63,15 @@ export class RpgClientEngine<T = any> {
   private selector: HTMLElement;
   public globalConfig: T;
   public sceneComponent: any;
+  public sceneMapComponent: any = BuiltinSceneMap;
   stopProcessingInput = false;
   width = signal("100%");
   height = signal("100%");
   spritesheets: Map<string | number, any> = new Map();
   sounds: Map<string, any> = new Map();
   componentAnimations: any[] = [];
+  projectiles: ProjectileManager;
+  pointer: ClientPointerContext = createClientPointerContext();
   private spritesheetResolver?: (id: string | number) => any | Promise<any>;
   private soundResolver?: (id: string) => any | Promise<any>;
   particleSettings: {
@@ -93,6 +102,8 @@ export class RpgClientEngine<T = any> {
   private pendingPredictionFrames: number[] = [];
   private lastClientPhysicsStepAt = 0;
   private frameOffset = 0;
+  private latestServerTick?: number;
+  private latestServerTickAt = 0;
   // Ping/Pong for RTT measurement
   private rtt: number = 0; // Round-trip time in ms
   private pingInterval: any = null;
@@ -113,6 +124,9 @@ export class RpgClientEngine<T = any> {
   // Store subscriptions and event listeners for cleanup
   private tickSubscriptions: any[] = [];
   private resizeHandler?: () => void;
+  private pointerMoveHandler?: (event: PointerEvent) => void;
+  private pointerCanvas?: HTMLCanvasElement;
+  private pendingSyncPackets: any[] = [];
   private notificationManager: NotificationManager = new NotificationManager();
 
   constructor(public context) {
@@ -120,6 +134,10 @@ export class RpgClientEngine<T = any> {
     this.guiService = inject(RpgGui);
     this.loadMapService = inject(LoadMapToken);
     this.hooks = inject<Hooks>(ModulesToken);
+    this.projectiles = new ProjectileManager(
+      this.hooks,
+      (projectile) => this.predictProjectileImpact(projectile),
+    );
     this.globalConfig = inject(GlobalConfigToken)
 
     if (!this.globalConfig) {
@@ -197,6 +215,22 @@ export class RpgClientEngine<T = any> {
     this.sceneMap = new RpgClientMap()
     this.sceneMap.configureClientPrediction(this.predictionEnabled);
     this.sceneMap.loadPhysic();
+    this.resolveSceneMapComponent();
+
+    const saveClient = inject(SaveClientService);
+    saveClient.initialize();
+    this.initListeners();
+    this.guiService._initialize();
+
+    try {
+      await this.webSocket.connection();
+    }
+    catch (error) {
+      this.stopPingPong();
+      await this.callConnectError(error);
+      throw error;
+    }
+
     this.selector = document.body.querySelector("#rpg") as HTMLElement;
 
     const bootstrapOptions = (this.globalConfig as any)?.bootstrapCanvasOptions;
@@ -207,8 +241,10 @@ export class RpgClientEngine<T = any> {
     );
     this.canvasApp = app;
     this.canvasElement = canvasElement;
-    this.renderer = app.renderer as PIXI.Renderer;
+    this.renderer = app.renderer as unknown as PIXI.Renderer;
+    this.setupPointerTracking();
     this.tick = canvasElement?.propObservables?.context['tick'].observable
+    this.flushPendingSyncPackets();
 
     const inputCheckSubscription = this.tick.subscribe(() => {
       if (Date.now() - this.lastInputTime > 100) {
@@ -224,12 +260,13 @@ export class RpgClientEngine<T = any> {
     this.hooks.callHooks("client-spritesheetResolver-load", this).subscribe();
     this.hooks.callHooks("client-sounds-load", this).subscribe();
     this.hooks.callHooks("client-soundResolver-load", this).subscribe();
-    
+
     RpgSound.init(this);
     RpgResource.init(this);
     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-projectiles-load", this).subscribe();
     this.hooks.callHooks("client-sprite-load", this).subscribe();
 
     await lastValueFrom(this.hooks.callHooks("client-engine-onStart", this));
@@ -242,6 +279,7 @@ export class RpgClientEngine<T = any> {
 
     const tickSubscription = this.tick.subscribe((tick) => {
       this.stepClientPhysicsTick();
+      this.projectiles.step();
       this.flushPendingPredictedStates();
       this.flushPendingMovePath();
       this.hooks.callHooks("client-engine-onStep", this, tick).subscribe();
@@ -255,13 +293,56 @@ export class RpgClientEngine<T = any> {
     });
     this.tickSubscriptions.push(tickSubscription);
 
-    await this.webSocket.connection(() => {
-      const saveClient = inject(SaveClientService);
-      saveClient.initialize();
-      this.initListeners()
-      this.guiService._initialize()
-      this.startPingPong();
-    });
+    this.startPingPong();
+  }
+
+  private resolveSceneMapComponent() {
+    const components = this.hooks.getHookFunctions("client-sceneMap-component");
+    const component = components[components.length - 1];
+    if (component) {
+      this.sceneMapComponent = component;
+    }
+  }
+
+  private setupPointerTracking() {
+    const renderer = this.renderer as any;
+    const canvas = renderer?.canvas ?? renderer?.view ?? (this.canvasApp as any)?.canvas;
+
+    if (!canvas || typeof canvas.addEventListener !== "function") {
+      return;
+    }
+
+    this.pointerCanvas = canvas;
+    this.pointerMoveHandler = (event: PointerEvent) => {
+      const rect = canvas.getBoundingClientRect();
+      const screen = {
+        x: event.clientX - rect.left,
+        y: event.clientY - rect.top,
+      };
+      const viewport = this.findViewportInstance();
+      let world = screen;
+
+      if (viewport && typeof viewport.toWorld === "function") {
+        const point = viewport.toWorld(screen.x, screen.y);
+        world = { x: Number(point.x), y: Number(point.y) };
+      } else if (viewport && typeof viewport.toLocal === "function") {
+        const point = viewport.toLocal(screen);
+        world = { x: Number(point.x), y: Number(point.y) };
+      }
+
+      this.pointer.update(screen, world);
+    };
+
+    canvas.addEventListener("pointermove", this.pointerMoveHandler);
+    canvas.addEventListener("pointerdown", this.pointerMoveHandler);
+  }
+
+  private findViewportInstance(): any {
+    const children = (this.canvasApp as any)?.stage?.children ?? [];
+    return children.find((child: any) => (
+      typeof child?.toWorld === "function"
+      || child?.constructor?.name === "Viewport"
+    ));
   }
 
   private prepareSyncPayload(data: any): any {
@@ -312,51 +393,11 @@ export class RpgClientEngine<T = any> {
 
   private initListeners() {
     this.webSocket.on("sync", (data) => {
-      if (data.pId) {
-        this.playerIdSignal.set(data.pId);
-        // Signal that player ID was received
-        this.playerIdReceived$.next(true);
-      }
-
-      if (this.sceneResetQueued) {
-        this.sceneMap.reset();
-        this.sceneMap.loadPhysic();
-        this.sceneResetQueued = false;
-      }
-
-      // Apply client-side prediction filtering and server reconciliation
-      this.hooks.callHooks("client-sceneMap-onChanges", this.sceneMap, { partial: data }).subscribe();
-
-      const ack = data?.ack;
-      const normalizedAck =
-        ack && typeof ack.frame === "number"
-          ? this.normalizeAckWithSyncState(ack, data)
-          : undefined;
-      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]
-        }
-      }
-      
-      // Check if players and events are present in sync data
-      const players = payload.players || this.sceneMap.players();
-      if (players && Object.keys(players).length > 0) {
-        this.playersReceived$.next(true);
-      }
-      
-      const events = payload.events || this.sceneMap.events();
-      if (events !== undefined) {
-        this.eventsReceived$.next(true);
+      if (!this.tick) {
+        this.pendingSyncPackets.push(data);
+        return;
       }
+      this.applySyncPacket(data);
     });
 
     // Handle pong responses for RTT measurement
@@ -368,6 +409,7 @@ export class RpgClientEngine<T = any> {
       // This helps us estimate which server tick corresponds to each client input frame
       const estimatedTicksInFlight = Math.floor(this.rtt / 2 / (1000 / 60)); // Estimate ticks during half RTT
       const estimatedServerTickNow = data.serverTick + estimatedTicksInFlight;
+      this.updateServerTickEstimate(estimatedServerTickNow, now);
 
       // Update frame offset (only if we have inputs to calibrate with)
       if (this.inputFrameCounter > 0) {
@@ -379,7 +421,10 @@ export class RpgClientEngine<T = any> {
 
     this.webSocket.on("changeMap", (data) => {
       this.sceneResetQueued = true;
+      this.sceneMap.weatherState.set(null);
+      this.sceneMap.lightingState.set(null);
       this.sceneMap.clearLightSpots();
+      this.projectiles.clear();
       // Reset camera follow to default (follow current player) when changing maps
       this.cameraFollowTargetId.set(null);
       const transferToken = typeof data?.transferToken === "string" ? data.transferToken : undefined;
@@ -395,6 +440,25 @@ export class RpgClientEngine<T = any> {
       this.getComponentAnimation(id).displayEffect(params, player || position)
     });
 
+    this.webSocket.on("projectile:spawnBatch", (data) => {
+      this.projectiles.spawnBatch(data?.projectiles ?? [], {
+        currentServerTick: this.estimateServerTick(),
+        tickDurationMs: this.getPhysicsTickDurationMs(),
+      });
+    });
+
+    this.webSocket.on("projectile:impactBatch", (data) => {
+      this.projectiles.impactBatch(data?.impacts ?? []);
+    });
+
+    this.webSocket.on("projectile:destroyBatch", (data) => {
+      this.projectiles.destroyBatch(data?.projectiles ?? []);
+    });
+
+    this.webSocket.on("projectile:clear", () => {
+      this.projectiles.clear();
+    });
+
     this.webSocket.on("notification", (data) => {
       this.notificationManager.add(data);
     });
@@ -505,10 +569,72 @@ export class RpgClientEngine<T = any> {
     })
 
     this.webSocket.on('error', (error) => {
-      this.hooks.callHooks("client-engine-onConnectError", this, error, this.socket).subscribe();
+      void this.callConnectError(error);
     })
   }
 
+  private async callConnectError(error: any) {
+    await lastValueFrom(this.hooks.callHooks("client-engine-onConnectError", this, error, this.socket));
+  }
+
+  private flushPendingSyncPackets() {
+    const packets = this.pendingSyncPackets;
+    this.pendingSyncPackets = [];
+    packets.forEach((packet) => this.applySyncPacket(packet));
+  }
+
+  private applySyncPacket(data: any) {
+    if (data.pId) {
+      this.playerIdSignal.set(data.pId);
+      // Signal that player ID was received
+      this.playerIdReceived$.next(true);
+    }
+
+    if (this.sceneResetQueued) {
+      const weatherState = this.sceneMap.weatherState();
+      const lightingState = this.sceneMap.lightingState();
+      this.sceneMap.reset();
+      this.sceneMap.weatherState.set(weatherState);
+      this.sceneMap.lightingState.set(lightingState);
+      this.sceneMap.loadPhysic();
+      this.sceneResetQueued = false;
+    }
+
+    // Apply client-side prediction filtering and server reconciliation
+    this.hooks.callHooks("client-sceneMap-onChanges", this.sceneMap, { partial: data }).subscribe();
+
+    const ack = data?.ack;
+    const normalizedAck =
+      ack && typeof ack.frame === "number"
+        ? this.normalizeAckWithSyncState(ack, data)
+        : undefined;
+    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]
+      }
+    }
+
+    // Check if players and events are present in sync data
+    const players = payload.players || this.sceneMap.players();
+    if (players && Object.keys(players).length > 0) {
+      this.playersReceived$.next(true);
+    }
+
+    const events = payload.events || this.sceneMap.events();
+    if (events !== undefined) {
+      this.eventsReceived$.next(true);
+    }
+  }
+
   /**
    * Start periodic ping/pong for client-server synchronization
    * 
@@ -605,12 +731,19 @@ export class RpgClientEngine<T = any> {
       room: mapId,
       query: transferToken ? { transferToken } : undefined,
     })
-    await this.webSocket.reconnect(() => {
-      const saveClient = inject(SaveClientService);
-      saveClient.initialize();
-      this.initListeners()
-      this.guiService._initialize()
-    })
+    try {
+      await this.webSocket.reconnect(() => {
+        const saveClient = inject(SaveClientService);
+        saveClient.initialize();
+        this.initListeners()
+        this.guiService._initialize()
+      })
+    }
+    catch (error) {
+      this.stopPingPong();
+      await this.callConnectError(error);
+      throw error;
+    }
     const res = await this.loadMapService.load(mapId)
     this.sceneMap.data.set(res)
     
@@ -1157,6 +1290,14 @@ export class RpgClientEngine<T = any> {
     return this.spriteComponents.get(id);
   }
 
+  registerProjectileComponent(type: string, component: any) {
+    return this.projectiles.register(type, component);
+  }
+
+  getProjectileComponent(type: string) {
+    return this.projectiles.get(type);
+  }
+
   /**
    * Add a component animation to the engine
    * 
@@ -1307,7 +1448,9 @@ export class RpgClientEngine<T = any> {
     this.lastInputTime = Date.now();
   }
 
-  processAction({ action }: { action: number }) {
+  processAction(action: RpgActionName, data?: any): void;
+  processAction(action: RpgActionInput): void;
+  processAction(action: RpgActionName | RpgActionInput, data?: any): void {
     if (this.stopProcessingInput) return;
     const currentPlayer = this.sceneMap.getCurrentPlayer() as any;
     const canMove =
@@ -1315,8 +1458,15 @@ export class RpgClientEngine<T = any> {
       getCanMoveValue(currentPlayer);
     if (!canMove) return;
 
-    this.hooks.callHooks("client-engine-onInput", this, { input: 'action', playerId: this.playerId }).subscribe();
-    this.webSocket.emit('action', { action })
+    const payload = normalizeActionInput(action as any, data);
+
+    this.hooks.callHooks("client-engine-onInput", this, {
+      input: payload.action,
+      action: payload.action,
+      data: payload.data,
+      playerId: this.playerId,
+    }).subscribe();
+    this.webSocket.emit('action', payload)
   }
 
   get PIXI() {
@@ -1336,7 +1486,71 @@ export class RpgClientEngine<T = any> {
   }
 
   private getPhysicsTick(): number {
-    return this.sceneMap?.getTick?.() ?? 0;
+    return (this.sceneMap as any)?.getTick?.() ?? 0;
+  }
+
+  private getPhysicsTickDurationMs(): number {
+    const timeStep = (this.sceneMap as any)?.physic?.getWorld?.()?.getTimeStep?.();
+    return typeof timeStep === "number" && Number.isFinite(timeStep) && timeStep > 0
+      ? timeStep * 1000
+      : 1000 / 60;
+  }
+
+  private updateServerTickEstimate(serverTick: number | undefined, now = Date.now()): void {
+    if (typeof serverTick !== "number" || !Number.isFinite(serverTick)) {
+      return;
+    }
+    this.latestServerTick = serverTick;
+    this.latestServerTickAt = now;
+  }
+
+  private estimateServerTick(now = Date.now()): number | undefined {
+    if (typeof this.latestServerTick !== "number" || this.latestServerTickAt <= 0) {
+      return undefined;
+    }
+    const elapsedTicks = Math.max(0, (now - this.latestServerTickAt) / this.getPhysicsTickDurationMs());
+    return this.latestServerTick + elapsedTicks;
+  }
+
+  private predictProjectileImpact(projectile: ClientProjectileSpawn): ClientProjectileImpact | null {
+    if (projectile.predictImpact === false) {
+      return null;
+    }
+    const sceneMap = this.sceneMap as any;
+    if (!sceneMap?.physic || !Number.isFinite(projectile.range) || projectile.range <= 0) {
+      return null;
+    }
+    const origin = projectile.origin;
+    const direction = projectile.direction;
+    if (
+      !origin ||
+      !direction ||
+      !Number.isFinite(origin.x) ||
+      !Number.isFinite(origin.y) ||
+      !Number.isFinite(direction.x) ||
+      !Number.isFinite(direction.y) ||
+      (direction.x === 0 && direction.y === 0)
+    ) {
+      return null;
+    }
+
+    const hit = sceneMap.physic.raycast(
+      new Vector2(origin.x, origin.y),
+      new Vector2(direction.x, direction.y),
+      projectile.range,
+      projectile.collisionMask,
+      (entity) => projectile.ignoreOwner === false || !projectile.ownerId || entity.uuid !== projectile.ownerId,
+    );
+    if (!hit) {
+      return null;
+    }
+    return {
+      id: projectile.id,
+      targetId: hit.entity.uuid,
+      x: hit.point.x,
+      y: hit.point.y,
+      distance: hit.distance,
+    };
   }
 
   private ensureCurrentPlayerBody(): boolean {
@@ -1686,6 +1900,7 @@ export class RpgClientEngine<T = any> {
   }
 
   private applyServerAck(ack: { frame: number; serverTick?: number; x?: number; y?: number; direction?: Direction }) {
+    this.updateServerTickEstimate(ack.serverTick);
     if (this.predictionEnabled && this.prediction) {
       const result = this.prediction.applyServerAck({
         frame: ack.frame,
@@ -1847,6 +2062,13 @@ export class RpgClientEngine<T = any> {
         this.resizeHandler = undefined;
       }
 
+      if (this.pointerMoveHandler && this.pointerCanvas) {
+        this.pointerCanvas.removeEventListener('pointermove', this.pointerMoveHandler);
+        this.pointerCanvas.removeEventListener('pointerdown', this.pointerMoveHandler);
+        this.pointerMoveHandler = undefined;
+        this.pointerCanvas = undefined;
+      }
+
       // Destroy PIXI app and renderer if they exist
       // Destroy the app first, which will destroy the renderer
       // Store renderer reference before destroying app (since app.destroy() will destroy the renderer)