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

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,8 +48,8 @@
   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'
+  import { shouldRenderLightingShadows } from "@rpgjs/common";
 
   const engine = inject(RpgClientEngine);
   const SceneMap = engine.sceneMapComponent;
@@ -76,10 +76,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) => {
@@ -94,12 +100,20 @@
   const NIGHT_SPOT_MIN_INTENSITY = 1
   const SHADOW_SPOT_RADIUS_SCALE = 12
   const SHADOW_SPOT_MIN_RADIUS = 480
-  const SHADOW_SPOT_MIN_INTENSITY = 1.35
 
+  const toFiniteNumber = (value, fallback = null) => {
+    const number = Number(value)
+    return Number.isFinite(number) ? number : fallback
+  }
+  const clampNumber = (value, min, max) => Math.max(min, Math.min(max, value))
   const nightSpotRadius = (radius) => Math.max(radius * NIGHT_SPOT_RADIUS_SCALE, NIGHT_SPOT_MIN_RADIUS)
   const shadowSpotRadius = (radius) => Math.max(radius * SHADOW_SPOT_RADIUS_SCALE, SHADOW_SPOT_MIN_RADIUS)
   const nightSpotIntensity = (intensity, fallback) => Math.max(intensity ?? fallback, NIGHT_SPOT_MIN_INTENSITY)
-  const shadowSpotIntensity = (intensity) => Math.max(intensity ?? 1.3, SHADOW_SPOT_MIN_INTENSITY)
+  const shadowLightIntensity = (intensity, fallback = 1) => {
+    const value = Number(intensity ?? fallback)
+    return Number.isFinite(value) ? Math.max(0, value) : fallback
+  }
+  const shadowSpotIntensity = (intensity) => shadowLightIntensity(intensity, 1)
 
   const lightingAmbient = computed(() => {
     const state = lighting?.()
@@ -123,11 +137,6 @@
       }
     })
   })
-  const hasLightSpots = computed(() => {
-    const state = lighting?.()
-    return (state?.spots?.length ?? 0) > 0
-  })
-
   const lightingDarkness = computed(() => {
     const darkness = lightingAmbient().darkness
     return typeof darkness === "number" ? darkness : 0
@@ -156,18 +165,55 @@
     const scale = Number(data?.params?.scale ?? 1) || 1
     const mapWidth = width * scale
     const mapHeight = height * scale
+    const projectionBase = Math.max(1, mapWidth, mapHeight)
 
     return {
-      x: -mapWidth * 0.35,
-      y: -mapHeight * 0.45,
+      x: -projectionBase * 24,
+      y: -projectionBase * 24,
       z: 520,
-      radius: Math.max(mapWidth, mapHeight) * 2.5,
+      radius: projectionBase * 160,
       intensity: 0.85,
       shadowWeight: lightingDarkness() > 0 ? 2.2 : 1,
       enabled: true,
     }
   }
 
+  const normalizeSunDirection = (sun) => {
+    const x = toFiniteNumber(sun?.x, null)
+    const y = toFiniteNumber(sun?.y, null)
+    if (x !== null && y !== null && Math.hypot(x, y) > 0.001) {
+      return { x, y }
+    }
+    return { x: -0.45, y: -1 }
+  }
+
+  const defaultSunAmbientLight = () => {
+    const state = lighting?.()
+    if (!state?.sun || state.sun.enabled === false) return null
+
+    const defaultSun = defaultSunLight()
+    const sun = {
+      ...defaultSun,
+      ...state.sun,
+      intensity: shadowLightIntensity(state.sun.intensity, defaultSun.intensity),
+      shadowWeight: state.sun.shadowWeight ?? defaultSun.shadowWeight,
+    }
+    if (sun.intensity <= 0) return null
+
+    const direction = normalizeSunDirection(sun)
+    const shadowWeight = clampNumber(toFiniteNumber(sun.shadowWeight, lightingDarkness() > 0 ? 1.35 : 1) ?? 1, 0, 4)
+    const length = clampNumber(30 + sun.intensity * 38 * Math.max(0.75, shadowWeight), 30, 86)
+
+    return {
+      x: direction.x,
+      y: direction.y,
+      z: toFiniteNumber(sun.z, 520) ?? 520,
+      intensity: clampNumber(sun.intensity, 0, 2),
+      shadowWeight,
+      length,
+    }
+  }
+
   const shadowState = computed(() => {
     const state = lighting?.()
     return state?.shadows ?? null
@@ -175,12 +221,6 @@
 
   const shadowLights = computed(() => {
     const state = lighting?.()
-    const defaultSun = defaultSunLight()
-    const sun = {
-      ...defaultSun,
-      ...(state?.sun ?? {}),
-      shadowWeight: state?.sun?.shadowWeight ?? defaultSun.shadowWeight,
-    }
     const spotLights = (state?.spots ?? []).map((spot) => {
       const radius = spot.radius ?? 180
       return {
@@ -189,15 +229,12 @@
         z: 170,
         radius: shadowSpotRadius(radius),
         intensity: shadowSpotIntensity(spot.intensity),
-        shadowWeight: 2.4,
+        shadowWeight: 1,
         enabled: true,
       }
     })
 
-    return [
-      ...((sun.enabled === false || sun.intensity <= 0) ? [] : [sun]),
-      ...spotLights,
-    ]
+    return spotLights
   })
 
   const shadowAmbientLight = computed(() => {
@@ -205,12 +242,12 @@
     if (shadows?.ambientLight === null || shadows?.ambientLight?.enabled === false) {
       return null
     }
-    return shadows?.ambientLight ?? { x: -0.18, y: -1, z: 420, intensity: 0.32, shadowWeight: 1 }
+    return shadows?.ambientLight ?? defaultSunAmbientLight()
   })
 
   const shadowEnabled = computed(() => {
-    const shadows = shadowState()
-    return Boolean((shadows?.enabled || hasLightSpots()) && (shadowLights().length > 0 || shadowAmbientLight()))
+    const state = lighting?.()
+    return Boolean(shouldRenderLightingShadows(state) && (shadowLights().length > 0 || shadowAmbientLight()))
   })
 
   const shadowMode = computed(() => shadowState()?.mode ?? "strongest")

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/components/scenes/event-layer.ce

@@ -1,4 +1,4 @@
-<Container sortableChildren={true}>
+<Container sortableChildren={true} onBeforeDestroy={detachPixiChildren}>
     @for ((event,id) of events) {
         <Character id={id} object={event}  />
     }
@@ -13,14 +13,66 @@
 </Container>
 
 <script>
+    import { effect, mount } from "canvasengine";
     import { inject } from "../../core/inject";
     import { RpgClientEngine } from "../../RpgClientEngine";
     import Character from "../character.ce";
     import LightHalo from "../prebuilt/light-halo.ce";
    
     const engine = inject(RpgClientEngine);
-    const { children } = defineProps()
+    const { children, pixiChildren } = defineProps({
+        pixiChildren: {
+            default: []
+        }
+    })
+    const readValue = (value) => typeof value === "function" ? value() : value
+    let rootContainer = null
+    let mountedPixiChildren = []
     
     const players = engine.sceneMap.players
     const events = engine.sceneMap.events
+
+    const getPixiChildren = () => {
+        const value = readValue(pixiChildren)
+        return Array.isArray(value) ? value.filter(Boolean) : []
+    }
+
+    const syncPixiChildren = () => {
+        if (!rootContainer) return
+        const nextPixiChildren = getPixiChildren()
+        mountedPixiChildren.forEach((child) => {
+            if (!nextPixiChildren.includes(child) && child.parent === rootContainer) {
+                rootContainer.removeChild(child)
+            }
+        })
+        nextPixiChildren.forEach((child) => {
+            if (child.parent === rootContainer) return
+            if (child.parent) {
+                child.parent.removeChild(child)
+            }
+            rootContainer.addChild(child)
+        })
+        mountedPixiChildren = nextPixiChildren
+    }
+
+    const detachPixiChildren = () => {
+        if (!rootContainer) return
+        mountedPixiChildren.forEach((child) => {
+            if (child.parent === rootContainer) {
+                rootContainer.removeChild(child)
+            }
+        })
+        mountedPixiChildren = []
+    }
+
+    effect(() => {
+        readValue(pixiChildren)
+        syncPixiChildren()
+    })
+
+    mount((element) => {
+        rootContainer = element.componentInstance
+        syncPixiChildren()
+        return detachPixiChildren
+    })
 </script>

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