feat: UI Overhaul

2025-12-09 23:49:52 +00:00
parent 68271579bf
commit 07ae21973e
21 changed files with 4546 additions and 86 deletions
--- a/extension/modules/ui/ui_manager.js
+++ b/extension/modules/ui/ui_manager.js
@@ -0,0 +1,107 @@
+import { Styles, createElement } from './ui_styles.js';
+import { Teleport } from './components/teleport.js';
+import { Automation } from './components/automation.js';
+import { Harvest } from './components/harvest.js';
+import { Diet } from './components/diet.js';
+import { Visualizers } from './components/visualizers.js';
+
+import { GardenOverlay } from './overlays/garden.js';
+import { InventoryOverlay } from './overlays/inventory.js';
+import { ShopOverlay } from './overlays/shop.js';
+import { PlayersOverlay } from './overlays/players.js';
+import { PetsOverlay } from './overlays/pets.js';
+import { ModelOverlay } from './overlays/model_overlay.js'; // Added
+
+(function () {
+    const MB = window.MagicBot;
+    console.log('[MagicBot] Initializing Modular UI...');
+
+    // Expose Overlay helpers to global scope for Visualizers to use
+    window.MagicBot_Overlays = {
+        openAll: () => {
+            GardenOverlay.open();
+            InventoryOverlay.open();
+            ShopOverlay.open();
+            PlayersOverlay.open();
+            PetsOverlay.open();
+        },
+        openPets: () => PetsOverlay.open(),
+        openModel: () => ModelOverlay.open() // Added
+    };
+
+    const UIManager = {
+        sidebar: null,
+        isVisible: true,
+
+        init() {
+            this.createSidebar();
+            this.setupShortcuts();
+            this.setupUpdateLoop();
+
+            console.log('[MagicBot] UI Manager Ready.');
+        },
+
+        createSidebar() {
+            if (document.getElementById('magic-bot-sidebar')) return;
+
+            this.sidebar = createElement('div', Styles.sidebar, { id: 'magic-bot-sidebar' });
+
+            // Header
+            const header = createElement('div', 'padding: 20px 20px 10px 20px; display: flex; justify-content: space-between; align-items: center;');
+            header.innerHTML = `
+                <h3 style="margin: 0; color: #bada55; font-size: 18px;">🌱 Magic Bot</h3>
+                <div id="mb-status-ind" style="font-size: 12px; font-weight: bold; color: #ff5252;">● Disconnected</div>
+            `;
+            this.sidebar.appendChild(header);
+
+            // Scrollable Content
+            const content = createElement('div', 'padding: 0 20px 20px 20px; flex: 1; overflow-y: auto;');
+
+            // Initialize Components
+            try { Teleport.init(content); } catch (e) { console.error('Teleport Init Failed', e); }
+            try { Automation.init(content); } catch (e) { console.error('Automation Init Failed', e); }
+            try { Harvest.init(content); } catch (e) { console.error('Harvest Init Failed', e); }
+            try { Diet.init(content); } catch (e) { console.error('Diet Init Failed', e); }
+            try { Visualizers.init(content); } catch (e) { console.error('Visualizers Init Failed', e); }
+
+            this.sidebar.appendChild(content);
+            document.body.appendChild(this.sidebar);
+
+            // Stop Prop on sidebar
+            ['keydown', 'keyup', 'keypress'].forEach(evt =>
+                this.sidebar.addEventListener(evt, (e) => e.stopPropagation())
+            );
+        },
+
+        setupShortcuts() {
+            window.addEventListener('keydown', (e) => {
+                if (e.code === 'Insert' || e.code === 'Backquote') { // Toggle Key
+                    this.toggleUI();
+                }
+            });
+        },
+
+        toggleUI() {
+            this.isVisible = !this.isVisible;
+            if (this.sidebar) {
+                this.sidebar.style.opacity = this.isVisible ? '1' : '0';
+                this.sidebar.style.pointerEvents = this.isVisible ? 'auto' : 'none';
+            }
+        },
+
+        setupUpdateLoop() {
+            // Bind to state updates to refresh overlays
+            MB.on('state_updated', () => {
+                GardenOverlay.update();
+                InventoryOverlay.update();
+                ShopOverlay.update();
+                PlayersOverlay.update();
+                PetsOverlay.update(); // Added
+            });
+        }
+    };
+
+    // Initialize
+    UIManager.init();
+
+})();