49 lines
1.5 KiB
JavaScript
49 lines
1.5 KiB
JavaScript
export function setupHUD(root) {
|
|
root.innerHTML = `
|
|
<div class="panel hidden">
|
|
<div style="display:flex;align-items:center;gap:12px;">
|
|
<div id="xpbar">
|
|
<div id="xpfill"></div>
|
|
<div id="xplabel">Lvl 1 — 0 XP</div>
|
|
</div>
|
|
<label style="font-size:12px;">
|
|
Zoom
|
|
<input id="hud-zoom" type="range" min="0.6" max="2.0" step="0.05" value="1.2" />
|
|
</label>
|
|
</div>
|
|
<div style="display:flex;gap:8px;">
|
|
<button id="hud-inv">Inventory</button>
|
|
<button id="hud-craft">Crafting</button>
|
|
<button id="hud-logout">Logout</button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
const panel = root.firstElementChild;
|
|
const zoom = panel.querySelector('#hud-zoom');
|
|
|
|
zoom.addEventListener('input', () => {
|
|
const z = parseFloat(zoom.value);
|
|
window.setGameZoom?.(z);
|
|
});
|
|
|
|
panel.querySelector('#hud-inv').onclick = () => {
|
|
window.InventoryUI?.toggle();
|
|
};
|
|
panel.querySelector('#hud-craft').onclick = () => {
|
|
window.CraftingUI?.toggle();
|
|
};
|
|
panel.querySelector('#hud-logout').onclick = async () => {
|
|
await fetch('/api/logout', { method: 'POST' });
|
|
location.reload();
|
|
};
|
|
|
|
// functions for other modules to update XP
|
|
window.updateXP = level => {
|
|
const label = panel.querySelector('#xplabel');
|
|
label.textContent = `Lvl ${level}`;
|
|
const fill = panel.querySelector('#xpfill');
|
|
const pct = Math.min(100, level); // dumb visual
|
|
fill.style.width = `${pct}%`;
|
|
};
|
|
}
|