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

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 || ""}
@@ -93,6 +93,7 @@
     import { getKeyboardControlBind } from "../../../services/actionInput";
 
     const engine = inject(RpgClientEngine);
+    const { t } = engine.i18n();
     const keyboardControls = engine.globalConfig.keyboardControls;
     const currentPlayer = engine.scene.currentPlayer;
 
@@ -104,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(() => {
@@ -170,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: ""
             },
@@ -197,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);
 

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>
@@ -19,6 +19,7 @@
     import { getKeyboardControlBind } from "../../../services/actionInput";
 
     const engine = inject(RpgClientEngine);
+    const { t } = engine.i18n();
     const keyboardControls = engine.globalConfig.keyboardControls;
     const { onConfirm, onBack } = defineProps();
 

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) {
@@ -93,6 +93,7 @@
     import { getKeyboardControlBind } from "../../../services/actionInput";
 
     const engine = inject(RpgClientEngine);
+    const { t } = engine.i18n();
     const keyboardControls = engine.globalConfig.keyboardControls;
 
     const selectedItem = signal(0);
@@ -106,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;
@@ -125,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");

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">
@@ -104,6 +104,7 @@
     import { getKeyboardControlBind } from "../../../services/actionInput";
 
     const engine = inject(RpgClientEngine);
+    const { t } = engine.i18n();
     const currentPlayer = engine.scene.currentPlayer;
     const keyboardControls = engine.globalConfig.keyboardControls;
 
@@ -111,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(() => {

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/notification/notification.ce

@@ -1,4 +1,10 @@
-<DOMContainer width="100%" height="100%" zIndex={100} class="notification">
+<DOMContainer
+    width="100%"
+    height="100%"
+    zIndex={100}
+    class="notification"
+    style="pointer-events: none !important;"
+>
     <div class="rpg-ui-notifications">
         @for ((notif,index) of notifications) {
             <div

package/src/components/gui/save-load.ce

@@ -17,14 +17,14 @@
                         <div class="rpg-ui-save-load-slot-index">{item.label}</div>
                         @if (item.slot) {
                             <div class="rpg-ui-save-load-slot-meta">
-                                <div class="rpg-ui-save-load-slot-line">Level: {item.slot.level ?? "-"}</div>
-                                <div class="rpg-ui-save-load-slot-line">Exp: {item.slot.exp ?? "-"}</div>
-                                <div class="rpg-ui-save-load-slot-line">Map: {item.slot.map ?? "-"}</div>
-                                <div class="rpg-ui-save-load-slot-line">Date: {item.slot.date ?? "-"}</div>
+                                <div class="rpg-ui-save-load-slot-line">{t("rpg.save.level")}: {item.slot.level ?? "-"}</div>
+                                <div class="rpg-ui-save-load-slot-line">{t("rpg.save.exp")}: {item.slot.exp ?? "-"}</div>
+                                <div class="rpg-ui-save-load-slot-line">{t("rpg.save.map")}: {item.slot.map ?? "-"}</div>
+                                <div class="rpg-ui-save-load-slot-line">{t("rpg.save.date")}: {item.slot.date ?? "-"}</div>
                             </div>
                         }
                         @else {
-                            <div class="rpg-ui-save-load-slot-empty">Empty Slot</div>
+                            <div class="rpg-ui-save-load-slot-empty">{t("rpg.save.empty-slot")}</div>
                         }
                     </div>
                 }
@@ -43,6 +43,7 @@
     import { getKeyboardControlBind } from "../../services/actionInput";
 
     const engine = inject(RpgClientEngine);
+    const { t } = engine.i18n();
     const saveClient = inject(SaveClientService);
     const gui = inject(RpgGui);
     const keyboardControls = engine.globalConfig.keyboardControls;
@@ -54,10 +55,10 @@
 
     const { data, onFinish } = defineProps();
 
-    const title = computed(() => data().mode === "save" ? "Save Game" : "Load Game");
+    const title = computed(() => data().mode === "save" ? t("rpg.save.title") : t("rpg.load.title"));
     const subtitle = computed(() => data().mode === "save"
-        ? "Choose a slot to overwrite or create."
-        : "Select a slot to load your progress."
+        ? t("rpg.save.subtitle")
+        : t("rpg.load.subtitle")
     );
 
     const slotsValue = computed(() => localSlots());
@@ -67,7 +68,7 @@
             kind: "slot",
             slot,
             slotIndex: index,
-            label: `Slot ${index + 1}`,
+            label: t("rpg.save.slot", { index: index + 1 }),
             readonly: false
         }));
         if (!data().showAutoSlot) return items;
@@ -79,7 +80,7 @@
                 kind: "auto",
                 slot: autoSlot,
                 slotIndex: index,
-                label: data().autoSlotLabel || "Auto Save",
+                label: data().autoSlotLabel || t("rpg.save.auto"),
                 readonly
             },
             ...items

package/src/components/gui/shop/shop.ce

@@ -30,7 +30,7 @@
                         <div class="rpg-shop-details rpg-shop-details-mode">
                             <div class="rpg-shop-details-header">
                             <div class="rpg-shop-details-icon">🛒</div>
-                            <h2 style="margin: 0;">Choose an action</h2>
+                            <h2 style="margin: 0;">{t("rpg.shop.choose-action")}</h2>
                         </div>
                         <div class="rpg-shop-trade">
                             <Navigation tabindex={selectedModeIndex} controls={modeControls}>
@@ -39,12 +39,12 @@
                                         class="rpg-shop-tab"
                                         class={{active: selectedModeIndex() === 0}}
                                         click={selectMode('buy')}
-                                    >Buy</div>
+                                    >{t("rpg.shop.buy")}</div>
                                     <div
                                         class="rpg-shop-tab"
                                         class={{active: selectedModeIndex() === 1}}
                                         click={selectMode('sell')}
-                                    >Sell</div>
+                                    >{t("rpg.shop.sell")}</div>
                                 </div>
                             </Navigation>
                         </div>
@@ -88,7 +88,7 @@
                                             <div class="rpg-shop-card-qty">x{{ item.quantity }}</div>
                                         }
                                         @if (item.equipped) {
-                                            <div class="rpg-shop-card-tag">Equipped</div>
+                                            <div class="rpg-shop-card-tag">{t("rpg.shop.equipped")}</div>
                                         }
                                     </div>
                                 }
@@ -109,12 +109,12 @@
                                 <h2 style="margin: 0;">{{ currentItem()?.name || "" }}</h2>
                                 <p style="color: #ffd700; font-weight: bold; margin: 8px 0;">{{ currentItem()?.price ?? 0 }} {{ goldTerm }}</p>
                                 @if (currentItem()?.quantity !== undefined) {
-                                    <div class="rpg-shop-details-qty">Qty: x{{ currentItem()?.quantity }}</div>
+                                    <div class="rpg-shop-details-qty">{t("rpg.shop.qty")}: x{{ currentItem()?.quantity }}</div>
                                 }
                             </div>
                             <div>
                                 @if (currentItem()?.equipped) {
-                                    <div class="rpg-shop-equipped">Already equipped</div>
+                                    <div class="rpg-shop-equipped">{t("rpg.shop.already-equipped")}</div>
                                 }
                             </div>
                             <div class="rpg-shop-details-desc">
@@ -137,7 +137,7 @@
                                     </div>
                                 }
                             </div>
-                            <button class="rpg-shop-btn" click={backToMode()}>Back</button>
+                            <button class="rpg-shop-btn" click={backToMode()}>{t("rpg.shop.back")}</button>
                         </div>
                     </div>
                     </div>
@@ -148,10 +148,10 @@
                             <div class="rpg-shop-modal-title">{{ actionLabel }}</div>
                             <div class="rpg-shop-modal-item">{{ currentItem()?.name || "" }}</div>
                             @if (currentItem()?.quantity !== undefined) {
-                                <div class="rpg-shop-modal-qty">Available: x{{ currentItem()?.quantity }}</div>
+                                <div class="rpg-shop-modal-qty">{t("rpg.shop.available")}: x{{ currentItem()?.quantity }}</div>
                             }
                             <div class="rpg-shop-quantity">
-                                <div class="rpg-shop-quantity-label">Quantity</div>
+                                <div class="rpg-shop-quantity-label">{t("rpg.shop.quantity")}</div>
                                 <div class="rpg-shop-quantity-controls">
                                     <button class="rpg-shop-btn" click={changeQuantity(-1)}>-</button>
                                     <div class="rpg-shop-quantity-value">{{ quantity }}</div>
@@ -159,11 +159,11 @@
                                 </div>
                             </div>
                             <div class="rpg-shop-modal-total">
-                                <span>Total</span>
+                                <span>{t("rpg.shop.total")}</span>
                                 <span>{{ totalPrice() }} {{ goldTerm }}</span>
                             </div>
                             <div class="rpg-shop-modal-actions">
-                                <button class="rpg-shop-btn rpg-shop-btn-secondary" click={closeQuantityDialog()}>Cancel</button>
+                                <button class="rpg-shop-btn rpg-shop-btn-secondary" click={closeQuantityDialog()}>{t("rpg.menu.cancel")}</button>
                                 <button class="rpg-shop-btn" click={confirmTrade()}>
                                     {{ actionLabel() }} x{{ quantity() }}
                                 </button>
@@ -183,6 +183,7 @@
     import { getKeyboardControlBind } from "../../../services/actionInput";
 
     const engine = inject(RpgClientEngine)
+    const { t } = engine.i18n()
     const currentPlayer = engine.scene.currentPlayer
     const keyboardControls = engine.globalConfig.keyboardControls
     const iconSheet = (iconId) => ({
@@ -198,11 +199,11 @@
     const selectedModeIndex = signal(0)
     const quantity = signal(1)
     const quantityDialogOpen = signal(false)
-    const defaultMessage = 'Welcome to my shop!'
+    const defaultMessage = t("rpg.shop.default-message")
     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 { data, onInteraction , onFinish } = defineProps()
@@ -229,7 +230,7 @@
     })
     const currentItem = computed(() => filteredItems()[selectedItem()])
     const gold = computed(() => currentPlayer()._gold())
-    const actionLabel = computed(() => tradeMode() === 'buy' ? 'Buy' : 'Sell')
+    const actionLabel = computed(() => tradeMode() === 'buy' ? t("rpg.shop.buy") : t("rpg.shop.sell"))
     const faceSheet = (graphicId, animationName) => ({
         definition: engine.getSpriteSheet(graphicId),
         playing: animationName || "default"

package/src/components/gui/title-screen.ce

@@ -34,6 +34,7 @@
     import { getKeyboardControlBind } from "../../services/actionInput";
 
     const engine = inject(RpgClientEngine);
+    const { t } = engine.i18n();
     const guiService = inject(RpgGui);
     const keyboardControls = engine.globalConfig.keyboardControls;
 
@@ -52,12 +53,12 @@
     const { entries, title, subtitle, version, saveLoad, localActions } = data();
 
     const defaultEntries = [
-        { id: "start", label: "Start" },
-        { id: "load", label: "Load" }
+        { id: "start", label: t("rpg.title.start") },
+        { id: "load", label: t("rpg.title.load") }
     ];
 
     const resolveProp = (value) => typeof value === "function" ? value() : value;
-    const titleText = computed(() => resolveProp(title) || "RPG");
+    const titleText = computed(() => resolveProp(title) || t("rpg.title.default"));
     const subtitleText = computed(() => resolveProp(subtitle) || "");
     const versionText = computed(() => resolveProp(version) || "");
     const localActionsEnabled = computed(() => resolveProp(localActions) === true);

package/src/components/interaction-components.ce

@@ -0,0 +1,23 @@
+<Container>
+  @for (entry of renderedComponents) {
+    <Container dependencies={entry.dependencies}>
+      <entry.component ...entry.props />
+    </Container>
+  }
+</Container>
+
+<script>
+  import { computed } from "canvasengine";
+  import { RpgClientEngine } from "../RpgClientEngine";
+  import { inject } from "../core/inject";
+
+  const { object, bounds, hitboxBounds, graphicBounds } = defineProps();
+  const client = inject(RpgClientEngine);
+  const sprite = object();
+
+  const renderedComponents = computed(() => client.interactions.getRenderedComponents(sprite, {
+    bounds: typeof bounds === "function" ? bounds() : undefined,
+    hitbox: typeof hitboxBounds === "function" ? hitboxBounds() : undefined,
+    graphic: typeof graphicBounds === "function" ? graphicBounds() : undefined,
+  }));
+</script>

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