feat: json format, et al.

src/systems/ui/desktop.js

@@ -24,15 +24,22 @@ export function setupDesktopTabs() {
     const $userStats = $('#rpg-user-stats');
     const $infoBox = $('#rpg-info-box');
     const $thoughts = $('#rpg-thoughts');
+    const $skills = $('#rpg-skills');
     const $inventory = $('#rpg-inventory');
     const $quests = $('#rpg-quests');
 
     // If no sections exist, nothing to organize
-    if ($userStats.length === 0 && $infoBox.length === 0 && $thoughts.length === 0 && $inventory.length === 0 && $quests.length === 0) {
+    if ($userStats.length === 0 && $infoBox.length === 0 && $thoughts.length === 0 && $skills.length === 0 && $inventory.length === 0 && $quests.length === 0) {
         return;
     }
 
-    // Create tab navigation - conditionally show inventory and quests tabs based on settings
+    // Create tab navigation - conditionally show skills, inventory and quests tabs based on settings
+    const skillsTabHtml = extensionSettings.showSkills ? `
+            <button class="rpg-tab-btn" data-tab="skills">
+                <i class="fa-solid fa-star"></i>
+                <span data-i18n-key="global.skills">Skills</span>
+            </button>` : '';
+
     const inventoryTabHtml = extensionSettings.showInventory ? `
             <button class="rpg-tab-btn" data-tab="inventory">
                 <i class="fa-solid fa-box"></i>
@@ -50,12 +57,13 @@ export function setupDesktopTabs() {
             <button class="rpg-tab-btn active" data-tab="status">
                 <i class="fa-solid fa-chart-simple"></i>
                 <span data-i18n-key="global.status">Status</span>
-            </button>${inventoryTabHtml}${questsTabHtml}
+            </button>${skillsTabHtml}${inventoryTabHtml}${questsTabHtml}
         </div>
     `);
 
     // Create tab content containers
     const $statusTab = $('<div class="rpg-tab-content active" data-tab-content="status"></div>');
+    const $skillsTab = $('<div class="rpg-tab-content" data-tab-content="skills"></div>');
     const $inventoryTab = $('<div class="rpg-tab-content" data-tab-content="inventory"></div>');
     const $questsTab = $('<div class="rpg-tab-content" data-tab-content="quests"></div>');
 
@@ -72,11 +80,15 @@ export function setupDesktopTabs() {
         $statusTab.append($thoughts.detach());
         $thoughts.show();
     }
-    if ($inventory.length > 0) {
+    if (extensionSettings.showSkills && $skills.length > 0) {
+        $skillsTab.append($skills.detach());
+        $skills.show();
+    }
+    if (extensionSettings.showInventory && $inventory.length > 0) {
         $inventoryTab.append($inventory.detach());
         $inventory.show();
     }
-    if ($quests.length > 0) {
+    if (extensionSettings.showQuests && $quests.length > 0) {
         $questsTab.append($quests.detach());
         $quests.show();
     }
@@ -88,6 +100,7 @@ export function setupDesktopTabs() {
     const $tabsContainer = $('<div class="rpg-tabs-container"></div>');
     $tabsContainer.append($tabNav);
     $tabsContainer.append($statusTab);
+    $tabsContainer.append($skillsTab);
     $tabsContainer.append($inventoryTab);
     $tabsContainer.append($questsTab);
 
@@ -120,27 +133,30 @@ export function removeDesktopTabs() {
     const $userStats = $('#rpg-user-stats').detach();
     const $infoBox = $('#rpg-info-box').detach();
     const $thoughts = $('#rpg-thoughts').detach();
+    const $skills = $('#rpg-skills').detach();
     const $inventory = $('#rpg-inventory').detach();
     const $quests = $('#rpg-quests').detach();
 
     // Remove tabs container
     $('.rpg-tabs-container').remove();
 
-    // Get dividers (all 4 dividers in the template)
+    // Get dividers (all 5 dividers in the template)
     const $dividerStats = $('#rpg-divider-stats');
     const $dividerInfo = $('#rpg-divider-info');
     const $dividerThoughts = $('#rpg-divider-thoughts');
+    const $dividerSkills = $('#rpg-divider-skills');
     const $dividerInventory = $('#rpg-divider-inventory');
 
     // Restore original sections to content box in correct order
     const $contentBox = $('.rpg-content-box');
 
-    // Re-insert sections in original order: User Stats, Info Box, Thoughts, Inventory, Quests
+    // Re-insert sections in original order: User Stats, Info Box, Thoughts, Skills, Inventory, Quests
     // Each section goes before its corresponding divider
     if ($dividerStats.length) {
         $dividerStats.before($userStats);
         $dividerInfo.before($infoBox);
         $dividerThoughts.before($thoughts);
+        $dividerSkills.before($skills);
         $dividerInventory.before($inventory);
         $contentBox.append($quests);
     } else {
@@ -148,6 +164,7 @@ export function removeDesktopTabs() {
         $contentBox.append($userStats);
         $contentBox.append($infoBox);
         $contentBox.append($thoughts);
+        $contentBox.append($skills);
         $contentBox.append($inventory);
         $contentBox.append($quests);
     }
@@ -156,6 +173,7 @@ export function removeDesktopTabs() {
     $userStats.show();
     $infoBox.show();
     $thoughts.show();
+    $skills.show();
     $inventory.show();
     $quests.show();
     $('.rpg-divider').show();