npm - @rpgjs/client - Versions diffs - 5.0.0-beta.6 → 5.0.0-beta.8 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (147) hide show

package/dist/components/animations/animation.ce.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"animation.ce.js","names":[],"sources":["../../../src/components/animations/animation.ce"],"sourcesContent":["<Sprite sheet x y anchor={0.5} />\n\n<script>\n import { RpgClientEngine } from \"../../RpgClientEngine\";\n import { inject } from \"../../core/inject\";\n\n const { x, y, animationName, graphic, onFinish } = defineProps();\n\n const client = inject(RpgClientEngine);\n\n const sheet = {\n definition: client.getSpriteSheet(graphic()),\n playing: animationName() ?? 'default',\n onFinish\n };\n</script>\n"],"mappings":";;;;;~~AAQuB~~,~~UAAC~~,QAAgB;CAEhC,MAAM,EAAE,GAAA,GAAA,eAAA,SAAA,aAAA,eAAA,QAAA,EAAA;;;GAGZ,YAFW,OAAO,gBAElB,CAAA,eAAA,SAAA,CAAA;GACD,SAAA,eAAA,IAAA;GACD"}
1	+ {"version":3,"file":"animation.ce.js","names":[],"sources":["../../../src/components/animations/animation.ce"],"sourcesContent":["<Sprite sheet x y anchor={0.5} />\n\n<script>\n import { RpgClientEngine } from \"../../RpgClientEngine\";\n import { inject } from \"../../core/inject\";\n\n const { x, y, animationName, graphic, onFinish } = defineProps();\n\n const client = inject(RpgClientEngine);\n\n const sheet = {\n definition: client.getSpriteSheet(graphic()),\n playing: animationName() ?? 'default',\n onFinish\n };\n</script>\n"],"mappings":";;;;;CAQuB,SAAC,QAAgB;CAEhC,MAAM,EAAE,GAAA,GAAA,eAAA,SAAA,aAAA,eAAA,QAAA,EAAA;;;GAGZ,YAFW,OAAO,gBAElB,CAAA,eAAA,SAAA,CAAA;GACD,SAAA,eAAA,IAAA;GACD"}

package/dist/components/animations/hit.ce.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"hit.ce.js","names":[],"sources":["../../../src/components/animations/hit.ce"],"sourcesContent":["<Text x y zIndex={10000} color scale size={30} text />\n\n<script>\n import { animatedSignal, mount, signal, tick } from \"canvasengine\";\n import { Direction } from \"@rpgjs/common\";\n const {\n text,\n direction,\n onFinish,\n duration,\n color,\n x: positionX,\n y: positionY\n } = defineProps({\n duration: {\n default: 1000\n },\n color: {\n default: 'black'\n }\n });\n\n const scale = animatedSignal(1, {\n duration: duration(),\n });\n\n // Generate random initial position\n const randomPosition = () => Math.floor(Math.random() * 60);\n const initialY = randomPosition();\n const x = signal(positionX());\n const y = signal(positionY() - initialY);\n\n // Initial velocity\n let velocityX = 0;\n let velocityY = 0;\n\n // Set initial velocity based on direction\n const speed = 200;\n switch (direction()) {\n case Direction.Left:\n velocityX = speed;\n break;\n case Direction.Right:\n velocityX = -speed;\n break;\n case Direction.Up:\n velocityY = speed;\n break;\n case Direction.Down:\n velocityY = -speed;\n break;\n }\n\n // Add some randomness to the velocity\n velocityX += (Math.random() - 0.5) * 100;\n velocityY += (Math.random() - 0.5) * 100;\n\n const gravity = 500; // Gravity effect\n const deceleration = 0.98; // Deceleration factor\n\n mount(() => {\n scale.set(0.1);\n });\n\n let elapsedTime = 0;\n\n tick(({ deltaTime }) => {\n elapsedTime += deltaTime;\n \n if (elapsedTime < duration()) {\n // Update position\n x.update((x) => x + (velocityX * deltaTime) / 1000);\n y.update((y) => y + (velocityY * deltaTime) / 1000);\n\n // Apply gravity\n velocityY += (gravity * deltaTime) / 1000;\n\n // Apply deceleration\n velocityX = deceleration;\n velocityY = deceleration;\n } else {\n if (onFinish) {\n onFinish();\n }\n }\n });\n</script>\n"],"mappings":";;;AAOI,SAAS,UAAA,SAAA;~~AACD~~,~~UAAA~~,QAAA;CAER,MAAK,EAAA,MAAA,WAAA,UAAA,UAAA,OAAA,GAAA,WAAA,GAAA,cADG,eAAA,QACH,CAAA;EACL,UAAG,EACA,SAAA,KACF;EACD,OAAA,EACE,SAAS,SACV;EACJ,CAAC;CACF,MAAM,QAAQ,eAAO,GAAA,EACjB,UAAA,UAAA,EACH,CAAC;;CAEF,MAAE,WAAc,gBAAiB;CACjC,MAAI,IAAA,OAAU,WAAU,CAAA;CACxB,MAAI,IAAA,OAAA,WAAA,GAAA,SAAA;;CAEJ,IAAI,YAAU;CACd,MAAE,QAAM;~~AACR~~,~~SAAQ~~,WAAW,EAAnB;EACE,KAAO,UAAU;~~AACX~~,~~eAAW~~;;EAEf,KAAC,UAAQ;~~AACP~~,~~eAAa~~,CAAA;~~AACb~~;;~~AAEE~~,~~eAAS~~;~~AACT~~;EACN,KAAO,UAAU;~~AACX~~,~~eAAW~~,CAAA;~~AACb~~;;~~AAEN~~,~~eAAS~~,KAAU,QAAK,GAAA,MAAA;~~AACxB~~,~~eAAM~~,KAAa,QAAK,GAAA,MAAA;CACxB,MAAM,UAAK;CACX,MAAI,eAAiB;~~AACrB~~,~~aAAM~~;~~AACF~~,~~QAAE~~,IAAK,GAAA;GACT;CACF,IAAI,cAAc;~~AAClB~~,~~OAAM~~,EAAA,gBAAK;~~AACT~~,~~iBAAA~~;;~~AAGA~~,~~KAAA~~,QAAc,MAAK,IAAQ,YAAU,YAAG,IAAA;~~AACxC~~,~~KAAA~~,QAAc,MAAK,IAAQ,YAAU,YAAG,IAAA;~~AAElC~~,~~gBAAc~~,UAAI,YAAQ;;~~AAG1B~~,~~gBAAM~~;~~sBAIR~~,~~WAAe~~;GAGnB;~~AAEM~~,~~QADL~~,EAAA,MAAA;EAAA;EAAA;EAAA,QAAA;EAAA;EAAA;EAAA,MAAA;EAAA;EAAA,CACiB;;AAGd,IAAE,iBAEC"}
1	+ {"version":3,"file":"hit.ce.js","names":[],"sources":["../../../src/components/animations/hit.ce"],"sourcesContent":["<Text x y zIndex={10000} color scale size={30} text />\n\n<script>\n import { animatedSignal, mount, signal, tick } from \"canvasengine\";\n import { Direction } from \"@rpgjs/common\";\n const {\n text,\n direction,\n onFinish,\n duration,\n color,\n x: positionX,\n y: positionY\n } = defineProps({\n duration: {\n default: 1000\n },\n color: {\n default: 'black'\n }\n });\n\n const scale = animatedSignal(1, {\n duration: duration(),\n });\n\n // Generate random initial position\n const randomPosition = () => Math.floor(Math.random() * 60);\n const initialY = randomPosition();\n const x = signal(positionX());\n const y = signal(positionY() - initialY);\n\n // Initial velocity\n let velocityX = 0;\n let velocityY = 0;\n\n // Set initial velocity based on direction\n const speed = 200;\n switch (direction()) {\n case Direction.Left:\n velocityX = speed;\n break;\n case Direction.Right:\n velocityX = -speed;\n break;\n case Direction.Up:\n velocityY = speed;\n break;\n case Direction.Down:\n velocityY = -speed;\n break;\n }\n\n // Add some randomness to the velocity\n velocityX += (Math.random() - 0.5) * 100;\n velocityY += (Math.random() - 0.5) * 100;\n\n const gravity = 500; // Gravity effect\n const deceleration = 0.98; // Deceleration factor\n\n mount(() => {\n scale.set(0.1);\n });\n\n let elapsedTime = 0;\n\n tick(({ deltaTime }) => {\n elapsedTime += deltaTime;\n \n if (elapsedTime < duration()) {\n // Update position\n x.update((x) => x + (velocityX * deltaTime) / 1000);\n y.update((y) => y + (velocityY * deltaTime) / 1000);\n\n // Apply gravity\n velocityY += (gravity * deltaTime) / 1000;\n\n // Apply deceleration\n velocityX = deceleration;\n velocityY = deceleration;\n } else {\n if (onFinish) {\n onFinish();\n }\n }\n });\n</script>\n"],"mappings":";;;AAOI,SAAS,UAAA,SAAA;CACD,SAAA,QAAA;CAER,MAAK,EAAA,MAAA,WAAA,UAAA,UAAA,OAAA,GAAA,WAAA,GAAA,cADG,eAAA,QACH,CAAA;EACL,UAAG,EACA,SAAA,KACF;EACD,OAAA,EACE,SAAS,SACV;EACJ,CAAC;CACF,MAAM,QAAQ,eAAO,GAAA,EACjB,UAAA,UAAA,EACH,CAAC;;CAEF,MAAE,WAAc,gBAAiB;CACjC,MAAI,IAAA,OAAU,WAAU,CAAA;CACxB,MAAI,IAAA,OAAA,WAAA,GAAA,SAAA;;CAEJ,IAAI,YAAU;CACd,MAAE,QAAM;CACR,QAAQ,WAAW,EAAnB;EACE,KAAO,UAAU;GACX,YAAW;;EAEf,KAAC,UAAQ;GACP,YAAa,CAAA;GACb;;GAEE,YAAS;GACT;EACN,KAAO,UAAU;GACX,YAAW,CAAA;GACb;;CAEN,cAAS,KAAU,QAAK,GAAA,MAAA;CACxB,cAAM,KAAa,QAAK,GAAA,MAAA;CACxB,MAAM,UAAK;CACX,MAAI,eAAiB;CACrB,YAAM;EACF,MAAE,IAAK,GAAA;GACT;CACF,IAAI,cAAc;CAClB,MAAM,EAAA,gBAAK;EACT,eAAA;;GAGA,EAAA,QAAc,MAAK,IAAQ,YAAU,YAAG,IAAA;GACxC,EAAA,QAAc,MAAK,IAAQ,YAAU,YAAG,IAAA;GAElC,aAAc,UAAI,YAAQ;;GAG1B,aAAM;uBAIR,UAAe;GAGnB;CAEM,OADL,EAAA,MAAA;EAAA;EAAA;EAAA,QAAA;EAAA;EAAA;EAAA,MAAA;EAAA;EAAA,CACiB;;AAGd,IAAE,iBAEC"}

package/dist/components/character.ce.js CHANGED Viewed

@@ -1,10 +1,12 @@
 import { inject } from "../core/inject.js";
 import { RpgGui } from "../Gui/Gui.js";
 import { RpgClientEngine } from "../RpgClientEngine.js";
-import { Container, Sprite, animatedSignal, computed, cond, h, loop, mount, on, signal, tick, useDefineProps, useProps } from "canvasengine";
+import __ce_component$1 from "./player-components.ce.js";
+import { Container, Sprite, animatedSignal, computed, cond, effect, h, loop, mount, on, signal, tick, useDefineProps, useProps } from "canvasengine";
 import { Particle } from "@canvasengine/presets";
-import { Direction, ModulesToken } from "@rpgjs/common";
+import { Animation, Direction, ModulesToken } from "@rpgjs/common";
 import { combineLatest, filter, lastValueFrom, map, pairwise, startWith } from "rxjs";
+import { Assets } from "pixi.js";
 //#region src/components/character.ce
 function component($$props) {
 	useProps($$props);
@@ -164,6 +166,202 @@ function component($$props) {
 			return [x, typeof scale.y === "number" ? scale.y : x];
 		}
 	};
+	const imageDimensions = signal({});
+	const loadingImageDimensions = /* @__PURE__ */ new Set();
+	const toPositiveNumber = (value) => {
+		const number = typeof value === "number" ? value : parseFloat(value);
+		return Number.isFinite(number) && number > 0 ? number : void 0;
+	};
+	const toFiniteNumber = (value, fallback = 0) => {
+		const number = typeof value === "number" ? value : parseFloat(value);
+		return Number.isFinite(number) ? number : fallback;
+	};
+	const clampRatio = (value) => Math.min(1, Math.max(0, value));
+	const normalizePair = (value, fallback = [1, 1]) => {
+		if (Array.isArray(value)) {
+			const x = toFiniteNumber(value[0], fallback[0]);
+			return [x, toFiniteNumber(value[1] ?? value[0], x)];
+		}
+		if (typeof value === "number") return [value, value];
+		if (value && typeof value === "object") {
+			const x = toFiniteNumber(value.x, fallback[0]);
+			return [x, toFiniteNumber(value.y ?? value.x, x)];
+		}
+		return fallback;
+	};
+	const normalizeAnchor = (value) => {
+		if (!Array.isArray(value)) return void 0;
+		const [x, y] = normalizePair(value, [0, 0]);
+		return [clampRatio(x), clampRatio(y)];
+	};
+	const resolveImageSource = (image) => {
+		if (typeof image === "string") return image;
+		if (typeof image?.default === "string") return image.default;
+	};
+	const parentTextureOptions = (graphicObject) => {
+		return [
+			"width",
+			"height",
+			"framesHeight",
+			"framesWidth",
+			"rectWidth",
+			"rectHeight",
+			"offset",
+			"image",
+			"sound",
+			"spriteRealSize",
+			"scale",
+			"anchor",
+			"pivot",
+			"x",
+			"y",
+			"opacity"
+		].reduce((options, prop) => {
+			if (graphicObject?.[prop] !== void 0) options[prop] = graphicObject[prop];
+			return options;
+		}, {});
+	};
+	const resolveTextureOptions = (graphicObject) => {
+		const textures = graphicObject?.textures ?? {};
+		const texture = textures[realAnimationName()] ?? textures[Animation.Stand] ?? Object.values(textures)[0] ?? {};
+		return {
+			...parentTextureOptions(graphicObject),
+			...texture
+		};
+	};
+	const resolveFirstAnimationFrame = (textureOptions) => {
+		const animations = textureOptions?.animations;
+		if (!animations) return {};
+		try {
+			const frames = typeof animations === "function" ? animations({ direction: direction() }) : animations;
+			if (!Array.isArray(frames)) return {};
+			const firstGroup = frames[0];
+			return Array.isArray(firstGroup) ? firstGroup[0] ?? {} : firstGroup ?? {};
+		} catch {
+			return {};
+		}
+	};
+	const optionValue = (prop, frame, textureOptions, graphicObject) => {
+		return frame?.[prop] ?? textureOptions?.[prop] ?? graphicObject?.[prop];
+	};
+	const resolveFrameSize = (textureOptions, dimensions) => {
+		const framesWidth = toPositiveNumber(textureOptions?.framesWidth) ?? 1;
+		const framesHeight = toPositiveNumber(textureOptions?.framesHeight) ?? 1;
+		const imageSource = resolveImageSource(textureOptions?.image);
+		const loadedSize = imageSource ? dimensions[imageSource] : void 0;
+		const fullWidth = toPositiveNumber(textureOptions?.width) ?? loadedSize?.width;
+		const fullHeight = toPositiveNumber(textureOptions?.height) ?? loadedSize?.height;
+		return {
+			width: toPositiveNumber(textureOptions?.rectWidth) ?? toPositiveNumber(textureOptions?.spriteWidth) ?? (fullWidth ? fullWidth / framesWidth : void 0),
+			height: toPositiveNumber(textureOptions?.rectHeight) ?? toPositiveNumber(textureOptions?.spriteHeight) ?? (fullHeight ? fullHeight / framesHeight : void 0)
+		};
+	};
+	const resolveHitboxAnchor = (spriteWidth, spriteHeight, realSize, box) => {
+		if (!spriteWidth || !spriteHeight || !box) return [0, 0];
+		const resolvedHeight = toPositiveNumber(typeof realSize === "number" ? realSize : realSize?.height) ?? spriteHeight;
+		const gap = Math.max(0, (spriteHeight - resolvedHeight) / 2);
+		const hitboxTopLeftX = clampRatio((spriteWidth - box.w) / 2 / spriteWidth);
+		const hitboxTopLeftY = clampRatio((spriteHeight - box.h - gap) / spriteHeight);
+		const hitboxCenterX = clampRatio(hitboxTopLeftX + box.w / 2 / spriteWidth);
+		const hitboxCenterY = clampRatio(hitboxTopLeftY + box.h / 2 / spriteHeight);
+		const footY = clampRatio((spriteHeight - gap) / spriteHeight);
+		switch (box.anchorMode ?? "top-left") {
+			case "center": return [hitboxCenterX, hitboxCenterY];
+			case "foot": return [hitboxCenterX, footY];
+			default: return [hitboxTopLeftX, hitboxTopLeftY];
+		}
+	};
+	const loadImageDimensions = (image) => {
+		const source = resolveImageSource(image);
+		if (!source || imageDimensions()[source] || loadingImageDimensions.has(source)) return;
+		loadingImageDimensions.add(source);
+		Assets.load(source).then((texture) => {
+			const width = toPositiveNumber(texture?.width);
+			const height = toPositiveNumber(texture?.height);
+			if (!width || !height) return;
+			imageDimensions.update((dimensions) => ({
+				...dimensions,
+				[source]: {
+					width,
+					height
+				}
+			}));
+		}).catch(() => {}).finally(() => {
+			loadingImageDimensions.delete(source);
+		});
+	};
+	effect(() => {
+		const sources = /* @__PURE__ */ new Set();
+		graphicsSignals().forEach((graphicObject) => {
+			const baseImage = resolveImageSource(graphicObject?.image);
+			if (baseImage) sources.add(baseImage);
+			Object.values(graphicObject?.textures ?? {}).forEach((textureOptions) => {
+				const image = resolveImageSource(textureOptions?.image ?? graphicObject?.image);
+				if (image) sources.add(image);
+			});
+		});
+		sources.forEach((source) => loadImageDimensions(source));
+	});
+	const hitboxBounds = 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 graphicBounds = computed(() => {
+		const box = hitbox();
+		const fallback = hitboxBounds();
+		const dimensions = imageDimensions();
+		const graphics = graphicsSignals();
+		let bounds = null;
+		graphics.forEach((graphicObject) => {
+			const textureOptions = resolveTextureOptions(graphicObject);
+			const frame = resolveFirstAnimationFrame(textureOptions);
+			const size = resolveFrameSize(textureOptions, dimensions);
+			const spriteWidth = size.width ?? box?.w;
+			const spriteHeight = size.height ?? box?.h;
+			if (!spriteWidth || !spriteHeight) return;
+			const anchor = normalizeAnchor(optionValue("anchor", frame, textureOptions, graphicObject)) ?? resolveHitboxAnchor(spriteWidth, spriteHeight, optionValue("spriteRealSize", frame, textureOptions, graphicObject), box);
+			const scale = normalizePair(optionValue("scale", frame, textureOptions, graphicObject) ?? graphicScale(graphicObject));
+			const x = toFiniteNumber(optionValue("x", frame, textureOptions, graphicObject), 0);
+			const y = toFiniteNumber(optionValue("y", frame, textureOptions, graphicObject), 0);
+			const leftEdge = -anchor[0] * spriteWidth * scale[0];
+			const rightEdge = (1 - anchor[0]) * spriteWidth * scale[0];
+			const topEdge = -anchor[1] * spriteHeight * scale[1];
+			const bottomEdge = (1 - anchor[1]) * spriteHeight * scale[1];
+			const graphic = {
+				left: x + Math.min(leftEdge, rightEdge),
+				top: y + Math.min(topEdge, bottomEdge),
+				right: x + Math.max(leftEdge, rightEdge),
+				bottom: y + Math.max(topEdge, bottomEdge)
+			};
+			bounds = bounds ? {
+				left: Math.min(bounds.left, graphic.left),
+				top: Math.min(bounds.top, graphic.top),
+				right: Math.max(bounds.right, graphic.right),
+				bottom: Math.max(bounds.bottom, graphic.bottom)
+			} : graphic;
+		});
+		if (!bounds) return fallback;
+		const width = bounds.right - bounds.left;
+		const height = bounds.bottom - bounds.top;
+		return {
+			...bounds,
+			width,
+			height,
+			centerX: bounds.left + width / 2,
+			centerY: bounds.top + height / 2
+		};
+	});
 	const movementAnimations = ["walk", "stand"];
 	const epsilon = 0;
 	const stateX$ = smoothX.animatedState.observable;
@@ -174,7 +372,38 @@ function component($$props) {
 		const yFinished = Math.abs(sy.value.current - sy.value.end) <= epsilon;
 		return !xFinished || !yFinished;
 	}), startWith(false));
-	const animationMovementSubscription = combineLatest([animationName$.pipe(startWith(animationName()), pairwise(), filter(([prev, curr]) => prev !== curr)), moving$]).subscribe(([[prev, curr], isMoving]) => {
+	const animationChange$ = animationName$.pipe(startWith(animationName()), pairwise(), filter(([prev, curr]) => prev !== curr));
+	let beforeRemovePromise = null;
+	let beforeRemoveTransitionValue = null;
+	const resolveRemoveContext = () => {
+		if (!object._removeTransition) return null;
+		const value = object._removeTransition();
+		if (!value || typeof value !== "string") return null;
+		try {
+			const context = JSON.parse(value);
+			if (!context || typeof context !== "object" || !context.active) return null;
+			context.__transitionValue = value;
+			return context;
+		} catch {
+			return null;
+		}
+	};
+	const withTimeout = (promise, timeoutMs = 0) => {
+		if (!timeoutMs || timeoutMs <= 0) return promise;
+		return Promise.race([promise, new Promise((resolve) => setTimeout(resolve, timeoutMs))]);
+	};
+	const runBeforeRemove = () => {
+		const context = resolveRemoveContext();
+		if (!context) return Promise.resolve();
+		if (beforeRemovePromise && beforeRemoveTransitionValue === context.__transitionValue) return beforeRemovePromise;
+		beforeRemoveTransitionValue = context.__transitionValue;
+		beforeRemovePromise = withTimeout(lastValueFrom(hooks.callHooks("client-sprite-onBeforeRemove", object, context)), context.timeoutMs);
+		return beforeRemovePromise;
+	};
+	const removeTransitionSubscription = object._removeTransition?.observable?.subscribe(() => {
+		if (resolveRemoveContext()) runBeforeRemove();
+	});
+	const animationMovementSubscription = combineLatest([animationChange$, moving$]).subscribe(([[prev, curr], isMoving]) => {
 		if (curr == "stand" && !isMoving) realAnimationName.set(curr);
 		else if (curr == "walk" && isMoving) realAnimationName.set(curr);
 		else if (!movementAnimations.includes(curr)) realAnimationName.set(curr);
@@ -184,7 +413,30 @@ function component($$props) {
 			}
 		}
 	});
+	const waitForTemporaryAnimationEnd = (maxDuration = 1200) => {
+		if (!object.animationIsPlaying || !object.animationIsPlaying()) return Promise.resolve();
+		return new Promise((resolve) => {
+			let finished = false;
+			let timeout;
+			let subscription;
+			const finish = () => {
+				if (finished) return;
+				finished = true;
+				clearTimeout(timeout);
+				subscription?.unsubscribe();
+				resolve();
+			};
+			timeout = setTimeout(finish, maxDuration);
+			subscription = object.animationIsPlaying.observable.subscribe((isPlaying) => {
+				if (!isPlaying) finish();
+			});
+			if (finished) subscription.unsubscribe();
+		});
+	};
 	const onBeforeDestroy = async () => {
+		await runBeforeRemove();
+		await waitForTemporaryAnimationEnd();
+		removeTransitionSubscription?.unsubscribe();
 		animationMovementSubscription.unsubscribe();
 		xSubscription.unsubscribe();
 		ySubscription.unsubscribe();
@@ -218,6 +470,16 @@ function component($$props) {
 			object,
 			...compConfig.props
 		}))),
+		h(__ce_component$1, {
+			object,
+			position: "bottom",
+			graphicBounds
+		}),
+		h(__ce_component$1, {
+			object,
+			position: "left",
+			graphicBounds
+		}),
 		h(Particle, {
 			emit: emitParticleTrigger,
 			settings: particleSettings,
@@ -232,6 +494,21 @@ function component($$props) {
 			hitbox,
 			flash: flashConfig
 		}))),
+		h(__ce_component$1, {
+			object,
+			position: "center",
+			graphicBounds
+		}),
+		h(__ce_component$1, {
+			object,
+			position: "right",
+			graphicBounds
+		}),
+		h(__ce_component$1, {
+			object,
+			position: "top",
+			graphicBounds
+		}),
 		loop(normalizedComponentsInFront, (compConfig) => h(Container, { dependencies: compConfig.dependencies }, h(compConfig.component, {
 			object,
 			...compConfig.props

package/dist/components/character.ce.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"character.ce.js","names":[],"sources":["../../src/components/character.ce"],"sourcesContent":["<Container x={smoothX} y={smoothY} zIndex={z} viewportFollow={shouldFollowCamera} controls onBeforeDestroy visible>\n @for (compConfig of normalizedComponentsBehind) {\n <Container>\n <compConfig.component object ...compConfig.props />\n </Container>\n } \n <Particle emit={emitParticleTrigger} settings={particleSettings} zIndex={1000} name={particleName} />\n <Container>\n @for (graphicObj of graphicsSignals) {\n <Sprite \n sheet={sheet(graphicObj)} \n scale={graphicScale(graphicObj)}\n direction \n tint \n hitbox\n flash={flashConfig}\n />\n }\n </Container>\n @for (compConfig of normalizedComponentsInFront) {\n <Container dependencies={compConfig.dependencies}>\n <compConfig.component object ...compConfig.props />\n </Container>\n }\n @for (attachedGui of attachedGuis) {\n @if (shouldDisplayAttachedGui) {\n <Container>\n <attachedGui.component ...attachedGui.data() dependencies={attachedGui.dependencies} object={object} onFinish={(data) => {\n onAttachedGuiFinish(attachedGui, data)\n }} onInteraction={(name, data) => {\n onAttachedGuiInteraction(attachedGui, name, data)\n }} />\n </Container>\n }\n }\n</Container>\n\n<script>\n import { signal, effect, mount, computed, tick, animatedSignal, on } from \"canvasengine\";\n\n import { lastValueFrom, combineLatest, pairwise, filter, map, startWith } from \"rxjs\";\n import { Particle } from \"@canvasengine/presets\";\n import { GameEngineToken, ModulesToken } from \"@rpgjs/common\";\n import { RpgClientEngine } from \"../RpgClientEngine\";\n import { inject } from \"../core/inject\"; \n import { Direction } from \"@rpgjs/common\";\n import Hit from \"./effects/hit.ce\";\n import PlayerComponents from \"./player-components.ce\";\n import { RpgGui } from \"../Gui/Gui\";\n\n const { object, id } = defineProps();\n\n const client = inject(RpgClientEngine);\n const hooks = inject(ModulesToken);\n const guiService = inject(RpgGui);\n\n const spritesheets = client.spritesheets;\n const playerId = client.playerId;\n const componentsBehind = client.spriteComponentsBehind;\n const componentsInFront = client.spriteComponentsInFront;\n const isMe = computed(() => id() === playerId);\n\n /*\n Normalize a single sprite component configuration\n * \n * Handles both direct component references and configuration objects with optional props and dependencies.\n * Extracts the component reference and creates a computed function that returns the props.\n * \n * ## Design\n * \n * Supports two formats:\n * 1. Direct component: `ShadowComponent`\n * 2. Configuration object: `{ component: LightHalo, props: {...}, dependencies: (object) => [...] }`\n * \n * The normalization process:\n * - Extracts the actual component from either format\n * - Extracts dependencies function if provided\n * - Creates a computed function that returns props (static object or dynamic function result)\n * - Returns a normalized object with `component`, `props`, and `dependencies`\n * \n * @param comp - Component reference or configuration object\n * @returns Normalized component configuration with component, props, and dependencies\n * \n * @example\n * ```ts\n * // Direct component\n * normalizeComponent(ShadowComponent)\n * // => { component: ShadowComponent, props: {}, dependencies: undefined }\n * \n * // With static props\n * normalizeComponent({ component: LightHalo, props: { radius: 30 } })\n * // => { component: LightHalo, props: { radius: 30 }, dependencies: undefined }\n * \n * // With dynamic props and dependencies\n * normalizeComponent({ \n * component: HealthBar, \n * props: (object) => ({ hp: object.hp(), maxHp: object.param.maxHp() }),\n * dependencies: (object) => [object.hp, object.param.maxHp]\n * })\n * // => { component: HealthBar, props: {...}, dependencies: (object) => [...] }\n * ```\n /\n const normalizeComponent = (comp) => {\n let componentRef;\n let propsValue;\n let dependenciesFn;\n \n // If it's a direct component reference\n if (typeof comp === 'function' \|\| (comp && typeof comp === 'object' && !comp.component)) {\n componentRef = comp;\n propsValue = undefined;\n dependenciesFn = undefined;\n }\n // If it's a configuration object with component and props\n else if (comp && typeof comp === 'object' && comp.component) {\n componentRef = comp.component;\n // Support both \"data\" (legacy) and \"props\" (new) for backward compatibility\n propsValue = comp.props !== undefined ? comp.props : comp.data;\n dependenciesFn = comp.dependencies;\n }\n // Fallback: treat as direct component\n else {\n componentRef = comp;\n propsValue = undefined;\n dependenciesFn = undefined;\n }\n \n // Return props directly (object or function), not as computed\n // The computed will be created in the template when needed\n return {\n component: componentRef,\n props: typeof propsValue === 'function' ? propsValue(object) : propsValue \|\| {},\n dependencies: dependenciesFn ? dependenciesFn(object) : []\n };\n };\n\n /\n Normalize an array of sprite components\n * \n * Applies normalization to each component in the array using `normalizeComponent`.\n * \n * @param components - Array of component references or configuration objects\n * @returns Array of normalized component configurations\n /\n const normalizeComponents = (components) => {\n return components.map((comp) => normalizeComponent(comp));\n };\n\n\n /\n Normalized components to render behind sprites\n * Handles both direct component references and configuration objects with optional props and dependencies\n * \n * Supports multiple formats:\n * 1. Direct component: `ShadowComponent`\n * 2. Configuration object: `{ component: LightHalo, props: {...} }`\n * 3. With dynamic props: `{ component: LightHalo, props: (object) => {...} }`\n * 4. With dependencies: `{ component: HealthBar, dependencies: (object) => [object.hp, object.param.maxHp] }`\n * \n * Components with dependencies will only be displayed when all dependencies are resolved (!= undefined).\n * The object is passed to the dependencies function to allow sprite-specific dependency resolution.\n * \n * @example\n * ```ts\n * // Direct component\n * componentsBehind: [ShadowComponent]\n * \n * // With static props\n * componentsBehind: [{ component: LightHalo, props: { radius: 30 } }]\n * \n * // With dynamic props and dependencies\n * componentsBehind: [{ \n * component: HealthBar, \n * props: (object) => ({ hp: object.hp(), maxHp: object.param.maxHp() }),\n * dependencies: (object) => [object.hp, object.param.maxHp]\n * }]\n * ```\n /\n const normalizedComponentsBehind = computed(() => {\n return normalizeComponents(componentsBehind());\n });\n\n /\n Normalized components to render in front of sprites\n * Handles both direct component references and configuration objects with optional props and dependencies\n * \n * See `normalizedComponentsBehind` for format details.\n * Components with dependencies will only be displayed when all dependencies are resolved.\n /\n const normalizedComponentsInFront = computed(() => {\n return normalizeComponents(componentsInFront());\n });\n \n /\n Determine if the camera should follow this sprite\n * \n * The camera follows this sprite if:\n * - It's explicitly set as the camera follow target, OR\n * - It's the current player and no explicit target is set (default behavior)\n /\n const shouldFollowCamera = computed(() => {\n const cameraTargetId = client.cameraFollowTargetId();\n // If a target is explicitly set, only follow if this sprite is the target\n if (cameraTargetId !== null) {\n return id() === cameraTargetId;\n }\n // Otherwise, follow the current player (default behavior)\n return isMe();\n });\n\n /\n Get all attached GUI components that should be rendered on sprites\n * These are GUIs with attachToSprite: true\n /\n const attachedGuis = computed(() => {\n return guiService.getAttachedGuis();\n });\n\n /\n Check if attached GUIs should be displayed for this sprite\n * This is controlled by showAttachedGui/hideAttachedGui on the server\n /\n const shouldDisplayAttachedGui = computed(() => {\n return guiService.shouldDisplayAttachedGui(id());\n });\n\n const { \n x, \n y, \n tint, \n direction, \n animationName, \n animationCurrentIndex,\n emitParticleTrigger, \n particleName, \n graphics, \n hitbox,\n isConnected,\n graphicsSignals,\n flashTrigger\n } = object;\n\n /\n Flash configuration signals for dynamic options\n * These signals are updated when the flash trigger is activated with options\n /\n const flashType = signal<'alpha' \| 'tint' \| 'both'>('alpha');\n const flashDuration = signal(300);\n const flashCycles = signal(1);\n const flashAlpha = signal(0.3);\n const flashTint = signal(0xffffff);\n\n /\n Listen to flash trigger to update configuration dynamically\n * When flash is triggered with options, update the signals\n /\n on(flashTrigger, (data) => {\n if (data && typeof data === 'object') {\n if (data.type !== undefined) flashType.set(data.type);\n if (data.duration !== undefined) flashDuration.set(data.duration);\n if (data.cycles !== undefined) flashCycles.set(data.cycles);\n if (data.alpha !== undefined) flashAlpha.set(data.alpha);\n if (data.tint !== undefined) flashTint.set(data.tint);\n }\n });\n\n /\n Flash configuration for the sprite\n * \n * This configuration is used by the flash directive to create visual feedback effects.\n * The flash trigger is exposed through the object, allowing both server events and\n * client-side code to trigger flash animations. Options can be passed dynamically\n * through the trigger, which updates the reactive signals.\n /\n const flashConfig = computed(() => ({\n trigger: flashTrigger,\n type: flashType(),\n duration: flashDuration(),\n cycles: flashCycles(),\n alpha: flashAlpha(),\n tint: flashTint(),\n }));\n\n const particleSettings = client.particleSettings;\n\n const canControls = () => isMe() && object.canMove()\n const keyboardControls = client.globalConfig.keyboardControls;\n\n const visible = computed(() => {\n if (object.isEvent()) {\n return true\n }\n return isConnected()\n });\n\n const controls = signal({\n down: {\n repeat: true,\n bind: keyboardControls.down,\n keyDown() {\n if (canControls()) client.processInput({ input: Direction.Down })\n },\n },\n up: {\n repeat: true,\n bind: keyboardControls.up,\n keyDown() {\n if (canControls()) client.processInput({ input: Direction.Up })\n },\n },\n left: {\n repeat: true,\n bind: keyboardControls.left,\n keyDown() {\n if (canControls()) client.processInput({ input: Direction.Left })\n },\n },\n right: {\n repeat: true,\n bind: keyboardControls.right,\n keyDown() {\n if (canControls()) client.processInput({ input: Direction.Right })\n },\n },\n action: {\n bind: keyboardControls.action,\n keyDown() {\n if (canControls()) {\n client.processAction({ action: 'action' })\n }\n },\n },\n escape: {\n bind: keyboardControls.escape,\n keyDown() {\n if (canControls()) {\n client.processAction({ action: 'escape' })\n }\n },\n },\n gamepad: {\n enabled: true\n }\n });\n\n const smoothX = animatedSignal(x(), {\n duration: isMe() ? 0 : 0\n });\n\n const smoothY = animatedSignal(y(), {\n duration: isMe() ? 0 : 0,\n });\n\n const z = computed(() => {\n return object.y() + object.z()\n });\n\n const realAnimationName = signal(animationName());\n\n const xSubscription = x.observable.subscribe((value) => {\n smoothX.set(value);\n });\n\n const ySubscription = y.observable.subscribe((value) => {\n smoothY.set(value);\n });\n \n const sheet = (graphicObject) => {\n return {\n definition: graphicObject,\n playing: realAnimationName(),\n params: {\n direction: direction()\n },\n onFinish() {\n animationCurrentIndex.update(index => index + 1)\n }\n };\n }\n\n const graphicScale = (graphicObject) => {\n const scale = graphicObject?.scale;\n if (Array.isArray(scale)) return scale;\n if (typeof scale === 'number') return [scale, scale];\n if (scale && typeof scale === 'object') {\n const x = typeof scale.x === 'number' ? scale.x : 1;\n const y = typeof scale.y === 'number' ? scale.y : x;\n return [x, y];\n }\n return undefined;\n }\n\n // Combine animation change detection with movement state from smoothX/smoothY\n const movementAnimations = ['walk', 'stand'];\n const epsilon = 0; // movement threshold to consider the easing still running\n\n const stateX$ = smoothX.animatedState.observable;\n const stateY$ = smoothY.animatedState.observable;\n const animationName$ = animationName.observable;\n\n const moving$ = combineLatest([stateX$, stateY$]).pipe(\n map(([sx, sy]) => {\n const xFinished = Math.abs(sx.value.current - sx.value.end) <= epsilon;\n const yFinished = Math.abs(sy.value.current - sy.value.end) <= epsilon;\n return !xFinished \|\| !yFinished; // moving if X or Y is not finished\n }),\n startWith(false)\n );\n\n const animationChange$ = animationName$.pipe(\n startWith(animationName()),\n pairwise(),\n filter(([prev, curr]) => prev !== curr)\n );\n\n const animationMovementSubscription = combineLatest([animationChange$, moving$]).subscribe(([[prev, curr], isMoving]) => {\n if (curr == 'stand' && !isMoving) {\n realAnimationName.set(curr);\n }\n else if (curr == 'walk' && isMoving) {\n realAnimationName.set(curr);\n }\n else if (!movementAnimations.includes(curr)) {\n realAnimationName.set(curr);\n }\n if (!isMoving && object.animationIsPlaying && object.animationIsPlaying()) {\n if (movementAnimations.includes(curr)) {\n if (typeof object.resetAnimationState === 'function') {\n object.resetAnimationState();\n }\n }\n }\n });\n\n /\n Cleanup subscriptions and call hooks before sprite destruction.\n \n # Design\n * - Prevent memory leaks by unsubscribing from all local subscriptions created in this component.\n * - Execute destruction hooks to notify modules and scene map of sprite removal.\n \n @example\n * await onBeforeDestroy();\n /\n const onBeforeDestroy = async () => {\n animationMovementSubscription.unsubscribe();\n xSubscription.unsubscribe();\n ySubscription.unsubscribe();\n await lastValueFrom(hooks.callHooks(\"client-sprite-onDestroy\", object)) \n await lastValueFrom(hooks.callHooks(\"client-sceneMap-onRemoveSprite\", client.sceneMap, object))\n }\n\n mount((element) => {\n hooks.callHooks(\"client-sprite-onAdd\", object).subscribe()\n hooks.callHooks(\"client-sceneMap-onAddSprite\", client.sceneMap, object).subscribe()\n if (isMe()) client.setKeyboardControls(element.directives.controls)\n })\n\n /\n Handle attached GUI finish event\n * \n * @param gui - The GUI instance\n * @param data - Data passed from the GUI component\n /\n const onAttachedGuiFinish = (gui, data) => {\n guiService.guiClose(gui.name, data);\n };\n\n /\n Handle attached GUI interaction event\n * \n * @param gui - The GUI instance\n * @param name - Interaction name\n * @param data - Interaction data\n */\n const onAttachedGuiInteraction = (gui, name, data) => {\n guiService.guiInteraction(gui.name, name, data);\n };\n\n tick(() => {\n hooks.callHooks(\"client-sprite-onUpdate\").subscribe()\n })\n</script>\n"],"mappings":"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"}
1	+ {"version":3,"file":"character.ce.js","names":[],"sources":["../../src/components/character.ce"],"sourcesContent":["<Container x={smoothX} y={smoothY} zIndex={z} viewportFollow={shouldFollowCamera} controls onBeforeDestroy visible>\n @for (compConfig of normalizedComponentsBehind) {\n <Container>\n <compConfig.component object ...compConfig.props />\n </Container>\n } \n <PlayerComponents object position=\"bottom\" graphicBounds />\n <PlayerComponents object position=\"left\" graphicBounds />\n <Particle emit={emitParticleTrigger} settings={particleSettings} zIndex={1000} name={particleName} />\n <Container>\n @for (graphicObj of graphicsSignals) {\n <Sprite \n sheet={sheet(graphicObj)} \n scale={graphicScale(graphicObj)}\n direction \n tint \n hitbox\n flash={flashConfig}\n />\n }\n </Container>\n <PlayerComponents object position=\"center\" graphicBounds />\n <PlayerComponents object position=\"right\" graphicBounds />\n <PlayerComponents object position=\"top\" graphicBounds />\n @for (compConfig of normalizedComponentsInFront) {\n <Container dependencies={compConfig.dependencies}>\n <compConfig.component object ...compConfig.props />\n </Container>\n }\n @for (attachedGui of attachedGuis) {\n @if (shouldDisplayAttachedGui) {\n <Container>\n <attachedGui.component ...attachedGui.data() dependencies={attachedGui.dependencies} object={object} onFinish={(data) => {\n onAttachedGuiFinish(attachedGui, data)\n }} onInteraction={(name, data) => {\n onAttachedGuiInteraction(attachedGui, name, data)\n }} />\n </Container>\n }\n }\n</Container>\n\n<script>\n import { signal, effect, mount, computed, tick, animatedSignal, on } from \"canvasengine\";\n import { Assets } from \"pixi.js\";\n\n import { lastValueFrom, combineLatest, pairwise, filter, map, startWith } from \"rxjs\";\n import { Particle } from \"@canvasengine/presets\";\n import { GameEngineToken, ModulesToken } from \"@rpgjs/common\";\n import { RpgClientEngine } from \"../RpgClientEngine\";\n import { inject } from \"../core/inject\"; \n import { Direction, Animation } from \"@rpgjs/common\";\n import Hit from \"./effects/hit.ce\";\n import PlayerComponents from \"./player-components.ce\";\n import { RpgGui } from \"../Gui/Gui\";\n\n const { object, id } = defineProps();\n\n const client = inject(RpgClientEngine);\n const hooks = inject(ModulesToken);\n const guiService = inject(RpgGui);\n\n const spritesheets = client.spritesheets;\n const playerId = client.playerId;\n const componentsBehind = client.spriteComponentsBehind;\n const componentsInFront = client.spriteComponentsInFront;\n const isMe = computed(() => id() === playerId);\n\n /*\n Normalize a single sprite component configuration\n * \n * Handles both direct component references and configuration objects with optional props and dependencies.\n * Extracts the component reference and creates a computed function that returns the props.\n * \n * ## Design\n * \n * Supports two formats:\n * 1. Direct component: `ShadowComponent`\n * 2. Configuration object: `{ component: LightHalo, props: {...}, dependencies: (object) => [...] }`\n * \n * The normalization process:\n * - Extracts the actual component from either format\n * - Extracts dependencies function if provided\n * - Creates a computed function that returns props (static object or dynamic function result)\n * - Returns a normalized object with `component`, `props`, and `dependencies`\n * \n * @param comp - Component reference or configuration object\n * @returns Normalized component configuration with component, props, and dependencies\n * \n * @example\n * ```ts\n * // Direct component\n * normalizeComponent(ShadowComponent)\n * // => { component: ShadowComponent, props: {}, dependencies: undefined }\n * \n * // With static props\n * normalizeComponent({ component: LightHalo, props: { radius: 30 } })\n * // => { component: LightHalo, props: { radius: 30 }, dependencies: undefined }\n * \n * // With dynamic props and dependencies\n * normalizeComponent({ \n * component: HealthBar, \n * props: (object) => ({ hp: object.hp(), maxHp: object.param.maxHp() }),\n * dependencies: (object) => [object.hp, object.param.maxHp]\n * })\n * // => { component: HealthBar, props: {...}, dependencies: (object) => [...] }\n * ```\n /\n const normalizeComponent = (comp) => {\n let componentRef;\n let propsValue;\n let dependenciesFn;\n \n // If it's a direct component reference\n if (typeof comp === 'function' \|\| (comp && typeof comp === 'object' && !comp.component)) {\n componentRef = comp;\n propsValue = undefined;\n dependenciesFn = undefined;\n }\n // If it's a configuration object with component and props\n else if (comp && typeof comp === 'object' && comp.component) {\n componentRef = comp.component;\n // Support both \"data\" (legacy) and \"props\" (new) for backward compatibility\n propsValue = comp.props !== undefined ? comp.props : comp.data;\n dependenciesFn = comp.dependencies;\n }\n // Fallback: treat as direct component\n else {\n componentRef = comp;\n propsValue = undefined;\n dependenciesFn = undefined;\n }\n \n // Return props directly (object or function), not as computed\n // The computed will be created in the template when needed\n return {\n component: componentRef,\n props: typeof propsValue === 'function' ? propsValue(object) : propsValue \|\| {},\n dependencies: dependenciesFn ? dependenciesFn(object) : []\n };\n };\n\n /\n Normalize an array of sprite components\n * \n * Applies normalization to each component in the array using `normalizeComponent`.\n * \n * @param components - Array of component references or configuration objects\n * @returns Array of normalized component configurations\n /\n const normalizeComponents = (components) => {\n return components.map((comp) => normalizeComponent(comp));\n };\n\n\n /\n Normalized components to render behind sprites\n * Handles both direct component references and configuration objects with optional props and dependencies\n * \n * Supports multiple formats:\n * 1. Direct component: `ShadowComponent`\n * 2. Configuration object: `{ component: LightHalo, props: {...} }`\n * 3. With dynamic props: `{ component: LightHalo, props: (object) => {...} }`\n * 4. With dependencies: `{ component: HealthBar, dependencies: (object) => [object.hp, object.param.maxHp] }`\n * \n * Components with dependencies will only be displayed when all dependencies are resolved (!= undefined).\n * The object is passed to the dependencies function to allow sprite-specific dependency resolution.\n * \n * @example\n * ```ts\n * // Direct component\n * componentsBehind: [ShadowComponent]\n * \n * // With static props\n * componentsBehind: [{ component: LightHalo, props: { radius: 30 } }]\n * \n * // With dynamic props and dependencies\n * componentsBehind: [{ \n * component: HealthBar, \n * props: (object) => ({ hp: object.hp(), maxHp: object.param.maxHp() }),\n * dependencies: (object) => [object.hp, object.param.maxHp]\n * }]\n * ```\n /\n const normalizedComponentsBehind = computed(() => {\n return normalizeComponents(componentsBehind());\n });\n\n /\n Normalized components to render in front of sprites\n * Handles both direct component references and configuration objects with optional props and dependencies\n * \n * See `normalizedComponentsBehind` for format details.\n * Components with dependencies will only be displayed when all dependencies are resolved.\n /\n const normalizedComponentsInFront = computed(() => {\n return normalizeComponents(componentsInFront());\n });\n \n /\n Determine if the camera should follow this sprite\n * \n * The camera follows this sprite if:\n * - It's explicitly set as the camera follow target, OR\n * - It's the current player and no explicit target is set (default behavior)\n /\n const shouldFollowCamera = computed(() => {\n const cameraTargetId = client.cameraFollowTargetId();\n // If a target is explicitly set, only follow if this sprite is the target\n if (cameraTargetId !== null) {\n return id() === cameraTargetId;\n }\n // Otherwise, follow the current player (default behavior)\n return isMe();\n });\n\n /\n Get all attached GUI components that should be rendered on sprites\n * These are GUIs with attachToSprite: true\n /\n const attachedGuis = computed(() => {\n return guiService.getAttachedGuis();\n });\n\n /\n Check if attached GUIs should be displayed for this sprite\n * This is controlled by showAttachedGui/hideAttachedGui on the server\n /\n const shouldDisplayAttachedGui = computed(() => {\n return guiService.shouldDisplayAttachedGui(id());\n });\n\n const { \n x, \n y, \n tint, \n direction, \n animationName, \n animationCurrentIndex,\n emitParticleTrigger, \n particleName, \n graphics, \n hitbox,\n isConnected,\n graphicsSignals,\n flashTrigger\n } = object;\n\n /\n Flash configuration signals for dynamic options\n * These signals are updated when the flash trigger is activated with options\n /\n const flashType = signal<'alpha' \| 'tint' \| 'both'>('alpha');\n const flashDuration = signal(300);\n const flashCycles = signal(1);\n const flashAlpha = signal(0.3);\n const flashTint = signal(0xffffff);\n\n /\n Listen to flash trigger to update configuration dynamically\n * When flash is triggered with options, update the signals\n /\n on(flashTrigger, (data) => {\n if (data && typeof data === 'object') {\n if (data.type !== undefined) flashType.set(data.type);\n if (data.duration !== undefined) flashDuration.set(data.duration);\n if (data.cycles !== undefined) flashCycles.set(data.cycles);\n if (data.alpha !== undefined) flashAlpha.set(data.alpha);\n if (data.tint !== undefined) flashTint.set(data.tint);\n }\n });\n\n /\n Flash configuration for the sprite\n * \n * This configuration is used by the flash directive to create visual feedback effects.\n * The flash trigger is exposed through the object, allowing both server events and\n * client-side code to trigger flash animations. Options can be passed dynamically\n * through the trigger, which updates the reactive signals.\n /\n const flashConfig = computed(() => ({\n trigger: flashTrigger,\n type: flashType(),\n duration: flashDuration(),\n cycles: flashCycles(),\n alpha: flashAlpha(),\n tint: flashTint(),\n }));\n\n const particleSettings = client.particleSettings;\n\n const canControls = () => isMe() && object.canMove()\n const keyboardControls = client.globalConfig.keyboardControls;\n\n const visible = computed(() => {\n if (object.isEvent()) {\n return true\n }\n return isConnected()\n });\n\n const controls = signal({\n down: {\n repeat: true,\n bind: keyboardControls.down,\n keyDown() {\n if (canControls()) client.processInput({ input: Direction.Down })\n },\n },\n up: {\n repeat: true,\n bind: keyboardControls.up,\n keyDown() {\n if (canControls()) client.processInput({ input: Direction.Up })\n },\n },\n left: {\n repeat: true,\n bind: keyboardControls.left,\n keyDown() {\n if (canControls()) client.processInput({ input: Direction.Left })\n },\n },\n right: {\n repeat: true,\n bind: keyboardControls.right,\n keyDown() {\n if (canControls()) client.processInput({ input: Direction.Right })\n },\n },\n action: {\n bind: keyboardControls.action,\n keyDown() {\n if (canControls()) {\n client.processAction({ action: 'action' })\n }\n },\n },\n escape: {\n bind: keyboardControls.escape,\n keyDown() {\n if (canControls()) {\n client.processAction({ action: 'escape' })\n }\n },\n },\n gamepad: {\n enabled: true\n }\n });\n\n const smoothX = animatedSignal(x(), {\n duration: isMe() ? 0 : 0\n });\n\n const smoothY = animatedSignal(y(), {\n duration: isMe() ? 0 : 0,\n });\n\n const z = computed(() => {\n return object.y() + object.z()\n });\n\n const realAnimationName = signal(animationName());\n\n const xSubscription = x.observable.subscribe((value) => {\n smoothX.set(value);\n });\n\n const ySubscription = y.observable.subscribe((value) => {\n smoothY.set(value);\n });\n \n const sheet = (graphicObject) => {\n return {\n definition: graphicObject,\n playing: realAnimationName(),\n params: {\n direction: direction()\n },\n onFinish() {\n animationCurrentIndex.update(index => index + 1)\n }\n };\n }\n\n const graphicScale = (graphicObject) => {\n const scale = graphicObject?.scale;\n if (Array.isArray(scale)) return scale;\n if (typeof scale === 'number') return [scale, scale];\n if (scale && typeof scale === 'object') {\n const x = typeof scale.x === 'number' ? scale.x : 1;\n const y = typeof scale.y === 'number' ? scale.y : x;\n return [x, y];\n }\n return undefined;\n }\n\n const imageDimensions = signal({});\n const loadingImageDimensions = new Set();\n\n const toPositiveNumber = (value) => {\n const number = typeof value === 'number' ? value : parseFloat(value);\n return Number.isFinite(number) && number > 0 ? number : undefined;\n };\n\n const toFiniteNumber = (value, fallback = 0) => {\n const number = typeof value === 'number' ? value : parseFloat(value);\n return Number.isFinite(number) ? number : fallback;\n };\n\n const clampRatio = (value) => Math.min(1, Math.max(0, value));\n\n const normalizePair = (value, fallback = [1, 1]) => {\n if (Array.isArray(value)) {\n const x = toFiniteNumber(value[0], fallback[0]);\n const y = toFiniteNumber(value[1] ?? value[0], x);\n return [x, y];\n }\n if (typeof value === 'number') {\n return [value, value];\n }\n if (value && typeof value === 'object') {\n const x = toFiniteNumber(value.x, fallback[0]);\n const y = toFiniteNumber(value.y ?? value.x, x);\n return [x, y];\n }\n return fallback;\n };\n\n const normalizeAnchor = (value) => {\n if (!Array.isArray(value)) return undefined;\n const [x, y] = normalizePair(value, [0, 0]);\n return [clampRatio(x), clampRatio(y)];\n };\n\n const resolveImageSource = (image) => {\n if (typeof image === 'string') return image;\n if (typeof image?.default === 'string') return image.default;\n return undefined;\n };\n\n const parentTextureOptions = (graphicObject) => {\n const props = [\n 'width',\n 'height',\n 'framesHeight',\n 'framesWidth',\n 'rectWidth',\n 'rectHeight',\n 'offset',\n 'image',\n 'sound',\n 'spriteRealSize',\n 'scale',\n 'anchor',\n 'pivot',\n 'x',\n 'y',\n 'opacity'\n ];\n\n return props.reduce((options, prop) => {\n if (graphicObject?.[prop] !== undefined) {\n options[prop] = graphicObject[prop];\n }\n return options;\n }, {});\n };\n\n const resolveTextureOptions = (graphicObject) => {\n const textures = graphicObject?.textures ?? {};\n const texture =\n textures[realAnimationName()] ??\n textures[Animation.Stand] ??\n Object.values(textures)[0] ??\n {};\n\n return {\n ...parentTextureOptions(graphicObject),\n ...texture\n };\n };\n\n const resolveFirstAnimationFrame = (textureOptions) => {\n const animations = textureOptions?.animations;\n if (!animations) return {};\n\n try {\n const frames = typeof animations === 'function'\n ? animations({ direction: direction() })\n : animations;\n if (!Array.isArray(frames)) return {};\n const firstGroup = frames[0];\n return Array.isArray(firstGroup) ? firstGroup[0] ?? {} : firstGroup ?? {};\n }\n catch {\n return {};\n }\n };\n\n const optionValue = (prop, frame, textureOptions, graphicObject) => {\n return frame?.[prop] ?? textureOptions?.[prop] ?? graphicObject?.[prop];\n };\n\n const resolveFrameSize = (textureOptions, dimensions) => {\n const framesWidth = toPositiveNumber(textureOptions?.framesWidth) ?? 1;\n const framesHeight = toPositiveNumber(textureOptions?.framesHeight) ?? 1;\n const imageSource = resolveImageSource(textureOptions?.image);\n const loadedSize = imageSource ? dimensions[imageSource] : undefined;\n const fullWidth = toPositiveNumber(textureOptions?.width) ?? loadedSize?.width;\n const fullHeight = toPositiveNumber(textureOptions?.height) ?? loadedSize?.height;\n const width = toPositiveNumber(textureOptions?.rectWidth) ??\n toPositiveNumber(textureOptions?.spriteWidth) ??\n (fullWidth ? fullWidth / framesWidth : undefined);\n const height = toPositiveNumber(textureOptions?.rectHeight) ??\n toPositiveNumber(textureOptions?.spriteHeight) ??\n (fullHeight ? fullHeight / framesHeight : undefined);\n\n return {\n width,\n height\n };\n };\n\n const resolveHitboxAnchor = (spriteWidth, spriteHeight, realSize, box) => {\n if (!spriteWidth \|\| !spriteHeight \|\| !box) {\n return [0, 0];\n }\n\n const heightOfSprite = typeof realSize === 'number' ? realSize : realSize?.height;\n const resolvedHeight = toPositiveNumber(heightOfSprite) ?? spriteHeight;\n const gap = Math.max(0, (spriteHeight - resolvedHeight) / 2);\n const hitboxTopLeftX = clampRatio((spriteWidth - box.w) / 2 / spriteWidth);\n const hitboxTopLeftY = clampRatio((spriteHeight - box.h - gap) / spriteHeight);\n const hitboxCenterX = clampRatio(hitboxTopLeftX + box.w / 2 / spriteWidth);\n const hitboxCenterY = clampRatio(hitboxTopLeftY + box.h / 2 / spriteHeight);\n const footY = clampRatio((spriteHeight - gap) / spriteHeight);\n\n switch (box.anchorMode ?? 'top-left') {\n case 'center':\n return [hitboxCenterX, hitboxCenterY];\n case 'foot':\n return [hitboxCenterX, footY];\n case 'top-left':\n default:\n return [hitboxTopLeftX, hitboxTopLeftY];\n }\n };\n\n const loadImageDimensions = (image) => {\n const source = resolveImageSource(image);\n if (!source \|\| imageDimensions()[source] \|\| loadingImageDimensions.has(source)) {\n return;\n }\n\n loadingImageDimensions.add(source);\n Assets.load(source)\n .then((texture) => {\n const width = toPositiveNumber(texture?.width);\n const height = toPositiveNumber(texture?.height);\n if (!width \|\| !height) return;\n\n imageDimensions.update((dimensions) => ({\n ...dimensions,\n [source]: { width, height }\n }));\n })\n .catch(() => {})\n .finally(() => {\n loadingImageDimensions.delete(source);\n });\n };\n\n effect(() => {\n const sources = new Set();\n\n graphicsSignals().forEach((graphicObject) => {\n const baseImage = resolveImageSource(graphicObject?.image);\n if (baseImage) sources.add(baseImage);\n\n Object.values(graphicObject?.textures ?? {}).forEach((textureOptions) => {\n const image = resolveImageSource(textureOptions?.image ?? graphicObject?.image);\n if (image) sources.add(image);\n });\n });\n\n sources.forEach((source) => loadImageDimensions(source));\n });\n\n const hitboxBounds = 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\n const graphicBounds = computed(() => {\n const box = hitbox();\n const fallback = hitboxBounds();\n const dimensions = imageDimensions();\n const graphics = graphicsSignals();\n let bounds = null;\n\n graphics.forEach((graphicObject) => {\n const textureOptions = resolveTextureOptions(graphicObject);\n const frame = resolveFirstAnimationFrame(textureOptions);\n const size = resolveFrameSize(textureOptions, dimensions);\n const spriteWidth = size.width ?? box?.w;\n const spriteHeight = size.height ?? box?.h;\n\n if (!spriteWidth \|\| !spriteHeight) {\n return;\n }\n\n const explicitAnchor = normalizeAnchor(optionValue('anchor', frame, textureOptions, graphicObject));\n const anchor = explicitAnchor ?? resolveHitboxAnchor(\n spriteWidth,\n spriteHeight,\n optionValue('spriteRealSize', frame, textureOptions, graphicObject),\n box\n );\n const scale = normalizePair(optionValue('scale', frame, textureOptions, graphicObject) ?? graphicScale(graphicObject));\n const x = toFiniteNumber(optionValue('x', frame, textureOptions, graphicObject), 0);\n const y = toFiniteNumber(optionValue('y', frame, textureOptions, graphicObject), 0);\n const leftEdge = -anchor[0] spriteWidth * scale[0];\n const rightEdge = (1 - anchor[0]) * spriteWidth * scale[0];\n const topEdge = -anchor[1] * spriteHeight * scale[1];\n const bottomEdge = (1 - anchor[1]) * spriteHeight * scale[1];\n const graphic = {\n left: x + Math.min(leftEdge, rightEdge),\n top: y + Math.min(topEdge, bottomEdge),\n right: x + Math.max(leftEdge, rightEdge),\n bottom: y + Math.max(topEdge, bottomEdge)\n };\n\n bounds = bounds\n ? {\n left: Math.min(bounds.left, graphic.left),\n top: Math.min(bounds.top, graphic.top),\n right: Math.max(bounds.right, graphic.right),\n bottom: Math.max(bounds.bottom, graphic.bottom)\n }\n : graphic;\n });\n\n if (!bounds) {\n return fallback;\n }\n\n const width = bounds.right - bounds.left;\n const height = bounds.bottom - bounds.top;\n\n return {\n ...bounds,\n width,\n height,\n centerX: bounds.left + width / 2,\n centerY: bounds.top + height / 2\n };\n });\n\n // Combine animation change detection with movement state from smoothX/smoothY\n const movementAnimations = ['walk', 'stand'];\n const epsilon = 0; // movement threshold to consider the easing still running\n\n const stateX$ = smoothX.animatedState.observable;\n const stateY$ = smoothY.animatedState.observable;\n const animationName$ = animationName.observable;\n\n const moving$ = combineLatest([stateX$, stateY$]).pipe(\n map(([sx, sy]) => {\n const xFinished = Math.abs(sx.value.current - sx.value.end) <= epsilon;\n const yFinished = Math.abs(sy.value.current - sy.value.end) <= epsilon;\n return !xFinished \|\| !yFinished; // moving if X or Y is not finished\n }),\n startWith(false)\n );\n\n const animationChange$ = animationName$.pipe(\n startWith(animationName()),\n pairwise(),\n filter(([prev, curr]) => prev !== curr)\n );\n\n let beforeRemovePromise = null;\n let beforeRemoveTransitionValue = null;\n const resolveRemoveContext = () => {\n if (!object._removeTransition) return null;\n const value = object._removeTransition();\n if (!value \|\| typeof value !== 'string') return null;\n try {\n const context = JSON.parse(value);\n if (!context \|\| typeof context !== 'object' \|\| !context.active) return null;\n context.__transitionValue = value;\n return context;\n }\n catch {\n return null;\n }\n };\n\n const withTimeout = (promise, timeoutMs = 0) => {\n if (!timeoutMs \|\| timeoutMs <= 0) return promise;\n return Promise.race([\n promise,\n new Promise((resolve) => setTimeout(resolve, timeoutMs)),\n ]);\n };\n\n const runBeforeRemove = () => {\n const context = resolveRemoveContext();\n if (!context) return Promise.resolve();\n if (beforeRemovePromise && beforeRemoveTransitionValue === context.__transitionValue) {\n return beforeRemovePromise;\n }\n beforeRemoveTransitionValue = context.__transitionValue;\n beforeRemovePromise = withTimeout(\n lastValueFrom(hooks.callHooks(\"client-sprite-onBeforeRemove\", object, context)),\n context.timeoutMs\n );\n return beforeRemovePromise;\n };\n\n const removeTransitionSubscription = object._removeTransition?.observable?.subscribe(() => {\n if (resolveRemoveContext()) {\n runBeforeRemove();\n }\n });\n\n const animationMovementSubscription = combineLatest([animationChange$, moving$]).subscribe(([[prev, curr], isMoving]) => {\n if (curr == 'stand' && !isMoving) {\n realAnimationName.set(curr);\n }\n else if (curr == 'walk' && isMoving) {\n realAnimationName.set(curr);\n }\n else if (!movementAnimations.includes(curr)) {\n realAnimationName.set(curr);\n }\n if (!isMoving && object.animationIsPlaying && object.animationIsPlaying()) {\n if (movementAnimations.includes(curr)) {\n if (typeof object.resetAnimationState === 'function') {\n object.resetAnimationState();\n }\n }\n }\n });\n\n /*\n Cleanup subscriptions and call hooks before sprite destruction.\n \n # Design\n * - Prevent memory leaks by unsubscribing from all local subscriptions created in this component.\n * - Execute destruction hooks to notify modules and scene map of sprite removal.\n \n @example\n * await onBeforeDestroy();\n /\n const waitForTemporaryAnimationEnd = (maxDuration = 1200) => {\n if (!object.animationIsPlaying \|\| !object.animationIsPlaying()) {\n return Promise.resolve();\n }\n\n return new Promise((resolve) => {\n let finished = false;\n let timeout;\n let subscription;\n const finish = () => {\n if (finished) return;\n finished = true;\n clearTimeout(timeout);\n subscription?.unsubscribe();\n resolve();\n };\n timeout = setTimeout(finish, maxDuration);\n subscription = object.animationIsPlaying.observable.subscribe((isPlaying) => {\n if (!isPlaying) finish();\n });\n if (finished) subscription.unsubscribe();\n });\n };\n\n const onBeforeDestroy = async () => {\n await runBeforeRemove();\n await waitForTemporaryAnimationEnd();\n removeTransitionSubscription?.unsubscribe();\n animationMovementSubscription.unsubscribe();\n xSubscription.unsubscribe();\n ySubscription.unsubscribe();\n await lastValueFrom(hooks.callHooks(\"client-sprite-onDestroy\", object)) \n await lastValueFrom(hooks.callHooks(\"client-sceneMap-onRemoveSprite\", client.sceneMap, object))\n }\n\n mount((element) => {\n hooks.callHooks(\"client-sprite-onAdd\", object).subscribe()\n hooks.callHooks(\"client-sceneMap-onAddSprite\", client.sceneMap, object).subscribe()\n if (isMe()) client.setKeyboardControls(element.directives.controls)\n })\n\n /\n Handle attached GUI finish event\n * \n * @param gui - The GUI instance\n * @param data - Data passed from the GUI component\n /\n const onAttachedGuiFinish = (gui, data) => {\n guiService.guiClose(gui.name, data);\n };\n\n /\n Handle attached GUI interaction event\n * \n * @param gui - The GUI instance\n * @param name - Interaction name\n * @param data - Interaction data\n */\n const onAttachedGuiInteraction = (gui, name, data) => {\n guiService.guiInteraction(gui.name, name, data);\n };\n\n tick(() => {\n hooks.callHooks(\"client-sprite-onUpdate\").subscribe()\n })\n</script>\n"],"mappings":"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"}

package/dist/components/dynamics/bar.ce.js ADDED Viewed

@@ -0,0 +1,96 @@
+import { resolveDynamicValue } from "./parse-value.js";
+import { Container, Graphics, Text, computed, cond, h, useDefineProps, useProps } from "canvasengine";
+//#region src/components/dynamics/bar.ce
+function component($$props) {
+	useProps($$props);
+	const { object, current, max, style, text } = useDefineProps($$props)();
+	const read = (prop, fallback) => prop ? prop() : fallback;
+	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 toColor = (value, fallback) => {
+		const resolved = resolveDynamicValue(value, object);
+		if (typeof resolved === "number") return resolved;
+		if (typeof resolved === "string" && resolved.startsWith("#")) return parseInt(resolved.slice(1), 16);
+		return resolved ?? fallback;
+	};
+	const config = computed(() => read(style, {}) ?? {});
+	const width = computed(() => toNumber(config().width, 50));
+	const height = computed(() => toNumber(config().height, 8));
+	const borderRadius = computed(() => toNumber(config().borderRadius, 3));
+	const borderWidth = computed(() => toNumber(config().borderWidth, 1));
+	const backgroundColor = computed(() => toColor(config().bgColor, 1450302));
+	const fillColor = computed(() => toColor(config().fillColor, 4906624));
+	const borderColor = computed(() => toColor(config().borderColor, 4871528));
+	const opacity = computed(() => Math.max(0, Math.min(1, toNumber(config().opacity, 1))));
+	const currentValue = computed(() => toNumber(read(current, 0), 0));
+	const maxValue = computed(() => Math.max(0, toNumber(read(max, 0), 0)));
+	const percent = computed(() => {
+		const max = maxValue();
+		if (max <= 0) return 0;
+		return Math.max(0, Math.min(1, currentValue() / max));
+	});
+	const fillWidth = computed(() => Math.max(0, width() * percent()));
+	const labelTemplate = computed(() => read(text, null));
+	const labelText = computed(() => {
+		const template = labelTemplate();
+		if (template == null || template === "") return "";
+		const value = String(template).replace(/\{\$current\}/g, String(currentValue())).replace(/\{\$max\}/g, String(maxValue())).replace(/\{\$percent\}/g, String(Math.round(percent() * 100)));
+		return String(resolveDynamicValue(value, object) ?? "");
+	});
+	const labelSize = computed(() => toNumber(config().fontSize, 10));
+	const hasLabel = computed(() => labelText().length > 0);
+	const labelOffset = computed(() => hasLabel() ? labelSize() + 2 : 0);
+	const containerHeight = computed(() => labelOffset() + height());
+	const labelColor = computed(() => toColor(config().textColor, 16777215));
+	const labelPosition = computed(() => ({
+		x: 0,
+		y: 0
+	}));
+	const drawBar = (g) => {
+		g.roundRect(0, labelOffset(), width(), height(), borderRadius());
+		g.fill({
+			color: backgroundColor(),
+			alpha: opacity()
+		});
+		const currentWidth = fillWidth();
+		if (currentWidth > 0) {
+			g.roundRect(0, labelOffset(), currentWidth, height(), borderRadius());
+			g.fill({
+				color: fillColor(),
+				alpha: opacity()
+			});
+		}
+		const strokeWidth = borderWidth();
+		if (strokeWidth <= 0) return;
+		g.roundRect(0, labelOffset(), width(), height(), borderRadius());
+		g.stroke({
+			color: borderColor(),
+			width: strokeWidth,
+			alpha: opacity()
+		});
+	};
+	return h(Container, {
+		width,
+		height: containerHeight,
+		minWidth: width,
+		minHeight: containerHeight
+	}, [h(Graphics, {
+		width,
+		height: containerHeight,
+		draw: drawBar
+	}), cond(hasLabel, () => h(Text, {
+		text: labelText,
+		x: labelPosition.x,
+		y: labelPosition.y,
+		size: labelSize,
+		color: labelColor
+	}))]);
+}
+var __ce_component = component;
+//#endregion
+export { __ce_component as default };
+//# sourceMappingURL=bar.ce.js.map

package/dist/components/dynamics/bar.ce.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"bar.ce.js","names":[],"sources":["../../../src/components/dynamics/bar.ce"],"sourcesContent":["<Container width={width} height={containerHeight} minWidth={width} minHeight={containerHeight}>\n <Graphics width={width} height={containerHeight} draw={drawBar} />\n @if (hasLabel) {\n <Text text={labelText} x={labelPosition.x} y={labelPosition.y} size={labelSize} color={labelColor} />\n }\n</Container>\n\n<script>\nimport { computed } from \"canvasengine\";\nimport { resolveDynamicValue } from \"./parse-value\";\n\nconst { object, current, max, style, text } = defineProps();\n\nconst read = (prop, fallback) => prop ? prop() : fallback;\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 toColor = (value, fallback) => {\n const resolved = resolveDynamicValue(value, object);\n if (typeof resolved === 'number') return resolved;\n if (typeof resolved === 'string' && resolved.startsWith('#')) {\n return parseInt(resolved.slice(1), 16);\n }\n return resolved ?? fallback;\n};\n\nconst config = computed(() => read(style, {}) ?? {});\nconst width = computed(() => toNumber(config().width, 50));\nconst height = computed(() => toNumber(config().height, 8));\nconst borderRadius = computed(() => toNumber(config().borderRadius, 3));\nconst borderWidth = computed(() => toNumber(config().borderWidth, 1));\nconst backgroundColor = computed(() => toColor(config().bgColor, 0x16213e));\nconst fillColor = computed(() => toColor(config().fillColor, 0x4ade80));\nconst borderColor = computed(() => toColor(config().borderColor, 0x4a5568));\nconst opacity = computed(() => Math.max(0, Math.min(1, toNumber(config().opacity, 1))));\n\nconst currentValue = computed(() => toNumber(read(current, 0), 0));\nconst maxValue = computed(() => Math.max(0, toNumber(read(max, 0), 0)));\nconst percent = computed(() => {\n const max = maxValue();\n if (max <= 0) return 0;\n return Math.max(0, Math.min(1, currentValue() / max));\n});\n\nconst fillWidth = computed(() => Math.max(0, width() * percent()));\nconst labelTemplate = computed(() => read(text, null));\nconst labelText = computed(() => {\n const template = labelTemplate();\n if (template == null || template === '') return '';\n\n const value = String(template)\n .replace(/\\{\\$current\\}/g, String(currentValue()))\n .replace(/\\{\\$max\\}/g, String(maxValue()))\n .replace(/\\{\\$percent\\}/g, String(Math.round(percent() * 100)));\n\n return String(resolveDynamicValue(value, object) ?? '');\n});\nconst labelSize = computed(() => toNumber(config().fontSize, 10));\nconst hasLabel = computed(() => labelText().length > 0);\nconst labelOffset = computed(() => hasLabel() ? labelSize() + 2 : 0);\nconst containerHeight = computed(() => labelOffset() + height());\nconst labelColor = computed(() => toColor(config().textColor, 0xffffff));\nconst labelPosition = computed(() => ({\n x: 0,\n y: 0\n}));\n\nconst drawBar = (g) => {\n g.roundRect(0, labelOffset(), width(), height(), borderRadius());\n g.fill({ color: backgroundColor(), alpha: opacity() });\n\n const currentWidth = fillWidth();\n if (currentWidth > 0) {\n g.roundRect(0, labelOffset(), currentWidth, height(), borderRadius());\n g.fill({ color: fillColor(), alpha: opacity() });\n }\n \n const strokeWidth = borderWidth();\n if (strokeWidth <= 0) return;\n g.roundRect(0, labelOffset(), width(), height(), borderRadius());\n g.stroke({ color: borderColor(), width: strokeWidth, alpha: opacity() });\n};\n</script>\n"],"mappings":"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"}

package/dist/components/dynamics/image.ce.js ADDED Viewed

@@ -0,0 +1,23 @@
+import { inject } from "../../core/inject.js";
+import { resolveDynamicValue } from "./parse-value.js";
+import { RpgClientEngine } from "../../RpgClientEngine.js";
+import { Sprite, computed, h, useDefineProps, useProps } from "canvasengine";
+//#region src/components/dynamics/image.ce
+function component($$props) {
+	useProps($$props);
+	const { object, value } = useDefineProps($$props)();
+	const client = inject(RpgClientEngine);
+	return h(Sprite, { sheet: computed(() => {
+		const id = resolveDynamicValue(value?.(), object);
+		if (!id) return null;
+		return {
+			definition: client.getSpriteSheet(id),
+			playing: "default"
+		};
+	}) });
+}
+var __ce_component = component;
+//#endregion
+export { __ce_component as default };
+//# sourceMappingURL=image.ce.js.map

package/dist/components/dynamics/image.ce.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"image.ce.js","names":[],"sources":["../../../src/components/dynamics/image.ce"],"sourcesContent":["<Sprite sheet={sheet} />\n\n<script>\nimport { computed } from \"canvasengine\";\nimport { RpgClientEngine } from \"../../RpgClientEngine\";\nimport { inject } from \"../../core/inject\";\nimport { resolveDynamicValue } from \"./parse-value\";\n\nconst { object, value } = defineProps();\nconst client = inject(RpgClientEngine);\n\nconst sheet = computed(() => {\n const id = resolveDynamicValue(value?.(), object);\n if (!id) return null;\n return {\n definition: client.getSpriteSheet(id),\n playing: 'default'\n };\n});\n</script>\n"],"mappings":";;;;;AASM,SAAS,UAAO,SAAA;;CAGd,MAAK,EAAA,QAAA,UADe,eAAC,QACe,EAAA;CAC5C,MAAM,SAAK,OAAW,gBAAA;2BACb,eAAA;EACL,MAAA,KAAW,oBAAQ,SAAkB,EAAA,OAAA;EACrC,IAAA,CAAA,IACD,OAAA;EACD,OAAA;GACM,YAAA,OAAA,eAAA,GAAA"}

package/dist/components/dynamics/parse-value.d.ts CHANGED Viewed

@@ -1 +1,4 @@
-export declare const parseDynamicValue: (value: any, object?: any) => import('canvasengine').ComputedSignal<string>;
+export declare const getDynamicValue: (property: string, object?: any) => any;
+export declare const resolveDynamicValue: (value: any, object?: any) => any;
+export declare const resolveDynamicProps: (props: any, object?: any) => any;
+export declare const parseDynamicValue: (value: any, object?: any) => any;