@rpgjs/client 5.0.0-beta.1 → 5.0.0-beta.11

package/src/components/gui/dialogbox/index.ce

@@ -29,10 +29,15 @@
                             </div>
                         </Navigation>
                     }
-               </div>
+                </div>
                 @if (hasFace()) {
                     <div class="rpg-ui-dialog-face">
-                        <DOMSprite sheet={faceSheet(face.id, face.expression)} />
+                        <DOMSprite
+                            sheet={faceSheet(dialogFace())}
+                            width="100%"
+                            height="100%"
+                            objectFit="contain"
+                        />
                     </div>
                 }
             </div>
@@ -48,6 +53,7 @@
     import { inject } from "../../../core/inject";
     import { RpgClientEngine } from "../../../RpgClientEngine";
     import { delay } from "@rpgjs/common";
+    import { getKeyboardControlBind } from "../../../services/actionInput";
 
     const engine = inject(RpgClientEngine);
     const currentPlayer = engine.scene.currentPlayer
@@ -76,7 +82,11 @@
 
     const dialogPosition = computed(() => resolveProp(position) || "bottom");
     const isFullWidth = computed(() => resolveProp(fullWidth) !== false);
-    const hasFace = computed(() => !!resolveProp(face));
+    const dialogFace = computed(() => resolveProp(face));
+    const hasFace = computed(() => {
+        const value = dialogFace();
+        return !!(value && value.id);
+    });
 
     const displayMessage = signal("");
     const fullMessage = signal("");
@@ -163,7 +173,7 @@
             }
         },
         action: {
-            bind: keyboardControls.action,
+            bind: getKeyboardControlBind(keyboardControls.action),
             keyDown() {
                 if (isTyping()) {
                     finishTyping();
@@ -180,7 +190,7 @@
     
     const dialogControls = signal({
         action: {
-            bind: keyboardControls.action,
+            bind: getKeyboardControlBind(keyboardControls.action),
             keyDown() {
                 if (isTyping()) {
                     finishTyping();
@@ -192,10 +202,10 @@
         },
     })
 
-    const faceSheet = (graphicId, animationName) => {
+    const faceSheet = (faceValue) => {
         return {
-            definition: engine.getSpriteSheet(graphicId),
-            playing: animationName,
+            definition: engine.getSpriteSheet(faceValue.id),
+            playing: faceValue.expression || "default",
         };
     }
 

package/src/components/gui/gameover.ce

@@ -31,6 +31,7 @@
     import { inject } from "../../core/inject";
     import { RpgClientEngine } from "../../RpgClientEngine";
     import { RpgGui } from "../../Gui/Gui";
+    import { getKeyboardControlBind } from "../../services/actionInput";
 
     const engine = inject(RpgClientEngine);
     const guiService = inject(RpgGui);
@@ -146,7 +147,7 @@
             }
         },
         action: {
-            bind: keyboardControls.action,
+            bind: getKeyboardControlBind(keyboardControls.action),
             keyDown() {
                 triggerSelect(selectedEntry());
             }

package/src/components/gui/menu/equip-menu.ce

@@ -90,6 +90,7 @@
     import { signal, computed, createTabindexNavigator, effect } from "canvasengine";
     import { inject } from "../../../core/inject";
     import { RpgClientEngine } from "../../../RpgClientEngine";
+    import { getKeyboardControlBind } from "../../../services/actionInput";
 
     const engine = inject(RpgClientEngine);
     const keyboardControls = engine.globalConfig.keyboardControls;
@@ -380,7 +381,7 @@
             }
         },
         action: {
-            bind: keyboardControls.action,
+            bind: getKeyboardControlBind(keyboardControls.action),
             keyDown() {
                 if (!listEntries().length) return;
                 commitSelection(selectedItem());

package/src/components/gui/menu/exit-menu.ce

@@ -16,6 +16,7 @@
     import { signal } from "canvasengine";
     import { inject } from "../../../core/inject";
     import { RpgClientEngine } from "../../../RpgClientEngine";
+    import { getKeyboardControlBind } from "../../../services/actionInput";
 
     const engine = inject(RpgClientEngine);
     const keyboardControls = engine.globalConfig.keyboardControls;
@@ -23,7 +24,7 @@
 
     const controls = signal({
         action: {
-            bind: keyboardControls.action,
+            bind: getKeyboardControlBind(keyboardControls.action),
             keyDown() {
                 if (onConfirm) onConfirm();
             }

package/src/components/gui/menu/items-menu.ce

@@ -90,6 +90,7 @@
     import { inject } from "../../../core/inject";
     import { RpgClientEngine } from "../../../RpgClientEngine";
     import { delay } from "@rpgjs/common";
+    import { getKeyboardControlBind } from "../../../services/actionInput";
 
     const engine = inject(RpgClientEngine);
     const keyboardControls = engine.globalConfig.keyboardControls;
@@ -226,7 +227,7 @@
             }
         },
         action: {
-            bind: keyboardControls.action,
+            bind: getKeyboardControlBind(keyboardControls.action),
             keyDown() {
                 if (!confirmOpen()) return;
                 confirmSelect(selectedConfirm())();
@@ -289,7 +290,7 @@
             }
         },
         action: {
-            bind: keyboardControls.action,
+            bind: getKeyboardControlBind(keyboardControls.action),
             keyDown() {
                 if (confirmOpen()) {
                     confirmSelect(selectedConfirm())();

package/src/components/gui/menu/main-menu.ce

@@ -101,6 +101,7 @@
     import ExitMenu from "./exit-menu.ce";
     import { getEntityProp } from "../../../utils/getEntityProp";
     import { delay } from "@rpgjs/common";
+    import { getKeyboardControlBind } from "../../../services/actionInput";
 
     const engine = inject(RpgClientEngine);
     const currentPlayer = engine.scene.currentPlayer;
@@ -259,7 +260,7 @@
             }
         },
         action: {
-            bind: keyboardControls.action,
+            bind: getKeyboardControlBind(keyboardControls.action),
             keyDown() {
                 if (saveOverlay()) return;
                 if (view() !== "menu") return;

package/src/components/gui/save-load.ce

@@ -40,6 +40,7 @@
     import { SaveClientService } from "../../services/save";
     import { PrebuiltGui } from "@rpgjs/common";
     import { RpgGui } from "../../Gui/Gui";
+    import { getKeyboardControlBind } from "../../services/actionInput";
 
     const engine = inject(RpgClientEngine);
     const saveClient = inject(SaveClientService);
@@ -185,7 +186,7 @@
             }
         },
         action: {
-            bind: keyboardControls.action,
+            bind: getKeyboardControlBind(keyboardControls.action),
             keyDown() {
                 triggerSelect(selectedSlot());
             }

package/src/components/gui/shop/shop.ce

@@ -180,6 +180,7 @@
     import { mount, signal, computed, createTabindexNavigator, effect } from "canvasengine";
     import { inject } from "../../../core/inject";
     import { RpgClientEngine } from "../../../RpgClientEngine";
+    import { getKeyboardControlBind } from "../../../services/actionInput";
 
     const engine = inject(RpgClientEngine)
     const currentPlayer = engine.scene.currentPlayer
@@ -387,7 +388,7 @@
             }
         },
         action: {
-            bind: keyboardControls.action,
+            bind: getKeyboardControlBind(keyboardControls.action),
             keyDown() {
                 const mode = selectedModeIndex() === 0 ? 'buy' : 'sell'
                 tradeMode.set(mode)
@@ -433,7 +434,7 @@
             }
         },
         action: {
-            bind: keyboardControls.action,
+            bind: getKeyboardControlBind(keyboardControls.action),
             keyDown() {
                 if (quantityDialogOpen()) {
                     const item = currentItem()

package/src/components/gui/title-screen.ce

@@ -31,6 +31,7 @@
     import { inject } from "../../core/inject";
     import { RpgClientEngine } from "../../RpgClientEngine";
     import { RpgGui } from "../../Gui/Gui";
+    import { getKeyboardControlBind } from "../../services/actionInput";
 
     const engine = inject(RpgClientEngine);
     const guiService = inject(RpgGui);
@@ -150,7 +151,7 @@
             }
         },
         action: {
-            bind: keyboardControls.action,
+            bind: getKeyboardControlBind(keyboardControls.action),
             keyDown() {
                 if (guiService.isDisplaying(PrebuiltGui.Save)) return;
                 triggerSelect(selectedEntry());

package/src/components/index.ts

@@ -1,7 +1,8 @@
 import EventLayerComponent from "./scenes/event-layer.ce";
+import SceneMap from "./scenes/draw-map.ce";
 import CharacterComponent from "./character.ce";
 
 // Prebuilt sprite components
 export { HpBar } from "./prebuilt";
 
-export { EventLayerComponent, CharacterComponent } 
+export { EventLayerComponent, SceneMap, CharacterComponent } 

package/src/components/player-components-utils.spec.ts

@@ -0,0 +1,109 @@
+import { describe, expect, test } from "vitest";
+import {
+  computeBlockPosition,
+  computeBlockSize,
+  estimateComponentSize,
+  getComponentProps
+} from "./player-components-utils";
+
+const graphic = {
+  left: -8,
+  top: -24,
+  right: 40,
+  bottom: 48,
+  width: 48,
+  height: 72,
+  centerX: 16,
+  centerY: 12
+};
+
+describe("player component layout utilities", () => {
+  test("bottom layout uses the hitbox as positioning rectangle", () => {
+    const rowMetrics = [
+      {
+        cells: [{ width: 32, height: 32 }],
+        width: 32,
+        height: 32
+      }
+    ];
+
+    const size = computeBlockSize({
+      position: "bottom",
+      rowMetrics,
+      graphic,
+      hitbox: { w: 32, h: 32 }
+    });
+
+    expect(size).toEqual({ width: 32, height: 32 });
+    expect(
+      computeBlockPosition({
+        position: "bottom",
+        size,
+        graphic,
+        hitbox: { w: 32, h: 32 }
+      })
+    ).toEqual({ x: 0, y: 0 });
+  });
+
+  test("bottom layout centers smaller content in the hitbox rectangle", () => {
+    const size = computeBlockSize({
+      position: "bottom",
+      rowMetrics: [
+        {
+          cells: [{ width: 16, height: 8 }],
+          width: 16,
+          height: 8
+        }
+      ],
+      graphic,
+      hitbox: { w: 32, h: 32 }
+    });
+
+    expect(size).toEqual({ width: 32, height: 32 });
+    expect(
+      computeBlockPosition({
+        position: "bottom",
+        size,
+        graphic,
+        hitbox: { w: 32, h: 32 }
+      })
+    ).toEqual({ x: 0, y: 0 });
+  });
+
+  test("bottom margins move from the hitbox-centered position", () => {
+    const position = computeBlockPosition({
+      position: "bottom",
+      size: { width: 32, height: 32 },
+      layout: { marginLeft: 3, marginRight: 1, marginBottom: 16, marginTop: 4 },
+      graphic,
+      hitbox: { w: 32, h: 32 }
+    });
+
+    expect(position).toEqual({ x: 2, y: 12 });
+  });
+
+  test("top layout remains anchored above graphic bounds", () => {
+    const position = computeBlockPosition({
+      position: "top",
+      size: { width: 50, height: 12 },
+      graphic,
+      hitbox: { w: 32, h: 32 }
+    });
+
+    expect(position).toEqual({ x: -9, y: -36 });
+  });
+
+  test("estimates bar labels, shape aliases, circles, lines and polygons", () => {
+    expect(estimateComponentSize({ type: "hpBar", style: { width: 60, height: 6 }, text: "{$percent}%" })).toEqual({ width: 60, height: 18 });
+    expect(estimateComponentSize({ type: "shape", value: { type: "rect", width: 32, height: 24 } })).toEqual({ width: 32, height: 24 });
+    expect(estimateComponentSize({ type: "shape", value: { type: "circle", radius: 7 } })).toEqual({ width: 14, height: 14 });
+    expect(estimateComponentSize({ type: "shape", value: { type: "line", x1: -4, y1: 2, x2: 6, y2: 2 } })).toEqual({ width: 10, height: 1 });
+    expect(estimateComponentSize({ type: "shape", value: { type: "polygon", points: [-5, 2, 15, 2, 5, 12] } })).toEqual({ width: 20, height: 10 });
+  });
+
+  test("legacy hp and sp bars receive default fill colors", () => {
+    expect(getComponentProps({ type: "hpBar" }).style.fillColor).toBe("#ef4444");
+    expect(getComponentProps({ type: "spBar" }).style.fillColor).toBe("#3b82f6");
+    expect(getComponentProps({ type: "hpBar", style: { fillColor: "#111111" } }).style.fillColor).toBe("#111111");
+  });
+});

package/src/components/player-components-utils.ts

@@ -0,0 +1,205 @@
+export const DEFAULT_HP_BAR_STYLE = { fillColor: '#ef4444' };
+export const DEFAULT_SP_BAR_STYLE = { fillColor: '#3b82f6' };
+
+const DEFAULT_CELL_HEIGHT = 16;
+const DEFAULT_CELL_WIDTH = 32;
+
+type NumberResolver = (value: any, fallback?: number) => number;
+
+const defaultToNumber: NumberResolver = (value, fallback = 0) => {
+  const num = typeof value === 'number' ? value : parseFloat(value);
+  return Number.isFinite(num) ? num : fallback;
+};
+
+export function getPointBounds(points: any[] = [], toNumber: NumberResolver = defaultToNumber) {
+  if (!Array.isArray(points) || points.length < 2) {
+    return { width: 1, height: 1 };
+  }
+
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+
+  for (let i = 0; i < points.length; i += 2) {
+    const x = toNumber(points[i], 0);
+    const y = toNumber(points[i + 1], 0);
+    minX = Math.min(minX, x);
+    minY = Math.min(minY, y);
+    maxX = Math.max(maxX, x);
+    maxY = Math.max(maxY, y);
+  }
+
+  return {
+    width: Math.max(1, maxX - minX),
+    height: Math.max(1, maxY - minY)
+  };
+}
+
+export function getComponentId(definition: any) {
+  if (!definition) return undefined;
+  if (definition.id) return definition.id;
+  if (definition.type === 'text') return 'rpg:text';
+  if (definition.type === 'hpBar') return 'rpg:hpBar';
+  if (definition.type === 'spBar') return 'rpg:spBar';
+  if (definition.type === 'bar') return 'rpg:bar';
+  if (definition.type === 'shape') return 'rpg:shape';
+  if (definition.type === 'image') return 'rpg:image';
+  if (definition.type === 'tile') return 'rpg:tile';
+  return definition.type;
+}
+
+export function getComponentProps(definition: any) {
+  if (definition.props) return definition.props;
+
+  if (definition.type === 'text') {
+    return { value: definition.value, style: definition.style };
+  }
+  if (definition.type === 'hpBar') {
+    return { current: '{hp}', max: '{param.maxHp}', style: { ...DEFAULT_HP_BAR_STYLE, ...definition.style }, text: definition.text };
+  }
+  if (definition.type === 'spBar') {
+    return { current: '{sp}', max: '{param.maxSp}', style: { ...DEFAULT_SP_BAR_STYLE, ...definition.style }, text: definition.text };
+  }
+  if (definition.type === 'bar') {
+    return { current: `{${definition.current}}`, max: `{${definition.max}}`, style: definition.style, text: definition.text };
+  }
+  if (definition.type === 'shape') {
+    return definition.value;
+  }
+  if (definition.type === 'image' || definition.type === 'tile') {
+    return { value: definition.value };
+  }
+
+  return {};
+}
+
+export function estimateComponentSize(
+  definition: any,
+  {
+    toNumber = defaultToNumber,
+    estimateTextWidth = (value: any) => String(value ?? '').length * 8
+  }: {
+    toNumber?: NumberResolver;
+    estimateTextWidth?: (value: any, style?: any) => number;
+  } = {}
+) {
+  const props = getComponentProps(definition);
+  const style = props?.style ?? definition?.style ?? {};
+
+  if (definition?.type === 'text' || definition?.id === 'rpg:text') {
+    return {
+      width: estimateTextWidth(props.value ?? definition.value, style),
+      height: toNumber(style.fontSize, 12)
+    };
+  }
+
+  if (definition?.type === 'hpBar' || definition?.type === 'spBar' || definition?.type === 'bar' || definition?.id === 'rpg:hpBar' || definition?.id === 'rpg:spBar' || definition?.id === 'rpg:bar') {
+    const barHeight = toNumber(style.height, 8);
+    const labelHeight = props.text != null && props.text !== '' ? toNumber(style.fontSize, 10) + 2 : 0;
+    return {
+      width: toNumber(style.width, 50),
+      height: barHeight + labelHeight
+    };
+  }
+
+  if (definition?.type === 'shape' || definition?.id === 'rpg:shape') {
+    const shape = props ?? {};
+    if (shape.type === 'circle') {
+      const radius = toNumber(shape.radius, 8);
+      return { width: radius * 2, height: radius * 2 };
+    }
+    if (shape.type === 'line') {
+      return {
+        width: Math.max(1, Math.abs(toNumber(shape.x2, 16) - toNumber(shape.x1, 0))),
+        height: Math.max(1, Math.abs(toNumber(shape.y2, 0) - toNumber(shape.y1, 0)))
+      };
+    }
+    if (shape.type === 'polygon') {
+      return getPointBounds(shape.points, toNumber);
+    }
+    return {
+      width: toNumber(shape.width, 16),
+      height: toNumber(shape.height, 16)
+    };
+  }
+
+  return {
+    width: toNumber(definition?.props?.width, DEFAULT_CELL_WIDTH),
+    height: toNumber(definition?.props?.height, DEFAULT_CELL_HEIGHT)
+  };
+}
+
+export function computeBlockSize({
+  position,
+  layout = {},
+  rowMetrics,
+  gap = { row: 0, column: 0 },
+  graphic,
+  hitbox
+}: {
+  position: string;
+  layout?: any;
+  rowMetrics: Array<{ width: number; height: number; cells: any[] }>;
+  gap?: { row: number; column: number };
+  graphic: { width: number; height: number };
+  hitbox: { w: number; h: number };
+}) {
+  const rowGapTotal = Math.max(0, rowMetrics.length - 1) * gap.row;
+  const maxColumns = rowMetrics.reduce((max, row) => Math.max(max, row.cells.length), 0);
+  const columnGapTotal = Math.max(0, maxColumns - 1) * gap.column;
+  const contentWidth = rowMetrics.reduce((max, row) => Math.max(max, row.width), 0) + columnGapTotal;
+  const contentHeight = rowMetrics.reduce((sum, row) => sum + row.height, 0) + rowGapTotal;
+  const width = layout.width ?? Math.max(contentWidth, position === 'bottom' ? hitbox.w : position === 'top' || position === 'center' ? graphic.width : contentWidth);
+  const height = layout.height ?? Math.max(contentHeight, position === 'bottom' ? hitbox.h : position === 'left' || position === 'right' || position === 'center' ? graphic.height : contentHeight);
+
+  return { width, height };
+}
+
+export function computeBlockPosition({
+  position,
+  size,
+  layout = {},
+  graphic,
+  hitbox
+}: {
+  position: string;
+  size: { width: number; height: number };
+  layout?: any;
+  graphic: { left: number; top: number; right: number; centerX: number; centerY: number };
+  hitbox: { w: number; h: number };
+}) {
+  const marginLeft = layout.marginLeft ?? 0;
+  const marginRight = layout.marginRight ?? 0;
+  const marginTop = layout.marginTop ?? 0;
+  const marginBottom = layout.marginBottom ?? 0;
+
+  switch (position) {
+    case 'bottom':
+      return {
+        x: (hitbox.w / 2) - (size.width / 2) + marginLeft - marginRight,
+        y: (hitbox.h / 2) - (size.height / 2) + marginBottom - marginTop
+      };
+    case 'center':
+      return {
+        x: graphic.centerX - (size.width / 2) + marginLeft - marginRight,
+        y: graphic.centerY - (size.height / 2) + marginTop - marginBottom
+      };
+    case 'left':
+      return {
+        x: graphic.left - size.width + marginLeft - marginRight,
+        y: graphic.centerY - (size.height / 2) + marginTop - marginBottom
+      };
+    case 'right':
+      return {
+        x: graphic.right + marginLeft - marginRight,
+        y: graphic.centerY - (size.height / 2) + marginTop - marginBottom
+      };
+    case 'top':
+    default:
+      return {
+        x: graphic.centerX - (size.width / 2) + marginLeft - marginRight,
+        y: graphic.top - size.height + marginTop - marginBottom
+      };
+  }
+}