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

package/src/components/scenes/canvas.ce

@@ -1,14 +1,40 @@
 <Canvas width={engine.width} height={engine.height}>
   <Viewport worldWidth worldHeight clamp sortableChildren={true}>
-    @if (sceneData) {
-      <SceneMap />
+    @if (lightingAmbientEnabled()) {
+      <NightAmbiant
+        spots={nightLights}
+        darkness={lightingDarknessProps}
+        haze={lightingHaze}
+      />
     }
+    @if (shadowEnabled()) {
+      <SpriteShadows
+        lights={shadowLights}
+        ambientLight={shadowAmbientLight}
+        minInfluence={shadowMinInfluence}
+        falloffPower={shadowFalloffPower}
+        mode={shadowMode}
+        updateHz={shadowUpdateHz}
+        scanHz={shadowScanHz}
+        cullToViewport={shadowCullToViewport}
+        shadowColor={shadowColor}
+      />
+    }
+    <SceneMap />
   </Viewport>
   @for (gui of guiList) {
-      <Container display="flex">
+      <Container
+        positionType="absolute"
+        top={0}
+        left={0}
+        right={0}
+        bottom={0}
+        width={engine.width}
+        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)
           }} /> 
@@ -18,21 +44,31 @@
 </Canvas>
 
 <script>
-  import { signal, computed, effect } from "canvasengine";
+  import { computed, effect } from "canvasengine";
   import { inject } from "../../core/inject";
   import { RpgClientEngine } from "../../RpgClientEngine";
-  import SceneMap from './draw-map.ce'
   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;
   const guiService = inject(RpgGui);
   const sceneData = engine.sceneMap.data
+  const lighting = engine.sceneMap.lighting
   const guiList = computed(() => {
     return Object.values(guiService.gui()).filter((gui) => !gui.attachToSprite)
   })
-  const worldWidth = computed(() => sceneData()?.width)
-  const worldHeight = computed(() => sceneData()?.height)
+  const worldWidth = computed(() => {
+    const data = sceneData?.()
+    const scale = Number(data?.params?.scale ?? 1) || 1
+    return Number(data?.width ?? data?.params?.width ?? 2048) * scale
+  })
+  const worldHeight = computed(() => {
+    const data = sceneData?.()
+    const scale = Number(data?.params?.scale ?? 1) || 1
+    return Number(data?.height ?? data?.params?.height ?? 2048) * scale
+  })
 
   effect(() => {
      if (sceneData() && !sceneData().component) {
@@ -40,17 +76,185 @@
      }
   })
 
-  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) => {
     guiService.guiInteraction(gui.name, name, data)
   }
-  
+
   const clamp = {
     direction: "all"
   }
+  const NIGHT_SPOT_RADIUS_SCALE = 4.25
+  const NIGHT_SPOT_MIN_RADIUS = 170
+  const NIGHT_SPOT_MIN_INTENSITY = 1
+  const SHADOW_SPOT_RADIUS_SCALE = 12
+  const SHADOW_SPOT_MIN_RADIUS = 480
+
+  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 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?.()
+    return state?.ambient ?? {}
+  })
+
+  const nightLights = computed(() => {
+    const state = lighting?.()
+    return (state?.spots ?? []).map((spot, index) => {
+      const radius = spot.radius ?? 180
+      return {
+        x: spot.x,
+        y: spot.y,
+        radius: nightSpotRadius(radius),
+        intensity: nightSpotIntensity(spot.intensity, index === 0 ? 1 : 0.92),
+        flicker: spot.flicker,
+        flickerSpeed: spot.flickerSpeed ?? 14,
+        pulse: spot.pulse,
+        pulseSpeed: spot.pulseSpeed,
+        phase: spot.phase,
+      }
+    })
+  })
+  const lightingDarkness = computed(() => {
+    const darkness = lightingAmbient().darkness
+    return typeof darkness === "number" ? darkness : 0
+  })
+
+  const lightingAmbientEnabled = computed(() => {
+    const state = lighting?.()
+    return Boolean(state && lightingDarkness() > 0)
+  })
+
+  const lightingDarknessProps = computed(() => ({
+    opacity: lightingDarkness(),
+    color: lightingAmbient().darkColor ?? "#080a12",
+  }))
+  const lightingHaze = computed(() => ({
+    color: lightingAmbient().fogColor ?? "#12182a",
+    radius: lightingAmbient().fogRadius ?? 0.44,
+    softness: lightingAmbient().fogSoftness ?? 0.3,
+    opacity: lightingAmbient().fogOpacity ?? 0.35,
+  }))
+
+  const defaultSunLight = () => {
+    const data = sceneData?.()
+    const width = Number(data?.width ?? data?.params?.width ?? 2048)
+    const height = Number(data?.height ?? data?.params?.height ?? 2048)
+    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: -projectionBase * 24,
+      y: -projectionBase * 24,
+      z: 520,
+      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
+  })
+
+  const shadowLights = computed(() => {
+    const state = lighting?.()
+    const spotLights = (state?.spots ?? []).map((spot) => {
+      const radius = spot.radius ?? 180
+      return {
+        x: spot.x,
+        y: spot.y,
+        z: 170,
+        radius: shadowSpotRadius(radius),
+        intensity: shadowSpotIntensity(spot.intensity),
+        shadowWeight: 1,
+        enabled: true,
+      }
+    })
+
+    return spotLights
+  })
+
+  const shadowAmbientLight = computed(() => {
+    const shadows = shadowState()
+    if (shadows?.ambientLight === null || shadows?.ambientLight?.enabled === false) {
+      return null
+    }
+    return shadows?.ambientLight ?? defaultSunAmbientLight()
+  })
+
+  const shadowEnabled = computed(() => {
+    const state = lighting?.()
+    return Boolean(shouldRenderLightingShadows(state) && (shadowLights().length > 0 || shadowAmbientLight()))
+  })
+
+  const shadowMode = computed(() => shadowState()?.mode ?? "strongest")
+  const shadowUpdateHz = computed(() => shadowState()?.updateHz ?? 60)
+  const shadowScanHz = computed(() => shadowState()?.scanHz ?? 8)
+  const shadowCullToViewport = computed(() => shadowState()?.cullToViewport ?? true)
+  const shadowMinInfluence = computed(() => shadowState()?.minInfluence ?? 0.24)
+  const shadowFalloffPower = computed(() => shadowState()?.falloffPower ?? 0.85)
+  const shadowColor = computed(() => shadowState()?.shadowColor ?? "#05070d")
 </script>

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

@@ -1,8 +1,20 @@
-<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()} />
+  }
 
-  @if (map() && sceneComponent()) {
-    <sceneComponent() data={map().data} params={map().params} />
+  <Container>
+    @if (map() && sceneComponent()) {
+      <sceneComponent() data={map().data} params={map().params} />
+    }
+  </Container>
+
+  @for (child of children) {
+    <child />
   }
 
   @for (componentAnimation of componentAnimations) {
@@ -13,38 +25,38 @@
     </Container>
   }
 
-  @if (weatherProps) {
+  <Container sortableChildren={true}>
+    @for (projectile of projectiles() ; track projectile.props.id) {
+      <projectile.component ...projectile.props />
+    }
+  </Container>
+
+  @if (weatherProps()) {
     <Weather ...weatherProps() />
   }
 </Container>
 
 <script>
-    import { NoiseFilter } from 'pixi-filters';
-    import { effect, signal, computed, mount, on, tick } from 'canvasengine'
+    import { computed, effect } from 'canvasengine'
     import { inject } from "../../core/inject";
     import { RpgClientEngine } from "../../RpgClientEngine";
     import { Weather } from '@canvasengine/presets'
 
+    const { children } = defineProps()
     const engine = inject(RpgClientEngine);
     const componentAnimations = engine.componentAnimations
+    const projectiles = engine.projectiles.current
     const map = engine.sceneMap?.data
     const sceneComponent = computed(() => map()?.component)
-    const sceneParams = map()?.params
-    const mapParams = map()?.params
-    const animations = engine.sceneMap.animations
     const weather = engine.sceneMap.weather
-    const backgroundMusic = { src: mapParams?.backgroundMusic, autoplay: true, loop: true }
-    const backgroundAmbientSound = { src: mapParams?.backgroundAmbientSound, autoplay: true, loop: true }
-
-    const data = signal(map()?.data)
-
-    const scale = mapParams?.scale || 1
-    const worldWidth = (mapParams?.width || 2048) * scale
-    const worldHeight = (mapParams?.height || 2048) * scale
-   
-    const clamp = {
-      direction: "all"
-    }
+    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,15 +13,66 @@
 </Container>
 
 <script>
-    import { effect, signal } from 'canvasengine'
+    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
-</script>
+
+    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/core/setup.ts

@@ -14,7 +14,7 @@ export async function startGame(options: SetupOptions) {
 
   await injector(context, options.providers);
 
-  const engine = inject(context, RpgClientEngine);
+  const engine = inject<RpgClientEngine>(context, RpgClientEngine);
   await engine.start();
   return context;
-}
+}

package/src/decorators/spritesheet.ts

@@ -0,0 +1,8 @@
+export function Spritesheet(options: Record<string, any> = {}) {
+  return (target: any) => {
+    Object.assign(target, options);
+    if (target.prototype) {
+      Object.assign(target.prototype, options);
+    }
+  };
+}

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

@@ -6,6 +6,9 @@ export * from "./services/save";
 export * from "./core/setup";
 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";
@@ -16,6 +19,7 @@ export * from "./components";
 export * from "./components/gui";
 export * from "./Sound";
 export * from "./Resource";
+export * from "./decorators/spritesheet";
 export * from "./utils/getEntityProp";
 export { Context } from "@signe/di";
 export { KeyboardControls, Input } from "canvasengine";
@@ -23,5 +27,20 @@ export { Control } from "./services/keyboardControls";
 export { RpgClientObject } from "./Game/Object";
 export { RpgClientPlayer } from "./Game/Player";
 export { RpgClientEvent } from "./Game/Event";
+export * from "./Game/ProjectileManager";
+export * from "./Game/ClientVisuals";
 export { withMobile } from "./components/gui/mobile";
+export type {
+    MobileButtonComponentProps,
+    MobileGuiButtonOptions,
+    MobileGuiComponentsOptions,
+    MobileGuiEnabled,
+    MobileGuiJoystickOptions,
+    MobileGuiJoystickSide,
+    MobileGuiLayoutOptions,
+    MobileGuiMargin,
+    MobileGuiOptions,
+    MobileJoystickComponentProps,
+} from "./components/gui/mobile";
 export * from "./services/AbstractSocket";
+export * from "./i18n";