@rpgjs/action-battle 5.0.0-beta.1 → 5.0.0-beta.10

package/dist/client/index6.js

@@ -1,97 +1,311 @@
-import { useProps, useDefineProps, computed, h, Container, cond, Graphics } from "canvasengine";
-import { inject, RpgClientEngine } from "@rpgjs/client";
-import { actionBattleUiOptions, actionBattleTargetingState } from "./index7.js";
-import { parseAoeMask } from "./index9.js";
+import { actionBattleTargetingState, actionBattleUiOptions, moveTargetingOffset, startTargeting, stopTargeting } from "./index5.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") {
+	let styleElement = document.getElementById("ce-style--home-runner-work-RPG-JS-RPG-JS-packages-action-battle-src-components-action-bar-ce");
+	if (!styleElement) {
+		styleElement = document.createElement("style");
+		styleElement.id = "ce-style--home-runner-work-RPG-JS-RPG-JS-packages-action-battle-src-components-action-bar-ce";
+		document.head.appendChild(styleElement);
+	}
+	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  }";
+}
 function component($$props) {
-  useProps($$props);
-  const defineProps = useDefineProps($$props);
-  var object = defineProps().object;
-  var engine = inject(RpgClientEngine);
-  var isCurrentPlayer = computed(function() {
-    if (!(object === null || object === void 0 ? void 0 : object.id))
-      return false;
-    var idValue = typeof object.id === "function" ? object.id() : object.id;
-    return idValue === engine.playerId;
-  });
-  var uiOptions = computed(function() {
-    return actionBattleUiOptions();
-  });
-  var targetingState = computed(function() {
-    return actionBattleTargetingState();
-  });
-  var shouldRender = computed(function() {
-    var _a;
-    if (!isCurrentPlayer())
-      return false;
-    if (!((_a = uiOptions().targeting) === null || _a === void 0 ? void 0 : _a.enabled))
-      return false;
-    return targetingState().active;
-  });
-  var getTileSize = function() {
-    var _a, _b;
-    var uiTile = (_a = uiOptions().targeting) === null || _a === void 0 ? void 0 : _a.tileSize;
-    if ((uiTile === null || uiTile === void 0 ? void 0 : uiTile.width) && (uiTile === null || uiTile === void 0 ? void 0 : uiTile.height))
-      return uiTile;
-    var hitbox = ((_b = object.hitbox) === null || _b === void 0 ? void 0 : _b.call(object)) || { w: 32, h: 32 };
-    return { width: hitbox.w || 32, height: hitbox.h || 32 };
-  };
-  var getOriginTile = function() {
-    var _a;
-    var hitbox = ((_a = object.hitbox) === null || _a === void 0 ? void 0 : _a.call(object)) || { w: 32, h: 32 };
-    var tileSize = getTileSize();
-    var x = Math.floor((object.x() + hitbox.w / 2) / tileSize.width);
-    var y = Math.floor((object.y() + hitbox.h / 2) / tileSize.height);
-    return { x, y };
-  };
-  var toColor = function(value, fallback) {
-    if (typeof value === "number")
-      return value;
-    return fallback;
-  };
-  var drawGrid = function(g) {
-    var _a, _b;
-    var state = targetingState();
-    if (!state.active)
-      return;
-    var tileSize = getTileSize();
-    var origin = getOriginTile();
-    var target = {
-      x: origin.x + state.offset.x,
-      y: origin.y + state.offset.y
-    };
-    var mask = parseAoeMask(state.aoeMask);
-    var colors = ((_a = uiOptions().targeting) === null || _a === void 0 ? void 0 : _a.colors) || {};
-    var areaColor = toColor(colors.area, 3120887);
-    var edgeColor = toColor(colors.edge, 1796760);
-    var cursorColor = toColor(colors.cursor, 16765286);
-    var showGrid = ((_b = uiOptions().targeting) === null || _b === void 0 ? void 0 : _b.showGrid) !== false;
-    var playerX = object.x();
-    var playerY = object.y();
-    g.clear();
-    mask.cells.forEach(function(cell) {
-      var tileX = target.x + cell.dx;
-      var tileY = target.y + cell.dy;
-      var worldX = tileX * tileSize.width;
-      var worldY = tileY * tileSize.height;
-      var relX = worldX - playerX;
-      var relY = worldY - playerY;
-      g.rect(relX, relY, tileSize.width, tileSize.height);
-      g.fill({ color: areaColor, alpha: 0.35 });
-      if (showGrid) {
-        g.rect(relX, relY, tileSize.width, tileSize.height);
-        g.stroke({ color: edgeColor, alpha: 0.9, width: 1 });
-      }
-    });
-    var cursorWorldX = target.x * tileSize.width;
-    var cursorWorldY = target.y * tileSize.height;
-    var cursorRelX = cursorWorldX - playerX;
-    var cursorRelY = cursorWorldY - playerY;
-    g.rect(cursorRelX, cursorRelY, tileSize.width, tileSize.height);
-    g.stroke({ color: cursorColor, alpha: 1, width: 2 });
-  };
-  let $this = h(Container, null, cond(shouldRender, () => h(Graphics, { draw: drawGrid })));
-  return $this;
+	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;
+		}
+		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 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);
+				}
+			},
+			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 }
+		};
+	};
+	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)
+		}))
+	]))))));
 }
-export {
-  component as default
-};
+var __ce_component = component;
+//#endregion
+export { __ce_component as default };

package/dist/client/index7.js

@@ -1,61 +1,37 @@
-import { signal } from "canvasengine";
-import { normalizeActionBattleOptions, DEFAULT_ACTION_BATTLE_OPTIONS } from "./index8.js";
-const defaultTargetingState = {
-  active: false,
-  skill: null,
-  range: 0,
-  offset: { x: 0, y: 0 },
-  aoeMask: DEFAULT_ACTION_BATTLE_OPTIONS.skills?.defaultAoeMask || ["#"]
+//#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, ""));
 };
-const actionBattleUiOptions = signal(
-  normalizeActionBattleOptions({}).ui || {}
-);
-const actionBattleSkillOptions = signal(
-  normalizeActionBattleOptions({}).skills || {}
-);
-const actionBattleTargetingState = signal({
-  ...defaultTargetingState
-});
-const setActionBattleOptions = (options = {}) => {
-  const normalized = normalizeActionBattleOptions(options);
-  actionBattleUiOptions.set(normalized.ui || {});
-  actionBattleSkillOptions.set(normalized.skills || {});
-};
-const 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
-  });
-};
-const stopTargeting = () => {
-  actionBattleTargetingState.set({ ...defaultTargetingState });
-};
-const 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
-  });
-};
-export {
-  actionBattleSkillOptions,
-  actionBattleTargetingState,
-  actionBattleUiOptions,
-  moveTargetingOffset,
-  setActionBattleOptions,
-  startTargeting,
-  stopTargeting
+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
+	});
+	return {
+		width,
+		height,
+		centerX,
+		centerY,
+		cells
+	};
 };
+var manhattanDistance = (a, b) => Math.abs(a.x - b.x) + Math.abs(a.y - b.y);
+//#endregion
+export { manhattanDistance, parseAoeMask };

package/dist/client/index8.js

@@ -1,55 +1,102 @@
-const DEFAULT_ACTION_BATTLE_OPTIONS = {
-  ui: {
-    actionBar: {
-      enabled: false,
-      autoOpen: false,
-      mode: "both"
-    },
-    targeting: {
-      enabled: true,
-      showGrid: true,
-      colors: {
-        area: 3120887,
-        edge: 1796760,
-        cursor: 16765286
-      }
-    }
-  },
-  skills: {
-    defaultAoeMask: ["#"]
-  },
-  targeting: {
-    affects: "events",
-    allowEmptyTarget: true
-  }
-};
-function normalizeActionBattleOptions(options = {}) {
-  return {
-    ui: {
-      actionBar: {
-        ...DEFAULT_ACTION_BATTLE_OPTIONS.ui?.actionBar,
-        ...options.ui?.actionBar
-      },
-      targeting: {
-        ...DEFAULT_ACTION_BATTLE_OPTIONS.ui?.targeting,
-        ...options.ui?.targeting,
-        colors: {
-          ...DEFAULT_ACTION_BATTLE_OPTIONS.ui?.targeting?.colors,
-          ...options.ui?.targeting?.colors
-        }
-      }
-    },
-    skills: {
-      ...DEFAULT_ACTION_BATTLE_OPTIONS.skills,
-      ...options.skills
-    },
-    targeting: {
-      ...DEFAULT_ACTION_BATTLE_OPTIONS.targeting,
-      ...options.targeting
-    }
-  };
+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 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)
+		};
+	};
+	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 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
+		});
+	};
+	return h(Container, null, cond(shouldRender, () => h(Graphics, { draw: drawGrid })));
 }
-export {
-  DEFAULT_ACTION_BATTLE_OPTIONS,
-  normalizeActionBattleOptions
-};
+var __ce_component = component;
+//#endregion
+export { __ce_component as default };