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

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,191 @@
+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, useDefineEmits, useDefineProps, useProps } from "canvasengine";
+//#region src/components/player-components.ce
+function component($$props) {
+	useProps($$props);
+	const defineProps = useDefineProps($$props);
+	useDefineEmits($$props);
+	const { object, position, graphicBounds } = defineProps({ position: { default: "top" } });
+	const sprite = object();
+	const client = inject(RpgClientEngine);
+	const warnedComponents = /* @__PURE__ */ new Set();
+	const readPosition = computed(() => position?.() ?? "top");
+	const componentSource = computed(() => {
+		switch (readPosition()) {
+			case "bottom": return sprite.componentsBottom?.();
+			case "center": return sprite.componentsCenter?.();
+			case "left": return sprite.componentsLeft?.();
+			case "right": return sprite.componentsRight?.();
+			default: return sprite.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 = sprite.hitbox;
+	const toNumber = (value, fallback = 0) => {
+		const resolved = resolveDynamicValue(value, sprite);
+		const num = typeof resolved === "number" ? resolved : parseFloat(resolved);
+		return Number.isFinite(num) ? num : fallback;
+	};
+	const estimateTextWidth = (value, style = {}) => {
+		const text = String(resolveDynamicValue(value ?? "", sprite) ?? "");
+		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), sprite),
+					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: sprite,
+		...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={sprite} ...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});\nconst sprite = object();\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 sprite.componentsBottom?.();\n    case 'center':\n      return sprite.componentsCenter?.();\n    case 'left':\n      return sprite.componentsLeft?.();\n    case 'right':\n      return sprite.componentsRight?.();\n    case 'top':\n    default:\n      return sprite.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 = sprite.hitbox;\n\nconst toNumber = (value, fallback = 0) => {\n  const resolved = resolveDynamicValue(value, sprite);\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 ?? '', sprite) ?? '');\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), sprite),\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":";;;;;;AAUE,SAAY,UAAM,SAAA;CACD,SAAA,OAAA;CACnB,MAAA,cAAA,eAAA,OAAA;CAC4B,eAAC,OAAA;CACxB,MAAA,EAAA,QAAA,UAAA,kBAAA,YAAA,EACD,UAAS,EACP,SAAW,MACb,EACJ,CAAC;CACD,MAAM,SAAA,OAAgB;CACtB,MAAM,SAAA,OAAY,eAAM;CACxB,MAAM,mCAAiB,IAAM,IAAA;CAC7B,MAAI,eAAA,eAAA,WAAA,KAAA,KAAA;CACJ,MAAM,kBAAkB,eAAU;EAC9B,QAAK,aAAA,GAAL;GACI,KAAE,UACA,OAAQ,OAAM,mBAAM;GACtB,KAAE,UACA,OAAA,OAAgB,mBAAM;GACxB,KAAE,QACF,OAAA,OAAA,iBAAA;GACA,KAAG,SACD,OAAS,OAAA,kBAAA;GAEb,SACJ,OAAA,OAAA,gBAAA;EACA;;CAEF,MAAC,gBAAM,eAAA;EACP,MAAS,QAAS,gBAAQ;EAC1B,IAAQ,CAAC,OACD,OAAO;GAAE,YAAU,CAAA;GAAK,QAAO,CAAA;EAAA;EAEvC,IAAO,OAAA,UAAA,UACL,OAAA;EAEA,IAAA;GACA,OAAA,KAAc,MAAA,KAAA;EACd,SACQ,OAAO;gFAET,QAAQ,KAAS,mDAA+B,KAAA;GAEpD,OAAU;IAAG,YAAA,CAAA;IAAA,QAAA,CAAA;GAAA;EACf;CACF,CAAC;CACD,MAAM,SAAS,eAAQ,cAAA,GAAA,UAAA,CAAA,CAAA;;CAEvB,MAAM,SAAS,OAAO;CACtB,MAAM,YAAA,OAAmB,WAAS,MAAA;;EAElC,MAAM,MAAA,OAAe,aAAe,WAAW,WAAW,WAAA,QAAA;;CAE1D;CACA,MAAE,qBAAwB,OAAA,QAAA,CAAA,MAAA;EACtB,MAAM,OAAO,OAAA,oBAAA,SAAA,IAAA,MAAA,KAAA,EAAA;EACb,MAAE,WAAc,SAAA,MAAgB,UAAI,EAAA;EACpC,OAAM,KAAM,IAAC,GAAA,KAAA,KAAA,KAAA,SAAA,WAAA,EAAA,CAAA;CACjB;CACA,MAAI,aAAW,eAAA;EACX,OAAE,KAAO,EAAA,KAAO,QAAA;GACZ,MAAE,QAAM,IAAA,KAAA,eAAA;IACJ,MAAC,YAAO,sBAAmB,YAAA;KAAA;KAAA;IAAA,CAAA;IAC7B,OAAI;KACH;KACE,OAAO,UAAa;KAC/B,QAAA,UAAA;IACA;;GAEI,OAAA;IACE;IACI,OAAE,MAAA,QAAA,KAAA,SAAA,MAAA,KAAA,OAAA,CAAA;IACF,QAAC,MAAa,QAAG,KAAU,SAAE,KAAA,IAAA,KAAA,KAAA,MAAA,GAAA,CAAA;GACvC;;CAEF,CAAC;CACD,MAAI,MAAO,gBAAK;EACd,KAAA,SAAA,OAAA,EAAA,UAAA,OAAA,EAAA,KAAA,CAAA;;CAEF,EAAE;CACF,MAAI,iBAAkB,eAAM;EACxB,MAAM,MAAM,OAAE;EACd,MAAI,QAAO,KAAQ,KAAK;EACxB,MAAE,SAAa,KAAE,KAAO;EACxB,OAAA;GACA,MAAS;GACX,KAAA;GACA,OAAA;;GAEI;GACA;GACA,SAAS,QAAO;;EAEtB;CACA,CAAC;CACD,MAAE,SAAY,eAAgB;EAE7B,QADwB,OAAO,kBAAc,aAAA,cAAA,IAAA,KAAA,MAC7C,eAAA;;CAED,MAAM,YAAA,eAA2B;EAC/B,MAAM,MAAO,OAAO,KAAA;GAAA,GAAA;GAAA,GAAA;EAAmB;EACvC,MAAM,UAAW,OAAQ;EACzB,OAAO,iBAAiB;GACzB,UAAA,aAAA;;GAEK,YAAa,WAAY;GACvB,KAAK,IAAG;GACZ;GACE,QAAM;EACR,CAAC;CACL,CAAC;CACD,MAAM,gBAAS,eAAe;EAC1B,MAAI,MAAQ,OAAA,KAAU;GAAA,GAAA;GAAA,GAAA;EAAA;EACtB,MAAG,UAAA,OAAA;EACH,OAAE,qBAAA;;GAEF,MAAO,UAAA;GACL,QAAK,OAAA;GACL;GACA,QAAQ;EACV,CAAC;CACL,CAAC;CACD,MAAE,wBAAA,OAAA;uCAEI;EACJ,IAAK,OAAQ,YAAU,eAAA,QAAA,IAAA,aAA0B,cAC3C;EACL,iBAAA,IAAA,EAAA;;CAEH;CACA,MAAE,eAAmB,eAAC;EACpB,OAAM,WAAc,EAAE,KAAG,QAAA;GACnB,MAAM,UAAU,CAAC;;IAEhB,MAAA,aAAA,KAAA;IACE,MAAA,KAAA,eAAA,UAAA;IACD,MAAA,YAAA,OAAA,mBAAA,EAAA;IACC,IAAK,CAAA,WAAA;KACJ,qBAAM,EAAA;KACT;IACC;IACE,QAAQ,KAAE;KACT;KACV,OAAA,oBAAA,kBAAA,UAAA,GAAA,MAAA;KACD,OAAA,KAAA;;IAEU,CAAC;GACL,CAAA;GACA,OAAC;IACP,QAAA,IAAA;;GAEI;EACJ,CAAA;CACF,CAAC;CAEG,OADK,EAAA,WAAiB;EAAA,GAAA,eAAA,cAAA,EAAA,CAAA;EAAA,GAAA,eAAA,cAAA,EAAA,CAAA;EAAA,OAAA,eAAA,UAAA,EAAA,KAAA;EAAA,QAAA,eAAA,UAAA,EAAA,MAAA;EAAA,UAAA,eAAA,UAAA,EAAA,KAAA;EAAA,WAAA,eAAA,UAAA,EAAA,MAAA;EAAA,SAAA;EAAA,eAAA;EAAA,gBAAA;EAAA,YAAA;EAAA,QAAA,eAAA,IAAA,EAAA,GAAA;CAAA,GAAA,KAAA,eAAA,QAAA,EAAA,WAAA;EAAA,OAAA;EAAA,QAAA,IAAA;EAAA,SAAA;EAAA,eAAA;EAAA,gBAAA;EAAA,YAAA;EAAA,WAAA,eAAA,IAAA,EAAA,MAAA;CAAA,GAAA,KAAA,IAAA,UAAA,UAAA,EAAA,WAAA;EAAA,OAAA,MAAA;EAAA,QAAA,MAAA;EAAA,SAAA;EAAA,gBAAA;EAAA,YAAA;CAAA,GAAA,EAAA,MAAA,WAAA;EAAA,QAAA;EAAA,GAAA,MAAA;CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CACZ;AACV;AAEA,IAAQ,iBAAE"}

package/dist/components/prebuilt/hp-bar.ce.js

@@ -1,84 +1,83 @@
-import { Container, Graphics, animatedSignal, computed, effect, h, useDefineProps, useProps } from "canvasengine";
+import { Container, Graphics, animatedSignal, computed, effect, h, useDefineEmits, useDefineProps, useProps } from "canvasengine";
 //#region src/components/prebuilt/hp-bar.ce
 function component($$props) {
 	useProps($$props);
-	var object = useDefineProps($$props)().object;
-	var barWidth = 50;
-	var barHeight = 8;
-	var borderRadius = 4;
-	var innerRadius = 3;
-	var padding = 1;
-	var bgColor = 1450302;
-	var shadowColor = 0;
-	var borderColor = 4871528;
-	var maxFillWidth = barWidth - padding * 2;
-	var fillHeight = barHeight - padding * 2;
-	var highlightHeight = Math.floor(fillHeight / 2);
-	var hitbox = object.hitbox;
-	var currentHp = computed(function() {
-		var _a, _b;
-		return (_b = (_a = object.hpSignal) === null || _a === void 0 ? void 0 : _a.call(object)) !== null && _b !== void 0 ? _b : 0;
+	const defineProps = useDefineProps($$props);
+	useDefineEmits($$props);
+	const { object } = defineProps();
+	const sprite = object();
+	const barWidth = 50;
+	const barHeight = 8;
+	const borderRadius = 4;
+	const innerRadius = 3;
+	const padding = 1;
+	const bgColor = 1450302;
+	const shadowColor = 0;
+	const borderColor = 4871528;
+	const maxFillWidth = barWidth - padding * 2;
+	const fillHeight = barHeight - padding * 2;
+	const highlightHeight = Math.floor(fillHeight / 2);
+	const hitbox = sprite.hitbox;
+	const currentHp = computed(() => {
+		return sprite.hpSignal?.() ?? 0;
 	});
-	var maxHp = computed(function() {
-		var _a, _b, _c;
-		return (_c = ((_b = (_a = object._param) === null || _a === void 0 ? void 0 : _a.call(object)) !== null && _b !== void 0 ? _b : {}).maxHp) !== null && _c !== void 0 ? _c : 100;
+	const maxHp = computed(() => {
+		return (sprite._param?.() ?? {}).maxHp ?? 100;
 	});
-	var hpPercent = computed(function() {
-		var max = maxHp();
+	const hpPercent = computed(() => {
+		const max = maxHp();
 		if (max <= 0) return 0;
-		var percent = currentHp() / max;
+		const percent = currentHp() / max;
 		return Math.max(0, Math.min(1, percent));
 	});
-	var animatedPercent = animatedSignal(hpPercent(), {
+	const animatedPercent = animatedSignal(hpPercent(), {
 		duration: 300,
 		easing: "easeOutCubic"
 	});
-	effect(function() {
-		var newPercent = hpPercent();
+	effect(() => {
+		const newPercent = hpPercent();
 		animatedPercent.set(newPercent);
 	});
-	var position = computed(function() {
-		return {
-			x: hitbox().w / 2 - barWidth / 2,
-			y: -barHeight - 8
-		};
-	});
-	var fillWidth = computed(function() {
-		var percent = animatedPercent();
-		var width = maxFillWidth * percent;
+	const position = computed(() => ({
+		x: hitbox().w / 2 - barWidth / 2,
+		y: -16
+	}));
+	const fillWidth = computed(() => {
+		const percent = animatedPercent();
+		const width = maxFillWidth * percent;
 		if (percent > 0 && width < innerRadius * 2) return innerRadius * 2;
 		return Math.max(0, width);
 	});
-	var hpColorHex = computed(function() {
-		var percent = hpPercent();
+	const hpColorHex = computed(() => {
+		const percent = hpPercent();
 		if (percent > .6) return 4906624;
 		else if (percent > .3) return 16436245;
 		else if (percent > .15) return 16486972;
 		else return 15680580;
 	});
-	var drawShadow = function(g) {
+	const drawShadow = (g) => {
 		g.roundRect(0, 0, barWidth, barHeight, borderRadius);
 		g.fill({
 			color: shadowColor,
 			alpha: .3
 		});
 	};
-	var drawBackground = function(g) {
+	const drawBackground = (g) => {
 		g.roundRect(0, 0, barWidth, barHeight, borderRadius);
 		g.fill({
 			color: bgColor,
 			alpha: .9
 		});
 	};
-	var drawFill = function(g) {
-		var width = fillWidth();
+	const drawFill = (g) => {
+		const width = fillWidth();
 		if (width > 0) {
 			g.roundRect(padding, padding, width, fillHeight, innerRadius);
 			g.fill({ color: hpColorHex() });
 		}
 	};
-	var drawHighlight = function(g) {
-		var width = fillWidth();
+	const drawHighlight = (g) => {
+		const width = fillWidth();
 		if (width > 0) {
 			g.roundRect(padding, padding, width, highlightHeight, innerRadius);
 			g.fill({
@@ -87,7 +86,7 @@ function component($$props) {
 			});
 		}
 	};
-	var drawBorder = function(g) {
+	const drawBorder = (g) => {
 		g.roundRect(0, 0, barWidth, barHeight, borderRadius);
 		g.stroke({
 			color: borderColor,
@@ -110,7 +109,8 @@ function component($$props) {
 		h(Graphics, { draw: drawBorder })
 	])];
 }
+var __ce_component = component;
 //#endregion
-export { component as default };
+export { __ce_component as default };
 
 //# sourceMappingURL=hp-bar.ce.js.map

package/dist/components/prebuilt/hp-bar.ce.js.map

@@ -1 +1 @@
-{"version":3,"file":"hp-bar.ce.js","names":[],"sources":["../../../src/components/prebuilt/hp-bar.ce"],"sourcesContent":["<!-- \n  HP Bar Component\n  \n  A beautiful, animated health bar component for displaying player HP above sprites.\n  Features a gradient color based on HP level, smooth animations, and modern styling.\n  \n  ## Design\n  \n  The bar changes color dynamically based on HP percentage:\n  - Green (#4ade80) when HP > 60% - Healthy state\n  - Yellow (#facc15) when HP 30-60% - Caution state  \n  - Orange (#fb923c) when HP 15-30% - Danger state\n  - Red (#ef4444) when HP < 15% - Critical state\n  \n  @example\n  ```ts\n  import HpBar from './hp-bar.ce';\n  \n  // In module configuration\n  export default defineModule<RpgClient>({\n    sprite: {\n      componentsInFront: [HpBar]\n    }\n  })\n  ```\n-->\n\n<Container x={position.x} y={position.y}>\n  <!-- Background shadow for depth effect -->\n  <Graphics draw={drawShadow} x={1} y={1} />\n  \n  <!-- Main background -->\n  <Graphics draw={drawBackground} />\n  \n  <!-- HP fill bar -->\n  <Graphics draw={drawFill} />\n  \n  <!-- Highlight overlay for 3D effect -->\n  <Graphics draw={drawHighlight} />\n  \n  <!-- Border frame -->\n  <Graphics draw={drawBorder} />\n</Container>\n\n<script>\nimport { computed, animatedSignal, effect } from \"canvasengine\";\n\nconst { object } = defineProps();\n\n// ====================\n// Configuration\n// ====================\n\n/** Total width of the HP bar in pixels */\nconst barWidth = 50;\n\n/** Total height of the HP bar in pixels */\nconst barHeight = 8;\n\n/** Border radius for rounded corners */\nconst borderRadius = 4;\n\n/** Inner border radius for the fill bar */\nconst innerRadius = 3;\n\n/** Padding between background and fill */\nconst padding = 1;\n\n/** Background color (dark theme) */\nconst bgColor = 0x16213e;\n\n/** Shadow color */\nconst shadowColor = 0x000000;\n\n/** Border color */\nconst borderColor = 0x4a5568;\n\n// ====================\n// Calculated dimensions\n// ====================\n\n/** Maximum fill width */\nconst maxFillWidth = barWidth - (padding * 2);\n\n/** Fill height */\nconst fillHeight = barHeight - (padding * 2);\n\n/** Highlight height (half of fill) */\nconst highlightHeight = Math.floor(fillHeight / 2);\n\n// ====================\n// Reactive HP values\n// ====================\n\n/** Gets hitbox dimensions for positioning */\nconst hitbox = object.hitbox;\n\n/**\n * Gets the current HP value from the player object\n * Uses hpSignal which is synchronized from the server\n */\nconst currentHp = computed(() => {\n  return object.hpSignal?.() ?? 0;\n});\n\n/**\n * Gets the maximum HP value from player parameters\n * Reads from _param.maxHp which contains calculated stats\n */\nconst maxHp = computed(() => {\n  const params = object._param?.() ?? {};\n  return params.maxHp ?? 100;\n});\n\n/**\n * Calculates HP percentage (0 to 1)\n */\nconst hpPercent = computed(() => {\n  const max = maxHp();\n  if (max <= 0) return 0;\n  const percent = currentHp() / max;\n  return Math.max(0, Math.min(1, percent));\n});\n\n// ====================\n// Animated values\n// ====================\n\n/**\n * Animated percentage for smooth bar transitions\n */\nconst animatedPercent = animatedSignal(hpPercent(), {\n  duration: 300,\n  easing: 'easeOutCubic'\n});\n\n// Update animated value when HP changes\neffect(() => {\n  const newPercent = hpPercent();\n  animatedPercent.set(newPercent);\n});\n\n// ====================\n// Visual calculations\n// ====================\n\n/**\n * Position of the bar relative to the sprite\n */\nconst position = computed(() => ({\n  x: (hitbox().w / 2) - (barWidth / 2),\n  y: -barHeight - 8\n}));\n\n/**\n * Current width of the HP fill based on animated percentage\n */\nconst fillWidth = computed(() => {\n  const percent = animatedPercent();\n  const width = maxFillWidth * percent;\n  // Ensure minimum visible width when HP > 0\n  if (percent > 0 && width < innerRadius * 2) {\n    return innerRadius * 2;\n  }\n  return Math.max(0, width);\n});\n\n/**\n * Determines HP bar color based on current HP percentage\n * Returns hex color number for PixiJS\n * \n * ## Color Thresholds\n * - Green (0x4ade80): HP > 60% - Healthy\n * - Yellow (0xfacc15): HP 30-60% - Caution\n * - Orange (0xfb923c): HP 15-30% - Danger\n * - Red (0xef4444): HP < 15% - Critical\n */\nconst hpColorHex = computed(() => {\n  const percent = hpPercent();\n  \n  if (percent > 0.6) {\n    return 0x4ade80; // Green - healthy\n  } else if (percent > 0.3) {\n    return 0xfacc15; // Yellow - caution\n  } else if (percent > 0.15) {\n    return 0xfb923c; // Orange - danger\n  } else {\n    return 0xef4444; // Red - critical\n  }\n});\n\n// ====================\n// Drawing functions\n// ====================\n\n/**\n * Draws the shadow behind the HP bar for depth effect\n */\nconst drawShadow = (g) => {\n  g.roundRect(0, 0, barWidth, barHeight, borderRadius);\n  g.fill({ color: shadowColor, alpha: 0.3 });\n};\n\n/**\n * Draws the main background of the HP bar\n */\nconst drawBackground = (g) => {\n  g.roundRect(0, 0, barWidth, barHeight, borderRadius);\n  g.fill({ color: bgColor, alpha: 0.9 });\n};\n\n/**\n * Draws the HP fill bar with dynamic color\n */\nconst drawFill = (g) => {\n  const width = fillWidth();\n  if (width > 0) {\n    g.roundRect(padding, padding, width, fillHeight, innerRadius);\n    g.fill({ color: hpColorHex() });\n  }\n};\n\n/**\n * Draws the highlight overlay for 3D effect\n */\nconst drawHighlight = (g) => {\n  const width = fillWidth();\n  if (width > 0) {\n    g.roundRect(padding, padding, width, highlightHeight, innerRadius);\n    g.fill({ color: 0xffffff, alpha: 0.25 });\n  }\n};\n\n/**\n * Draws the border frame around the HP bar\n * \n * Uses PixiJS Graphics API to create a rounded rectangle stroke\n * that serves as a visual border for the bar.\n * \n * @param g - PixiJS Graphics object\n * \n * @example\n * ```html\n * <Graphics draw={drawBorder} />\n * ```\n */\nconst drawBorder = (g) => {\n  g.roundRect(0, 0, barWidth, barHeight, borderRadius);\n  g.stroke({ \n    color: borderColor, \n    width: 1,\n    alpha: 0.7\n  });\n};\n</script>\n"],"mappings":";;AAOC,SAAA,UAAA,SAAA;AACsB,UAAC,QAAY;CAEhC,IAAQ,SADgB,eAAe,QAAC,EACV,CAAC;CACnC,IAAI,WAAS;CACb,IAAI,YAAY;CAChB,IAAC,eAAA;CACD,IAAG,cAAA;CACH,IAAI,UAAC;CACL,IAAE,UAAY;CACd,IAAC,cAAA;CACD,IAAI,cAAW;CACf,IAAE,eAAe,WAAa,UAAW;CACzC,IAAI,aAAQ,YAAA,UAAA;CACZ,IAAI,kBAAE,KAAoB,MAAK,aAAA,EAAA;CAC/B,IAAI,SAAA,OAAA;CACJ,IAAG,YAAA,SAAA,WAAA;EACC,IAAA,IAAA;AACF,UAAA,MAAA,KAAA,OAAA,cAAA,QAAA,OAAA,KAAA,IAAA,KAAA,IAAA,GAAA,KAAA,OAAA,MAAA,QAAA,OAAA,KAAA,IAAA,KAAA;;CAEF,IAAC,QAAW,SAAE,WAAe;EACzB,IAAG,IAAA,IAAA;AAEN,UAAA,OADiB,MAAA,KAAW,OAAO,YAAO,QAAA,OAAA,KAAA,IAAA,KAAA,IAAA,GAAA,KAAA,OAAA,MAAA,QAAA,OAAA,KAAA,IAAA,KAAA,EAAA,EAC1C,WAAA,QAAA,OAAA,KAAA,IAAA,KAAA;GACC;CACF,IAAG,YAAa,SAAE,WAAiB;EAClC,IAAA,MAAA,OAAA;AACG,MAAG,OAAQ,EACZ,QAAS;EACX,IAAA,UAAA,WAAA,GAAA;AACG,SAAG,KAAS,IAAC,GAAA,KAAW,IAAI,GAAA,QAAS,CAAA;GACvC;CACF,IAAC,kBAAA,eAAA,WAAA,EAAA;EACG,UAAU;EACX,QAAS;EACX,CAAC;;EAED,IAAM,aAAA,WAAA;AACP,kBAAmB,IAAA,WAAgB;;CAEnC,IAAA,WAAe,SAAI,WAAa;AAAA,SAAA;;GAE5B,GAAG,CAAC,YAAY;GACnB;GAAE;CACH,IAAI,YAAY,SAAM,WAAA;;EAElB,IAAA,QAAY,eAAc;6CAG1B,QAAM,cAAiB;;GAGzB;CACF,IAAA,aAAM,SAAgB,WAAA;;AAElB,MAAA,UAAa,GACX,QAAA;WAEM,UAAQ,GACd,QAAS;WAEX,UAAkB,IAChB,QAAS;MAGT,QAAA;GAEJ;CACF,IAAA,aAAiB,SAAG,GAAQ;;AAExB,IAAE,KAAK;GAAE,OAAO;GAAE,OAAA;GAAA,CAAA;;CAEtB,IAAI,iBAAiB,SAAC,GAAA;;AAElB,IAAA,KAAO;GAAC,OAAK;GAAO,OAAA;GAAA,CAAA;;;EAGpB,IAAI,QAAQ,WAAC;AACjB,MAAM,QAAU,GAAG;;AAEf,KAAA,KAAU,EAAA,OAAQ,YAAc,EAAC,CAAA;;;CAGrC,IAAI,gBAAgB,SAAE,GAAA;EACnB,IAAA,QAAY,WAAA;AACX,MAAI,QAAQ,GAAG;;AAEX,KAAC,KAAM;IAAC,OAAA;IAAe,OAAA;IAAa,CAAA;;;CAG5C,IAAE,aAAA,SAAA,GAAA;AACC,IAAA,UAAS,GAAO,GAAG,UAAO,WAAS,aAAO;AAC1C,IAAA,OAAK;GACN,OAAA;GACI,OAAS;GACP,OAAO;GACb,CAAA;;AAGM,QADN,GAAA,EAAA,WAAA;EAAA,GAAA,SAAA;EAAA,GAAA,SAAA;EAAA,EAAA;EAAA,EAAA,UAAA;GAAA,MAAA;GAAA,GAAA;GAAA,GAAA;GAAA,CAAA;EAAA,EAAA,UAAA,EAAA,MAAA,gBAAA,CAAA;EAAA,EAAA,UAAA,EAAA,MAAA,UAAA,CAAA;EAAA,EAAA,UAAA,EAAA,MAAA,eAAA,CAAA;EAAA,EAAA,UAAA,EAAA,MAAA,YAAA,CAAA;EAAA,CAAA,CAAA"}
+{"version":3,"file":"hp-bar.ce.js","names":[],"sources":["../../../src/components/prebuilt/hp-bar.ce"],"sourcesContent":["<!-- \n  HP Bar Component\n  \n  A beautiful, animated health bar component for displaying player HP above sprites.\n  Features a gradient color based on HP level, smooth animations, and modern styling.\n  \n  ## Design\n  \n  The bar changes color dynamically based on HP percentage:\n  - Green (#4ade80) when HP > 60% - Healthy state\n  - Yellow (#facc15) when HP 30-60% - Caution state  \n  - Orange (#fb923c) when HP 15-30% - Danger state\n  - Red (#ef4444) when HP < 15% - Critical state\n  \n  @example\n  ```ts\n  import HpBar from './hp-bar.ce';\n  \n  // In module configuration\n  export default defineModule<RpgClient>({\n    sprite: {\n      componentsInFront: [HpBar]\n    }\n  })\n  ```\n-->\n\n<Container x={position.x} y={position.y}>\n  <!-- Background shadow for depth effect -->\n  <Graphics draw={drawShadow} x={1} y={1} />\n  \n  <!-- Main background -->\n  <Graphics draw={drawBackground} />\n  \n  <!-- HP fill bar -->\n  <Graphics draw={drawFill} />\n  \n  <!-- Highlight overlay for 3D effect -->\n  <Graphics draw={drawHighlight} />\n  \n  <!-- Border frame -->\n  <Graphics draw={drawBorder} />\n</Container>\n\n<script>\nimport { computed, animatedSignal, effect } from \"canvasengine\";\n\nconst { object } = defineProps();\nconst sprite = object();\n\n// ====================\n// Configuration\n// ====================\n\n/** Total width of the HP bar in pixels */\nconst barWidth = 50;\n\n/** Total height of the HP bar in pixels */\nconst barHeight = 8;\n\n/** Border radius for rounded corners */\nconst borderRadius = 4;\n\n/** Inner border radius for the fill bar */\nconst innerRadius = 3;\n\n/** Padding between background and fill */\nconst padding = 1;\n\n/** Background color (dark theme) */\nconst bgColor = 0x16213e;\n\n/** Shadow color */\nconst shadowColor = 0x000000;\n\n/** Border color */\nconst borderColor = 0x4a5568;\n\n// ====================\n// Calculated dimensions\n// ====================\n\n/** Maximum fill width */\nconst maxFillWidth = barWidth - (padding * 2);\n\n/** Fill height */\nconst fillHeight = barHeight - (padding * 2);\n\n/** Highlight height (half of fill) */\nconst highlightHeight = Math.floor(fillHeight / 2);\n\n// ====================\n// Reactive HP values\n// ====================\n\n/** Gets hitbox dimensions for positioning */\nconst hitbox = sprite.hitbox;\n\n/**\n * Gets the current HP value from the player object\n * Uses hpSignal which is synchronized from the server\n */\nconst currentHp = computed(() => {\n  return sprite.hpSignal?.() ?? 0;\n});\n\n/**\n * Gets the maximum HP value from player parameters\n * Reads from _param.maxHp which contains calculated stats\n */\nconst maxHp = computed(() => {\n  const params = sprite._param?.() ?? {};\n  return params.maxHp ?? 100;\n});\n\n/**\n * Calculates HP percentage (0 to 1)\n */\nconst hpPercent = computed(() => {\n  const max = maxHp();\n  if (max <= 0) return 0;\n  const percent = currentHp() / max;\n  return Math.max(0, Math.min(1, percent));\n});\n\n// ====================\n// Animated values\n// ====================\n\n/**\n * Animated percentage for smooth bar transitions\n */\nconst animatedPercent = animatedSignal(hpPercent(), {\n  duration: 300,\n  easing: 'easeOutCubic'\n});\n\n// Update animated value when HP changes\neffect(() => {\n  const newPercent = hpPercent();\n  animatedPercent.set(newPercent);\n});\n\n// ====================\n// Visual calculations\n// ====================\n\n/**\n * Position of the bar relative to the sprite\n */\nconst position = computed(() => ({\n  x: (hitbox().w / 2) - (barWidth / 2),\n  y: -barHeight - 8\n}));\n\n/**\n * Current width of the HP fill based on animated percentage\n */\nconst fillWidth = computed(() => {\n  const percent = animatedPercent();\n  const width = maxFillWidth * percent;\n  // Ensure minimum visible width when HP > 0\n  if (percent > 0 && width < innerRadius * 2) {\n    return innerRadius * 2;\n  }\n  return Math.max(0, width);\n});\n\n/**\n * Determines HP bar color based on current HP percentage\n * Returns hex color number for PixiJS\n * \n * ## Color Thresholds\n * - Green (0x4ade80): HP > 60% - Healthy\n * - Yellow (0xfacc15): HP 30-60% - Caution\n * - Orange (0xfb923c): HP 15-30% - Danger\n * - Red (0xef4444): HP < 15% - Critical\n */\nconst hpColorHex = computed(() => {\n  const percent = hpPercent();\n  \n  if (percent > 0.6) {\n    return 0x4ade80; // Green - healthy\n  } else if (percent > 0.3) {\n    return 0xfacc15; // Yellow - caution\n  } else if (percent > 0.15) {\n    return 0xfb923c; // Orange - danger\n  } else {\n    return 0xef4444; // Red - critical\n  }\n});\n\n// ====================\n// Drawing functions\n// ====================\n\n/**\n * Draws the shadow behind the HP bar for depth effect\n */\nconst drawShadow = (g) => {\n  g.roundRect(0, 0, barWidth, barHeight, borderRadius);\n  g.fill({ color: shadowColor, alpha: 0.3 });\n};\n\n/**\n * Draws the main background of the HP bar\n */\nconst drawBackground = (g) => {\n  g.roundRect(0, 0, barWidth, barHeight, borderRadius);\n  g.fill({ color: bgColor, alpha: 0.9 });\n};\n\n/**\n * Draws the HP fill bar with dynamic color\n */\nconst drawFill = (g) => {\n  const width = fillWidth();\n  if (width > 0) {\n    g.roundRect(padding, padding, width, fillHeight, innerRadius);\n    g.fill({ color: hpColorHex() });\n  }\n};\n\n/**\n * Draws the highlight overlay for 3D effect\n */\nconst drawHighlight = (g) => {\n  const width = fillWidth();\n  if (width > 0) {\n    g.roundRect(padding, padding, width, highlightHeight, innerRadius);\n    g.fill({ color: 0xffffff, alpha: 0.25 });\n  }\n};\n\n/**\n * Draws the border frame around the HP bar\n * \n * Uses PixiJS Graphics API to create a rounded rectangle stroke\n * that serves as a visual border for the bar.\n * \n * @param g - PixiJS Graphics object\n * \n * @example\n * ```html\n * <Graphics draw={drawBorder} />\n * ```\n */\nconst drawBorder = (g) => {\n  g.roundRect(0, 0, barWidth, barHeight, borderRadius);\n  g.stroke({ \n    color: borderColor, \n    width: 1,\n    alpha: 0.7\n  });\n};\n</script>\n"],"mappings":";;AAOC,SAAA,UAAA,SAAA;CACsB,SAAC,OAAY;CAChC,MAAQ,cAAgB,eAAe,OAAC;CAChB,eAAU,OAAQ;CAC1C,MAAS,EAAA,WAAa,YAAY;CACtC,MAAI,SAAM,OAAY;CACtB,MAAC,WAAA;CACD,MAAG,YAAA;CACH,MAAK,eAAA;CACL,MAAE,cAAkB;CACpB,MAAC,UAAA;CACD,MAAK,UAAU;CACf,MAAE,cAAe;CACjB,MAAI,cAAQ;CACZ,MAAM,eAAA,WAAyB,UAAA;CAC/B,MAAI,aAAA,YAAA,UAAA;CACJ,MAAG,kBAAA,KAAA,MAAA,aAAA,CAAA;CACH,MAAI,SAAA,OAAA;CACJ,MAAE,YAAA,eAAA;;CAEF,CAAC;CACD,MAAM,QAAC,eAAsB;EAE5B,QADiB,OAAA,SAAiB,KAAK,CAAC,GACxC,SAAA;CACD,CAAC;CACD,MAAG,YAAe,eAAe;EAChC,MAAA,MAAA,MAAA;EACG,IAAG,OAAQ,GACZ,OAAS;EACX,MAAA,UAAA,UAAA,IAAA;EACG,OAAG,KAAS,IAAC,GAAA,KAAW,IAAI,GAAA,OAAS,CAAA;CACzC,CAAC;CACD,MAAC,kBAAA,eAAA,UAAA,GAAA;EACG,UAAU;EACX,QAAS;CACZ,CAAC;;EAEA,MAAM,aAAA,UAAA;EACP,gBAAmB,IAAA,UAAe;;CAElC,MAAM,WAAW,gBAAe;EAChC,GAAM,OAAS,EAAA,IAAM,IAAE,WAAA;;CAEvB,EAAE;CACF,MAAG,YAAA,eAAA;EACC,MAAM,UAAU,gBAAE;;EAGtB,IAAM,UAAW,KAAE,QAAA,cAAA,GAAA,OAAA,cAAA;EAGnB,OAAM,KAAU,IAAG,GAAA,KAAA;;CAEnB,MAAI,aAAc,eAAY;EAC9B,MAAM,UAAc,UAAE;oBAElB,OAAM;yBAGN,OAAQ;0BAGR,OAAW;OAGX,OAAO;;CAGX,MAAI,cAAc,MAAA;EAClB,EAAM,UAAA,GAAa,GAAC,UAAQ,WAAA,YAAA;;;;;CAE5B;CACA,MAAG,kBAAW,MAAA;EACV,EAAE,UAAU,GAAG,GAAG,UAAA,WAAA,YAAA;;;;;CAEtB;CACA,MAAM,YAAY,MAAG;;EAEjB,IAAI,QAAQ,GAAC;GACX,EAAA,UAAa,SAAU,SAAG,OAAY,YAAA,WAAA;;EAExC;CACJ;;EAEI,MAAM,QAAQ,UAAI;EACnB,IAAA,QAAY,GAAA;GACP,EAAE,UAAU,SAAE,SAAA,OAAA,iBAAA,WAAA;;;;;EAElB;CACJ;;EAEE,EAAA,UAAA,GAAA,GAAA,UAAA,WAAA,YAAA;EACC,EAAA,OAAS;GACJ,OAAA;GACN,OAAA;GACI,OAAS;EACb,CAAA;CACF;CAEE,OAAA,GAAA,EAAA,WAAA;;;;;;;;;;;;;GAAA;AACC;AAED,IAAA,iBAAA"}