@rpgjs/client 5.0.0-alpha.8 → 5.0.0-beta.1

package/dist/components/gui/menu/main-menu.ce.js

@@ -0,0 +1,417 @@
+import { inject } from "../../../core/inject.js";
+import { getEntityProp } from "../../../utils/getEntityProp.js";
+import component$1 from "../save-load.ce.js";
+import component$2 from "./items-menu.ce.js";
+import component$3 from "./skills-menu.ce.js";
+import component$4 from "./equip-menu.ce.js";
+import component$5 from "./options-menu.ce.js";
+import component$6 from "./exit-menu.ce.js";
+import { RpgClientEngine } from "../../../RpgClientEngine.js";
+import { DOMContainer, DOMElement, computed, cond, effect, h, loop, mount, signal, useDefineProps, useProps } from "canvasengine";
+import { delay } from "@rpgjs/common";
+//#region src/components/gui/menu/main-menu.ce
+function component($$props) {
+	useProps($$props);
+	const defineProps = useDefineProps($$props);
+	var engine = inject(RpgClientEngine);
+	var currentPlayer = engine.scene.currentPlayer;
+	var keyboardControls = engine.globalConfig.keyboardControls;
+	var _a = defineProps(), data = _a.data, onFinish = _a.onFinish, onInteraction = _a.onInteraction, _b = data(), menus = _b.menus;
+	_b.items;
+	_b.skills;
+	_b.equips;
+	var saveLoad = _b.saveLoad;
+	var defaultMenus = [
+		{
+			id: "items",
+			label: "Items"
+		},
+		{
+			id: "skills",
+			label: "Skills"
+		},
+		{
+			id: "equip",
+			label: "Equip"
+		},
+		{
+			id: "options",
+			label: "Options"
+		},
+		{
+			id: "save",
+			label: "Save"
+		},
+		{
+			id: "exit",
+			label: "Exit"
+		}
+	];
+	var menuEntries = computed(function() {
+		if (menus && Array.isArray(menus) && menus.length) return menus;
+		return defaultMenus;
+	});
+	var resolveProp = function(value) {
+		return typeof value === "function" ? value() : value;
+	};
+	var saveLoadData = computed(function() {
+		return resolveProp(saveLoad) || {};
+	});
+	computed(function() {
+		return saveLoadData().mode || "load";
+	});
+	computed(function() {
+		return saveLoadData().slots || [];
+	});
+	var saveLoadCanSave = computed(function() {
+		return saveLoadData().canSave !== false;
+	});
+	var isMenuDisabled = function(entry) {
+		if (!entry) return true;
+		if (entry.disabled) return true;
+		if (entry.enabled === false) return true;
+		if (entry.id === "save" && !saveLoadCanSave()) return true;
+		return false;
+	};
+	var selectedMenu = signal(0);
+	var view = signal("menu");
+	var saveOverlay = signal(false);
+	var selectableIndexes = computed(function() {
+		return menuEntries().map(function(entry, index) {
+			return isMenuDisabled(entry) ? null : index;
+		}).filter(function(value) {
+			return value !== null;
+		});
+	});
+	effect(function() {
+		var available = selectableIndexes();
+		if (!available.length) return;
+		var current = selectedMenu();
+		if (!available.includes(current)) selectedMenu.set(available[0]);
+	});
+	var moveMenu = function(delta) {
+		var available = selectableIndexes();
+		if (!available.length) return;
+		var current = selectedMenu();
+		var nextIndex = (Math.max(0, available.indexOf(current)) + delta + available.length) % available.length;
+		selectedMenu.set(available[nextIndex]);
+	};
+	function selectMenu(index) {
+		return function() {
+			selectedMenu.set(index);
+			openMenu();
+		};
+	}
+	var openMenu = function() {
+		var entry = menuEntries()[selectedMenu()];
+		if (!entry || isMenuDisabled(entry)) return;
+		if (entry.id === "save") {
+			saveOverlay.set(true);
+			return;
+		}
+		if (entry.id === "exit") {
+			view.set("exit");
+			return;
+		}
+		view.set(entry.id);
+	};
+	var goBack = function() {
+		delay(function() {
+			view.set("menu");
+		});
+	};
+	var closeSaveOverlay = function() {
+		delay(function() {
+			saveOverlay.set(false);
+			view.set("menu");
+		});
+	};
+	var confirmExit = function() {
+		if (onInteraction) onInteraction("exit");
+	};
+	var hp = getEntityProp(currentPlayer, "hp");
+	var hpMax = getEntityProp(currentPlayer, "params.maxHp");
+	var sp = getEntityProp(currentPlayer, "sp");
+	var spMax = getEntityProp(currentPlayer, "params.maxSp");
+	var level = getEntityProp(currentPlayer, "level");
+	var exp = getEntityProp(currentPlayer, "exp");
+	var gold = getEntityProp(currentPlayer, "gold");
+	var expForNextlevel = computed(function() {
+		return data().expForNextlevel || 0;
+	});
+	var hpPercent = computed(function() {
+		var max = hpMax() || 1;
+		return "".concat(Math.max(0, Math.min(100, hp() / max * 100)), "%");
+	});
+	var spPercent = computed(function() {
+		var max = spMax() || 1;
+		return "".concat(Math.max(0, Math.min(100, sp() / max * 100)), "%");
+	});
+	var expPercent = computed(function() {
+		var max = expForNextlevel() || 1;
+		return "".concat(Math.max(0, Math.min(100, exp() / max * 100)), "%");
+	});
+	var paramsList = computed(function() {
+		return [
+			{
+				label: "ATK",
+				value: data().playerStats.atk
+			},
+			{
+				label: "PDEF",
+				value: data().playerStats.pdef
+			},
+			{
+				label: "SDEF",
+				value: data().playerStats.sdef
+			},
+			{
+				label: "STR",
+				value: data().playerStats.str
+			},
+			{
+				label: "DEX",
+				value: data().playerStats.dex
+			},
+			{
+				label: "INT",
+				value: data().playerStats.int
+			},
+			{
+				label: "AGI",
+				value: data().playerStats.agi
+			}
+		];
+	});
+	var menuControls = signal({
+		up: {
+			repeat: true,
+			bind: keyboardControls.up,
+			throttle: 150,
+			keyDown: function() {
+				if (saveOverlay()) return;
+				if (view() !== "menu") return;
+				moveMenu(-1);
+			}
+		},
+		down: {
+			repeat: true,
+			bind: keyboardControls.down,
+			throttle: 150,
+			keyDown: function() {
+				if (saveOverlay()) return;
+				if (view() !== "menu") return;
+				moveMenu(1);
+			}
+		},
+		action: {
+			bind: keyboardControls.action,
+			keyDown: function() {
+				if (saveOverlay()) return;
+				if (view() !== "menu") return;
+				openMenu();
+			}
+		},
+		escape: {
+			bind: keyboardControls.escape,
+			keyDown: function() {
+				if (saveOverlay()) return;
+				if (view() !== "menu") {
+					goBack();
+					return;
+				}
+				onFinish();
+			}
+		},
+		gamepad: { enabled: true }
+	});
+	mount(function(element) {
+		engine.gamePause.set(true);
+		return function() {
+			delay(function() {
+				engine.stopProcessingInput = false;
+				engine.gamePause.set(false);
+			});
+		};
+	});
+	return h(DOMContainer, {
+		width: "100%",
+		height: "100%",
+		controls: menuControls
+	}, h(DOMElement, {
+		element: "div",
+		attrs: { class: "rpg-ui-main-menu rpg-anim-fade-in" }
+	}, [h(DOMElement, {
+		element: "div",
+		attrs: { class: "rpg-ui-main-menu-layout" }
+	}, [h(DOMElement, {
+		element: "div",
+		attrs: { class: "rpg-ui-main-menu-left rpg-ui-menu rpg-ui-panel" }
+	}, [h(DOMElement, {
+		element: "div",
+		attrs: { class: "rpg-ui-menu-header" },
+		textContent: "Menu"
+	}), h(DOMElement, {
+		element: "div",
+		attrs: { class: "rpg-ui-main-menu-list" }
+	}, loop(menuEntries(), (entry, index) => h(DOMElement, {
+		element: "div",
+		attrs: {
+			class: ["rpg-ui-menu-item", computed(() => ({ disabled: isMenuDisabled(entry) }))],
+			"data-selected": computed(() => selectedMenu() === index ? "true" : "false"),
+			tabindex: index,
+			click: selectMenu(index)
+		},
+		textContent: entry.label
+	})))]), h(DOMElement, {
+		element: "div",
+		attrs: { class: "rpg-ui-main-menu-right" }
+	}, [
+		cond(computed(() => view() === "menu"), () => h(DOMElement, {
+			element: "div",
+			attrs: { class: "rpg-ui-panel" }
+		}, [
+			h(DOMElement, {
+				element: "div",
+				attrs: { class: "rpg-ui-main-menu-section-title" },
+				textContent: "Status"
+			}),
+			h(DOMElement, {
+				element: "div",
+				attrs: { class: "rpg-ui-main-menu-status-card" }
+			}, [
+				h(DOMElement, {
+					element: "div",
+					attrs: { class: "rpg-ui-main-menu-status-block" }
+				}, [h(DOMElement, {
+					element: "div",
+					attrs: { class: "rpg-ui-main-menu-status-label" },
+					textContent: "Level"
+				}), h(DOMElement, {
+					element: "div",
+					attrs: { class: "rpg-ui-main-menu-status-value" },
+					textContent: computed(() => level())
+				})]),
+				h(DOMElement, {
+					element: "div",
+					attrs: { class: "rpg-ui-main-menu-status-block" }
+				}, [h(DOMElement, {
+					element: "div",
+					attrs: { class: "rpg-ui-main-menu-status-label" },
+					textContent: "Gold"
+				}), h(DOMElement, {
+					element: "div",
+					attrs: { class: "rpg-ui-main-menu-status-value" },
+					textContent: computed(() => gold())
+				})]),
+				h(DOMElement, {
+					element: "div",
+					attrs: { class: "rpg-ui-main-menu-status-block" }
+				}, [h(DOMElement, {
+					element: "div",
+					attrs: { class: "rpg-ui-main-menu-status-label" },
+					textContent: computed(() => "HP " + hp() + "/" + hpMax())
+				}), h(DOMElement, {
+					element: "div",
+					attrs: { class: "rpg-ui-main-menu-status-bar" }
+				}, h(DOMElement, {
+					element: "div",
+					attrs: {
+						class: "rpg-ui-main-menu-status-bar-fill hp",
+						style: { width: hpPercent }
+					}
+				}))]),
+				h(DOMElement, {
+					element: "div",
+					attrs: { class: "rpg-ui-main-menu-status-block" }
+				}, [h(DOMElement, {
+					element: "div",
+					attrs: { class: "rpg-ui-main-menu-status-label" },
+					textContent: computed(() => "SP " + sp() + "/" + spMax())
+				}), h(DOMElement, {
+					element: "div",
+					attrs: { class: "rpg-ui-main-menu-status-bar" }
+				}, h(DOMElement, {
+					element: "div",
+					attrs: {
+						class: "rpg-ui-main-menu-status-bar-fill sp",
+						style: { width: spPercent }
+					}
+				}))]),
+				h(DOMElement, {
+					element: "div",
+					attrs: {
+						class: "rpg-ui-main-menu-status-block",
+						style: { gridColumn: "span 2" }
+					}
+				}, [h(DOMElement, {
+					element: "div",
+					attrs: { class: "rpg-ui-main-menu-status-label" },
+					textContent: computed(() => "EXP " + exp() + "/" + expForNextlevel())
+				}), h(DOMElement, {
+					element: "div",
+					attrs: { class: "rpg-ui-main-menu-status-bar" }
+				}, h(DOMElement, {
+					element: "div",
+					attrs: {
+						class: "rpg-ui-main-menu-status-bar-fill exp",
+						style: { width: expPercent }
+					}
+				}))])
+			]),
+			h(DOMElement, {
+				element: "div",
+				attrs: { class: "rpg-ui-main-menu-section-title" },
+				textContent: "Parameters"
+			}),
+			h(DOMElement, {
+				element: "div",
+				attrs: { class: "rpg-ui-main-menu-params" }
+			}, loop(paramsList, (param, index) => h(DOMElement, {
+				element: "div",
+				attrs: { class: "rpg-ui-main-menu-param" }
+			}, [h(DOMElement, {
+				element: "span",
+				textContent: param.label
+			}), h(DOMElement, {
+				element: "span",
+				textContent: param.value
+			})])))
+		])),
+		cond(computed(() => view() === "items"), () => h(component$2, {
+			data,
+			onInteraction,
+			onBack: goBack
+		})),
+		cond(computed(() => view() === "skills"), () => h(component$3, {
+			data,
+			onBack: goBack
+		})),
+		cond(computed(() => view() === "equip"), () => h(component$4, {
+			data,
+			onInteraction,
+			onBack: goBack
+		})),
+		cond(computed(() => view() === "options"), () => h(component$5, { onBack: goBack })),
+		cond(computed(() => view() === "exit"), () => h(component$6, {
+			onConfirm: confirmExit,
+			onBack: goBack
+		}))
+	])]), cond(saveOverlay, () => h(DOMElement, {
+		element: "div",
+		attrs: { class: "rpg-ui-main-menu-overlay" }
+	}, [h(DOMElement, {
+		element: "div",
+		attrs: { class: "rpg-ui-main-menu-overlay-backdrop" }
+	}), h(DOMElement, {
+		element: "div",
+		attrs: { class: "rpg-ui-main-menu-overlay-content" }
+	}, h(component$1, {
+		data: saveLoadData,
+		onFinish: closeSaveOverlay
+	}))]))]));
+}
+//#endregion
+export { component as default };
+
+//# sourceMappingURL=main-menu.ce.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"main-menu.ce.js","names":[],"sources":["../../../../src/components/gui/menu/main-menu.ce"],"sourcesContent":["<DOMContainer width=\"100%\" height=\"100%\" controls={menuControls}>\n    <div class=\"rpg-ui-main-menu rpg-anim-fade-in\">\n        <div class=\"rpg-ui-main-menu-layout\">\n            <div class=\"rpg-ui-main-menu-left rpg-ui-menu rpg-ui-panel\">\n                <div class=\"rpg-ui-menu-header\">Menu</div>\n                <div class=\"rpg-ui-main-menu-list\">\n                    @for ((entry,index) of menuEntries()) {\n                        <div\n                            class=\"rpg-ui-menu-item\"\n                            class={{disabled: isMenuDisabled(entry)}}\n                            data-selected={selectedMenu() === index ? \"true\" : \"false\"}\n                            tabindex={index}\n                            click={selectMenu(index)}\n                        >{entry.label}</div>\n                    }\n                </div>\n            </div>\n            <div class=\"rpg-ui-main-menu-right\">\n                @if (view() === \"menu\") {\n                    <div class=\"rpg-ui-panel\">\n                        <div class=\"rpg-ui-main-menu-section-title\">Status</div>\n                        <div class=\"rpg-ui-main-menu-status-card\">\n                            <div class=\"rpg-ui-main-menu-status-block\">\n                                <div class=\"rpg-ui-main-menu-status-label\">Level</div>\n                                <div class=\"rpg-ui-main-menu-status-value\">{level()}</div>\n                            </div>\n                            <div class=\"rpg-ui-main-menu-status-block\">\n                                <div class=\"rpg-ui-main-menu-status-label\">Gold</div>\n                                <div class=\"rpg-ui-main-menu-status-value\">{gold()}</div>\n                            </div>\n                            <div class=\"rpg-ui-main-menu-status-block\">\n                                <div class=\"rpg-ui-main-menu-status-label\">HP {hp()}/{hpMax()}</div>\n                                <div class=\"rpg-ui-main-menu-status-bar\">\n                                    <div class=\"rpg-ui-main-menu-status-bar-fill hp\" style={{width: hpPercent}}></div>\n                                </div>\n                            </div>\n                            <div class=\"rpg-ui-main-menu-status-block\">\n                                <div class=\"rpg-ui-main-menu-status-label\">SP {sp()}/{spMax()}</div>\n                                <div class=\"rpg-ui-main-menu-status-bar\">\n                                    <div class=\"rpg-ui-main-menu-status-bar-fill sp\" style={{width: spPercent}}></div>\n                                </div>\n                            </div>\n                            <div class=\"rpg-ui-main-menu-status-block\" style={{gridColumn: \"span 2\"}}>\n                                <div class=\"rpg-ui-main-menu-status-label\">EXP {exp()}/{expForNextlevel()}</div>\n                                <div class=\"rpg-ui-main-menu-status-bar\">\n                                    <div class=\"rpg-ui-main-menu-status-bar-fill exp\" style={{width: expPercent}}></div>\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"rpg-ui-main-menu-section-title\">Parameters</div>\n                        <div class=\"rpg-ui-main-menu-params\">\n                            @for ((param,index) of paramsList) {\n                                <div class=\"rpg-ui-main-menu-param\">\n                                    <span>{param.label}</span>\n                                    <span>{param.value}</span>\n                                </div>\n                            }\n                        </div>\n                    </div>\n                }\n                @if (view() === \"items\") {\n                    <ItemsMenu data={data} onInteraction={onInteraction} onBack={goBack} />\n                }\n                @if (view() === \"skills\") {\n                    <SkillsMenu data={data} onBack={goBack} />\n                }\n                @if (view() === \"equip\") {\n                    <EquipMenu data={data} onInteraction={onInteraction} onBack={goBack} />\n                }\n                @if (view() === \"options\") {\n                    <OptionsMenu onBack={goBack} />\n                }\n                @if (view() === \"exit\") {\n                    <ExitMenu onConfirm={confirmExit} onBack={goBack} />\n                }\n            </div>\n        </div>\n        @if (saveOverlay) {\n            <div class=\"rpg-ui-main-menu-overlay\">\n                <div class=\"rpg-ui-main-menu-overlay-backdrop\"></div>\n                <div class=\"rpg-ui-main-menu-overlay-content\">\n                    <SaveLoadComponent\n                        data={saveLoadData}\n                        onFinish={closeSaveOverlay}\n                    />\n                </div>\n            </div>\n        }\n    </div>\n</DOMContainer>\n\n<script>\n    import { signal, computed, effect, mount } from \"canvasengine\";\n    import { inject } from \"../../../core/inject\";\n    import { RpgClientEngine } from \"../../../RpgClientEngine\";\n    import SaveLoadComponent from \"../save-load.ce\";\n    import ItemsMenu from \"./items-menu.ce\";\n    import SkillsMenu from \"./skills-menu.ce\";\n    import EquipMenu from \"./equip-menu.ce\";\n    import OptionsMenu from \"./options-menu.ce\";\n    import ExitMenu from \"./exit-menu.ce\";\n    import { getEntityProp } from \"../../../utils/getEntityProp\";\n    import { delay } from \"@rpgjs/common\";\n\n    const engine = inject(RpgClientEngine);\n    const currentPlayer = engine.scene.currentPlayer;\n    const keyboardControls = engine.globalConfig.keyboardControls;\n\n    const { data, onFinish, onInteraction } = defineProps();\n    const { menus, items, skills, equips, saveLoad } = data();\n\n    const defaultMenus = [\n        { id: \"items\", label: \"Items\" },\n        { id: \"skills\", label: \"Skills\" },\n        { id: \"equip\", label: \"Equip\" },\n        { id: \"options\", label: \"Options\" },\n        { id: \"save\", label: \"Save\" },\n        { id: \"exit\", label: \"Exit\" }\n    ];\n\n    const menuEntries = computed(() => {\n        if (menus && Array.isArray(menus) && menus.length) return menus;\n        return defaultMenus;\n    });\n\n    const resolveProp = (value) => typeof value === \"function\" ? value() : value;\n    const saveLoadData = computed(() => resolveProp(saveLoad) || {});\n    const saveLoadMode = computed(() => saveLoadData().mode || \"load\");\n    const saveLoadSlots = computed(() => saveLoadData().slots || []);\n    const saveLoadCanSave = computed(() => saveLoadData().canSave !== false);\n\n    const isMenuDisabled = (entry) => {\n        if (!entry) return true;\n        if (entry.disabled) return true;\n        if (entry.enabled === false) return true;\n        if (entry.id === \"save\" && !saveLoadCanSave()) return true;\n        return false;\n    };\n\n    const selectedMenu = signal(0);\n    const view = signal(\"menu\");\n    const saveOverlay = signal(false);\n\n    const selectableIndexes = computed(() => {\n        const entries = menuEntries();\n        return entries\n            .map((entry, index) => (isMenuDisabled(entry) ? null : index))\n            .filter((value) => value !== null);\n    });\n\n    effect(() => {\n        const available = selectableIndexes();\n        if (!available.length) return;\n        const current = selectedMenu();\n        if (!available.includes(current)) {\n            selectedMenu.set(available[0]);\n        }\n    });\n\n    const moveMenu = (delta) => {\n        const available = selectableIndexes();\n        if (!available.length) return;\n        const current = selectedMenu();\n        const currentIndex = Math.max(0, available.indexOf(current));\n        const nextIndex = (currentIndex + delta + available.length) % available.length;\n        selectedMenu.set(available[nextIndex]);\n    };\n\n    function selectMenu(index) {\n        return function() {\n            selectedMenu.set(index);\n            openMenu();\n        }\n    }\n\n    const openMenu = () => {\n        const entry = menuEntries()[selectedMenu()];\n        if (!entry || isMenuDisabled(entry)) return;\n        if (entry.id === \"save\") {\n            saveOverlay.set(true);\n            return;\n        }\n        if (entry.id === \"exit\") {\n            view.set(\"exit\");\n            return;\n        }\n        view.set(entry.id);\n    };\n\n    const goBack = () => {\n        delay(() => {\n            view.set(\"menu\");\n        });\n    };\n\n    const closeSaveOverlay = () => {\n        delay(() => {\n            saveOverlay.set(false);\n            view.set(\"menu\");\n        });\n    };\n\n    const confirmExit = () => {\n        if (onInteraction) onInteraction(\"exit\");\n    };\n\n    const hp = getEntityProp(currentPlayer, \"hp\");\n    const hpMax = getEntityProp(currentPlayer, \"params.maxHp\");\n    const sp = getEntityProp(currentPlayer, \"sp\");\n    const spMax = getEntityProp(currentPlayer, \"params.maxSp\");\n    const level = getEntityProp(currentPlayer, \"level\");\n    const exp = getEntityProp(currentPlayer, \"exp\");\n    const gold = getEntityProp(currentPlayer, \"gold\");\n    const expForNextlevel = computed(() => data().expForNextlevel || 0);\n    const hpPercent = computed(() => {\n        const max = hpMax() || 1;\n        return `${Math.max(0, Math.min(100, (hp() / max) * 100))}%`;\n    });\n    const spPercent = computed(() => {\n        const max = spMax() || 1;\n        return `${Math.max(0, Math.min(100, (sp() / max) * 100))}%`;\n    });\n    const expPercent = computed(() => {\n        const max = expForNextlevel() || 1;\n        return `${Math.max(0, Math.min(100, (exp() / max) * 100))}%`;\n    });\n\n    const paramsList = computed(() => {\n        return [\n            { label: \"ATK\", value: data().playerStats.atk },\n            { label: \"PDEF\", value: data().playerStats.pdef },\n            { label: \"SDEF\", value: data().playerStats.sdef },\n            { label: \"STR\", value: data().playerStats.str },\n            { label: \"DEX\", value: data().playerStats.dex },\n            { label: \"INT\", value: data().playerStats.int },\n            { label: \"AGI\", value: data().playerStats.agi }\n        ]\n    }\n\n    const menuControls = signal({\n        up: {\n            repeat: true,\n            bind: keyboardControls.up,\n            throttle: 150,\n            keyDown() {\n                if (saveOverlay()) return;\n                if (view() !== \"menu\") return;\n                moveMenu(-1);\n            }\n        },\n        down: {\n            repeat: true,\n            bind: keyboardControls.down,\n            throttle: 150,\n            keyDown() {\n                if (saveOverlay()) return;\n                if (view() !== \"menu\") return;\n                moveMenu(1);\n            }\n        },\n        action: {\n            bind: keyboardControls.action,\n            keyDown() {\n                if (saveOverlay()) return;\n                if (view() !== \"menu\") return;\n                openMenu();\n            }\n        },\n        escape: {\n            bind: keyboardControls.escape,\n            keyDown() {\n                if (saveOverlay()) return;\n                if (view() !== \"menu\") {\n                    goBack();\n                    return;\n                }\n                onFinish()\n            }\n        },\n        gamepad: {\n            enabled: true\n        }\n    });\n\n    mount((element) => {\n        engine.gamePause.set(true);\n        return () => {\n            delay(() => {\n                engine.stopProcessingInput = false;\n                engine.gamePause.set(false);\n            });\n        }\n    });\n</script>\n"],"mappings":"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"}

package/dist/components/gui/menu/options-menu.ce.js

@@ -0,0 +1,48 @@
+import { inject } from "../../../core/inject.js";
+import { RpgClientEngine } from "../../../RpgClientEngine.js";
+import { DOMContainer, DOMElement, h, signal, useDefineProps, useProps } from "canvasengine";
+//#region src/components/gui/menu/options-menu.ce
+function component($$props) {
+	useProps($$props);
+	const defineProps = useDefineProps($$props);
+	var keyboardControls = inject(RpgClientEngine).globalConfig.keyboardControls;
+	var onBack = defineProps().onBack;
+	return h(DOMContainer, {
+		width: "100%",
+		height: "100%",
+		controls: signal({
+			escape: {
+				bind: keyboardControls.escape,
+				keyDown: function() {
+					if (onBack) onBack();
+				}
+			},
+			gamepad: { enabled: true }
+		})
+	}, h(DOMElement, {
+		element: "div",
+		attrs: { class: "rpg-ui-menu-panel rpg-ui-panel" }
+	}, [h(DOMElement, {
+		element: "div",
+		attrs: { class: "rpg-ui-menu-panel-header" },
+		textContent: "Options"
+	}), h(DOMElement, {
+		element: "div",
+		attrs: { class: "rpg-ui-menu-panel-body" }
+	}, h(DOMElement, {
+		element: "div",
+		attrs: { class: "rpg-ui-menu-panel-details" }
+	}, [h(DOMElement, {
+		element: "div",
+		attrs: { class: "rpg-ui-menu-panel-details-title" },
+		textContent: "Options"
+	}), h(DOMElement, {
+		element: "div",
+		attrs: { class: "rpg-ui-menu-panel-details-desc" },
+		textContent: "Configure your preferences here.\n                "
+	})]))]));
+}
+//#endregion
+export { component as default };
+
+//# sourceMappingURL=options-menu.ce.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"options-menu.ce.js","names":[],"sources":["../../../../src/components/gui/menu/options-menu.ce"],"sourcesContent":["<DOMContainer width=\"100%\" height=\"100%\" controls={controls}>\n    <div class=\"rpg-ui-menu-panel rpg-ui-panel\">\n        <div class=\"rpg-ui-menu-panel-header\">Options</div>\n        <div class=\"rpg-ui-menu-panel-body\">\n            <div class=\"rpg-ui-menu-panel-details\">\n                <div class=\"rpg-ui-menu-panel-details-title\">Options</div>\n                <div class=\"rpg-ui-menu-panel-details-desc\">\n                    Configure your preferences here.\n                </div>\n            </div>\n        </div>\n    </div>\n</DOMContainer>\n\n<script>\n    import { signal } 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    const { onBack } = defineProps();\n\n    const controls = signal({\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":";;;;AASM,SAAW,UAAA,SAAA;AACJ,UAAA,QAAA;CACP,MAAG,cAAA,eAAA,QAAA;wBACK,OAAA,gBAAA,CAAA,aAAA;CAEd,IAAC,SAAM,aAAA,CAAA;AAcC,QADY,EAAA,cAAgB;EAAA,OAAA;EAAA,QAAA;EAAA,UAZvB,OAAS;GAClB,QAAQ;IACR,MAAS,iBAAkB;;AAErB,SAAM,OACN,SAAA;;;GAGN,SAAM,EACF,SAAQ,MACX;GACJ,CAAC;EACkC,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,0BAAA;EAAA,EAAA,EAAA,YAAA;EAAA,SAAA;EAAA,OAAA,EAAA,OAAA,6BAAA;EAAA,EAAA,CAAA,EAAA,YAAA;EAAA,SAAA;EAAA,OAAA,EAAA,OAAA,mCAAA;EAAA,aAAA;EAAA,CAAA,EAAA,EAAA,YAAA;EAAA,SAAA;EAAA,OAAA,EAAA,OAAA,kCAAA;EAAA,aAAA;EAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA"}

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

@@ -0,0 +1,107 @@
+import { inject } from "../../../core/inject.js";
+import { RpgClientEngine } from "../../../RpgClientEngine.js";
+import { DOMContainer, DOMElement, Navigation, computed, cond, createTabindexNavigator, h, loop, signal, useDefineProps, useProps } from "canvasengine";
+//#region src/components/gui/menu/skills-menu.ce
+function component($$props) {
+	useProps($$props);
+	const defineProps = useDefineProps($$props);
+	var keyboardControls = inject(RpgClientEngine).globalConfig.keyboardControls;
+	var selectedSkill = signal(0);
+	var _a = defineProps(), data = _a.data, onBack = _a.onBack;
+	var skills = computed(function() {
+		return data().skills;
+	});
+	var nav = createTabindexNavigator(selectedSkill, { count: function() {
+		return skills().length;
+	} }, "wrap");
+	var currentSkill = computed(function() {
+		return skills()[selectedSkill()];
+	});
+	function selectSkill(index) {
+		return function() {
+			selectedSkill.set(index);
+		};
+	}
+	var controls = signal({
+		up: {
+			repeat: true,
+			bind: keyboardControls.up,
+			throttle: 150,
+			keyDown: function() {
+				nav.next(-1);
+			}
+		},
+		down: {
+			repeat: true,
+			bind: keyboardControls.down,
+			throttle: 150,
+			keyDown: function() {
+				nav.next(1);
+			}
+		},
+		escape: {
+			bind: keyboardControls.escape,
+			keyDown: function() {
+				if (onBack) onBack();
+			}
+		},
+		gamepad: { enabled: true }
+	});
+	return h(DOMContainer, {
+		width: "100%",
+		height: "100%"
+	}, h(DOMElement, {
+		element: "div",
+		attrs: { class: "rpg-ui-menu-panel rpg-ui-panel" }
+	}, [h(DOMElement, {
+		element: "div",
+		attrs: { class: "rpg-ui-menu-panel-header" },
+		textContent: "Skills"
+	}), h(DOMElement, {
+		element: "div",
+		attrs: { class: "rpg-ui-menu-panel-body rpg-ui-menu-panel-body-stacked" }
+	}, [h(DOMElement, {
+		element: "div",
+		attrs: { class: "rpg-ui-menu-panel-details rpg-ui-panel" }
+	}, cond(currentSkill, () => h(DOMElement, {
+		element: "div",
+		attrs: { class: "rpg-ui-menu-panel-hero" }
+	}, [h(DOMElement, {
+		element: "div",
+		attrs: { class: "rpg-ui-menu-panel-hero-icon" },
+		textContent: "✨"
+	}), h(DOMElement, { element: "div" }, [h(DOMElement, {
+		element: "div",
+		attrs: { class: "rpg-ui-menu-panel-details-title" },
+		textContent: computed(() => currentSkill()?.name)
+	}), h(DOMElement, {
+		element: "div",
+		attrs: { class: "rpg-ui-menu-panel-details-desc" },
+		textContent: computed(() => currentSkill()?.description || "")
+	})])]))), h(DOMElement, {
+		element: "div",
+		attrs: { class: "rpg-ui-menu-panel-list rpg-ui-menu rpg-ui-menu-panel-list-full" }
+	}, h(Navigation, {
+		tabindex: selectedSkill,
+		controls
+	}, loop(skills, (skill, index) => h(DOMElement, {
+		element: "div",
+		attrs: {
+			class: "rpg-ui-menu-item rpg-ui-menu-row",
+			"data-selected": computed(() => selectedSkill() === index ? "true" : "false"),
+			tabindex: index,
+			click: selectSkill(index)
+		}
+	}, [h(DOMElement, {
+		element: "span",
+		textContent: skill.name
+	}), h(DOMElement, {
+		element: "span",
+		attrs: { class: "rpg-ui-menu-row-end" },
+		textContent: "SP " + skill.spCost
+	})]))))])]));
+}
+//#endregion
+export { component as default };
+
+//# sourceMappingURL=skills-menu.ce.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,8 @@
+export declare const withMobile: () => {
+    gui: {
+        id: string;
+        component: any;
+        autoDisplay: boolean;
+        dependencies: () => (import('canvasengine').WritableSignal<undefined> | import('canvasengine').WritableSignal<true | undefined>)[];
+    }[];
+};

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

@@ -0,0 +1,21 @@
+import { inject } from "../../../core/inject.js";
+import { RpgClientEngine } from "../../../RpgClientEngine.js";
+import component from "./mobile.ce.js";
+import { signal } from "canvasengine";
+//#region src/components/gui/mobile/index.ts
+function isMobile() {
+	return /Android|iPhone|iPad|iPod|Windows Phone|webOS|BlackBerry/i.test(navigator.userAgent);
+}
+var withMobile = () => ({ gui: [{
+	id: "mobile-gui",
+	component,
+	autoDisplay: true,
+	dependencies: () => {
+		const engine = inject(RpgClientEngine);
+		return [signal(isMobile() || void 0), engine.controlsReady];
+	}
+}] });
+//#endregion
+export { withMobile };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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"}