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/automation.js
+++ b/extension/modules/ui/components/automation.js
@@ -0,0 +1,65 @@
+import { Styles, createElement } from '../ui_styles.js';
+
+export const Automation = {
+    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-auto');
+                const arrow = wrapper.querySelector('#arrow-auto');
+                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;">Automation</label>
+            <span id="arrow-auto" style="font-size: 10px; color: #aaa;">▼</span>
+        `;
+
+        const content = createElement('div', 'display: flex; flex-direction: column; gap: 8px;', { id: 'section-auto' });
+
+        const createToggle = (label, prop, tooltip = '') => {
+            const row = createElement('label', Styles.flexBetween + 'cursor: pointer;', { title: tooltip });
+            const txt = createElement('span', '', { textContent: label });
+            const chk = createElement('input', 'cursor: pointer;', {
+                type: 'checkbox',
+                onchange: (e) => {
+                    if (MB.automation) MB.automation[prop] = e.target.checked;
+                }
+            });
+
+            // Set initial state if available
+            if (MB.automation && MB.automation[prop]) chk.checked = true;
+
+            row.appendChild(txt);
+            row.appendChild(chk);
+            return row;
+        };
+
+        content.appendChild(createToggle('Auto Plant', 'autoPlant'));
+        content.appendChild(createToggle('Auto Harvest', 'autoHarvest'));
+        content.appendChild(createToggle('Auto Sell', 'autoSell'));
+        content.appendChild(createToggle('Auto Feed Pets', 'autoFeed'));
+
+        // Smart Harvest Special
+        const div = createElement('div', 'border-top: 1px solid #444; margin: 4px 0;');
+        content.appendChild(div);
+
+        const smartToggle = createToggle('Smart Harvest', 'smartHarvest', 'Waits for optimal mutations (Gold->Frozen, Long->Wet)');
+        smartToggle.querySelector('span').style.color = Styles.colors.accent;
+        content.appendChild(smartToggle);
+
+        wrapper.appendChild(header);
+        wrapper.appendChild(content);
+        container.appendChild(wrapper);
+    }
+};