@rpgjs/client 5.0.0-beta.2 → 5.0.0-beta.20

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

@@ -2,7 +2,7 @@
     <div class="rpg-ui-main-menu rpg-anim-fade-in">
         <div class="rpg-ui-main-menu-layout">
             <div class="rpg-ui-main-menu-left rpg-ui-menu rpg-ui-panel">
-                <div class="rpg-ui-menu-header">Menu</div>
+                <div class="rpg-ui-menu-header">{t("rpg.menu.title")}</div>
                 <div class="rpg-ui-main-menu-list">
                     @for ((entry,index) of menuEntries()) {
                         <div
@@ -18,14 +18,14 @@
             <div class="rpg-ui-main-menu-right">
                 @if (view() === "menu") {
                     <div class="rpg-ui-panel">
-                        <div class="rpg-ui-main-menu-section-title">Status</div>
+                        <div class="rpg-ui-main-menu-section-title">{t("rpg.menu.status")}</div>
                         <div class="rpg-ui-main-menu-status-card">
                             <div class="rpg-ui-main-menu-status-block">
-                                <div class="rpg-ui-main-menu-status-label">Level</div>
+                                <div class="rpg-ui-main-menu-status-label">{t("rpg.menu.level")}</div>
                                 <div class="rpg-ui-main-menu-status-value">{level()}</div>
                             </div>
                             <div class="rpg-ui-main-menu-status-block">
-                                <div class="rpg-ui-main-menu-status-label">Gold</div>
+                                <div class="rpg-ui-main-menu-status-label">{t("rpg.menu.gold")}</div>
                                 <div class="rpg-ui-main-menu-status-value">{gold()}</div>
                             </div>
                             <div class="rpg-ui-main-menu-status-block">
@@ -47,7 +47,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="rpg-ui-main-menu-section-title">Parameters</div>
+                        <div class="rpg-ui-main-menu-section-title">{t("rpg.menu.parameters")}</div>
                         <div class="rpg-ui-main-menu-params">
                             @for ((param,index) of paramsList) {
                                 <div class="rpg-ui-main-menu-param">
@@ -101,8 +101,10 @@
     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 { t } = engine.i18n();
     const currentPlayer = engine.scene.currentPlayer;
     const keyboardControls = engine.globalConfig.keyboardControls;
 
@@ -110,12 +112,12 @@
     const { menus, items, skills, equips, saveLoad } = data();
 
     const defaultMenus = [
-        { id: "items", label: "Items" },
-        { id: "skills", label: "Skills" },
-        { id: "equip", label: "Equip" },
-        { id: "options", label: "Options" },
-        { id: "save", label: "Save" },
-        { id: "exit", label: "Exit" }
+        { id: "items", label: t("rpg.menu.items") },
+        { id: "skills", label: t("rpg.menu.skills") },
+        { id: "equip", label: t("rpg.menu.equip") },
+        { id: "options", label: t("rpg.menu.options") },
+        { id: "save", label: t("rpg.menu.save") },
+        { id: "exit", label: t("rpg.menu.exit") }
     ];
 
     const menuEntries = computed(() => {
@@ -259,7 +261,7 @@
             }
         },
         action: {
-            bind: keyboardControls.action,
+            bind: getKeyboardControlBind(keyboardControls.action),
             keyDown() {
                 if (saveOverlay()) return;
                 if (view() !== "menu") return;

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

@@ -1,11 +1,11 @@
 <DOMContainer width="100%" height="100%" controls={controls}>
     <div class="rpg-ui-menu-panel rpg-ui-panel">
-        <div class="rpg-ui-menu-panel-header">Options</div>
+        <div class="rpg-ui-menu-panel-header">{t("rpg.menu.options")}</div>
         <div class="rpg-ui-menu-panel-body">
             <div class="rpg-ui-menu-panel-details">
-                <div class="rpg-ui-menu-panel-details-title">Options</div>
+                <div class="rpg-ui-menu-panel-details-title">{t("rpg.menu.options")}</div>
                 <div class="rpg-ui-menu-panel-details-desc">
-                    Configure your preferences here.
+                    {t("rpg.menu.options-help")}
                 </div>
             </div>
         </div>
@@ -18,6 +18,7 @@
     import { RpgClientEngine } from "../../../RpgClientEngine";
 
     const engine = inject(RpgClientEngine);
+    const { t } = engine.i18n();
     const keyboardControls = engine.globalConfig.keyboardControls;
     const { onBack } = defineProps();
 

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

@@ -1,6 +1,6 @@
 <DOMContainer width="100%" height="100%">
     <div class="rpg-ui-menu-panel rpg-ui-panel">
-        <div class="rpg-ui-menu-panel-header">Skills</div>
+        <div class="rpg-ui-menu-panel-header">{t("rpg.menu.skills")}</div>
         <div class="rpg-ui-menu-panel-body rpg-ui-menu-panel-body-stacked">
             <div class="rpg-ui-menu-panel-details rpg-ui-panel">
                 @if (currentSkill) {
@@ -38,6 +38,7 @@
     import { RpgClientEngine } from "../../../RpgClientEngine";
 
     const engine = inject(RpgClientEngine);
+    const { t } = engine.i18n();
     const keyboardControls = engine.globalConfig.keyboardControls;
 
     const selectedSkill = signal(0);

package/src/components/gui/notification/notification.ce

@@ -1,4 +1,10 @@
-<DOMContainer width="100%" height="100%" zIndex={100} class="notification">
+<DOMContainer
+    width="100%"
+    height="100%"
+    zIndex={100}
+    class="notification"
+    style="pointer-events: none !important;"
+>
     <div class="rpg-ui-notifications">
         @for ((notif,index) of notifications) {
             <div

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

@@ -17,14 +17,14 @@
                         <div class="rpg-ui-save-load-slot-index">{item.label}</div>
                         @if (item.slot) {
                             <div class="rpg-ui-save-load-slot-meta">
-                                <div class="rpg-ui-save-load-slot-line">Level: {item.slot.level ?? "-"}</div>
-                                <div class="rpg-ui-save-load-slot-line">Exp: {item.slot.exp ?? "-"}</div>
-                                <div class="rpg-ui-save-load-slot-line">Map: {item.slot.map ?? "-"}</div>
-                                <div class="rpg-ui-save-load-slot-line">Date: {item.slot.date ?? "-"}</div>
+                                <div class="rpg-ui-save-load-slot-line">{t("rpg.save.level")}: {item.slot.level ?? "-"}</div>
+                                <div class="rpg-ui-save-load-slot-line">{t("rpg.save.exp")}: {item.slot.exp ?? "-"}</div>
+                                <div class="rpg-ui-save-load-slot-line">{t("rpg.save.map")}: {item.slot.map ?? "-"}</div>
+                                <div class="rpg-ui-save-load-slot-line">{t("rpg.save.date")}: {item.slot.date ?? "-"}</div>
                             </div>
                         }
                         @else {
-                            <div class="rpg-ui-save-load-slot-empty">Empty Slot</div>
+                            <div class="rpg-ui-save-load-slot-empty">{t("rpg.save.empty-slot")}</div>
                         }
                     </div>
                 }
@@ -40,8 +40,10 @@
     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 { t } = engine.i18n();
     const saveClient = inject(SaveClientService);
     const gui = inject(RpgGui);
     const keyboardControls = engine.globalConfig.keyboardControls;
@@ -53,10 +55,10 @@
 
     const { data, onFinish } = defineProps();
 
-    const title = computed(() => data().mode === "save" ? "Save Game" : "Load Game");
+    const title = computed(() => data().mode === "save" ? t("rpg.save.title") : t("rpg.load.title"));
     const subtitle = computed(() => data().mode === "save"
-        ? "Choose a slot to overwrite or create."
-        : "Select a slot to load your progress."
+        ? t("rpg.save.subtitle")
+        : t("rpg.load.subtitle")
     );
 
     const slotsValue = computed(() => localSlots());
@@ -66,7 +68,7 @@
             kind: "slot",
             slot,
             slotIndex: index,
-            label: `Slot ${index + 1}`,
+            label: t("rpg.save.slot", { index: index + 1 }),
             readonly: false
         }));
         if (!data().showAutoSlot) return items;
@@ -78,7 +80,7 @@
                 kind: "auto",
                 slot: autoSlot,
                 slotIndex: index,
-                label: data().autoSlotLabel || "Auto Save",
+                label: data().autoSlotLabel || t("rpg.save.auto"),
                 readonly
             },
             ...items
@@ -185,7 +187,7 @@
             }
         },
         action: {
-            bind: keyboardControls.action,
+            bind: getKeyboardControlBind(keyboardControls.action),
             keyDown() {
                 triggerSelect(selectedSlot());
             }

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

@@ -30,7 +30,7 @@
                         <div class="rpg-shop-details rpg-shop-details-mode">
                             <div class="rpg-shop-details-header">
                             <div class="rpg-shop-details-icon">🛒</div>
-                            <h2 style="margin: 0;">Choose an action</h2>
+                            <h2 style="margin: 0;">{t("rpg.shop.choose-action")}</h2>
                         </div>
                         <div class="rpg-shop-trade">
                             <Navigation tabindex={selectedModeIndex} controls={modeControls}>
@@ -39,12 +39,12 @@
                                         class="rpg-shop-tab"
                                         class={{active: selectedModeIndex() === 0}}
                                         click={selectMode('buy')}
-                                    >Buy</div>
+                                    >{t("rpg.shop.buy")}</div>
                                     <div
                                         class="rpg-shop-tab"
                                         class={{active: selectedModeIndex() === 1}}
                                         click={selectMode('sell')}
-                                    >Sell</div>
+                                    >{t("rpg.shop.sell")}</div>
                                 </div>
                             </Navigation>
                         </div>
@@ -88,7 +88,7 @@
                                             <div class="rpg-shop-card-qty">x{{ item.quantity }}</div>
                                         }
                                         @if (item.equipped) {
-                                            <div class="rpg-shop-card-tag">Equipped</div>
+                                            <div class="rpg-shop-card-tag">{t("rpg.shop.equipped")}</div>
                                         }
                                     </div>
                                 }
@@ -109,12 +109,12 @@
                                 <h2 style="margin: 0;">{{ currentItem()?.name || "" }}</h2>
                                 <p style="color: #ffd700; font-weight: bold; margin: 8px 0;">{{ currentItem()?.price ?? 0 }} {{ goldTerm }}</p>
                                 @if (currentItem()?.quantity !== undefined) {
-                                    <div class="rpg-shop-details-qty">Qty: x{{ currentItem()?.quantity }}</div>
+                                    <div class="rpg-shop-details-qty">{t("rpg.shop.qty")}: x{{ currentItem()?.quantity }}</div>
                                 }
                             </div>
                             <div>
                                 @if (currentItem()?.equipped) {
-                                    <div class="rpg-shop-equipped">Already equipped</div>
+                                    <div class="rpg-shop-equipped">{t("rpg.shop.already-equipped")}</div>
                                 }
                             </div>
                             <div class="rpg-shop-details-desc">
@@ -137,7 +137,7 @@
                                     </div>
                                 }
                             </div>
-                            <button class="rpg-shop-btn" click={backToMode()}>Back</button>
+                            <button class="rpg-shop-btn" click={backToMode()}>{t("rpg.shop.back")}</button>
                         </div>
                     </div>
                     </div>
@@ -148,10 +148,10 @@
                             <div class="rpg-shop-modal-title">{{ actionLabel }}</div>
                             <div class="rpg-shop-modal-item">{{ currentItem()?.name || "" }}</div>
                             @if (currentItem()?.quantity !== undefined) {
-                                <div class="rpg-shop-modal-qty">Available: x{{ currentItem()?.quantity }}</div>
+                                <div class="rpg-shop-modal-qty">{t("rpg.shop.available")}: x{{ currentItem()?.quantity }}</div>
                             }
                             <div class="rpg-shop-quantity">
-                                <div class="rpg-shop-quantity-label">Quantity</div>
+                                <div class="rpg-shop-quantity-label">{t("rpg.shop.quantity")}</div>
                                 <div class="rpg-shop-quantity-controls">
                                     <button class="rpg-shop-btn" click={changeQuantity(-1)}>-</button>
                                     <div class="rpg-shop-quantity-value">{{ quantity }}</div>
@@ -159,11 +159,11 @@
                                 </div>
                             </div>
                             <div class="rpg-shop-modal-total">
-                                <span>Total</span>
+                                <span>{t("rpg.shop.total")}</span>
                                 <span>{{ totalPrice() }} {{ goldTerm }}</span>
                             </div>
                             <div class="rpg-shop-modal-actions">
-                                <button class="rpg-shop-btn rpg-shop-btn-secondary" click={closeQuantityDialog()}>Cancel</button>
+                                <button class="rpg-shop-btn rpg-shop-btn-secondary" click={closeQuantityDialog()}>{t("rpg.menu.cancel")}</button>
                                 <button class="rpg-shop-btn" click={confirmTrade()}>
                                     {{ actionLabel() }} x{{ quantity() }}
                                 </button>
@@ -180,8 +180,10 @@
     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 { t } = engine.i18n()
     const currentPlayer = engine.scene.currentPlayer
     const keyboardControls = engine.globalConfig.keyboardControls
     const iconSheet = (iconId) => ({
@@ -197,11 +199,11 @@
     const selectedModeIndex = signal(0)
     const quantity = signal(1)
     const quantityDialogOpen = signal(false)
-    const defaultMessage = 'Welcome to my shop!'
+    const defaultMessage = t("rpg.shop.default-message")
     const tabs = [
-        { id: 'item', label: 'Items' },
-        { id: 'weapon', label: 'Weapons' },
-        { id: 'armor', label: 'Armor' }
+        { id: 'item', label: t("rpg.menu.items") },
+        { id: 'weapon', label: t("rpg.menu.weapons") },
+        { id: 'armor', label: t("rpg.menu.armor") }
     ]
 
     const { data, onInteraction , onFinish } = defineProps()
@@ -228,7 +230,7 @@
     })
     const currentItem = computed(() => filteredItems()[selectedItem()])
     const gold = computed(() => currentPlayer()._gold())
-    const actionLabel = computed(() => tradeMode() === 'buy' ? 'Buy' : 'Sell')
+    const actionLabel = computed(() => tradeMode() === 'buy' ? t("rpg.shop.buy") : t("rpg.shop.sell"))
     const faceSheet = (graphicId, animationName) => ({
         definition: engine.getSpriteSheet(graphicId),
         playing: animationName || "default"
@@ -387,7 +389,7 @@
             }
         },
         action: {
-            bind: keyboardControls.action,
+            bind: getKeyboardControlBind(keyboardControls.action),
             keyDown() {
                 const mode = selectedModeIndex() === 0 ? 'buy' : 'sell'
                 tradeMode.set(mode)
@@ -433,7 +435,7 @@
             }
         },
         action: {
-            bind: keyboardControls.action,
+            bind: getKeyboardControlBind(keyboardControls.action),
             keyDown() {
                 if (quantityDialogOpen()) {
                     const item = currentItem()

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

@@ -31,8 +31,10 @@
     import { inject } from "../../core/inject";
     import { RpgClientEngine } from "../../RpgClientEngine";
     import { RpgGui } from "../../Gui/Gui";
+    import { getKeyboardControlBind } from "../../services/actionInput";
 
     const engine = inject(RpgClientEngine);
+    const { t } = engine.i18n();
     const guiService = inject(RpgGui);
     const keyboardControls = engine.globalConfig.keyboardControls;
 
@@ -51,12 +53,12 @@
     const { entries, title, subtitle, version, saveLoad, localActions } = data();
 
     const defaultEntries = [
-        { id: "start", label: "Start" },
-        { id: "load", label: "Load" }
+        { id: "start", label: t("rpg.title.start") },
+        { id: "load", label: t("rpg.title.load") }
     ];
 
     const resolveProp = (value) => typeof value === "function" ? value() : value;
-    const titleText = computed(() => resolveProp(title) || "RPG");
+    const titleText = computed(() => resolveProp(title) || t("rpg.title.default"));
     const subtitleText = computed(() => resolveProp(subtitle) || "");
     const versionText = computed(() => resolveProp(version) || "");
     const localActionsEnabled = computed(() => resolveProp(localActions) === true);
@@ -150,7 +152,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/interaction-components.ce

@@ -0,0 +1,23 @@
+<Container>
+  @for (entry of renderedComponents) {
+    <Container dependencies={entry.dependencies}>
+      <entry.component ...entry.props />
+    </Container>
+  }
+</Container>
+
+<script>
+  import { computed } from "canvasengine";
+  import { RpgClientEngine } from "../RpgClientEngine";
+  import { inject } from "../core/inject";
+
+  const { object, bounds, hitboxBounds, graphicBounds } = defineProps();
+  const client = inject(RpgClientEngine);
+  const sprite = object();
+
+  const renderedComponents = computed(() => client.interactions.getRenderedComponents(sprite, {
+    bounds: typeof bounds === "function" ? bounds() : undefined,
+    hitbox: typeof hitboxBounds === "function" ? hitboxBounds() : undefined,
+    graphic: typeof graphicBounds === "function" ? graphicBounds() : undefined,
+  }));
+</script>

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");
+  });
+});