@rpgjs/client 5.0.0-alpha.9 → 5.0.0-beta.10

package/dist/components/gui/title-screen.ce.js

@@ -0,0 +1,164 @@
+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/title-screen.ce
+function component($$props) {
+	useProps($$props);
+	const defineProps = useDefineProps($$props);
+	const engine = inject(RpgClientEngine);
+	const guiService = inject(RpgGui);
+	const keyboardControls = engine.globalConfig.keyboardControls;
+	const { data, onInteraction } = defineProps({
+		entries: { default: () => [] },
+		saveLoad: { default: () => ({}) },
+		localActions: { default: false }
+	});
+	const { entries, title, subtitle, version, saveLoad, localActions } = data();
+	const defaultEntries = [{
+		id: "start",
+		label: "Start"
+	}, {
+		id: "load",
+		label: "Load"
+	}];
+	const resolveProp = (value) => typeof value === "function" ? value() : value;
+	const titleText = computed(() => resolveProp(title) || "RPG");
+	const subtitleText = computed(() => resolveProp(subtitle) || "");
+	const versionText = computed(() => resolveProp(version) || "");
+	const localActionsEnabled = computed(() => resolveProp(localActions) === true);
+	const entryList = computed(() => {
+		const list = resolveProp(entries);
+		if (Array.isArray(list) && list.length) return list;
+		return defaultEntries;
+	});
+	const isEntryDisabled = (entry) => {
+		if (!entry) return true;
+		if (entry.disabled) return true;
+		if (entry.enabled === false) return true;
+		return false;
+	};
+	const selectedEntry = signal(0);
+	const selectableIndexes = computed(() => {
+		return entryList().map((entry, index) => isEntryDisabled(entry) ? null : index).filter((value) => value !== null);
+	});
+	effect(() => {
+		const available = selectableIndexes();
+		if (!available.length) return;
+		const current = selectedEntry();
+		if (!available.includes(current)) selectedEntry.set(available[0]);
+	});
+	const moveSelection = (delta) => {
+		const available = selectableIndexes();
+		if (!available.length) return;
+		const current = selectedEntry();
+		const nextIndex = (Math.max(0, available.indexOf(current)) + delta + available.length) % available.length;
+		selectedEntry.set(available[nextIndex]);
+	};
+	const triggerSelect = (index) => {
+		const entry = entryList()[index];
+		if (!entry || isEntryDisabled(entry)) return;
+		if (localActionsEnabled()) {
+			if (entry.id === "start") guiService.hide(PrebuiltGui.TitleScreen);
+			if (entry.id === "load") {
+				const config = resolveProp(saveLoad) || {};
+				const slots = Array.isArray(config.slots) ? config.slots : [
+					null,
+					null,
+					null
+				];
+				guiService.display(PrebuiltGui.Save, {
+					...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);
+		};
+	}
+	const controls = signal({
+		up: {
+			repeat: true,
+			bind: keyboardControls.up,
+			throttle: 150,
+			keyDown() {
+				if (guiService.isDisplaying(PrebuiltGui.Save)) return;
+				moveSelection(-1);
+			}
+		},
+		down: {
+			repeat: true,
+			bind: keyboardControls.down,
+			throttle: 150,
+			keyDown() {
+				if (guiService.isDisplaying(PrebuiltGui.Save)) return;
+				moveSelection(1);
+			}
+		},
+		action: {
+			bind: keyboardControls.action,
+			keyDown() {
+				if (guiService.isDisplaying(PrebuiltGui.Save)) return;
+				triggerSelect(selectedEntry());
+			}
+		},
+		gamepad: { enabled: true }
+	});
+	return h(DOMContainer, {
+		width: "100%",
+		height: "100%"
+	}, h(DOMElement, {
+		element: "div",
+		attrs: { class: "rpg-ui-title-screen rpg-anim-fade-in" }
+	}, [
+		h(DOMElement, {
+			element: "div",
+			attrs: { class: "rpg-ui-title-screen-header rpg-anim-float" }
+		}, [h(DOMElement, {
+			element: "div",
+			attrs: { class: "rpg-ui-title-screen-title" },
+			textContent: computed(() => titleText())
+		}), cond(computed(() => subtitleText()), () => h(DOMElement, {
+			element: "div",
+			attrs: { class: "rpg-ui-title-screen-subtitle" },
+			textContent: computed(() => subtitleText())
+		}))]),
+		h(Navigation, {
+			tabindex: selectedEntry,
+			controls
+		}, h(DOMElement, {
+			element: "div",
+			attrs: { class: "rpg-ui-menu rpg-ui-title-screen-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
+		})))),
+		cond(computed(() => versionText()), () => h(DOMElement, {
+			element: "div",
+			attrs: { class: "rpg-ui-title-screen-version" },
+			textContent: computed(() => versionText())
+		}))
+	]));
+}
+var __ce_component = component;
+//#endregion
+export { __ce_component as default };
+
+//# sourceMappingURL=title-screen.ce.js.map

package/dist/components/gui/title-screen.ce.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"title-screen.ce.js","names":[],"sources":["../../../src/components/gui/title-screen.ce"],"sourcesContent":["<DOMContainer width=\"100%\" height=\"100%\">\n    <div class=\"rpg-ui-title-screen rpg-anim-fade-in\">\n        <div class=\"rpg-ui-title-screen-header rpg-anim-float\">\n            <div class=\"rpg-ui-title-screen-title\">{titleText()}</div>\n            @if (subtitleText()) {\n                <div class=\"rpg-ui-title-screen-subtitle\">{subtitleText()}</div>\n            }\n        </div>\n        <Navigation tabindex={selectedEntry} controls={controls}>\n            <div class=\"rpg-ui-menu rpg-ui-title-screen-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        @if (versionText()) {\n            <div class=\"rpg-ui-title-screen-version\">{versionText()}</div>\n        }\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 { data, onInteraction } = defineProps({\n        entries: {\n            default: () => []\n        },\n        saveLoad: {\n            default: () => ({})\n        },\n        localActions: {\n            default: false\n        }\n    });\n\n    const { entries, title, subtitle, version, saveLoad, localActions } = data();\n\n    const defaultEntries = [\n        { id: \"start\", label: \"Start\" },\n        { id: \"load\", label: \"Load\" }\n    ];\n\n    const resolveProp = (value) => typeof value === \"function\" ? value() : value;\n    const titleText = computed(() => resolveProp(title) || \"RPG\");\n    const subtitleText = computed(() => resolveProp(subtitle) || \"\");\n    const versionText = computed(() => resolveProp(version) || \"\");\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 === \"start\") {\n                guiService.hide(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                if (guiService.isDisplaying(PrebuiltGui.Save)) return;\n                moveSelection(-1);\n            }\n        },\n        down: {\n            repeat: true,\n            bind: keyboardControls.down,\n            throttle: 150,\n            keyDown() {\n                if (guiService.isDisplaying(PrebuiltGui.Save)) return;\n                moveSelection(1);\n            }\n        },\n        action: {\n            bind: keyboardControls.action,\n            keyDown() {\n                if (guiService.isDisplaying(PrebuiltGui.Save)) return;\n                triggerSelect(selectedEntry());\n            }\n        },\n        gamepad: {\n            enabled: true\n        }\n    });\n</script>\n"],"mappings":"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"}

package/dist/components/index.d.ts

@@ -1,3 +1,4 @@
 import { default as EventLayerComponent } from './scenes/event-layer.ce';
 import { default as CharacterComponent } from './character.ce';
+export { HpBar } from './prebuilt';
 export { EventLayerComponent, CharacterComponent };

package/dist/components/index.js

@@ -0,0 +1,4 @@
+import "./prebuilt/hp-bar.ce.js";
+import "./prebuilt/index.js";
+import "./character.ce.js";
+import "./scenes/event-layer.ce.js";

package/dist/components/player-components-utils.d.ts

@@ -0,0 +1,67 @@
+export declare const DEFAULT_HP_BAR_STYLE: {
+    fillColor: string;
+};
+export declare const DEFAULT_SP_BAR_STYLE: {
+    fillColor: string;
+};
+type NumberResolver = (value: any, fallback?: number) => number;
+export declare function getPointBounds(points?: any[], toNumber?: NumberResolver): {
+    width: number;
+    height: number;
+};
+export declare function getComponentId(definition: any): any;
+export declare function getComponentProps(definition: any): any;
+export declare function estimateComponentSize(definition: any, { toNumber, estimateTextWidth }?: {
+    toNumber?: NumberResolver;
+    estimateTextWidth?: (value: any, style?: any) => number;
+}): {
+    width: number;
+    height: number;
+};
+export declare function computeBlockSize({ position, layout, rowMetrics, gap, graphic, hitbox }: {
+    position: string;
+    layout?: any;
+    rowMetrics: Array<{
+        width: number;
+        height: number;
+        cells: any[];
+    }>;
+    gap?: {
+        row: number;
+        column: number;
+    };
+    graphic: {
+        width: number;
+        height: number;
+    };
+    hitbox: {
+        w: number;
+        h: number;
+    };
+}): {
+    width: any;
+    height: any;
+};
+export declare function computeBlockPosition({ position, size, layout, graphic, hitbox }: {
+    position: string;
+    size: {
+        width: number;
+        height: number;
+    };
+    layout?: any;
+    graphic: {
+        left: number;
+        top: number;
+        right: number;
+        centerX: number;
+        centerY: number;
+    };
+    hitbox: {
+        w: number;
+        h: number;
+    };
+}): {
+    x: number;
+    y: number;
+};
+export {};

package/dist/components/player-components-utils.js

@@ -0,0 +1,162 @@
+//#region src/components/player-components-utils.ts
+var DEFAULT_HP_BAR_STYLE = { fillColor: "#ef4444" };
+var DEFAULT_SP_BAR_STYLE = { fillColor: "#3b82f6" };
+var DEFAULT_CELL_HEIGHT = 16;
+var DEFAULT_CELL_WIDTH = 32;
+var defaultToNumber = (value, fallback = 0) => {
+	const num = typeof value === "number" ? value : parseFloat(value);
+	return Number.isFinite(num) ? num : fallback;
+};
+function getPointBounds(points = [], toNumber = defaultToNumber) {
+	if (!Array.isArray(points) || points.length < 2) return {
+		width: 1,
+		height: 1
+	};
+	let minX = Infinity;
+	let minY = Infinity;
+	let maxX = -Infinity;
+	let maxY = -Infinity;
+	for (let i = 0; i < points.length; i += 2) {
+		const x = toNumber(points[i], 0);
+		const y = toNumber(points[i + 1], 0);
+		minX = Math.min(minX, x);
+		minY = Math.min(minY, y);
+		maxX = Math.max(maxX, x);
+		maxY = Math.max(maxY, y);
+	}
+	return {
+		width: Math.max(1, maxX - minX),
+		height: Math.max(1, maxY - minY)
+	};
+}
+function getComponentId(definition) {
+	if (!definition) return void 0;
+	if (definition.id) return definition.id;
+	if (definition.type === "text") return "rpg:text";
+	if (definition.type === "hpBar") return "rpg:hpBar";
+	if (definition.type === "spBar") return "rpg:spBar";
+	if (definition.type === "bar") return "rpg:bar";
+	if (definition.type === "shape") return "rpg:shape";
+	if (definition.type === "image") return "rpg:image";
+	if (definition.type === "tile") return "rpg:tile";
+	return definition.type;
+}
+function getComponentProps(definition) {
+	if (definition.props) return definition.props;
+	if (definition.type === "text") return {
+		value: definition.value,
+		style: definition.style
+	};
+	if (definition.type === "hpBar") return {
+		current: "{hp}",
+		max: "{param.maxHp}",
+		style: {
+			...DEFAULT_HP_BAR_STYLE,
+			...definition.style
+		},
+		text: definition.text
+	};
+	if (definition.type === "spBar") return {
+		current: "{sp}",
+		max: "{param.maxSp}",
+		style: {
+			...DEFAULT_SP_BAR_STYLE,
+			...definition.style
+		},
+		text: definition.text
+	};
+	if (definition.type === "bar") return {
+		current: `{${definition.current}}`,
+		max: `{${definition.max}}`,
+		style: definition.style,
+		text: definition.text
+	};
+	if (definition.type === "shape") return definition.value;
+	if (definition.type === "image" || definition.type === "tile") return { value: definition.value };
+	return {};
+}
+function estimateComponentSize(definition, { toNumber = defaultToNumber, estimateTextWidth = (value) => String(value ?? "").length * 8 } = {}) {
+	const props = getComponentProps(definition);
+	const style = props?.style ?? definition?.style ?? {};
+	if (definition?.type === "text" || definition?.id === "rpg:text") return {
+		width: estimateTextWidth(props.value ?? definition.value, style),
+		height: toNumber(style.fontSize, 12)
+	};
+	if (definition?.type === "hpBar" || definition?.type === "spBar" || definition?.type === "bar" || definition?.id === "rpg:hpBar" || definition?.id === "rpg:spBar" || definition?.id === "rpg:bar") {
+		const barHeight = toNumber(style.height, 8);
+		const labelHeight = props.text != null && props.text !== "" ? toNumber(style.fontSize, 10) + 2 : 0;
+		return {
+			width: toNumber(style.width, 50),
+			height: barHeight + labelHeight
+		};
+	}
+	if (definition?.type === "shape" || definition?.id === "rpg:shape") {
+		const shape = props ?? {};
+		if (shape.type === "circle") {
+			const radius = toNumber(shape.radius, 8);
+			return {
+				width: radius * 2,
+				height: radius * 2
+			};
+		}
+		if (shape.type === "line") return {
+			width: Math.max(1, Math.abs(toNumber(shape.x2, 16) - toNumber(shape.x1, 0))),
+			height: Math.max(1, Math.abs(toNumber(shape.y2, 0) - toNumber(shape.y1, 0)))
+		};
+		if (shape.type === "polygon") return getPointBounds(shape.points, toNumber);
+		return {
+			width: toNumber(shape.width, 16),
+			height: toNumber(shape.height, 16)
+		};
+	}
+	return {
+		width: toNumber(definition?.props?.width, DEFAULT_CELL_WIDTH),
+		height: toNumber(definition?.props?.height, DEFAULT_CELL_HEIGHT)
+	};
+}
+function computeBlockSize({ position, layout = {}, rowMetrics, gap = {
+	row: 0,
+	column: 0
+}, graphic, hitbox }) {
+	const rowGapTotal = Math.max(0, rowMetrics.length - 1) * gap.row;
+	const maxColumns = rowMetrics.reduce((max, row) => Math.max(max, row.cells.length), 0);
+	const columnGapTotal = Math.max(0, maxColumns - 1) * gap.column;
+	const contentWidth = rowMetrics.reduce((max, row) => Math.max(max, row.width), 0) + columnGapTotal;
+	const contentHeight = rowMetrics.reduce((sum, row) => sum + row.height, 0) + rowGapTotal;
+	return {
+		width: layout.width ?? Math.max(contentWidth, position === "bottom" ? hitbox.w : position === "top" || position === "center" ? graphic.width : contentWidth),
+		height: layout.height ?? Math.max(contentHeight, position === "bottom" ? hitbox.h : position === "left" || position === "right" || position === "center" ? graphic.height : contentHeight)
+	};
+}
+function computeBlockPosition({ position, size, layout = {}, graphic, hitbox }) {
+	const marginLeft = layout.marginLeft ?? 0;
+	const marginRight = layout.marginRight ?? 0;
+	const marginTop = layout.marginTop ?? 0;
+	const marginBottom = layout.marginBottom ?? 0;
+	switch (position) {
+		case "bottom": return {
+			x: hitbox.w / 2 - size.width / 2 + marginLeft - marginRight,
+			y: hitbox.h / 2 - size.height / 2 + marginBottom - marginTop
+		};
+		case "center": return {
+			x: graphic.centerX - size.width / 2 + marginLeft - marginRight,
+			y: graphic.centerY - size.height / 2 + marginTop - marginBottom
+		};
+		case "left": return {
+			x: graphic.left - size.width + marginLeft - marginRight,
+			y: graphic.centerY - size.height / 2 + marginTop - marginBottom
+		};
+		case "right": return {
+			x: graphic.right + marginLeft - marginRight,
+			y: graphic.centerY - size.height / 2 + marginTop - marginBottom
+		};
+		default: return {
+			x: graphic.centerX - size.width / 2 + marginLeft - marginRight,
+			y: graphic.top - size.height + marginTop - marginBottom
+		};
+	}
+}
+//#endregion
+export { computeBlockPosition, computeBlockSize, estimateComponentSize, getComponentId, getComponentProps };
+
+//# sourceMappingURL=player-components-utils.js.map

package/dist/components/player-components-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"player-components-utils.js","names":[],"sources":["../../src/components/player-components-utils.ts"],"sourcesContent":["export const DEFAULT_HP_BAR_STYLE = { fillColor: '#ef4444' };\nexport const DEFAULT_SP_BAR_STYLE = { fillColor: '#3b82f6' };\n\nconst DEFAULT_CELL_HEIGHT = 16;\nconst DEFAULT_CELL_WIDTH = 32;\n\ntype NumberResolver = (value: any, fallback?: number) => number;\n\nconst defaultToNumber: NumberResolver = (value, fallback = 0) => {\n  const num = typeof value === 'number' ? value : parseFloat(value);\n  return Number.isFinite(num) ? num : fallback;\n};\n\nexport function getPointBounds(points: any[] = [], toNumber: NumberResolver = defaultToNumber) {\n  if (!Array.isArray(points) || points.length < 2) {\n    return { width: 1, height: 1 };\n  }\n\n  let minX = Infinity;\n  let minY = Infinity;\n  let maxX = -Infinity;\n  let maxY = -Infinity;\n\n  for (let i = 0; i < points.length; i += 2) {\n    const x = toNumber(points[i], 0);\n    const y = toNumber(points[i + 1], 0);\n    minX = Math.min(minX, x);\n    minY = Math.min(minY, y);\n    maxX = Math.max(maxX, x);\n    maxY = Math.max(maxY, y);\n  }\n\n  return {\n    width: Math.max(1, maxX - minX),\n    height: Math.max(1, maxY - minY)\n  };\n}\n\nexport function getComponentId(definition: any) {\n  if (!definition) return undefined;\n  if (definition.id) return definition.id;\n  if (definition.type === 'text') return 'rpg:text';\n  if (definition.type === 'hpBar') return 'rpg:hpBar';\n  if (definition.type === 'spBar') return 'rpg:spBar';\n  if (definition.type === 'bar') return 'rpg:bar';\n  if (definition.type === 'shape') return 'rpg:shape';\n  if (definition.type === 'image') return 'rpg:image';\n  if (definition.type === 'tile') return 'rpg:tile';\n  return definition.type;\n}\n\nexport function getComponentProps(definition: any) {\n  if (definition.props) return definition.props;\n\n  if (definition.type === 'text') {\n    return { value: definition.value, style: definition.style };\n  }\n  if (definition.type === 'hpBar') {\n    return { current: '{hp}', max: '{param.maxHp}', style: { ...DEFAULT_HP_BAR_STYLE, ...definition.style }, text: definition.text };\n  }\n  if (definition.type === 'spBar') {\n    return { current: '{sp}', max: '{param.maxSp}', style: { ...DEFAULT_SP_BAR_STYLE, ...definition.style }, text: definition.text };\n  }\n  if (definition.type === 'bar') {\n    return { current: `{${definition.current}}`, max: `{${definition.max}}`, style: definition.style, text: definition.text };\n  }\n  if (definition.type === 'shape') {\n    return definition.value;\n  }\n  if (definition.type === 'image' || definition.type === 'tile') {\n    return { value: definition.value };\n  }\n\n  return {};\n}\n\nexport function estimateComponentSize(\n  definition: any,\n  {\n    toNumber = defaultToNumber,\n    estimateTextWidth = (value: any) => String(value ?? '').length * 8\n  }: {\n    toNumber?: NumberResolver;\n    estimateTextWidth?: (value: any, style?: any) => number;\n  } = {}\n) {\n  const props = getComponentProps(definition);\n  const style = props?.style ?? definition?.style ?? {};\n\n  if (definition?.type === 'text' || definition?.id === 'rpg:text') {\n    return {\n      width: estimateTextWidth(props.value ?? definition.value, style),\n      height: toNumber(style.fontSize, 12)\n    };\n  }\n\n  if (definition?.type === 'hpBar' || definition?.type === 'spBar' || definition?.type === 'bar' || definition?.id === 'rpg:hpBar' || definition?.id === 'rpg:spBar' || definition?.id === 'rpg:bar') {\n    const barHeight = toNumber(style.height, 8);\n    const labelHeight = props.text != null && props.text !== '' ? toNumber(style.fontSize, 10) + 2 : 0;\n    return {\n      width: toNumber(style.width, 50),\n      height: barHeight + labelHeight\n    };\n  }\n\n  if (definition?.type === 'shape' || definition?.id === 'rpg:shape') {\n    const shape = props ?? {};\n    if (shape.type === 'circle') {\n      const radius = toNumber(shape.radius, 8);\n      return { width: radius * 2, height: radius * 2 };\n    }\n    if (shape.type === 'line') {\n      return {\n        width: Math.max(1, Math.abs(toNumber(shape.x2, 16) - toNumber(shape.x1, 0))),\n        height: Math.max(1, Math.abs(toNumber(shape.y2, 0) - toNumber(shape.y1, 0)))\n      };\n    }\n    if (shape.type === 'polygon') {\n      return getPointBounds(shape.points, toNumber);\n    }\n    return {\n      width: toNumber(shape.width, 16),\n      height: toNumber(shape.height, 16)\n    };\n  }\n\n  return {\n    width: toNumber(definition?.props?.width, DEFAULT_CELL_WIDTH),\n    height: toNumber(definition?.props?.height, DEFAULT_CELL_HEIGHT)\n  };\n}\n\nexport function computeBlockSize({\n  position,\n  layout = {},\n  rowMetrics,\n  gap = { row: 0, column: 0 },\n  graphic,\n  hitbox\n}: {\n  position: string;\n  layout?: any;\n  rowMetrics: Array<{ width: number; height: number; cells: any[] }>;\n  gap?: { row: number; column: number };\n  graphic: { width: number; height: number };\n  hitbox: { w: number; h: number };\n}) {\n  const rowGapTotal = Math.max(0, rowMetrics.length - 1) * gap.row;\n  const maxColumns = rowMetrics.reduce((max, row) => Math.max(max, row.cells.length), 0);\n  const columnGapTotal = Math.max(0, maxColumns - 1) * gap.column;\n  const contentWidth = rowMetrics.reduce((max, row) => Math.max(max, row.width), 0) + columnGapTotal;\n  const contentHeight = rowMetrics.reduce((sum, row) => sum + row.height, 0) + rowGapTotal;\n  const width = layout.width ?? Math.max(contentWidth, position === 'bottom' ? hitbox.w : position === 'top' || position === 'center' ? graphic.width : contentWidth);\n  const height = layout.height ?? Math.max(contentHeight, position === 'bottom' ? hitbox.h : position === 'left' || position === 'right' || position === 'center' ? graphic.height : contentHeight);\n\n  return { width, height };\n}\n\nexport function computeBlockPosition({\n  position,\n  size,\n  layout = {},\n  graphic,\n  hitbox\n}: {\n  position: string;\n  size: { width: number; height: number };\n  layout?: any;\n  graphic: { left: number; top: number; right: number; centerX: number; centerY: number };\n  hitbox: { w: number; h: number };\n}) {\n  const marginLeft = layout.marginLeft ?? 0;\n  const marginRight = layout.marginRight ?? 0;\n  const marginTop = layout.marginTop ?? 0;\n  const marginBottom = layout.marginBottom ?? 0;\n\n  switch (position) {\n    case 'bottom':\n      return {\n        x: (hitbox.w / 2) - (size.width / 2) + marginLeft - marginRight,\n        y: (hitbox.h / 2) - (size.height / 2) + marginBottom - marginTop\n      };\n    case 'center':\n      return {\n        x: graphic.centerX - (size.width / 2) + marginLeft - marginRight,\n        y: graphic.centerY - (size.height / 2) + marginTop - marginBottom\n      };\n    case 'left':\n      return {\n        x: graphic.left - size.width + marginLeft - marginRight,\n        y: graphic.centerY - (size.height / 2) + marginTop - marginBottom\n      };\n    case 'right':\n      return {\n        x: graphic.right + marginLeft - marginRight,\n        y: graphic.centerY - (size.height / 2) + marginTop - marginBottom\n      };\n    case 'top':\n    default:\n      return {\n        x: graphic.centerX - (size.width / 2) + marginLeft - marginRight,\n        y: graphic.top - size.height + marginTop - marginBottom\n      };\n  }\n}\n"],"mappings":"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"}

package/dist/components/player-components-utils.spec.d.ts

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

package/dist/components/player-components.ce.js

@@ -0,0 +1,188 @@
+import { inject } from "../core/inject.js";
+import { resolveDynamicProps, resolveDynamicValue } from "./dynamics/parse-value.js";
+import { RpgClientEngine } from "../RpgClientEngine.js";
+import { computeBlockPosition, computeBlockSize, estimateComponentSize, getComponentId, getComponentProps } from "./player-components-utils.js";
+import { Container, computed, h, loop, useDefineProps, useProps } from "canvasengine";
+//#region src/components/player-components.ce
+function component($$props) {
+	useProps($$props);
+	const { object, position, graphicBounds } = useDefineProps($$props)({ position: { default: "top" } });
+	const client = inject(RpgClientEngine);
+	const warnedComponents = /* @__PURE__ */ new Set();
+	const readPosition = computed(() => position?.() ?? "top");
+	const componentSource = computed(() => {
+		switch (readPosition()) {
+			case "bottom": return object.componentsBottom?.();
+			case "center": return object.componentsCenter?.();
+			case "left": return object.componentsLeft?.();
+			case "right": return object.componentsRight?.();
+			default: return object.componentsTop?.();
+		}
+	});
+	const componentData = computed(() => {
+		const value = componentSource();
+		if (!value) return {
+			components: [],
+			layout: {}
+		};
+		if (typeof value !== "string") return value;
+		try {
+			return JSON.parse(value);
+		} catch (error) {
+			if (typeof process === "undefined" || process.env.NODE_ENV !== "production") console.warn("[RPGJS] Invalid server sprite component payload", error);
+			return {
+				components: [],
+				layout: {}
+			};
+		}
+	});
+	const layout = computed(() => componentData()?.layout ?? {});
+	const rows = computed(() => componentData()?.components ?? []);
+	const hitbox = object.hitbox;
+	const toNumber = (value, fallback = 0) => {
+		const resolved = resolveDynamicValue(value, object);
+		const num = typeof resolved === "number" ? resolved : parseFloat(resolved);
+		return Number.isFinite(num) ? num : fallback;
+	};
+	const estimateTextWidth = (value, style = {}) => {
+		const text = String(resolveDynamicValue(value ?? "", object) ?? "");
+		const fontSize = toNumber(style.fontSize, 12);
+		return Math.max(1, Math.ceil(text.length * fontSize * .6));
+	};
+	const rowMetrics = computed(() => {
+		return rows().map((row) => {
+			const cells = row.map((definition) => {
+				const intrinsic = estimateComponentSize(definition, {
+					toNumber,
+					estimateTextWidth
+				});
+				return {
+					definition,
+					width: intrinsic.width,
+					height: intrinsic.height
+				};
+			});
+			return {
+				cells,
+				width: cells.reduce((sum, cell) => sum + cell.width, 0),
+				height: cells.reduce((max, cell) => Math.max(max, cell.height), 0)
+			};
+		});
+	});
+	const gap = computed(() => ({
+		row: toNumber(layout().rowGap ?? layout().gap, 0),
+		column: toNumber(layout().columnGap ?? layout().gap, 0)
+	}));
+	const fallbackBounds = computed(() => {
+		const box = hitbox();
+		const width = box?.w ?? 0;
+		const height = box?.h ?? 0;
+		return {
+			left: 0,
+			top: 0,
+			right: width,
+			bottom: height,
+			width,
+			height,
+			centerX: width / 2,
+			centerY: height / 2
+		};
+	});
+	const bounds = computed(() => {
+		return (typeof graphicBounds === "function" ? graphicBounds() : void 0) ?? fallbackBounds();
+	});
+	const blockSize = computed(() => {
+		const box = hitbox() ?? {
+			w: 0,
+			h: 0
+		};
+		const graphic = bounds();
+		return computeBlockSize({
+			position: readPosition(),
+			layout: layout(),
+			rowMetrics: rowMetrics(),
+			gap: gap(),
+			graphic,
+			hitbox: box
+		});
+	});
+	const blockPosition = computed(() => {
+		const box = hitbox() ?? {
+			w: 0,
+			h: 0
+		};
+		const graphic = bounds();
+		return computeBlockPosition({
+			position: readPosition(),
+			size: blockSize(),
+			layout: layout(),
+			graphic,
+			hitbox: box
+		});
+	});
+	const warnMissingComponent = (id) => {
+		if (!id || warnedComponents.has(id)) return;
+		if (typeof process !== "undefined" && process.env.NODE_ENV === "production") return;
+		warnedComponents.add(id);
+		console.warn(`[RPGJS] Server sprite component "${id}" is not registered on the client.`);
+	};
+	const renderedRows = computed(() => {
+		return rowMetrics().map((row) => {
+			const entries = [];
+			row.cells.forEach((cell) => {
+				const definition = cell.definition;
+				const id = getComponentId(definition);
+				const component = client.getSpriteComponent(id);
+				if (!component) {
+					warnMissingComponent(id);
+					return;
+				}
+				entries.push({
+					component,
+					props: resolveDynamicProps(getComponentProps(definition), object),
+					width: cell.width,
+					height: cell.height
+				});
+			});
+			return {
+				height: row.height,
+				entries
+			};
+		});
+	});
+	return h(Container, {
+		x: computed(() => blockPosition().x),
+		y: computed(() => blockPosition().y),
+		width: computed(() => blockSize().width),
+		height: computed(() => blockSize().height),
+		minWidth: computed(() => blockSize().width),
+		minHeight: computed(() => blockSize().height),
+		display: "flex",
+		flexDirection: "column",
+		justifyContent: "center",
+		alignItems: "center",
+		rowGap: computed(() => gap().row)
+	}, loop(renderedRows, (row) => h(Container, {
+		width: "100%",
+		height: row.height,
+		display: "flex",
+		flexDirection: "row",
+		justifyContent: "center",
+		alignItems: "center",
+		columnGap: computed(() => gap().column)
+	}, loop(row.entries, (entry) => h(Container, {
+		width: entry.width,
+		height: entry.height,
+		display: "flex",
+		justifyContent: "center",
+		alignItems: "center"
+	}, h(entry.component, {
+		object,
+		...entry.props
+	}))))));
+}
+var __ce_component = component;
+//#endregion
+export { __ce_component as default };
+
+//# sourceMappingURL=player-components.ce.js.map

package/dist/components/player-components.ce.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"player-components.ce.js","names":[],"sources":["../../src/components/player-components.ce"],"sourcesContent":["<Container\n  x={blockPosition().x}\n  y={blockPosition().y}\n  width={blockSize().width}\n  height={blockSize().height}\n  minWidth={blockSize().width}\n  minHeight={blockSize().height}\n  display=\"flex\"\n  flexDirection=\"column\"\n  justifyContent=\"center\"\n  alignItems=\"center\"\n  rowGap={gap().row}\n>\n  @for (row of renderedRows) {\n    <Container\n      width=\"100%\"\n      height={row.height}\n      display=\"flex\"\n      flexDirection=\"row\"\n      justifyContent=\"center\"\n      alignItems=\"center\"\n      columnGap={gap().column}\n    >\n      @for (entry of row.entries) {\n        <Container\n          width={entry.width}\n          height={entry.height}\n          display=\"flex\"\n          justifyContent=\"center\"\n          alignItems=\"center\"\n        >\n          <entry.component object ...entry.props />\n        </Container>\n      }\n    </Container>\n  }\n</Container>\n\n<script>\nimport { computed } from \"canvasengine\";\nimport { RpgClientEngine } from \"../RpgClientEngine\";\nimport { inject } from \"../core/inject\";\nimport { resolveDynamicProps, resolveDynamicValue } from \"./dynamics/parse-value\";\nimport {\n  computeBlockPosition,\n  computeBlockSize,\n  estimateComponentSize,\n  getComponentId,\n  getComponentProps\n} from \"./player-components-utils\";\n\nconst { object, position, graphicBounds } = defineProps({\n  position: {\n    default: 'top'\n  }\n});\n\nconst client = inject(RpgClientEngine);\nconst warnedComponents = new Set();\n\nconst readPosition = computed(() => position?.() ?? 'top');\n\nconst componentSource = computed(() => {\n  switch (readPosition()) {\n    case 'bottom':\n      return object.componentsBottom?.();\n    case 'center':\n      return object.componentsCenter?.();\n    case 'left':\n      return object.componentsLeft?.();\n    case 'right':\n      return object.componentsRight?.();\n    case 'top':\n    default:\n      return object.componentsTop?.();\n  }\n});\n\nconst componentData = computed(() => {\n  const value = componentSource();\n  if (!value) {\n    return { components: [], layout: {} };\n  }\n\n  if (typeof value !== 'string') {\n    return value;\n  }\n\n  try {\n    return JSON.parse(value);\n  } catch (error) {\n    if (typeof process === 'undefined' || process.env?.NODE_ENV !== 'production') {\n      console.warn('[RPGJS] Invalid server sprite component payload', error);\n    }\n    return { components: [], layout: {} };\n  }\n});\n\nconst layout = computed(() => componentData()?.layout ?? {});\nconst rows = computed(() => componentData()?.components ?? []);\nconst hitbox = object.hitbox;\n\nconst toNumber = (value, fallback = 0) => {\n  const resolved = resolveDynamicValue(value, object);\n  const num = typeof resolved === 'number' ? resolved : parseFloat(resolved);\n  return Number.isFinite(num) ? num : fallback;\n};\n\nconst estimateTextWidth = (value, style = {}) => {\n  const text = String(resolveDynamicValue(value ?? '', object) ?? '');\n  const fontSize = toNumber(style.fontSize, 12);\n  return Math.max(1, Math.ceil(text.length * fontSize * 0.6));\n};\n\nconst rowMetrics = computed(() => {\n  return rows().map((row) => {\n    const cells = row.map((definition) => {\n      const intrinsic = estimateComponentSize(definition, { toNumber, estimateTextWidth });\n      return {\n        definition,\n        width: intrinsic.width,\n        height: intrinsic.height\n      };\n    });\n\n    return {\n      cells,\n      width: cells.reduce((sum, cell) => sum + cell.width, 0),\n      height: cells.reduce((max, cell) => Math.max(max, cell.height), 0)\n    };\n  });\n});\n\nconst gap = computed(() => ({\n  row: toNumber(layout().rowGap ?? layout().gap, 0),\n  column: toNumber(layout().columnGap ?? layout().gap, 0)\n}));\n\nconst fallbackBounds = computed(() => {\n  const box = hitbox();\n  const width = box?.w ?? 0;\n  const height = box?.h ?? 0;\n\n  return {\n    left: 0,\n    top: 0,\n    right: width,\n    bottom: height,\n    width,\n    height,\n    centerX: width / 2,\n    centerY: height / 2\n  };\n});\n\nconst bounds = computed(() => {\n  const resolvedBounds = typeof graphicBounds === 'function' ? graphicBounds() : undefined;\n  return resolvedBounds ?? fallbackBounds();\n});\n\nconst blockSize = computed(() => {\n  const box = hitbox() ?? { w: 0, h: 0 };\n  const graphic = bounds();\n  return computeBlockSize({\n    position: readPosition(),\n    layout: layout(),\n    rowMetrics: rowMetrics(),\n    gap: gap(),\n    graphic,\n    hitbox: box\n  });\n});\n\nconst blockPosition = computed(() => {\n  const box = hitbox() ?? { w: 0, h: 0 };\n  const graphic = bounds();\n  return computeBlockPosition({\n    position: readPosition(),\n    size: blockSize(),\n    layout: layout(),\n    graphic,\n    hitbox: box\n  });\n});\n\nconst warnMissingComponent = (id) => {\n  if (!id || warnedComponents.has(id)) return;\n  if (typeof process !== 'undefined' && process.env?.NODE_ENV === 'production') return;\n  warnedComponents.add(id);\n  console.warn(`[RPGJS] Server sprite component \"${id}\" is not registered on the client.`);\n};\n\nconst renderedRows = computed(() => {\n  return rowMetrics().map((row) => {\n    const entries = [];\n\n    row.cells.forEach((cell) => {\n      const definition = cell.definition;\n      const id = getComponentId(definition);\n      const component = client.getSpriteComponent(id);\n\n      if (!component) {\n        warnMissingComponent(id);\n        return;\n      }\n\n      entries.push({\n        component,\n        props: resolveDynamicProps(getComponentProps(definition), object),\n        width: cell.width,\n        height: cell.height\n      });\n    });\n\n    return {\n      height: row.height,\n      entries\n    };\n  });\n});\n</script>\n"],"mappings":"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"}