Pakobbix/rpg-companion-sillytavern
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

mobile done

Browse Source
This commit is contained in:
Mingyu
2025-11-26 07:49:59 +00:00
parent 6759f514f3
commit d486c9e924
6 changed files with 73 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/systems/ui/desktop.js
+3 -3
View File
@@ -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
+44 -4
View File
@@ -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>');