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

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/mobile/index.spec.ts

@@ -0,0 +1,94 @@
+import { describe, expect, test, vi } from "vitest";
+import { signal } from "canvasengine";
+
+const fakeEngine = {
+  controlsReady: signal(true),
+};
+
+vi.mock("../../../core/inject", () => ({
+  inject: vi.fn(() => fakeEngine),
+}));
+
+describe("withMobile", () => {
+  test("registers the mobile GUI with default options", async () => {
+    const { withMobile } = await import("./index");
+
+    const module = withMobile();
+    const gui = module.gui[0];
+
+    expect(gui.id).toBe("mobile-gui");
+    expect(gui.autoDisplay).toBe(true);
+    expect(gui.data).toEqual({});
+  });
+
+  test("passes options to the GUI and resolves enabled dependencies", async () => {
+    const { withMobile } = await import("./index");
+    const CustomJoystick = vi.fn();
+    const CustomActionButton = vi.fn();
+
+    const module = withMobile({
+      id: "touch-controls",
+      enabled: "always",
+      layout: {
+        joystickSide: "right",
+        gap: 18,
+        buttonsMargin: 44,
+        joystickMargin: [24, 60, 24, 24],
+      },
+      components: {
+        joystick: CustomJoystick,
+        buttons: {
+          action: CustomActionButton,
+        },
+      },
+      joystick: {
+        outerColor: "#111111",
+        innerColor: "#eeeeee",
+        scale: 0.8,
+        outerScale: { x: 0.8, y: 0.8 },
+        innerScale: { x: 0.9, y: 0.9 },
+        moveInterval: 40,
+        threshold: 0.2,
+      },
+      buttons: {
+        action: {
+          enabled: true,
+          width: 72,
+        },
+        back: false,
+        dash: true,
+      },
+    });
+    const gui = module.gui[0];
+    const dependencies = gui.dependencies();
+
+    expect(gui.id).toBe("touch-controls");
+    expect(gui.data.layout?.joystickSide).toBe("right");
+    expect(gui.data.components?.joystick).toBe(CustomJoystick);
+    expect(gui.data.components?.buttons?.action).toBe(CustomActionButton);
+    expect(gui.data.buttons?.action).toMatchObject({
+      enabled: true,
+      width: 72,
+    });
+    expect(gui.data.buttons?.dash).toBe(true);
+    expect(gui.data.joystick).toMatchObject({
+      outerColor: "#111111",
+      innerColor: "#eeeeee",
+      scale: 0.8,
+      outerScale: { x: 0.8, y: 0.8 },
+      innerScale: { x: 0.9, y: 0.9 },
+      moveInterval: 40,
+      threshold: 0.2,
+    });
+    expect(dependencies[0]()).toBe(true);
+    expect(dependencies[1]()).toBe(true);
+  });
+
+  test("keeps the auto detector unresolved when mobile is disabled", async () => {
+    const { withMobile } = await import("./index");
+
+    const dependencies = withMobile({ enabled: "never" }).gui[0].dependencies();
+
+    expect(dependencies[0]()).toBeUndefined();
+  });
+});

package/src/components/gui/mobile/index.ts

@@ -1,24 +1,92 @@
 import { inject } from "../../../core/inject";
 import { RpgClientEngine } from "../../../RpgClientEngine";
 import MobileGui from "./mobile.ce";
-import { signal } from "canvasengine";
+import { computed } from "canvasengine";
+import type { ButtonProps, ComponentFunction, JoystickSettings } from "canvasengine";
+
+export type MobileGuiEnabled = "auto" | "always" | "never" | (() => boolean);
+export type MobileGuiJoystickSide = "left" | "right";
+export type MobileGuiMargin = number | [number, number, number, number];
+
+export interface MobileGuiLayoutOptions {
+    joystickSide?: MobileGuiJoystickSide;
+    margin?: MobileGuiMargin;
+    buttonsMargin?: MobileGuiMargin;
+    joystickMargin?: MobileGuiMargin;
+    gap?: number;
+}
+
+export interface MobileJoystickComponentProps extends JoystickSettings {
+    defaultProps: JoystickSettings;
+}
+
+export interface MobileButtonComponentProps extends ButtonProps {
+    controlName: "action" | "back" | "dash";
+    defaultProps: ButtonProps;
+}
+
+export interface MobileGuiComponentsOptions {
+    joystick?: ComponentFunction<MobileJoystickComponentProps>;
+    buttons?: {
+        action?: ComponentFunction<MobileButtonComponentProps>;
+        back?: ComponentFunction<MobileButtonComponentProps>;
+        dash?: ComponentFunction<MobileButtonComponentProps>;
+    };
+}
+
+export interface MobileGuiButtonOptions extends Partial<ButtonProps> {
+    enabled?: boolean;
+    component?: ComponentFunction<MobileButtonComponentProps>;
+    container?: Record<string, unknown>;
+}
+
+export interface MobileGuiJoystickOptions extends Partial<JoystickSettings> {
+    component?: ComponentFunction<MobileJoystickComponentProps>;
+    moveInterval?: number;
+    threshold?: number;
+}
+
+export interface MobileGuiOptions {
+    id?: string;
+    enabled?: MobileGuiEnabled;
+    layout?: MobileGuiLayoutOptions;
+    components?: MobileGuiComponentsOptions;
+    joystick?: false | MobileGuiJoystickOptions;
+    buttons?: {
+        action?: boolean | MobileGuiButtonOptions;
+        back?: boolean | MobileGuiButtonOptions;
+        dash?: boolean | MobileGuiButtonOptions;
+    };
+}
 
 function isMobile() {
+    if (typeof navigator === "undefined") return false;
     return /Android|iPhone|iPad|iPod|Windows Phone|webOS|BlackBerry/i.test(navigator.userAgent);
-  }
+}
+
+function resolveEnabled(enabled: MobileGuiEnabled = "auto") {
+    if (enabled === "always") return true;
+    if (enabled === "never") return false;
+    if (typeof enabled === "function") return enabled();
+    return isMobile();
+}
 
-export const withMobile = () => (
+export const withMobile = (options: MobileGuiOptions = {}) => (
     {
         gui: [
             {
-                id: 'mobile-gui',
+                id: options.id ?? 'mobile-gui',
                 component: MobileGui,
                 autoDisplay: true,
+                data: options,
                 dependencies: () => {
                     const engine = inject(RpgClientEngine);
-                    return [signal(isMobile() ||undefined), engine.controlsReady]
+                    return [
+                        computed(() => resolveEnabled(options.enabled) || undefined),
+                        engine.controlsReady
+                    ]
                 }
             }
         ]
     }
-)
+)