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/components/diet.js
+++ b/extension/modules/ui/components/diet.js
@@ -0,0 +1,119 @@
+import { Styles, createElement } from '../ui_styles.js';
+
+export const Diet = {
+    init(container) {
+        const MB = window.MagicBot;
+
+        const wrapper = createElement('div', Styles.panel);
+
+        // Header
+        const header = createElement('div', Styles.flexBetween + 'margin-bottom: 5px; cursor: pointer; user-select: none;', {
+            onclick: () => {
+                const section = wrapper.querySelector('#section-diet');
+                const arrow = wrapper.querySelector('#arrow-diet');
+                if (section.style.display === 'none') {
+                    section.style.display = 'block';
+                    arrow.textContent = '▼';
+                } else {
+                    section.style.display = 'none';
+                    arrow.textContent = '▶';
+                }
+            }
+        });
+        header.innerHTML = `
+            <label style="${Styles.label} cursor: pointer;">Pet Diet</label>
+            <span id="arrow-diet" style="font-size: 10px; color: #aaa;">▼</span>
+        `;
+
+        const content = createElement('div', '', { id: 'section-diet' }); // Default open? or closed? Display logic handles it.
+
+        // Controls
+        const controls = createElement('div', 'display: flex; gap: 5px; margin-bottom: 5px;');
+        const createCtrl = (txt, fn) => {
+            return createElement('button', Styles.button + 'background: #444; font-size: 10px; padding: 2px 6px; flex: 1;', {
+                textContent: txt,
+                onclick: fn
+            });
+        };
+
+        controls.appendChild(createCtrl('All', () => {
+            const list = document.getElementById('diet-list');
+            if (!list) return;
+            list.querySelectorAll('input').forEach(cb => { if (!cb.checked) cb.click(); });
+        }));
+
+        controls.appendChild(createCtrl('None', () => {
+            const list = document.getElementById('diet-list');
+            if (!list) return;
+            list.querySelectorAll('input').forEach(cb => { if (cb.checked) cb.click(); });
+        }));
+
+        content.appendChild(controls);
+
+        // List Container
+        const listContainer = createElement('div', 'max-height: 150px; overflow-y: auto; background: rgba(0,0,0,0.2); padding: 5px; border-radius: 4px;', {
+            id: 'diet-list'
+        });
+        content.appendChild(listContainer);
+
+        wrapper.appendChild(header);
+        wrapper.appendChild(content);
+        container.appendChild(wrapper);
+
+        // Initial Populate
+        this.populate(listContainer);
+
+        // Subscribe to state updates to refresh list
+        if (MB.on) {
+            MB.on('state_updated', () => {
+                if (listContainer.children.length === 0) this.populate(listContainer);
+            });
+        }
+    },
+
+    populate(list) {
+        const MB = window.MagicBot;
+        if (!list) return;
+
+        // Preserve checks if re-populating not fully implemented but okay for now to clear
+        list.innerHTML = '';
+
+        let crops = ["Carrot", "Tomato", "Potato", "Corn", "Wheat", "Strawberry", "Blueberry", "Pumpkin", "Watermelon", "Radish", "Cabbage", "Lettuce", "Pepper", "Apple", "Orange", "Banana", "Coconut", "Grape", "Lemon", "Lime", "Peach", "Pear", "Plum", "Cherry", "Mango", "Pineapple", "Aloe", "Daffodil", "OrangeTulip"];
+
+        // Try to merge with shop data if present
+        if (MB && MB.state && MB.state.shops && MB.state.shops.seed && MB.state.shops.seed.inventory) {
+            const shopCrops = MB.state.shops.seed.inventory.map(i => i.species);
+            crops = [...new Set([...crops, ...shopCrops])];
+        } else if (MB.state && MB.state.inventory && MB.state.inventory.items) {
+            // Also scan inventory for seeds
+            MB.state.inventory.items.forEach(i => {
+                if (i.itemType === 'Seed' && i.species) crops.push(i.species);
+            });
+            crops = [...new Set(crops)];
+        }
+
+        crops.sort();
+
+        crops.forEach(crop => {
+            const label = createElement('label', 'display: flex; align-items: center; gap: 4px; font-size: 10px; cursor: pointer; user-select: none; padding: 2px 0;');
+
+            const checkbox = createElement('input', 'cursor: pointer;', { type: 'checkbox' });
+
+            if (MB.automation && MB.automation.petDiet && MB.automation.petDiet.has(crop)) {
+                checkbox.checked = true;
+            }
+
+            checkbox.onchange = (e) => {
+                if (!MB.automation) return;
+                if (!MB.automation.petDiet) MB.automation.petDiet = new Set();
+
+                if (e.target.checked) MB.automation.petDiet.add(crop);
+                else MB.automation.petDiet.delete(crop);
+            };
+
+            label.appendChild(checkbox);
+            label.appendChild(document.createTextNode(crop));
+            list.appendChild(label);
+        });
+    }
+};