@rpgjs/client 5.0.0-beta.12 → 5.0.0-beta.13

package/src/components/scenes/canvas.ce

@@ -33,8 +33,8 @@
         height={engine.height}
       >
         @if (gui.display) {
-          <gui.component data={gui.data} dependencies={gui.dependencies} onFinish={(data) => {
-            onGuiFinish(gui, data)
+          <gui.component data={gui.data} dependencies={gui.dependencies} guiOpenId={gui.openId} onFinish={(data, guiOpenId) => {
+            onGuiFinish(gui, data, guiOpenId)
           }} onInteraction={(name, data) => {
             onGuiInteraction(gui, name, data)
           }} /> 
@@ -48,7 +48,6 @@
   import { inject } from "../../core/inject";
   import { RpgClientEngine } from "../../RpgClientEngine";
   import { RpgGui } from "../../Gui/Gui";
-  import { delay } from "@rpgjs/common";
   import { NightAmbiant, SpriteShadows } from '@canvasengine/presets'
 
   const engine = inject(RpgClientEngine);
@@ -76,10 +75,16 @@
      }
   })
 
-  const onGuiFinish = (gui, data) => {
-    delay(() => {
-      guiService.guiClose(gui.name, data)
-    })
+  const normalizeOpenId = (value) => {
+    const resolved = typeof value === "function" ? value() : value
+    return typeof resolved === "string" && resolved.length > 0 ? resolved : undefined
+  }
+
+  const onGuiFinish = (gui, data, guiOpenId) => {
+    const completedOpenId = normalizeOpenId(guiOpenId)
+    const currentOpenId = normalizeOpenId(gui.openId)
+    if (completedOpenId && currentOpenId && completedOpenId !== currentOpenId) return
+    guiService.guiClose(gui.name, data, completedOpenId ?? currentOpenId)
   }
 
   const onGuiInteraction = (gui, name, data) => {

package/src/components/scenes/draw-map.ce

@@ -1,5 +1,11 @@
-<Container sound={backgroundMusic} shake={shakeConfig} freeze={engine.gamePause}>
-  <Container sound={backgroundAmbientSound} />
+<Container shake={shakeConfig} freeze={engine.gamePause}>
+  @if (backgroundMusic()) {
+    <Container sound={backgroundMusic()} />
+  }
+
+  @if (backgroundAmbientSound()) {
+    <Container sound={backgroundAmbientSound()} />
+  }
 
   <Container>
     @if (map() && sceneComponent()) {
@@ -42,10 +48,15 @@
     const projectiles = engine.projectiles.current
     const map = engine.sceneMap?.data
     const sceneComponent = computed(() => map()?.component)
-    const mapParams = map()?.params
     const weather = engine.sceneMap.weather
-    const backgroundMusic = { src: mapParams?.backgroundMusic, autoplay: true, loop: true }
-    const backgroundAmbientSound = { src: mapParams?.backgroundAmbientSound, autoplay: true, loop: true }
+    const backgroundMusic = computed(() => {
+      const src = map()?.params?.backgroundMusic
+      return src ? { src, autoplay: true, loop: true } : undefined
+    })
+    const backgroundAmbientSound = computed(() => {
+      const src = map()?.params?.backgroundAmbientSound
+      return src ? { src, autoplay: true, loop: true } : undefined
+    })
 
     const shakeConfig = {
       trigger: engine.mapShakeTrigger,

package/src/i18n.spec.ts

@@ -0,0 +1,39 @@
+// @vitest-environment jsdom
+
+import { describe, expect, test } from "vitest";
+import { Context, injector } from "@signe/di";
+import { getOrCreateI18nService } from "@rpgjs/common";
+import { provideClientModules } from "./module";
+import { provideI18n } from "./i18n";
+
+describe("client i18n", () => {
+  test("merges client module translations with game overrides", async () => {
+    const context = new Context();
+
+    await injector(context, [
+      provideClientModules([
+        {
+          i18n: {
+            fr: {
+              "menu.title": "Titre du module",
+              "menu.module-only": "Module",
+            },
+          },
+        },
+      ]),
+      provideI18n({
+        defaultLocale: "fr",
+        messages: {
+          fr: {
+            "menu.title": "Titre du jeu",
+          },
+        },
+      }),
+    ]);
+
+    const service = getOrCreateI18nService(context);
+
+    expect(service.t("menu.title", undefined, "fr")).toBe("Titre du jeu");
+    expect(service.t("menu.module-only", undefined, "fr")).toBe("Module");
+  });
+});

package/src/i18n.ts

@@ -0,0 +1,59 @@
+import { createI18nProvider, type I18nConfig } from "@rpgjs/common";
+
+export const RpgClientBuiltinI18n = {
+  en: {
+    "rpg.menu.title": "Menu",
+    "rpg.menu.status": "Status",
+    "rpg.menu.level": "Level",
+    "rpg.menu.gold": "Gold",
+    "rpg.menu.parameters": "Parameters",
+    "rpg.menu.items": "Items",
+    "rpg.menu.skills": "Skills",
+    "rpg.menu.equip": "Equip",
+    "rpg.menu.options": "Options",
+    "rpg.menu.save": "Save",
+    "rpg.menu.exit": "Exit",
+    "rpg.menu.weapons": "Weapons",
+    "rpg.menu.armor": "Armor",
+    "rpg.menu.use": "Use",
+    "rpg.menu.cancel": "Cancel",
+    "rpg.menu.unequip": "Unequip",
+    "rpg.menu.remove-equipment": "Remove the current equipment",
+    "rpg.menu.empty": "Empty",
+    "rpg.menu.leave-game": "Leave the game?",
+    "rpg.menu.exit-help": "Press Action to confirm or Escape to go back.",
+    "rpg.menu.options-help": "Configure your preferences here.",
+    "rpg.save.title": "Save Game",
+    "rpg.save.subtitle": "Choose a slot to overwrite or create.",
+    "rpg.load.title": "Load Game",
+    "rpg.load.subtitle": "Select a slot to load your progress.",
+    "rpg.save.auto": "Auto Save",
+    "rpg.save.slot": "Slot {index}",
+    "rpg.save.empty-slot": "Empty Slot",
+    "rpg.save.level": "Level",
+    "rpg.save.exp": "Exp",
+    "rpg.save.map": "Map",
+    "rpg.save.date": "Date",
+    "rpg.title.default": "RPG",
+    "rpg.title.start": "Start",
+    "rpg.title.load": "Load",
+    "rpg.gameover.title": "Game Over",
+    "rpg.gameover.title-screen": "Title Screen",
+    "rpg.gameover.load-game": "Load Game",
+    "rpg.shop.default-message": "Welcome to my shop!",
+    "rpg.shop.choose-action": "Choose an action",
+    "rpg.shop.buy": "Buy",
+    "rpg.shop.sell": "Sell",
+    "rpg.shop.back": "Back",
+    "rpg.shop.equipped": "Equipped",
+    "rpg.shop.already-equipped": "Already equipped",
+    "rpg.shop.qty": "Qty",
+    "rpg.shop.available": "Available",
+    "rpg.shop.quantity": "Quantity",
+    "rpg.shop.total": "Total",
+  },
+};
+
+export function provideI18n(config: I18nConfig = {}) {
+  return createI18nProvider(config);
+}

package/src/index.ts

@@ -8,6 +8,7 @@ export * from "./core/inject";
 export * from "./services/loadMap";
 export * from "./services/actionInput";
 export * from "./services/pointerContext";
+export * from "./services/interactions";
 export * from "./module";
 export * from "./Gui/Gui";
 export * from "./components/gui";
@@ -30,3 +31,4 @@ export * from "./Game/ProjectileManager";
 export * from "./Game/ClientVisuals";
 export { withMobile } from "./components/gui/mobile";
 export * from "./services/AbstractSocket";
+export * from "./i18n";

package/src/module.ts

@@ -1,4 +1,4 @@
-import { findModules, provideModules } from "@rpgjs/common";
+import { findModules, provideModules, registerI18nMessages } from "@rpgjs/common";
 import { FactoryProvider } from "@signe/di";
 import { RpgClientEngine } from "./RpgClientEngine";
 import { RpgClient } from "./RpgClient";
@@ -67,6 +67,9 @@ export function provideClientModules(modules: RpgClientModule[]): FactoryProvide
       if ('client' in module) {
         module = module.client as any;
       }
+      if (module.i18n) {
+        registerI18nMessages(context, module.i18n, "client-module", 10);
+      }
       if (module.spritesheets) {
         const spritesheets = [...module.spritesheets];
         module.spritesheets = {
@@ -176,6 +179,25 @@ export function provideClientModules(modules: RpgClientModule[]): FactoryProvide
           },
         };
       }
+      if (module.interactions) {
+        const interactions = module.interactions;
+        module.interactions = {
+          ...interactions,
+          load: (engine: RpgClientEngine) => {
+            if (typeof interactions === "function") {
+              interactions(engine);
+              return;
+            }
+            interactions.load?.(engine);
+            interactions.setup?.(engine);
+            if (Array.isArray(interactions.use)) {
+              interactions.use.forEach(([matcher, behavior]) => {
+                engine.interactions.use(matcher, behavior);
+              });
+            }
+          },
+        };
+      }
       if (module.transitions) {
         const transitions = [...module.transitions];
         module.transitions = {
@@ -243,15 +265,15 @@ export function provideGlobalConfig(config: any) {
 }
 
 export function provideClientGlobalConfig(config: any = {}) {
-  if (!config.keyboardControls) {
-    config.keyboardControls = {
-      up: 'up',
-      down: 'down',
-      left: 'left',
-      right: 'right',
-      action: 'space',
-      escape: 'escape'
-    }
+  config.keyboardControls = {
+    up: 'up',
+    down: 'down',
+    left: 'left',
+    right: 'right',
+    action: 'space',
+    dash: 'shift',
+    escape: 'escape',
+    ...(config.keyboardControls ?? {}),
   }
   return provideGlobalConfig(config)
 }

package/src/services/interactions.spec.ts

@@ -0,0 +1,175 @@
+import { describe, expect, test, vi } from "vitest";
+import {
+  dragToTile,
+  hoverPopover,
+  RpgClientInteractions,
+  selectable,
+} from "./interactions";
+import { createClientPointerContext } from "./pointerContext";
+
+function createClient() {
+  const client = {
+    pointer: createClientPointerContext(),
+    processAction: vi.fn(),
+    sceneMap: {
+      tileWidth: 16,
+      tileHeight: 16,
+    },
+  } as any;
+  client.interactions = new RpgClientInteractions(client);
+  return client;
+}
+
+describe("RpgClientInteractions", () => {
+  test("renders registered components with sprite state and bounds", () => {
+    const client = createClient();
+    const Popover = () => null;
+    const sprite = { id: "event-1", name: "Guard" };
+
+    client.interactions.use("Guard", hoverPopover(Popover, { label: "Talk" }));
+    client.interactions.handle(sprite, "pointerover", {
+      bounds: {
+        graphic: { left: 1, top: 2, right: 11, bottom: 22, width: 10, height: 20, centerX: 6, centerY: 12 } as any,
+      },
+    });
+
+    const entries = client.interactions.getRenderedComponents(sprite, {
+      graphic: { left: 1, top: 2, right: 11, bottom: 22, width: 10, height: 20, centerX: 6, centerY: 12 } as any,
+    });
+
+    expect(entries).toHaveLength(1);
+    expect(entries[0].component).toBe(Popover);
+    expect(entries[0].props.label).toBe("Talk");
+    expect(entries[0].props.state.hovered).toBe(true);
+    expect(entries[0].props.bounds.centerX).toBe(6);
+  });
+
+  test("keeps clicks client-only unless a behavior sends an action", () => {
+    const client = createClient();
+    const sprite = { id: "event-1", name: "Guard" };
+
+    client.interactions.use("Guard", selectable());
+    client.interactions.handle(sprite, "click");
+
+    expect(client.interactions.getState(sprite).selected).toBe(true);
+    expect(client.processAction).not.toHaveBeenCalled();
+
+    client.interactions.use("Guard", {
+      click(ctx) {
+        ctx.action("guard:talk", { eventId: ctx.target.id });
+      },
+    });
+    client.interactions.handle(sprite, "click");
+
+    expect(client.processAction).toHaveBeenCalledWith("guard:talk", { eventId: "event-1" });
+  });
+
+  test("uses behavior hit tests before changing hover state", () => {
+    const client = createClient();
+    const sprite = { id: "event-1", name: "Tree" };
+
+    client.pointer.update({ x: 0, y: 0 }, { x: 40, y: 40 });
+    client.interactions.use("Tree", {
+      cursor: "pointer",
+      hitTest(ctx) {
+        return ctx.bounds("hitbox").contains(ctx.pointer.world());
+      },
+    });
+
+    client.interactions.handle(sprite, "pointerover", {
+      bounds: {
+        hitbox: { left: 0, top: 0, right: 16, bottom: 16, width: 16, height: 16, centerX: 8, centerY: 8 } as any,
+      },
+    });
+
+    expect(client.interactions.getState(sprite).hovered).toBe(false);
+    expect(client.interactions.cursorFor(sprite, {
+      hitbox: { left: 0, top: 0, right: 16, bottom: 16, width: 16, height: 16, centerX: 8, centerY: 8 } as any,
+    })).toBeUndefined();
+  });
+
+  test("exposes handler bounds in world coordinates", () => {
+    const client = createClient();
+    const sprite = { id: "crate-1", name: "Crate", x: () => 100, y: () => 80 };
+
+    client.pointer.update({ x: 0, y: 0 }, { x: 112, y: 92 });
+    client.interactions.use("Crate", {
+      component: () => null,
+      cursor: "grab",
+      hitTest(ctx) {
+        return ctx.bounds("hitbox").contains(ctx.pointer.world());
+      },
+    });
+
+    client.interactions.handle(sprite, "pointerover", {
+      bounds: {
+        hitbox: { left: 0, top: 0, right: 16, bottom: 16, width: 16, height: 16, centerX: 8, centerY: 8 } as any,
+      },
+    });
+
+    expect(client.interactions.getState(sprite).hovered).toBe(true);
+    expect(client.interactions.cursorFor(sprite, {
+      hitbox: { left: 0, top: 0, right: 16, bottom: 16, width: 16, height: 16, centerX: 8, centerY: 8 } as any,
+    })).toBe("grab");
+
+    const [entry] = client.interactions.getRenderedComponents(sprite, {
+      hitbox: { left: 0, top: 0, right: 16, bottom: 16, width: 16, height: 16, centerX: 8, centerY: 8 } as any,
+    });
+    expect(entry?.props.bounds.centerX).toBe(8);
+  });
+
+  test("updates hit-tested hover while moving inside an already hovered sprite", () => {
+    const client = createClient();
+    const sprite = { id: "crate-1", name: "Crate", x: () => 100, y: () => 80 };
+
+    client.interactions.use("Crate", {
+      hitTest(ctx) {
+        return ctx.bounds("hitbox").contains(ctx.pointer.world());
+      },
+    });
+
+    client.pointer.update({ x: 0, y: 0 }, { x: 140, y: 120 });
+    client.interactions.handle(sprite, "pointerover", {
+      bounds: {
+        hitbox: { left: 0, top: 0, right: 16, bottom: 16, width: 16, height: 16, centerX: 8, centerY: 8 } as any,
+      },
+    });
+    expect(client.interactions.getState(sprite).hovered).toBe(false);
+
+    client.pointer.update({ x: 0, y: 0 }, { x: 112, y: 92 });
+    client.interactions.handle(sprite, "pointermove", {
+      bounds: {
+        hitbox: { left: 0, top: 0, right: 16, bottom: 16, width: 16, height: 16, centerX: 8, centerY: 8 } as any,
+      },
+    });
+
+    expect(client.interactions.getState(sprite).hovered).toBe(true);
+  });
+
+  test("runs drag lifecycle and resolves pointer tile on drop", () => {
+    const client = createClient();
+    const sprite = { id: "crate-1", name: "Crate" };
+
+    client.interactions.use("Crate", dragToTile({ action: "crate:move" }));
+    client.pointer.update({ x: 0, y: 0 }, { x: 18, y: 35 });
+    client.interactions.handle(sprite, "pointerdown");
+
+    expect(client.interactions.getState(sprite).dragging).toBe(true);
+
+    client.pointer.update({ x: 0, y: 0 }, { x: 33, y: 47 });
+    client.interactions.handlePointerUp();
+
+    expect(client.interactions.getState(sprite).dragging).toBe(false);
+    expect(client.processAction).toHaveBeenCalledWith("crate:move", {
+      eventId: "crate-1",
+      position: {
+        x: 2,
+        y: 2,
+        worldX: 32,
+        worldY: 32,
+        width: 16,
+        height: 16,
+      },
+    });
+  });
+});