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

package/src/components/dynamics/text.ce

@@ -1,157 +1,39 @@
-<Text text={parseDynamicValue(component.value, object)} ...getComponentStyle(component) />
+<Text text={textValue} color={textColor} size={textSize} fontFamily={textFontFamily} style={textStyle} />
 
 <script>
 import { computed } from "canvasengine";
-import { parseDynamicValue } from "./parse-value";
+import { resolveDynamicValue } from "./parse-value";
 
-const { object } = defineProps();
-const component = object._component;
+const { object, value, style } = defineProps();
+const sprite = object();
 
-/**
- * Parses a numeric style value that can be a number or a string
- * 
- * If the value is a string, it may contain dynamic references like {hp}
- * which need to be parsed using parseDynamicValue. If it's a number,
- * it's returned as-is wrapped in a computed.
- * 
- * @param value - Numeric value (number or string)
- * @param object - Object to resolve dynamic references from
- * @returns Computed signal with the numeric value
- */
-const parseNumericStyleValue = (value, object) => {
-    if (value === undefined || value === null) {
-        return undefined;
-    }
-    
-    if (typeof value === 'number') {
-        return value;
-    }
-    
-    if (typeof value === 'string') {
-        // Check if it contains dynamic references
-        if (value.includes('{')) {
-            // Parse dynamic value and convert to number
-            const parsed = parseDynamicValue(value, object);
-            return computed(() => {
-                const str = parsed();
-                const num = parseFloat(str);
-                return isNaN(num) ? 0 : num;
-            });
-        } else {
-            // Simple string number, convert directly
-            const num = parseFloat(value);
-            return isNaN(num) ? undefined : num;
-        }
-    }
-    
-    return value;
-};
-
-/**
- * Maps component style properties to Canvas Engine Text component props
- * 
- * Converts TextComponentOptions from the server to the format expected
- * by the Canvas Engine Text component. Supports all text styling properties
- * including fill, fontSize, fontFamily, fontStyle, fontWeight, stroke,
- * opacity, wordWrap, and align. Also supports dynamic values (number | string)
- * for numeric properties like fontSize and opacity.
- * 
- * @param component - Component definition with style property
- * @returns Object with Text component props
- * 
- * @example
- * ```ts
- * // Component with style
- * const component = {
- *   style: {
- *     fill: '#000000',
- *     fontSize: 20,
- *     fontFamily: 'Arial',
- *     fontWeight: 'bold'
- *   }
- * };
- * 
- * const props = getComponentStyle(component);
- * // Returns: { color: '#000000', size: 20, fontFamily: 'Arial', style: { fontWeight: 'bold' } }
- * 
- * // Component with dynamic fontSize
- * const component2 = {
- *   style: {
- *     fill: '#000000',
- *     fontSize: '{hp}', // Will be resolved from object.hp
- *     opacity: '0.8'
- *   }
- * };
- * ```
- */
-const getComponentStyle = (component) => {
-    if (!component.style) {
-        return {};
-    }
-
-    const style = component.style;
-    const result = {};
-
-    // Map fill to color (shortcut property)
-    // fill can be a string (hex color) or a dynamic string
-    if (style.fill !== undefined) {
-        if (typeof style.fill === 'string' && style.fill.includes('{')) {
-            result.color = parseDynamicValue(style.fill, object);
-        } else {
-            result.color = style.fill;
-        }
-    }
+const read = (prop, fallback) => prop ? prop() : fallback;
 
-    // Map fontSize to size (shortcut property)
-    // fontSize can be number or string (with dynamic references)
-    if (style.fontSize !== undefined) {
-        const fontSizeValue = parseNumericStyleValue(style.fontSize, object);
-        if (fontSizeValue !== undefined) {
-            result.size = fontSizeValue;
-        }
-    }
+const parseNumericStyleValue = (value, object) => {
+    value = resolveDynamicValue(value, sprite);
+    if (value === undefined || value === null) return undefined;
+    if (typeof value === 'number') return value;
 
-    // Map fontFamily (shortcut property)
-    if (style.fontFamily !== undefined) {
-        if (typeof style.fontFamily === 'string' && style.fontFamily.includes('{')) {
-            result.fontFamily = parseDynamicValue(style.fontFamily, object);
-        } else {
-            result.fontFamily = style.fontFamily;
-        }
-    }
+    const num = parseFloat(value);
+    return isNaN(num) ? undefined : num;
+};
 
-    // Build style object for PixiJS Text properties
+const getTextStyle = (style) => {
+    if (!style) return {};
     const textStyle = {};
 
-    // Font style properties
     if (style.fontStyle !== undefined) {
-        if (typeof style.fontStyle === 'string' && style.fontStyle.includes('{')) {
-            textStyle.fontStyle = parseDynamicValue(style.fontStyle, object);
-        } else {
-            textStyle.fontStyle = style.fontStyle;
-        }
+        textStyle.fontStyle = resolveDynamicValue(style.fontStyle, sprite);
     }
 
     if (style.fontWeight !== undefined) {
-        if (typeof style.fontWeight === 'string' && style.fontWeight.includes('{')) {
-            textStyle.fontWeight = parseDynamicValue(style.fontWeight, object);
-        } else if (typeof style.fontWeight === 'number') {
-            textStyle.fontWeight = style.fontWeight;
-        } else {
-            textStyle.fontWeight = style.fontWeight;
-        }
+        textStyle.fontWeight = resolveDynamicValue(style.fontWeight, sprite);
     }
 
-    // Stroke properties
     if (style.stroke !== undefined) {
-        if (typeof style.stroke === 'string' && style.stroke.includes('{')) {
-            textStyle.stroke = parseDynamicValue(style.stroke, object);
-        } else {
-            textStyle.stroke = style.stroke;
-        }
+        textStyle.stroke = resolveDynamicValue(style.stroke, sprite);
     }
 
-    // Opacity (can be number or string)
     if (style.opacity !== undefined) {
         const opacityValue = parseNumericStyleValue(style.opacity, object);
         if (opacityValue !== undefined) {
@@ -159,25 +41,29 @@ const getComponentStyle = (component) => {
         }
     }
 
-    // Word wrap
     if (style.wordWrap !== undefined) {
         textStyle.wordWrap = style.wordWrap;
     }
 
-    // Text alignment
     if (style.align !== undefined) {
-        if (typeof style.align === 'string' && style.align.includes('{')) {
-            textStyle.align = parseDynamicValue(style.align, object);
-        } else {
-            textStyle.align = style.align;
-        }
+        textStyle.align = resolveDynamicValue(style.align, sprite);
     }
 
-    // Only add style prop if there are style properties
-    if (Object.keys(textStyle).length > 0) {
-        result.style = textStyle;
-    }
+    return textStyle;
+};
 
-    return result;
-}
-</script>
+const textValue = computed(() => String(resolveDynamicValue(read(value, ''), sprite) ?? ''));
+const textColor = computed(() => {
+    const currentStyle = read(style, {});
+    return currentStyle.fill !== undefined ? resolveDynamicValue(currentStyle.fill, sprite) : undefined;
+});
+const textSize = computed(() => {
+    const currentStyle = read(style, {});
+    return currentStyle.fontSize !== undefined ? parseNumericStyleValue(currentStyle.fontSize, object) : undefined;
+});
+const textFontFamily = computed(() => {
+    const currentStyle = read(style, {});
+    return currentStyle.fontFamily !== undefined ? resolveDynamicValue(currentStyle.fontFamily, sprite) : undefined;
+});
+const textStyle = computed(() => getTextStyle(read(style, {})));
+</script>

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

@@ -17,7 +17,7 @@
                     @if (hasChoices()) {
                         <Navigation tabindex={selectedItem} controls={controls}>
                             <div class="rpg-ui-dialog-choices">
-                                @for ((choice,index) of choices) {
+                                @for ((choice,index) of dialogChoices()) {
                                     <div
                                         class="rpg-ui-dialog-choice"
                                         class={{active: selectedItem() === index}}
@@ -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
@@ -56,27 +62,42 @@
     engine.stopProcessingInput = true;
 
     const selectedItem = signal(0)
-    let isDestroyed = false;
+    const ACTION_OPEN_GUARD_MS = 150;
+    const openedAt = Date.now();
 
     const {
         data,
         onFinish,
-        onInteraction
+        onInteraction,
+        guiOpenId
     } = defineProps();
 
-    const { message, choices, face, speaker, position, typewriterEffect, autoClose } = data();
-    const fullWidth = computed(() => data().fullWidth || false);
+    const dialogData = computed(() => data() || {});
+    const dialogChoices = computed(() => Array.isArray(dialogData().choices) ? dialogData().choices : []);
+    const message = computed(() => dialogData().message);
+    const speaker = computed(() => dialogData().speaker);
+    const position = computed(() => dialogData().position);
+    const typewriterEffect = computed(() => dialogData().typewriterEffect);
+    const fullWidth = computed(() => dialogData().fullWidth || false);
 
     const resolveProp = (value) => typeof value === "function" ? value() : value;
+    const normalizeOpenId = (value) => {
+        const resolved = resolveProp(value);
+        return typeof resolved === "string" && resolved.length > 0 ? resolved : undefined;
+    };
 
     const speakerName = computed(() => {
-        const value = resolveProp(speaker);
+        const value = resolveProp(speaker());
         return value ? String(value) : "";
     });
 
-    const dialogPosition = computed(() => resolveProp(position) || "bottom");
+    const dialogPosition = computed(() => resolveProp(position()) || "bottom");
     const isFullWidth = computed(() => resolveProp(fullWidth) !== false);
-    const hasFace = computed(() => !!resolveProp(face));
+    const dialogFace = computed(() => resolveProp(dialogData().face));
+    const hasFace = computed(() => {
+        const value = dialogFace();
+        return !!(value && value.id);
+    });
 
     const displayMessage = signal("");
     const fullMessage = signal("");
@@ -113,9 +134,9 @@
     };
 
     effect(() => {
-        const text = resolveProp(message) || "";
+        const text = resolveProp(message()) || "";
         fullMessage.set(text);
-        const useTypewriter = resolveProp(typewriterEffect) !== false;
+        const useTypewriter = resolveProp(typewriterEffect()) !== false;
         if (!useTypewriter) {
             finishTyping();
             return;
@@ -124,9 +145,9 @@
     });
 
 
-    const hasChoices = computed(() => choices.length > 0);
+    const hasChoices = computed(() => dialogChoices().length > 0);
     const showIndicator = computed(() => !hasChoices() && !isTyping());
-    const nav = createTabindexNavigator(selectedItem, { count: () => choices.length }, 'wrap');
+    const nav = createTabindexNavigator(selectedItem, { count: () => dialogChoices().length }, 'wrap');
 
     function selectChoice(index) {
         return function() {
@@ -136,13 +157,15 @@
     }
 
     function _onFinish(value) {
-        if (onFinish) onFinish(value);
+        if (onFinish) onFinish(value, normalizeOpenId(guiOpenId));
     }
 
     const onSelect = (index) => {
         _onFinish(index);
     };
 
+    const canAcceptAction = () => Date.now() - openedAt >= ACTION_OPEN_GUARD_MS;
+
     const controls = signal({
         up: {
             repeat: true,
@@ -163,8 +186,11 @@
             }
         },
         action: {
-            bind: keyboardControls.action,
+            bind: getKeyboardControlBind(keyboardControls.action),
             keyDown() {
+                if (!canAcceptAction()) {
+                    return;
+                }
                 if (isTyping()) {
                     finishTyping();
                     return;
@@ -180,8 +206,11 @@
     
     const dialogControls = signal({
         action: {
-            bind: keyboardControls.action,
+            bind: getKeyboardControlBind(keyboardControls.action),
             keyDown() {
+                if (!canAcceptAction()) {
+                    return;
+                }
                 if (isTyping()) {
                     finishTyping();
                     return;
@@ -192,16 +221,18 @@
         },
     })
 
-    const faceSheet = (graphicId, animationName) => {
+    const faceSheet = (faceValue) => {
+        if (!faceValue || !faceValue.id) {
+            return undefined;
+        }
         return {
-            definition: engine.getSpriteSheet(graphicId),
-            playing: animationName,
+            definition: engine.getSpriteSheet(faceValue.id),
+            playing: faceValue.expression || "default",
         };
     }
 
     mount((element) => {
         return () => {
-            isDestroyed = true;
             // Wait destroy is finished before start processing input
             delay(() => {
                 engine.stopProcessingInput = false;

package/src/components/gui/gameover.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;
 
@@ -49,12 +51,12 @@
     });
 
     const defaultEntries = [
-        { id: "title", label: "Title Screen" },
-        { id: "load", label: "Load Game" }
+        { id: "title", label: t("rpg.gameover.title-screen") },
+        { id: "load", label: t("rpg.gameover.load-game") }
     ];
 
     const resolveProp = (value) => typeof value === "function" ? value() : value;
-    const titleText = computed(() => resolveProp(title) || "Game Over");
+    const titleText = computed(() => resolveProp(title) || t("rpg.gameover.title"));
     const subtitleText = computed(() => resolveProp(subtitle) || "");
     const localActionsEnabled = computed(() => resolveProp(localActions) === true);
 
@@ -146,7 +148,7 @@
             }
         },
         action: {
-            bind: keyboardControls.action,
+            bind: getKeyboardControlBind(keyboardControls.action),
             keyDown() {
                 triggerSelect(selectedEntry());
             }

package/src/components/gui/menu/equip-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">Equip</div>
+        <div class="rpg-ui-menu-panel-header">{t("rpg.menu.equip")}</div>
         <div class="rpg-ui-menu-panel-body rpg-ui-menu-panel-body-stacked">
             <div>
                 <div class="rpg-ui-menu-panel-details rpg-ui-panel">
@@ -16,7 +16,7 @@
                         </div>
                         <div>
                             <div class="rpg-ui-menu-panel-details-title">
-                                {detailsItem()?.name || currentSlot()?.label || "Equip"}
+                                {detailsItem()?.name || currentSlot()?.label || t("rpg.menu.equip")}
                             </div>
                             <div class="rpg-ui-menu-panel-details-desc">
                                 {detailsItem()?.description || ""}
@@ -90,8 +90,10 @@
     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 { t } = engine.i18n();
     const keyboardControls = engine.globalConfig.keyboardControls;
     const currentPlayer = engine.scene.currentPlayer;
 
@@ -103,8 +105,8 @@
     const slots = computed(() => data().slots);
 
     const defaultSlots = [
-        { id: "weapon", label: "Weapon", types: ["weapon"] },
-        { id: "armor", label: "Armor", types: ["armor"] }
+        { id: "weapon", label: t("rpg.menu.weapons"), types: ["weapon"] },
+        { id: "armor", label: t("rpg.menu.armor"), types: ["armor"] }
     ];
     const resolveProp = (value) => typeof value === "function" ? value() : value;
     const safeEquips = computed(() => {
@@ -169,15 +171,15 @@
         const items = slotItems().map((item) => ({
             ...item,
             kind: "item",
-            tag: itemEquipped(item) ? "Equipped" : ""
+            tag: itemEquipped(item) ? t("rpg.shop.equipped") : ""
         }));
         const equipped = currentEquippedItem();
         if (!equipped) return items;
         return [
             {
                 id: "__unequip__",
-                name: "Unequip",
-                description: "Remove the current equipment",
+                name: t("rpg.menu.unequip"),
+                description: t("rpg.menu.remove-equipment"),
                 kind: "unequip",
                 tag: ""
             },
@@ -196,7 +198,7 @@
         const slot = currentSlot();
         if (!slot) return "";
         const equipped = currentEquippedItem();
-        return equipped ? `${slot.label}: ${equipped.name}` : `${slot.label}: Empty`;
+        return equipped ? `${slot.label}: ${equipped.name}` : `${slot.label}: ${t("rpg.menu.empty")}`;
     });
     const listEmpty = computed(() => listEntries().length === 0);
 
@@ -380,7 +382,7 @@
             }
         },
         action: {
-            bind: keyboardControls.action,
+            bind: getKeyboardControlBind(keyboardControls.action),
             keyDown() {
                 if (!listEntries().length) return;
                 commitSelection(selectedItem());

package/src/components/gui/menu/exit-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">Exit</div>
+        <div class="rpg-ui-menu-panel-header">{t("rpg.menu.exit")}</div>
         <div class="rpg-ui-menu-panel-body">
             <div class="rpg-ui-menu-panel-details">
-                <div class="rpg-ui-menu-panel-details-title">Leave the game?</div>
+                <div class="rpg-ui-menu-panel-details-title">{t("rpg.menu.leave-game")}</div>
                 <div class="rpg-ui-menu-panel-details-desc">
-                    Press Action to confirm or Escape to go back.
+                    {t("rpg.menu.exit-help")}
                 </div>
             </div>
         </div>
@@ -16,14 +16,16 @@
     import { signal } 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 keyboardControls = engine.globalConfig.keyboardControls;
     const { onConfirm, onBack } = defineProps();
 
     const controls = signal({
         action: {
-            bind: keyboardControls.action,
+            bind: getKeyboardControlBind(keyboardControls.action),
             keyDown() {
                 if (onConfirm) onConfirm();
             }

package/src/components/gui/menu/items-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">Items</div>
+        <div class="rpg-ui-menu-panel-header">{t("rpg.menu.items")}</div>
         <div class="rpg-ui-menu-panel-body rpg-ui-menu-panel-body-stacked">
             <div>
                 @if (currentItem) {
@@ -65,7 +65,7 @@
         @if (confirmOpen) {
             <div class="rpg-ui-menu-confirm">
                 <div class="rpg-ui-menu-confirm-card">
-                    <div class="rpg-ui-menu-confirm-title">Use {confirmItem()?.name}?</div>
+                    <div class="rpg-ui-menu-confirm-title">{t("rpg.menu.use")} {confirmItem()?.name}?</div>
                     <Navigation tabindex={selectedConfirm} controls={confirmControls}>
                         <div class="rpg-ui-menu-confirm-actions">
                             @for ((option,index) of confirmOptions) {
@@ -90,8 +90,10 @@
     import { inject } from "../../../core/inject";
     import { RpgClientEngine } from "../../../RpgClientEngine";
     import { delay } from "@rpgjs/common";
+    import { getKeyboardControlBind } from "../../../services/actionInput";
 
     const engine = inject(RpgClientEngine);
+    const { t } = engine.i18n();
     const keyboardControls = engine.globalConfig.keyboardControls;
 
     const selectedItem = signal(0);
@@ -105,9 +107,9 @@
     const items = computed(() => data().items);
 
     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 resolveProp = (value) => typeof value === "function" ? value() : value;
@@ -124,8 +126,8 @@
     });
 
     const confirmOptions = [
-        { id: "use", label: "Use" },
-        { id: "cancel", label: "Cancel" }
+        { id: "use", label: t("rpg.menu.use") },
+        { id: "cancel", label: t("rpg.menu.cancel") }
     ];
 
     const nav = createTabindexNavigator(selectedItem, { count: () => filteredItems().length }, "wrap");
@@ -226,7 +228,7 @@
             }
         },
         action: {
-            bind: keyboardControls.action,
+            bind: getKeyboardControlBind(keyboardControls.action),
             keyDown() {
                 if (!confirmOpen()) return;
                 confirmSelect(selectedConfirm())();
@@ -289,7 +291,7 @@
             }
         },
         action: {
-            bind: keyboardControls.action,
+            bind: getKeyboardControlBind(keyboardControls.action),
             keyDown() {
                 if (confirmOpen()) {
                     confirmSelect(selectedConfirm())();