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

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

@@ -5,15 +5,15 @@ import { DOMContainer, DOMElement, h, signal, useDefineProps, useProps } from "c
 function component($$props) {
 	useProps($$props);
 	const defineProps = useDefineProps($$props);
-	var keyboardControls = inject(RpgClientEngine).globalConfig.keyboardControls;
-	var onBack = defineProps().onBack;
+	const keyboardControls = inject(RpgClientEngine).globalConfig.keyboardControls;
+	const { onBack } = defineProps();
 	return h(DOMContainer, {
 		width: "100%",
 		height: "100%",
 		controls: signal({
 			escape: {
 				bind: keyboardControls.escape,
-				keyDown: function() {
+				keyDown() {
 					if (onBack) onBack();
 				}
 			},

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

@@ -1 +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"}
+{"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;0BACK,OAAA,gBAAA,CAAA,aAAA;CAEd,MAAC,EAAM,WAAA,aAAA;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,CACmC;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,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,CACxB"}

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

@@ -5,29 +5,23 @@ import { DOMContainer, DOMElement, Navigation, computed, cond, createTabindexNav
 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()];
-	});
+	const keyboardControls = inject(RpgClientEngine).globalConfig.keyboardControls;
+	const selectedSkill = signal(0);
+	const { data, onBack } = defineProps();
+	const skills = computed(() => data().skills);
+	const nav = createTabindexNavigator(selectedSkill, { count: () => skills().length }, "wrap");
+	const currentSkill = computed(() => skills()[selectedSkill()]);
 	function selectSkill(index) {
 		return function() {
 			selectedSkill.set(index);
 		};
 	}
-	var controls = signal({
+	const controls = signal({
 		up: {
 			repeat: true,
 			bind: keyboardControls.up,
 			throttle: 150,
-			keyDown: function() {
+			keyDown() {
 				nav.next(-1);
 			}
 		},
@@ -35,13 +29,13 @@ function component($$props) {
 			repeat: true,
 			bind: keyboardControls.down,
 			throttle: 150,
-			keyDown: function() {
+			keyDown() {
 				nav.next(1);
 			}
 		},
 		escape: {
 			bind: keyboardControls.escape,
-			keyDown: function() {
+			keyDown() {
 				if (onBack) onBack();
 			}
 		},

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\">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,MAAM,mBADU,OAAA,gBACC,CAAA,aAAA;CACjB,MAAM,gBAAgB,OAAM,EAAG;CAC/B,MAAM,EAAE,MAAM,WAAG,aAAqB;CACtC,MAAM,SAAS,eAAY,MAAM,CAAA,OAAU;CAC3C,MAAM,MAAM,wBAAa,eAAA,EAAA,aAAA,QAAA,CAAA,QAAA,EAAA,OAAA;CACzB,MAAM,eAAe,eAAc,QAAO,CAAA,eAAiB,EAAA;CAC3D,SAAS,YAAY,OAAO;AACxB,SAAO,WAAY;AACf,iBAAc,IAAI,MAAE;;;CAG5B,MAAM,WAAW,OAAO;EACpB,IAAI;GACA,QAAQ;GACR,MAAM,iBAAc;GACpB,UAAS;GACT,UAAK;AACJ,QAAA,KAAA,GAAA;;;EAGR,MAAM;GACH,QAAS;GACT,MAAS,iBAAkB;GAC3B,UAAS;;AAEH,QAAM,KAAG,EAAA;;;EAGf,QAAM;GACN,MAAQ,iBAAiB;GACzB,UAAc;eAEF,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/mobile.ce.js

@@ -4,9 +4,9 @@ import { Button, Container, Joystick, h, mount, signal, useDefineProps, useProps
 function component($$props) {
 	useProps($$props);
 	useDefineProps($$props);
-	var controlsInstance = signal(null);
-	mount(function(element) {
-		var control = inject("KeyboardControls");
+	const controlsInstance = signal(null);
+	mount((element) => {
+		const control = inject("KeyboardControls");
 		controlsInstance.set(control);
 	});
 	return h(Container, {

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 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,MAAM,mBAAY,OAAA,KAAgB;AAC1C,QAAO,YAAS;EACZ,MAAM,UAAM,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,CACpB"}

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

@@ -11,29 +11,23 @@ if (typeof document !== "undefined" && !document.getElementById("ce-style--home-
 function component($$props) {
 	useProps($$props);
 	useDefineProps($$props);
-	var engine = inject(RpgClientEngine);
-	var notifications = computed(function() {
-		return engine.notificationManager.stack();
+	const engine = inject(RpgClientEngine);
+	const notifications = computed(() => engine.notificationManager.stack());
+	const iconSheet = (iconId) => ({
+		definition: engine.getSpriteSheet(iconId),
+		playing: "default"
 	});
-	var iconSheet = function(iconId) {
-		return {
-			definition: engine.getSpriteSheet(iconId),
-			playing: "default"
-		};
-	};
-	effect(function() {
-		var list = notifications();
-		var rowHeight = 68;
-		list.forEach(function(notif, index) {
+	effect(() => {
+		const list = notifications();
+		const rowHeight = 68;
+		list.forEach((notif, index) => {
 			notif.layoutY.set(index * rowHeight);
 		});
 	});
-	var notificationStyle = function(notif) {
-		return {
-			opacity: notif.opacity(),
-			transform: "translateY(".concat(notif.layoutY() + notif.offset(), "px)")
-		};
-	};
+	const notificationStyle = (notif) => ({
+		opacity: notif.opacity(),
+		transform: `translateY(${notif.layoutY() + notif.offset()}px)`
+	});
 	return h(DOMContainer, {
 		width: "100%",
 		height: "100%",

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

@@ -1 +1 @@
-{"version":3,"file":"notification.ce.js","names":[],"sources":["../../../../src/components/gui/notification/notification.ce"],"sourcesContent":["<DOMContainer width=\"100%\" height=\"100%\" zIndex={100} class=\"notification\">\n    <div class=\"rpg-ui-notifications\">\n        @for ((notif,index) of notifications) {\n            <div\n                class=\"rpg-ui-notification\"\n                data-type={notif.type || \"info\"}\n                style={notificationStyle(notif)}\n            >\n                @if (notif.icon) {\n                    <div class=\"rpg-ui-notification-icon\">\n                        <DOMSprite sheet={iconSheet(notif.icon)} />\n                    </div>\n                }\n                <div class=\"rpg-ui-notification-message\">{notif.message}</div>\n            </div>\n        }\n    </div>\n</DOMContainer>\n\n<style>\n    .notification {\n        pointer-events: none !important;\n    }\n</style>\n\n<script>\n    import { effect, computed } from \"canvasengine\";\n    import { inject } from \"../../../core/inject\";\n    import { RpgClientEngine } from \"../../../RpgClientEngine\";\n\n    const engine = inject(RpgClientEngine);\n    const notifications = computed(() => engine.notificationManager.stack());\n\n    const iconSheet = (iconId) => ({\n        definition: engine.getSpriteSheet(iconId),\n        playing: \"default\"\n    });\n\n    effect(() => {\n        const list = notifications();\n        const rowHeight = 68;\n        list.forEach((notif, index) => {\n            notif.layoutY.set(index * rowHeight);\n        });\n    });\n\n    const notificationStyle = (notif) => ({\n        opacity: notif.opacity(),\n        transform: `translateY(${notif.layoutY() + notif.offset()}px)`\n    });\n</script>\n"],"mappings":";;;;AAUA,IAAI,OAAO,aAAa,eAAW,CAAK,SAAE,eAAsB,2GAAE,EAAA;CAChE,MAAM,eAAc,SAAG,cAAA,QAAA;AACvB,cAAa,KAAC;AACd,cAAa,cAAa;AAC1B,UAAS,KAAG,YAAG,aAAA;;AAGf,SAAY,UAAA,SAAA;;AAER,gBAAA,QAAA;CACD,IAAA,SAAa,OAAA,gBAAA;CAClB,IAAI,gBAAY,SAAa,WAAU;AAAA,SAAA,OAAA,oBAAA,OAAA;GAAA;CACvC,IAAI,YAAA,SAAA,QAAA;AAAA,SAAA;GACF,YAAK,OAAA,eAAA,OAAA;;GAEN;;AACD,QAAI,WAAe;EACf,IAAA,OAAS,eAAiB;EAC1B,IAAA,YAAS;;AAET,SAAM,QAAS,IAAO,QAAA,UAAgB;IACtC;;CAEJ,IAAI,oBAAmB,SAAW,OAAC;AAAA,SAAA;GAC/B,SAAI,MAAW,SAAQ;GACvB,WAAW,cAAU,OAAA,MAAA,SAAA,GAAA,MAAA,QAAA,EAAA,MAAA;GACxB;;AAEG,QAAA,EAAA,cAAA"}
+{"version":3,"file":"notification.ce.js","names":[],"sources":["../../../../src/components/gui/notification/notification.ce"],"sourcesContent":["<DOMContainer width=\"100%\" height=\"100%\" zIndex={100} class=\"notification\">\n    <div class=\"rpg-ui-notifications\">\n        @for ((notif,index) of notifications) {\n            <div\n                class=\"rpg-ui-notification\"\n                data-type={notif.type || \"info\"}\n                style={notificationStyle(notif)}\n            >\n                @if (notif.icon) {\n                    <div class=\"rpg-ui-notification-icon\">\n                        <DOMSprite sheet={iconSheet(notif.icon)} />\n                    </div>\n                }\n                <div class=\"rpg-ui-notification-message\">{notif.message}</div>\n            </div>\n        }\n    </div>\n</DOMContainer>\n\n<style>\n    .notification {\n        pointer-events: none !important;\n    }\n</style>\n\n<script>\n    import { effect, computed } from \"canvasengine\";\n    import { inject } from \"../../../core/inject\";\n    import { RpgClientEngine } from \"../../../RpgClientEngine\";\n\n    const engine = inject(RpgClientEngine);\n    const notifications = computed(() => engine.notificationManager.stack());\n\n    const iconSheet = (iconId) => ({\n        definition: engine.getSpriteSheet(iconId),\n        playing: \"default\"\n    });\n\n    effect(() => {\n        const list = notifications();\n        const rowHeight = 68;\n        list.forEach((notif, index) => {\n            notif.layoutY.set(index * rowHeight);\n        });\n    });\n\n    const notificationStyle = (notif) => ({\n        opacity: notif.opacity(),\n        transform: `translateY(${notif.layoutY() + notif.offset()}px)`\n    });\n</script>\n"],"mappings":";;;;AAUA,IAAI,OAAO,aAAa,eAAW,CAAK,SAAE,eAAsB,2GAAE,EAAA;CAChE,MAAM,eAAc,SAAG,cAAA,QAAA;AACvB,cAAa,KAAC;AACd,cAAa,cAAa;AAC1B,UAAS,KAAG,YAAG,aAAA;;AAGf,SAAY,UAAA,SAAA;;AAER,gBAAA,QAAA;CACD,MAAA,SAAa,OAAA,gBAAA;CAClB,MAAM,gBAAgB,eAAQ,OAAS,oBAAA,OAAA,CAAA;CACvC,MAAI,aAAA,YAAA;EACF,YAAK,OAAA,eAAA,OAAA;;EAEN;AACD,cAAa;EACT,MAAM,OAAG,eAAmB;EAC5B,MAAM,YAAG;;AAET,SAAM,QAAS,IAAO,QAAA,UAAgB;IACtC;;CAEJ,MAAI,qBAAmB,WAAY;EAC/B,SAAI,MAAW,SAAQ;EACvB,WAAW,cAAU,MAAA,SAAA,GAAA,MAAA,QAAA,CAAA;EACxB;AAEG,QAAA,EAAA,cAAA;;;;;;;;;;;;;;;;;;;;;;QAAa"}

package/dist/components/gui/save-load.ce.js

@@ -8,274 +8,95 @@ import { PrebuiltGui } from "@rpgjs/common";
 function component($$props) {
 	useProps($$props);
 	const defineProps = useDefineProps($$props);
-	var __awaiter = this && this.__awaiter || function(thisArg, _arguments, P, generator) {
-		function adopt(value) {
-			return value instanceof P ? value : new P(function(resolve) {
-				resolve(value);
-			});
-		}
-		return new (P || (P = Promise))(function(resolve, reject) {
-			function fulfilled(value) {
-				try {
-					step(generator.next(value));
-				} catch (e) {
-					reject(e);
-				}
-			}
-			function rejected(value) {
-				try {
-					step(generator["throw"](value));
-				} catch (e) {
-					reject(e);
-				}
-			}
-			function step(result) {
-				result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
-			}
-			step((generator = generator.apply(thisArg, _arguments || [])).next());
-		});
-	};
-	var __generator = this && this.__generator || function(thisArg, body) {
-		var _ = {
-			label: 0,
-			sent: function() {
-				if (t[0] & 1) throw t[1];
-				return t[1];
-			},
-			trys: [],
-			ops: []
-		}, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
-		return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() {
-			return this;
-		}), g;
-		function verb(n) {
-			return function(v) {
-				return step([n, v]);
-			};
-		}
-		function step(op) {
-			if (f) throw new TypeError("Generator is already executing.");
-			while (g && (g = 0, op[0] && (_ = 0)), _) try {
-				if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-				if (y = 0, t) op = [op[0] & 2, t.value];
-				switch (op[0]) {
-					case 0:
-					case 1:
-						t = op;
-						break;
-					case 4:
-						_.label++;
-						return {
-							value: op[1],
-							done: false
-						};
-					case 5:
-						_.label++;
-						y = op[1];
-						op = [0];
-						continue;
-					case 7:
-						op = _.ops.pop();
-						_.trys.pop();
-						continue;
-					default:
-						if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
-							_ = 0;
-							continue;
-						}
-						if (op[0] === 3 && (!t || op[1] > t[0] && op[1] < t[3])) {
-							_.label = op[1];
-							break;
-						}
-						if (op[0] === 6 && _.label < t[1]) {
-							_.label = t[1];
-							t = op;
-							break;
-						}
-						if (t && _.label < t[2]) {
-							_.label = t[2];
-							_.ops.push(op);
-							break;
-						}
-						if (t[2]) _.ops.pop();
-						_.trys.pop();
-						continue;
-				}
-				op = body.call(thisArg, _);
-			} catch (e) {
-				op = [6, e];
-				y = 0;
-			} finally {
-				f = t = 0;
-			}
-			if (op[0] & 5) throw op[1];
-			return {
-				value: op[0] ? op[1] : void 0,
-				done: true
-			};
-		}
-	};
-	var __spreadArray = this && this.__spreadArray || function(to, from, pack) {
-		if (pack || arguments.length === 2) {
-			for (var i = 0, l = from.length, ar; i < l; i++) if (ar || !(i in from)) {
-				if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-				ar[i] = from[i];
-			}
-		}
-		return to.concat(ar || Array.prototype.slice.call(from));
-	};
-	var engine = inject(RpgClientEngine);
-	var saveClient = inject(SaveClientService);
-	var gui = inject(RpgGui);
-	var keyboardControls = engine.globalConfig.keyboardControls;
-	var selectedSlot = signal(0);
-	var DEFAULT_SLOTS = 4;
-	var defaultSlots = function() {
-		return Array.from({ length: DEFAULT_SLOTS }, function() {
-			return null;
-		});
-	};
-	var localSlots = signal(defaultSlots());
-	var _a = defineProps(), data = _a.data, onFinish = _a.onFinish;
-	var title = computed(function() {
-		return data().mode === "save" ? "Save Game" : "Load Game";
-	});
-	var subtitle = computed(function() {
-		return data().mode === "save" ? "Choose a slot to overwrite or create." : "Select a slot to load your progress.";
-	});
-	var slotsValue = computed(function() {
-		return localSlots();
-	});
-	var displaySlots = computed(function() {
-		var _a;
-		var slots = slotsValue();
-		var items = slots.map(function(slot, index) {
-			return {
-				kind: "slot",
-				slot,
-				slotIndex: index,
-				label: "Slot ".concat(index + 1),
-				readonly: false
-			};
-		});
+	const engine = inject(RpgClientEngine);
+	const saveClient = inject(SaveClientService);
+	const gui = inject(RpgGui);
+	const keyboardControls = engine.globalConfig.keyboardControls;
+	const selectedSlot = signal(0);
+	const DEFAULT_SLOTS = 4;
+	const defaultSlots = () => Array.from({ length: DEFAULT_SLOTS }, () => null);
+	const localSlots = signal(defaultSlots());
+	const { data, onFinish } = defineProps();
+	const title = computed(() => data().mode === "save" ? "Save Game" : "Load Game");
+	const subtitle = computed(() => data().mode === "save" ? "Choose a slot to overwrite or create." : "Select a slot to load your progress.");
+	const slotsValue = computed(() => localSlots());
+	const displaySlots = computed(() => {
+		const slots = slotsValue();
+		const items = slots.map((slot, index) => ({
+			kind: "slot",
+			slot,
+			slotIndex: index,
+			label: `Slot ${index + 1}`,
+			readonly: false
+		}));
 		if (!data().showAutoSlot) return items;
-		var index = typeof data().autoSlotIndex === "number" ? data().autoSlotIndex : 0;
-		var autoSlot = (_a = slots[index]) !== null && _a !== void 0 ? _a : null;
-		var readonly = data().mode === "save";
-		return __spreadArray([{
+		const index = typeof data().autoSlotIndex === "number" ? data().autoSlotIndex : 0;
+		const autoSlot = slots[index] ?? null;
+		const readonly = data().mode === "save";
+		return [{
 			kind: "auto",
 			slot: autoSlot,
 			slotIndex: index,
 			label: data().autoSlotLabel || "Auto Save",
 			readonly
-		}], items, true);
+		}, ...items];
 	});
-	var nav = createTabindexNavigator(selectedSlot, { count: function() {
-		return displaySlots().length;
-	} }, "wrap");
-	var canSelect = function(item) {
+	const nav = createTabindexNavigator(selectedSlot, { count: () => displaySlots().length }, "wrap");
+	const canSelect = (item) => {
 		if (item.readonly) return false;
 		if (data().mode === "load" && !item.slot) return false;
 		return true;
 	};
-	var normalizeSlotValue = function(value) {
+	const normalizeSlotValue = (value) => {
 		if (!value) return null;
 		if (typeof value === "string") try {
 			return JSON.parse(value);
-		} catch (_a) {
+		} catch {
 			return null;
 		}
 		return value;
 	};
-	var normalizeSlots = function(list) {
+	const normalizeSlots = (list) => {
 		if (Array.isArray(list)) {
-			var length_1 = Math.max(list.length, DEFAULT_SLOTS);
-			return Array.from({ length: length_1 }, function(_, index) {
-				return normalizeSlotValue(list[index]);
-			});
+			const length = Math.max(list.length, DEFAULT_SLOTS);
+			return Array.from({ length }, (_, index) => normalizeSlotValue(list[index]));
 		}
 		if (!list || typeof list !== "object") return defaultSlots();
-		var keys = Object.keys(list).filter(function(key) {
-			return /^\d+$/.test(key);
-		});
-		var indices = keys.map(function(key) {
-			return Number(key);
-		}).filter(function(index) {
-			return index >= 0;
-		});
-		var maxIndex = indices.length ? Math.max.apply(Math, indices) : -1;
-		var length = Math.max(maxIndex + 1, DEFAULT_SLOTS);
-		var slots = Array.from({ length }, function() {
-			return null;
-		});
-		keys.forEach(function(key) {
-			var index = Number(key);
+		const keys = Object.keys(list).filter((key) => /^\d+$/.test(key));
+		const indices = keys.map((key) => Number(key)).filter((index) => index >= 0);
+		const maxIndex = indices.length ? Math.max(...indices) : -1;
+		const length = Math.max(maxIndex + 1, DEFAULT_SLOTS);
+		const slots = Array.from({ length }, () => null);
+		keys.forEach((key) => {
+			const index = Number(key);
 			if (index < 0 || index >= length) return;
 			slots[index] = normalizeSlotValue(list[key]);
 		});
 		return slots;
 	};
-	var refreshSlots = function() {
-		return __awaiter(void 0, void 0, void 0, function() {
-			var list;
-			return __generator(this, function(_a) {
-				switch (_a.label) {
-					case 0:
-						_a.trys.push([
-							0,
-							2,
-							,
-							3
-						]);
-						return [4, saveClient.listSlots()];
-					case 1:
-						list = _a.sent();
-						localSlots.set(normalizeSlots(list));
-						return [3, 3];
-					case 2:
-						_a.sent();
-						localSlots.set(defaultSlots());
-						return [3, 3];
-					case 3: return [2];
-				}
-			});
-		});
+	const refreshSlots = async () => {
+		try {
+			const list = await saveClient.listSlots();
+			localSlots.set(normalizeSlots(list));
+		} catch (err) {
+			localSlots.set(defaultSlots());
+		}
 	};
-	var triggerSelect = function(displayIndex) {
-		return __awaiter(void 0, void 0, void 0, function() {
-			var list, item, action;
-			return __generator(this, function(_a) {
-				switch (_a.label) {
-					case 0:
-						list = displaySlots();
-						item = list[displayIndex];
-						if (!item) return [2];
-						if (!canSelect(item)) return [2];
-						action = data().mode === "save" ? "save" : "load";
-						if (!(action === "save")) return [3, 3];
-						return [4, saveClient.saveSlot(item.slotIndex)];
-					case 1:
-						_a.sent();
-						return [4, refreshSlots()];
-					case 2:
-						_a.sent();
-						_a.label = 3;
-					case 3:
-						if (!(action === "load")) return [3, 5];
-						return [4, saveClient.loadSlot(item.slotIndex)];
-					case 4:
-						_a.sent();
-						_a.label = 5;
-					case 5:
-						setTimeout(function() {
-							if (onFinish) onFinish();
-							gui.hide(PrebuiltGui.Save);
-							gui.hide(PrebuiltGui.TitleScreen);
-						}, 50);
-						return [2];
-				}
-			});
-		});
+	const triggerSelect = async (displayIndex) => {
+		const item = displaySlots()[displayIndex];
+		if (!item) return;
+		if (!canSelect(item)) return;
+		const action = data().mode === "save" ? "save" : "load";
+		if (action === "save") {
+			await saveClient.saveSlot(item.slotIndex);
+			await refreshSlots();
+		}
+		if (action === "load") await saveClient.loadSlot(item.slotIndex);
+		setTimeout(() => {
+			if (onFinish) onFinish();
+			gui.hide(PrebuiltGui.Save);
+			gui.hide(PrebuiltGui.TitleScreen);
+		}, 50);
 	};
 	function selectSlot(index) {
 		return function() {
@@ -283,12 +104,12 @@ function component($$props) {
 			triggerSelect(index);
 		};
 	}
-	var controls = signal({
+	const controls = signal({
 		up: {
 			repeat: true,
 			bind: keyboardControls.up,
 			throttle: 150,
-			keyDown: function() {
+			keyDown() {
 				nav.next(-1);
 			}
 		},
@@ -296,26 +117,26 @@ function component($$props) {
 			repeat: true,
 			bind: keyboardControls.down,
 			throttle: 150,
-			keyDown: function() {
+			keyDown() {
 				nav.next(1);
 			}
 		},
 		action: {
 			bind: keyboardControls.action,
-			keyDown: function() {
+			keyDown() {
 				triggerSelect(selectedSlot());
 			}
 		},
 		escape: {
 			bind: keyboardControls.escape,
-			keyDown: function() {
+			keyDown() {
 				if (onFinish) onFinish();
 				gui.hide(PrebuiltGui.Save);
 			}
 		},
 		gamepad: { enabled: true }
 	});
-	mount(function(element) {
+	mount((element) => {
 		refreshSlots();
 	});
 	return h(DOMContainer, {