@rpgjs/client 5.0.0-beta.6 → 5.0.0-beta.8

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":";;;;;;AAUE,SAAY,UAAM,SAAA;CACD,SAAA,QAAA;CAEX,MAAM,EAAC,QAAA,UAAc,kBAD7B,eAAA,QAC6B,CAAA,EACzB,UAAC,EACC,SAAW,OACZ,EACJ,CAAC;CACF,MAAM,SAAA,OAAe,gBAAG;CACxB,MAAM,mCAAgB,IAAM,KAAA;CAC5B,MAAM,eAAY,eAAM,YAAA,IAAA,MAAA;CACxB,MAAM,kBAAiB,eAAM;EACzB,QAAA,cAAA,EAAA;GACG,KAAK,UACH,OAAA,OAAA,oBAAA;GACD,KAAE,UACA,OAAQ,OAAM,oBAAM;GACtB,KAAE,QACA,OAAA,OAAgB,kBAAM;GACxB,KAAE,SACF,OAAA,OAAA,mBAAA;GAEA,SACF,OAAA,OAAA,iBAAA;;GAEJ;CACF,MAAE,gBAAS,eAAA;;EAEV,IAAM,CAAA,OACC,OAAC;GAAQ,YAAS,EAAA;GAAA,QAAa,EAAA;GAAA;EAEvC,IAAQ,OAAO,UAAU,UACjB,OAAC;EAEP,IAAA;GACA,OAAA,KAAgB,MAAA,MAAA;WAEhB,OAAc;GACd,IAAA,OAAA,YAAA,eAAA,QAAA,IAAA,aAAA,cACQ,QAAO,KAAA,mDAAiB,MAAA;GAE1B,OAAO;IAAC,YAAU,EAAA;IAAA,QAAe,EAAE;IAAC;;GAE1C;CACF,MAAE,SAAA,eAAA,eAAA,EAAA,UAAA,EAAA,CAAA;CACF,MAAE,OAAA,eAAA,eAAA,EAAA,cAAA,EAAA,CAAA;;CAEF,MAAM,YAAS,OAAO,WAAA,MAAgB;EACtC,MAAM,WAAA,oBAA4B,OAAA,OAAA;;EAElC,OAAM,OAAY,SAAG,IAAU,GAAG,MAAE;;CAEpC,MAAM,qBAAkB,OAAU,QAAK,EAAA,KAAA;EACrC,MAAQ,OAAA,OAAc,oBAAE,SAAA,IAAA,OAAA,IAAA,GAAA;EACtB,MAAM,WAAO,SAAA,MAAA,UAAA,GAAA;EACb,OAAE,KAAO,IAAO,GAAA,KAAA,KAAA,KAAkB,SAAE,WAAA,GAAA,CAAA;;CAExC,MAAM,aAAa,eAAC;EAChB,OAAM,MAAK,CAAA,KAAA,QAAA;GACT,MAAO,QAAO,IAAA,KAAA,eAAkB;IAC5B,MAAM,YAAA,sBAAA,YAAA;KAAA;KAAA;KAAA,CAAA;IACJ,OAAO;KACL;KACH,OAAA,UAAA;KACE,QAAO,UAAc;KAChC;KACA;;IAEI;IACE,OAAQ,MAAA,QAAiB,KAAA,SAAA,MAAA,KAAA,OAAA,EAAA;IACrB,QAAE,MAAA,QAAA,KAAA,SAAA,KAAA,IAAA,KAAA,KAAA,OAAA,EAAA,EAAA;IACV;IACF;;CAEF,MAAM,MAAM,gBAAY;EACpB,KAAA,SAAY,QAAA,CAAA,UAAA,QAAA,CAAA,KAAA,EAAA;EACd,QAAA,SAAA,QAAA,CAAA,aAAA,QAAA,CAAA,KAAA,EAAA;;CAEF,MAAM,iBAAA,eAAA;EACF,MAAM,MAAM,QAAM;EAClB,MAAM,QAAQ,KAAA,KAAA;EACd,MAAI,SAAO,KAAS,KAAI;EACxB,OAAE;GACF,MAAA;GACA,KAAS;GACX,OAAA;GACA,QAAA;;GAEI;GACA,SAAO,QAAY;GACnB,SAAS,SAAO;;GAEtB;CACA,MAAE,SAAM,eAAW;EAEjB,QADmB,OAAa,kBAAW,aAAW,eAAoB,GAAA,KAAA,MAC/C,gBAAS;GACrC;;EAED,MAAM,MAAA,QAAkB,IAAG;GAAA,GAAM;GAAC,GAAK;GAAG;EACxC,MAAM,UAAO,QAAO;EACpB,OAAM,iBAAoB;GACpB,UAAU,cAAa;GAC9B,QAAA,QAAA;;GAEK,KAAA,KAAY;GACV;GACJ,QAAY;GACX,CAAC;GACJ;CACF,MAAM,gBAAY,eAAA;EACd,MAAI,MAAO,QAAS,IAAC;GAAK,GAAA;GAAA,GAAA;GAAA;EAC1B,MAAI,UAAQ,QAAU;EACtB,OAAG,qBAAA;GACD,UAAA,cAAA;;GAEF,QAAO,QAAA;GACL;GACA,QAAO;GACR,CAAC;GACJ;CACF,MAAI,wBAAA,OAAA;EACF,IAAA,CAAA,MAAA,iBAAA,IAAA,GAAA,EAAA;EAEF,IAAM,OAAM,YAAe,eAAA,QAAA,IAAA,aAAC,cACrB;EACL,iBAAiB,IAAM,GAAG;EACzB,QAAA,KAAA,oCAAA,GAAA,oCAAA;;CAEH,MAAM,eAAe,eAAe;EAClC,OAAS,YAAW,CAAA,KAAA,QAAA;GACd,MAAM,UAAU,EAAE;GAClB,IAAA,MAAS,SAAU,SAAC;;IAEnB,MAAA,KAAA,eAAA,WAAA;IACE,MAAA,YAAA,OAAA,mBAAA,GAAA;IACD,IAAA,CAAA,WAAA;KACM,qBAAA,GAAA;KACJ;;IAEF,QAAA,KAAA;KACG;KACA,OAAS,oBAAA,kBAAA,WAAA,EAAA,OAAA;KACnB,OAAA,KAAA;KACD,QAAA,KAAA;;KAEI;GACE,OAAA;IACC,QAAA,IAAe;IACtB;;IAEI;GACJ;CAEM,OADU,EAAA,WAAQ;EAAA,GAAA,eAAA,eAAA,CAAA,EAAA;EAAA,GAAA,eAAA,eAAA,CAAA,EAAA;EAAA,OAAA,eAAA,WAAA,CAAA,MAAA;EAAA,QAAA,eAAA,WAAA,CAAA,OAAA;EAAA,UAAA,eAAA,WAAA,CAAA,MAAA;EAAA,WAAA,eAAA,WAAA,CAAA,OAAA;EAAA,SAAA;EAAA,eAAA;EAAA,gBAAA;EAAA,YAAA;EAAA,QAAA,eAAA,KAAA,CAAA,IAAA;EAAA,EAAA,KAAA,eAAA,QAAA,EAAA,WAAA;EAAA,OAAA;EAAA,QAAA,IAAA;EAAA,SAAA;EAAA,eAAA;EAAA,gBAAA;EAAA,YAAA;EAAA,WAAA,eAAA,KAAA,CAAA,OAAA;EAAA,EAAA,KAAA,IAAA,UAAA,UAAA,EAAA,WAAA;EAAA,OAAA,MAAA;EAAA,QAAA,MAAA;EAAA,SAAA;EAAA,gBAAA;EAAA,YAAA;EAAA,EAAA,EAAA,MAAA,WAAA;EAAA;EAAA,GAAA,MAAA;EAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CACjB;;AAGL,IAAA,iBAEA"}

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,MAAS,EAAA,WADe,eAAe,QACL,EAAA;CACtC,MAAI,WAAS;CACb,MAAI,YAAc;CAClB,MAAC,eAAA;CACD,MAAG,cAAA;CACH,MAAK,UAAA;CACL,MAAE,UAAa;CACf,MAAC,cAAA;CACD,MAAK,cAAU;CACf,MAAE,eAAe,WAAa,UAAW;CACzC,MAAI,aAAQ,YAAA,UAAA;CACZ,MAAM,kBAAkB,KAAE,MAAK,aAAA,EAAA;CAC/B,MAAI,SAAA,OAAA;CACJ,MAAG,YAAA,eAAA;AACC,SAAA,OAAA,YAAA,IAAA;GACF;;AAGE,UADU,OAAY,UAAG,IAAW,EAAA,EACtB,SAAO;GACvB;CACF,MAAC,YAAA,eAAA;EACG,MAAG,MAAK,OAAW;AACpB,MAAA,OAAS,EACX,QAAA;EACG,MAAM,UAAU,WAAC,GAAA;AAClB,SAAQ,KAAK,IAAE,GAAA,KAAU,IAAC,GAAA,QAAA,CAAA;GAC5B;CACD,MAAM,kBAAkB,eAAe,WAAE,EAAA;EACtC,UAAS;EACX,QAAA;EACA,CAAC;AACF,cAAY;EACV,MAAA,aAAS,WAAA;;GAEV;CACD,MAAM,WAAW,gBAAgB;;EAEjC,GAAO,CAAC,YAAW;;CAEnB,MAAM,YAAY,eAAI;EACnB,MAAA,UAAA,iBAAA;EACC,MAAM,QAAQ,eAAI;AAElB,MAAA,UAAc,KAAK,QAAO,cAAW,EACnC,QAAS,cAAI;AAEf,SAAM,KAAM,IAAI,GAAG,MAAI;GAC3B;;EAEI,MAAM,UAAQ,WAAY;AAC9B,MAAM,UAAY,GAAA,QAAA;WAGZ,UAAe,GAAA,QAAA;WAGR,UAAI,IAAA,QAAA;;GAMjB;;AAEI,IAAA,UAAY,GAAE,GAAA,UAAA,WAAA,aAAA;AAClB,IAAM,KAAA;GAAA,OAAc;GAAQ,OAAA;GAAA,CAAA;;CAE5B,MAAM,kBAAgB,MAAA;AACnB,IAAA,UAAW,GAAA,GAAA,UAAA,WAAA,aAAA;AACV,IAAE,KAAK;GAAE,OAAO;GAAE,OAAA;GAAA,CAAA;;CAEtB,MAAI,YAAa,MAAO;EACxB,MAAM,QAAY,WAAW;;AAErB,KAAC,UAAQ,SAAA,SAAA,OAAA,YAAA,YAAA;AACX,KAAA,KAAA,EAAW,OAAE,YAAa,EAAA,CAAO;;;CAGvC,MAAM,iBAAiB,MAAM;;AAEzB,MAAI,QAAQ,GAAG;AAChB,KAAA,UAAY,SAAA,SAAA,OAAA,iBAAA,YAAA;AACP,KAAE,KAAK;IAAE,OAAK;IAAA,OAAA;IAAA,CAAA;;;CAGtB,MAAM,cAAS,MAAO;;AAEpB,IAAA,OAAA;GACM,OAAI;GACJ,OAAA;GACN,OAAA;GACG,CAAC;;WAEJ,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;;AAIC,IAAM,iBAEH"}
+{"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;CACsB,SAAC,QAAY;CAEhC,MAAS,EAAA,WADe,eAAe,QACL,EAAA;CACtC,MAAI,WAAS;CACb,MAAI,YAAc;CAClB,MAAC,eAAA;CACD,MAAG,cAAA;CACH,MAAK,UAAA;CACL,MAAE,UAAa;CACf,MAAC,cAAA;CACD,MAAK,cAAU;CACf,MAAE,eAAe,WAAa,UAAW;CACzC,MAAI,aAAQ,YAAA,UAAA;CACZ,MAAM,kBAAkB,KAAE,MAAK,aAAA,EAAA;CAC/B,MAAI,SAAA,OAAA;CACJ,MAAG,YAAA,eAAA;EACC,OAAA,OAAA,YAAA,IAAA;GACF;;EAGE,QADU,OAAY,UAAG,IAAW,EAAA,EACtB,SAAO;GACvB;CACF,MAAC,YAAA,eAAA;EACG,MAAG,MAAK,OAAW;EACpB,IAAA,OAAS,GACX,OAAA;EACG,MAAM,UAAU,WAAC,GAAA;EAClB,OAAQ,KAAK,IAAE,GAAA,KAAU,IAAC,GAAA,QAAA,CAAA;GAC5B;CACD,MAAM,kBAAkB,eAAe,WAAE,EAAA;EACtC,UAAS;EACX,QAAA;EACA,CAAC;CACF,aAAY;EACV,MAAA,aAAS,WAAA;;GAEV;CACD,MAAM,WAAW,gBAAgB;;EAEjC,GAAO,CAAC,YAAW;;CAEnB,MAAM,YAAY,eAAI;EACnB,MAAA,UAAA,iBAAA;EACC,MAAM,QAAQ,eAAI;EAElB,IAAA,UAAc,KAAK,QAAO,cAAW,GACnC,OAAS,cAAI;EAEf,OAAM,KAAM,IAAI,GAAG,MAAI;GAC3B;;EAEI,MAAM,UAAQ,WAAY;EAC9B,IAAM,UAAY,IAAA,OAAA;OAGZ,IAAA,UAAe,IAAA,OAAA;OAGf,IAAO,UAAI,KAAA,OAAA;;GAMjB;;EAEI,EAAA,UAAY,GAAE,GAAA,UAAA,WAAA,aAAA;EAClB,EAAM,KAAA;GAAA,OAAc;GAAQ,OAAA;GAAA,CAAA;;CAE5B,MAAM,kBAAgB,MAAA;EACnB,EAAA,UAAW,GAAA,GAAA,UAAA,WAAA,aAAA;EACV,EAAE,KAAK;GAAE,OAAO;GAAE,OAAA;GAAA,CAAA;;CAEtB,MAAI,YAAa,MAAO;EACxB,MAAM,QAAY,WAAW;;GAErB,EAAC,UAAQ,SAAA,SAAA,OAAA,YAAA,YAAA;GACX,EAAA,KAAA,EAAW,OAAE,YAAa,EAAA,CAAO;;;CAGvC,MAAM,iBAAiB,MAAM;;EAEzB,IAAI,QAAQ,GAAG;GAChB,EAAA,UAAY,SAAA,SAAA,OAAA,iBAAA,YAAA;GACP,EAAE,KAAK;IAAE,OAAK;IAAA,OAAA;IAAA,CAAA;;;CAGtB,MAAM,cAAS,MAAO;;EAEpB,EAAA,OAAA;GACM,OAAI;GACJ,OAAA;GACN,OAAA;GACG,CAAC;;WAEJ,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;;AAIC,IAAM,iBAEH"}

package/dist/components/prebuilt/light-halo.ce.js.map

@@ -1 +1 @@
-{"version":3,"file":"light-halo.ce.js","names":[],"sources":["../../../src/components/prebuilt/light-halo.ce"],"sourcesContent":["<Container x={position.x} y={position.y}>\n  <Graphics draw={drawHalo}  />\n</Container>\n\n<script>\nimport { computed, signal, tick, mount } from \"canvasengine\";\nimport { BlurFilter } from \"pixi.js\";\n\n/**\n * Component props for LightHalo\n * \n * All props are signals (even static ones) and must be read with `()`.\n * Props are optional and will use default values if not provided.\n * \n * @property {Object} object - The sprite object (required)\n * @property {number|Signal<number>} [baseRadius] - Base radius of the light halo in pixels (default: 30)\n * @property {number|Signal<number>} [radiusVariation] - Radius variation range (halo will pulse between baseRadius ± radiusVariation) (default: 10)\n * @property {number|Signal<number>} [baseOpacity] - Base opacity of the light halo (0 to 1) (default: 0.6)\n * @property {number|Signal<number>} [opacityVariation] - Opacity variation range (halo will fade between baseOpacity ± opacityVariation) (default: 0.3)\n * @property {number|Signal<number>} [sizeSpeed] - Animation speed for size pulsing (higher = faster) (default: 0.002)\n * @property {number|Signal<number>} [opacitySpeed] - Animation speed for opacity fading (higher = faster) (default: 0.003)\n * @property {number|Signal<number>} [lightColor] - Color of the light halo (hex value, warm yellow-white by default: 0xffffaa)\n */\nconst { \n  object, \n  baseRadius,\n  radiusVariation,\n  baseOpacity,\n  opacityVariation,\n  sizeSpeed,\n  opacitySpeed,\n  lightColor\n} = defineProps();\n\n// ====================\n// Props with default values\n// ====================\n\nconst getBaseRadius = computed(() => baseRadius?.() ?? 30);\nconst getRadiusVariation = computed(() => radiusVariation?.() ?? 10);\nconst getBaseOpacity = computed(() => baseOpacity?.() ?? 0.6);\nconst getOpacityVariation = computed(() => opacityVariation?.() ?? 0.3);\nconst getSizeSpeed = computed(() => sizeSpeed?.() ?? 0.002);\nconst getOpacitySpeed = computed(() => opacitySpeed?.() ?? 0.003);\nconst getLightColor = computed(() => lightColor?.() ?? 0xffffaa);\n\n// ====================\n// Animation state\n// ====================\n\n/** Time counter for animations */\nconst time = signal(0);\n\n/**\n * Current radius of the halo with pulsing animation\n * Uses multiple sine waves for more organic movement\n */\nconst currentRadius = computed(() => {\n  const t = time();\n  const base = getBaseRadius();\n  const variation = getRadiusVariation();\n  const speed = getSizeSpeed();\n  \n  // Combine two sine waves for less predictable pulsing\n  const pulse1 = Math.sin(t * speed);\n  const pulse2 = Math.sin(t * speed * 1.5) * 0.5;\n  const combinedPulse = (pulse1 + pulse2) / 1.5;\n  \n  return base + (combinedPulse * variation);\n});\n\n/**\n * Current opacity of the halo with fading animation\n * Includes a subtle flicker effect\n */\nconst currentOpacity = computed(() => {\n  const t = time();\n  const base = getBaseOpacity();\n  const variation = getOpacityVariation();\n  const speed = getOpacitySpeed();\n  \n  // Main breathing cycle\n  const fade = Math.sin(t * speed);\n  \n  // Subtle high-frequency flicker (candle-like)\n  const flicker = (Math.random() - 0.5) * 0.1;\n  \n  return Math.max(0, Math.min(1, base + (fade * variation) + flicker));\n});\n\n// ====================\n// Position calculations\n// ====================\n\nconst hitbox = object.hitbox;\n\nconst position = computed(() => ({\n  x: hitbox().w / 2,\n  y: hitbox().h / 2\n}));\n\n// ====================\n// Drawing function\n// ====================\n\n// Create filters once to avoid recreation on every frame\nconst blurFilter = new BlurFilter({ strength: 20, quality: 3 });\n\n/**\n * Draws the light halo effect with realistic diffusion\n */\nconst drawHalo = (g) => {\n  const radius = currentRadius();\n  const opacity = currentOpacity();\n  const color = getLightColor();\n  \n  if (opacity <= 0 || radius <= 0) return;\n\n  // Set blend mode to ADD for glowing light effect\n  g.blendMode = 'add';\n  \n  // Apply blur filter for soft light diffusion\n  g.filters = [blurFilter];\n  \n  // Draw main light source\n  // The blur filter will spread this out into a nice gradient\n  g.circle(0, 0, radius);\n  g.fill({ \n    color: color, \n    alpha: opacity \n  });\n  \n  // Draw a smaller, brighter core\n  g.circle(0, 0, radius * 0.4);\n  g.fill({ \n    color: 0xffffff, \n    alpha: opacity * 0.5 \n  });\n};\n\n// ====================\n// Animation loop\n// ====================\ntick(() => {\n  time.update(t => t + 1);\n});\n</script>\n\n"],"mappings":";;;AAQE,SAAA,UAAA,SAAA;AACqB,UAAA,QAAA;CAEhB,MAAM,EAAG,QAAQ,YAAO,iBAAsB,aAAa,kBAAI,WAAA,cAAA,eADpE,eAAA,QACoE,EAAA;CACtE,MAAG,gBAAmB,eAAa,cAAe,IAAG,GAAI;CACzD,MAAE,qBAAA,eAAA,mBAAA,IAAA,GAAA;CACF,MAAI,iBAAkB,eAAa,eAAe,IAAA,GAAQ;CAC1D,MAAI,sBAAwB,eAAU,oBAAyB,IAAI,GAAI;CACvE,MAAI,eAAiB,eAAe,aAAE,IAAe,KAAI;CACzD,MAAI,kBAAiB,eAAiB,gBAAe,IAAK,KAAO;CACjE,MAAI,gBAAiB,eAAgB,cAAC,IAAiB,SAAG;CAC1D,MAAI,OAAS,OAAO,EAAC;CACrB,MAAI,gBAAiB,eAAgB;EACjC,MAAA,IAAU,MAAM;EAClB,MAAA,OAAA,eAAA;EACF,MAAO,YAAA,oBAAA;EACL,MAAO,QAAA,cAAA;AAKP,SAAS,QAHM,KAAA,IAAA,IAAA,MAEC,GADL,KAAA,IAAA,IAAA,QAAA,IAAA,GAAA,MACK,MACP;GACT;CACF,MAAE,iBAAA,eAAA;EACE,MAAA,IAAA,MAAa;;EAEb,MAAM,YAAY,qBAAA;EACnB,MAAM,QAAK,iBAAQ;;EAItB,MAAM,WAAA,KAAoB,QAAC,GAAU,MAAK;AAC1C,SAAM,KAAA,IAAc,GAAG,KAAA,IAAS,GAAG,OAAG,OAAY,YAAW,QAAA,CAAA;GAC7D;CACA,MAAM,SAAA,OAAe;CACrB,MAAM,WAAA,gBAA2B;EACjC,GAAM,QAAA,CAAA,IAAc;;EAEnB,EAAE;CACH,MAAG,aAAU,IAAA,WAAA;EAAA,UAAA;EAAA,SAAA;EAAA,CAAA;CACb,MAAM,YAAY,MAAI;;EAElB,MAAK,UAAW,gBAAa;EACjC,MAAU,QAAG,eAAS;kCAEpB;AAEC,IAAA,YAAc;AAEjB,IAAM,UAAA,CAAA,WAAgB;AAGpB,IAAA,OAAM,GAAA,GAAW,OAAC;AAClB,IAAA,KAAM;GACP;GACI,OAAQ;GACX,CAAA;AAEA,IAAA,OAAM,GAAA,GAAA,SAAiB,GAAO;AAC/B,IAAA,KAAA;GACO,OAAO;GACb,OAAA,UAAA;;;AAGF,YAAW;AACR,OAAA,QAAW,MAAO,IAAA,EAAA;GACnB;AAEM,QADY,EAAE,WAAW;EAAE,GAAG,SAAA;EAAA,GAAA,SAAA;EAAA,EAAA,EAAA,UAAA,EAAA,MAAA,UAAA,CAAA,CACpB;;AAGhB,IAAM,iBAEE"}
+{"version":3,"file":"light-halo.ce.js","names":[],"sources":["../../../src/components/prebuilt/light-halo.ce"],"sourcesContent":["<Container x={position.x} y={position.y}>\n  <Graphics draw={drawHalo}  />\n</Container>\n\n<script>\nimport { computed, signal, tick, mount } from \"canvasengine\";\nimport { BlurFilter } from \"pixi.js\";\n\n/**\n * Component props for LightHalo\n * \n * All props are signals (even static ones) and must be read with `()`.\n * Props are optional and will use default values if not provided.\n * \n * @property {Object} object - The sprite object (required)\n * @property {number|Signal<number>} [baseRadius] - Base radius of the light halo in pixels (default: 30)\n * @property {number|Signal<number>} [radiusVariation] - Radius variation range (halo will pulse between baseRadius ± radiusVariation) (default: 10)\n * @property {number|Signal<number>} [baseOpacity] - Base opacity of the light halo (0 to 1) (default: 0.6)\n * @property {number|Signal<number>} [opacityVariation] - Opacity variation range (halo will fade between baseOpacity ± opacityVariation) (default: 0.3)\n * @property {number|Signal<number>} [sizeSpeed] - Animation speed for size pulsing (higher = faster) (default: 0.002)\n * @property {number|Signal<number>} [opacitySpeed] - Animation speed for opacity fading (higher = faster) (default: 0.003)\n * @property {number|Signal<number>} [lightColor] - Color of the light halo (hex value, warm yellow-white by default: 0xffffaa)\n */\nconst { \n  object, \n  baseRadius,\n  radiusVariation,\n  baseOpacity,\n  opacityVariation,\n  sizeSpeed,\n  opacitySpeed,\n  lightColor\n} = defineProps();\n\n// ====================\n// Props with default values\n// ====================\n\nconst getBaseRadius = computed(() => baseRadius?.() ?? 30);\nconst getRadiusVariation = computed(() => radiusVariation?.() ?? 10);\nconst getBaseOpacity = computed(() => baseOpacity?.() ?? 0.6);\nconst getOpacityVariation = computed(() => opacityVariation?.() ?? 0.3);\nconst getSizeSpeed = computed(() => sizeSpeed?.() ?? 0.002);\nconst getOpacitySpeed = computed(() => opacitySpeed?.() ?? 0.003);\nconst getLightColor = computed(() => lightColor?.() ?? 0xffffaa);\n\n// ====================\n// Animation state\n// ====================\n\n/** Time counter for animations */\nconst time = signal(0);\n\n/**\n * Current radius of the halo with pulsing animation\n * Uses multiple sine waves for more organic movement\n */\nconst currentRadius = computed(() => {\n  const t = time();\n  const base = getBaseRadius();\n  const variation = getRadiusVariation();\n  const speed = getSizeSpeed();\n  \n  // Combine two sine waves for less predictable pulsing\n  const pulse1 = Math.sin(t * speed);\n  const pulse2 = Math.sin(t * speed * 1.5) * 0.5;\n  const combinedPulse = (pulse1 + pulse2) / 1.5;\n  \n  return base + (combinedPulse * variation);\n});\n\n/**\n * Current opacity of the halo with fading animation\n * Includes a subtle flicker effect\n */\nconst currentOpacity = computed(() => {\n  const t = time();\n  const base = getBaseOpacity();\n  const variation = getOpacityVariation();\n  const speed = getOpacitySpeed();\n  \n  // Main breathing cycle\n  const fade = Math.sin(t * speed);\n  \n  // Subtle high-frequency flicker (candle-like)\n  const flicker = (Math.random() - 0.5) * 0.1;\n  \n  return Math.max(0, Math.min(1, base + (fade * variation) + flicker));\n});\n\n// ====================\n// Position calculations\n// ====================\n\nconst hitbox = object.hitbox;\n\nconst position = computed(() => ({\n  x: hitbox().w / 2,\n  y: hitbox().h / 2\n}));\n\n// ====================\n// Drawing function\n// ====================\n\n// Create filters once to avoid recreation on every frame\nconst blurFilter = new BlurFilter({ strength: 20, quality: 3 });\n\n/**\n * Draws the light halo effect with realistic diffusion\n */\nconst drawHalo = (g) => {\n  const radius = currentRadius();\n  const opacity = currentOpacity();\n  const color = getLightColor();\n  \n  if (opacity <= 0 || radius <= 0) return;\n\n  // Set blend mode to ADD for glowing light effect\n  g.blendMode = 'add';\n  \n  // Apply blur filter for soft light diffusion\n  g.filters = [blurFilter];\n  \n  // Draw main light source\n  // The blur filter will spread this out into a nice gradient\n  g.circle(0, 0, radius);\n  g.fill({ \n    color: color, \n    alpha: opacity \n  });\n  \n  // Draw a smaller, brighter core\n  g.circle(0, 0, radius * 0.4);\n  g.fill({ \n    color: 0xffffff, \n    alpha: opacity * 0.5 \n  });\n};\n\n// ====================\n// Animation loop\n// ====================\ntick(() => {\n  time.update(t => t + 1);\n});\n</script>\n\n"],"mappings":";;;AAQE,SAAA,UAAA,SAAA;CACqB,SAAA,QAAA;CAEhB,MAAM,EAAG,QAAQ,YAAO,iBAAsB,aAAa,kBAAI,WAAA,cAAA,eADpE,eAAA,QACoE,EAAA;CACtE,MAAG,gBAAmB,eAAa,cAAe,IAAG,GAAI;CACzD,MAAE,qBAAA,eAAA,mBAAA,IAAA,GAAA;CACF,MAAI,iBAAkB,eAAa,eAAe,IAAA,GAAQ;CAC1D,MAAI,sBAAwB,eAAU,oBAAyB,IAAI,GAAI;CACvE,MAAI,eAAiB,eAAe,aAAE,IAAe,KAAI;CACzD,MAAI,kBAAiB,eAAiB,gBAAe,IAAK,KAAO;CACjE,MAAI,gBAAiB,eAAgB,cAAC,IAAiB,SAAG;CAC1D,MAAI,OAAS,OAAO,EAAC;CACrB,MAAI,gBAAiB,eAAgB;EACjC,MAAA,IAAU,MAAM;EAClB,MAAA,OAAA,eAAA;EACF,MAAO,YAAA,oBAAA;EACL,MAAO,QAAA,cAAA;EAKP,OAAS,QAHM,KAAA,IAAA,IAAA,MAEC,GADL,KAAA,IAAA,IAAA,QAAA,IAAA,GAAA,MACK,MACP;GACT;CACF,MAAE,iBAAA,eAAA;EACE,MAAA,IAAA,MAAa;;EAEb,MAAM,YAAY,qBAAA;EACnB,MAAM,QAAK,iBAAQ;;EAItB,MAAM,WAAA,KAAoB,QAAC,GAAU,MAAK;EAC1C,OAAM,KAAA,IAAc,GAAG,KAAA,IAAS,GAAG,OAAG,OAAY,YAAW,QAAA,CAAA;GAC7D;CACA,MAAM,SAAA,OAAe;CACrB,MAAM,WAAA,gBAA2B;EACjC,GAAM,QAAA,CAAA,IAAc;;EAEnB,EAAE;CACH,MAAG,aAAU,IAAA,WAAA;EAAA,UAAA;EAAA,SAAA;EAAA,CAAA;CACb,MAAM,YAAY,MAAI;;EAElB,MAAK,UAAW,gBAAa;EACjC,MAAU,QAAG,eAAS;mCAEpB;EAEC,EAAA,YAAc;EAEjB,EAAM,UAAA,CAAA,WAAgB;EAGpB,EAAA,OAAM,GAAA,GAAW,OAAC;EAClB,EAAA,KAAM;GACP;GACI,OAAQ;GACX,CAAA;EAEA,EAAA,OAAM,GAAA,GAAA,SAAiB,GAAO;EAC/B,EAAA,KAAA;GACO,OAAO;GACb,OAAA,UAAA;;;CAGF,WAAW;EACR,KAAA,QAAW,MAAO,IAAA,EAAA;GACnB;CAEM,OADY,EAAE,WAAW;EAAE,GAAG,SAAA;EAAA,GAAA,SAAA;EAAA,EAAA,EAAA,UAAA,EAAA,MAAA,UAAA,CAAA,CACpB;;AAGhB,IAAM,iBAEE"}

package/dist/components/scenes/canvas.ce.js.map

@@ -1 +1 @@
-{"version":3,"file":"canvas.ce.js","names":[],"sources":["../../../src/components/scenes/canvas.ce"],"sourcesContent":["<Canvas width={engine.width} height={engine.height}>\n  <Viewport worldWidth worldHeight clamp sortableChildren={true}>\n    @if (sceneData) {\n      <SceneMap />\n    }\n  </Viewport>\n  @for (gui of guiList) {\n      <Container display=\"flex\">\n        @if (gui.display) {\n          <gui.component data={gui.data} dependencies={gui.dependencies} onFinish={(data) => {\n            onGuiFinish(gui, data)\n          }} onInteraction={(name, data) => {\n            onGuiInteraction(gui, name, data)\n          }} /> \n        }\n      </Container>\n  }\n</Canvas>\n\n<script>\n  import { signal, computed, effect } from \"canvasengine\";\n  import { inject } from \"../../core/inject\";\n  import { RpgClientEngine } from \"../../RpgClientEngine\";\n  import SceneMap from './draw-map.ce'\n  import { RpgGui } from \"../../Gui/Gui\";\n  import { delay } from \"@rpgjs/common\";\n\n  const engine = inject(RpgClientEngine);\n  const guiService = inject(RpgGui);\n  const sceneData = engine.sceneMap.data\n  const guiList = computed(() => {\n    return Object.values(guiService.gui()).filter((gui) => !gui.attachToSprite)\n  })\n  const worldWidth = computed(() => sceneData()?.width)\n  const worldHeight = computed(() => sceneData()?.height)\n\n  effect(() => {\n     if (sceneData() && !sceneData().component) {\n       throw new Error(\"Warning ! You need to define a component for the scene. Use provideLoadMap() to define a component for the scene.\")\n     }\n  })\n\n  const onGuiFinish = (gui, data) => {\n    delay(() => {\n      guiService.guiClose(gui.name, data)\n    })\n  }\n\n  const onGuiInteraction = (gui, name, data) => {\n    guiService.guiInteraction(gui.name, name, data)\n  }\n  \n  const clamp = {\n    direction: \"all\"\n  }\n</script>\n"],"mappings":";;;;;;;AAaM,SAAS,UAAA,SAAA;AACP,UAAA,QAAA;AACS,gBAAA,QAAA;CACf,MAAA,SAAA,OAAA,gBAAA;CACF,MAAE,aAAM,OAAA,OAAA;;CAER,MAAC,UAAM,eAAA;AACL,SAAS,OAAO,OAAC,WAAiB,KAAE,CAAI,CAAC,QAAC,QAAa,CAAA,IAAA,eAAA;GACvD;CACF,MAAE,aAAS,eAAuB,WAAO,EAAA,MAAA;CACzC,MAAE,cAAgB,eAAiB,WAAE,EAAA,OAAA;AACrC,cAAW;AACT,MAAM,WAAW,IAAI,CAAC,WAAQ,CAAA,UAAA,OAAA,IAAA,MAAA,oHAAA;GAG9B;CACF,MAAE,eAAkB,KAAM,SAAS;AACjC,cAAc;AACZ,cAAc,SAAO,IAAA,MAAW,KAAO;IACxC;;CAEH,MAAE,oBAAoB,KAAS,MAAM,SAAS;;;AAWzC,QALF,EAAA,QAAA;EAAA,OAAA,OAAA;EAAA,QAAA,OAAA;EAAA,EAAA,CAAA,EAAA,UAAA;EAAA;EAAA;EAAA,OAAA,EAFC,WAAS,OAEV;EAAA,kBAAA;EAAA,EAAA,KAAA,iBAAA,EAAA,iBAAA,CAAA,CAAA,EAAA,KAAA,UAAA,QAAA,EAAA,WAAA,EAAA,SAAA,QAAA,EAAA,KAAA,IAAA,eAAA,EAAA,IAAA,WAAA;EAAA,MAAA,IAAA;EAAA,cAAA,IAAA;EAAA,WAAA,SAAA;;;EAEK,gBAAoB,MAAO,SAAE;AACzB,oBAAI,KAAA,MAAA,KAAA;;EACV,CAAA,CAAA,CAAU,CAAC,CAAA,CACZ;;AAGH,IAAM,iBAEN"}
+{"version":3,"file":"canvas.ce.js","names":[],"sources":["../../../src/components/scenes/canvas.ce"],"sourcesContent":["<Canvas width={engine.width} height={engine.height}>\n  <Viewport worldWidth worldHeight clamp sortableChildren={true}>\n    @if (sceneData) {\n      <SceneMap />\n    }\n  </Viewport>\n  @for (gui of guiList) {\n      <Container display=\"flex\">\n        @if (gui.display) {\n          <gui.component data={gui.data} dependencies={gui.dependencies} onFinish={(data) => {\n            onGuiFinish(gui, data)\n          }} onInteraction={(name, data) => {\n            onGuiInteraction(gui, name, data)\n          }} /> \n        }\n      </Container>\n  }\n</Canvas>\n\n<script>\n  import { signal, computed, effect } from \"canvasengine\";\n  import { inject } from \"../../core/inject\";\n  import { RpgClientEngine } from \"../../RpgClientEngine\";\n  import SceneMap from './draw-map.ce'\n  import { RpgGui } from \"../../Gui/Gui\";\n  import { delay } from \"@rpgjs/common\";\n\n  const engine = inject(RpgClientEngine);\n  const guiService = inject(RpgGui);\n  const sceneData = engine.sceneMap.data\n  const guiList = computed(() => {\n    return Object.values(guiService.gui()).filter((gui) => !gui.attachToSprite)\n  })\n  const worldWidth = computed(() => sceneData()?.width)\n  const worldHeight = computed(() => sceneData()?.height)\n\n  effect(() => {\n     if (sceneData() && !sceneData().component) {\n       throw new Error(\"Warning ! You need to define a component for the scene. Use provideLoadMap() to define a component for the scene.\")\n     }\n  })\n\n  const onGuiFinish = (gui, data) => {\n    delay(() => {\n      guiService.guiClose(gui.name, data)\n    })\n  }\n\n  const onGuiInteraction = (gui, name, data) => {\n    guiService.guiInteraction(gui.name, name, data)\n  }\n  \n  const clamp = {\n    direction: \"all\"\n  }\n</script>\n"],"mappings":";;;;;;;AAaM,SAAS,UAAA,SAAA;CACP,SAAA,QAAA;CACS,eAAA,QAAA;CACf,MAAA,SAAA,OAAA,gBAAA;CACF,MAAE,aAAM,OAAA,OAAA;;CAER,MAAC,UAAM,eAAA;EACL,OAAS,OAAO,OAAC,WAAiB,KAAE,CAAI,CAAC,QAAC,QAAa,CAAA,IAAA,eAAA;GACvD;CACF,MAAE,aAAS,eAAuB,WAAO,EAAA,MAAA;CACzC,MAAE,cAAgB,eAAiB,WAAE,EAAA,OAAA;CACrC,aAAW;EACT,IAAM,WAAW,IAAI,CAAC,WAAQ,CAAA,WAAA,MAAA,IAAA,MAAA,oHAAA;GAG9B;CACF,MAAE,eAAkB,KAAM,SAAS;EACjC,YAAc;GACZ,WAAc,SAAO,IAAA,MAAW,KAAO;IACxC;;CAEH,MAAE,oBAAoB,KAAS,MAAM,SAAS;;;CAWzC,OALF,EAAA,QAAA;EAAA,OAAA,OAAA;EAAA,QAAA,OAAA;EAAA,EAAA,CAAA,EAAA,UAAA;EAAA;EAAA;EAAA,OAAA,EAFC,WAAS,OAEV;EAAA,kBAAA;EAAA,EAAA,KAAA,iBAAA,EAAA,iBAAA,CAAA,CAAA,EAAA,KAAA,UAAA,QAAA,EAAA,WAAA,EAAA,SAAA,QAAA,EAAA,KAAA,IAAA,eAAA,EAAA,IAAA,WAAA;EAAA,MAAA,IAAA;EAAA,cAAA,IAAA;EAAA,WAAA,SAAA;;;EAEK,gBAAoB,MAAO,SAAE;GACzB,iBAAI,KAAA,MAAA,KAAA;;EACV,CAAA,CAAA,CAAU,CAAC,CAAA,CACZ;;AAGH,IAAM,iBAEN"}

package/dist/components/scenes/draw-map.ce.js.map

@@ -1 +1 @@
-{"version":3,"file":"draw-map.ce.js","names":[],"sources":["../../../src/components/scenes/draw-map.ce"],"sourcesContent":["<Container sound={backgroundMusic} shake={shakeConfig} freeze={engine.gamePause}>\n  <Container sound={backgroundAmbientSound} />\n\n  @if (map() && sceneComponent()) {\n    <sceneComponent() data={map().data} params={map().params} />\n  }\n\n  @for (componentAnimation of componentAnimations) {\n    <Container>\n      @for (animation of componentAnimation.current) {\n        <componentAnimation.component ...animation />\n      }\n    </Container>\n  }\n\n  @if (weatherProps) {\n    <Weather ...weatherProps() />\n  }\n</Container>\n\n<script>\n    import { NoiseFilter } from 'pixi-filters';\n    import { effect, signal, computed, mount, on, tick } from 'canvasengine'\n    import { inject } from \"../../core/inject\";\n    import { RpgClientEngine } from \"../../RpgClientEngine\";\n    import { Weather } from '@canvasengine/presets'\n\n    const engine = inject(RpgClientEngine);\n    const componentAnimations = engine.componentAnimations\n    const map = engine.sceneMap?.data\n    const sceneComponent = computed(() => map()?.component)\n    const sceneParams = map()?.params\n    const mapParams = map()?.params\n    const animations = engine.sceneMap.animations\n    const weather = engine.sceneMap.weather\n    const backgroundMusic = { src: mapParams?.backgroundMusic, autoplay: true, loop: true }\n    const backgroundAmbientSound = { src: mapParams?.backgroundAmbientSound, autoplay: true, loop: true }\n\n    const data = signal(map()?.data)\n\n    const scale = mapParams?.scale || 1\n    const worldWidth = (mapParams?.width || 2048) * scale\n    const worldHeight = (mapParams?.height || 2048) * scale\n   \n    const clamp = {\n      direction: \"all\"\n    }\n\n    const shakeConfig = {\n      trigger: engine.mapShakeTrigger,\n      intensity: 10,\n      duration: 500,\n      frequency: 10,\n      direction: 'both'\n    }\n\n    const weatherProps = computed(() => {\n      const state = weather?.()\n      if (!state) {\n        return null\n      }\n      const validEffects = ['rain', 'snow', 'fog', 'cloud']\n      if (!validEffects.includes(state.effect)) {\n        return null\n      }\n      const params = state.params ?? {}\n      return {\n        effect: state.effect,\n        speed: params.speed,\n        windDirection: params.windDirection,\n        windStrength: params.windStrength,\n        density: params.density,\n        maxDrops: params.maxDrops,\n        height: params.height,\n        scale: params.scale,\n        sunIntensity: params.sunIntensity,\n        sunAngle: params.sunAngle,\n        raySpread: params.raySpread,\n        rayTwinkle: params.rayTwinkle,\n        rayTwinkleSpeed: params.rayTwinkleSpeed,\n        zIndex: params.zIndex ?? 1000,\n        alpha: params.alpha,\n        blendMode: params.blendMode,\n      }\n    })\n</script>\n"],"mappings":";;;;;AASM,SAAM,UAAa,SAAA;AAChB,UAAmB,QAAY;AAClC,gBAAA,QAAA;CACA,MAAA,SAAS,OAAA,gBAAA;CACf,MAAE,sBAAA,OAAA;;CAEF,MAAM,iBAAe,eAAA,KAAA,EAAA,UAAA;AACL,MAAA,EAAA;CAChB,MAAE,YAAA,KAAA,EAAA;AACS,QAAA,SAAA;;CAEX,MAAC,kBAAM;EAAA,KAAA,WAAA;EAAA,UAAA;EAAA,MAAA;EAAA;CACP,MAAI,yBAA2B;EAAE,KAAK,WAAQ;EAAA,UAAA;EAAA,MAAA;EAAA;AACjC,QAAO,KAAC,EAAM,KAAE;CAC7B,MAAI,QAAS,WAAS,SAAY;AACrB,EAAA,WAAkB,SAAS,QAAG;AACvB,EAAC,WAAS,UAAY,QAAQ;CAIlD,MAAI,cAAY;EACZ,SAAM,OAAA;EACN,WAAM;EACN,UAAM;EACN,WAAM;EACN,WAAM;EACT;CACD,MAAI,eAAM,eAA0B;;AAEhC,MAAA,CAAK,MAAA,QAAA;AAIL,MAAA,CAAK;GADe;GAAU;GAAQ;GAAO;GAC5B,CAAC,SAAG,MAAW,OAAQ,CAC1C,QAAA;EAEE,MAAE,SAAY,MAAG,UAAA,EAAA;AACjB,SAAA;;GAEA,OAAM,OAAY;GAChB,eAAgB,OAAA;GAChB,cAAa,OAAA;GACb,SAAU,OAAG;GACb,UAAW,OAAE;GACb,QAAU,OAAM;GAClB,OAAA,OAAA;;GAEA,UAAM,OAAe;GACnB,WAAa,OAAC;GACZ,YAAU,OAAA;GACV,iBAAO,OAAA;GACT,QAAA,OAAA,UAAA;GACA,OAAM,OAAA;GACJ,WAAG,OAAa;GACnB;GACH;AAEI,QADc,EAAC,WAAY;EAAE,OAAG;EAAA,OAAA;EAAA,QAAA,OAAA;EAAA,EAAA;EAAA,EAAA,WAAA,EAAA,OAAA,wBAAA,CAAA;EAAA,KAAA,eAAA,KAAA,IAAA,gBAAA,CAAA,QAAA,EAAA,gBAAA,EAAA;GAAA,MAAA,eAAA,KAAA,CAAA,KAAA;GAAA,QAAA,eAAA,KAAA,CAAA,OAAA;GAAA,CAAA,CAAA;EAAA,KAAA,sBAAA,uBAAA,EAAA,WAAA,MAAA,KAAA,mBAAA,UAAA,cAAA,EAAA,mBAAA,WAAA,UAAA,CAAA,CAAA,CAAA;EAAA,KAAA,oBAAA,EAAA,SAAA,cAAA,CAAA,CAAA;EAAA,CACzB;;AAGP,IAAE,iBAEA"}
+{"version":3,"file":"draw-map.ce.js","names":[],"sources":["../../../src/components/scenes/draw-map.ce"],"sourcesContent":["<Container sound={backgroundMusic} shake={shakeConfig} freeze={engine.gamePause}>\n  <Container sound={backgroundAmbientSound} />\n\n  @if (map() && sceneComponent()) {\n    <sceneComponent() data={map().data} params={map().params} />\n  }\n\n  @for (componentAnimation of componentAnimations) {\n    <Container>\n      @for (animation of componentAnimation.current) {\n        <componentAnimation.component ...animation />\n      }\n    </Container>\n  }\n\n  @if (weatherProps) {\n    <Weather ...weatherProps() />\n  }\n</Container>\n\n<script>\n    import { NoiseFilter } from 'pixi-filters';\n    import { effect, signal, computed, mount, on, tick } from 'canvasengine'\n    import { inject } from \"../../core/inject\";\n    import { RpgClientEngine } from \"../../RpgClientEngine\";\n    import { Weather } from '@canvasengine/presets'\n\n    const engine = inject(RpgClientEngine);\n    const componentAnimations = engine.componentAnimations\n    const map = engine.sceneMap?.data\n    const sceneComponent = computed(() => map()?.component)\n    const sceneParams = map()?.params\n    const mapParams = map()?.params\n    const animations = engine.sceneMap.animations\n    const weather = engine.sceneMap.weather\n    const backgroundMusic = { src: mapParams?.backgroundMusic, autoplay: true, loop: true }\n    const backgroundAmbientSound = { src: mapParams?.backgroundAmbientSound, autoplay: true, loop: true }\n\n    const data = signal(map()?.data)\n\n    const scale = mapParams?.scale || 1\n    const worldWidth = (mapParams?.width || 2048) * scale\n    const worldHeight = (mapParams?.height || 2048) * scale\n   \n    const clamp = {\n      direction: \"all\"\n    }\n\n    const shakeConfig = {\n      trigger: engine.mapShakeTrigger,\n      intensity: 10,\n      duration: 500,\n      frequency: 10,\n      direction: 'both'\n    }\n\n    const weatherProps = computed(() => {\n      const state = weather?.()\n      if (!state) {\n        return null\n      }\n      const validEffects = ['rain', 'snow', 'fog', 'cloud']\n      if (!validEffects.includes(state.effect)) {\n        return null\n      }\n      const params = state.params ?? {}\n      return {\n        effect: state.effect,\n        speed: params.speed,\n        windDirection: params.windDirection,\n        windStrength: params.windStrength,\n        density: params.density,\n        maxDrops: params.maxDrops,\n        height: params.height,\n        scale: params.scale,\n        sunIntensity: params.sunIntensity,\n        sunAngle: params.sunAngle,\n        raySpread: params.raySpread,\n        rayTwinkle: params.rayTwinkle,\n        rayTwinkleSpeed: params.rayTwinkleSpeed,\n        zIndex: params.zIndex ?? 1000,\n        alpha: params.alpha,\n        blendMode: params.blendMode,\n      }\n    })\n</script>\n"],"mappings":";;;;;AASM,SAAM,UAAa,SAAA;CAChB,SAAmB,QAAY;CAClC,eAAA,QAAA;CACA,MAAA,SAAS,OAAA,gBAAA;CACf,MAAE,sBAAA,OAAA;;CAEF,MAAM,iBAAe,eAAA,KAAA,EAAA,UAAA;CACL,KAAA,EAAA;CAChB,MAAE,YAAA,KAAA,EAAA;CACS,OAAA,SAAA;;CAEX,MAAC,kBAAM;EAAA,KAAA,WAAA;EAAA,UAAA;EAAA,MAAA;EAAA;CACP,MAAI,yBAA2B;EAAE,KAAK,WAAQ;EAAA,UAAA;EAAA,MAAA;EAAA;CACjC,OAAO,KAAC,EAAM,KAAE;CAC7B,MAAI,QAAS,WAAS,SAAY;CACrB,CAAA,WAAkB,SAAS,QAAG;CACvB,CAAC,WAAS,UAAY,QAAQ;CAIlD,MAAI,cAAY;EACZ,SAAM,OAAA;EACN,WAAM;EACN,UAAM;EACN,WAAM;EACN,WAAM;EACT;CACD,MAAI,eAAM,eAA0B;;EAEhC,IAAA,CAAK,OAAA,OAAA;EAIL,IAAA,CAAK;GADe;GAAU;GAAQ;GAAO;GAC5B,CAAC,SAAG,MAAW,OAAQ,EAC1C,OAAA;EAEE,MAAE,SAAY,MAAG,UAAA,EAAA;EACjB,OAAA;;GAEA,OAAM,OAAY;GAChB,eAAgB,OAAA;GAChB,cAAa,OAAA;GACb,SAAU,OAAG;GACb,UAAW,OAAE;GACb,QAAU,OAAM;GAClB,OAAA,OAAA;;GAEA,UAAM,OAAe;GACnB,WAAa,OAAC;GACZ,YAAU,OAAA;GACV,iBAAO,OAAA;GACT,QAAA,OAAA,UAAA;GACA,OAAM,OAAA;GACJ,WAAG,OAAa;GACnB;GACH;CAEI,OADc,EAAC,WAAY;EAAE,OAAG;EAAA,OAAA;EAAA,QAAA,OAAA;EAAA,EAAA;EAAA,EAAA,WAAA,EAAA,OAAA,wBAAA,CAAA;EAAA,KAAA,eAAA,KAAA,IAAA,gBAAA,CAAA,QAAA,EAAA,gBAAA,EAAA;GAAA,MAAA,eAAA,KAAA,CAAA,KAAA;GAAA,QAAA,eAAA,KAAA,CAAA,OAAA;GAAA,CAAA,CAAA;EAAA,KAAA,sBAAA,uBAAA,EAAA,WAAA,MAAA,KAAA,mBAAA,UAAA,cAAA,EAAA,mBAAA,WAAA,UAAA,CAAA,CAAA,CAAA;EAAA,KAAA,oBAAA,EAAA,SAAA,cAAA,CAAA,CAAA;EAAA,CACzB;;AAGP,IAAE,iBAEA"}

package/dist/components/scenes/event-layer.ce.js.map

@@ -1 +1 @@
-{"version":3,"file":"event-layer.ce.js","names":[],"sources":["../../../src/components/scenes/event-layer.ce"],"sourcesContent":["<Container sortableChildren={true}>\n    @for ((event,id) of events) {\n        <Character id={id} object={event}  />\n    }\n\n    @for ((player,id) of players) {\n        <Character id={id} object={player} />\n    }\n\n    @for (child of children) {\n        <child />\n    }\n</Container>\n\n<script>\n    import { effect, signal } from 'canvasengine'\n    import { inject } from \"../../core/inject\";\n    import { RpgClientEngine } from \"../../RpgClientEngine\";\n    import Character from \"../character.ce\";\n    import LightHalo from \"../prebuilt/light-halo.ce\";\n   \n    const engine = inject(RpgClientEngine);\n    const { children } = defineProps()\n    \n    const players = engine.sceneMap.players\n    const events = engine.sceneMap.events\n</script>"],"mappings":";;;;;;AASmB,UAAU,QAAA;CACrB,MAAM,cAAE,eAAA,QAAA;CACZ,MAAA,SAAA,OAAA,gBAAA;CACJ,MAAE,EAAA,aAAS,aAAA;;CAEX,MAAC,SAAM,OAAA,SAAA;AAEH,QADgB,EAAC,WAAS,EAAK,kBAAa,MAAA,EAAA;EAAA,KAAA,SAAA,OAAA,OAAA,EAAA,kBAAA;GAAA;GAAA,QAAA;GAAA,CAAA,CAAA;EAAA,KAAA,UAAA,QAAA,OAAA,EAAA,kBAAA;GAAA;GAAA,QAAA;GAAA,CAAA,CAAA;EAAA,KAAA,WAAA,UAAA,EAAA,MAAA,CAAA;EAAA,CAC5B;;AAGhB,IAAO,iBAED"}
+{"version":3,"file":"event-layer.ce.js","names":[],"sources":["../../../src/components/scenes/event-layer.ce"],"sourcesContent":["<Container sortableChildren={true}>\n    @for ((event,id) of events) {\n        <Character id={id} object={event}  />\n    }\n\n    @for ((player,id) of players) {\n        <Character id={id} object={player} />\n    }\n\n    @for (child of children) {\n        <child />\n    }\n</Container>\n\n<script>\n    import { effect, signal } from 'canvasengine'\n    import { inject } from \"../../core/inject\";\n    import { RpgClientEngine } from \"../../RpgClientEngine\";\n    import Character from \"../character.ce\";\n    import LightHalo from \"../prebuilt/light-halo.ce\";\n   \n    const engine = inject(RpgClientEngine);\n    const { children } = defineProps()\n    \n    const players = engine.sceneMap.players\n    const events = engine.sceneMap.events\n</script>"],"mappings":";;;;;;CASmB,SAAU,QAAA;CACrB,MAAM,cAAE,eAAA,QAAA;CACZ,MAAA,SAAA,OAAA,gBAAA;CACJ,MAAE,EAAA,aAAS,aAAA;;CAEX,MAAC,SAAM,OAAA,SAAA;CAEH,OADgB,EAAC,WAAS,EAAK,kBAAa,MAAA,EAAA;EAAA,KAAA,SAAA,OAAA,OAAA,EAAA,kBAAA;GAAA;GAAA,QAAA;GAAA,CAAA,CAAA;EAAA,KAAA,UAAA,QAAA,OAAA,EAAA,kBAAA;GAAA;GAAA,QAAA;GAAA,CAAA,CAAA;EAAA,KAAA,WAAA,UAAA,EAAA,MAAA,CAAA;EAAA,CAC5B;;AAGhB,IAAO,iBAED"}

package/dist/core/inject.js

@@ -1,4 +1,4 @@
-import { inject as inject$1 } from "../node_modules/.pnpm/@signe_di@2.9.0/node_modules/@signe/di/dist/index.js";
+import { inject as inject$1 } from "../node_modules/.pnpm/@signe_di@2.10.0/node_modules/@signe/di/dist/index.js";
 //#region src/core/inject.ts
 var context = null;
 function inject(service, _context) {

package/dist/core/inject.js.map

@@ -1 +1 @@
-{"version":3,"file":"inject.js","names":[],"sources":["../../src/core/inject.ts"],"sourcesContent":["import { Context, inject as injector } from \"@signe/di\";\n\nexport let context: Context | null = null\n\nexport function inject<T>(service: (new (...args: any[]) => T) | string, _context?: Context): T {\n    const c = _context ?? context\n    if (!c) throw new Error(\"Context is not set. use setInject() to set the context\");\n    return injector(c, service);\n}\n\nexport function setInject(_context: Context) {\n    context = _context;\n}\n\nexport function clearInject() {\n    context = null\n}"],"mappings":";;AAEA,IAAW,UAA0B;AAErC,SAAgB,OAAU,SAA+C,UAAuB;CAC5F,MAAM,IAAI,YAAY;AACtB,KAAI,CAAC,EAAG,OAAM,IAAI,MAAM,yDAAyD;AACjF,QAAO,SAAS,GAAG,QAAQ;;AAG/B,SAAgB,UAAU,UAAmB;AACzC,WAAU;;AAGd,SAAgB,cAAc;AAC1B,WAAU"}
+{"version":3,"file":"inject.js","names":[],"sources":["../../src/core/inject.ts"],"sourcesContent":["import { Context, inject as injector } from \"@signe/di\";\n\nexport let context: Context | null = null\n\nexport function inject<T>(service: (new (...args: any[]) => T) | string, _context?: Context): T {\n    const c = _context ?? context\n    if (!c) throw new Error(\"Context is not set. use setInject() to set the context\");\n    return injector(c, service);\n}\n\nexport function setInject(_context: Context) {\n    context = _context;\n}\n\nexport function clearInject() {\n    context = null\n}"],"mappings":";;AAEA,IAAW,UAA0B;AAErC,SAAgB,OAAU,SAA+C,UAAuB;CAC5F,MAAM,IAAI,YAAY;CACtB,IAAI,CAAC,GAAG,MAAM,IAAI,MAAM,yDAAyD;CACjF,OAAO,SAAS,GAAG,QAAQ;;AAG/B,SAAgB,UAAU,UAAmB;CACzC,UAAU;;AAGd,SAAgB,cAAc;CAC1B,UAAU"}

package/dist/core/setup.js

@@ -1,4 +1,4 @@
-import { Context, inject, injector } from "../node_modules/.pnpm/@signe_di@2.9.0/node_modules/@signe/di/dist/index.js";
+import { Context, inject, injector } from "../node_modules/.pnpm/@signe_di@2.10.0/node_modules/@signe/di/dist/index.js";
 import { setInject } from "./inject.js";
 import { RpgClientEngine } from "../RpgClientEngine.js";
 //#region src/core/setup.ts

package/dist/core/setup.js.map

@@ -1 +1 @@
-{"version":3,"file":"setup.js","names":[],"sources":["../../src/core/setup.ts"],"sourcesContent":["import { Context, FactoryProvider, findProvider, findProviders, inject, injector, Providers } from \"@signe/di\";\nimport { RpgClientEngine } from \"../RpgClientEngine\";\nimport { setInject } from \"./inject\";\n\ninterface SetupOptions {\n  providers: Providers;\n}\n\n\nexport async function startGame(options: SetupOptions) {\n  const context = new Context();\n  context['side'] = 'client'\n  setInject(context);\n\n  await injector(context, options.providers);\n\n  const engine = inject(context, RpgClientEngine);\n  await engine.start();\n  return context;\n}"],"mappings":";;;;AASA,eAAsB,UAAU,SAAuB;CACrD,MAAM,UAAU,IAAI,SAAS;AAC7B,SAAQ,UAAU;AAClB,WAAU,QAAQ;AAElB,OAAM,SAAS,SAAS,QAAQ,UAAU;AAG1C,OADe,OAAO,SAAS,gBACzB,CAAO,OAAO;AACpB,QAAO"}
+{"version":3,"file":"setup.js","names":[],"sources":["../../src/core/setup.ts"],"sourcesContent":["import { Context, FactoryProvider, findProvider, findProviders, inject, injector, Providers } from \"@signe/di\";\nimport { RpgClientEngine } from \"../RpgClientEngine\";\nimport { setInject } from \"./inject\";\n\ninterface SetupOptions {\n  providers: Providers;\n}\n\n\nexport async function startGame(options: SetupOptions) {\n  const context = new Context();\n  context['side'] = 'client'\n  setInject(context);\n\n  await injector(context, options.providers);\n\n  const engine = inject<RpgClientEngine>(context, RpgClientEngine);\n  await engine.start();\n  return context;\n}\n"],"mappings":";;;;AASA,eAAsB,UAAU,SAAuB;CACrD,MAAM,UAAU,IAAI,SAAS;CAC7B,QAAQ,UAAU;CAClB,UAAU,QAAQ;CAElB,MAAM,SAAS,SAAS,QAAQ,UAAU;CAG1C,MADe,OAAwB,SAAS,gBAC1C,CAAO,OAAO;CACpB,OAAO"}

package/dist/index.js

@@ -1,4 +1,4 @@
-import { Context } from "./node_modules/.pnpm/@signe_di@2.9.0/node_modules/@signe/di/dist/index.js";
+import { Context } from "./node_modules/.pnpm/@signe_di@2.10.0/node_modules/@signe/di/dist/index.js";
 import { clearInject, context, inject, setInject } from "./core/inject.js";
 import { AbstractWebsocket, WebSocketToken } from "./services/AbstractSocket.js";
 import __ce_component$2 from "./components/gui/dialogbox/index.ce.js";

package/dist/module.js

@@ -1,4 +1,4 @@
-import { inject } from "./node_modules/.pnpm/@signe_di@2.9.0/node_modules/@signe/di/dist/index.js";
+import { inject } from "./node_modules/.pnpm/@signe_di@2.10.0/node_modules/@signe/di/dist/index.js";
 import { RpgGui } from "./Gui/Gui.js";
 import { getSoundMetadata } from "./Sound.js";
 import { findModules, provideModules } from "@rpgjs/common";
@@ -144,6 +144,9 @@ function provideClientModules(modules) {
 						if (sprite.componentsInFront) sprite.componentsInFront.forEach((component) => {
 							engine.addSpriteComponentInFront(component);
 						});
+						if (sprite.components) Object.entries(sprite.components).forEach(([id, component]) => {
+							engine.registerSpriteComponent(id, component);
+						});
 					}
 				};
 			}

package/dist/module.js.map

@@ -1 +1 @@
-{"version":3,"file":"module.js","names":[],"sources":["../src/module.ts"],"sourcesContent":["import { findModules, provideModules } from \"@rpgjs/common\";\nimport { FactoryProvider } from \"@signe/di\";\nimport { RpgClientEngine } from \"./RpgClientEngine\";\nimport { RpgClient } from \"./RpgClient\";\nimport { inject } from \"@signe/di\";\nimport { RpgGui } from \"./Gui/Gui\";\nimport { getSoundMetadata } from \"./Sound\";\n\n/**\n * Type for client modules that can be either:\n * - An object implementing RpgClient interface\n * - A class decorated with @RpgModule decorator\n */\nexport type RpgClientModule = RpgClient | (new () => any);\n\n/**\n * Provides client modules configuration to Dependency Injection\n * \n * This function accepts an array of client modules that can be either:\n * - Objects implementing the RpgClient interface\n * - Classes decorated with the @RpgModule decorator (which will be instantiated)\n * \n * @param modules - Array of client modules (objects or classes)\n * @returns FactoryProvider configuration for DI\n * @example\n * ```ts\n * // Using an object\n * provideClientModules([\n *   {\n *     engine: {\n *       onConnected(engine) {\n *         console.log('Client connected')\n *       }\n *     }\n *   }\n * ])\n * \n * // Using a decorated class\n * @RpgModule<RpgClient>({\n *   engine: {\n *     onStart(engine) {\n *       console.log('Client started')\n *     }\n *   }\n * })\n * class MyClientModule {}\n * \n * provideClientModules([MyClientModule])\n * ```\n */\nexport function provideClientModules(modules: RpgClientModule[]): FactoryProvider {\n  return provideModules(modules, \"client\", (modules, context) => {\n    const mainModuleClient = findModules(context, 'Client')\n    modules = [...mainModuleClient, ...modules]\n    modules = modules.map((module) => {\n      // If module is a class (constructor function), instantiate it\n      // The RpgModule decorator adds properties to the prototype, which will be accessible via the instance\n      if (typeof module === 'function') {\n        const instance = new module() as any;\n        // Copy all enumerable properties (including from prototype) to a plain object\n        const moduleObj: any = {};\n        for (const key in instance) {\n          moduleObj[key] = instance[key];\n        }\n        module = moduleObj;\n      }\n      if ('client' in module) {\n        module = module.client as any;\n      }\n      if (module.spritesheets) {\n        const spritesheets = [...module.spritesheets];\n        module.spritesheets = {\n          load: (engine: RpgClientEngine) => {\n            spritesheets.forEach((spritesheet) => {\n              engine.addSpriteSheet(spritesheet);\n            });\n          },\n        };\n      }\n      if (module.spritesheetResolver) {\n        const resolver = module.spritesheetResolver;\n        module.spritesheetResolver = {\n          load: (engine: RpgClientEngine) => {\n            engine.setSpritesheetResolver(resolver);\n          },\n        };\n      }\n      if (module.sounds) {\n        const sounds = [...module.sounds];\n        module.sounds = {\n          load: (engine: RpgClientEngine) => {\n            sounds.forEach((sound) => {\n              // Check if it's a class decorated with @Sound\n              if (typeof sound === 'function' || (sound && sound.constructor && sound.constructor !== Object)) {\n                const metadata = getSoundMetadata(sound);\n                if (metadata) {\n                  // Handle single sound\n                  if (metadata.id && metadata.sound) {\n                    engine.addSound({\n                      id: metadata.id,\n                      src: metadata.sound,\n                      loop: metadata.loop,\n                      volume: metadata.volume,\n                    });\n                  }\n                  // Handle multiple sounds\n                  if (metadata.sounds) {\n                    Object.entries(metadata.sounds).forEach(([soundId, soundSrc]) => {\n                      engine.addSound({\n                        id: soundId,\n                        src: soundSrc,\n                        loop: metadata.loop,\n                        volume: metadata.volume,\n                      });\n                    });\n                  }\n                } else {\n                  // Not a decorated class, treat as regular sound object\n                  engine.addSound(sound);\n                }\n              } else {\n                // Regular sound object\n                engine.addSound(sound);\n              }\n            });\n          },\n        };\n      }\n      if (module.soundResolver) {\n        const resolver = module.soundResolver;\n        module.soundResolver = {\n          load: (engine: RpgClientEngine) => {\n            engine.setSoundResolver(resolver);\n          },\n        };\n      }\n      if (module.gui) {\n        const gui = [...module.gui];\n        module.gui = {\n          load: (engine: RpgClientEngine) => {\n            const guiService = inject(engine.context, RpgGui) as RpgGui;\n            gui.forEach((gui) => {\n              guiService.add(gui);\n            });\n          },\n        };\n      }\n      if (module.componentAnimations) {\n        const componentAnimations = [...module.componentAnimations];\n        module.componentAnimations = {\n          load: (engine: RpgClientEngine) => {\n            componentAnimations.forEach((componentAnimation) => {\n              engine.addComponentAnimation(componentAnimation);\n            });\n          },\n        };\n      }\n      if (module.transitions) {\n        const transitions = [...module.transitions];\n        module.transitions = {\n          load: (engine: RpgClientEngine) => {\n            const guiService = inject(engine.context, RpgGui) as RpgGui;\n            transitions.forEach((transition) => {\n              guiService.add({\n                name: transition.id,\n                component: transition.component,\n                data: transition.props || {}\n              });\n            });\n          },\n        };\n      }\n      if (module.particles) {\n        const particles = [...module.particles];\n        module.particles = {\n          load: (engine: RpgClientEngine) => {\n            particles.forEach((particle) => {\n              engine.addParticle(particle);\n            });\n          },\n        };\n      }\n      if (module.sprite) {\n        const sprite = {...module.sprite};\n        module.sprite = {\n          ...sprite,\n          load: (engine: RpgClientEngine) => {\n            if (sprite.componentsBehind) {\n              sprite.componentsBehind.forEach((component) => {\n                engine.addSpriteComponentBehind(component);\n              });\n            }\n            if (sprite.componentsInFront) {\n              sprite.componentsInFront.forEach((component) => {\n                engine.addSpriteComponentInFront(component);\n              });\n            }\n          },\n        };\n      }\n      return module;\n    });\n    return modules\n  });\n}\n\nexport const GlobalConfigToken = \"GlobalConfigToken\";\n\nexport function provideGlobalConfig(config: any) {\n  return {\n    provide: GlobalConfigToken,\n    useValue: config ?? {},\n  };\n}\n\nexport function provideClientGlobalConfig(config: any = {}) {\n  if (!config.keyboardControls) {\n    config.keyboardControls = {\n      up: 'up',\n      down: 'down',\n      left: 'left',\n      right: 'right',\n      action: 'space',\n      escape: 'escape'\n    }\n  }\n  return provideGlobalConfig(config)\n}\n\n"],"mappings":"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"}
+{"version":3,"file":"module.js","names":[],"sources":["../src/module.ts"],"sourcesContent":["import { findModules, provideModules } from \"@rpgjs/common\";\nimport { FactoryProvider } from \"@signe/di\";\nimport { RpgClientEngine } from \"./RpgClientEngine\";\nimport { RpgClient } from \"./RpgClient\";\nimport { inject } from \"@signe/di\";\nimport { RpgGui } from \"./Gui/Gui\";\nimport { getSoundMetadata } from \"./Sound\";\n\n/**\n * Type for client modules that can be either:\n * - An object implementing RpgClient interface\n * - A class decorated with @RpgModule decorator\n */\nexport type RpgClientModule = RpgClient | (new () => any);\n\n/**\n * Provides client modules configuration to Dependency Injection\n * \n * This function accepts an array of client modules that can be either:\n * - Objects implementing the RpgClient interface\n * - Classes decorated with the @RpgModule decorator (which will be instantiated)\n * \n * @param modules - Array of client modules (objects or classes)\n * @returns FactoryProvider configuration for DI\n * @example\n * ```ts\n * // Using an object\n * provideClientModules([\n *   {\n *     engine: {\n *       onConnected(engine) {\n *         console.log('Client connected')\n *       }\n *     }\n *   }\n * ])\n * \n * // Using a decorated class\n * @RpgModule<RpgClient>({\n *   engine: {\n *     onStart(engine) {\n *       console.log('Client started')\n *     }\n *   }\n * })\n * class MyClientModule {}\n * \n * provideClientModules([MyClientModule])\n * ```\n */\nexport function provideClientModules(modules: RpgClientModule[]): FactoryProvider {\n  return provideModules(modules, \"client\", (modules, context) => {\n    const mainModuleClient = findModules(context, 'Client')\n    modules = [...mainModuleClient, ...modules]\n    modules = modules.map((module) => {\n      // If module is a class (constructor function), instantiate it\n      // The RpgModule decorator adds properties to the prototype, which will be accessible via the instance\n      if (typeof module === 'function') {\n        const instance = new module() as any;\n        // Copy all enumerable properties (including from prototype) to a plain object\n        const moduleObj: any = {};\n        for (const key in instance) {\n          moduleObj[key] = instance[key];\n        }\n        module = moduleObj;\n      }\n      if ('client' in module) {\n        module = module.client as any;\n      }\n      if (module.spritesheets) {\n        const spritesheets = [...module.spritesheets];\n        module.spritesheets = {\n          load: (engine: RpgClientEngine) => {\n            spritesheets.forEach((spritesheet) => {\n              engine.addSpriteSheet(spritesheet);\n            });\n          },\n        };\n      }\n      if (module.spritesheetResolver) {\n        const resolver = module.spritesheetResolver;\n        module.spritesheetResolver = {\n          load: (engine: RpgClientEngine) => {\n            engine.setSpritesheetResolver(resolver);\n          },\n        };\n      }\n      if (module.sounds) {\n        const sounds = [...module.sounds];\n        module.sounds = {\n          load: (engine: RpgClientEngine) => {\n            sounds.forEach((sound) => {\n              // Check if it's a class decorated with @Sound\n              if (typeof sound === 'function' || (sound && sound.constructor && sound.constructor !== Object)) {\n                const metadata = getSoundMetadata(sound);\n                if (metadata) {\n                  // Handle single sound\n                  if (metadata.id && metadata.sound) {\n                    engine.addSound({\n                      id: metadata.id,\n                      src: metadata.sound,\n                      loop: metadata.loop,\n                      volume: metadata.volume,\n                    });\n                  }\n                  // Handle multiple sounds\n                  if (metadata.sounds) {\n                    Object.entries(metadata.sounds).forEach(([soundId, soundSrc]) => {\n                      engine.addSound({\n                        id: soundId,\n                        src: soundSrc,\n                        loop: metadata.loop,\n                        volume: metadata.volume,\n                      });\n                    });\n                  }\n                } else {\n                  // Not a decorated class, treat as regular sound object\n                  engine.addSound(sound);\n                }\n              } else {\n                // Regular sound object\n                engine.addSound(sound);\n              }\n            });\n          },\n        };\n      }\n      if (module.soundResolver) {\n        const resolver = module.soundResolver;\n        module.soundResolver = {\n          load: (engine: RpgClientEngine) => {\n            engine.setSoundResolver(resolver);\n          },\n        };\n      }\n      if (module.gui) {\n        const gui = [...module.gui];\n        module.gui = {\n          load: (engine: RpgClientEngine) => {\n            const guiService = inject(engine.context, RpgGui) as RpgGui;\n            gui.forEach((gui) => {\n              guiService.add(gui);\n            });\n          },\n        };\n      }\n      if (module.componentAnimations) {\n        const componentAnimations = [...module.componentAnimations];\n        module.componentAnimations = {\n          load: (engine: RpgClientEngine) => {\n            componentAnimations.forEach((componentAnimation) => {\n              engine.addComponentAnimation(componentAnimation);\n            });\n          },\n        };\n      }\n      if (module.transitions) {\n        const transitions = [...module.transitions];\n        module.transitions = {\n          load: (engine: RpgClientEngine) => {\n            const guiService = inject(engine.context, RpgGui) as RpgGui;\n            transitions.forEach((transition) => {\n              guiService.add({\n                name: transition.id,\n                component: transition.component,\n                data: transition.props || {}\n              });\n            });\n          },\n        };\n      }\n      if (module.particles) {\n        const particles = [...module.particles];\n        module.particles = {\n          load: (engine: RpgClientEngine) => {\n            particles.forEach((particle) => {\n              engine.addParticle(particle);\n            });\n          },\n        };\n      }\n      if (module.sprite) {\n        const sprite = {...module.sprite};\n        module.sprite = {\n          ...sprite,\n          load: (engine: RpgClientEngine) => {\n            if (sprite.componentsBehind) {\n              sprite.componentsBehind.forEach((component) => {\n                engine.addSpriteComponentBehind(component);\n              });\n            }\n            if (sprite.componentsInFront) {\n              sprite.componentsInFront.forEach((component) => {\n                engine.addSpriteComponentInFront(component);\n              });\n            }\n            if (sprite.components) {\n              Object.entries(sprite.components).forEach(([id, component]) => {\n                engine.registerSpriteComponent(id, component);\n              });\n            }\n          },\n        };\n      }\n      return module;\n    });\n    return modules\n  });\n}\n\nexport const GlobalConfigToken = \"GlobalConfigToken\";\n\nexport function provideGlobalConfig(config: any) {\n  return {\n    provide: GlobalConfigToken,\n    useValue: config ?? {},\n  };\n}\n\nexport function provideClientGlobalConfig(config: any = {}) {\n  if (!config.keyboardControls) {\n    config.keyboardControls = {\n      up: 'up',\n      down: 'down',\n      left: 'left',\n      right: 'right',\n      action: 'space',\n      escape: 'escape'\n    }\n  }\n  return provideGlobalConfig(config)\n}\n"],"mappings":"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"}