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

package/dist/RpgClientEngine.js

@@ -1,35 +1,47 @@
 import { inject } from "./core/inject.js";
 import { WebSocketToken } from "./services/AbstractSocket.js";
+import { normalizeActionInput } from "./services/actionInput.js";
+import { getCanMoveValue } from "./utils/readPropValue.js";
 import { SaveClientService } from "./services/save.js";
 import { RpgGui } from "./Gui/Gui.js";
-import component from "./components/scenes/canvas.ce.js";
+import __ce_component from "./components/scenes/canvas.ce.js";
+import __ce_component$1 from "./components/scenes/draw-map.ce.js";
 import { LoadMapToken } from "./services/loadMap.js";
 import { RpgSound } from "./Sound.js";
 import { RpgResource } from "./Resource.js";
-import { load } from "./node_modules/.pnpm/@signe_sync@2.9.0/node_modules/@signe/sync/dist/index.js";
+import { load } from "./node_modules/.pnpm/@signe_sync@3.0.1/node_modules/@signe/sync/dist/index.js";
 import { RpgClientMap } from "./Game/Map.js";
 import { AnimationManager } from "./Game/AnimationManager.js";
 import { GlobalConfigToken } from "./module.js";
 import { PrebuiltComponentAnimations } from "./components/animations/index.js";
+import __ce_component$2 from "./components/dynamics/text.ce.js";
+import __ce_component$3 from "./components/dynamics/bar.ce.js";
+import __ce_component$4 from "./components/dynamics/shape.ce.js";
+import __ce_component$5 from "./components/dynamics/image.ce.js";
 import { NotificationManager } from "./Gui/NotificationManager.js";
+import { ProjectileManager } from "./Game/ProjectileManager.js";
+import { createClientPointerContext } from "./services/pointerContext.js";
 import { Howl, bootstrapCanvas, signal, trigger } from "canvasengine";
-import { Direction, ModulesToken, PredictionController } from "@rpgjs/common";
+import { Direction, ModulesToken, PredictionController, Vector2, normalizeLightingState } from "@rpgjs/common";
 import { BehaviorSubject, combineLatest, filter, lastValueFrom, switchMap, take } from "rxjs";
 import * as PIXI from "pixi.js";
 //#region src/RpgClientEngine.ts
 var RpgClientEngine = class {
 	constructor(context) {
 		this.context = context;
+		this.sceneMapComponent = __ce_component$1;
 		this.stopProcessingInput = false;
 		this.width = signal("100%");
 		this.height = signal("100%");
 		this.spritesheets = /* @__PURE__ */ new Map();
 		this.sounds = /* @__PURE__ */ new Map();
 		this.componentAnimations = [];
+		this.pointer = createClientPointerContext();
 		this.particleSettings = { emitters: [] };
 		this.playerIdSignal = signal(null);
 		this.spriteComponentsBehind = signal([]);
 		this.spriteComponentsInFront = signal([]);
+		this.spriteComponents = /* @__PURE__ */ new Map();
 		this.cameraFollowTargetId = signal(null);
 		this.mapShakeTrigger = trigger();
 		this.controlsReady = signal(void 0);
@@ -40,6 +52,7 @@ var RpgClientEngine = class {
 		this.pendingPredictionFrames = [];
 		this.lastClientPhysicsStepAt = 0;
 		this.frameOffset = 0;
+		this.latestServerTickAt = 0;
 		this.rtt = 0;
 		this.pingInterval = null;
 		this.PING_INTERVAL_MS = 5e3;
@@ -54,11 +67,13 @@ var RpgClientEngine = class {
 		this.eventsReceived$ = new BehaviorSubject(false);
 		this.sceneResetQueued = false;
 		this.tickSubscriptions = [];
+		this.pendingSyncPackets = [];
 		this.notificationManager = new NotificationManager();
 		this.webSocket = inject(WebSocketToken);
 		this.guiService = inject(RpgGui);
 		this.loadMapService = inject(LoadMapToken);
 		this.hooks = inject(ModulesToken);
+		this.projectiles = new ProjectileManager(this.hooks, (projectile) => this.predictProjectileImpact(projectile));
 		this.globalConfig = inject(GlobalConfigToken);
 		if (!this.globalConfig) this.globalConfig = {};
 		if (!this.globalConfig.box) this.globalConfig.box = {
@@ -72,6 +87,12 @@ var RpgClientEngine = class {
 			id: "animation",
 			component: PrebuiltComponentAnimations.Animation
 		});
+		this.registerSpriteComponent("rpg:text", __ce_component$2);
+		this.registerSpriteComponent("rpg:hpBar", __ce_component$3);
+		this.registerSpriteComponent("rpg:spBar", __ce_component$3);
+		this.registerSpriteComponent("rpg:bar", __ce_component$3);
+		this.registerSpriteComponent("rpg:shape", __ce_component$4);
+		this.registerSpriteComponent("rpg:image", __ce_component$5);
 		this.predictionEnabled = this.globalConfig?.prediction?.enabled !== false;
 		this.initializePredictionController();
 	}
@@ -120,13 +141,26 @@ var RpgClientEngine = class {
 		this.sceneMap = new RpgClientMap();
 		this.sceneMap.configureClientPrediction(this.predictionEnabled);
 		this.sceneMap.loadPhysic();
+		this.resolveSceneMapComponent();
+		inject(SaveClientService).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");
 		const bootstrapOptions = this.globalConfig?.bootstrapCanvasOptions;
-		const { app, canvasElement } = await bootstrapCanvas(this.selector, component, bootstrapOptions);
+		const { app, canvasElement } = await bootstrapCanvas(this.selector, __ce_component, bootstrapOptions);
 		this.canvasApp = app;
 		this.canvasElement = canvasElement;
 		this.renderer = app.renderer;
+		this.setupPointerTracking();
 		this.tick = canvasElement?.propObservables?.context["tick"].observable;
+		this.flushPendingSyncPackets();
 		const inputCheckSubscription = this.tick.subscribe(() => {
 			if (Date.now() - this.lastInputTime > 100) {
 				const player = this.getCurrentPlayer();
@@ -144,6 +178,7 @@ var RpgClientEngine = class {
 		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));
 		this.resizeHandler = () => {
@@ -152,6 +187,7 @@ var RpgClientEngine = class {
 		window.addEventListener("resize", this.resizeHandler);
 		const tickSubscription = this.tick.subscribe((tick) => {
 			this.stepClientPhysicsTick();
+			this.projectiles.step();
 			this.flushPendingPredictedStates();
 			this.flushPendingMovePath();
 			this.hooks.callHooks("client-engine-onStep", this, tick).subscribe();
@@ -162,12 +198,46 @@ var RpgClientEngine = class {
 			}
 		});
 		this.tickSubscriptions.push(tickSubscription);
-		await this.webSocket.connection(() => {
-			inject(SaveClientService).initialize(this.webSocket);
-			this.initListeners();
-			this.guiService._initialize();
-			this.startPingPong();
-		});
+		this.startPingPong();
+	}
+	resolveSceneMapComponent() {
+		const components = this.hooks.getHookFunctions("client-sceneMap-component");
+		const component = components[components.length - 1];
+		if (component) this.sceneMapComponent = component;
+	}
+	setupPointerTracking() {
+		const renderer = this.renderer;
+		const canvas = renderer?.canvas ?? renderer?.view ?? this.canvasApp?.canvas;
+		if (!canvas || typeof canvas.addEventListener !== "function") return;
+		this.pointerCanvas = canvas;
+		this.pointerMoveHandler = (event) => {
+			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);
+	}
+	findViewportInstance() {
+		return (this.canvasApp?.stage?.children ?? []).find((child) => typeof child?.toWorld === "function" || child?.constructor?.name === "Viewport");
 	}
 	prepareSyncPayload(data) {
 		const payload = { ...data ?? {} };
@@ -202,39 +272,27 @@ var RpgClientEngine = class {
 	}
 	initListeners() {
 		this.webSocket.on("sync", (data) => {
-			if (data.pId) {
-				this.playerIdSignal.set(data.pId);
-				this.playerIdReceived$.next(true);
-			}
-			if (this.sceneResetQueued) {
-				this.sceneMap.reset();
-				this.sceneMap.loadPhysic();
-				this.sceneResetQueued = false;
-			}
-			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) : 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];
+			if (!this.tick) {
+				this.pendingSyncPackets.push(data);
+				return;
 			}
-			const players = payload.players || this.sceneMap.players();
-			if (players && Object.keys(players).length > 0) this.playersReceived$.next(true);
-			if ((payload.events || this.sceneMap.events()) !== void 0) this.eventsReceived$.next(true);
+			this.applySyncPacket(data);
 		});
 		this.webSocket.on("pong", (data) => {
-			this.rtt = Date.now() - data.clientTime;
+			const now = Date.now();
+			this.rtt = now - data.clientTime;
 			const estimatedTicksInFlight = Math.floor(this.rtt / 2 / (1e3 / 60));
 			const estimatedServerTickNow = data.serverTick + estimatedTicksInFlight;
+			this.updateServerTickEstimate(estimatedServerTickNow, now);
 			if (this.inputFrameCounter > 0) this.frameOffset = estimatedServerTickNow - data.clientFrame;
 			console.debug(`[Ping/Pong] RTT: ${this.rtt}ms, ServerTick: ${data.serverTick}, FrameOffset: ${this.frameOffset}`);
 		});
 		this.webSocket.on("changeMap", (data) => {
 			this.sceneResetQueued = true;
+			this.sceneMap.weatherState.set(null);
+			this.sceneMap.lightingState.set(null);
+			this.sceneMap.clearLightSpots();
+			this.projectiles.clear();
 			this.cameraFollowTargetId.set(null);
 			const transferToken = typeof data?.transferToken === "string" ? data.transferToken : void 0;
 			this.loadScene(data.mapId, transferToken);
@@ -245,14 +303,34 @@ var RpgClientEngine = class {
 			const player = object ? this.sceneMap.getObjectById(object) : void 0;
 			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);
 		});
 		this.webSocket.on("setAnimation", (data) => {
-			const { animationName, nbTimes, object, graphic } = data;
-			const player = this.sceneMap.getObjectById(object);
-			if (graphic !== void 0) player.setAnimation(animationName, graphic, nbTimes);
-			else player.setAnimation(animationName, nbTimes);
+			const { animationName, nbTimes, object, graphic, restoreAnimationName, restoreGraphics } = data;
+			const player = object ? this.sceneMap.getObjectById(object) : void 0;
+			if (!player) return;
+			const restoreOptions = {
+				restoreAnimationName,
+				restoreGraphics
+			};
+			if (graphic !== void 0) player.setAnimation(animationName, graphic, nbTimes, restoreOptions);
+			else player.setAnimation(animationName, nbTimes, restoreOptions);
 		});
 		this.webSocket.on("playSound", (data) => {
 			const { soundId, volume, loop } = data;
@@ -314,6 +392,10 @@ var RpgClientEngine = class {
 				seed: raw.seed
 			});
 		});
+		this.webSocket.on("lightingState", (data) => {
+			const raw = data && typeof data === "object" && "value" in data ? data.value : data;
+			this.sceneMap.lightingState.set(normalizeLightingState(raw));
+		});
 		this.webSocket.on("open", () => {
 			this.hooks.callHooks("client-engine-onConnected", this, this.socket).subscribe();
 			this.startPingPong();
@@ -323,9 +405,46 @@ var RpgClientEngine = class {
 			this.stopPingPong();
 		});
 		this.webSocket.on("error", (error) => {
-			this.hooks.callHooks("client-engine-onConnectError", this, error, this.socket).subscribe();
+			this.callConnectError(error);
 		});
 	}
+	async callConnectError(error) {
+		await lastValueFrom(this.hooks.callHooks("client-engine-onConnectError", this, error, this.socket));
+	}
+	flushPendingSyncPackets() {
+		const packets = this.pendingSyncPackets;
+		this.pendingSyncPackets = [];
+		packets.forEach((packet) => this.applySyncPacket(packet));
+	}
+	applySyncPacket(data) {
+		if (data.pId) {
+			this.playerIdSignal.set(data.pId);
+			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;
+		}
+		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) : 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 = payload.players || this.sceneMap.players();
+		if (players && Object.keys(players).length > 0) this.playersReceived$.next(true);
+		if ((payload.events || this.sceneMap.events()) !== void 0) this.eventsReceived$.next(true);
+	}
 	/**
 	* Start periodic ping/pong for client-server synchronization
 	* 
@@ -402,11 +521,17 @@ var RpgClientEngine = class {
 			room: mapId,
 			query: transferToken ? { transferToken } : void 0
 		});
-		await this.webSocket.reconnect(() => {
-			inject(SaveClientService).initialize(this.webSocket);
-			this.initListeners();
-			this.guiService._initialize();
-		});
+		try {
+			await this.webSocket.reconnect(() => {
+				inject(SaveClientService).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);
 		if (this.playerIdSignal()) this.playerIdReceived$.next(true);
@@ -458,7 +583,7 @@ var RpgClientEngine = class {
 	* If not found and a resolver is set, it calls the resolver to create the spritesheet.
 	* The resolved spritesheet is automatically cached for future use.
 	* 
-	* @param id - The spritesheet ID to retrieve
+	* @param id - The spritesheet ID or legacy tile ID to retrieve
 	* @returns The spritesheet if found or created, or undefined if not found and no resolver
 	* @returns Promise<any> if the resolver is asynchronous
 	* 
@@ -807,6 +932,41 @@ var RpgClientEngine = class {
 		return component;
 	}
 	/**
+	* Register a reusable sprite component that can be addressed by the server.
+	*
+	* Server-side component definitions only carry the component id and
+	* serializable props. The client registry maps that id to the CanvasEngine
+	* component that performs the actual rendering.
+	*
+	* @param id - Stable component id used by server component definitions
+	* @param component - CanvasEngine component to render for this id
+	* @returns The registered component
+	*
+	* @example
+	* ```ts
+	* engine.registerSpriteComponent('guildBadge', GuildBadgeComponent);
+	* ```
+	*/
+	registerSpriteComponent(id, component) {
+		this.spriteComponents.set(id, component);
+		return component;
+	}
+	/**
+	* Get a reusable sprite component by id.
+	*
+	* @param id - Component id registered on the client
+	* @returns The CanvasEngine component, or undefined when missing
+	*/
+	getSpriteComponent(id) {
+		return this.spriteComponents.get(id);
+	}
+	registerProjectileComponent(type, component) {
+		return this.projectiles.register(type, component);
+	}
+	getProjectileComponent(type) {
+		return this.projectiles.get(type);
+	}
+	/**
 	* Add a component animation to the engine
 	* 
 	* Component animations are temporary visual effects that can be displayed
@@ -882,13 +1042,34 @@ var RpgClientEngine = class {
 	*   duration: 1000,
 	*   onFinish: () => console.log('Fade complete')
 	* });
+	*
+	* // Wait until the transition component calls onFinish
+	* await engine.startTransition('fade', { duration: 1000 });
 	* ```
 	*/
 	startTransition(id, 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.`);
-		this.guiService.display(id, props);
+		return new Promise((resolve) => {
+			let finished = false;
+			const finish = (data) => {
+				if (finished) return;
+				finished = true;
+				props?.onFinish?.(data);
+				resolve();
+			};
+			this.guiService.display(id, {
+				...props,
+				onFinish: finish
+			});
+		});
 	}
 	async processInput({ input }) {
+		if (this.stopProcessingInput) return;
+		const currentPlayer = this.sceneMap.getCurrentPlayer();
+		if (!(!currentPlayer || getCanMoveValue(currentPlayer))) {
+			this.interruptCurrentPlayerMovement(currentPlayer);
+			return;
+		}
 		const timestamp = Date.now();
 		let frame;
 		let tick;
@@ -905,7 +1086,6 @@ var RpgClientEngine = class {
 			input,
 			playerId: this.playerId
 		}).subscribe();
-		const currentPlayer = this.sceneMap.getCurrentPlayer();
 		const bodyReady = this.ensureCurrentPlayerBody();
 		if (currentPlayer && bodyReady) {
 			currentPlayer.changeDirection(input);
@@ -918,13 +1098,18 @@ var RpgClientEngine = class {
 		this.emitMovePacket(input, frame, tick, timestamp, true);
 		this.lastInputTime = Date.now();
 	}
-	processAction({ action }) {
+	processAction(action, data) {
 		if (this.stopProcessingInput) return;
+		const currentPlayer = this.sceneMap.getCurrentPlayer();
+		if (!(!currentPlayer || getCanMoveValue(currentPlayer))) return;
+		const payload = normalizeActionInput(action, data);
 		this.hooks.callHooks("client-engine-onInput", this, {
-			input: "action",
+			input: payload.action,
+			action: payload.action,
+			data: payload.data,
 			playerId: this.playerId
 		}).subscribe();
-		this.webSocket.emit("action", { action });
+		this.webSocket.emit("action", payload);
 	}
 	get PIXI() {
 		return PIXI;
@@ -941,6 +1126,37 @@ var RpgClientEngine = class {
 	getPhysicsTick() {
 		return this.sceneMap?.getTick?.() ?? 0;
 	}
+	getPhysicsTickDurationMs() {
+		const timeStep = this.sceneMap?.physic?.getWorld?.()?.getTimeStep?.();
+		return typeof timeStep === "number" && Number.isFinite(timeStep) && timeStep > 0 ? timeStep * 1e3 : 1e3 / 60;
+	}
+	updateServerTickEstimate(serverTick, now = Date.now()) {
+		if (typeof serverTick !== "number" || !Number.isFinite(serverTick)) return;
+		this.latestServerTick = serverTick;
+		this.latestServerTickAt = now;
+	}
+	estimateServerTick(now = Date.now()) {
+		if (typeof this.latestServerTick !== "number" || this.latestServerTickAt <= 0) return;
+		const elapsedTicks = Math.max(0, (now - this.latestServerTickAt) / this.getPhysicsTickDurationMs());
+		return this.latestServerTick + elapsedTicks;
+	}
+	predictProjectileImpact(projectile) {
+		if (projectile.predictImpact === false) return null;
+		const sceneMap = this.sceneMap;
+		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
+		};
+	}
 	ensureCurrentPlayerBody() {
 		const player = this.sceneMap?.getCurrentPlayer();
 		const myId = this.playerIdSignal();
@@ -1008,6 +1224,11 @@ var RpgClientEngine = class {
 	}
 	flushPendingMovePath() {
 		if (!this.predictionEnabled || !this.prediction) return;
+		const player = this.sceneMap?.getCurrentPlayer?.();
+		if (player && !getCanMoveValue(player)) {
+			this.interruptCurrentPlayerMovement(player);
+			return;
+		}
 		const pendingInputs = this.prediction.getPendingInputs();
 		if (pendingInputs.length === 0) return;
 		const latest = pendingInputs[pendingInputs.length - 1];
@@ -1124,6 +1345,31 @@ var RpgClientEngine = class {
 		this.lastMovePathSentFrame = 0;
 	}
 	/**
+	* Stop local movement immediately and discard pending predicted movement.
+	*
+	* Use this before a blocking action such as an A-RPG attack, dialog, dash
+	* startup, or any client-side state where already buffered movement inputs
+	* must not be replayed after server reconciliation.
+	*
+	* @param player - Player object to stop. Defaults to the current player.
+	* @returns `true` when a player was found and interrupted.
+	*
+	* @example
+	* ```ts
+	* engine.interruptCurrentPlayerMovement();
+	* ```
+	*/
+	interruptCurrentPlayerMovement(player = this.sceneMap?.getCurrentPlayer?.()) {
+		if (!player) return false;
+		this.sceneMap?.stopMovement?.(player);
+		this.prediction?.clearPendingInputs();
+		this.pendingPredictionFrames = [];
+		this.lastInputTime = 0;
+		this.lastMovePathSentAt = Date.now();
+		this.lastMovePathSentFrame = this.inputFrameCounter;
+		return true;
+	}
+	/**
 	* Trigger a flash animation on a sprite
 	* 
 	* This method allows you to trigger a flash effect on any sprite from client-side code.
@@ -1177,6 +1423,7 @@ var RpgClientEngine = class {
 		if (sprite && typeof sprite.flash === "function") sprite.flash(options);
 	}
 	applyServerAck(ack) {
+		this.updateServerTickEstimate(ack.serverTick);
 		if (this.predictionEnabled && this.prediction) {
 			const result = this.prediction.applyServerAck({
 				frame: ack.frame,
@@ -1205,6 +1452,10 @@ var RpgClientEngine = class {
 	reconcilePrediction(authoritativeState, pendingInputs) {
 		const player = this.getCurrentPlayer();
 		if (!player) return;
+		if (!getCanMoveValue(player)) {
+			this.interruptCurrentPlayerMovement(player);
+			return;
+		}
 		this.sceneMap.stopMovement(player);
 		this.applyAuthoritativeState(authoritativeState);
 		if (!pendingInputs.length) return;
@@ -1277,6 +1528,12 @@ var RpgClientEngine = class {
 				window.removeEventListener("resize", this.resizeHandler);
 				this.resizeHandler = void 0;
 			}
+			if (this.pointerMoveHandler && this.pointerCanvas) {
+				this.pointerCanvas.removeEventListener("pointermove", this.pointerMoveHandler);
+				this.pointerCanvas.removeEventListener("pointerdown", this.pointerMoveHandler);
+				this.pointerMoveHandler = void 0;
+				this.pointerCanvas = void 0;
+			}
 			const rendererStillExists = this.renderer && typeof this.renderer.destroy === "function";
 			if (this.canvasApp && typeof this.canvasApp.destroy === "function") {
 				try {