mobile done

src/core/i18n.js

@@ -5,6 +5,20 @@ class Internationalization {
     constructor() {
         this.currentLanguage = 'en';
         this.translations = {};
+        this._listeners = {};
+    }
+
+    addEventListener(event, callback) {
+        if (!this._listeners[event]) {
+            this._listeners[event] = [];
+        }
+        this._listeners[event].push(callback);
+    }
+
+    dispatchEvent(event, data) {
+        if (this._listeners[event]) {
+            this._listeners[event].forEach(callback => callback(data));
+        }
     }
 
     async init() {
@@ -82,6 +96,7 @@ class Internationalization {
         localStorage.setItem('rpgCompanionLanguage', lang);
         await this.loadTranslations(lang);
         this.applyTranslations(document.body);
+        this.dispatchEvent('languageChanged');
     }
 }
 

src/i18n/en.json

@@ -118,9 +118,10 @@
     "global.listView": "List view",
     "global.gridView": "Grid view",
     "global.save": "Save",
-    "desktop.tab.status":"Status",
+    "global.status":"Status",
-    "desktop.tab.inventory":"Inventory",
+    "global.inventory":"Inventory",
-    "desktop.tab.quests":"Quests",
+    "global.quests":"Quests",
+    "global.info":"Info",
     "infobox.noData.title": "No data yet",
     "infobox.noData.instruction": "Generate a new response in the roleplay or switch to \"Separate Generation\" in Settings to access and click the \"Refresh RPG Info\" button",
     "infobox.recentEvents.title": "Recent Events",

src/i18n/zh-tw.json

@@ -118,9 +118,10 @@
     "global.save": "保存",
     "global.listView": "清單檢視",
     "global.gridView": "格子檢視",
-    "desktop.tab.status": "狀態欄",
+    "global.status": "狀態欄",
-    "desktop.tab.inventory": "物品欄",
+    "global.inventory": "物品欄",
-    "desktop.tab.quests": "任務",
+    "global.quests": "任務",
+    "global.info":"資訊",
     "infobox.noData.title": "無資訊可顯示",
     "infobox.noData.instruction": "在RP中產生新的回复，或在設定中切換到“單獨生成”，然後點擊“刷新資訊”按鈕。",
     "infobox.recentEvents.title": "近期事件",

src/systems/features/dice.js

@@ -115,3 +115,6 @@ export function addDiceQuickReply() {
         // For now, the dice display in the sidebar serves as the button
     }
 }
+
+// Add event listener to update display on language change
+i18n.addEventListener('languageChanged', updateDiceDisplay);

src/systems/ui/desktop.js

@@ -36,15 +36,15 @@ export function setupDesktopTabs() {
         <div class="rpg-tabs-nav">
             <button class="rpg-tab-btn active" data-tab="status">
                 <i class="fa-solid fa-chart-simple"></i>
-                <span data-i18n-key="desktop.tab.status">Status</span>
+                <span data-i18n-key="global.status">Status</span>
             </button>
             <button class="rpg-tab-btn" data-tab="inventory">
                 <i class="fa-solid fa-box"></i>
-                <span data-i18n-key="desktop.tab.inventory">Inventory</span>
+                <span data-i18n-key="global.inventory">Inventory</span>
             </button>
             <button class="rpg-tab-btn" data-tab="quests">
                 <i class="fa-solid fa-scroll"></i>
-                <span data-i18n-key="desktop.tab.quests">Quests</span>
+                <span data-i18n-key="global.quests">Quests</span>
             </button>
         </div>
     `);

src/systems/ui/mobile.js

@@ -7,12 +7,52 @@ import { extensionSettings } from '../../core/state.js';
 import { saveSettings } from '../../core/persistence.js';
 import { closeMobilePanelWithAnimation, updateCollapseToggleIcon } from './layout.js';
 import { setupDesktopTabs, removeDesktopTabs } from './desktop.js';
+import { i18n } from '../../core/i18n.js';
 
 /**
  * Sets up the mobile toggle button (FAB) with drag functionality.
  * Handles touch/mouse events for positioning and panel toggling.
  */
 export function setupMobileToggle() {
+    /**
+     * Updates the text labels of the mobile navigation tabs based on the current language.
+     */
+    function updateMobileTabLabels() {
+        const $tabs = $('.rpg-mobile-tabs .rpg-mobile-tab');
+        if ($tabs.length === 0) return;
+
+        $tabs.each(function() {
+            const $tab = $(this);
+            const tabName = $tab.data('tab');
+            let translationKey = '';
+
+            switch (tabName) {
+                case 'stats':
+                    translationKey = 'global.status';
+                    break;
+                case 'info':
+                    translationKey = 'global.info';
+                    break;
+                case 'inventory':
+                    translationKey = 'global.inventory';
+                    break;
+                case 'quests':
+                    translationKey = 'global.quests';
+                    break;
+            }
+
+            if (translationKey) {
+                const translation = i18n.getTranslation(translationKey);
+                if (translation) {
+                    $tab.find('span').text(translation);
+                }
+            }
+        });
+    }
+
+    // Listen for language changes to update tab labels dynamically
+    i18n.addEventListener('languageChanged', updateMobileTabLabels);
+
     const $mobileToggle = $('#rpg-mobile-toggle');
     const $panel = $('#rpg-companion-panel');
     const $overlay = $('<div class="rpg-mobile-overlay"></div>');
@@ -547,19 +587,19 @@ export function setupMobileTabs() {
 
     // Tab 1: Stats (User Stats only)
     if (hasStats) {
-        tabs.push('<button class="rpg-mobile-tab active" data-tab="stats"><i class="fa-solid fa-chart-bar"></i><span>Stats</span></button>');
+        tabs.push('<button class="rpg-mobile-tab active" data-tab="stats"><i class="fa-solid fa-chart-bar"></i><span>' + i18n.getTranslation('global.status') + '</span></button>');
     }
     // Tab 2: Info (Info Box + Character Thoughts)
     if (hasInfo) {
-        tabs.push('<button class="rpg-mobile-tab ' + (tabs.length === 0 ? 'active' : '') + '" data-tab="info"><i class="fa-solid fa-book"></i><span>Info</span></button>');
+        tabs.push('<button class="rpg-mobile-tab ' + (tabs.length === 0 ? 'active' : '') + '" data-tab="info"><i class="fa-solid fa-book"></i><span>' + i18n.getTranslation('global.info') + '</span></button>');
     }
     // Tab 3: Inventory
     if (hasInventory) {
-        tabs.push('<button class="rpg-mobile-tab ' + (tabs.length === 0 ? 'active' : '') + '" data-tab="inventory"><i class="fa-solid fa-box"></i><span>Inventory</span></button>');
+        tabs.push('<button class="rpg-mobile-tab ' + (tabs.length === 0 ? 'active' : '') + '" data-tab="inventory"><i class="fa-solid fa-box"></i><span>' + i18n.getTranslation('global.inventory') + '</span></button>');
     }
     // Tab 4: Quests
     if (hasQuests) {
-        tabs.push('<button class="rpg-mobile-tab ' + (tabs.length === 0 ? 'active' : '') + '" data-tab="quests"><i class="fa-solid fa-scroll"></i><span>Quests</span></button>');
+        tabs.push('<button class="rpg-mobile-tab ' + (tabs.length === 0 ? 'active' : '') + '" data-tab="quests"><i class="fa-solid fa-scroll"></i><span>' + i18n.getTranslation('global.quests') + '</span></button>');
     }
 
     const $tabNav = $('<div class="rpg-mobile-tabs">' + tabs.join('') + '</div>');