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

package/dist/RpgClientEngine.js

@@ -1,9 +1,11 @@
 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 __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";
@@ -12,25 +14,29 @@ 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$1 from "./components/dynamics/text.ce.js";
-import __ce_component$2 from "./components/dynamics/bar.ce.js";
-import __ce_component$3 from "./components/dynamics/shape.ce.js";
-import __ce_component$4 from "./components/dynamics/image.ce.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, normalizeLightingState } 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([]);
@@ -46,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;
@@ -60,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 = {
@@ -78,12 +87,12 @@ var RpgClientEngine = class {
 			id: "animation",
 			component: PrebuiltComponentAnimations.Animation
 		});
-		this.registerSpriteComponent("rpg:text", __ce_component$1);
-		this.registerSpriteComponent("rpg:hpBar", __ce_component$2);
-		this.registerSpriteComponent("rpg:spBar", __ce_component$2);
-		this.registerSpriteComponent("rpg:bar", __ce_component$2);
-		this.registerSpriteComponent("rpg:shape", __ce_component$3);
-		this.registerSpriteComponent("rpg:image", __ce_component$4);
+		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();
 	}
@@ -132,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, __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();
@@ -156,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 = () => {
@@ -164,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();
@@ -174,12 +198,46 @@ var RpgClientEngine = class {
 			}
 		});
 		this.tickSubscriptions.push(tickSubscription);
-		await this.webSocket.connection(() => {
-			inject(SaveClientService).initialize();
-			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 ?? {} };
@@ -214,41 +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) => {
 			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);
@@ -259,6 +303,21 @@ 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);
 		});
@@ -346,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
 	* 
@@ -425,11 +521,17 @@ var RpgClientEngine = class {
 			room: mapId,
 			query: transferToken ? { transferToken } : void 0
 		});
-		await this.webSocket.reconnect(() => {
-			inject(SaveClientService).initialize();
-			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);
@@ -858,6 +960,12 @@ var RpgClientEngine = class {
 	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
 	* 
@@ -990,15 +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;
@@ -1015,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();
@@ -1281,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,
@@ -1385,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 {