@rpgjs/client 5.0.0-beta.12 → 5.0.0-beta.14

package/dist/RpgClientEngine.js

@@ -23,12 +23,68 @@ import { normalizeRoomMapId } from "./utils/mapId.js";
 import { ProjectileManager } from "./Game/ProjectileManager.js";
 import { ClientVisualRegistry } from "./Game/ClientVisuals.js";
 import { createClientPointerContext } from "./services/pointerContext.js";
+import { RpgClientInteractions } from "./services/interactions.js";
 import { EventComponentResolverRegistry } from "./Game/EventComponentResolver.js";
+import { RpgClientBuiltinI18n } from "./i18n.js";
 import { Howl, bootstrapCanvas, signal, trigger } from "canvasengine";
-import { Direction, ModulesToken, PredictionController, Vector2, normalizeLightingState } from "@rpgjs/common";
+import { Direction, ModulesToken, PredictionController, Vector2, getOrCreateI18nService, normalizeLightingState } from "@rpgjs/common";
 import { BehaviorSubject, combineLatest, filter, lastValueFrom, switchMap, take } from "rxjs";
 import * as PIXI from "pixi.js";
 //#region src/RpgClientEngine.ts
+var DEFAULT_DASH_ADDITIONAL_SPEED = 8;
+var DEFAULT_DASH_DURATION_MS = 180;
+var DEFAULT_DASH_COOLDOWN_MS = 450;
+var isDashInput = (input) => typeof input === "object" && input !== null && input.type === "dash";
+var isMoveInput = (input) => typeof input === "object" && input !== null && input.type === "move";
+var resolveMoveDirection = (input) => {
+	if (isMoveInput(input)) return input.direction;
+	if (typeof input === "string" || typeof input === "number") return input;
+};
+var directionToVector = (direction) => {
+	switch (direction) {
+		case Direction.Left: return {
+			x: -1,
+			y: 0
+		};
+		case Direction.Right: return {
+			x: 1,
+			y: 0
+		};
+		case Direction.Up: return {
+			x: 0,
+			y: -1
+		};
+		case Direction.Down:
+		default: return {
+			x: 0,
+			y: 1
+		};
+	}
+};
+var vectorToDirection = (direction) => {
+	if (Math.abs(direction.x) > Math.abs(direction.y)) return direction.x < 0 ? Direction.Left : Direction.Right;
+	return direction.y < 0 ? Direction.Up : Direction.Down;
+};
+var normalizeDashInput = (input, fallbackDirection) => {
+	const rawDirection = input.direction ?? directionToVector(fallbackDirection);
+	const rawX = Number(rawDirection?.x ?? 0);
+	const rawY = Number(rawDirection?.y ?? 0);
+	const magnitude = Math.hypot(rawX, rawY);
+	if (!Number.isFinite(magnitude) || magnitude <= 0) return null;
+	const additionalSpeed = typeof input.additionalSpeed === "number" && Number.isFinite(input.additionalSpeed) ? Math.max(0, Math.min(input.additionalSpeed, 64)) : DEFAULT_DASH_ADDITIONAL_SPEED;
+	const duration = typeof input.duration === "number" && Number.isFinite(input.duration) ? Math.max(1, Math.min(input.duration, 1e3)) : DEFAULT_DASH_DURATION_MS;
+	const cooldown = typeof input.cooldown === "number" && Number.isFinite(input.cooldown) ? Math.max(0, Math.min(input.cooldown, 5e3)) : DEFAULT_DASH_COOLDOWN_MS;
+	return {
+		type: "dash",
+		direction: {
+			x: rawX / magnitude,
+			y: rawY / magnitude
+		},
+		additionalSpeed,
+		duration,
+		cooldown
+	};
+};
 var RpgClientEngine = class {
 	constructor(context) {
 		this.context = context;
@@ -37,10 +93,12 @@ var RpgClientEngine = class {
 		this.width = signal("100%");
 		this.height = signal("100%");
 		this.spritesheets = /* @__PURE__ */ new Map();
+		this.spritesheetPromises = /* @__PURE__ */ new Map();
 		this.sounds = /* @__PURE__ */ new Map();
 		this.componentAnimations = [];
 		this.clientVisuals = new ClientVisualRegistry();
 		this.pointer = createClientPointerContext();
+		this.interactions = new RpgClientInteractions(this);
 		this.particleSettings = { emitters: [] };
 		this.playerIdSignal = signal(null);
 		this.spriteComponentsBehind = signal([]);
@@ -58,6 +116,7 @@ var RpgClientEngine = class {
 		this.lastClientPhysicsStepAt = 0;
 		this.frameOffset = 0;
 		this.latestServerTickAt = 0;
+		this.dashLockedUntil = 0;
 		this.rtt = 0;
 		this.pingInterval = null;
 		this.PING_INTERVAL_MS = 5e3;
@@ -80,6 +139,8 @@ var RpgClientEngine = class {
 		this.guiService = inject(RpgGui);
 		this.loadMapService = inject(LoadMapToken);
 		this.hooks = inject(ModulesToken);
+		this.i18nService = getOrCreateI18nService(context);
+		this.i18nService.addMessages(RpgClientBuiltinI18n, "rpgjs-client", 0);
 		this.projectiles = new ProjectileManager(this.hooks, (projectile) => this.predictProjectileImpact(projectile));
 		this.globalConfig = inject(GlobalConfigToken);
 		if (!this.globalConfig) this.globalConfig = {};
@@ -103,6 +164,21 @@ var RpgClientEngine = class {
 		this.predictionEnabled = this.globalConfig?.prediction?.enabled !== false;
 		this.initializePredictionController();
 	}
+	setLocale(locale) {
+		this.locale = locale;
+	}
+	getLocale() {
+		return this.locale || this.i18nService.defaultLocale;
+	}
+	t(key, params) {
+		return this.i18nService.t(key, params, this.getLocale());
+	}
+	i18n() {
+		return {
+			locale: this.getLocale(),
+			t: (key, params) => this.t(key, params)
+		};
+	}
 	/**
 	* Assigns a CanvasEngine KeyboardControls instance to the dependency injection context
 	* 
@@ -167,7 +243,6 @@ var RpgClientEngine = class {
 		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();
@@ -178,6 +253,7 @@ var RpgClientEngine = class {
 		this.tickSubscriptions.push(inputCheckSubscription);
 		this.hooks.callHooks("client-spritesheets-load", this).subscribe();
 		this.hooks.callHooks("client-spritesheetResolver-load", this).subscribe();
+		this.flushPendingSyncPackets();
 		this.hooks.callHooks("client-sounds-load", this).subscribe();
 		this.hooks.callHooks("client-soundResolver-load", this).subscribe();
 		RpgSound.init(this);
@@ -187,6 +263,7 @@ var RpgClientEngine = class {
 		this.hooks.callHooks("client-componentAnimations-load", this).subscribe();
 		this.hooks.callHooks("client-clientVisuals-load", this).subscribe();
 		this.hooks.callHooks("client-projectiles-load", this).subscribe();
+		this.hooks.callHooks("client-interactions-load", this).subscribe();
 		this.hooks.callHooks("client-sprite-load", this).subscribe();
 		await lastValueFrom(this.hooks.callHooks("client-engine-onStart", this));
 		this.resizeHandler = () => {
@@ -218,7 +295,7 @@ var RpgClientEngine = class {
 		const canvas = renderer?.canvas ?? renderer?.view ?? this.canvasApp?.canvas;
 		if (!canvas || typeof canvas.addEventListener !== "function") return;
 		this.pointerCanvas = canvas;
-		this.pointerMoveHandler = (event) => {
+		const updatePointer = (event) => {
 			const rect = canvas.getBoundingClientRect();
 			const screen = {
 				x: event.clientX - rect.left,
@@ -241,11 +318,59 @@ var RpgClientEngine = class {
 			}
 			this.pointer.update(screen, world);
 		};
+		this.pointerMoveHandler = (event) => {
+			updatePointer(event);
+			this.interactions.handlePointerMove(event);
+		};
+		this.pointerUpHandler = (event) => {
+			updatePointer(event);
+			this.interactions.handlePointerUp(event);
+		};
+		this.pointerCancelHandler = (event) => {
+			updatePointer(event);
+			this.interactions.cancelDrag(event);
+		};
 		canvas.addEventListener("pointermove", this.pointerMoveHandler);
 		canvas.addEventListener("pointerdown", this.pointerMoveHandler);
+		canvas.addEventListener("pointerup", this.pointerUpHandler);
+		canvas.addEventListener("pointercancel", this.pointerCancelHandler);
+		canvas.addEventListener("pointerleave", this.pointerCancelHandler);
+	}
+	updatePointerFromInteractionEvent(event) {
+		const global = event?.global ?? event?.data?.global;
+		if (!global) {
+			this.pointer.updateFromEvent(event);
+			return;
+		}
+		const screen = {
+			x: Number(global.x),
+			y: Number(global.y)
+		};
+		if (!Number.isFinite(screen.x) || !Number.isFinite(screen.y)) {
+			this.pointer.updateFromEvent(event);
+			return;
+		}
+		const viewport = this.findViewportInstance();
+		if (viewport && typeof viewport.toWorld === "function") {
+			const point = viewport.toWorld(screen.x, screen.y);
+			this.pointer.update(screen, {
+				x: Number(point.x),
+				y: Number(point.y)
+			});
+			return;
+		}
+		this.pointer.update(screen);
 	}
 	findViewportInstance() {
-		return (this.canvasApp?.stage?.children ?? []).find((child) => typeof child?.toWorld === "function" || child?.constructor?.name === "Viewport");
+		const find = (node) => {
+			if (!node) return void 0;
+			if (typeof node?.toWorld === "function" || node?.constructor?.name === "Viewport") return node;
+			for (const child of node.children ?? []) {
+				const viewport = find(child);
+				if (viewport) return viewport;
+			}
+		};
+		return find(this.canvasApp?.stage);
 	}
 	prepareSyncPayload(data) {
 		const payload = { ...data ?? {} };
@@ -569,6 +694,8 @@ var RpgClientEngine = class {
 			throw error;
 		}
 		const res = await this.loadMapService.load(mapId);
+		const loadedLighting = typeof res?.lighting !== "undefined" ? res.lighting : res?.data?.lighting;
+		if (typeof loadedLighting !== "undefined") this.sceneMap.lightingState.set(normalizeLightingState(loadedLighting));
 		this.sceneMap.data.set(res);
 		if (this.playerIdSignal()) this.playerIdReceived$.next(true);
 		const players = this.sceneMap.players();
@@ -637,12 +764,20 @@ var RpgClientEngine = class {
 	getSpriteSheet(id) {
 		if (this.spritesheets.has(id)) return this.spritesheets.get(id);
 		if (this.spritesheetResolver) {
+			if (this.spritesheetPromises.has(id)) return this.spritesheetPromises.get(id);
 			const result = this.spritesheetResolver(id);
-			if (result instanceof Promise) return result.then((spritesheet) => {
-				if (spritesheet) this.spritesheets.set(id, spritesheet);
-				return spritesheet;
-			});
-			else {
+			if (result instanceof Promise) {
+				const promise = result.then((spritesheet) => {
+					if (spritesheet) this.spritesheets.set(id, spritesheet);
+					this.spritesheetPromises.delete(id);
+					return spritesheet;
+				}).catch((error) => {
+					this.spritesheetPromises.delete(id);
+					throw error;
+				});
+				this.spritesheetPromises.set(id, promise);
+				return promise;
+			} else {
 				if (result) this.spritesheets.set(id, result);
 				return result;
 			}
@@ -1163,10 +1298,17 @@ var RpgClientEngine = class {
 			return;
 		}
 		const timestamp = Date.now();
+		const movementInput = isDashInput(input) ? normalizeDashInput(input, currentPlayer?.direction?.()) : input;
+		if (!movementInput) return;
+		if (isDashInput(movementInput)) {
+			const cooldown = movementInput.cooldown ?? DEFAULT_DASH_COOLDOWN_MS;
+			if (timestamp < this.dashLockedUntil) return;
+			this.dashLockedUntil = timestamp + cooldown;
+		}
 		let frame;
 		let tick;
 		if (this.predictionEnabled && this.prediction) {
-			const meta = this.prediction.recordInput(input, timestamp);
+			const meta = this.prediction.recordInput(movementInput, timestamp);
 			frame = meta.frame;
 			tick = meta.tick;
 		} else {
@@ -1175,20 +1317,25 @@ var RpgClientEngine = class {
 		}
 		this.inputFrameCounter = frame;
 		this.hooks.callHooks("client-engine-onInput", this, {
-			input,
+			input: movementInput,
 			playerId: this.playerId
 		}).subscribe();
 		const bodyReady = this.ensureCurrentPlayerBody();
 		if (currentPlayer && bodyReady) {
-			currentPlayer.changeDirection(input);
-			this.sceneMap.moveBody(currentPlayer, input);
+			this.applyPredictedMovementInput(currentPlayer, movementInput);
 			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.emitMovePacket(movementInput, frame, tick, timestamp, true);
+		this.lastInputTime = isDashInput(movementInput) ? Date.now() + (movementInput.duration ?? DEFAULT_DASH_DURATION_MS) : Date.now();
+	}
+	async processDash(input = {}) {
+		const currentPlayer = this.sceneMap.getCurrentPlayer();
+		const dashInput = normalizeDashInput(input, typeof currentPlayer?.direction === "function" ? currentPlayer.direction() : currentPlayer?.direction);
+		if (!dashInput) return;
+		await this.processInput({ input: dashInput });
 	}
 	processAction(action, data) {
 		if (this.stopProcessingInput) return;
@@ -1297,7 +1444,7 @@ var RpgClientEngine = class {
 				input: entry.direction,
 				x: state.x,
 				y: state.y,
-				direction: state.direction ?? entry.direction
+				direction: state.direction ?? resolveMoveDirection(entry.direction)
 			});
 		}
 		if (trajectory.length > this.MAX_MOVE_TRAJECTORY_POINTS) return trajectory.slice(-this.MAX_MOVE_TRAJECTORY_POINTS);
@@ -1332,6 +1479,17 @@ var RpgClientEngine = class {
 		if (now - this.lastMovePathSentAt < this.MOVE_PATH_RESEND_INTERVAL_MS) return;
 		this.emitMovePacket(latest.direction, latest.frame, latest.tick, now, false);
 	}
+	applyPredictedMovementInput(player, input) {
+		if (isDashInput(input)) {
+			const direction = vectorToDirection(input.direction);
+			player.changeDirection(direction);
+			return Boolean(this.sceneMap.dashBody?.(player, input));
+		}
+		const direction = resolveMoveDirection(input);
+		if (!direction) return false;
+		player.changeDirection(direction);
+		return Boolean(this.sceneMap.moveBody?.(player, direction));
+	}
 	getLocalPlayerState() {
 		const currentPlayer = this.sceneMap?.getCurrentPlayer();
 		if (!currentPlayer) return {
@@ -1557,7 +1715,7 @@ var RpgClientEngine = class {
 		const replayInputs = pendingInputs.slice(-600);
 		for (const entry of replayInputs) {
 			if (!entry?.direction) continue;
-			this.sceneMap.moveBody(player, entry.direction);
+			this.applyPredictedMovementInput(player, entry.direction);
 			this.sceneMap.stepPredictionTick();
 			this.prediction?.attachPredictedState(entry.frame, this.getLocalPlayerState());
 		}
@@ -1626,7 +1784,14 @@ var RpgClientEngine = class {
 			if (this.pointerMoveHandler && this.pointerCanvas) {
 				this.pointerCanvas.removeEventListener("pointermove", this.pointerMoveHandler);
 				this.pointerCanvas.removeEventListener("pointerdown", this.pointerMoveHandler);
+				if (this.pointerUpHandler) this.pointerCanvas.removeEventListener("pointerup", this.pointerUpHandler);
+				if (this.pointerCancelHandler) {
+					this.pointerCanvas.removeEventListener("pointercancel", this.pointerCancelHandler);
+					this.pointerCanvas.removeEventListener("pointerleave", this.pointerCancelHandler);
+				}
 				this.pointerMoveHandler = void 0;
+				this.pointerUpHandler = void 0;
+				this.pointerCancelHandler = void 0;
 				this.pointerCanvas = void 0;
 			}
 			const rendererStillExists = this.renderer && typeof this.renderer.destroy === "function";