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

package/dist/client/index4.js

@@ -1,307 +1,108 @@
-import { actionBattleTargetingState, actionBattleUiOptions, moveTargetingOffset, startTargeting, stopTargeting } from "./index3.js";
-import { RpgClientEngine, inject } from "@rpgjs/client";
-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 defineProps = useDefineProps($$props);
-	const engine = inject(RpgClientEngine);
-	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 showItems = computed(() => {
-		const mode = uiOptions().actionBar?.mode || "both";
-		return mode === "items" || mode === "both";
-	});
-	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 selectSlot = (index) => {
-		const slot = actionBarSlots()[index];
-		if (!slot || !hasSlotEntry(slot)) return;
-		if (slot.type === "skill") {
-			selectSkill(slot.skill);
-			return;
+import { normalizeActionBattleAttackProfile } from "./index3.js";
+//#region src/config.ts
+var DEFAULT_ACTION_BATTLE_OPTIONS = {
+	ui: {
+		actionBar: {
+			enabled: false,
+			autoOpen: false,
+			mode: "both"
+		},
+		targeting: {
+			enabled: true,
+			showGrid: true,
+			colors: {
+				area: 3120887,
+				edge: 1796760,
+				cursor: 16765286
+			}
 		}
-		selectItem(slot.item);
-	};
-	const onSelectSlot = (index) => () => {
-		selectedSlotIndex.set(index);
-		selectSlot(index);
+	},
+	skills: { defaultAoeMask: ["#"] },
+	targeting: {
+		affects: "events",
+		allowEmptyTarget: true
+	},
+	attack: {
+		lockMovement: true,
+		lockDurationMs: 350,
+		showPreview: true,
+		previewDurationMs: 180,
+		previewColor: 16774064,
+		previewAccentColor: 16777215
+	},
+	animations: {}
+};
+var currentActionBattleOptions = DEFAULT_ACTION_BATTLE_OPTIONS;
+function normalizeActionBattleOptions(options = {}) {
+	const attack = {
+		...DEFAULT_ACTION_BATTLE_OPTIONS.attack,
+		...options.attack
 	};
-	const getPlayerTile = () => {
-		const player = engine.scene.getCurrentPlayer();
-		if (!player) return null;
-		const hitbox = player.hitbox?.() || {
-			w: 32,
-			h: 32
-		};
-		const tileWidth = hitbox.w || 32;
-		const tileHeight = hitbox.h || 32;
-		return {
-			x: Math.floor((player.x() + hitbox.w / 2) / tileWidth),
-			y: Math.floor((player.y() + hitbox.h / 2) / tileHeight)
-		};
-	};
-	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
-		};
-		if (onInteraction) onInteraction("useSkill", {
-			id: state.skill.id,
-			target
-		});
-		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);
-				}
+	const attackProfile = normalizeActionBattleAttackProfile(attack.profile, {
+		lockMovement: attack.lockMovement,
+		lockDurationMs: attack.lockDurationMs,
+		hitboxes: attack.hitboxes
+	});
+	return {
+		ui: {
+			actionBar: {
+				...DEFAULT_ACTION_BATTLE_OPTIONS.ui?.actionBar,
+				...options.ui?.actionBar
 			},
-			down: {
-				repeat: true,
-				bind: keyboardControls.down,
-				throttle: 150,
-				keyDown() {
-					if (isTargeting()) moveTargetingOffset(0, 1);
+			targeting: {
+				...DEFAULT_ACTION_BATTLE_OPTIONS.ui?.targeting,
+				...options.ui?.targeting,
+				colors: {
+					...DEFAULT_ACTION_BATTLE_OPTIONS.ui?.targeting?.colors,
+					...options.ui?.targeting?.colors
 				}
-			},
-			action: {
-				bind: keyboardControls.action,
-				keyDown() {
-					if (isTargeting()) confirmTargeting();
+			}
+		},
+		skills: {
+			...DEFAULT_ACTION_BATTLE_OPTIONS.skills,
+			...options.skills
+		},
+		targeting: {
+			...DEFAULT_ACTION_BATTLE_OPTIONS.targeting,
+			...options.targeting
+		},
+		debug: {
+			...DEFAULT_ACTION_BATTLE_OPTIONS.debug,
+			...options.debug
+		},
+		attack: {
+			...attack,
+			profile: attackProfile
+		},
+		animations: {
+			...DEFAULT_ACTION_BATTLE_OPTIONS.animations,
+			...options.animations
+		},
+		systems: {
+			combat: {
+				...DEFAULT_ACTION_BATTLE_OPTIONS.systems?.combat,
+				...options.systems?.combat,
+				hooks: {
+					...DEFAULT_ACTION_BATTLE_OPTIONS.systems?.combat?.hooks,
+					...options.systems?.combat?.hooks
 				}
 			},
-			escape: {
-				bind: keyboardControls.escape,
-				keyDown() {
-					if (isTargeting()) {
-						stopTargeting();
-						return;
-					}
-					if (onBack) onBack();
+			ai: {
+				...DEFAULT_ACTION_BATTLE_OPTIONS.systems?.ai,
+				...options.systems?.ai,
+				behaviors: {
+					...DEFAULT_ACTION_BATTLE_OPTIONS.systems?.ai?.behaviors,
+					...options.systems?.ai?.behaviors
 				}
-			},
-			...hotbarControls,
-			gamepad: { enabled: true }
-		};
-	};
-	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)
-		}))
-	]))))));
+	};
+}
+function setActionBattleOptions(options) {
+	currentActionBattleOptions = options;
+}
+function getActionBattleOptions() {
+	return currentActionBattleOptions;
 }
 //#endregion
-export { component as default };
+export { DEFAULT_ACTION_BATTLE_OPTIONS, getActionBattleOptions, normalizeActionBattleOptions, setActionBattleOptions };

package/dist/client/index5.js

@@ -1,37 +1,85 @@
-//#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
-			});
-		}
-	});
-	if (cells.length === 0) cells.push({
-		dx: 0,
-		dy: 0
+import { DEFAULT_ACTION_BATTLE_OPTIONS, normalizeActionBattleOptions } from "./index4.js";
+import { signal } from "canvasengine";
+//#region src/ui/state.ts
+var defaultTargetingState = {
+	active: false,
+	skill: null,
+	range: 0,
+	offset: {
+		x: 0,
+		y: 0
+	},
+	aoeMask: DEFAULT_ACTION_BATTLE_OPTIONS.skills?.defaultAoeMask || ["#"]
+};
+var defaultAttackPreviewState = {
+	active: false,
+	id: 0,
+	direction: "down",
+	startedAt: 0,
+	durationMs: 180,
+	color: 16774064,
+	accentColor: 16777215
+};
+var actionBattleUiOptions = signal(normalizeActionBattleOptions({}).ui || {});
+var actionBattleSkillOptions = signal(normalizeActionBattleOptions({}).skills || {});
+var actionBattleTargetingState = signal({ ...defaultTargetingState });
+var actionBattleAttackPreviewState = signal({ ...defaultAttackPreviewState });
+var setActionBattleOptions = (options = {}) => {
+	const normalized = normalizeActionBattleOptions(options);
+	actionBattleUiOptions.set(normalized.ui || {});
+	actionBattleSkillOptions.set(normalized.skills || {});
+};
+var startTargeting = (skill) => {
+	const skillsOptions = actionBattleSkillOptions();
+	const mask = skill.aoeMask || skillsOptions.defaultAoeMask || ["#"];
+	actionBattleTargetingState.set({
+		active: true,
+		skill,
+		range: skill.range ?? 0,
+		offset: {
+			x: 0,
+			y: 0
+		},
+		aoeMask: mask
 	});
-	return {
-		width,
-		height,
-		centerX,
-		centerY,
-		cells
+};
+var stopTargeting = () => {
+	actionBattleTargetingState.set({ ...defaultTargetingState });
+};
+var moveTargetingOffset = (dx, dy) => {
+	const state = actionBattleTargetingState();
+	if (!state.active) return;
+	const next = {
+		x: state.offset.x + dx,
+		y: state.offset.y + dy
 	};
+	if (Math.abs(next.x) + Math.abs(next.y) > state.range) return;
+	actionBattleTargetingState.set({
+		...state,
+		offset: next
+	});
+};
+var startAttackPreview = (options) => {
+	const id = actionBattleAttackPreviewState().id + 1;
+	const durationMs = Math.max(1, options.durationMs ?? defaultAttackPreviewState.durationMs);
+	actionBattleAttackPreviewState.set({
+		active: true,
+		id,
+		direction: options.direction,
+		startedAt: Date.now(),
+		durationMs,
+		color: options.color ?? defaultAttackPreviewState.color,
+		accentColor: options.accentColor ?? defaultAttackPreviewState.accentColor
+	});
+	return id;
+};
+var stopAttackPreview = (id) => {
+	const current = actionBattleAttackPreviewState();
+	if (id !== void 0 && current.id !== id) return;
+	actionBattleAttackPreviewState.set({
+		...current,
+		active: false
+	});
 };
-var manhattanDistance = (a, b) => Math.abs(a.x - b.x) + Math.abs(a.y - b.y);
 //#endregion
-export { manhattanDistance, parseAoeMask };
+export { actionBattleAttackPreviewState, actionBattleTargetingState, actionBattleUiOptions, moveTargetingOffset, setActionBattleOptions, startAttackPreview, startTargeting, stopAttackPreview, stopTargeting };