feat: UI Overhaul

extension/modules/ui/components/teleport.js

@@ -0,0 +1,78 @@
+import { Styles, createElement } from '../ui_styles.js';
+
+export const Teleport = {
+    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-tp');
+                const arrow = wrapper.querySelector('#arrow-tp');
+                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;">Teleport</label>
+            <span id="arrow-tp" style="font-size: 10px; color: #aaa;">▼</span>
+        `;
+
+        // Content
+        const content = createElement('div', '', { id: 'section-tp' });
+
+        const inputsDiv = createElement('div', 'display: flex; gap: 8px;');
+
+        const inpX = createElement('input', Styles.input, { type: 'number', placeholder: 'X', value: '15', id: 'tp-x' });
+        const inpY = createElement('input', Styles.input, { type: 'number', placeholder: 'Y', value: '15', id: 'tp-y' });
+
+        const btnGo = createElement('button', Styles.button + 'background: ' + Styles.colors.primary, {
+            textContent: 'Go',
+            onclick: () => {
+                const x = parseInt(inpX.value);
+                const y = parseInt(inpY.value);
+                if (MB && MB.teleport) MB.teleport(x, y);
+            }
+        });
+
+        inputsDiv.appendChild(inpX);
+        inputsDiv.appendChild(inpY);
+        inputsDiv.appendChild(btnGo);
+
+        content.appendChild(inputsDiv);
+
+        // Pre-defined Locations (Bonus feature)
+        const quickLocs = createElement('div', 'display: flex; gap: 5px; margin-top: 5px;');
+        const locs = [
+            { name: 'Home', x: 15, y: 15 },
+            { name: 'Market', x: 50, y: 50 } // Example coordinates, adjust if known
+        ];
+
+        locs.forEach(loc => {
+            const btn = createElement('button', Styles.button + 'background: #333; font-size: 10px; padding: 4px 8px;', {
+                textContent: loc.name,
+                onclick: () => {
+                    inpX.value = loc.x;
+                    inpY.value = loc.y;
+                    if (MB && MB.teleport) MB.teleport(loc.x, loc.y);
+                }
+            });
+            quickLocs.appendChild(btn);
+        });
+
+        content.appendChild(quickLocs);
+
+        wrapper.appendChild(header);
+        wrapper.appendChild(content);
+
+        container.appendChild(wrapper);
+    }
+};