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

package/dist/components/dynamics/text.ce.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.ce.js","names":[],"sources":["../../../src/components/dynamics/text.ce"],"sourcesContent":["<Text text={parseDynamicValue(component.value, object)} ...getComponentStyle(component) />\n\n<script>\nimport { computed } from \"canvasengine\";\nimport { parseDynamicValue } from \"./parse-value\";\n\nconst { object } = defineProps();\nconst component = object._component;\n\n/**\n * Parses a numeric style value that can be a number or a string\n * \n * If the value is a string, it may contain dynamic references like {hp}\n * which need to be parsed using parseDynamicValue. If it's a number,\n * it's returned as-is wrapped in a computed.\n * \n * @param value - Numeric value (number or string)\n * @param object - Object to resolve dynamic references from\n * @returns Computed signal with the numeric value\n */\nconst parseNumericStyleValue = (value, object) => {\n    if (value === undefined || value === null) {\n        return undefined;\n    }\n    \n    if (typeof value === 'number') {\n        return value;\n    }\n    \n    if (typeof value === 'string') {\n        // Check if it contains dynamic references\n        if (value.includes('{')) {\n            // Parse dynamic value and convert to number\n            const parsed = parseDynamicValue(value, object);\n            return computed(() => {\n                const str = parsed();\n                const num = parseFloat(str);\n                return isNaN(num) ? 0 : num;\n            });\n        } else {\n            // Simple string number, convert directly\n            const num = parseFloat(value);\n            return isNaN(num) ? undefined : num;\n        }\n    }\n    \n    return value;\n};\n\n/**\n * Maps component style properties to Canvas Engine Text component props\n * \n * Converts TextComponentOptions from the server to the format expected\n * by the Canvas Engine Text component. Supports all text styling properties\n * including fill, fontSize, fontFamily, fontStyle, fontWeight, stroke,\n * opacity, wordWrap, and align. Also supports dynamic values (number | string)\n * for numeric properties like fontSize and opacity.\n * \n * @param component - Component definition with style property\n * @returns Object with Text component props\n * \n * @example\n * ```ts\n * // Component with style\n * const component = {\n *   style: {\n *     fill: '#000000',\n *     fontSize: 20,\n *     fontFamily: 'Arial',\n *     fontWeight: 'bold'\n *   }\n * };\n * \n * const props = getComponentStyle(component);\n * // Returns: { color: '#000000', size: 20, fontFamily: 'Arial', style: { fontWeight: 'bold' } }\n * \n * // Component with dynamic fontSize\n * const component2 = {\n *   style: {\n *     fill: '#000000',\n *     fontSize: '{hp}', // Will be resolved from object.hp\n *     opacity: '0.8'\n *   }\n * };\n * ```\n */\nconst getComponentStyle = (component) => {\n    if (!component.style) {\n        return {};\n    }\n\n    const style = component.style;\n    const result = {};\n\n    // Map fill to color (shortcut property)\n    // fill can be a string (hex color) or a dynamic string\n    if (style.fill !== undefined) {\n        if (typeof style.fill === 'string' && style.fill.includes('{')) {\n            result.color = parseDynamicValue(style.fill, object);\n        } else {\n            result.color = style.fill;\n        }\n    }\n\n    // Map fontSize to size (shortcut property)\n    // fontSize can be number or string (with dynamic references)\n    if (style.fontSize !== undefined) {\n        const fontSizeValue = parseNumericStyleValue(style.fontSize, object);\n        if (fontSizeValue !== undefined) {\n            result.size = fontSizeValue;\n        }\n    }\n\n    // Map fontFamily (shortcut property)\n    if (style.fontFamily !== undefined) {\n        if (typeof style.fontFamily === 'string' && style.fontFamily.includes('{')) {\n            result.fontFamily = parseDynamicValue(style.fontFamily, object);\n        } else {\n            result.fontFamily = style.fontFamily;\n        }\n    }\n\n    // Build style object for PixiJS Text properties\n    const textStyle = {};\n\n    // Font style properties\n    if (style.fontStyle !== undefined) {\n        if (typeof style.fontStyle === 'string' && style.fontStyle.includes('{')) {\n            textStyle.fontStyle = parseDynamicValue(style.fontStyle, object);\n        } else {\n            textStyle.fontStyle = style.fontStyle;\n        }\n    }\n\n    if (style.fontWeight !== undefined) {\n        if (typeof style.fontWeight === 'string' && style.fontWeight.includes('{')) {\n            textStyle.fontWeight = parseDynamicValue(style.fontWeight, object);\n        } else if (typeof style.fontWeight === 'number') {\n            textStyle.fontWeight = style.fontWeight;\n        } else {\n            textStyle.fontWeight = style.fontWeight;\n        }\n    }\n\n    // Stroke properties\n    if (style.stroke !== undefined) {\n        if (typeof style.stroke === 'string' && style.stroke.includes('{')) {\n            textStyle.stroke = parseDynamicValue(style.stroke, object);\n        } else {\n            textStyle.stroke = style.stroke;\n        }\n    }\n\n    // Opacity (can be number or string)\n    if (style.opacity !== undefined) {\n        const opacityValue = parseNumericStyleValue(style.opacity, object);\n        if (opacityValue !== undefined) {\n            textStyle.opacity = opacityValue;\n        }\n    }\n\n    // Word wrap\n    if (style.wordWrap !== undefined) {\n        textStyle.wordWrap = style.wordWrap;\n    }\n\n    // Text alignment\n    if (style.align !== undefined) {\n        if (typeof style.align === 'string' && style.align.includes('{')) {\n            textStyle.align = parseDynamicValue(style.align, object);\n        } else {\n            textStyle.align = style.align;\n        }\n    }\n\n    // Only add style prop if there are style properties\n    if (Object.keys(textStyle).length > 0) {\n        result.style = textStyle;\n    }\n\n    return result;\n}\n</script>"],"mappings":"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"}

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

@@ -0,0 +1,28 @@
+import { inject } from "../../core/inject.js";
+import { RpgClientEngine } from "../../RpgClientEngine.js";
+import "../../index.js";
+import { Container, Rect, computed, h, useDefineProps, useProps } from "canvasengine";
+//#region src/components/gui/box.ce
+function component($$props) {
+	useProps($$props);
+	var _a = useDefineProps($$props)(), width = _a.width, height = _a.height, children = _a.children, color = _a.color, top = _a.top, left = _a.left;
+	var engine = inject(RpgClientEngine);
+	var child = children[0];
+	var _color = computed(function() {
+		var _a;
+		return ((_a = engine.globalConfig.gui) === null || _a === void 0 ? void 0 : _a.windowColor) || (color === null || color === void 0 ? void 0 : color()) || "#1a1a2e";
+	});
+	return h(Container, {
+		positionType: "absolute",
+		top,
+		left
+	}, h(Container, { anchor: [.5, .5] }, [h(Rect, {
+		width,
+		height,
+		color: _color
+	}), h(Container, { attach: child })]));
+}
+//#endregion
+export { component as default };
+
+//# sourceMappingURL=box.ce.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"box.ce.js","names":[],"sources":["../../../src/components/gui/box.ce"],"sourcesContent":["<Container positionType=\"absolute\" top={top} left={left}>\n    <Container\n      anchor={[0.5, 0.5]}\n    >\n    <Rect width height color={_color} />\n    <Container attach={child}></Container>\n  </Container>  \n</Container>\n\n<script>\n  import { RpgClientEngine, inject } from \"../../index\";\n\n  const { width, height, children, color, top, left } = defineProps();\n  const engine = inject(RpgClientEngine)\n  const child = children[0]\n  const _color = computed(() => engine.globalConfig.gui?.windowColor || color?.() || \"#1a1a2e\")\n</script>"],"mappings":";;;;;AAOE,SAAS,UAAA,SAAA;;CAGH,IAAG,KADJ,eAAA,QAAA,EACqB,EAAA,QAAS,GAAM,OAAM,SAAM,GAAA,QAAA,WAAA,GAAA,UAAA,QAAA,GAAA,OAAA,MAAA,GAAA,KAAA,OAAA,GAAA;;CAEvD,IAAE,QAAQ,SAAO;CACjB,IAAE,SAAM,SAAS,WAAO;EAAA,IAAe;AAAA,WAAA,KAAA,OAAA,aAAA,SAAA,QAAA,OAAA,KAAA,IAAA,KAAA,IAAA,GAAA,iBAAA,UAAA,QAAA,UAAA,KAAA,IAAA,KAAA,IAAA,OAAA,KAAA;GAAA;AAE/B,QADQ,EAAA,WAAU;EAAA,cAAA;EAAA;EAAA;EAAA,EAAA,EAAA,WAAA,EAAA,QAAA,CAAA,IAAA,GAAA,EAAA,EAAA,CAAA,EAAA,MAAA;EAAA;EAAA;EAAA,OAAA;EAAA,CAAA,EAAA,EAAA,WAAA,EAAA,QAAA,OAAA,CAAA,CAAA,CAAA,CAAA"}

package/dist/components/gui/dialogbox/index.ce.js

@@ -0,0 +1,205 @@
+import { inject } from "../../../core/inject.js";
+import { RpgClientEngine } from "../../../RpgClientEngine.js";
+import { DOMContainer, DOMElement, DOMSprite, Navigation, computed, cond, createTabindexNavigator, effect, h, loop, mount, signal, useDefineProps, useProps } from "canvasengine";
+import { delay } from "@rpgjs/common";
+//#region src/components/gui/dialogbox/index.ce
+function component($$props) {
+	useProps($$props);
+	const defineProps = useDefineProps($$props);
+	var engine = inject(RpgClientEngine);
+	engine.scene.currentPlayer;
+	var keyboardControls = engine.globalConfig.keyboardControls;
+	engine.stopProcessingInput = true;
+	var selectedItem = signal(0), _a = defineProps(), data = _a.data, onFinish = _a.onFinish;
+	_a.onInteraction;
+	var _b = data(), message = _b.message, choices = _b.choices, face = _b.face, speaker = _b.speaker, position = _b.position, typewriterEffect = _b.typewriterEffect;
+	_b.autoClose;
+	var fullWidth = computed(function() {
+		return data().fullWidth || false;
+	});
+	var resolveProp = function(value) {
+		return typeof value === "function" ? value() : value;
+	};
+	var speakerName = computed(function() {
+		var value = resolveProp(speaker);
+		return value ? String(value) : "";
+	});
+	var dialogPosition = computed(function() {
+		return resolveProp(position) || "bottom";
+	});
+	var isFullWidth = computed(function() {
+		return resolveProp(fullWidth) !== false;
+	});
+	var hasFace = computed(function() {
+		return !!resolveProp(face);
+	});
+	var displayMessage = signal("");
+	var fullMessage = signal("");
+	var isTyping = signal(false);
+	var typewriterTimer = null;
+	mount(function(element) {});
+	var startTypewriter = function(text) {
+		if (typewriterTimer) clearInterval(typewriterTimer);
+		displayMessage.set("");
+		if (!text) return;
+		var index = 0;
+		isTyping.set(true);
+		typewriterTimer = setInterval(function() {
+			index += 1;
+			displayMessage.set(text.slice(0, index));
+			if (index >= text.length) {
+				clearInterval(typewriterTimer);
+				typewriterTimer = null;
+				isTyping.set(false);
+			}
+		}, 20);
+	};
+	var finishTyping = function() {
+		if (typewriterTimer) clearInterval(typewriterTimer);
+		typewriterTimer = null;
+		displayMessage.set(fullMessage());
+		isTyping.set(false);
+	};
+	effect(function() {
+		var text = resolveProp(message) || "";
+		fullMessage.set(text);
+		if (!(resolveProp(typewriterEffect) !== false)) {
+			finishTyping();
+			return;
+		}
+		startTypewriter(text);
+	});
+	var hasChoices = computed(function() {
+		return choices.length > 0;
+	});
+	var showIndicator = computed(function() {
+		return !hasChoices() && !isTyping();
+	});
+	var nav = createTabindexNavigator(selectedItem, { count: function() {
+		return choices.length;
+	} }, "wrap");
+	function selectChoice(index) {
+		return function() {
+			selectedItem.set(index);
+			onSelect(index);
+		};
+	}
+	function _onFinish(value) {
+		if (onFinish) onFinish(value);
+	}
+	var onSelect = function(index) {
+		_onFinish(index);
+	};
+	var controls = signal({
+		up: {
+			repeat: true,
+			bind: keyboardControls.up,
+			throttle: 150,
+			keyDown: function() {
+				if (!hasChoices()) return;
+				nav.next(-1);
+			}
+		},
+		down: {
+			repeat: true,
+			bind: keyboardControls.down,
+			throttle: 150,
+			keyDown: function() {
+				if (!hasChoices()) return;
+				nav.next(1);
+			}
+		},
+		action: {
+			bind: keyboardControls.action,
+			keyDown: function() {
+				if (isTyping()) {
+					finishTyping();
+					return;
+				}
+				if (!hasChoices()) return;
+				onSelect(selectedItem());
+			}
+		},
+		gamepad: { enabled: true }
+	});
+	var dialogControls = signal({ action: {
+		bind: keyboardControls.action,
+		keyDown: function() {
+			if (isTyping()) {
+				finishTyping();
+				return;
+			}
+			if (hasChoices()) return;
+			_onFinish();
+		}
+	} });
+	var faceSheet = function(graphicId, animationName) {
+		return {
+			definition: engine.getSpriteSheet(graphicId),
+			playing: animationName
+		};
+	};
+	mount(function(element) {
+		return function() {
+			delay(function() {
+				engine.stopProcessingInput = false;
+			});
+		};
+	});
+	return h(DOMContainer, {
+		width: "100%",
+		height: "100%",
+		controls: dialogControls
+	}, h(DOMElement, {
+		element: "div",
+		attrs: {
+			class: "rpg-ui-dialog-container",
+			"data-position": computed(() => dialogPosition()),
+			"data-full-width": computed(() => isFullWidth() ? "true" : "false"),
+			"data-has-face": computed(() => hasFace() ? "true" : "false")
+		}
+	}, h(DOMElement, {
+		element: "div",
+		attrs: { class: "rpg-ui-dialog rpg-anim-fade-in" }
+	}, [h(DOMElement, {
+		element: "div",
+		attrs: { class: "rpg-ui-dialog-body" }
+	}, [h(DOMElement, { element: "div" }, [
+		cond(speakerName(), () => h(DOMElement, {
+			element: "div",
+			attrs: { class: "rpg-ui-dialog-speaker" },
+			textContent: computed(() => speakerName())
+		})),
+		h(DOMElement, {
+			element: "div",
+			attrs: { class: "rpg-ui-dialog-content" },
+			textContent: computed(() => displayMessage())
+		}),
+		cond(hasChoices(), () => h(Navigation, {
+			tabindex: selectedItem,
+			controls
+		}, h(DOMElement, {
+			element: "div",
+			attrs: { class: "rpg-ui-dialog-choices" }
+		}, loop(choices, (choice, index) => h(DOMElement, {
+			element: "div",
+			attrs: {
+				class: ["rpg-ui-dialog-choice", computed(() => ({ active: selectedItem() === index }))],
+				tabindex: index,
+				"data-choice-index": index,
+				click: selectChoice(index)
+			},
+			textContent: choice.text
+		})))))
+	]), cond(hasFace(), () => h(DOMElement, {
+		element: "div",
+		attrs: { class: "rpg-ui-dialog-face" }
+	}, h(DOMSprite, { sheet: computed(() => faceSheet(face.id, face.expression)) })))]), cond(showIndicator, () => h(DOMElement, {
+		element: "div",
+		attrs: { class: "rpg-ui-dialog-indicator" }
+	}))])));
+}
+//#endregion
+export { component as default };
+
+//# sourceMappingURL=index.ce.js.map

package/dist/components/gui/dialogbox/index.ce.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.ce.js","names":[],"sources":["../../../../src/components/gui/dialogbox/index.ce"],"sourcesContent":["<DOMContainer width=\"100%\" height=\"100%\" controls={dialogControls}>\n    <div\n        class=\"rpg-ui-dialog-container\"\n        data-position={dialogPosition()}\n        data-full-width={isFullWidth() ? \"true\" : \"false\"}\n        data-has-face={hasFace() ? \"true\" : \"false\"}\n    >\n        <div class=\"rpg-ui-dialog rpg-anim-fade-in\">\n            <div class=\"rpg-ui-dialog-body\">\n               <div>\n                    @if (speakerName()) {\n                        <div class=\"rpg-ui-dialog-speaker\">{speakerName()}</div>\n                    }\n                    <div class=\"rpg-ui-dialog-content\">\n                        {displayMessage()}\n                    </div>\n                    @if (hasChoices()) {\n                        <Navigation tabindex={selectedItem} controls={controls}>\n                            <div class=\"rpg-ui-dialog-choices\">\n                                @for ((choice,index) of choices) {\n                                    <div\n                                        class=\"rpg-ui-dialog-choice\"\n                                        class={{active: selectedItem() === index}}\n                                        tabindex={index}\n                                        data-choice-index={index}\n                                        click={selectChoice(index)}\n                                    >{{ choice.text }}</div>\n                                }\n                            </div>\n                        </Navigation>\n                    }\n               </div>\n                @if (hasFace()) {\n                    <div class=\"rpg-ui-dialog-face\">\n                        <DOMSprite sheet={faceSheet(face.id, face.expression)} />\n                    </div>\n                }\n            </div>\n            @if (showIndicator) {\n                <div class=\"rpg-ui-dialog-indicator\"></div>\n            }\n        </div>\n    </div>\n</DOMContainer>\n    \n<script>\n    import { effect, signal, computed, createTabindexNavigator, mount } from \"canvasengine\";\n    import { inject } from \"../../../core/inject\";\n    import { RpgClientEngine } from \"../../../RpgClientEngine\";\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    engine.stopProcessingInput = true;\n\n    const selectedItem = signal(0)\n    let isDestroyed = false;\n\n    const {\n        data,\n        onFinish,\n        onInteraction\n    } = defineProps();\n\n    const { message, choices, face, speaker, position, typewriterEffect, autoClose } = data();\n    const fullWidth = computed(() => data().fullWidth || false);\n\n    const resolveProp = (value) => typeof value === \"function\" ? value() : value;\n\n    const speakerName = computed(() => {\n        const value = resolveProp(speaker);\n        return value ? String(value) : \"\";\n    });\n\n    const dialogPosition = computed(() => resolveProp(position) || \"bottom\");\n    const isFullWidth = computed(() => resolveProp(fullWidth) !== false);\n    const hasFace = computed(() => !!resolveProp(face));\n\n    const displayMessage = signal(\"\");\n    const fullMessage = signal(\"\");\n    const isTyping = signal(false);\n    let typewriterTimer = null;\n    let rootElement = null;\n\n    mount((element) => {\n        rootElement = element;\n    });\n\n    const startTypewriter = (text) => {\n        if (typewriterTimer) clearInterval(typewriterTimer);\n        displayMessage.set(\"\");\n        if (!text) return;\n        let index = 0;\n        isTyping.set(true);\n        typewriterTimer = setInterval(() => {\n            index += 1;\n            displayMessage.set(text.slice(0, index));\n            if (index >= text.length) {\n                clearInterval(typewriterTimer);\n                typewriterTimer = null;\n                isTyping.set(false);\n            }\n        }, 20);\n    };\n\n    const finishTyping = () => {\n        if (typewriterTimer) clearInterval(typewriterTimer);\n        typewriterTimer = null;\n        displayMessage.set(fullMessage());\n        isTyping.set(false);\n    };\n\n    effect(() => {\n        const text = resolveProp(message) || \"\";\n        fullMessage.set(text);\n        const useTypewriter = resolveProp(typewriterEffect) !== false;\n        if (!useTypewriter) {\n            finishTyping();\n            return;\n        }\n        startTypewriter(text);\n    });\n\n\n    const hasChoices = computed(() => choices.length > 0);\n    const showIndicator = computed(() => !hasChoices() && !isTyping());\n    const nav = createTabindexNavigator(selectedItem, { count: () => choices.length }, 'wrap');\n\n    function selectChoice(index) {\n        return function() {\n            selectedItem.set(index);\n            onSelect(index);\n        }\n    }\n\n    function _onFinish(value) {\n        if (onFinish) onFinish(value);\n    }\n\n    const onSelect = (index) => {\n        _onFinish(index);\n    };\n\n    const controls = signal({\n        up: {\n            repeat: true,\n            bind: keyboardControls.up,\n            throttle: 150,\n            keyDown() {\n                if (!hasChoices()) return;\n                nav.next(-1);\n            }\n        },\n        down: {\n            repeat: true,\n            bind: keyboardControls.down,\n            throttle: 150,\n            keyDown() {\n                if (!hasChoices()) return;\n                nav.next(1);\n            }\n        },\n        action: {\n            bind: keyboardControls.action,\n            keyDown() {\n                if (isTyping()) {\n                    finishTyping();\n                    return;\n                }\n                if (!hasChoices()) return;\n                onSelect(selectedItem());\n            }\n        },\n        gamepad: {\n            enabled: true\n        }\n    });\n    \n    const dialogControls = signal({\n        action: {\n            bind: keyboardControls.action,\n            keyDown() {\n                if (isTyping()) {\n                    finishTyping();\n                    return;\n                }\n                if (hasChoices()) return;\n                _onFinish();\n            }\n        },\n    })\n\n    const faceSheet = (graphicId, animationName) => {\n        return {\n            definition: engine.getSpriteSheet(graphicId),\n            playing: animationName,\n        };\n    }\n\n    mount((element) => {\n        return () => {\n            isDestroyed = true;\n            // Wait destroy is finished before start processing input\n            delay(() => {\n                engine.stopProcessingInput = false;\n            })\n        }\n  })\n</script>\n"],"mappings":"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"}

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

@@ -0,0 +1,193 @@
+import { inject } from "../../core/inject.js";
+import { RpgGui } from "../../Gui/Gui.js";
+import { RpgClientEngine } from "../../RpgClientEngine.js";
+import { DOMContainer, DOMElement, Navigation, computed, cond, effect, h, loop, signal, useDefineProps, useProps } from "canvasengine";
+import { PrebuiltGui } from "@rpgjs/common";
+//#region src/components/gui/gameover.ce
+function component($$props) {
+	useProps($$props);
+	const defineProps = useDefineProps($$props);
+	var __assign = this && this.__assign || function() {
+		__assign = Object.assign || function(t) {
+			for (var s, i = 1, n = arguments.length; i < n; i++) {
+				s = arguments[i];
+				for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+			}
+			return t;
+		};
+		return __assign.apply(this, arguments);
+	};
+	var engine = inject(RpgClientEngine);
+	var guiService = inject(RpgGui);
+	var keyboardControls = engine.globalConfig.keyboardControls;
+	var _a = defineProps({
+		entries: { default: function() {
+			return [];
+		} },
+		saveLoad: { default: function() {
+			return {};
+		} },
+		localActions: { default: false }
+	}), entries = _a.entries, title = _a.title, subtitle = _a.subtitle, saveLoad = _a.saveLoad, localActions = _a.localActions, onInteraction = _a.onInteraction;
+	var defaultEntries = [{
+		id: "title",
+		label: "Title Screen"
+	}, {
+		id: "load",
+		label: "Load Game"
+	}];
+	var resolveProp = function(value) {
+		return typeof value === "function" ? value() : value;
+	};
+	var titleText = computed(function() {
+		return resolveProp(title) || "Game Over";
+	});
+	var subtitleText = computed(function() {
+		return resolveProp(subtitle) || "";
+	});
+	var localActionsEnabled = computed(function() {
+		return resolveProp(localActions) === true;
+	});
+	var entryList = computed(function() {
+		var list = resolveProp(entries);
+		if (Array.isArray(list) && list.length) return list;
+		return defaultEntries;
+	});
+	var isEntryDisabled = function(entry) {
+		if (!entry) return true;
+		if (entry.disabled) return true;
+		if (entry.enabled === false) return true;
+		return false;
+	};
+	var selectedEntry = signal(0);
+	var selectableIndexes = computed(function() {
+		return entryList().map(function(entry, index) {
+			return isEntryDisabled(entry) ? null : index;
+		}).filter(function(value) {
+			return value !== null;
+		});
+	});
+	effect(function() {
+		var available = selectableIndexes();
+		if (!available.length) return;
+		var current = selectedEntry();
+		if (!available.includes(current)) selectedEntry.set(available[0]);
+	});
+	var moveSelection = function(delta) {
+		var available = selectableIndexes();
+		if (!available.length) return;
+		var current = selectedEntry();
+		var nextIndex = (Math.max(0, available.indexOf(current)) + delta + available.length) % available.length;
+		selectedEntry.set(available[nextIndex]);
+	};
+	var triggerSelect = function(index) {
+		var entry = entryList()[index];
+		if (!entry || isEntryDisabled(entry)) return;
+		if (localActionsEnabled()) {
+			if (entry.id === "title") {
+				guiService.hide(PrebuiltGui.Gameover);
+				guiService.display(PrebuiltGui.TitleScreen);
+			}
+			if (entry.id === "load") {
+				var config = resolveProp(saveLoad) || {};
+				var slots = Array.isArray(config.slots) ? config.slots : [
+					null,
+					null,
+					null
+				];
+				guiService.display(PrebuiltGui.Save, __assign(__assign({}, config), {
+					mode: config.mode || "load",
+					slots
+				}));
+			}
+		}
+		if (onInteraction) onInteraction("select", {
+			id: entry.id,
+			index,
+			entry
+		});
+	};
+	function selectEntry(index) {
+		return function() {
+			selectedEntry.set(index);
+			triggerSelect(index);
+		};
+	}
+	var controls = signal({
+		up: {
+			repeat: true,
+			bind: keyboardControls.up,
+			throttle: 150,
+			keyDown: function() {
+				moveSelection(-1);
+			}
+		},
+		down: {
+			repeat: true,
+			bind: keyboardControls.down,
+			throttle: 150,
+			keyDown: function() {
+				moveSelection(1);
+			}
+		},
+		action: {
+			bind: keyboardControls.action,
+			keyDown: function() {
+				triggerSelect(selectedEntry());
+			}
+		},
+		gamepad: { enabled: true }
+	});
+	return h(DOMContainer, {
+		width: "100%",
+		height: "100%"
+	}, h(DOMElement, {
+		element: "div",
+		attrs: { class: "rpg-ui-gameover-screen rpg-anim-fade-in" }
+	}, [
+		h(DOMElement, {
+			element: "div",
+			attrs: { class: "rpg-ui-gameover-splatter rpg-ui-gameover-splatter-left" }
+		}),
+		h(DOMElement, {
+			element: "div",
+			attrs: { class: "rpg-ui-gameover-splatter rpg-ui-gameover-splatter-right" }
+		}),
+		h(DOMElement, {
+			element: "div",
+			attrs: { class: "rpg-ui-gameover-splatter rpg-ui-gameover-splatter-center" }
+		}),
+		h(DOMElement, {
+			element: "div",
+			attrs: { class: "rpg-ui-gameover-header rpg-anim-shake" }
+		}, [h(DOMElement, {
+			element: "div",
+			attrs: { class: "rpg-ui-gameover-title" },
+			textContent: computed(() => titleText())
+		}), cond(subtitleText(), () => h(DOMElement, {
+			element: "div",
+			attrs: { class: "rpg-ui-gameover-subtitle" },
+			textContent: computed(() => subtitleText())
+		}))]),
+		h(Navigation, {
+			tabindex: selectedEntry,
+			controls
+		}, h(DOMElement, {
+			element: "div",
+			attrs: { class: "rpg-ui-menu rpg-ui-gameover-menu rpg-anim-slide-up" }
+		}, loop(entryList(), (entry, index) => h(DOMElement, {
+			element: "div",
+			attrs: {
+				class: ["rpg-ui-menu-item", computed(() => ({ disabled: isEntryDisabled(entry) }))],
+				"data-selected": computed(() => selectedEntry() === index ? "true" : "false"),
+				tabindex: index,
+				click: selectEntry(index)
+			},
+			textContent: entry.label
+		}))))
+	]));
+}
+//#endregion
+export { component as default };
+
+//# sourceMappingURL=gameover.ce.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"gameover.ce.js","names":[],"sources":["../../../src/components/gui/gameover.ce"],"sourcesContent":["<DOMContainer width=\"100%\" height=\"100%\">\n    <div class=\"rpg-ui-gameover-screen rpg-anim-fade-in\">\n        <div class=\"rpg-ui-gameover-splatter rpg-ui-gameover-splatter-left\"></div>\n        <div class=\"rpg-ui-gameover-splatter rpg-ui-gameover-splatter-right\"></div>\n        <div class=\"rpg-ui-gameover-splatter rpg-ui-gameover-splatter-center\"></div>\n        <div class=\"rpg-ui-gameover-header rpg-anim-shake\">\n            <div class=\"rpg-ui-gameover-title\">{titleText()}</div>\n            @if (subtitleText()) {\n                <div class=\"rpg-ui-gameover-subtitle\">{subtitleText()}</div>\n            }\n        </div>\n        <Navigation tabindex={selectedEntry} controls={controls}>\n            <div class=\"rpg-ui-menu rpg-ui-gameover-menu rpg-anim-slide-up\">\n                @for ((entry,index) of entryList()) {\n                    <div\n                        class=\"rpg-ui-menu-item\"\n                        class={{disabled: isEntryDisabled(entry)}}\n                        data-selected={selectedEntry() === index ? \"true\" : \"false\"}\n                        tabindex={index}\n                        click={selectEntry(index)}\n                    >{entry.label}</div>\n                }\n            </div>\n        </Navigation>\n    </div>\n</DOMContainer>\n\n<script>\n    import { signal, computed, effect } from \"canvasengine\";\n    import { PrebuiltGui } from \"@rpgjs/common\";\n    import { inject } from \"../../core/inject\";\n    import { RpgClientEngine } from \"../../RpgClientEngine\";\n    import { RpgGui } from \"../../Gui/Gui\";\n\n    const engine = inject(RpgClientEngine);\n    const guiService = inject(RpgGui);\n    const keyboardControls = engine.globalConfig.keyboardControls;\n\n    const { entries, title, subtitle, saveLoad, localActions, onInteraction } = defineProps({\n        entries: {\n            default: () => []\n        },\n        saveLoad: {\n            default: () => ({})\n        },\n        localActions: {\n            default: false\n        }\n    });\n\n    const defaultEntries = [\n        { id: \"title\", label: \"Title Screen\" },\n        { id: \"load\", label: \"Load Game\" }\n    ];\n\n    const resolveProp = (value) => typeof value === \"function\" ? value() : value;\n    const titleText = computed(() => resolveProp(title) || \"Game Over\");\n    const subtitleText = computed(() => resolveProp(subtitle) || \"\");\n    const localActionsEnabled = computed(() => resolveProp(localActions) === true);\n\n    const entryList = computed(() => {\n        const list = resolveProp(entries);\n        if (Array.isArray(list) && list.length) return list;\n        return defaultEntries;\n    });\n\n    const isEntryDisabled = (entry) => {\n        if (!entry) return true;\n        if (entry.disabled) return true;\n        if (entry.enabled === false) return true;\n        return false;\n    };\n\n    const selectedEntry = signal(0);\n    const selectableIndexes = computed(() => {\n        const list = entryList();\n        return list\n            .map((entry, index) => (isEntryDisabled(entry) ? null : index))\n            .filter((value) => value !== null);\n    });\n\n    effect(() => {\n        const available = selectableIndexes();\n        if (!available.length) return;\n        const current = selectedEntry();\n        if (!available.includes(current)) {\n            selectedEntry.set(available[0]);\n        }\n    });\n\n    const moveSelection = (delta) => {\n        const available = selectableIndexes();\n        if (!available.length) return;\n        const current = selectedEntry();\n        const currentIndex = Math.max(0, available.indexOf(current));\n        const nextIndex = (currentIndex + delta + available.length) % available.length;\n        selectedEntry.set(available[nextIndex]);\n    };\n\n    const triggerSelect = (index) => {\n        const list = entryList();\n        const entry = list[index];\n        if (!entry || isEntryDisabled(entry)) return;\n        if (localActionsEnabled()) {\n            if (entry.id === \"title\") {\n                guiService.hide(PrebuiltGui.Gameover);\n                guiService.display(PrebuiltGui.TitleScreen);\n            }\n            if (entry.id === \"load\") {\n                const config = resolveProp(saveLoad) || {};\n                const slots = Array.isArray(config.slots) ? config.slots : [null, null, null];\n                guiService.display(PrebuiltGui.Save, {\n                    ...config,\n                    mode: config.mode || \"load\",\n                    slots\n                });\n            }\n        }\n        if (onInteraction) {\n            onInteraction(\"select\", { id: entry.id, index, entry });\n        }\n    };\n\n    function selectEntry(index) {\n        return function() {\n            selectedEntry.set(index);\n            triggerSelect(index);\n        };\n    }\n\n    const controls = signal({\n        up: {\n            repeat: true,\n            bind: keyboardControls.up,\n            throttle: 150,\n            keyDown() {\n                moveSelection(-1);\n            }\n        },\n        down: {\n            repeat: true,\n            bind: keyboardControls.down,\n            throttle: 150,\n            keyDown() {\n                moveSelection(1);\n            }\n        },\n        action: {\n            bind: keyboardControls.action,\n            keyDown() {\n                triggerSelect(selectedEntry());\n            }\n        },\n        gamepad: {\n            enabled: true\n        }\n    });\n</script>\n"],"mappings":"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"}

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

@@ -0,0 +1,92 @@
+import { inject } from "../../../core/inject.js";
+import { getEntityProp } from "../../../utils/getEntityProp.js";
+import { RpgClientEngine } from "../../../RpgClientEngine.js";
+import { DOMContainer, DOMElement, DOMSprite, computed, cond, h, useDefineProps, useProps } from "canvasengine";
+//#region src/components/gui/hud/hud.ce
+function component($$props) {
+	useProps($$props);
+	const defineProps = useDefineProps($$props);
+	var engine = inject(RpgClientEngine);
+	var currentPlayer = engine.scene.currentPlayer;
+	var data = defineProps().data;
+	data().faceset;
+	var resolveProp = function(value) {
+		return typeof value === "function" ? value() : value;
+	};
+	var face = computed(function() {
+		return resolveProp(data().faceset);
+	});
+	var hasFace = computed(function() {
+		var value = face();
+		return !!(value && value.id);
+	});
+	var faceSheet = function(faceValue) {
+		return {
+			definition: engine.getSpriteSheet(faceValue.id),
+			playing: faceValue.expression || "default"
+		};
+	};
+	var hp = getEntityProp(currentPlayer, "hp");
+	var hpMax = getEntityProp(currentPlayer, "params.maxHp");
+	var percentHp = computed(function() {
+		return hp() / hpMax() * 100 + "%";
+	});
+	var sp = getEntityProp(currentPlayer, "sp");
+	var spMax = getEntityProp(currentPlayer, "params.maxSp");
+	var percentSp = computed(function() {
+		return sp() / spMax() * 100 + "%";
+	});
+	var level = getEntityProp(currentPlayer, "level");
+	return h(DOMContainer, null, h(DOMElement, {
+		element: "div",
+		attrs: { class: "rpg-hud" }
+	}, [h(DOMElement, {
+		element: "div",
+		attrs: { class: "rpg-avatar" }
+	}, [cond(hasFace(), () => h(DOMElement, {
+		element: "div",
+		attrs: { class: "rpg-avatar-face" }
+	}, h(DOMSprite, {
+		sheet: computed(() => faceSheet(face())),
+		width: 64,
+		height: 64,
+		objectFit: "contain"
+	}))), h(DOMElement, {
+		element: "div",
+		attrs: { class: "rpg-avatar-level" },
+		textContent: computed(() => level())
+	})]), h(DOMElement, {
+		element: "div",
+		attrs: { class: "rpg-status-bars" }
+	}, [h(DOMElement, {
+		element: "div",
+		attrs: { class: "rpg-bar-container" }
+	}, [h(DOMElement, {
+		element: "span",
+		attrs: { class: "rpg-bar-text" },
+		textContent: computed(() => "HP " + hp() + "/" + hpMax())
+	}), h(DOMElement, {
+		element: "div",
+		attrs: {
+			class: "rpg-bar-fill health",
+			style: { width: percentHp }
+		}
+	})]), h(DOMElement, {
+		element: "div",
+		attrs: { class: "rpg-bar-container" }
+	}, [h(DOMElement, {
+		element: "span",
+		attrs: { class: "rpg-bar-text" },
+		textContent: computed(() => "SP " + sp() + "/" + spMax())
+	}), h(DOMElement, {
+		element: "div",
+		attrs: {
+			class: "rpg-bar-fill mana",
+			style: { width: percentSp }
+		}
+	})])])]));
+}
+//#endregion
+export { component as default };
+
+//# sourceMappingURL=hud.ce.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hud.ce.js","names":[],"sources":["../../../../src/components/gui/hud/hud.ce"],"sourcesContent":["<DOMContainer>\n    <div class=\"rpg-hud\">\n        <div class=\"rpg-avatar\">\n            @if (hasFace()) {\n                <div class=\"rpg-avatar-face\">\n                    <DOMSprite \n                        sheet={faceSheet(face())} \n                        width={64} \n                        height={64} \n                        objectFit=\"contain\" \n                    />\n                </div>\n            }\n            <div class=\"rpg-avatar-level\">{{ level() }}</div>\n        </div>\n        <div class=\"rpg-status-bars\">\n            <div class=\"rpg-bar-container\">\n                <span class=\"rpg-bar-text\">HP {{ hp() }}/{{ hpMax() }}</span>\n                <div class=\"rpg-bar-fill health\" style={{width: percentHp}}></div>\n            </div>\n            <div class=\"rpg-bar-container\">\n                <span class=\"rpg-bar-text\">SP {{ sp() }}/{{ spMax() }}</span>\n                <div class=\"rpg-bar-fill mana\" style={{width: percentSp}}></div>\n            </div>\n        </div>\n    </div>\n</DOMContainer>\n\n<script>\n    import { inject } from \"../../../core/inject\";\n    import { RpgClientEngine } from \"../../../RpgClientEngine\";\n    import { computed } from \"canvasengine\";\n    import { getEntityProp } from \"../../../utils/getEntityProp\";\n\n    const engine = inject(RpgClientEngine)\n    const currentPlayer = engine.scene.currentPlayer\n    const { data } = defineProps();\n    const { faceset } = data();\n\n    const resolveProp = (value) => typeof value === \"function\" ? value() : value;\n    const face = computed(() => resolveProp(data().faceset));\n\n    const hasFace = computed(() => {\n        const value = face();\n        return !!(value && value.id);\n    });\n    const faceSheet = (faceValue) => ({\n        definition: engine.getSpriteSheet(faceValue.id),\n        playing: faceValue.expression || \"default\",\n    });\n    const hp = getEntityProp(currentPlayer, \"hp\")\n    const hpMax = getEntityProp(currentPlayer, \"params.maxHp\")\n    const percentHp = computed(() => (hp() / hpMax() * 100) + '%')\n\n    const sp = getEntityProp(currentPlayer, \"sp\")\n    const spMax = getEntityProp(currentPlayer, \"params.maxSp\")\n    const percentSp = computed(() => (sp() / spMax() * 100) + '%')\n\n    const level = getEntityProp(currentPlayer, \"level\")\n</script>\n    \n"],"mappings":";;;;;AAWM,SAAe,UAAA,SAAA;AACT,UAAA,QAAA;CACJ,MAAK,cAAe,eAAe,QAAQ;CAC3C,IAAE,SAAG,OAAA,gBAAA;CACb,IAAI,gBAAgB,OAAI,MAAO;CAC/B,IAAI,OAAO,aAAa,CAAA;AACV,OAAG,CAAI;CACrB,IAAI,cAAa,SAAW,OAAO;AAAC,SAAK,OAAQ,UAAQ,aAAiB,OAAO,GAAA;;CACjF,IAAI,OAAO,SAAM,WAAA;AAAA,SAAA,YAAA,MAAA,CAAA,QAAA;GAAA;CACjB,IAAI,UAAS,SAAU,WAAS;EAC5B,IAAI,QAAQ,MAAM;AAClB,SAAO,CAAC,EAAE,SAAO,MAAO;GAC1B;CACF,IAAI,YAAS,SAAA,WAAA;AAAA,SAAA;GACT,YAAK,OAAA,eAAA,UAAA,GAAA;GACP,SAAA,UAAY,cAAA;;;CAEd,IAAC,KAAM,cAAA,eAAA,KAAA;CACP,IAAI,QAAQ,cAAc,eAAe,eAAQ;CACjD,IAAI,YAAS,SAAA,WAAwB;AAAE,SAAO,IAAA,GAAA,OAAe,GAAC,MAAA;GAAA;CAC9D,IAAI,KAAA,cAAmB,eAAO,KAAa;CAC3C,IAAI,QAAQ,cAAc,eAAe,eAAS;;;;CAElD,IAAI,QAAM,cAAgB,eAAe,QAAA;AAErC,QADM,EAAA,cAAuB,MAAM,EAAA,YAAA;EAAA,SAAA;EAAA,OAAA,EAAA,OAAA,WAAA;EAAA,EAAA,CAAA,EAAA,YAAA;EAAA,SAAA;EAAA,OAAA,EAAA,OAAA,cAAA;EAAA,EAAA,CAAA,KAAA,SAAA,QAAA,EAAA,YAAA;EAAA,SAAA;EAAA,OAAA,EAAA,OAAA,mBAAA;EAAA,EAAA,EAAA,WAAA;EAAA,OAAA,eAAA,UAAA,MAAA,CAAA,CAAA;EAAA,OAAA;EAAA,QAAA;EAAA,WAAA;EAAA,CAAA,CAAA,CAAA,EAAA,EAAA,YAAA;EAAA,SAAA;EAAA,OAAA,EAAA,OAAA,oBAAA;EAAA,aAAA,eAAA,OAAA,CAAA;EAAA,CAAA,CAAA,CAAA,EAAA,EAAA,YAAA;EAAA,SAAA;EAAA,OAAA,EAAA,OAAA,mBAAA;EAAA,EAAA,CAAA,EAAA,YAAA;EAAA,SAAA;EAAA,OAAA,EAAA,OAAA,qBAAA;EAAA,EAAA,CAAA,EAAA,YAAA;EAAA,SAAA;EAAA,OAAA,EAAA,OAAA,gBAAA;EAAA,aAAA,eAAA,QAAA,IAAA,GAAA,MAAA,OAAA,CAAA;EAAA,CAAA,EAAA,EAAA,YAAA;EAAA,SAAA;EAAA,OAAA;GAAA,OAAA;GAAA,OAAA,EAAA,OAAA,WAAA;GAAA;EAAA,CAAA,CAAA,CAAA,EAAA,EAAA,YAAA;EAAA,SAAA;EAAA,OAAA,EAAA,OAAA,qBAAA;EAAA,EAAA,CAAA,EAAA,YAAA;EAAA,SAAA;EAAA,OAAA,EAAA,OAAA,gBAAA;EAAA,aAAA,eAAA,QAAA,IAAA,GAAA,MAAA,OAAA,CAAA;EAAA,CAAA,EAAA,EAAA,YAAA;EAAA,SAAA;EAAA,OAAA;GAAA,OAAA;GAAA,OAAA,EAAA,OAAA,WAAA;GAAA;EAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA"}

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

@@ -1,3 +1,15 @@
-export declare const PrebuiltGui: {
-    Dialogbox: any;
-};
+import { default as DialogboxComponent } from './dialogbox/index.ce';
+import { default as BoxComponent } from './box.ce';
+import { default as ShopComponent } from './shop/shop.ce';
+import { default as HudComponent } from './hud/hud.ce';
+import { default as SaveLoadComponent } from './save-load.ce';
+import { default as MainMenuComponent } from './menu/main-menu.ce';
+import { default as ItemsMenuComponent } from './menu/items-menu.ce';
+import { default as SkillsMenuComponent } from './menu/skills-menu.ce';
+import { default as EquipMenuComponent } from './menu/equip-menu.ce';
+import { default as OptionsMenuComponent } from './menu/options-menu.ce';
+import { default as ExitMenuComponent } from './menu/exit-menu.ce';
+import { default as NotificationComponent } from './notification/notification.ce';
+import { default as TitleScreenComponent } from './title-screen.ce';
+import { default as GameoverComponent } from './gameover.ce';
+export { DialogboxComponent, BoxComponent, ShopComponent, HudComponent, SaveLoadComponent, MainMenuComponent, ItemsMenuComponent, SkillsMenuComponent, EquipMenuComponent, OptionsMenuComponent, ExitMenuComponent, NotificationComponent, TitleScreenComponent, GameoverComponent };

package/dist/components/gui/index.js

@@ -0,0 +1,14 @@
+import "./dialogbox/index.ce.js";
+import "./box.ce.js";
+import "./shop/shop.ce.js";
+import "./hud/hud.ce.js";
+import "./save-load.ce.js";
+import "./menu/items-menu.ce.js";
+import "./menu/skills-menu.ce.js";
+import "./menu/equip-menu.ce.js";
+import "./menu/options-menu.ce.js";
+import "./menu/exit-menu.ce.js";
+import "./menu/main-menu.ce.js";
+import "./notification/notification.ce.js";
+import "./title-screen.ce.js";
+import "./gameover.ce.js";