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/overlays/pets.js
+++ b/extension/modules/ui/overlays/pets.js
@@ -0,0 +1,86 @@
+import { WindowManager } from './window_manager.js';
+
+export const PetsOverlay = {
+    open() {
+        // Position next to others
+        const { win, content } = WindowManager.create('window-pets', '🐾 My Pets', { x: 20, y: 340, width: 220, height: 250 });
+        this.update(content);
+    },
+
+    update(container) {
+        if (!container) container = document.getElementById('window-pets-content');
+        if (!container) return;
+
+        const MB = window.MagicBot;
+        if (!MB || !MB.state || !MB.state.inventory || !MB.state.inventory.items) {
+            container.innerHTML = '<div style="color:red">No Data</div>';
+            return;
+        }
+
+        container.innerHTML = '';
+        const list = document.createElement('div');
+        list.style.cssText = "display: flex; flex-direction: column; gap: 8px; font-size: 11px;";
+
+        const pets = MB.state.inventory.items.filter(i => i.itemType === 'Pet');
+
+        if (pets.length === 0) {
+            container.innerHTML = '<div style="color:#aaa; text-align:center; padding: 10px;">No Pets Found</div>';
+            return;
+        }
+
+        pets.forEach(p => {
+            const row = document.createElement('div');
+            row.style.cssText = `background: rgba(255,255,255,0.05); padding: 8px; border-radius: 4px; display: flex; flex-direction: column; gap: 2px;`;
+
+            // Name/Species
+            const name = p.name || p.petSpecies;
+            const species = p.petSpecies;
+            const isAutoFeed = MB.automation && MB.automation.pets && MB.automation.pets[p.id] && MB.automation.pets[p.id].autoFeed;
+
+            const diets = {
+                'Bee': ['Strawberry', 'Blueberry', 'Tulip', 'Daffodil', 'Lily'],
+                'Goat': ['Pumpkin', 'Coconut', 'Cactus', 'Pepper']
+            };
+            const diet = diets[species] ? diets[species].join(', ') : 'Unknown Diet';
+
+            row.innerHTML = `
+                <div style="font-weight:bold; color: #bada55; display: flex; justify-content: space-between; align-items:center;">
+                    <span>${name}</span>
+                    <label style="font-size:9px; color:#eee; display:flex; align-items:center;">
+                        <input type="checkbox" class="chk-pet-feed" data-id="${p.id}" ${isAutoFeed ? 'checked' : ''}> A-Feed
+                    </label>
+                </div>
+                <div style="display: flex; justify-content: space-between; font-size: 9px; color: #666;">
+                    <span>${species}</span>
+                    <span>XP: ${p.xp}</span>
+                </div>
+                <div style="display: flex; justify-content: space-between;">
+                    <span>Hunger: ${Math.floor(p.hunger || 0)}</span>
+                </div>
+                <div style="color: #aaa; font-size: 9px; margin-top: 4px;">
+                   Diet: ${diet}
+                </div>
+             `;
+
+            // Event listener for checkbox (needs to be attached after innerHTML reflow)
+            // We'll trust the parent re-render or attach globally for now to avoid complexity in this simple render loop.
+            // Actually, let's attach immediately after this loop finishes or use a delegate.
+
+            list.appendChild(row);
+        });
+
+        // Delegate listener
+        list.onchange = (e) => {
+            if (e.target.classList.contains('chk-pet-feed')) {
+                const id = e.target.getAttribute('data-id');
+                if (!MB.automation.pets) MB.automation.pets = {};
+                if (!MB.automation.pets[id]) MB.automation.pets[id] = {};
+                MB.automation.pets[id].autoFeed = e.target.checked;
+                console.log(`[MagicBot] Pet ${id} Auto-Feed: ${e.target.checked}`);
+            }
+        };
+
+        container.appendChild(list);
+    }
+};
+```