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

package/dist/client/index4.js

@@ -1,333 +1,303 @@
-import { defineModule, Control } from "@rpgjs/common";
-import { normalizeActionBattleOptions } from "./index8.js";
-import { manhattanDistance, parseAoeMask } from "./index9.js";
-const RpgEvent = null;
-const DEFAULT_KNOCKBACK = null;
-const ACTION_BATTLE_ACTION_BAR_GUI_ID = "action-battle-action-bar";
-const DEFAULT_PLAYER_ATTACK_HITBOXES = {
-  up: { offsetX: -16, offsetY: -48, width: 32, height: 32 },
-  down: { offsetX: -16, offsetY: 16, width: 32, height: 32 },
-  left: { offsetX: -48, offsetY: -16, width: 32, height: 32 },
-  right: { offsetX: 16, offsetY: -16, width: 32, height: 32 },
-  default: { offsetX: 0, offsetY: -32, width: 32, height: 32 }
-};
-function getPlayerWeaponKnockbackForce(player) {
-  try {
-    const equipments = player.equipments?.() || [];
-    for (const item of equipments) {
-      const itemData = player.databaseById?.(item.id());
-      if (itemData?._type === "weapon" && itemData.knockbackForce !== void 0) {
-        return itemData.knockbackForce;
-      }
-    }
-  } catch {
-  }
-  return DEFAULT_KNOCKBACK.force;
+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 applyPlayerHitToEvent(player, target, hooks) {
-  const ai = target.battleAi;
-  if (!ai) return void 0;
-  const knockbackForce = getPlayerWeaponKnockbackForce(player);
-  const defeated = ai.takeDamage(player);
-  const dx = target.x() - player.x();
-  const dy = target.y() - player.y();
-  const distance = Math.sqrt(dx * dx + dy * dy);
-  let hitResult = {
-    damage: 0,
-    // Will be set by takeDamage internally
-    knockbackForce,
-    knockbackDuration: DEFAULT_KNOCKBACK.duration,
-    defeated,
-    attacker: player,
-    target
-  };
-  if (hooks?.onBeforeHit) {
-    const modified = hooks.onBeforeHit(hitResult);
-    if (modified) {
-      hitResult = modified;
-    }
-  }
-  if (!hitResult.defeated && hitResult.knockbackForce > 0 && distance > 0) {
-    const knockbackDirection = {
-      x: dx / distance,
-      y: dy / distance
-    };
-    target.knockback(knockbackDirection, hitResult.knockbackForce, hitResult.knockbackDuration);
-  }
-  if (hooks?.onAfterHit) {
-    hooks.onAfterHit(hitResult);
-  }
-  return hitResult;
+function component($$props) {
+	useProps($$props);
+	const defineProps = useDefineProps($$props);
+	const engine = inject(RpgClientEngine);
+	const keyboardControls = engine.globalConfig.keyboardControls;
+	const { data, onInteraction, onBack } = defineProps();
+	const currentPlayer = engine.getCurrentPlayer();
+	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 actionBarSlots = computed(() => {
+		const entries = [];
+		if (showSkills()) currentPlayer.skills().forEach((skill, index) => {
+			entries.push({
+				type: "skill",
+				skill,
+				item: null,
+				sourceIndex: index
+			});
+		});
+		if (showItems()) currentPlayer.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)
+		}))
+	]))))));
 }
-const resolveSignal = (value) => typeof value === "function" ? value() : value;
-const resolveItemData = (player, itemId) => {
-  try {
-    return player.databaseById?.(itemId);
-  } catch {
-    return null;
-  }
-};
-const resolveSkillData = (player, skillId) => {
-  try {
-    return player.databaseById?.(skillId);
-  } catch {
-    return null;
-  }
-};
-const resolveSkillTargeting = (player, skillId, options) => {
-  const skillsOptions = options.skills;
-  const skillData = resolveSkillData(player, skillId);
-  if (skillsOptions?.getTargeting) {
-    return skillsOptions.getTargeting(skillData);
-  }
-  const range = skillData?.range ?? skillData?.targeting?.range ?? skillData?.targeting?.distance;
-  const aoeMask = skillData?.aoeMask ?? skillData?.targeting?.aoeMask ?? skillData?.targeting?.mask;
-  if (range === void 0 && aoeMask === void 0) {
-    return null;
-  }
-  return {
-    range: range ?? 0,
-    aoeMask
-  };
-};
-const normalizeMaskRows = (mask) => {
-  if (!mask) return [];
-  if (Array.isArray(mask)) return mask;
-  return mask.trim().split("\n").map((row) => row.replace(/\r/g, ""));
-};
-const buildActionBarData = (player, options) => {
-  const items = (player.items?.() || []).map((item) => {
-    const id = item.id?.() ?? item.id;
-    const data = resolveItemData(player, id);
-    const name = resolveSignal(data?.name) ?? resolveSignal(item.name) ?? id;
-    const description = resolveSignal(data?.description) ?? resolveSignal(item.description) ?? "";
-    const icon = resolveSignal(data?.icon) ?? resolveSignal(item.icon);
-    const quantity = resolveSignal(item.quantity) ?? 1;
-    const consumable = resolveSignal(data?.consumable);
-    const itemType = resolveSignal(data?._type);
-    const usable = quantity > 0 && consumable !== false && (itemType ? itemType === "item" : true);
-    return {
-      id,
-      name,
-      description,
-      icon,
-      quantity,
-      usable
-    };
-  });
-  const skills = (player.skills?.() || []).map((skill) => {
-    const id = skill.id?.() ?? skill.id;
-    const data = resolveSkillData(player, id) || skill;
-    const name = resolveSignal(data?.name) ?? resolveSignal(skill.name) ?? id;
-    const description = resolveSignal(data?.description) ?? resolveSignal(skill.description) ?? "";
-    const icon = resolveSignal(data?.icon) ?? resolveSignal(skill.icon);
-    const spCost = resolveSignal(data?.spCost) ?? resolveSignal(skill.spCost) ?? 0;
-    const usable = spCost <= player.sp;
-    const targeting = resolveSkillTargeting(player, id, options);
-    const skillEntry = {
-      id,
-      name,
-      description,
-      icon,
-      spCost,
-      usable,
-      range: targeting?.range ?? 0
-    };
-    if (targeting) {
-      const mask = targeting.aoeMask ?? options.skills?.defaultAoeMask;
-      if (mask) {
-        skillEntry.aoeMask = normalizeMaskRows(mask);
-      }
-    }
-    return skillEntry;
-  });
-  return { items, skills };
-};
-const ensureActionBarGui = (player, options) => {
-  const existing = player.getGui?.(ACTION_BATTLE_ACTION_BAR_GUI_ID);
-  const gui = existing || player.gui(ACTION_BATTLE_ACTION_BAR_GUI_ID);
-  if (!gui.__actionBattleReady) {
-    gui.__actionBattleReady = true;
-    gui.on("useItem", ({ id }) => {
-      try {
-        player.useItem(id);
-      } catch {
-      }
-      gui.update(buildActionBarData(player, options));
-    });
-    gui.on("useSkill", ({ id, target }) => {
-      handleActionBattleSkillUse(player, id, target, options);
-      gui.update(buildActionBarData(player, options));
-    });
-    gui.on("refresh", () => {
-      gui.update(buildActionBarData(player, options));
-    });
-  }
-  return gui;
-};
-const openActionBattleActionBar = (player, rawOptions = {}) => {
-  const options = normalizeActionBattleOptions(rawOptions);
-  const gui = ensureActionBarGui(player, options);
-  gui.open(buildActionBarData(player, options));
-};
-const updateActionBattleActionBar = (player, rawOptions = {}) => {
-  const options = normalizeActionBattleOptions(rawOptions);
-  const gui = player.getGui?.(ACTION_BATTLE_ACTION_BAR_GUI_ID);
-  if (gui) {
-    gui.update(buildActionBarData(player, options));
-  }
-};
-const getTileSize = (map) => ({
-  width: map?.tileWidth ?? 32,
-  height: map?.tileHeight ?? 32
-});
-const getEntityTile = (entity, tileSize) => {
-  const hitbox = entity.hitbox?.() || { w: tileSize.width, h: tileSize.height };
-  const x = Math.floor((entity.x() + hitbox.w / 2) / tileSize.width);
-  const y = Math.floor((entity.y() + hitbox.h / 2) / tileSize.height);
-  return { x, y };
-};
-const handleActionBattleSkillUse = (player, skillId, target, options) => {
-  const map = player.getCurrentMap();
-  if (!map) {
-    player.useSkill(skillId);
-    return;
-  }
-  const targeting = resolveSkillTargeting(player, skillId, options);
-  if (!targeting || !target) {
-    player.useSkill(skillId);
-    return;
-  }
-  const tileSize = getTileSize(map);
-  const origin = getEntityTile(player, tileSize);
-  const targetTile = { x: target.x, y: target.y };
-  if (manhattanDistance(origin, targetTile) > targeting.range) {
-    return;
-  }
-  const mask = parseAoeMask(
-    targeting.aoeMask || options.skills?.defaultAoeMask
-  );
-  const affected = /* @__PURE__ */ new Set();
-  mask.cells.forEach((cell) => {
-    const x = targetTile.x + cell.dx;
-    const y = targetTile.y + cell.dy;
-    affected.add(`${x},${y}`);
-  });
-  const targets = [];
-  const affects = options.targeting?.affects || "events";
-  if (affects === "events" || affects === "both") {
-    map.getEvents().forEach((event) => {
-      const tile = getEntityTile(event, tileSize);
-      if (affected.has(`${tile.x},${tile.y}`)) {
-        targets.push(event);
-      }
-    });
-  }
-  if (affects === "players" || affects === "both") {
-    map.getPlayers().forEach((other) => {
-      if (other.id === player.id) return;
-      const tile = getEntityTile(other, tileSize);
-      if (affected.has(`${tile.x},${tile.y}`)) {
-        targets.push(other);
-      }
-    });
-  }
-  if (!options.targeting?.allowEmptyTarget && targets.length === 0) {
-    return;
-  }
-  player.useSkill(skillId, targets);
-};
-const createActionBattleServer = (rawOptions = {}) => {
-  const options = normalizeActionBattleOptions(rawOptions);
-  return defineModule({
-    player: {
-      /**
-       * Handle player input for combat actions
-       *
-       * When a player presses the action key, create an attack hitbox
-       * that can damage AI enemies within range and knockback the event.
-       * Knockback force is based on the player's equipped weapon.
-       * Triggers attack animation and visual effects.
-       *
-       * @param player - The player performing the action
-       * @param input - Input data containing pressed keys
-       */
-      onInput(player, input) {
-        if (input.action == Control.Action) {
-          player.setGraphicAnimation("attack", 1);
-          const playerX = player.x();
-          const playerY = player.y();
-          const direction = player.getDirection();
-          const directionKey = direction;
-          const hitboxConfig = DEFAULT_PLAYER_ATTACK_HITBOXES[directionKey] || DEFAULT_PLAYER_ATTACK_HITBOXES.default;
-          const hitboxes = [
-            {
-              x: playerX + hitboxConfig.offsetX,
-              y: playerY + hitboxConfig.offsetY,
-              width: hitboxConfig.width,
-              height: hitboxConfig.height
-            }
-          ];
-          const map = player.getCurrentMap();
-          map?.createMovingHitbox(hitboxes, { speed: 3 }).subscribe({
-            next(hits) {
-              hits.forEach((hit) => {
-                if (hit instanceof RpgEvent) {
-                  const result = applyPlayerHitToEvent(player, hit);
-                  if (result?.defeated) {
-                    console.log(`Player ${player.id} defeated AI ${hit.id}`);
-                  }
-                }
-              });
-            }
-          });
-        }
-      },
-      onConnected(player) {
-        if (options.ui?.actionBar?.enabled && options.ui?.actionBar?.autoOpen) {
-          openActionBattleActionBar(player, options);
-        }
-      }
-    },
-    event: {
-      /**
-       * Handle player detection when entering AI vision
-       *
-       * Called when a player enters an AI event's vision range.
-       * The AI will start pursuing and attacking the player.
-       *
-       * @param event - The AI event
-       * @param player - The player entering vision
-       * @param shape - The vision shape
-       */
-      onDetectInShape(event, player, shape) {
-        const ai = event.battleAi;
-        ai?.onDetectInShape(player, shape);
-      },
-      /**
-       * Handle player leaving AI vision
-       *
-       * Called when a player leaves an AI event's vision range.
-       * The AI will stop pursuing the player.
-       *
-       * @param event - The AI event
-       * @param player - The player leaving vision
-       * @param shape - The vision shape
-       */
-      onDetectOutShape(event, player, shape) {
-        const ai = event.battleAi;
-        ai?.onDetectOutShape(player, shape);
-      }
-    }
-  });
-};
-createActionBattleServer();
-export {
-  ACTION_BATTLE_ACTION_BAR_GUI_ID,
-  DEFAULT_PLAYER_ATTACK_HITBOXES,
-  applyPlayerHitToEvent,
-  createActionBattleServer,
-  getPlayerWeaponKnockbackForce,
-  openActionBattleActionBar,
-  updateActionBattleActionBar
-};
+//#endregion
+export { component as default };