@rpgjs/action-battle 5.0.0-beta.4 → 5.0.0-beta.6

package/dist/client/index6.js

@@ -1,101 +1,307 @@
-import { actionBattleTargetingState, actionBattleUiOptions } from "./index3.js";
-import { parseAoeMask } from "./index5.js";
+import { actionBattleTargetingState, actionBattleUiOptions, moveTargetingOffset, startTargeting, stopTargeting } from "./index5.js";
 import { RpgClientEngine, inject } from "@rpgjs/client";
-import { Container, Graphics, computed, cond, h, useDefineProps, useProps } from "canvasengine";
-//#region src/components/targeting-overlay.ce
+import { DOMContainer, DOMElement, DOMSprite, computed, cond, effect, h, loop, signal, useDefineProps, useProps } from "canvasengine";
+//#region src/components/action-bar.ce
+if (typeof document !== "undefined" && !document.getElementById("ce-style--home-runner-work-RPG-JS-RPG-JS-packages-action-battle-src-components-action-bar-ce")) {
+	const styleElement = document.createElement("style");
+	styleElement.id = "ce-style--home-runner-work-RPG-JS-RPG-JS-packages-action-battle-src-components-action-bar-ce";
+	styleElement.textContent = ".action-battle-actionbar-root {\n    pointer-events: none;\n  }\n\n  .action-battle-actionbar {\n    position: absolute;\n    left: 12px;\n    right: 12px;\n    bottom: 12px;\n    pointer-events: auto;\n    display: flex;\n    justify-content: center;\n  }\n\n  .action-battle-actionbar-plate {\n    width: min(760px, 100%);\n    --rpg-ui-hotbar-size: clamp(38px, 8vw, 52px);\n  }\n\n  .action-battle-actionbar-track {\n    --rpg-ui-hotbar-slots: 10;\n  }";
+	document.head.appendChild(styleElement);
+}
 function component($$props) {
 	useProps($$props);
-	const { object } = useDefineProps($$props)();
+	const defineProps = useDefineProps($$props);
 	const engine = inject(RpgClientEngine);
-	const isCurrentPlayer = computed(() => {
-		if (!object?.id) return false;
-		return (typeof object.id === "function" ? object.id() : object.id) === engine.playerId;
-	});
+	const keyboardControls = engine.globalConfig.keyboardControls;
+	const { data, onInteraction, onBack } = defineProps();
+	const ACTION_BAR_SIZE = 10;
+	const SLOT_LABELS = [
+		"1",
+		"2",
+		"3",
+		"4",
+		"5",
+		"6",
+		"7",
+		"8",
+		"9",
+		"0"
+	];
+	const SLOT_CONFIG_KEYS = [
+		"hotbar1",
+		"hotbar2",
+		"hotbar3",
+		"hotbar4",
+		"hotbar5",
+		"hotbar6",
+		"hotbar7",
+		"hotbar8",
+		"hotbar9",
+		"hotbar0"
+	];
+	const selectedSlotIndex = signal(-1);
 	const uiOptions = computed(() => actionBattleUiOptions());
-	const targetingState = computed(() => actionBattleTargetingState());
-	const shouldRender = computed(() => {
-		if (!isCurrentPlayer()) return false;
-		if (!uiOptions().targeting?.enabled) return false;
-		return targetingState().active;
+	const showItems = computed(() => {
+		const mode = uiOptions().actionBar?.mode || "both";
+		return mode === "items" || mode === "both";
 	});
-	const getTileSize = () => {
-		const uiTile = uiOptions().targeting?.tileSize;
-		if (uiTile?.width && uiTile?.height) return uiTile;
-		const hitbox = object.hitbox?.() || {
-			w: 32,
-			h: 32
-		};
-		return {
-			width: hitbox.w || 32,
-			height: hitbox.h || 32
-		};
+	const showSkills = computed(() => {
+		const mode = uiOptions().actionBar?.mode || "both";
+		return mode === "skills" || mode === "both";
+	});
+	const isTargeting = computed(() => actionBattleTargetingState().active);
+	const iconSheet = (iconId) => ({
+		definition: engine.getSpriteSheet(iconId),
+		playing: "default"
+	});
+	const resolveProp = (value) => typeof value === "function" ? value() : value;
+	const actionBarData = computed(() => resolveProp(data) || {
+		items: [],
+		skills: []
+	});
+	const actionBarSlots = computed(() => {
+		const entries = [];
+		if (showSkills()) (actionBarData().skills || []).forEach((skill, index) => {
+			entries.push({
+				type: "skill",
+				skill,
+				item: null,
+				sourceIndex: index
+			});
+		});
+		if (showItems()) (actionBarData().items || []).forEach((item, index) => {
+			entries.push({
+				type: "item",
+				skill: null,
+				item,
+				sourceIndex: index
+			});
+		});
+		const slots = entries.slice(0, ACTION_BAR_SIZE).map((entry, index) => ({
+			...entry,
+			label: SLOT_LABELS[index]
+		}));
+		while (slots.length < ACTION_BAR_SIZE) slots.push({
+			type: "empty",
+			skill: null,
+			item: null,
+			sourceIndex: -1,
+			label: SLOT_LABELS[slots.length]
+		});
+		return slots;
+	});
+	const hasSlotEntry = (slot) => slot.type === "skill" || slot.type === "item";
+	const isSlotDisabled = (slot) => {
+		if (!hasSlotEntry(slot)) return true;
+		const entry = slot.type === "skill" ? slot.skill : slot.item;
+		return !entry || !entry.usable;
+	};
+	const getItemQuantity = (item) => {
+		if (!item) return 0;
+		if (typeof item.quantity === "function") return item.quantity();
+		return item.quantity || 0;
+	};
+	const selectItem = (item) => {
+		if (!item || !item.usable) return;
+		if (onInteraction) onInteraction("useItem", { id: item.id });
+	};
+	const selectSkill = (skill) => {
+		if (!skill || !skill.usable) return;
+		if ((skill.range ?? 0) > 0 || skill.aoeMask) {
+			startTargeting(skill);
+			return;
+		}
+		if (onInteraction) onInteraction("useSkill", { id: skill.id });
 	};
-	const getOriginTile = () => {
-		const hitbox = object.hitbox?.() || {
+	const selectSlot = (index) => {
+		const slot = actionBarSlots()[index];
+		if (!slot || !hasSlotEntry(slot)) return;
+		if (slot.type === "skill") {
+			selectSkill(slot.skill);
+			return;
+		}
+		selectItem(slot.item);
+	};
+	const onSelectSlot = (index) => () => {
+		selectedSlotIndex.set(index);
+		selectSlot(index);
+	};
+	const getPlayerTile = () => {
+		const player = engine.scene.getCurrentPlayer();
+		if (!player) return null;
+		const hitbox = player.hitbox?.() || {
 			w: 32,
 			h: 32
 		};
-		const tileSize = getTileSize();
+		const tileWidth = hitbox.w || 32;
+		const tileHeight = hitbox.h || 32;
 		return {
-			x: Math.floor((object.x() + hitbox.w / 2) / tileSize.width),
-			y: Math.floor((object.y() + hitbox.h / 2) / tileSize.height)
+			x: Math.floor((player.x() + hitbox.w / 2) / tileWidth),
+			y: Math.floor((player.y() + hitbox.h / 2) / tileHeight)
 		};
 	};
-	const toColor = (value, fallback) => {
-		if (typeof value === "number") return value;
-		return fallback;
-	};
-	const drawGrid = (g) => {
-		const state = targetingState();
-		if (!state.active) return;
-		const tileSize = getTileSize();
-		const origin = getOriginTile();
+	const confirmTargeting = () => {
+		const state = actionBattleTargetingState();
+		if (!state.skill) return;
+		const origin = getPlayerTile();
+		if (!origin) return;
 		const target = {
 			x: origin.x + state.offset.x,
 			y: origin.y + state.offset.y
 		};
-		const mask = parseAoeMask(state.aoeMask);
-		const colors = uiOptions().targeting?.colors || {};
-		const areaColor = toColor(colors.area, 3120887);
-		const edgeColor = toColor(colors.edge, 1796760);
-		const cursorColor = toColor(colors.cursor, 16765286);
-		const showGrid = uiOptions().targeting?.showGrid !== false;
-		const playerX = object.x();
-		const playerY = object.y();
-		g.clear();
-		mask.cells.forEach((cell) => {
-			const tileX = target.x + cell.dx;
-			const tileY = target.y + cell.dy;
-			const worldX = tileX * tileSize.width;
-			const worldY = tileY * tileSize.height;
-			const relX = worldX - playerX;
-			const relY = worldY - playerY;
-			g.rect(relX, relY, tileSize.width, tileSize.height);
-			g.fill({
-				color: areaColor,
-				alpha: .35
-			});
-			if (showGrid) {
-				g.rect(relX, relY, tileSize.width, tileSize.height);
-				g.stroke({
-					color: edgeColor,
-					alpha: .9,
-					width: 1
-				});
-			}
+		if (onInteraction) onInteraction("useSkill", {
+			id: state.skill.id,
+			target
 		});
-		const cursorWorldX = target.x * tileSize.width;
-		const cursorWorldY = target.y * tileSize.height;
-		const cursorRelX = cursorWorldX - playerX;
-		const cursorRelY = cursorWorldY - playerY;
-		g.rect(cursorRelX, cursorRelY, tileSize.width, tileSize.height);
-		g.stroke({
-			color: cursorColor,
-			alpha: 1,
-			width: 2
+		stopTargeting();
+	};
+	const resolveKeyBind = (key) => {
+		if (!key) return null;
+		if (typeof key === "string" && keyboardControls?.[key]) return keyboardControls[key];
+		return key;
+	};
+	const slotBind = (index) => keyboardControls?.[SLOT_CONFIG_KEYS[index]] || SLOT_LABELS[index];
+	const buildControls = () => {
+		const hotbarControls = {};
+		actionBarSlots().forEach((slot, index) => {
+			if (!hasSlotEntry(slot)) return;
+			const bind = slotBind(index);
+			hotbarControls[`slot-${index}`] = {
+				bind,
+				keyDown() {
+					if (isTargeting()) return;
+					selectedSlotIndex.set(index);
+					selectSlot(index);
+				}
+			};
+			if (slot.type === "skill") {
+				const skillBind = resolveKeyBind(slot.skill?.key);
+				if (!skillBind || skillBind === bind) return;
+				hotbarControls[`skill-${index}`] = {
+					bind: skillBind,
+					keyDown() {
+						if (isTargeting()) return;
+						selectedSlotIndex.set(index);
+						selectSlot(index);
+					}
+				};
+			}
 		});
+		return {
+			left: {
+				repeat: true,
+				bind: keyboardControls.left,
+				throttle: 150,
+				keyDown() {
+					if (isTargeting()) moveTargetingOffset(-1, 0);
+				}
+			},
+			right: {
+				repeat: true,
+				bind: keyboardControls.right,
+				throttle: 150,
+				keyDown() {
+					if (isTargeting()) moveTargetingOffset(1, 0);
+				}
+			},
+			up: {
+				repeat: true,
+				bind: keyboardControls.up,
+				throttle: 150,
+				keyDown() {
+					if (isTargeting()) moveTargetingOffset(0, -1);
+				}
+			},
+			down: {
+				repeat: true,
+				bind: keyboardControls.down,
+				throttle: 150,
+				keyDown() {
+					if (isTargeting()) moveTargetingOffset(0, 1);
+				}
+			},
+			action: {
+				bind: keyboardControls.action,
+				keyDown() {
+					if (isTargeting()) confirmTargeting();
+				}
+			},
+			escape: {
+				bind: keyboardControls.escape,
+				keyDown() {
+					if (isTargeting()) {
+						stopTargeting();
+						return;
+					}
+					if (onBack) onBack();
+				}
+			},
+			...hotbarControls,
+			gamepad: { enabled: true }
+		};
 	};
-	return h(Container, null, cond(shouldRender, () => h(Graphics, { draw: drawGrid })));
+	const controls = signal(buildControls());
+	effect(() => {
+		controls.set(buildControls());
+	});
+	return h(DOMContainer, {
+		width: "100%",
+		height: "100%",
+		attrs: { class: "action-battle-actionbar-root" },
+		controls
+	}, h(DOMElement, {
+		element: "div",
+		attrs: { class: "action-battle-actionbar" }
+	}, h(DOMElement, {
+		element: "div",
+		attrs: { class: "rpg-ui-hotbar action-battle-actionbar-plate" }
+	}, h(DOMElement, {
+		element: "div",
+		attrs: { class: "rpg-ui-hotbar-track action-battle-actionbar-track" }
+	}, loop(actionBarSlots, (slot, index) => h(DOMElement, {
+		element: "div",
+		attrs: {
+			class: "rpg-ui-hotbar-slot action-battle-actionbar-slot",
+			"data-selected": computed(() => selectedSlotIndex() === index ? "true" : "false"),
+			"data-disabled": computed(() => isSlotDisabled(slot) ? "true" : "false"),
+			"data-empty": computed(() => hasSlotEntry(slot) ? "false" : "true"),
+			"data-type": slot.type,
+			tabindex: computed(() => hasSlotEntry(slot) ? index : -1),
+			click: hasSlotEntry(slot) ? onSelectSlot(index) : void 0
+		}
+	}, [
+		h(DOMElement, {
+			element: "span",
+			attrs: { class: "rpg-ui-hotbar-key action-battle-actionbar-key" },
+			textContent: slot.label
+		}),
+		cond(computed(() => slot.type === "skill" && slot.skill?.icon), () => h(DOMSprite, {
+			sheet: computed(() => iconSheet(slot.skill.icon)),
+			width: "60px",
+			height: "60px",
+			scale: 2,
+			objectFit: "contain"
+		}), [computed(() => slot.type === "item" && slot.item?.icon), () => h(DOMSprite, {
+			sheet: computed(() => iconSheet(slot.item.icon)),
+			width: "60px",
+			height: "60px",
+			scale: 2,
+			objectFit: "contain"
+		})], [computed(() => slot.type === "skill" && slot.skill), () => h(DOMElement, {
+			element: "span",
+			attrs: { class: "rpg-ui-hotbar-text action-battle-actionbar-text" },
+			textContent: slot.skill.name
+		})], [computed(() => slot.type === "item" && slot.item), () => h(DOMElement, {
+			element: "span",
+			attrs: { class: "rpg-ui-hotbar-text action-battle-actionbar-text" },
+			textContent: slot.item.name
+		})]),
+		cond(computed(() => slot.type === "item" && slot.item), () => h(DOMElement, {
+			element: "span",
+			attrs: { class: "rpg-ui-hotbar-count action-battle-actionbar-count" },
+			textContent: "x" + getItemQuantity(slot.item)
+		}))
+	]))))));
 }
 //#endregion
 export { component as default };

package/dist/client/index7.js

@@ -1,78 +1,37 @@
-import { actionBattleAttackPreviewState } from "./index3.js";
-import { RpgClientEngine, inject } from "@rpgjs/client";
-import { Container, Graphics, computed, cond, h, signal, tick, useDefineProps, useProps } from "canvasengine";
-//#region src/components/attack-preview.ce
-function component($$props) {
-	useProps($$props);
-	const { object } = useDefineProps($$props)();
-	const engine = inject(RpgClientEngine);
-	const now = signal(Date.now());
-	tick(() => {
-		if (actionBattleAttackPreviewState().active) now.set(Date.now());
-	});
-	const isCurrentPlayer = computed(() => {
-		if (!object?.id) return false;
-		return (typeof object.id === "function" ? object.id() : object.id) === engine.playerId;
-	});
-	const preview = computed(() => actionBattleAttackPreviewState());
-	const progress = computed(() => {
-		const state = preview();
-		if (!state.active) return 1;
-		const elapsed = now() - state.startedAt;
-		return Math.max(0, Math.min(1, elapsed / state.durationMs));
+//#region src/targeting.ts
+var normalizeMaskRows = (mask) => {
+	if (!mask) return ["#"];
+	if (Array.isArray(mask)) return mask;
+	return mask.trim().split("\n").map((row) => row.replace(/\r/g, ""));
+};
+var parseAoeMask = (mask) => {
+	const rows = normalizeMaskRows(mask);
+	const height = rows.length;
+	const width = rows.reduce((max, row) => Math.max(max, row.length), 0);
+	const centerX = Math.floor(width / 2);
+	const centerY = Math.floor(height / 2);
+	const cells = [];
+	rows.forEach((row, y) => {
+		for (let x = 0; x < row.length; x++) {
+			const char = row[x];
+			if (char && char !== "." && char !== " ") cells.push({
+				dx: x - centerX,
+				dy: y - centerY
+			});
+		}
 	});
-	const shouldRender = computed(() => {
-		const state = preview();
-		return isCurrentPlayer() && state.active && progress() < 1;
+	if (cells.length === 0) cells.push({
+		dx: 0,
+		dy: 0
 	});
-	const getHitbox = () => object.hitbox?.() || {
-		w: 32,
-		h: 32
-	};
-	const drawRect = (g, x, y, width, height, color, alpha) => {
-		g.rect(x, y, width, height);
-		g.fill({
-			color,
-			alpha
-		});
-	};
-	const drawSlash = (g) => {
-		g.clear();
-		if (!shouldRender()) return;
-		const state = preview();
-		const p = progress();
-		const alpha = Math.sin(Math.PI * p);
-		if (alpha <= 0) return;
-		const hitbox = getHitbox();
-		const width = hitbox.w || 32;
-		const height = hitbox.h || 32;
-		const reach = 16 + 18 * p;
-		const thickness = 4 + 3 * (1 - p);
-		const color = state.color;
-		const accent = state.accentColor;
-		if (state.direction === "left") {
-			drawRect(g, -reach - 6, height * .24, reach, thickness, accent, alpha * .55);
-			drawRect(g, -reach - 10, height * .46, reach + 4, thickness + 2, color, alpha);
-			drawRect(g, -reach - 6, height * .7, reach, thickness, accent, alpha * .4);
-			return;
-		}
-		if (state.direction === "right") {
-			drawRect(g, width + 6, height * .24, reach, thickness, accent, alpha * .55);
-			drawRect(g, width + 6, height * .46, reach + 4, thickness + 2, color, alpha);
-			drawRect(g, width + 6, height * .7, reach, thickness, accent, alpha * .4);
-			return;
-		}
-		if (state.direction === "up") {
-			drawRect(g, width * .24, -reach - 6, thickness, reach, accent, alpha * .55);
-			drawRect(g, width * .46, -reach - 10, thickness + 2, reach + 4, color, alpha);
-			drawRect(g, width * .7, -reach - 6, thickness, reach, accent, alpha * .4);
-			return;
-		}
-		drawRect(g, width * .24, height + 6, thickness, reach, accent, alpha * .55);
-		drawRect(g, width * .46, height + 6, thickness + 2, reach + 4, color, alpha);
-		drawRect(g, width * .7, height + 6, thickness, reach, accent, alpha * .4);
+	return {
+		width,
+		height,
+		centerX,
+		centerY,
+		cells
 	};
-	return h(Container, null, cond(shouldRender, () => h(Graphics, { draw: drawSlash })));
-}
+};
+var manhattanDistance = (a, b) => Math.abs(a.x - b.x) + Math.abs(a.y - b.y);
 //#endregion
-export { component as default };
+export { manhattanDistance, parseAoeMask };

package/dist/client/index8.js

@@ -1,61 +1,101 @@
-var DEFAULT_ANIMATION_BY_KEY = {
-	attack: "attack",
-	hurt: "hurt",
-	die: "die",
-	castSkill: "skill",
-	castSpell: "skill"
-};
-var getConfiguredAnimation = (key, animations) => {
-	if (!animations) return {
-		hasConfiguredAnimation: false,
-		configured: void 0
+import { actionBattleTargetingState, actionBattleUiOptions } from "./index5.js";
+import { parseAoeMask } from "./index7.js";
+import { RpgClientEngine, inject } from "@rpgjs/client";
+import { Container, Graphics, computed, cond, h, useDefineProps, useProps } from "canvasengine";
+//#region src/components/targeting-overlay.ce
+function component($$props) {
+	useProps($$props);
+	const { object } = useDefineProps($$props)();
+	const engine = inject(RpgClientEngine);
+	const isCurrentPlayer = computed(() => {
+		if (!object?.id) return false;
+		return (typeof object.id === "function" ? object.id() : object.id) === engine.playerId;
+	});
+	const uiOptions = computed(() => actionBattleUiOptions());
+	const targetingState = computed(() => actionBattleTargetingState());
+	const shouldRender = computed(() => {
+		if (!isCurrentPlayer()) return false;
+		if (!uiOptions().targeting?.enabled) return false;
+		return targetingState().active;
+	});
+	const getTileSize = () => {
+		const uiTile = uiOptions().targeting?.tileSize;
+		if (uiTile?.width && uiTile?.height) return uiTile;
+		const hitbox = object.hitbox?.() || {
+			w: 32,
+			h: 32
+		};
+		return {
+			width: hitbox.w || 32,
+			height: hitbox.h || 32
+		};
 	};
-	const hasConfiguredAnimation = Object.prototype.hasOwnProperty.call(animations, key);
-	if (hasConfiguredAnimation) return {
-		hasConfiguredAnimation,
-		configured: animations[key]
+	const getOriginTile = () => {
+		const hitbox = object.hitbox?.() || {
+			w: 32,
+			h: 32
+		};
+		const tileSize = getTileSize();
+		return {
+			x: Math.floor((object.x() + hitbox.w / 2) / tileSize.width),
+			y: Math.floor((object.y() + hitbox.h / 2) / tileSize.height)
+		};
 	};
-	if (key === "castSkill") return {
-		hasConfiguredAnimation: Object.prototype.hasOwnProperty.call(animations, "castSpell"),
-		configured: animations.castSpell
+	const toColor = (value, fallback) => {
+		if (typeof value === "number") return value;
+		return fallback;
 	};
-	return {
-		hasConfiguredAnimation: false,
-		configured: void 0
+	const drawGrid = (g) => {
+		const state = targetingState();
+		if (!state.active) return;
+		const tileSize = getTileSize();
+		const origin = getOriginTile();
+		const target = {
+			x: origin.x + state.offset.x,
+			y: origin.y + state.offset.y
+		};
+		const mask = parseAoeMask(state.aoeMask);
+		const colors = uiOptions().targeting?.colors || {};
+		const areaColor = toColor(colors.area, 3120887);
+		const edgeColor = toColor(colors.edge, 1796760);
+		const cursorColor = toColor(colors.cursor, 16765286);
+		const showGrid = uiOptions().targeting?.showGrid !== false;
+		const playerX = object.x();
+		const playerY = object.y();
+		g.clear();
+		mask.cells.forEach((cell) => {
+			const tileX = target.x + cell.dx;
+			const tileY = target.y + cell.dy;
+			const worldX = tileX * tileSize.width;
+			const worldY = tileY * tileSize.height;
+			const relX = worldX - playerX;
+			const relY = worldY - playerY;
+			g.rect(relX, relY, tileSize.width, tileSize.height);
+			g.fill({
+				color: areaColor,
+				alpha: .35
+			});
+			if (showGrid) {
+				g.rect(relX, relY, tileSize.width, tileSize.height);
+				g.stroke({
+					color: edgeColor,
+					alpha: .9,
+					width: 1
+				});
+			}
+		});
+		const cursorWorldX = target.x * tileSize.width;
+		const cursorWorldY = target.y * tileSize.height;
+		const cursorRelX = cursorWorldX - playerX;
+		const cursorRelY = cursorWorldY - playerY;
+		g.rect(cursorRelX, cursorRelY, tileSize.width, tileSize.height);
+		g.stroke({
+			color: cursorColor,
+			alpha: 1,
+			width: 2
+		});
 	};
-};
-function resolveActionBattleAnimation(key, entity, animations, context, defaults = {}) {
-	const defaultAnimationName = defaults.animationName ?? DEFAULT_ANIMATION_BY_KEY[key];
-	const defaultRepeat = defaults.repeat ?? 1;
-	const { hasConfiguredAnimation, configured: configuredAnimation } = getConfiguredAnimation(key, animations);
-	if (!hasConfiguredAnimation && key !== "attack") return null;
-	const configured = hasConfiguredAnimation ? configuredAnimation : defaultAnimationName;
-	const result = typeof configured === "function" ? configured(entity, context) : configured;
-	if (result == null) return null;
-	if (typeof result === "string") return {
-		animationName: result,
-		repeat: defaultRepeat,
-		waitEnd: false
-	};
-	return {
-		animationName: result.animationName ?? defaultAnimationName,
-		graphic: result.graphic,
-		repeat: result.repeat ?? defaultRepeat,
-		waitEnd: result.waitEnd ?? false,
-		delayMs: result.delayMs
-	};
-}
-function playActionBattleAnimation(key, entity, animations, context, defaults = {}) {
-	const animation = resolveActionBattleAnimation(key, entity, animations, context, defaults);
-	if (!animation) return null;
-	if (animation.graphic !== void 0) entity.setGraphicAnimation(animation.animationName, animation.graphic, animation.repeat);
-	else entity.setGraphicAnimation(animation.animationName, animation.repeat);
-	return animation;
-}
-function getActionBattleAnimationRemovalDelay(animation) {
-	if (!animation) return 0;
-	if (animation.delayMs !== void 0) return animation.delayMs;
-	return animation.waitEnd ? 500 : 0;
+	return h(Container, null, cond(shouldRender, () => h(Graphics, { draw: drawGrid })));
 }
 //#endregion
-export { getActionBattleAnimationRemovalDelay, playActionBattleAnimation, resolveActionBattleAnimation };
+export { component as default };