@rpgjs/action-battle 5.0.0-alpha.33 → 5.0.0-alpha.36

package/src/components/action-bar.ce

@@ -0,0 +1,329 @@
+<DOMContainer width="100%" height="100%" class="action-battle-actionbar-root" controls={controls}>
+  <div class="action-battle-actionbar">
+    <div class="rpg-ui-hotbar action-battle-actionbar-plate">
+      <div class="rpg-ui-hotbar-track action-battle-actionbar-track">
+        @for ((slot, index) of actionBarSlots) {
+          <div
+            class="rpg-ui-hotbar-slot action-battle-actionbar-slot"
+            data-selected={selectedSlotIndex() === index ? "true" : "false"}
+            data-disabled={isSlotDisabled(slot) ? "true" : "false"}
+            data-empty={hasSlotEntry(slot) ? "false" : "true"}
+            data-type={slot.type}
+            tabindex={hasSlotEntry(slot) ? index : -1}
+            click={hasSlotEntry(slot) ? onSelectSlot(index) : undefined}
+          >
+            <span class="rpg-ui-hotbar-key action-battle-actionbar-key">{slot.label}</span>
+            @if (slot.type === "skill" && slot.skill?.icon) {
+              <DOMSprite sheet={iconSheet(slot.skill.icon)} width="60px" height="60px" scale={2} objectFit="contain" />
+            } @else if (slot.type === "item" && slot.item?.icon) {
+              <DOMSprite sheet={iconSheet(slot.item.icon)} width="60px" height="60px" scale={2} objectFit="contain" />
+            } @else if (slot.type === "skill" && slot.skill) {
+              <span class="rpg-ui-hotbar-text action-battle-actionbar-text">{slot.skill.name}</span>
+            } @else if (slot.type === "item" && slot.item) {
+              <span class="rpg-ui-hotbar-text action-battle-actionbar-text">{slot.item.name}</span>
+            }
+            @if (slot.type === "item" && slot.item) {
+              <span class="rpg-ui-hotbar-count action-battle-actionbar-count">x{getItemQuantity(slot.item)}</span>
+            }
+          </div>
+        }
+      </div>
+    </div>
+  </div>
+</DOMContainer>
+
+<style>
+  .action-battle-actionbar-root {
+    pointer-events: none;
+  }
+
+  .action-battle-actionbar {
+    position: absolute;
+    left: 12px;
+    right: 12px;
+    bottom: 12px;
+    pointer-events: auto;
+    display: flex;
+    justify-content: center;
+  }
+
+  .action-battle-actionbar-plate {
+    width: min(760px, 100%);
+    --rpg-ui-hotbar-size: clamp(38px, 8vw, 52px);
+  }
+
+  .action-battle-actionbar-track {
+    --rpg-ui-hotbar-slots: 10;
+  }
+</style>
+
+<script>
+  import { signal, computed, effect } from "canvasengine";
+  import { inject } from "@rpgjs/client";
+  import { RpgClientEngine } from "@rpgjs/client";
+  import {
+    actionBattleTargetingState,
+    actionBattleUiOptions,
+    startTargeting,
+    stopTargeting,
+    moveTargetingOffset
+  } from "../ui/state";
+
+  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;
+    const range = skill.range ?? 0;
+    if (range > 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;
+    const x = Math.floor((player.x() + hitbox.w / 2) / tileWidth);
+    const y = Math.floor((player.y() + hitbox.h / 2) / tileHeight);
+    return { x, y };
+  };
+
+  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());
+  });
+</script>

package/src/components/targeting-overlay.ce

@@ -0,0 +1,99 @@
+<Container>
+  @if (shouldRender) {
+    <Graphics draw={drawGrid} />
+  }
+</Container>
+
+<script>
+  import { computed } from "canvasengine";
+  import { inject } from "@rpgjs/client";
+  import { RpgClientEngine } from "@rpgjs/client";
+  import { actionBattleTargetingState, actionBattleUiOptions } from "../ui/state";
+  import { parseAoeMask } from "../targeting";
+
+  const { object } = defineProps();
+  const engine = inject(RpgClientEngine);
+
+  const isCurrentPlayer = computed(() => {
+    if (!object?.id) return false;
+    const idValue = typeof object.id === "function" ? object.id() : object.id;
+    return idValue === 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();
+    const x = Math.floor((object.x() + hitbox.w / 2) / tileSize.width);
+    const y = Math.floor((object.y() + hitbox.h / 2) / tileSize.height);
+    return { x, y };
+  };
+
+  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, 0x2f9ef7);
+    const edgeColor = toColor(colors.edge, 0x1b6a98);
+    const cursorColor = toColor(colors.cursor, 0xffd166);
+
+    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: 0.35 });
+
+      if (showGrid) {
+        g.rect(relX, relY, tileSize.width, tileSize.height);
+        g.stroke({ color: edgeColor, alpha: 0.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 });
+  };
+</script>

package/src/config.ts

@@ -0,0 +1,56 @@
+import { ActionBattleOptions } from "./types";
+
+export const DEFAULT_ACTION_BATTLE_OPTIONS: ActionBattleOptions = {
+  ui: {
+    actionBar: {
+      enabled: false,
+      autoOpen: false,
+      mode: "both",
+    },
+    targeting: {
+      enabled: true,
+      showGrid: true,
+      colors: {
+        area: 0x2f9ef7,
+        edge: 0x1b6a98,
+        cursor: 0xffd166,
+      },
+    },
+  },
+  skills: {
+    defaultAoeMask: ["#"],
+  },
+  targeting: {
+    affects: "events",
+    allowEmptyTarget: true,
+  },
+};
+
+export function normalizeActionBattleOptions(
+  options: ActionBattleOptions = {}
+): ActionBattleOptions {
+  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,
+    },
+  };
+}

package/src/index.ts

@@ -1,21 +1,46 @@
-import server from "./server";
-import client from "./client";
+import server, { createActionBattleServer } from "./server";
+import client, { createActionBattleClient } from "./client";
 import { createModule } from "@rpgjs/common";
+import type { ActionBattleOptions } from "./types";
 
 // AI exports
 export { BattleAi, AiState, EnemyType, AttackPattern, AiDebug, DEFAULT_KNOCKBACK } from "./ai.server";
 
 // Types exports
 export type { HitResult, ApplyHitHooks } from "./ai.server";
+export type {
+  ActionBattleOptions,
+  ActionBattleActionBarData,
+  ActionBattleActionBarItem,
+  ActionBattleActionBarSkill,
+  ActionBattleSkillTargeting,
+  ActionBattleSkillTargetingResolver,
+  ActionBattleUiOptions,
+  ActionBattleUiActionBarOptions,
+  ActionBattleUiTargetingOptions,
+} from "./types";
 
 // Server exports
-export { DEFAULT_PLAYER_ATTACK_HITBOXES, getPlayerWeaponKnockbackForce, applyPlayerHitToEvent } from "./server";
+export {
+  DEFAULT_PLAYER_ATTACK_HITBOXES,
+  getPlayerWeaponKnockbackForce,
+  applyPlayerHitToEvent,
+  ACTION_BATTLE_ACTION_BAR_GUI_ID,
+  openActionBattleActionBar,
+  updateActionBattleActionBar,
+  createActionBattleServer,
+} from "./server";
 
-export function provideActionBattle() {
+export function provideActionBattle(options: ActionBattleOptions = {}) {
   return createModule("ActionBattle", [
     {
-      server,
-      client,
+      server: createActionBattleServer?.(options),
+      client: createActionBattleClient?.(options),
     },
   ]); 
-}
+}
+
+export default {
+  server,
+  client,
+};