@rpgjs/client 5.0.0-alpha.43 → 5.0.0-alpha.44

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

@@ -1,106 +1,116 @@
-import { useProps, useDefineProps, computed, animatedSignal, effect, h, Container, Graphics } from 'canvasengine';
-
+import { Container, Graphics, animatedSignal, computed, effect, h, useDefineProps, useProps } from "canvasengine";
+//#region src/components/prebuilt/hp-bar.ce
 function component($$props) {
-        useProps($$props);
-        const defineProps = useDefineProps($$props);
-        var object = defineProps().object;
-var barWidth = 50;
-var barHeight = 8;
-var borderRadius = 4;
-var innerRadius = 3;
-var padding = 1;
-var bgColor = 0x16213e;
-var shadowColor = 0x000000;
-var borderColor = 0x4a5568;
-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;
-});
-var maxHp = computed(function () {
-    var _a, _b, _c;
-    var params = (_b = (_a = object._param) === null || _a === void 0 ? void 0 : _a.call(object)) !== null && _b !== void 0 ? _b : {};
-    return (_c = params.maxHp) !== null && _c !== void 0 ? _c : 100;
-});
-var hpPercent = computed(function () {
-    var max = maxHp();
-    if (max <= 0)
-        return 0;
-    var percent = currentHp() / max;
-    return Math.max(0, Math.min(1, percent));
-});
-var animatedPercent = animatedSignal(hpPercent(), {
-    duration: 300,
-    easing: 'easeOutCubic'
-});
-effect(function () {
-    var 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;
-    // Ensure minimum visible width when HP > 0
-    if (percent > 0 && width < innerRadius * 2) {
-        return innerRadius * 2;
-    }
-    return Math.max(0, width);
-});
-var hpColorHex = computed(function () {
-    var percent = hpPercent();
-    if (percent > 0.6) {
-        return 0x4ade80; // Green - healthy
-    }
-    else if (percent > 0.3) {
-        return 0xfacc15; // Yellow - caution
-    }
-    else if (percent > 0.15) {
-        return 0xfb923c; // Orange - danger
-    }
-    else {
-        return 0xef4444; // Red - critical
-    }
-});
-var drawShadow = function (g) {
-    g.roundRect(0, 0, barWidth, barHeight, borderRadius);
-    g.fill({ color: shadowColor, alpha: 0.3 });
-};
-var drawBackground = function (g) {
-    g.roundRect(0, 0, barWidth, barHeight, borderRadius);
-    g.fill({ color: bgColor, alpha: 0.9 });
-};
-var drawFill = function (g) {
-    var width = fillWidth();
-    if (width > 0) {
-        g.roundRect(padding, padding, width, fillHeight, innerRadius);
-        g.fill({ color: hpColorHex() });
-    }
-};
-var drawHighlight = function (g) {
-    var width = fillWidth();
-    if (width > 0) {
-        g.roundRect(padding, padding, width, highlightHeight, innerRadius);
-        g.fill({ color: 0xffffff, alpha: 0.25 });
-    }
-};
-var drawBorder = function (g) {
-    g.roundRect(0, 0, barWidth, barHeight, borderRadius);
-    g.stroke({
-        color: borderColor,
-        width: 1,
-        alpha: 0.7
-    });
-};
-        let $this = [,h(Container, { x: position.x, y: position.y }, [h(Graphics, { draw: drawShadow, x: 1, y: 1 }), h(Graphics, { draw: drawBackground }), h(Graphics, { draw: drawFill }), h(Graphics, { draw: drawHighlight }), h(Graphics, { draw: drawBorder })])];
-        return $this
-      }
-
+	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;
+	});
+	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;
+	});
+	var hpPercent = computed(function() {
+		var max = maxHp();
+		if (max <= 0) return 0;
+		var percent = currentHp() / max;
+		return Math.max(0, Math.min(1, percent));
+	});
+	var animatedPercent = animatedSignal(hpPercent(), {
+		duration: 300,
+		easing: "easeOutCubic"
+	});
+	effect(function() {
+		var 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;
+		if (percent > 0 && width < innerRadius * 2) return innerRadius * 2;
+		return Math.max(0, width);
+	});
+	var hpColorHex = computed(function() {
+		var 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) {
+		g.roundRect(0, 0, barWidth, barHeight, borderRadius);
+		g.fill({
+			color: shadowColor,
+			alpha: .3
+		});
+	};
+	var drawBackground = function(g) {
+		g.roundRect(0, 0, barWidth, barHeight, borderRadius);
+		g.fill({
+			color: bgColor,
+			alpha: .9
+		});
+	};
+	var drawFill = function(g) {
+		var width = fillWidth();
+		if (width > 0) {
+			g.roundRect(padding, padding, width, fillHeight, innerRadius);
+			g.fill({ color: hpColorHex() });
+		}
+	};
+	var drawHighlight = function(g) {
+		var width = fillWidth();
+		if (width > 0) {
+			g.roundRect(padding, padding, width, highlightHeight, innerRadius);
+			g.fill({
+				color: 16777215,
+				alpha: .25
+			});
+		}
+	};
+	var drawBorder = function(g) {
+		g.roundRect(0, 0, barWidth, barHeight, borderRadius);
+		g.stroke({
+			color: borderColor,
+			width: 1,
+			alpha: .7
+		});
+	};
+	return [, h(Container, {
+		x: position.x,
+		y: position.y
+	}, [
+		h(Graphics, {
+			draw: drawShadow,
+			x: 1,
+			y: 1
+		}),
+		h(Graphics, { draw: drawBackground }),
+		h(Graphics, { draw: drawFill }),
+		h(Graphics, { draw: drawHighlight }),
+		h(Graphics, { draw: drawBorder })
+	])];
+}
+//#endregion
 export { component as default };
-//# sourceMappingURL=hp-bar.ce.js.map
+
+//# sourceMappingURL=hp-bar.ce.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"hp-bar.ce.js","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"],"names":[],"mappings":"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"}
+{"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"}

package/dist/components/prebuilt/index.js

@@ -0,0 +1,2 @@
+import "./hp-bar.ce.js";
+import "./light-halo.ce.js";

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

@@ -1,76 +1,94 @@
-import { useProps, useDefineProps, computed, signal, tick, h, Container, Graphics } from 'canvasengine';
-import { BlurFilter } from 'pixi.js';
-
+import { Container, Graphics, computed, h, signal, tick, useDefineProps, useProps } from "canvasengine";
+import { BlurFilter } from "pixi.js";
+//#region src/components/prebuilt/light-halo.ce
 function component($$props) {
-        useProps($$props);
-        const defineProps = useDefineProps($$props);
-        var _a = defineProps(), object = _a.object, baseRadius = _a.baseRadius, radiusVariation = _a.radiusVariation, baseOpacity = _a.baseOpacity, opacityVariation = _a.opacityVariation, sizeSpeed = _a.sizeSpeed, opacitySpeed = _a.opacitySpeed, lightColor = _a.lightColor;
-var getBaseRadius = computed(function () { var _a; return (_a = baseRadius === null || baseRadius === void 0 ? void 0 : baseRadius()) !== null && _a !== void 0 ? _a : 30; });
-var getRadiusVariation = computed(function () { var _a; return (_a = radiusVariation === null || radiusVariation === void 0 ? void 0 : radiusVariation()) !== null && _a !== void 0 ? _a : 10; });
-var getBaseOpacity = computed(function () { var _a; return (_a = baseOpacity === null || baseOpacity === void 0 ? void 0 : baseOpacity()) !== null && _a !== void 0 ? _a : 0.6; });
-var getOpacityVariation = computed(function () { var _a; return (_a = opacityVariation === null || opacityVariation === void 0 ? void 0 : opacityVariation()) !== null && _a !== void 0 ? _a : 0.3; });
-var getSizeSpeed = computed(function () { var _a; return (_a = sizeSpeed === null || sizeSpeed === void 0 ? void 0 : sizeSpeed()) !== null && _a !== void 0 ? _a : 0.002; });
-var getOpacitySpeed = computed(function () { var _a; return (_a = opacitySpeed === null || opacitySpeed === void 0 ? void 0 : opacitySpeed()) !== null && _a !== void 0 ? _a : 0.003; });
-var getLightColor = computed(function () { var _a; return (_a = lightColor === null || lightColor === void 0 ? void 0 : lightColor()) !== null && _a !== void 0 ? _a : 0xffffaa; });
-var time = signal(0);
-var currentRadius = computed(function () {
-    var t = time();
-    var base = getBaseRadius();
-    var variation = getRadiusVariation();
-    var speed = getSizeSpeed();
-    // Combine two sine waves for less predictable pulsing
-    var pulse1 = Math.sin(t * speed);
-    var pulse2 = Math.sin(t * speed * 1.5) * 0.5;
-    var combinedPulse = (pulse1 + pulse2) / 1.5;
-    return base + (combinedPulse * variation);
-});
-var currentOpacity = computed(function () {
-    var t = time();
-    var base = getBaseOpacity();
-    var variation = getOpacityVariation();
-    var speed = getOpacitySpeed();
-    // Main breathing cycle
-    var fade = Math.sin(t * speed);
-    // Subtle high-frequency flicker (candle-like)
-    var flicker = (Math.random() - 0.5) * 0.1;
-    return Math.max(0, Math.min(1, base + (fade * variation) + flicker));
-});
-var hitbox = object.hitbox;
-var position = computed(function () { return ({
-    x: hitbox().w / 2,
-    y: hitbox().h / 2
-}); });
-var blurFilter = new BlurFilter({ strength: 20, quality: 3 });
-var drawHalo = function (g) {
-    var radius = currentRadius();
-    var opacity = currentOpacity();
-    var color = getLightColor();
-    if (opacity <= 0 || radius <= 0)
-        return;
-    // Set blend mode to ADD for glowing light effect
-    g.blendMode = 'add';
-    // Apply blur filter for soft light diffusion
-    g.filters = [blurFilter];
-    // Draw main light source
-    // The blur filter will spread this out into a nice gradient
-    g.circle(0, 0, radius);
-    g.fill({
-        color: color,
-        alpha: opacity
-    });
-    // Draw a smaller, brighter core
-    g.circle(0, 0, radius * 0.4);
-    g.fill({
-        color: 0xffffff,
-        alpha: opacity * 0.5
-    });
-};
-tick(function () {
-    time.update(function (t) { return t + 1; });
-});
-        let $this = h(Container, { x: position.x, y: position.y }, h(Graphics, { draw: drawHalo }));
-        return $this
-      }
-
+	useProps($$props);
+	var _a = useDefineProps($$props)(), object = _a.object, baseRadius = _a.baseRadius, radiusVariation = _a.radiusVariation, baseOpacity = _a.baseOpacity, opacityVariation = _a.opacityVariation, sizeSpeed = _a.sizeSpeed, opacitySpeed = _a.opacitySpeed, lightColor = _a.lightColor;
+	var getBaseRadius = computed(function() {
+		var _a;
+		return (_a = baseRadius === null || baseRadius === void 0 ? void 0 : baseRadius()) !== null && _a !== void 0 ? _a : 30;
+	});
+	var getRadiusVariation = computed(function() {
+		var _a;
+		return (_a = radiusVariation === null || radiusVariation === void 0 ? void 0 : radiusVariation()) !== null && _a !== void 0 ? _a : 10;
+	});
+	var getBaseOpacity = computed(function() {
+		var _a;
+		return (_a = baseOpacity === null || baseOpacity === void 0 ? void 0 : baseOpacity()) !== null && _a !== void 0 ? _a : .6;
+	});
+	var getOpacityVariation = computed(function() {
+		var _a;
+		return (_a = opacityVariation === null || opacityVariation === void 0 ? void 0 : opacityVariation()) !== null && _a !== void 0 ? _a : .3;
+	});
+	var getSizeSpeed = computed(function() {
+		var _a;
+		return (_a = sizeSpeed === null || sizeSpeed === void 0 ? void 0 : sizeSpeed()) !== null && _a !== void 0 ? _a : .002;
+	});
+	var getOpacitySpeed = computed(function() {
+		var _a;
+		return (_a = opacitySpeed === null || opacitySpeed === void 0 ? void 0 : opacitySpeed()) !== null && _a !== void 0 ? _a : .003;
+	});
+	var getLightColor = computed(function() {
+		var _a;
+		return (_a = lightColor === null || lightColor === void 0 ? void 0 : lightColor()) !== null && _a !== void 0 ? _a : 16777130;
+	});
+	var time = signal(0);
+	var currentRadius = computed(function() {
+		var t = time();
+		var base = getBaseRadius();
+		var variation = getRadiusVariation();
+		var speed = getSizeSpeed();
+		return base + (Math.sin(t * speed) + Math.sin(t * speed * 1.5) * .5) / 1.5 * variation;
+	});
+	var currentOpacity = computed(function() {
+		var t = time();
+		var base = getBaseOpacity();
+		var variation = getOpacityVariation();
+		var speed = getOpacitySpeed();
+		var fade = Math.sin(t * speed);
+		var flicker = (Math.random() - .5) * .1;
+		return Math.max(0, Math.min(1, base + fade * variation + flicker));
+	});
+	var hitbox = object.hitbox;
+	var position = computed(function() {
+		return {
+			x: hitbox().w / 2,
+			y: hitbox().h / 2
+		};
+	});
+	var blurFilter = new BlurFilter({
+		strength: 20,
+		quality: 3
+	});
+	var drawHalo = function(g) {
+		var radius = currentRadius();
+		var opacity = currentOpacity();
+		var color = getLightColor();
+		if (opacity <= 0 || radius <= 0) return;
+		g.blendMode = "add";
+		g.filters = [blurFilter];
+		g.circle(0, 0, radius);
+		g.fill({
+			color,
+			alpha: opacity
+		});
+		g.circle(0, 0, radius * .4);
+		g.fill({
+			color: 16777215,
+			alpha: opacity * .5
+		});
+	};
+	tick(function() {
+		time.update(function(t) {
+			return t + 1;
+		});
+	});
+	return h(Container, {
+		x: position.x,
+		y: position.y
+	}, h(Graphics, { draw: drawHalo }));
+}
+//#endregion
 export { component as default };
-//# sourceMappingURL=light-halo.ce.js.map
+
+//# sourceMappingURL=light-halo.ce.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"light-halo.ce.js","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"],"names":[],"mappings":";;;AAQqB,SAAS,SAAS,CAAC,OAAO,EAAE;AACjD,QAAuB,QAAQ,CAAC,OAAO;AACvC,QAAQ,MAAM,WAAW,GAAG,cAAc,CAAC,OAAO;AAClD,QAAQ,IAAI,EAAE,GAAG,WAAW,EAAE,EAAE,MAAM,GAAG,EAAE,CAAC,MAAM,EAAE,UAAU,GAAG,EAAE,CAAC,UAAU,EAAE,eAAe,GAAG,EAAE,CAAC,eAAe,EAAE,WAAW,GAAG,EAAE,CAAC,WAAW,EAAE,gBAAgB,GAAG,EAAE,CAAC,gBAAgB,EAAE,SAAS,GAAG,EAAE,CAAC,SAAS,EAAE,YAAY,GAAG,EAAE,CAAC,YAAY,EAAE,UAAU,GAAG,EAAE,CAAC,UAAU;AAChR,IAAI,aAAa,GAAG,QAAQ,CAAC,YAAY,EAAE,IAAI,EAAE,CAAC,CAAC,OAAO,CAAC,EAAE,GAAG,UAAU,KAAK,IAAI,IAAI,UAAU,KAAK,MAAM,GAAG,MAAM,GAAG,UAAU,EAAE,MAAM,IAAI,IAAI,EAAE,KAAK,MAAM,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC;AAC7K,IAAI,kBAAkB,GAAG,QAAQ,CAAC,YAAY,EAAE,IAAI,EAAE,CAAC,CAAC,OAAO,CAAC,EAAE,GAAG,eAAe,KAAK,IAAI,IAAI,eAAe,KAAK,MAAM,GAAG,MAAM,GAAG,eAAe,EAAE,MAAM,IAAI,IAAI,EAAE,KAAK,MAAM,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC;AACjM,IAAI,cAAc,GAAG,QAAQ,CAAC,YAAY,EAAE,IAAI,EAAE,CAAC,CAAC,OAAO,CAAC,EAAE,GAAG,WAAW,KAAK,IAAI,IAAI,WAAW,KAAK,MAAM,GAAG,MAAM,GAAG,WAAW,EAAE,MAAM,IAAI,IAAI,EAAE,KAAK,MAAM,GAAG,EAAE,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC;AAClL,IAAI,mBAAmB,GAAG,QAAQ,CAAC,YAAY,EAAE,IAAI,EAAE,CAAC,CAAC,OAAO,CAAC,EAAE,GAAG,gBAAgB,KAAK,IAAI,IAAI,gBAAgB,KAAK,MAAM,GAAG,MAAM,GAAG,gBAAgB,EAAE,MAAM,IAAI,IAAI,EAAE,KAAK,MAAM,GAAG,EAAE,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC;AACtM,IAAI,YAAY,GAAG,QAAQ,CAAC,YAAY,EAAE,IAAI,EAAE,CAAC,CAAC,OAAO,CAAC,EAAE,GAAG,SAAS,KAAK,IAAI,IAAI,SAAS,KAAK,MAAM,GAAG,MAAM,GAAG,SAAS,EAAE,MAAM,IAAI,IAAI,EAAE,KAAK,MAAM,GAAG,EAAE,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;AAC5K,IAAI,eAAe,GAAG,QAAQ,CAAC,YAAY,EAAE,IAAI,EAAE,CAAC,CAAC,OAAO,CAAC,EAAE,GAAG,YAAY,KAAK,IAAI,IAAI,YAAY,KAAK,MAAM,GAAG,MAAM,GAAG,YAAY,EAAE,MAAM,IAAI,IAAI,EAAE,KAAK,MAAM,GAAG,EAAE,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;AACxL,IAAI,aAAa,GAAG,QAAQ,CAAC,YAAY,EAAE,IAAI,EAAE,CAAC,CAAC,OAAO,CAAC,EAAE,GAAG,UAAU,KAAK,IAAI,IAAI,UAAU,KAAK,MAAM,GAAG,MAAM,GAAG,UAAU,EAAE,MAAM,IAAI,IAAI,EAAE,KAAK,MAAM,GAAG,EAAE,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;AACnL,IAAI,IAAI,GAAG,MAAM,CAAC,CAAC,CAAC;AACpB,IAAI,aAAa,GAAG,QAAQ,CAAC,YAAY;AACzC,IAAI,IAAI,CAAC,GAAG,IAAI,EAAE;AAClB,IAAI,IAAI,IAAI,GAAG,aAAa,EAAE;AAC9B,IAAI,IAAI,SAAS,GAAG,kBAAkB,EAAE;AACxC,IAAI,IAAI,KAAK,GAAG,YAAY,EAAE;AAC9B;AACA,IAAI,IAAI,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,KAAK,CAAC;AACpC,IAAI,IAAI,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,KAAK,GAAG,GAAG,CAAC,GAAG,GAAG;AAChD,IAAI,IAAI,aAAa,GAAG,CAAC,MAAM,GAAG,MAAM,IAAI,GAAG;AAC/C,IAAI,OAAO,IAAI,IAAI,aAAa,GAAG,SAAS,CAAC;AAC7C,CAAC,CAAC;AACF,IAAI,cAAc,GAAG,QAAQ,CAAC,YAAY;AAC1C,IAAI,IAAI,CAAC,GAAG,IAAI,EAAE;AAClB,IAAI,IAAI,IAAI,GAAG,cAAc,EAAE;AAC/B,IAAI,IAAI,SAAS,GAAG,mBAAmB,EAAE;AACzC,IAAI,IAAI,KAAK,GAAG,eAAe,EAAE;AACjC;AACA,IAAI,IAAI,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,KAAK,CAAC;AAClC;AACA,IAAI,IAAI,OAAO,GAAG,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,GAAG,IAAI,GAAG;AAC7C,IAAI,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,IAAI,IAAI,GAAG,SAAS,CAAC,GAAG,OAAO,CAAC,CAAC;AACxE,CAAC,CAAC;AACF,IAAI,MAAM,GAAG,MAAM,CAAC,MAAM;AAC1B,IAAI,QAAQ,GAAG,QAAQ,CAAC,YAAY,EAAE,QAAQ;AAC9C,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC,GAAG,CAAC;AACrB,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC,GAAG;AACpB,CAAC,EAAE,CAAC,CAAC,CAAC;AACN,IAAI,UAAU,GAAG,IAAI,UAAU,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC;AAC7D,IAAI,QAAQ,GAAG,UAAU,CAAC,EAAE;AAC5B,IAAI,IAAI,MAAM,GAAG,aAAa,EAAE;AAChC,IAAI,IAAI,OAAO,GAAG,cAAc,EAAE;AAClC,IAAI,IAAI,KAAK,GAAG,aAAa,EAAE;AAC/B,IAAI,IAAI,OAAO,IAAI,CAAC,IAAI,MAAM,IAAI,CAAC;AACnC,QAAQ;AACR;AACA,IAAI,CAAC,CAAC,SAAS,GAAG,KAAK;AACvB;AACA,IAAI,CAAC,CAAC,OAAO,GAAG,CAAC,UAAU,CAAC;AAC5B;AACA;AACA,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,EAAE,MAAM,CAAC;AAC1B,IAAI,CAAC,CAAC,IAAI,CAAC;AACX,QAAQ,KAAK,EAAE,KAAK;AACpB,QAAQ,KAAK,EAAE;AACf,KAAK,CAAC;AACN;AACA,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC;AAChC,IAAI,CAAC,CAAC,IAAI,CAAC;AACX,QAAQ,KAAK,EAAE,QAAQ;AACvB,QAAQ,KAAK,EAAE,OAAO,GAAG;AACzB,KAAK,CAAC;AACN,CAAC;AACD,IAAI,CAAC,YAAY;AACjB,IAAI,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,EAAE,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;AAC/C,CAAC,CAAC;AACF,QAAQ,IAAI,KAAK,GAAG,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,EAAE,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC;AAClG,QAAQ,OAAO;AACf,MAAM;;;;"}
+{"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":"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"}

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

@@ -1,44 +1,60 @@
-import { useProps, useDefineProps, computed, effect, h, Canvas, loop, Viewport, cond, Container } from 'canvasengine';
-import { inject } from '../../core/inject.js';
-import { RpgClientEngine } from '../../RpgClientEngine.js';
-import component$1 from './draw-map.ce.js';
-import { RpgGui } from '../../Gui/Gui.js';
-import { delay } from '@rpgjs/common';
-
+import { inject } from "../../core/inject.js";
+import component$1 from "./draw-map.ce.js";
+import { RpgGui } from "../../Gui/Gui.js";
+import { RpgClientEngine } from "../../RpgClientEngine.js";
+import { Canvas, Container, Viewport, computed, cond, effect, h, loop, useDefineProps, useProps } from "canvasengine";
+import { delay } from "@rpgjs/common";
+//#region src/components/scenes/canvas.ce
 function component($$props) {
-        useProps($$props);
-        useDefineProps($$props);
-        var engine = inject(RpgClientEngine);
-var guiService = inject(RpgGui);
-var sceneData = engine.sceneMap.data;
-var guiList = computed(function () {
-    return Object.values(guiService.gui()).filter(function (gui) { return !gui.attachToSprite; });
-});
-var worldWidth = computed(function () { var _a; return (_a = sceneData()) === null || _a === void 0 ? void 0 : _a.width; });
-var worldHeight = computed(function () { var _a; return (_a = sceneData()) === null || _a === void 0 ? void 0 : _a.height; });
-effect(function () {
-    if (sceneData() && !sceneData().component) {
-        throw new Error("Warning ! You need to define a component for the scene. Use provideLoadMap() to define a component for the scene.");
-    }
-});
-var onGuiFinish = function (gui, data) {
-    delay(function () {
-        guiService.guiClose(gui.name, data);
-    });
-};
-var onGuiInteraction = function (gui, name, data) {
-    guiService.guiInteraction(gui.name, name, data);
-};
-var clamp = {
-    direction: "all"
-};
-        let $this = h(Canvas, { width: engine.width, height: engine.height }, [h(Viewport, { worldWidth, worldHeight, clamp, sortableChildren: true }, cond(sceneData, () => h(component$1))), loop(guiList, gui => h(Container, { display: 'flex' }, cond(gui.display, () => h(gui.component, { data: gui.data, dependencies: gui.dependencies, onFinish: (data) => {
-            onGuiFinish(gui, data);
-          }, onInteraction: (name, data) => {
-            onGuiInteraction(gui, name, data);
-          } }))))]);
-        return $this
-      }
-
+	useProps($$props);
+	useDefineProps($$props);
+	var engine = inject(RpgClientEngine);
+	var guiService = inject(RpgGui);
+	var sceneData = engine.sceneMap.data;
+	var guiList = computed(function() {
+		return Object.values(guiService.gui()).filter(function(gui) {
+			return !gui.attachToSprite;
+		});
+	});
+	var worldWidth = computed(function() {
+		var _a;
+		return (_a = sceneData()) === null || _a === void 0 ? void 0 : _a.width;
+	});
+	var worldHeight = computed(function() {
+		var _a;
+		return (_a = sceneData()) === null || _a === void 0 ? void 0 : _a.height;
+	});
+	effect(function() {
+		if (sceneData() && !sceneData().component) throw new Error("Warning ! You need to define a component for the scene. Use provideLoadMap() to define a component for the scene.");
+	});
+	var onGuiFinish = function(gui, data) {
+		delay(function() {
+			guiService.guiClose(gui.name, data);
+		});
+	};
+	var onGuiInteraction = function(gui, name, data) {
+		guiService.guiInteraction(gui.name, name, data);
+	};
+	return h(Canvas, {
+		width: engine.width,
+		height: engine.height
+	}, [h(Viewport, {
+		worldWidth,
+		worldHeight,
+		clamp: { direction: "all" },
+		sortableChildren: true
+	}, cond(sceneData, () => h(component$1))), loop(guiList, (gui) => h(Container, { display: "flex" }, cond(gui.display, () => h(gui.component, {
+		data: gui.data,
+		dependencies: gui.dependencies,
+		onFinish: (data) => {
+			onGuiFinish(gui, data);
+		},
+		onInteraction: (name, data) => {
+			onGuiInteraction(gui, name, data);
+		}
+	}))))]);
+}
+//#endregion
 export { component as default };
-//# sourceMappingURL=canvas.ce.js.map
+
+//# sourceMappingURL=canvas.ce.js.map