@rpgjs/client 5.0.0-beta.2 → 5.0.0-beta.22

package/dist/components/gui/menu/skills-menu.ce.js.map

@@ -1 +1 @@
-{"version":3,"file":"skills-menu.ce.js","names":[],"sources":["../../../../src/components/gui/menu/skills-menu.ce"],"sourcesContent":["<DOMContainer width=\"100%\" height=\"100%\">\n    <div class=\"rpg-ui-menu-panel rpg-ui-panel\">\n        <div class=\"rpg-ui-menu-panel-header\">Skills</div>\n        <div class=\"rpg-ui-menu-panel-body rpg-ui-menu-panel-body-stacked\">\n            <div class=\"rpg-ui-menu-panel-details rpg-ui-panel\">\n                @if (currentSkill) {\n                    <div class=\"rpg-ui-menu-panel-hero\">\n                        <div class=\"rpg-ui-menu-panel-hero-icon\">✨</div>\n                        <div>\n                            <div class=\"rpg-ui-menu-panel-details-title\">{currentSkill()?.name}</div>\n                            <div class=\"rpg-ui-menu-panel-details-desc\">{currentSkill()?.description || \"\"}</div>\n                        </div>\n                    </div>\n                }\n            </div>\n            <div class=\"rpg-ui-menu-panel-list rpg-ui-menu rpg-ui-menu-panel-list-full\">\n                <Navigation tabindex={selectedSkill} controls={controls}>\n                    @for ((skill,index) of skills) {\n                        <div\n                            class=\"rpg-ui-menu-item rpg-ui-menu-row\"\n                            data-selected={selectedSkill() === index ? \"true\" : \"false\"}\n                            tabindex={index}\n                            click={selectSkill(index)}\n                        >\n                            <span>{skill.name}</span>\n                            <span class=\"rpg-ui-menu-row-end\">SP {skill.spCost ?? 0}</span>\n                        </div>\n                    }\n                </Navigation>\n            </div>\n        </div>\n    </div>\n</DOMContainer>\n\n<script>\n    import { signal, computed, createTabindexNavigator } from \"canvasengine\";\n    import { inject } from \"../../../core/inject\";\n    import { RpgClientEngine } from \"../../../RpgClientEngine\";\n\n    const engine = inject(RpgClientEngine);\n    const keyboardControls = engine.globalConfig.keyboardControls;\n\n    const selectedSkill = signal(0);\n    const { data, onBack } = defineProps();\n    const skills = computed(() => data().skills);\n\n    const nav = createTabindexNavigator(selectedSkill, { count: () => skills().length }, \"wrap\");\n    const currentSkill = computed(() => skills()[selectedSkill()]);\n\n    function selectSkill(index) {\n        return function() {\n            selectedSkill.set(index);\n        }\n    }\n\n    const controls = signal({\n        up: {\n            repeat: true,\n            bind: keyboardControls.up,\n            throttle: 150,\n            keyDown() {\n                nav.next(-1);\n            }\n        },\n        down: {\n            repeat: true,\n            bind: keyboardControls.down,\n            throttle: 150,\n            keyDown() {\n                nav.next(1);\n            }\n        },\n        escape: {\n            bind: keyboardControls.escape,\n            keyDown() {\n                if (onBack) onBack();\n            }\n        },\n        gamepad: {\n            enabled: true\n        }\n    });\n</script>\n"],"mappings":";;;;AAUM,SAAuB,UAAW,SAAO;AACxB,UAAM,QAAA;CACrB,MAAM,cAAW,eAAA,QAAA;CAEzB,IAAI,mBADY,OAAA,gBAAA,CACC,aAAA;CACjB,IAAI,gBAAa,OAAU,EAAC;CAC5B,IAAI,KAAK,aAAQ,EAAA,OAAW,GAAA,MAAU,SAAA,GAAc;CACpD,IAAI,SAAS,SAAQ,WAAY;AAAA,SAAU,MAAM,CAAC;GAAC;CACnD,IAAI,MAAM,wBAAe,eAAA,EAAA,OAAA,WAAA;AAAA,SAAA,QAAA,CAAA;IAAA,EAAA,OAAA;CACzB,IAAI,eAAe,SAAS,WAAW;AAAG,SAAK,QAAS,CAAE,eAAS;GAAA;CACnE,SAAS,YAAY,OAAO;AACxB,SAAO,WAAY;AACf,iBAAc,IAAI,MAAE;;;CAG5B,IAAI,WAAW,OAAO;EAClB,IAAI;GACA,QAAQ;GACR,MAAM,iBAAc;GACpB,UAAS;GACT,SAAK,WAAA;AACJ,QAAA,KAAA,GAAA;;;EAGR,MAAM;GACH,QAAS;GACT,MAAS,iBAAkB;GAC3B,UAAS;;AAEH,QAAM,KAAG,EAAA;;;EAGf,QAAM;GACN,MAAQ,iBAAiB;GACzB,SAAa,WAAY;eAEb,SAAA;;;EAGZ,SAAS,EACL,SAAO,MACV;EACJ,CAAC;QACE,EAAA,cAAA;EAAA,OAAA;EAAA,QAAA;EAAA,EAAA,EAAA,YAAA;EAAA,SAAA;EAAA,OAAA,EAAA,OAAA,kCAAA;EAAA,EAAA,CAAA,EAAA,YAAA;EAAA,SAAA;EAAA,OAAA,EAAA,OAAA,4BAAA;EAAA,aAAA;EAAA,CAAA,EAAA,EAAA,YAAA;EAAA,SAAA;EAAA,OAAA,EAAA,OAAA,yDAAA;EAAA,EAAA,CAAA,EAAA,YAAA;EAAA,SAAA;EAAA,OAAA,EAAA,OAAA,0CAAA;EAAA,EAAA,KAAA,oBAAA,EAAA,YAAA;EAAA,SAAA;EAAA,OAAA,EAAA,OAAA,0BAAA;EAAA,EAAA,CAAA,EAAA,YAAA;EAAA,SAAA;EAAA,OAAA,EAAA,OAAA,+BAAA;EAAA,aAAA;EAAA,CAAA,EAAA,EAAA,YAAA,EAAA,SAAA,OAAA,EAAA,CAAA,EAAA,YAAA;EAAA,SAAA;EAAA,OAAA,EAAA,OAAA,mCAAA;EAAA,aAAA,eAAA,cAAA,EAAA,KAAA;EAAA,CAAA,EAAA,EAAA,YAAA;EAAA,SAAA;EAAA,OAAA,EAAA,OAAA,kCAAA;EAAA,aAAA,eAAA,cAAA,EAAA,eAAA,GAAA;EAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,EAAA,EAAA,YAAA;EAAA,SAAA;EAAA,OAAA,EAAA,OAAA,kEAAA;EAAA,EAAA,EAAA,YAAA;EAAA,UAAA;EAAA;EAAA,EAAA,KAAA,SAAA,OAAA,UAAA,EAAA,YAAA;EAAA,SAAA;EAAA,OAAA;GAAA,OAAA;GAAA,iBAAA,eAAA,eAAA,KAAA,QAAA,SAAA,QAAA;GAAA,UAAA;GAAA,OAAA,YAAA,MAAA;GAAA;EAAA,EAAA,CAAA,EAAA,YAAA;EAAA,SAAA;EAAA,aAAA,MAAA;EAAA,CAAA,EAAA,EAAA,YAAA;EAAA,SAAA;EAAA,OAAA,EAAA,OAAA,uBAAA;EAAA,aAAA,QAAA,MAAA;EAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA"}
+{"version":3,"file":"skills-menu.ce.js","names":[],"sources":["../../../../src/components/gui/menu/skills-menu.ce"],"sourcesContent":["<DOMContainer width=\"100%\" height=\"100%\">\n    <div class=\"rpg-ui-menu-panel rpg-ui-panel\">\n        <div class=\"rpg-ui-menu-panel-header\">{t(\"rpg.menu.skills\")}</div>\n        <div class=\"rpg-ui-menu-panel-body rpg-ui-menu-panel-body-stacked\">\n            <div class=\"rpg-ui-menu-panel-details rpg-ui-panel\">\n                @if (currentSkill) {\n                    <div class=\"rpg-ui-menu-panel-hero\">\n                        <div class=\"rpg-ui-menu-panel-hero-icon\">✨</div>\n                        <div>\n                            <div class=\"rpg-ui-menu-panel-details-title\">{currentSkill()?.name}</div>\n                            <div class=\"rpg-ui-menu-panel-details-desc\">{currentSkill()?.description || \"\"}</div>\n                        </div>\n                    </div>\n                }\n            </div>\n            <div class=\"rpg-ui-menu-panel-list rpg-ui-menu rpg-ui-menu-panel-list-full\">\n                <Navigation tabindex={selectedSkill} controls={controls}>\n                    @for ((skill,index) of skills) {\n                        <div\n                            class=\"rpg-ui-menu-item rpg-ui-menu-row\"\n                            data-selected={selectedSkill() === index ? \"true\" : \"false\"}\n                            tabindex={index}\n                            click={selectSkill(index)}\n                        >\n                            <span>{skill.name}</span>\n                            <span class=\"rpg-ui-menu-row-end\">SP {skill.spCost ?? 0}</span>\n                        </div>\n                    }\n                </Navigation>\n            </div>\n        </div>\n    </div>\n</DOMContainer>\n\n<script>\n    import { signal, computed, createTabindexNavigator } from \"canvasengine\";\n    import { inject } from \"../../../core/inject\";\n    import { RpgClientEngine } from \"../../../RpgClientEngine\";\n\n    const engine = inject(RpgClientEngine);\n    const { t } = engine.i18n();\n    const keyboardControls = engine.globalConfig.keyboardControls;\n\n    const selectedSkill = signal(0);\n    const { data, onBack } = defineProps();\n    const skills = computed(() => data().skills);\n\n    const nav = createTabindexNavigator(selectedSkill, { count: () => skills().length }, \"wrap\");\n    const currentSkill = computed(() => skills()[selectedSkill()]);\n\n    function selectSkill(index) {\n        return function() {\n            selectedSkill.set(index);\n        }\n    }\n\n    const controls = signal({\n        up: {\n            repeat: true,\n            bind: keyboardControls.up,\n            throttle: 150,\n            keyDown() {\n                nav.next(-1);\n            }\n        },\n        down: {\n            repeat: true,\n            bind: keyboardControls.down,\n            throttle: 150,\n            keyDown() {\n                nav.next(1);\n            }\n        },\n        escape: {\n            bind: keyboardControls.escape,\n            keyDown() {\n                if (onBack) onBack();\n            }\n        },\n        gamepad: {\n            enabled: true\n        }\n    });\n</script>\n"],"mappings":";;;;AAUM,SAAS,UAAU,SAAQ;CACV,SAAM,OAAA;CACrB,MAAM,cAAW,eAAA,OAAA;CACT,eAAA,OAAA;CACR,MAAM,SAAG,OAAA,eAAA;CACjB,MAAM,EAAE,MAAK,OAAI,KAAO;CACxB,MAAM,mBAAW,OAAW,aAAU;CACtC,MAAM,gBAAe,OAAM,CAAA;CAC3B,MAAM,EAAE,MAAM,WAAW,YAAA;CACzB,MAAM,SAAS,eAAa,KAAO,EAAA,MAAO;CAC1C,MAAM,MAAM,wBAAqB,eAAU,EAAA,aAAoB,OAAS,EAAA,OAAS,GAAA,MAAM;CACvF,MAAM,eAAe,eAAe,OAAO,EAAA,cAAA,EAAA;CAC3C,SAAS,YAAY,OAAO;EACxB,OAAO,WAAY;GACf,cAAc,IAAI,KAAG;EACzB;CACJ;CACA,MAAM,WAAW,OAAG;EAChB,IAAI;GACA,QAAM;GACN,MAAK,iBAAA;GACP,UAAG;GACP,UAAY;;GAEP;EACH;EACA,MAAM;GACN,QAAS;;GAET,UAAc;GACd,UAAc;IACR,IAAA,KAAA,CAAA;;EAEN;EACA,QAAQ;GACR,MAAM,iBAAqB;;IAErB,IAAM,QACN,OAAa;;EAEnB;EACA,SAAI,EACA,SAAI,KACR;CACJ,CAAC;CAEG,OAAA,EAAA,cAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YAAe;AACb;AAEA,IAAM,iBAAM"}

package/dist/components/gui/mobile/index.d.ts

@@ -1,8 +1,57 @@
-export declare const withMobile: () => {
+import { ButtonProps, ComponentFunction, JoystickSettings } from 'canvasengine';
+export type MobileGuiEnabled = "auto" | "always" | "never" | (() => boolean);
+export type MobileGuiJoystickSide = "left" | "right";
+export type MobileGuiMargin = number | [number, number, number, number];
+export interface MobileGuiLayoutOptions {
+    joystickSide?: MobileGuiJoystickSide;
+    margin?: MobileGuiMargin;
+    buttonsMargin?: MobileGuiMargin;
+    joystickMargin?: MobileGuiMargin;
+    gap?: number;
+}
+export interface MobileJoystickComponentProps extends JoystickSettings {
+    defaultProps: JoystickSettings;
+}
+export interface MobileButtonComponentProps extends ButtonProps {
+    controlName: "action" | "back" | "dash";
+    defaultProps: ButtonProps;
+}
+export interface MobileGuiComponentsOptions {
+    joystick?: ComponentFunction<MobileJoystickComponentProps>;
+    buttons?: {
+        action?: ComponentFunction<MobileButtonComponentProps>;
+        back?: ComponentFunction<MobileButtonComponentProps>;
+        dash?: ComponentFunction<MobileButtonComponentProps>;
+    };
+}
+export interface MobileGuiButtonOptions extends Partial<ButtonProps> {
+    enabled?: boolean;
+    component?: ComponentFunction<MobileButtonComponentProps>;
+    container?: Record<string, unknown>;
+}
+export interface MobileGuiJoystickOptions extends Partial<JoystickSettings> {
+    component?: ComponentFunction<MobileJoystickComponentProps>;
+    moveInterval?: number;
+    threshold?: number;
+}
+export interface MobileGuiOptions {
+    id?: string;
+    enabled?: MobileGuiEnabled;
+    layout?: MobileGuiLayoutOptions;
+    components?: MobileGuiComponentsOptions;
+    joystick?: false | MobileGuiJoystickOptions;
+    buttons?: {
+        action?: boolean | MobileGuiButtonOptions;
+        back?: boolean | MobileGuiButtonOptions;
+        dash?: boolean | MobileGuiButtonOptions;
+    };
+}
+export declare const withMobile: (options?: MobileGuiOptions) => {
     gui: {
         id: string;
         component: any;
         autoDisplay: boolean;
-        dependencies: () => (import('canvasengine').WritableSignal<undefined> | import('canvasengine').WritableSignal<true | undefined>)[];
+        data: MobileGuiOptions;
+        dependencies: () => (import('canvasengine').WritableSignal<boolean | undefined> | import('canvasengine').ComputedSignal<true | undefined>)[];
     }[];
 };

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

@@ -1,18 +1,26 @@
 import { inject } from "../../../core/inject.js";
 import { RpgClientEngine } from "../../../RpgClientEngine.js";
-import component from "./mobile.ce.js";
-import { signal } from "canvasengine";
+import __ce_component from "./mobile.ce.js";
+import { computed } from "canvasengine";
 //#region src/components/gui/mobile/index.ts
 function isMobile() {
+	if (typeof navigator === "undefined") return false;
 	return /Android|iPhone|iPad|iPod|Windows Phone|webOS|BlackBerry/i.test(navigator.userAgent);
 }
-var withMobile = () => ({ gui: [{
-	id: "mobile-gui",
-	component,
+function resolveEnabled(enabled = "auto") {
+	if (enabled === "always") return true;
+	if (enabled === "never") return false;
+	if (typeof enabled === "function") return enabled();
+	return isMobile();
+}
+var withMobile = (options = {}) => ({ gui: [{
+	id: options.id ?? "mobile-gui",
+	component: __ce_component,
 	autoDisplay: true,
+	data: options,
 	dependencies: () => {
 		const engine = inject(RpgClientEngine);
-		return [signal(isMobile() || void 0), engine.controlsReady];
+		return [computed(() => resolveEnabled(options.enabled) || void 0), engine.controlsReady];
 	}
 }] });
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/gui/mobile/index.ts"],"sourcesContent":["import { inject } from \"../../../core/inject\";\nimport { RpgClientEngine } from \"../../../RpgClientEngine\";\nimport MobileGui from \"./mobile.ce\";\nimport { signal } from \"canvasengine\";\n\nfunction isMobile() {\n    return /Android|iPhone|iPad|iPod|Windows Phone|webOS|BlackBerry/i.test(navigator.userAgent);\n  }\n\nexport const withMobile = () => (\n    {\n        gui: [\n            {\n                id: 'mobile-gui',\n                component: MobileGui,\n                autoDisplay: true,\n                dependencies: () => {\n                    const engine = inject(RpgClientEngine);\n                    return [signal(isMobile() ||undefined), engine.controlsReady]\n                }\n            }\n        ]\n    }\n)"],"mappings":";;;;;AAKA,SAAS,WAAW;AAChB,QAAO,2DAA2D,KAAK,UAAU,UAAU;;AAG/F,IAAa,oBACT,EACI,KAAK,CACD;CACI,IAAI;CACO;CACX,aAAa;CACb,oBAAoB;EAChB,MAAM,SAAS,OAAO,gBAAgB;AACtC,SAAO,CAAC,OAAO,UAAU,IAAG,KAAA,EAAU,EAAE,OAAO,cAAc;;CAEpE,CACJ,EACJ"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/gui/mobile/index.ts"],"sourcesContent":["import { inject } from \"../../../core/inject\";\nimport { RpgClientEngine } from \"../../../RpgClientEngine\";\nimport MobileGui from \"./mobile.ce\";\nimport { computed } from \"canvasengine\";\nimport type { ButtonProps, ComponentFunction, JoystickSettings } from \"canvasengine\";\n\nexport type MobileGuiEnabled = \"auto\" | \"always\" | \"never\" | (() => boolean);\nexport type MobileGuiJoystickSide = \"left\" | \"right\";\nexport type MobileGuiMargin = number | [number, number, number, number];\n\nexport interface MobileGuiLayoutOptions {\n    joystickSide?: MobileGuiJoystickSide;\n    margin?: MobileGuiMargin;\n    buttonsMargin?: MobileGuiMargin;\n    joystickMargin?: MobileGuiMargin;\n    gap?: number;\n}\n\nexport interface MobileJoystickComponentProps extends JoystickSettings {\n    defaultProps: JoystickSettings;\n}\n\nexport interface MobileButtonComponentProps extends ButtonProps {\n    controlName: \"action\" | \"back\" | \"dash\";\n    defaultProps: ButtonProps;\n}\n\nexport interface MobileGuiComponentsOptions {\n    joystick?: ComponentFunction<MobileJoystickComponentProps>;\n    buttons?: {\n        action?: ComponentFunction<MobileButtonComponentProps>;\n        back?: ComponentFunction<MobileButtonComponentProps>;\n        dash?: ComponentFunction<MobileButtonComponentProps>;\n    };\n}\n\nexport interface MobileGuiButtonOptions extends Partial<ButtonProps> {\n    enabled?: boolean;\n    component?: ComponentFunction<MobileButtonComponentProps>;\n    container?: Record<string, unknown>;\n}\n\nexport interface MobileGuiJoystickOptions extends Partial<JoystickSettings> {\n    component?: ComponentFunction<MobileJoystickComponentProps>;\n    moveInterval?: number;\n    threshold?: number;\n}\n\nexport interface MobileGuiOptions {\n    id?: string;\n    enabled?: MobileGuiEnabled;\n    layout?: MobileGuiLayoutOptions;\n    components?: MobileGuiComponentsOptions;\n    joystick?: false | MobileGuiJoystickOptions;\n    buttons?: {\n        action?: boolean | MobileGuiButtonOptions;\n        back?: boolean | MobileGuiButtonOptions;\n        dash?: boolean | MobileGuiButtonOptions;\n    };\n}\n\nfunction isMobile() {\n    if (typeof navigator === \"undefined\") return false;\n    return /Android|iPhone|iPad|iPod|Windows Phone|webOS|BlackBerry/i.test(navigator.userAgent);\n}\n\nfunction resolveEnabled(enabled: MobileGuiEnabled = \"auto\") {\n    if (enabled === \"always\") return true;\n    if (enabled === \"never\") return false;\n    if (typeof enabled === \"function\") return enabled();\n    return isMobile();\n}\n\nexport const withMobile = (options: MobileGuiOptions = {}) => (\n    {\n        gui: [\n            {\n                id: options.id ?? 'mobile-gui',\n                component: MobileGui,\n                autoDisplay: true,\n                data: options,\n                dependencies: () => {\n                    const engine = inject(RpgClientEngine);\n                    return [\n                        computed(() => resolveEnabled(options.enabled) || undefined),\n                        engine.controlsReady\n                    ]\n                }\n            }\n        ]\n    }\n)\n"],"mappings":";;;;;AA6DA,SAAS,WAAW;CAChB,IAAI,OAAO,cAAc,aAAa,OAAO;CAC7C,OAAO,2DAA2D,KAAK,UAAU,SAAS;AAC9F;AAEA,SAAS,eAAe,UAA4B,QAAQ;CACxD,IAAI,YAAY,UAAU,OAAO;CACjC,IAAI,YAAY,SAAS,OAAO;CAChC,IAAI,OAAO,YAAY,YAAY,OAAO,QAAQ;CAClD,OAAO,SAAS;AACpB;AAEA,IAAa,cAAc,UAA4B,CAAC,OACpD,EACI,KAAK,CACD;CACI,IAAI,QAAQ,MAAM;CAClB,WAAW;CACX,aAAa;CACb,MAAM;CACN,oBAAoB;EAChB,MAAM,SAAS,OAAO,eAAe;EACrC,OAAO,CACH,eAAe,eAAe,QAAQ,OAAO,KAAK,KAAA,CAAS,GAC3D,OAAO,aACX;CACJ;AACJ,CACJ,EACJ"}

package/dist/components/gui/mobile/index.spec.d.ts

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

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

@@ -1,78 +1,328 @@
 import { inject } from "../../../core/inject.js";
-import { Button, Container, Joystick, h, mount, signal, 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);
-	var controlsInstance = signal(null);
-	mount(function(element) {
-		var control = inject("KeyboardControls");
+	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
-export { component as default };
+export { __ce_component as default };
 
 //# sourceMappingURL=mobile.ce.js.map

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,SAAuB,UAAA,SAAA;AACN,UAAE,QAAA;AACC,gBAAA,QAAA;CAClB,IAAI,mBAAc,OAAA,KAAgB;AAC1C,OAAM,SAAU,SAAA;EACZ,IAAI,UAAQ,OAAO,mBAAA;AACnB,mBAAgB,IAAA,QAAA;GAClB;AAEM,QADY,EAAE,WAAW;EAAA,gBAAO;EAAA,YAAA;EAAA,OAAA;EAAA,QAAA;EAAA,EAAA,CAAA,EAAA,WAAA;EAAA,gBAAA;EAAA,YAAA;EAAA,KAAA;EAAA,EAAA,EAAA,WAAA;EAAA,SAAA;EAAA,WAAA;EAAA,KAAA;EAAA,QAAA;EAAA,EAAA,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;IAAA;GAAA,MAAA;IAAA,UAAA;IAAA,YAAA;IAAA,OAAA;IAAA;GAAA;EAAA,CAAA,EAAA,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;IAAA;GAAA,MAAA;IAAA,UAAA;IAAA,YAAA;IAAA,OAAA;IAAA;GAAA;EAAA,CAAA,CAAA,CAAA,CAAA,EAAA,EAAA,WAAA;EAAA,QAAA;EAAA,YAAA;EAAA,EAAA,EAAA,WAAA,MAAA,EAAA,UAAA;EAAA,UAAA;EAAA,YAAA;EAAA,YAAA;EAAA,CAAA,CAAA,CAAA,CAAA,CAAA"}
+{"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":";;;AAOM,SAAM,UAAA,SAAA;;CAEJ,MAAK,cAAI,eAAoB,OAAA;CACT,eAAE,OAAoB;CAC1C,MAAM,EAAE,SAAK,YAAA;CACrB,MAAM,mBAAY,OAAS,IAAA;CAC3B,MAAM,UAAM,eAAA,OAAA,KAAA,CAAA,CAAA;;CAEZ,MAAM,aAAW,eAAiB,QAAC,EAAA,cAAA,CAAA,CAAA;CACnC,MAAM,UAAU,eAAc,QAAA,EAAA,WAAsB,CAAA,CAAA;CACpD,MAAM,WAAW,eAAI,QAAmB,EAAE,QAAI;CAC9C,MAAM,oBAAY,SAAS,QAAA,EAAA;CAC3B,MAAM,iBAAM,MAAA,iBAAA;;EAER,IAAI,OAAE,WAAS,WACb,OAAS;;CAEf;CACA,MAAM,mBAAmB,eAAI,cAAA,UAAA,IAAA,CAAA;CAC7B,MAAM,iBAAO,eAAuB,cAAgB,QAAC,IAAA,CAAA;CACrD,MAAM,iBAAE,eAAA,cAAA,QAAA,KAAA,CAAA;CACR,MAAM,eAAS,eAAA,SAAA,MAAA,KAAA;CACf,MAAE,eAAS,eAAA,OAAA,EAAA,gBAAA,OAAA;;CAEX,MAAC,YAAM,eAAA,OAAA,EAAA,OAAA,EAAA;CACP,MAAI,gBAAiB,eAAgB,OAAO,EAAE,iBAAiB,OAAA,EAAA,UAAY,EAAA;CAC3E,MAAI,iBAAkB,eAAe,OAAK,EAAM,kBAAA,OAAA,EAAA,WAE5C,aAAiB,MAAA,UAAY;EAAA;EAAA;EAAA;EAAA;CAAA,IAAA;EAAA;EAAA;EAAA;EAAA;CAAA,EAAA;CACjC,SAAS,iBAAiB,QAAG;EACzB,OAAM,OAAQ,WAAW,YAAY,SAAQ,SAAA,CAAA;CACjD;CACA,SAAS,uBAAuB,MAAM;EAElC,OADe,iBAAgB,iBAAkB,IAAI,CAC/C,EAAQ,aAAa,WAAK,EAAQ,UAAU,SAAA;;CAEtD,MAAI,oBAAsB,eAAa,SAAU,GAAI,aAAA,WAAA,EAAA,YAAA,QAAA;CACrD,MAAI,wBAAuB,eAAkB,uBAAK,QAAA,CAAA;CAClD,MAAM,sBAAiB,eAAiB,uBAAI,MAAA,CAAA;CAC5C,MAAM,sBAAsB,eAAa,uBAAO,MAAA,CAAA;CAChD,IAAI,wBAAmB;CACvB,IAAI,sBAAA;;CAEJ,MAAI,sBAAwB;EACxB,UAAM;EACN,YAAM;EACN,OAAM;CACV;CACA,MAAI,oBAAsB;EACtB,iBAAiB;GACjB,QAAM;GACN,OAAM;GACF,SAAS;GACT,UAAU;EACd;EACA,MAAC;;GAED,OAAS;EACT;EACA,QAAA;;GAEA,OAAS;EACT;CACJ;CACA,MAAI,kBAAA;;GAEA,QAAM;GACN,OAAM;GACN,SAAM;GACN,UAAM;EACN;EACA,MAAI;EACJ,QAAI;;GAEJ,OAAM;EACN;CACJ;CACA,MAAM,kBAAiB;EACnB,iBAAA;;GAEA,OAAM;GACF,SAAA;GACA,UAAU;EACd;EACA,MAAM;GACF,GAAG;GACH,UAAC;EACL;EACA,QAAQ;GACJ,OAAI;GACJ,OAAC;EACL;CACJ;CACA,MAAM,qBAAa;EACf,QAAI;GACJ,OAAA;;GAEA,OAAM;GACF,QAAA;GACA,UAAU;GACV,aAAa;GACb,OAAI;GACJ,OAAI;EACR;EACA,MAAI;GACA,OAAO;GACP,MAAI;GACJ,OAAI;GACJ,QAAA;GACJ,UAAA;;GAEA,OAAM;GACF,OAAA;EACJ;EACA,MAAM;GACF,OAAI;GACJ,MAAI;GACJ,OAAC;GACD,QAAM;GACN,UAAO;GACP,aAAa;GACb,OAAC;GACD,OAAO;EACX;CACJ;CACA,MAAM,eAAE,SAAA;sDACJ,iBAAA,iBAAA,IAAA,CAAA;EAEA,MAAM,eAAA,mBAAqB;EAC3B,OAAI;GACA,GAAG;GACH,GAAG;GACH;EACJ;CACJ;CACA,MAAM,wBAAoB,SAAO;EAC7B,MAAM,QAAQ,YAAC,IAAA;EACf,OAAO;GACH,OAAC,MAAA;GACD,QAAM,MAAA;GACN,GAAG,iBAAgB,iBAAA,IAAA,CAAA,EAAA;EACvB;CACJ;CACA,MAAM,sBAAgB;EAElB,MAAM,EAAE,WAAW,cAAQ,WAAA,GAAA,UADT,iBAAgB,SAAA,CACP;EAC3B,MAAM,eAAS;GACX,YAAY;GACZ,YAAC;GACD,OAAM;GACN,YAAY;IAAA,GAAA;IAAO,GAAA;GAAA;GACnB,YAAY;IAAC,GAAA;IAAA,GAAA;GAAA;GACb,SAAS;GACT,UAAU;GACV,OAAI;EACR;EACA,OAAO;GACH,GAAG;GACH,GAAA;GACJ;;CAEJ;CACA,MAAM,wBAAiB,YAAiB;EACpC,MAAI,kBAAiB,SAAW;EAChC,IAAI,CAAA,WAAM,CAAA,mBAAe,oBAAuB,OAC5C;EACJ,QAAQ,UAAG,uBAAY;GACnB,GAAG,QAAI,UAAK,oBAAA;GACZ,GAAI,OAAA,gBAAA,iBAAA,WAAA,EAAA,cAAA,gBAAA,aAAA,IAAA,CAAA;GACJ,GAAA,OAAA,gBAAA,cAAA,WAAA,EAAA,WAAA,gBAAA,UAAA,IAAA,CAAA;EACJ,CAAA;;CAEJ,MAAI,6BAA8B;EAC9B,MAAI,kBAAc,SAAY;EAC9B,IAAI,mBAAO,oBAAA,SAAA,OAAA,gBAAA,cAAA,UACP,OAAI,gBAAkB;EAE1B,OAAO,iBAAI,GAAgB,UAAC,oBAAwB,GAAA,aAAA;CACxD;CACA,MAAI,gCAAA;;EAEA,IAAA,mBAAuB,oBAAK,SAAA,OAAA,gBAAA,iBAAA,UACxB,OAAM,gBAAiB;EAE3B,OAAI,iBAAoB,GAAC,UAAA,oBAAA,GAAA,gBAAA;CAC7B;CACA,MAAM,kBAAkB,iBAAS,iBAAA,eAAA,eAAA,UAAA;EAG7B,OAFmB,KAAA,IAAA,QAAA,aAEK,KADG,KAAK,IAAI,QAAI,aACA,IAAA,kBAAA;CAC5C;CACA,MAAM,0BAAgB,UAAgB;EAClC,MAAM,YAAS,OAAA;EACf,IAAI,cAAA,OACA,OAAO;EACX,IAAI,cAAO,UACP,OAAO;EACX,IAAI,cAAI,QACJ,OAAA;EACJ,IAAA,cAAA,SAAA,OAAA;EAEA,MAAM,QAAA,OAAA,OAAsB,KAAE;EAC9B,IAAI,CAAA,OAAM,SAAA,KAAgB,GAAE;GACxB,IAAI,cAAa,YACjB,OAAQ;GACR,IAAI,cAAW,aACX,OAAI;GACR,IAAI,cAAW,eACd,OAAA;GACL,IAAA,cAAA,gBAAA,OAAA;GAEA,OAAM;EACN;EACA,IAAI,cAAI,YACJ,OAAI,eAAO,MAAgB,QAAA,IAAA,KAAA,KAAA;EAC/B,IAAI,cAAA,aACA,OAAO,eAAA,SAAoB,MAAU,GAAA,IAAA,KAAA;EACzC,IAAA,cAAA,eAAA,OAAA,eAAA,QAAA,QAAA,KAAA,KAAA,KAAA;EAEA,IAAA,cAAM,gBACF,OAAM,eAAgB,SAAE,QAAS,KAAA,KAAA,KAAA;EACrC,OAAO;CACX;CACA,MAAM,wBAAE,MAAA,QAAA,QAAA,wBAAA;EACJ,MAAI,UAAO,iBAAoB;EAC/B,MAAA,mBAAA,SAAA;sCAEA,OAAM,iBAAkB,aAAiB,MAAA,QAAA,EAAgB,MAAC,CAAA;EAE1D,MAAI,WAAM,SAAA;EACV,IAAI,UAAO,cACX,OAAA,SAAA,aAAA,MAAA,MAAA;;CAEJ;CACA,MAAM,2BAA2B;EAC7B,IAAI,CAAA,qBACA;EACJ,cAAQ,mBAAsB;EAC9B,sBAAsB;;CAE1B,MAAM,4BAA4B;EAC9B,IAAI,CAAA,yBAA0B,qBAC1B;EACJ,sBAAsB,kBAAiB;GACnC,IAAI,CAAA,uBACA;GACJ,qBAAW,uBAAA,IAAA;EACf,GAAG,wBAAC,CAAA;;CAER,MAAM,+BAA+B;EACjC,mBAAmB;EACnB,IAAI,CAAA,uBACA;EACJ,MAAI,WAAO;EACX,wBAAA;;EAEA,qBAAM,UAAwB,OAAM,CAAA;CACxC;CACA,MAAM,2BAA2B,aAAS,QAAA,MAAA;EACtC,IAAI,CAAA,aAAI;GACJ,uBAAW;GACX;EACJ;EACA,sBAAkB;EAClB,IAAI,0BAAgB,aAAqB;GACzC,oBAAA;;EAEA;EACA,uBAAS;EACT,wBAAkB;EAClB,qBAAI,aAAsB,MAAA,KAAA;EAC1B,oBAAA;;CAEJ,MAAI,sBAAM,MAAwB,UAAI,CAAA,MAAA;EAClC,MAAM,SAAG,OAAA,WAAwB,cAAC,SAAqB;EACvD,IAAI,CAAA,OAAA,wBACA;EACJ,MAAM,QAAE;GACJ,QAAG;GACP;;GAEA,GAAM;EACN;EACA,OAAO,gCAAyB,CAC5B,IAAA,OAAM,iCAAW,CAAA,GAAA,MAAA,IAAA,GACjB,KACJ;EACA,OAAI,8BAA+B;CACvC;;EAEI,mBAAM,kBAA2B,EAC7B,QAAK,iBAAa,GAAA,UAAA,oBAAA,EACtB,CAAC;CACL;CACA,MAAM,oBAAE,UAAA;EACJ,MAAI,YAAA,qBAAsB;EAC1B,MAAM,cAAE,OAAA,SAA0B,YAAa,uBAAA,KAAA,IAAA;EAC/C,mBAAQ,mBAAoB;GACxB,WAAI,OAAA;GACJ,OAAA,OAAA;GACA,OAAA,OAAA;GACA;GACA;GACA,QAAA,iBAAoB,GAAA,UAAA,oBAAA;EACxB,CAAA;;CAEJ;CACA,MAAM,sBAAiB;EACnB,mBAAgB,gBAAA,EACZ,aAAa,sBACjB,CAAC;EACD,uBAAY;CAChB;CACA,OAAO,YAAQ;EACX,MAAI,UAAA,OAAA,kBAAA;EACJ,iBAAW,IAAA,OAAA;EACX,qBAAmB,OAAA;CACvB,CAAC;CAEO,OADA,EAAA,WAAA;EAAA,eAAA,eAAA,cAAA,CAAA;EAAA,gBAAA;EAAA,YAAA;EAAA,OAAA;EAAA,QAAA;EAAA,iBAAA;CAAA,GAAA,CAAA,EAAA,WAAA;EAAA,gBAAA;EAAA,YAAA;EAAA,KAAA,eAAA,UAAA,CAAA;EAAA,QAAA,eAAA,cAAA,CAAA;CAAA,GAAA,EAAA,WAAA;EAAA,SAAA;EAAA,eAAA;EAAA,YAAA;EAAA,KAAA,eAAA,UAAA,CAAA;CAAA,GAAA;EAAA,KAAA,eAAA,eAAA,CAAA,SAAA,EAAA,WAAA,qBAAA,MAAA,GAAA,EAAA,oBAAA,GAAA,YAAA,MAAA,CAAA,CAAA,CAAA;EAAA,KAAA,eAAA,iBAAA,CAAA,SAAA,EAAA,WAAA,qBAAA,QAAA,GAAA,EAAA,sBAAA,GAAA,YAAA,QAAA,CAAA,CAAA,CAAA;EAAA,KAAA,eAAA,eAAA,CAAA,SAAA,EAAA,WAAA,qBAAA,MAAA,GAAA,EAAA,oBAAA,GAAA,YAAA,MAAA,CAAA,CAAA,CAAA;CAAA,CAAA,CAAA,GAAA,EAAA,WAAA;EAAA,QAAA,eAAA,eAAA,CAAA;EAAA,YAAA;CAAA,GAAA,KAAA,eAAA,aAAA,CAAA,SAAA,EAAA,kBAAA,GAAA,cAAA,CAAA,CAAA,CAAA,CAAA,CACO;AACX;AAEA,IAAM,iBAAmB"}