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

package/src/server.ts

@@ -1,6 +1,15 @@
 import { RpgEvent, RpgPlayer, type RpgServer } from "@rpgjs/server";
 import { Control, defineModule } from "@rpgjs/common";
 import { BattleAi, HitResult, ApplyHitHooks, DEFAULT_KNOCKBACK } from "./ai.server";
+import {
+  ActionBattleActionBarData,
+  ActionBattleActionBarSkill,
+  ActionBattleOptions,
+} from "./types";
+import { normalizeActionBattleOptions } from "./config";
+import { manhattanDistance, parseAoeMask } from "./targeting";
+
+export const ACTION_BATTLE_ACTION_BAR_GUI_ID = "action-battle-action-bar";
 
 /**
  * Default player attack hitboxes offsets for each direction
@@ -134,94 +143,354 @@ export function applyPlayerHitToEvent(
   return hitResult;
 }
 
-export default defineModule<RpgServer>({
-  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: RpgPlayer, input: any) {
-      if (input.action == Control.Action) {
-        // Trigger attack animation
-        player.setGraphicAnimation('attack', 1);
-
-        // Get player position
-        const playerX = player.x();
-        const playerY = player.y();
-        const direction = player.getDirection();
-
-        // Convert Direction enum to string key
-        const directionKey = direction as string;
-
-        // Get hitbox configuration for the direction
-        const hitboxConfig = DEFAULT_PLAYER_ATTACK_HITBOXES[directionKey as keyof typeof DEFAULT_PLAYER_ATTACK_HITBOXES] || DEFAULT_PLAYER_ATTACK_HITBOXES.default;
-        
-        // Convert relative hitbox to absolute coordinates
-        const hitboxes: Array<{
-          x: number;
-          y: number;
-          width: number;
-          height: number;
-        }> = [{
-          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}`);
-                }
-              }
-            });
-          },
-        });
+const resolveSignal = (value: any) =>
+  typeof value === "function" ? value() : value;
+
+const resolveItemData = (player: RpgPlayer, itemId: string) => {
+  try {
+    return (player as any).databaseById?.(itemId);
+  } catch {
+    return null;
+  }
+};
+
+const resolveSkillData = (player: RpgPlayer, skillId: string) => {
+  try {
+    return (player as any).databaseById?.(skillId);
+  } catch {
+    return null;
+  }
+};
+
+const resolveSkillTargeting = (
+  player: RpgPlayer,
+  skillId: string,
+  options: ActionBattleOptions
+) => {
+  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 as number | undefined);
+  const aoeMask =
+    skillData?.aoeMask ??
+    skillData?.targeting?.aoeMask ??
+    (skillData?.targeting?.mask as string[] | string | undefined);
+  if (range === undefined && aoeMask === undefined) {
+    return null;
+  }
+  return {
+    range: range ?? 0,
+    aoeMask,
+  };
+};
+
+const normalizeMaskRows = (mask: string[] | string | undefined) => {
+  if (!mask) return [];
+  if (Array.isArray(mask)) return mask;
+  return mask
+    .trim()
+    .split("\n")
+    .map((row: string) => row.replace(/\r/g, ""));
+};
+
+const buildActionBarData = (
+  player: RpgPlayer,
+  options: ActionBattleOptions
+): ActionBattleActionBarData => {
+  const items = (player.items?.() || []).map((item: any) => {
+    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: any) => {
+    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: ActionBattleActionBarSkill = {
+      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: RpgPlayer,
+  options: ActionBattleOptions
+) => {
+  const existing = player.getGui?.(ACTION_BATTLE_ACTION_BAR_GUI_ID);
+  const gui = existing || player.gui(ACTION_BATTLE_ACTION_BAR_GUI_ID);
+  if (!(gui as any).__actionBattleReady) {
+    (gui as any).__actionBattleReady = true;
+    gui.on("useItem", ({ id }) => {
+      try {
+        player.useItem(id);
+      } catch {
+        // Ignore failures (not usable, not enough, etc.)
+      }
+      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;
+};
+
+export const openActionBattleActionBar = (
+  player: RpgPlayer,
+  rawOptions: ActionBattleOptions = {}
+) => {
+  const options = normalizeActionBattleOptions(rawOptions);
+  const gui = ensureActionBarGui(player, options);
+  gui.open(buildActionBarData(player, options));
+};
+
+export const updateActionBattleActionBar = (
+  player: RpgPlayer,
+  rawOptions: ActionBattleOptions = {}
+) => {
+  const options = normalizeActionBattleOptions(rawOptions);
+  const gui = player.getGui?.(ACTION_BATTLE_ACTION_BAR_GUI_ID);
+  if (gui) {
+    gui.update(buildActionBarData(player, options));
+  }
+};
+
+const getTileSize = (map: any) => ({
+  width: map?.tileWidth ?? 32,
+  height: map?.tileHeight ?? 32,
+});
+
+const getEntityTile = (
+  entity: any,
+  tileSize: { width: number; height: number }
+) => {
+  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: RpgPlayer,
+  skillId: string,
+  target: { x: number; y: number } | undefined,
+  options: ActionBattleOptions
+) => {
+  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 = new Set<string>();
+  mask.cells.forEach((cell) => {
+    const x = targetTile.x + cell.dx;
+    const y = targetTile.y + cell.dy;
+    affected.add(`${x},${y}`);
+  });
+
+  const targets: any[] = [];
+  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 as any);
+};
+
+export const createActionBattleServer = (
+  rawOptions: ActionBattleOptions = {}
+) => {
+  const options = normalizeActionBattleOptions(rawOptions);
+  return defineModule<RpgServer>({
+    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: RpgPlayer, input: any) {
+        if (input.action == Control.Action) {
+          // Trigger attack animation
+          player.setGraphicAnimation("attack", 1);
+
+          // Get player position
+          const playerX = player.x();
+          const playerY = player.y();
+          const direction = player.getDirection();
+
+          // Convert Direction enum to string key
+          const directionKey = direction as string;
+
+          // Get hitbox configuration for the direction
+          const hitboxConfig =
+            DEFAULT_PLAYER_ATTACK_HITBOXES[
+              directionKey as keyof typeof DEFAULT_PLAYER_ATTACK_HITBOXES
+            ] || DEFAULT_PLAYER_ATTACK_HITBOXES.default;
+
+          // Convert relative hitbox to absolute coordinates
+          const hitboxes: Array<{
+            x: number;
+            y: number;
+            width: number;
+            height: number;
+          }> = [
+            {
+              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: RpgPlayer) {
+        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: RpgEvent, player: RpgPlayer, shape: any) {
-      const ai = (event as any).battleAi as BattleAi;
-      ai?.onDetectInShape(player, shape);
-    },
+    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: RpgEvent, player: RpgPlayer, shape: any) {
+        const ai = (event as any).battleAi as 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: RpgEvent, player: RpgPlayer, shape: any) {
-      const ai = (event as any).battleAi as BattleAi;
-      ai?.onDetectOutShape(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: RpgEvent, player: RpgPlayer, shape: any) {
+        const ai = (event as any).battleAi as BattleAi;
+        ai?.onDetectOutShape(player, shape);
+      },
     },
-  },
-});
+  });
+};
+
+export default createActionBattleServer();

package/src/targeting.ts

@@ -0,0 +1,45 @@
+import { ActionBattleAoeMask } from "./types";
+
+export interface ParsedAoeMask {
+  width: number;
+  height: number;
+  centerX: number;
+  centerY: number;
+  cells: Array<{ dx: number; dy: number }>;
+}
+
+const normalizeMaskRows = (mask: ActionBattleAoeMask | undefined): string[] => {
+  if (!mask) return ["#"];
+  if (Array.isArray(mask)) return mask;
+  return mask
+    .trim()
+    .split("\n")
+    .map((row) => row.replace(/\r/g, ""));
+};
+
+export const parseAoeMask = (mask: ActionBattleAoeMask | undefined): ParsedAoeMask => {
+  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: Array<{ dx: number; dy: number }> = [];
+
+  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 };
+};
+
+export const manhattanDistance = (a: { x: number; y: number }, b: { x: number; y: number }) =>
+  Math.abs(a.x - b.x) + Math.abs(a.y - b.y);

package/src/types.ts

@@ -0,0 +1,78 @@
+export type ActionBattleAoeMask = string[] | string;
+
+export type ActionBattleActionBarMode = "items" | "skills" | "both";
+
+export type ActionBattleTargetingAffects = "events" | "players" | "both";
+
+export interface ActionBattleSkillTargeting {
+  range: number;
+  aoeMask?: ActionBattleAoeMask;
+}
+
+export type ActionBattleSkillTargetingResolver = (
+  skill: any
+) => ActionBattleSkillTargeting | null | undefined;
+
+export interface ActionBattleUiActionBarOptions {
+  enabled?: boolean;
+  autoOpen?: boolean;
+  mode?: ActionBattleActionBarMode;
+}
+
+export interface ActionBattleUiTargetingOptions {
+  enabled?: boolean;
+  showGrid?: boolean;
+  tileSize?: { width: number; height: number };
+  colors?: {
+    area?: number;
+    edge?: number;
+    cursor?: number;
+  };
+}
+
+export interface ActionBattleUiOptions {
+  actionBar?: ActionBattleUiActionBarOptions;
+  targeting?: ActionBattleUiTargetingOptions;
+}
+
+export interface ActionBattleSkillOptions {
+  getTargeting?: ActionBattleSkillTargetingResolver;
+  defaultAoeMask?: ActionBattleAoeMask;
+}
+
+export interface ActionBattleTargetingOptions {
+  affects?: ActionBattleTargetingAffects;
+  allowEmptyTarget?: boolean;
+}
+
+export interface ActionBattleOptions {
+  ui?: ActionBattleUiOptions;
+  skills?: ActionBattleSkillOptions;
+  targeting?: ActionBattleTargetingOptions;
+}
+
+export interface ActionBattleActionBarItem {
+  id: string;
+  name: string;
+  description?: string;
+  icon?: string;
+  quantity?: number;
+  usable?: boolean;
+}
+
+export interface ActionBattleActionBarSkill {
+  id: string;
+  name: string;
+  description?: string;
+  icon?: string;
+  spCost?: number;
+  usable?: boolean;
+  range?: number;
+  aoeMask?: string[];
+  key?: string;
+}
+
+export interface ActionBattleActionBarData {
+  items: ActionBattleActionBarItem[];
+  skills: ActionBattleActionBarSkill[];
+}

package/src/ui/state.ts

@@ -0,0 +1,68 @@
+import { signal } from "canvasengine";
+import { ActionBattleActionBarSkill, ActionBattleOptions } from "../types";
+import { DEFAULT_ACTION_BATTLE_OPTIONS, normalizeActionBattleOptions } from "../config";
+
+export interface ActionBattleTargetingState {
+  active: boolean;
+  skill: ActionBattleActionBarSkill | null;
+  range: number;
+  offset: { x: number; y: number };
+  aoeMask: string[] | string;
+}
+
+const defaultTargetingState: ActionBattleTargetingState = {
+  active: false,
+  skill: null,
+  range: 0,
+  offset: { x: 0, y: 0 },
+  aoeMask: DEFAULT_ACTION_BATTLE_OPTIONS.skills?.defaultAoeMask || ["#"],
+};
+
+export const actionBattleUiOptions = signal(
+  normalizeActionBattleOptions({}).ui || {}
+);
+export const actionBattleSkillOptions = signal(
+  normalizeActionBattleOptions({}).skills || {}
+);
+
+export const actionBattleTargetingState = signal<ActionBattleTargetingState>({
+  ...defaultTargetingState,
+});
+
+export const setActionBattleOptions = (options: ActionBattleOptions = {}) => {
+  const normalized = normalizeActionBattleOptions(options);
+  actionBattleUiOptions.set(normalized.ui || {});
+  actionBattleSkillOptions.set(normalized.skills || {});
+};
+
+export const startTargeting = (skill: ActionBattleActionBarSkill) => {
+  const skillsOptions = actionBattleSkillOptions();
+  const mask = skill.aoeMask || (skillsOptions.defaultAoeMask as string[]) || ["#"];
+  actionBattleTargetingState.set({
+    active: true,
+    skill,
+    range: skill.range ?? 0,
+    offset: { x: 0, y: 0 },
+    aoeMask: mask,
+  });
+};
+
+export const stopTargeting = () => {
+  actionBattleTargetingState.set({ ...defaultTargetingState });
+};
+
+export const moveTargetingOffset = (dx: number, dy: number) => {
+  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,
+  });
+};