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

package/dist/client/index5.js

@@ -1,292 +1,85 @@
-import { useProps, useDefineProps, signal, computed, effect, h, DOMContainer, DOMElement, loop, cond, DOMSprite } from "canvasengine";
-import { inject, RpgClientEngine } from "@rpgjs/client";
-import { actionBattleUiOptions, actionBattleTargetingState, stopTargeting, moveTargetingOffset, startTargeting } from "./index7.js";
-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);
-  var __assign = this && this.__assign || function() {
-    __assign = Object.assign || function(t) {
-      for (var s, i = 1, n = arguments.length; i < n; i++) {
-        s = arguments[i];
-        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-          t[p] = s[p];
-      }
-      return t;
-    };
-    return __assign.apply(this, arguments);
-  };
-  var engine = inject(RpgClientEngine);
-  var keyboardControls = engine.globalConfig.keyboardControls;
-  var _a = defineProps();
-  _a.data;
-  var onInteraction = _a.onInteraction, onBack = _a.onBack;
-  var currentPlayer = engine.getCurrentPlayer();
-  var ACTION_BAR_SIZE = 10;
-  var SLOT_LABELS = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"];
-  var SLOT_CONFIG_KEYS = [
-    "hotbar1",
-    "hotbar2",
-    "hotbar3",
-    "hotbar4",
-    "hotbar5",
-    "hotbar6",
-    "hotbar7",
-    "hotbar8",
-    "hotbar9",
-    "hotbar0"
-  ];
-  var selectedSlotIndex = signal(-1);
-  var uiOptions = computed(function() {
-    return actionBattleUiOptions();
-  });
-  var showItems = computed(function() {
-    var _a2;
-    var mode = ((_a2 = uiOptions().actionBar) === null || _a2 === void 0 ? void 0 : _a2.mode) || "both";
-    return mode === "items" || mode === "both";
-  });
-  var showSkills = computed(function() {
-    var _a2;
-    var mode = ((_a2 = uiOptions().actionBar) === null || _a2 === void 0 ? void 0 : _a2.mode) || "both";
-    return mode === "skills" || mode === "both";
-  });
-  var isTargeting = computed(function() {
-    return actionBattleTargetingState().active;
-  });
-  var iconSheet = function(iconId) {
-    return {
-      definition: engine.getSpriteSheet(iconId),
-      playing: "default"
-    };
-  };
-  var actionBarSlots = computed(function() {
-    var entries = [];
-    if (showSkills()) {
-      currentPlayer.skills().forEach(function(skill, index) {
-        entries.push({
-          type: "skill",
-          skill,
-          item: null,
-          sourceIndex: index
-        });
-      });
-    }
-    if (showItems()) {
-      currentPlayer.items().forEach(function(item, index) {
-        entries.push({
-          type: "item",
-          skill: null,
-          item,
-          sourceIndex: index
-        });
-      });
-    }
-    var slots = entries.slice(0, ACTION_BAR_SIZE).map(function(entry, index) {
-      return __assign(__assign({}, 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;
-  });
-  var hasSlotEntry = function(slot) {
-    return slot.type === "skill" || slot.type === "item";
-  };
-  var isSlotDisabled = function(slot) {
-    if (!hasSlotEntry(slot))
-      return true;
-    var entry = slot.type === "skill" ? slot.skill : slot.item;
-    return !entry || !entry.usable;
-  };
-  var getItemQuantity = function(item) {
-    if (!item)
-      return 0;
-    if (typeof item.quantity === "function")
-      return item.quantity();
-    return item.quantity || 0;
-  };
-  var selectItem = function(item) {
-    if (!item || !item.usable)
-      return;
-    if (onInteraction)
-      onInteraction("useItem", { id: item.id });
-  };
-  var selectSkill = function(skill) {
-    var _a2;
-    if (!skill || !skill.usable)
-      return;
-    var range = (_a2 = skill.range) !== null && _a2 !== void 0 ? _a2 : 0;
-    if (range > 0 || skill.aoeMask) {
-      startTargeting(skill);
-      return;
-    }
-    if (onInteraction)
-      onInteraction("useSkill", { id: skill.id });
-  };
-  var selectSlot = function(index) {
-    var slot = actionBarSlots()[index];
-    if (!slot || !hasSlotEntry(slot))
-      return;
-    if (slot.type === "skill") {
-      selectSkill(slot.skill);
-      return;
-    }
-    selectItem(slot.item);
-  };
-  var onSelectSlot = function(index) {
-    return function() {
-      selectedSlotIndex.set(index);
-      selectSlot(index);
-    };
-  };
-  var getPlayerTile = function() {
-    var _a2;
-    var player = engine.scene.getCurrentPlayer();
-    if (!player)
-      return null;
-    var hitbox = ((_a2 = player.hitbox) === null || _a2 === void 0 ? void 0 : _a2.call(player)) || { w: 32, h: 32 };
-    var tileWidth = hitbox.w || 32;
-    var tileHeight = hitbox.h || 32;
-    var x = Math.floor((player.x() + hitbox.w / 2) / tileWidth);
-    var y = Math.floor((player.y() + hitbox.h / 2) / tileHeight);
-    return { x, y };
-  };
-  var confirmTargeting = function() {
-    var state = actionBattleTargetingState();
-    if (!state.skill)
-      return;
-    var origin = getPlayerTile();
-    if (!origin)
-      return;
-    var target = {
-      x: origin.x + state.offset.x,
-      y: origin.y + state.offset.y
-    };
-    if (onInteraction) {
-      onInteraction("useSkill", {
-        id: state.skill.id,
-        target
-      });
-    }
-    stopTargeting();
-  };
-  var resolveKeyBind = function(key) {
-    if (!key)
-      return null;
-    if (typeof key === "string" && (keyboardControls === null || keyboardControls === void 0 ? void 0 : keyboardControls[key])) {
-      return keyboardControls[key];
-    }
-    return key;
-  };
-  var slotBind = function(index) {
-    return (keyboardControls === null || keyboardControls === void 0 ? void 0 : keyboardControls[SLOT_CONFIG_KEYS[index]]) || SLOT_LABELS[index];
-  };
-  var buildControls = function() {
-    var hotbarControls = {};
-    actionBarSlots().forEach(function(slot, index) {
-      var _a2;
-      if (!hasSlotEntry(slot))
-        return;
-      var bind = slotBind(index);
-      hotbarControls["slot-".concat(index)] = {
-        bind,
-        keyDown: function() {
-          if (isTargeting())
-            return;
-          selectedSlotIndex.set(index);
-          selectSlot(index);
-        }
-      };
-      if (slot.type === "skill") {
-        var skillBind = resolveKeyBind((_a2 = slot.skill) === null || _a2 === void 0 ? void 0 : _a2.key);
-        if (!skillBind || skillBind === bind)
-          return;
-        hotbarControls["skill-".concat(index)] = {
-          bind: skillBind,
-          keyDown: function() {
-            if (isTargeting())
-              return;
-            selectedSlotIndex.set(index);
-            selectSlot(index);
-          }
-        };
-      }
-    });
-    return __assign(__assign({ left: {
-      repeat: true,
-      bind: keyboardControls.left,
-      throttle: 150,
-      keyDown: function() {
-        if (isTargeting()) {
-          moveTargetingOffset(-1, 0);
-        }
-      }
-    }, right: {
-      repeat: true,
-      bind: keyboardControls.right,
-      throttle: 150,
-      keyDown: function() {
-        if (isTargeting()) {
-          moveTargetingOffset(1, 0);
-        }
-      }
-    }, up: {
-      repeat: true,
-      bind: keyboardControls.up,
-      throttle: 150,
-      keyDown: function() {
-        if (isTargeting()) {
-          moveTargetingOffset(0, -1);
-        }
-      }
-    }, down: {
-      repeat: true,
-      bind: keyboardControls.down,
-      throttle: 150,
-      keyDown: function() {
-        if (isTargeting()) {
-          moveTargetingOffset(0, 1);
-        }
-      }
-    }, action: {
-      bind: keyboardControls.action,
-      keyDown: function() {
-        if (isTargeting()) {
-          confirmTargeting();
-        }
-      }
-    }, escape: {
-      bind: keyboardControls.escape,
-      keyDown: function() {
-        if (isTargeting()) {
-          stopTargeting();
-          return;
-        }
-        if (onBack)
-          onBack();
-      }
-    } }, hotbarControls), { gamepad: {
-      enabled: true
-    } });
-  };
-  var controls = signal(buildControls());
-  effect(function() {
-    controls.set(buildControls());
-  });
-  let $this = 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) }))]))))));
-  return $this;
-}
-export {
-  component as default
+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
+	});
+};
+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
+	});
+};
+//#endregion
+export { actionBattleAttackPreviewState, actionBattleTargetingState, actionBattleUiOptions, moveTargetingOffset, setActionBattleOptions, startAttackPreview, startTargeting, stopAttackPreview, stopTargeting };