79 lines
2.8 KiB
JavaScript
79 lines
2.8 KiB
JavaScript
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);
|
|
}
|
|
};
|