@rpgjs/client 5.0.0-beta.20 → 5.0.0-beta.23

package/dist/components/gui/mobile/mobile.ce.js

@@ -1,77 +1,325 @@
 import { inject } from "../../../core/inject.js";
-import { Button, Container, Joystick, h, mount, signal, useDefineEmits, useDefineProps, useProps } from "canvasengine";
+import { Button, Container, Joystick, computed, cond, h, mount, signal, useDefineEmits, useDefineProps, useProps } from "canvasengine";
 //#region src/components/gui/mobile/mobile.ce
 function component($$props) {
 	useProps($$props);
-	useDefineProps($$props);
+	const defineProps = useDefineProps($$props);
 	useDefineEmits($$props);
+	const { data } = defineProps();
 	const controlsInstance = signal(null);
+	const options = computed(() => data?.() || {});
+	const layout = computed(() => options().layout || {});
+	const components = computed(() => options().components || {});
+	const buttons = computed(() => options().buttons || {});
+	const joystick = computed(() => options().joystick);
+	const readButtonOption = (name) => buttons()[name];
+	const buttonEnabled = (name, defaultValue) => {
+		const option = readButtonOption(name);
+		if (typeof option === "boolean") return option;
+		return option?.enabled ?? defaultValue;
+	};
+	const showActionButton = computed(() => buttonEnabled("action", true));
+	const showBackButton = computed(() => buttonEnabled("back", true));
+	const showDashButton = computed(() => buttonEnabled("dash", false));
+	const showJoystick = computed(() => joystick() !== false);
+	const joystickSide = computed(() => layout().joystickSide || "right");
+	const rootDirection = computed(() => joystickSide() === "left" ? "row-reverse" : "row");
+	const layoutGap = computed(() => layout().gap ?? 14);
+	const buttonsMargin = computed(() => layout().buttonsMargin ?? layout().margin ?? 50);
+	const joystickMargin = computed(() => layout().joystickMargin ?? layout().margin ?? (joystickSide() === "right" ? [
+		30,
+		54,
+		30,
+		30
+	] : [
+		30,
+		30,
+		30,
+		54
+	]));
+	function readObjectOption(option) {
+		return typeof option === "object" && option ? option : {};
+	}
+	function resolveButtonComponent(name) {
+		return readObjectOption(readButtonOption(name)).component || components().buttons?.[name] || Button;
+	}
+	const joystickComponent = computed(() => joystick()?.component || components().joystick || Joystick);
+	const actionButtonComponent = computed(() => resolveButtonComponent("action"));
+	const backButtonComponent = computed(() => resolveButtonComponent("back"));
+	const dashButtonComponent = computed(() => resolveButtonComponent("dash"));
+	let activeJoystickControl = null;
+	let activeJoystickPower = 0;
+	let joystickRepeatTimer = null;
+	const baseButtonTextStyle = {
+		fontSize: 24,
+		fontFamily: "Arial Bold",
+		color: "#ffffff"
+	};
+	const actionButtonStyle = {
+		backgroundColor: {
+			normal: "#f7fbff",
+			hover: "#ffffff",
+			pressed: "#8fd4ff",
+			disabled: "#7f8c8d"
+		},
+		text: {
+			...baseButtonTextStyle,
+			color: "#14253a"
+		},
+		border: {
+			color: "#ffffff",
+			width: 2
+		}
+	};
+	const backButtonStyle = {
+		backgroundColor: {
+			normal: "#243041",
+			hover: "#2f4059",
+			pressed: "#152132",
+			disabled: "#7f8c8d"
+		},
+		text: baseButtonTextStyle,
+		border: {
+			color: "#ffffff",
+			width: 1
+		}
+	};
+	const dashButtonStyle = {
+		backgroundColor: {
+			normal: "#243041",
+			hover: "#2f4059",
+			pressed: "#152132",
+			disabled: "#7f8c8d"
+		},
+		text: {
+			...baseButtonTextStyle,
+			fontSize: 20
+		},
+		border: {
+			color: "#ffffff",
+			width: 1
+		}
+	};
+	const defaultButtonProps = {
+		action: {
+			shape: "circle",
+			text: "A",
+			width: 68,
+			height: 68,
+			controls: controlsInstance,
+			controlName: "action",
+			style: actionButtonStyle,
+			alpha: .84
+		},
+		back: {
+			shape: "circle",
+			text: "B",
+			width: 56,
+			height: 56,
+			controls: controlsInstance,
+			controlName: "back",
+			style: backButtonStyle,
+			alpha: .78
+		},
+		dash: {
+			shape: "circle",
+			text: "R",
+			width: 56,
+			height: 56,
+			controls: controlsInstance,
+			controlName: "dash",
+			style: dashButtonStyle,
+			alpha: .78
+		}
+	};
+	const buttonProps = (name) => {
+		const { enabled, component, container, ...props } = readObjectOption(readButtonOption(name));
+		const defaultProps = defaultButtonProps[name];
+		return {
+			...defaultProps,
+			...props,
+			defaultProps
+		};
+	};
+	const buttonContainerProps = (name) => {
+		const props = buttonProps(name);
+		return {
+			width: props.width,
+			height: props.height,
+			...readObjectOption(readButtonOption(name)).container
+		};
+	};
+	const joystickProps = () => {
+		const { component, moveInterval, threshold, ...props } = readObjectOption(joystick());
+		const defaultProps = {
+			outerColor: "#d7e7ff",
+			innerColor: "#ffffff",
+			scale: .82,
+			outerScale: {
+				x: .86,
+				y: .86
+			},
+			innerScale: {
+				x: .88,
+				y: .88
+			},
+			onStart: onJoystickStart,
+			onChange: onJoystickChange,
+			onEnd: onJoystickEnd
+		};
+		return {
+			...defaultProps,
+			...props,
+			defaultProps
+		};
+	};
+	const applyJoystickOptions = (control) => {
+		const joystickOptions = joystick();
+		if (!control || !joystickOptions || joystickOptions === false) return;
+		control.joystick?.updateJoystickConfig?.({
+			...control.joystick?.getJoystickConfig?.(),
+			...typeof joystickOptions.moveInterval === "number" ? { moveInterval: joystickOptions.moveInterval } : {},
+			...typeof joystickOptions.threshold === "number" ? { threshold: joystickOptions.threshold } : {}
+		});
+	};
+	const getJoystickThreshold = () => {
+		const joystickOptions = joystick();
+		if (joystickOptions && joystickOptions !== false && typeof joystickOptions.threshold === "number") return joystickOptions.threshold;
+		return controlsInstance()?.joystick?.getJoystickConfig?.()?.threshold ?? .1;
+	};
+	const getJoystickMoveInterval = () => {
+		const joystickOptions = joystick();
+		if (joystickOptions && joystickOptions !== false && typeof joystickOptions.moveInterval === "number") return joystickOptions.moveInterval;
+		return controlsInstance()?.joystick?.getJoystickConfig?.()?.moveInterval ?? 50;
+	};
+	const controlForAxis = (negativeControl, positiveControl, negativeAngle, positiveAngle, angle) => {
+		return Math.abs(angle - negativeAngle) <= Math.abs(angle - positiveAngle) ? negativeControl : positiveControl;
+	};
+	const resolveJoystickControl = (event) => {
+		const direction = event?.direction;
+		if (direction === "top") return "up";
+		if (direction === "bottom") return "down";
+		if (direction === "left") return "left";
+		if (direction === "right") return "right";
+		const angle = Number(event?.angle);
+		if (!Number.isFinite(angle)) {
+			if (direction === "top_left") return "left";
+			if (direction === "top_right") return "right";
+			if (direction === "bottom_left") return "left";
+			if (direction === "bottom_right") return "right";
+			return null;
+		}
+		if (direction === "top_left") return controlForAxis("up", "left", 90, 180, angle);
+		if (direction === "top_right") return controlForAxis("right", "up", 0, 90, angle);
+		if (direction === "bottom_left") return controlForAxis("left", "down", 180, 270, angle);
+		if (direction === "bottom_right") return controlForAxis("right", "down", 360, 270, angle);
+		return null;
+	};
+	const applyJoystickControl = (name, isDown, power = activeJoystickPower) => {
+		const control = controlsInstance();
+		const joystickControls = control?.joystick;
+		if (joystickControls?.applyControl) return joystickControls.applyControl(name, isDown, { power });
+		const keyboard = control?.keyboard;
+		if (keyboard?.applyControl) return keyboard.applyControl(name, isDown);
+		return control?.applyControl?.(name, isDown, { power });
+	};
+	const stopJoystickRepeat = () => {
+		if (!joystickRepeatTimer) return;
+		clearInterval(joystickRepeatTimer);
+		joystickRepeatTimer = null;
+	};
+	const startJoystickRepeat = () => {
+		if (!activeJoystickControl || joystickRepeatTimer) return;
+		joystickRepeatTimer = setInterval(() => {
+			if (!activeJoystickControl) return;
+			applyJoystickControl(activeJoystickControl, true);
+		}, getJoystickMoveInterval());
+	};
+	const releaseJoystickControl = () => {
+		stopJoystickRepeat();
+		if (!activeJoystickControl) return;
+		const previous = activeJoystickControl;
+		activeJoystickControl = null;
+		activeJoystickPower = 0;
+		applyJoystickControl(previous, false, 0);
+	};
+	const activateJoystickControl = (controlName, power = 0) => {
+		if (!controlName) {
+			releaseJoystickControl();
+			return;
+		}
+		activeJoystickPower = power;
+		if (activeJoystickControl === controlName) {
+			startJoystickRepeat();
+			return;
+		}
+		releaseJoystickControl();
+		activeJoystickControl = controlName;
+		applyJoystickControl(controlName, true, power);
+		startJoystickRepeat();
+	};
+	const publishMobileDebug = (type, payload = {}) => {
+		const target = typeof window !== "undefined" ? window : globalThis;
+		if (!target.__RPGJS_MOBILE_DEBUG__) return;
+		const event = {
+			source: "mobile-gui",
+			type,
+			time: Date.now(),
+			...payload
+		};
+		target.__RPGJS_MOBILE_DEBUG_EVENTS__ = [...(target.__RPGJS_MOBILE_DEBUG_EVENTS__ || []).slice(-199), event];
+		target.__RPGJS_MOBILE_DEBUG_LAST__ = event;
+	};
+	const onJoystickStart = () => {
+		publishMobileDebug("joystick:start", { config: controlsInstance()?.joystick?.getJoystickConfig?.() });
+	};
+	const onJoystickChange = (event) => {
+		const threshold = getJoystickThreshold();
+		const controlName = event?.power >= threshold ? resolveJoystickControl(event) : null;
+		publishMobileDebug("joystick:change", {
+			direction: event?.direction,
+			power: event?.power,
+			angle: event?.angle,
+			threshold,
+			controlName,
+			config: controlsInstance()?.joystick?.getJoystickConfig?.()
+		});
+		activateJoystickControl(controlName, event?.power ?? 0);
+	};
+	const onJoystickEnd = () => {
+		publishMobileDebug("joystick:end", { controlName: activeJoystickControl });
+		releaseJoystickControl();
+	};
 	mount((element) => {
 		const control = inject("KeyboardControls");
 		controlsInstance.set(control);
+		applyJoystickOptions(control);
 	});
 	return h(Container, {
+		flexDirection: computed(() => rootDirection()),
 		justifyContent: "space-between",
 		alignItems: "flex-end",
 		width: "100%",
-		height: "100%"
+		height: "100%",
+		onBeforeDestroy: releaseJoystickControl
 	}, [h(Container, {
-		justifyContent: "flex-start",
+		justifyContent: "flex-end",
 		alignItems: "flex-end",
-		gap: 20
+		gap: computed(() => layoutGap()),
+		margin: computed(() => buttonsMargin())
 	}, h(Container, {
 		display: "flex",
-		direction: "column",
-		gap: 20,
-		margin: 50
-	}, [h(Button, {
-		text: "A",
-		shape: "circle",
-		width: 70,
-		height: 70,
-		controls: controlsInstance,
-		controlName: "action",
-		style: {
-			backgroundColor: {
-				normal: "#2ecc71",
-				hover: "#27ae60",
-				pressed: "#229954",
-				disabled: "#7f8c8d"
-			},
-			text: {
-				fontSize: 24,
-				fontFamily: "Arial Bold",
-				color: "#ffffff"
-			}
-		}
-	}), h(Button, {
-		text: "B",
-		shape: "circle",
-		width: 70,
-		height: 70,
-		controls: controlsInstance,
-		controlName: "back",
-		style: {
-			backgroundColor: {
-				normal: "#e74c3c",
-				hover: "#c0392b",
-				pressed: "#a93226",
-				disabled: "#7f8c8d"
-			},
-			text: {
-				fontSize: 24,
-				fontFamily: "Arial Bold",
-				color: "#ffffff"
-			}
-		}
-	})])), h(Container, {
-		margin: 100,
+		flexDirection: "row",
+		alignItems: "flex-end",
+		gap: computed(() => layoutGap())
+	}, [
+		cond(computed(() => showDashButton()), () => h(Container, buttonContainerProps("dash"), h(dashButtonComponent(), buttonProps("dash")))),
+		cond(computed(() => showActionButton()), () => h(Container, buttonContainerProps("action"), h(actionButtonComponent(), buttonProps("action")))),
+		cond(computed(() => showBackButton()), () => h(Container, buttonContainerProps("back"), h(backButtonComponent(), buttonProps("back"))))
+	])), h(Container, {
+		margin: computed(() => joystickMargin()),
 		alignItems: "flex-end"
-	}, h(Container, null, h(Joystick, {
-		controls: controlsInstance,
-		outerColor: "#34495e",
-		innerColor: "#3498db"
-	})))]);
+	}, cond(computed(() => showJoystick()), () => h(joystickComponent(), joystickProps())))]);
 }
 var __ce_component = component;
 //#endregion

package/dist/components/gui/mobile/mobile.ce.js.map

@@ -1 +1 @@
-{"version":3,"file":"mobile.ce.js","names":[],"sources":["../../../../src/components/gui/mobile/mobile.ce"],"sourcesContent":["<Container justifyContent=\"space-between\" alignItems=\"flex-end\" width=\"100%\" height=\"100%\">\n    <!-- Gamepad buttons A and B (left side) -->\n    <Container justifyContent=\"flex-start\" alignItems=\"flex-end\"  gap={20}>\n        <Container display=\"flex\" direction=\"column\" gap={20} margin={50}>\n            <!-- Button B (top) -->\n  \n            <!-- Button A (bottom) -->\n            <Button \n                text=\"A\"\n                shape=\"circle\"\n                width={70}\n                height={70}\n                controls={controlsInstance}\n                controlName=\"action\"\n                style={{\n                    backgroundColor: {\n                        normal: \"#2ecc71\",\n                        hover: \"#27ae60\",\n                        pressed: \"#229954\",\n                        disabled: \"#7f8c8d\"\n                    },\n                    text: {\n                        fontSize: 24,\n                        fontFamily: \"Arial Bold\",\n                        color: \"#ffffff\"\n                    }\n                }}\n            />\n\n            <Button \n                text=\"B\"\n                shape=\"circle\"\n                width={70}\n                height={70}\n                controls={controlsInstance}\n                controlName=\"back\"\n                style={{\n                    backgroundColor: {\n                        normal: \"#e74c3c\",\n                        hover: \"#c0392b\",\n                        pressed: \"#a93226\",\n                        disabled: \"#7f8c8d\"\n                    },\n                    text: {\n                        fontSize: 24,\n                        fontFamily: \"Arial Bold\",\n                        color: \"#ffffff\"\n                    }\n                }}\n            />\n\n        </Container>\n    </Container>\n    \n    <Container margin={100} alignItems=\"flex-end\">\n        <Container>\n            <Joystick \n                controls={controlsInstance}\n                outerColor=\"#34495e\"\n                innerColor=\"#3498db\"\n            />\n        </Container>\n    </Container>\n</Container>\n\n<script>\n    import { signal, mount } from 'canvasengine'\n    import { Button } from 'canvasengine'\n    import { inject } from '../../../core/inject'\n    import { RpgClientEngine } from '../../../RpgClientEngine'\n    import { Direction } from '@rpgjs/common'\n\n\n    const controlsInstance = signal(null)\n\n    mount((element) => {\n        const control = inject('KeyboardControls')\n        controlsInstance.set(control)\n    })\n</script>"],"mappings":";;;AASM,SAAS,UAAQ,SAAM;CACN,SAAE,OAAA;CACC,eAAA,OAAA;CACA,eAAgB,OAAA;CAClC,MAAM,mBAAe,OAAM,IAAA;CACnC,OAAO,YAAS;EACZ,MAAM,UAAU,OAAA,kBAAiB;EACjC,iBAAiB,IAAG,OAAQ;CAChC,CAAC;CAEO,OADY,EAAE,WAAW;EAAE,gBAAO;EAAA,YAAA;EAAA,OAAA;EAAA,QAAA;CAAA,GAAA,CAAA,EAAA,WAAA;EAAA,gBAAA;EAAA,YAAA;EAAA,KAAA;CAAA,GAAA,EAAA,WAAA;EAAA,SAAA;EAAA,WAAA;EAAA,KAAA;EAAA,QAAA;CAAA,GAAA,CAAA,EAAA,QAAA;EAAA,MAAA;EAAA,OAAA;EAAA,OAAA;EAAA,QAAA;EAAA,UAAA;EAAA,aAAA;EAAA,OAAA;GAAA,iBAAA;IAAA,QAAA;IAAA,OAAA;IAAA,SAAA;IAAA,UAAA;GAAA;GAAA,MAAA;IAAA,UAAA;IAAA,YAAA;IAAA,OAAA;GAAA;EAAA;CAAA,CAAA,GAAA,EAAA,QAAA;EAAA,MAAA;EAAA,OAAA;EAAA,OAAA;EAAA,QAAA;EAAA,UAAA;EAAA,aAAA;EAAA,OAAA;GAAA,iBAAA;IAAA,QAAA;IAAA,OAAA;IAAA,SAAA;IAAA,UAAA;GAAA;GAAA,MAAA;IAAA,UAAA;IAAA,YAAA;IAAA,OAAA;GAAA;EAAA;CAAA,CAAA,CAAA,CAAA,CAAA,GAAA,EAAA,WAAA;EAAA,QAAA;EAAA,YAAA;CAAA,GAAA,EAAA,WAAA,MAAA,EAAA,UAAA;EAAA,UAAA;EAAA,YAAA;EAAA,YAAA;CAAA,CAAA,CAAA,CAAA,CAAA,CACvB;AACb;AAEA,IAAM,iBAAY"}
+{"version":3,"file":"mobile.ce.js","names":[],"sources":["../../../../src/components/gui/mobile/mobile.ce"],"sourcesContent":["<Container flexDirection={rootDirection()} justifyContent=\"space-between\" alignItems=\"flex-end\" width=\"100%\" height=\"100%\" onBeforeDestroy={releaseJoystickControl}>\n    <Container justifyContent=\"flex-end\" alignItems=\"flex-end\" gap={layoutGap()} margin={buttonsMargin()}>\n        <Container display=\"flex\" flexDirection=\"row\" alignItems=\"flex-end\" gap={layoutGap()}>\n            @if (showDashButton()) {\n                <Container ...buttonContainerProps(\"dash\")>\n                    <dashButtonComponent() ...buttonProps(\"dash\") />\n                </Container>\n            }\n\n            @if (showActionButton()) {\n                <Container ...buttonContainerProps(\"action\")>\n                    <actionButtonComponent() ...buttonProps(\"action\") />\n                </Container>\n            }\n\n            @if (showBackButton()) {\n                <Container ...buttonContainerProps(\"back\")>\n                    <backButtonComponent() ...buttonProps(\"back\") />\n                </Container>\n            }\n\n        </Container>\n    </Container>\n\n    <Container margin={joystickMargin()} alignItems=\"flex-end\">\n        @if (showJoystick()) {\n            <joystickComponent() ...joystickProps() />\n        }\n    </Container>\n</Container>\n\n<script>\n    import { Button, Joystick, signal, mount, computed } from 'canvasengine'\n    import { inject } from '../../../core/inject'\n\n    const { data } = defineProps()\n    const controlsInstance = signal(null)\n    const options = computed(() => data?.() || {})\n    const layout = computed(() => options().layout || {})\n    const components = computed(() => options().components || {})\n    const buttons = computed(() => options().buttons || {})\n    const joystick = computed(() => options().joystick)\n\n    const readButtonOption = (name) => buttons()[name]\n    const buttonEnabled = (name, defaultValue) => {\n        const option = readButtonOption(name)\n        if (typeof option === \"boolean\") return option\n        return option?.enabled ?? defaultValue\n    }\n\n    const showActionButton = computed(() => buttonEnabled(\"action\", true))\n    const showBackButton = computed(() => buttonEnabled(\"back\", true))\n    const showDashButton = computed(() => buttonEnabled(\"dash\", false))\n    const showJoystick = computed(() => joystick() !== false)\n    const joystickSide = computed(() => layout().joystickSide || \"right\")\n    const rootDirection = computed(() => joystickSide() === \"left\" ? \"row-reverse\" : \"row\")\n    const layoutGap = computed(() => layout().gap ?? 14)\n    const buttonsMargin = computed(() => layout().buttonsMargin ?? layout().margin ?? 50)\n    const joystickMargin = computed(() => (\n        layout().joystickMargin\n        ?? layout().margin\n        ?? (joystickSide() === \"right\" ? [30, 54, 30, 30] : [30, 30, 30, 54])\n    ))\n\n    function readObjectOption(option) {\n        return typeof option === \"object\" && option ? option : {}\n    }\n\n    function resolveButtonComponent(name) {\n        const option = readObjectOption(readButtonOption(name))\n        return option.component || components().buttons?.[name] || Button\n    }\n\n    const joystickComponent = computed(() => joystick()?.component || components().joystick || Joystick)\n    const actionButtonComponent = computed(() => resolveButtonComponent(\"action\"))\n    const backButtonComponent = computed(() => resolveButtonComponent(\"back\"))\n    const dashButtonComponent = computed(() => resolveButtonComponent(\"dash\"))\n    let activeJoystickControl = null\n    let activeJoystickPower = 0\n    let joystickRepeatTimer = null\n\n    const baseButtonTextStyle = {\n        fontSize: 24,\n        fontFamily: \"Arial Bold\",\n        color: \"#ffffff\"\n    }\n\n    const actionButtonStyle = {\n        backgroundColor: {\n            normal: \"#f7fbff\",\n            hover: \"#ffffff\",\n            pressed: \"#8fd4ff\",\n            disabled: \"#7f8c8d\"\n        },\n        text: {\n            ...baseButtonTextStyle,\n            color: \"#14253a\"\n        },\n        border: {\n            color: \"#ffffff\",\n            width: 2\n        }\n    }\n\n    const backButtonStyle = {\n        backgroundColor: {\n            normal: \"#243041\",\n            hover: \"#2f4059\",\n            pressed: \"#152132\",\n            disabled: \"#7f8c8d\"\n        },\n        text: baseButtonTextStyle,\n        border: {\n            color: \"#ffffff\",\n            width: 1\n        }\n    }\n\n    const dashButtonStyle = {\n        backgroundColor: {\n            normal: \"#243041\",\n            hover: \"#2f4059\",\n            pressed: \"#152132\",\n            disabled: \"#7f8c8d\"\n        },\n        text: {\n            ...baseButtonTextStyle,\n            fontSize: 20\n        },\n        border: {\n            color: \"#ffffff\",\n            width: 1\n        }\n    }\n\n    const defaultButtonProps = {\n        action: {\n            shape: \"circle\",\n            text: \"A\",\n            width: 68,\n            height: 68,\n            controls: controlsInstance,\n            controlName: \"action\",\n            style: actionButtonStyle,\n            alpha: 0.84\n        },\n        back: {\n            shape: \"circle\",\n            text: \"B\",\n            width: 56,\n            height: 56,\n            controls: controlsInstance,\n            controlName: \"back\",\n            style: backButtonStyle,\n            alpha: 0.78\n        },\n        dash: {\n            shape: \"circle\",\n            text: \"R\",\n            width: 56,\n            height: 56,\n            controls: controlsInstance,\n            controlName: \"dash\",\n            style: dashButtonStyle,\n            alpha: 0.78\n        }\n    }\n\n    const buttonProps = (name) => {\n        const option = readObjectOption(readButtonOption(name))\n        const { enabled, component, container, ...props } = option\n        const defaultProps = defaultButtonProps[name]\n        return {\n            ...defaultProps,\n            ...props,\n            defaultProps\n        }\n    }\n\n    const buttonContainerProps = (name) => {\n        const props = buttonProps(name)\n        return {\n            width: props.width,\n            height: props.height,\n            ...readObjectOption(readButtonOption(name)).container\n        }\n    }\n\n    const joystickProps = () => {\n        const joystickOptions = readObjectOption(joystick())\n        const { component, moveInterval, threshold, ...props } = joystickOptions\n        const defaultProps = {\n            outerColor: \"#d7e7ff\",\n            innerColor: \"#ffffff\",\n            scale: 0.82,\n            outerScale: { x: 0.86, y: 0.86 },\n            innerScale: { x: 0.88, y: 0.88 },\n            onStart: onJoystickStart,\n            onChange: onJoystickChange,\n            onEnd: onJoystickEnd\n        }\n        return {\n            ...defaultProps,\n            ...props,\n            defaultProps\n        }\n    }\n\n    const applyJoystickOptions = (control) => {\n        const joystickOptions = joystick()\n        if (!control || !joystickOptions || joystickOptions === false) return\n        control.joystick?.updateJoystickConfig?.({\n            ...control.joystick?.getJoystickConfig?.(),\n            ...(typeof joystickOptions.moveInterval === \"number\" ? { moveInterval: joystickOptions.moveInterval } : {}),\n            ...(typeof joystickOptions.threshold === \"number\" ? { threshold: joystickOptions.threshold } : {})\n        })\n    }\n\n    const getJoystickThreshold = () => {\n        const joystickOptions = joystick()\n        if (joystickOptions && joystickOptions !== false && typeof joystickOptions.threshold === \"number\") {\n            return joystickOptions.threshold\n        }\n        return controlsInstance()?.joystick?.getJoystickConfig?.()?.threshold ?? 0.1\n    }\n\n    const getJoystickMoveInterval = () => {\n        const joystickOptions = joystick()\n        if (joystickOptions && joystickOptions !== false && typeof joystickOptions.moveInterval === \"number\") {\n            return joystickOptions.moveInterval\n        }\n        return controlsInstance()?.joystick?.getJoystickConfig?.()?.moveInterval ?? 50\n    }\n\n    const controlForAxis = (negativeControl, positiveControl, negativeAngle, positiveAngle, angle) => {\n        const distanceToNegative = Math.abs(angle - negativeAngle)\n        const distanceToPositive = Math.abs(angle - positiveAngle)\n        return distanceToNegative <= distanceToPositive ? negativeControl : positiveControl\n    }\n\n    const resolveJoystickControl = (event) => {\n        const direction = event?.direction\n        if (direction === \"top\") return \"up\"\n        if (direction === \"bottom\") return \"down\"\n        if (direction === \"left\") return \"left\"\n        if (direction === \"right\") return \"right\"\n\n        const angle = Number(event?.angle)\n        if (!Number.isFinite(angle)) {\n            if (direction === \"top_left\") return \"left\"\n            if (direction === \"top_right\") return \"right\"\n            if (direction === \"bottom_left\") return \"left\"\n            if (direction === \"bottom_right\") return \"right\"\n            return null\n        }\n\n        if (direction === \"top_left\") return controlForAxis(\"up\", \"left\", 90, 180, angle)\n        if (direction === \"top_right\") return controlForAxis(\"right\", \"up\", 0, 90, angle)\n        if (direction === \"bottom_left\") return controlForAxis(\"left\", \"down\", 180, 270, angle)\n        if (direction === \"bottom_right\") return controlForAxis(\"right\", \"down\", 360, 270, angle)\n        return null\n    }\n\n    const applyJoystickControl = (name, isDown, power = activeJoystickPower) => {\n        const control = controlsInstance()\n        const joystickControls = control?.joystick\n        if (joystickControls?.applyControl) {\n            return joystickControls.applyControl(name, isDown, { power })\n        }\n        const keyboard = control?.keyboard\n        if (keyboard?.applyControl) return keyboard.applyControl(name, isDown)\n        return control?.applyControl?.(name, isDown, { power })\n    }\n\n    const stopJoystickRepeat = () => {\n        if (!joystickRepeatTimer) return\n        clearInterval(joystickRepeatTimer)\n        joystickRepeatTimer = null\n    }\n\n    const startJoystickRepeat = () => {\n        if (!activeJoystickControl || joystickRepeatTimer) return\n        joystickRepeatTimer = setInterval(() => {\n            if (!activeJoystickControl) return\n            applyJoystickControl(activeJoystickControl, true)\n        }, getJoystickMoveInterval())\n    }\n\n    const releaseJoystickControl = () => {\n        stopJoystickRepeat()\n        if (!activeJoystickControl) return\n        const previous = activeJoystickControl\n        activeJoystickControl = null\n        activeJoystickPower = 0\n        applyJoystickControl(previous, false, 0)\n    }\n\n    const activateJoystickControl = (controlName, power = 0) => {\n        if (!controlName) {\n            releaseJoystickControl()\n            return\n        }\n        activeJoystickPower = power\n        if (activeJoystickControl === controlName) {\n            startJoystickRepeat()\n            return\n        }\n        releaseJoystickControl()\n        activeJoystickControl = controlName\n        applyJoystickControl(controlName, true, power)\n        startJoystickRepeat()\n    }\n\n    const publishMobileDebug = (type, payload = {}) => {\n        const target = typeof window !== \"undefined\" ? window : globalThis\n        if (!target.__RPGJS_MOBILE_DEBUG__) return\n        const event = {\n            source: \"mobile-gui\",\n            type,\n            time: Date.now(),\n            ...payload\n        }\n        target.__RPGJS_MOBILE_DEBUG_EVENTS__ = [\n            ...(target.__RPGJS_MOBILE_DEBUG_EVENTS__ || []).slice(-199),\n            event\n        ]\n        target.__RPGJS_MOBILE_DEBUG_LAST__ = event\n    }\n\n    const onJoystickStart = () => {\n        publishMobileDebug(\"joystick:start\", {\n            config: controlsInstance()?.joystick?.getJoystickConfig?.()\n        })\n    }\n\n    const onJoystickChange = (event) => {\n        const threshold = getJoystickThreshold()\n        const controlName = event?.power >= threshold ? resolveJoystickControl(event) : null\n        publishMobileDebug(\"joystick:change\", {\n            direction: event?.direction,\n            power: event?.power,\n            angle: event?.angle,\n            threshold,\n            controlName,\n            config: controlsInstance()?.joystick?.getJoystickConfig?.()\n        })\n        activateJoystickControl(controlName, event?.power ?? 0)\n    }\n\n    const onJoystickEnd = () => {\n        publishMobileDebug(\"joystick:end\", {\n            controlName: activeJoystickControl\n        })\n        releaseJoystickControl()\n    }\n\n    mount((element) => {\n        const control = inject('KeyboardControls')\n        controlsInstance.set(control)\n        applyJoystickOptions(control)\n    })\n</script>\n"],"mappings":"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"}

package/dist/index.d.ts

@@ -30,5 +30,6 @@ export { RpgClientEvent } from './Game/Event';
 export * from './Game/ProjectileManager';
 export * from './Game/ClientVisuals';
 export { withMobile } from './components/gui/mobile';
+export type { MobileButtonComponentProps, MobileGuiButtonOptions, MobileGuiComponentsOptions, MobileGuiEnabled, MobileGuiJoystickOptions, MobileGuiJoystickSide, MobileGuiLayoutOptions, MobileGuiMargin, MobileGuiOptions, MobileJoystickComponentProps, } from './components/gui/mobile';
 export * from './services/AbstractSocket';
 export * from './i18n';

package/dist/services/cameraFollow.d.ts

@@ -0,0 +1,51 @@
+export declare const DEFAULT_CAMERA_FOLLOW_TIME = 1000;
+export declare const DEFAULT_CAMERA_FOLLOW_EASE = "easeInOutSine";
+export declare const CAMERA_FOLLOW_EASES: readonly ["linear", "easeInQuad", "easeOutQuad", "easeInOutQuad", "easeInCubic", "easeOutCubic", "easeInOutCubic", "easeInQuart", "easeOutQuart", "easeInOutQuart", "easeInQuint", "easeOutQuint", "easeInOutQuint", "easeInSine", "easeOutSine", "easeInOutSine", "easeInExpo", "easeOutExpo", "easeInOutExpo", "easeInCirc", "easeOutCirc", "easeInOutCirc", "easeInElastic", "easeOutElastic", "easeInOutElastic", "easeInBack", "easeOutBack", "easeInOutBack", "easeInBounce", "easeOutBounce", "easeInOutBounce"];
+export type CameraFollowEase = typeof CAMERA_FOLLOW_EASES[number];
+export type CameraFollowSmoothMoveOptions = {
+    /** Enable or disable the smooth transition when options are sent as an object. */
+    enabled?: boolean;
+    /** Duration of the transition to the new camera target, in milliseconds. */
+    time?: number;
+    /** pixi-viewport easing name, for example "easeInOutQuad". */
+    ease?: CameraFollowEase;
+    /** Continuous follow speed after the transition. 0 keeps the target centered instantly. */
+    speed?: number;
+    /** Continuous follow acceleration after the transition. */
+    acceleration?: number | null;
+    /** Center radius where the followed target can move without moving the viewport. */
+    radius?: number | null;
+};
+export type CameraFollowSmoothMove = boolean | CameraFollowSmoothMoveOptions;
+export type CameraFollowTarget = {
+    x: number;
+    y: number;
+    destroyed?: boolean;
+} | null | undefined;
+export type CameraFollowPosition = {
+    x: number;
+    y: number;
+};
+export interface CameraFollowApplyContext {
+    viewport: any;
+    target: CameraFollowTarget;
+    smoothMove: CameraFollowSmoothMove;
+    followRevision: number;
+    isCurrentRevision: (revision: number) => boolean;
+    shouldFollowCamera: () => boolean;
+}
+export declare const smoothMoveEnabled: (smoothMove: CameraFollowSmoothMove) => boolean;
+export declare const cameraFollowAnimationOptions: (smoothMove: CameraFollowSmoothMove) => {
+    time: number;
+    ease: "easeInOutSine" | "linear" | "easeInQuad" | "easeOutQuad" | "easeInOutQuad" | "easeInCubic" | "easeOutCubic" | "easeInOutCubic" | "easeInQuart" | "easeOutQuart" | "easeInOutQuart" | "easeInQuint" | "easeOutQuint" | "easeInOutQuint" | "easeInSine" | "easeOutSine" | "easeInExpo" | "easeOutExpo" | "easeInOutExpo" | "easeInCirc" | "easeOutCirc" | "easeInOutCirc" | "easeInElastic" | "easeOutElastic" | "easeInOutElastic" | "easeInBack" | "easeOutBack" | "easeInOutBack" | "easeInBounce" | "easeOutBounce" | "easeInOutBounce";
+} | null;
+export declare const cameraFollowOptions: (smoothMove: CameraFollowSmoothMove) => {
+    speed?: number;
+    acceleration?: number | null;
+    radius?: number | null;
+} | undefined;
+export declare const clearCameraFollowPlugins: (viewport: any) => void;
+export declare const ownsCameraFollowRevision: (appliedRevision: number | null, currentRevision: number) => boolean;
+export declare const readCameraFollowPosition: (target: CameraFollowTarget) => CameraFollowPosition | null;
+export declare const followCameraInstantly: (viewport: any, target: CameraFollowTarget, smoothMove: CameraFollowSmoothMove) => boolean;
+export declare const applyCameraFollow: ({ viewport, target, smoothMove, followRevision, isCurrentRevision, shouldFollowCamera, }: CameraFollowApplyContext) => boolean;

package/dist/services/cameraFollow.js

@@ -0,0 +1,134 @@
+//#region src/services/cameraFollow.ts
+var DEFAULT_CAMERA_FOLLOW_TIME = 1e3;
+var DEFAULT_CAMERA_FOLLOW_EASE = "easeInOutSine";
+var CAMERA_FOLLOW_EASES = [
+	"linear",
+	"easeInQuad",
+	"easeOutQuad",
+	"easeInOutQuad",
+	"easeInCubic",
+	"easeOutCubic",
+	"easeInOutCubic",
+	"easeInQuart",
+	"easeOutQuart",
+	"easeInOutQuart",
+	"easeInQuint",
+	"easeOutQuint",
+	"easeInOutQuint",
+	"easeInSine",
+	"easeOutSine",
+	"easeInOutSine",
+	"easeInExpo",
+	"easeOutExpo",
+	"easeInOutExpo",
+	"easeInCirc",
+	"easeOutCirc",
+	"easeInOutCirc",
+	"easeInElastic",
+	"easeOutElastic",
+	"easeInOutElastic",
+	"easeInBack",
+	"easeOutBack",
+	"easeInOutBack",
+	"easeInBounce",
+	"easeOutBounce",
+	"easeInOutBounce"
+];
+var finiteNumber = (value, fallback) => {
+	return typeof value === "number" && Number.isFinite(value) ? value : fallback;
+};
+var isCameraFollowEase = (value) => {
+	return typeof value === "string" && CAMERA_FOLLOW_EASES.includes(value);
+};
+var smoothMoveEnabled = (smoothMove) => {
+	if (smoothMove === false) return false;
+	if (typeof smoothMove === "object" && smoothMove !== null && smoothMove.enabled === false) return false;
+	return true;
+};
+var cameraFollowAnimationOptions = (smoothMove) => {
+	if (!smoothMoveEnabled(smoothMove)) return null;
+	const options = typeof smoothMove === "object" && smoothMove !== null ? smoothMove : {};
+	return {
+		time: Math.max(0, finiteNumber(options.time, DEFAULT_CAMERA_FOLLOW_TIME)),
+		ease: isCameraFollowEase(options.ease) ? options.ease : DEFAULT_CAMERA_FOLLOW_EASE
+	};
+};
+var cameraFollowOptions = (smoothMove) => {
+	if (typeof smoothMove !== "object" || smoothMove === null) return void 0;
+	const options = {};
+	if (typeof smoothMove.speed === "number" && Number.isFinite(smoothMove.speed)) options.speed = Math.max(0, smoothMove.speed);
+	if (typeof smoothMove.acceleration === "number" && Number.isFinite(smoothMove.acceleration)) options.acceleration = Math.max(0, smoothMove.acceleration);
+	else if (smoothMove.acceleration === null) options.acceleration = null;
+	if (typeof smoothMove.radius === "number" && Number.isFinite(smoothMove.radius)) options.radius = Math.max(0, smoothMove.radius);
+	else if (smoothMove.radius === null) options.radius = null;
+	return Object.keys(options).length > 0 ? options : void 0;
+};
+var clearCameraFollowPlugins = (viewport) => {
+	viewport?.plugins?.remove?.("animate");
+	viewport?.plugins?.remove?.("follow");
+};
+var ownsCameraFollowRevision = (appliedRevision, currentRevision) => {
+	return appliedRevision !== null && appliedRevision === currentRevision;
+};
+var readCameraFollowPosition = (target) => {
+	if (!target) return null;
+	try {
+		if (target.destroyed) return null;
+		const x = target.x;
+		const y = target.y;
+		if (!Number.isFinite(x) || !Number.isFinite(y)) return null;
+		return {
+			x,
+			y
+		};
+	} catch {
+		return null;
+	}
+};
+var createCameraFollowTarget = (target, initialPosition) => {
+	let lastPosition = initialPosition;
+	const readPosition = () => {
+		const nextPosition = readCameraFollowPosition(target);
+		if (nextPosition) lastPosition = nextPosition;
+		return lastPosition;
+	};
+	return {
+		get x() {
+			return readPosition().x;
+		},
+		get y() {
+			return readPosition().y;
+		}
+	};
+};
+var followCameraInstantly = (viewport, target, smoothMove) => {
+	const position = readCameraFollowPosition(target);
+	if (!position) return false;
+	const followTarget = createCameraFollowTarget(target, position);
+	const followOptions = cameraFollowOptions(smoothMove);
+	if (followOptions) viewport.follow(followTarget, followOptions);
+	else viewport.follow(followTarget);
+	return true;
+};
+var applyCameraFollow = ({ viewport, target, smoothMove, followRevision, isCurrentRevision, shouldFollowCamera }) => {
+	clearCameraFollowPlugins(viewport);
+	const position = readCameraFollowPosition(target);
+	if (!position) return false;
+	const animationOptions = cameraFollowAnimationOptions(smoothMove);
+	if (!animationOptions || animationOptions.time <= 0) return followCameraInstantly(viewport, target, smoothMove);
+	viewport.animate({
+		position,
+		time: animationOptions.time,
+		ease: animationOptions.ease,
+		callbackOnComplete: () => {
+			if (!isCurrentRevision(followRevision) || !shouldFollowCamera()) return;
+			if (!readCameraFollowPosition(target)) return;
+			followCameraInstantly(viewport, target, smoothMove);
+		}
+	});
+	return true;
+};
+//#endregion
+export { applyCameraFollow, clearCameraFollowPlugins, ownsCameraFollowRevision };
+
+//# sourceMappingURL=cameraFollow.js.map

package/dist/services/cameraFollow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cameraFollow.js","names":[],"sources":["../../src/services/cameraFollow.ts"],"sourcesContent":["export const DEFAULT_CAMERA_FOLLOW_TIME = 1000;\nexport const DEFAULT_CAMERA_FOLLOW_EASE = \"easeInOutSine\";\n\nexport const CAMERA_FOLLOW_EASES = [\n  \"linear\",\n  \"easeInQuad\",\n  \"easeOutQuad\",\n  \"easeInOutQuad\",\n  \"easeInCubic\",\n  \"easeOutCubic\",\n  \"easeInOutCubic\",\n  \"easeInQuart\",\n  \"easeOutQuart\",\n  \"easeInOutQuart\",\n  \"easeInQuint\",\n  \"easeOutQuint\",\n  \"easeInOutQuint\",\n  \"easeInSine\",\n  \"easeOutSine\",\n  \"easeInOutSine\",\n  \"easeInExpo\",\n  \"easeOutExpo\",\n  \"easeInOutExpo\",\n  \"easeInCirc\",\n  \"easeOutCirc\",\n  \"easeInOutCirc\",\n  \"easeInElastic\",\n  \"easeOutElastic\",\n  \"easeInOutElastic\",\n  \"easeInBack\",\n  \"easeOutBack\",\n  \"easeInOutBack\",\n  \"easeInBounce\",\n  \"easeOutBounce\",\n  \"easeInOutBounce\",\n] as const;\n\nexport type CameraFollowEase = typeof CAMERA_FOLLOW_EASES[number];\n\nexport type CameraFollowSmoothMoveOptions = {\n  /** Enable or disable the smooth transition when options are sent as an object. */\n  enabled?: boolean;\n  /** Duration of the transition to the new camera target, in milliseconds. */\n  time?: number;\n  /** pixi-viewport easing name, for example \"easeInOutQuad\". */\n  ease?: CameraFollowEase;\n  /** Continuous follow speed after the transition. 0 keeps the target centered instantly. */\n  speed?: number;\n  /** Continuous follow acceleration after the transition. */\n  acceleration?: number | null;\n  /** Center radius where the followed target can move without moving the viewport. */\n  radius?: number | null;\n};\n\nexport type CameraFollowSmoothMove = boolean | CameraFollowSmoothMoveOptions;\n\nexport type CameraFollowTarget = {\n  x: number;\n  y: number;\n  destroyed?: boolean;\n} | null | undefined;\n\nexport type CameraFollowPosition = {\n  x: number;\n  y: number;\n};\n\nexport interface CameraFollowApplyContext {\n  viewport: any;\n  target: CameraFollowTarget;\n  smoothMove: CameraFollowSmoothMove;\n  followRevision: number;\n  isCurrentRevision: (revision: number) => boolean;\n  shouldFollowCamera: () => boolean;\n}\n\nconst finiteNumber = (value: unknown, fallback: number) => {\n  return typeof value === \"number\" && Number.isFinite(value) ? value : fallback;\n};\n\nconst isCameraFollowEase = (value: unknown): value is CameraFollowEase => {\n  return typeof value === \"string\" && (CAMERA_FOLLOW_EASES as readonly string[]).includes(value);\n};\n\nexport const smoothMoveEnabled = (smoothMove: CameraFollowSmoothMove) => {\n  if (smoothMove === false) return false;\n  if (typeof smoothMove === \"object\" && smoothMove !== null && smoothMove.enabled === false) {\n    return false;\n  }\n  return true;\n};\n\nexport const cameraFollowAnimationOptions = (\n  smoothMove: CameraFollowSmoothMove\n) => {\n  if (!smoothMoveEnabled(smoothMove)) return null;\n  const options = typeof smoothMove === \"object\" && smoothMove !== null ? smoothMove : {};\n  return {\n    time: Math.max(0, finiteNumber(options.time, DEFAULT_CAMERA_FOLLOW_TIME)),\n    ease: isCameraFollowEase(options.ease) ? options.ease : DEFAULT_CAMERA_FOLLOW_EASE,\n  };\n};\n\nexport const cameraFollowOptions = (smoothMove: CameraFollowSmoothMove) => {\n  if (typeof smoothMove !== \"object\" || smoothMove === null) return undefined;\n  const options: { speed?: number; acceleration?: number | null; radius?: number | null } = {};\n  if (typeof smoothMove.speed === \"number\" && Number.isFinite(smoothMove.speed)) {\n    options.speed = Math.max(0, smoothMove.speed);\n  }\n  if (typeof smoothMove.acceleration === \"number\" && Number.isFinite(smoothMove.acceleration)) {\n    options.acceleration = Math.max(0, smoothMove.acceleration);\n  } else if (smoothMove.acceleration === null) {\n    options.acceleration = null;\n  }\n  if (typeof smoothMove.radius === \"number\" && Number.isFinite(smoothMove.radius)) {\n    options.radius = Math.max(0, smoothMove.radius);\n  } else if (smoothMove.radius === null) {\n    options.radius = null;\n  }\n  return Object.keys(options).length > 0 ? options : undefined;\n};\n\nexport const clearCameraFollowPlugins = (viewport: any) => {\n  viewport?.plugins?.remove?.(\"animate\");\n  viewport?.plugins?.remove?.(\"follow\");\n};\n\nexport const ownsCameraFollowRevision = (\n  appliedRevision: number | null,\n  currentRevision: number\n) => {\n  return appliedRevision !== null && appliedRevision === currentRevision;\n};\n\nexport const readCameraFollowPosition = (\n  target: CameraFollowTarget\n): CameraFollowPosition | null => {\n  if (!target) return null;\n\n  try {\n    if (target.destroyed) return null;\n    const x = target.x;\n    const y = target.y;\n    if (!Number.isFinite(x) || !Number.isFinite(y)) return null;\n    return { x, y };\n  } catch {\n    return null;\n  }\n};\n\nconst createCameraFollowTarget = (\n  target: CameraFollowTarget,\n  initialPosition: CameraFollowPosition\n) => {\n  let lastPosition = initialPosition;\n\n  const readPosition = () => {\n    const nextPosition = readCameraFollowPosition(target);\n    if (nextPosition) {\n      lastPosition = nextPosition;\n    }\n    return lastPosition;\n  };\n\n  return {\n    get x() {\n      return readPosition().x;\n    },\n    get y() {\n      return readPosition().y;\n    },\n  };\n};\n\nexport const followCameraInstantly = (\n  viewport: any,\n  target: CameraFollowTarget,\n  smoothMove: CameraFollowSmoothMove\n) => {\n  const position = readCameraFollowPosition(target);\n  if (!position) return false;\n\n  const followTarget = createCameraFollowTarget(target, position);\n  const followOptions = cameraFollowOptions(smoothMove);\n  if (followOptions) {\n    viewport.follow(followTarget, followOptions);\n  } else {\n    viewport.follow(followTarget);\n  }\n  return true;\n};\n\nexport const applyCameraFollow = ({\n  viewport,\n  target,\n  smoothMove,\n  followRevision,\n  isCurrentRevision,\n  shouldFollowCamera,\n}: CameraFollowApplyContext) => {\n  clearCameraFollowPlugins(viewport);\n\n  const position = readCameraFollowPosition(target);\n  if (!position) return false;\n\n  const animationOptions = cameraFollowAnimationOptions(smoothMove);\n  if (!animationOptions || animationOptions.time <= 0) {\n    return followCameraInstantly(viewport, target, smoothMove);\n  }\n\n  viewport.animate({\n    position,\n    time: animationOptions.time,\n    ease: animationOptions.ease,\n    callbackOnComplete: () => {\n      if (!isCurrentRevision(followRevision) || !shouldFollowCamera()) return;\n      if (!readCameraFollowPosition(target)) return;\n      followCameraInstantly(viewport, target, smoothMove);\n    },\n  });\n  return true;\n};\n"],"mappings":"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"}

package/dist/services/cameraFollow.spec.d.ts

@@ -0,0 +1 @@
+export {};