70 lines
1.9 KiB
JavaScript
70 lines
1.9 KiB
JavaScript
/* ================================
|
||
HUD – Charakter & Währungsanzeige
|
||
================================ */
|
||
|
||
async function fetchHud() {
|
||
const res = await fetch("/api/hud");
|
||
if (!res.ok) throw new Error("HUD API Fehler");
|
||
return await res.json();
|
||
}
|
||
|
||
function applyHudData(data) {
|
||
const set = (id, val) => {
|
||
const el = document.getElementById(id);
|
||
if (el) el.textContent = formatNumber(val);
|
||
};
|
||
|
||
const nameEl = document.getElementById("hud-name");
|
||
if (nameEl) nameEl.textContent = data.name;
|
||
|
||
set("hud-gems", data.gems);
|
||
set("hud-gold", data.gold);
|
||
set("hud-wood", data.wood);
|
||
set("hud-stone", data.stone);
|
||
|
||
/* ── Energie anzeigen ────────────────────────────── */
|
||
const energy = data.energy ?? 40;
|
||
const energyMax = data.energy_max ?? 40;
|
||
const energyEl = document.getElementById("hud-energy-value");
|
||
if (energyEl) energyEl.textContent = energy + " / " + energyMax;
|
||
|
||
/* Farbe je nach Stand */
|
||
if (energyEl) {
|
||
energyEl.style.color =
|
||
energy <= 0 ? "#e74c3c" // leer → rot
|
||
: energy <= 10 ? "#e67e22" // niedrig → orange
|
||
: energy < energyMax ? "#f0d9a6" // teilweise → normal
|
||
: "#7de87d"; // voll → grün
|
||
}
|
||
}
|
||
|
||
export async function loadHud() {
|
||
try {
|
||
const data = await fetchHud();
|
||
applyHudData(data);
|
||
// Auto-Refresh alle 30 Sekunden
|
||
setInterval(async () => {
|
||
try {
|
||
const d = await fetchHud();
|
||
applyHudData(d);
|
||
} catch {}
|
||
}, 30000);
|
||
} catch (err) {
|
||
console.error("HUD Fehler:", err);
|
||
}
|
||
}
|
||
|
||
export async function refreshHud() {
|
||
try {
|
||
const data = await fetchHud();
|
||
applyHudData(data);
|
||
} catch (err) {
|
||
console.error("HUD Refresh Fehler:", err);
|
||
}
|
||
}
|
||
|
||
function formatNumber(n) {
|
||
if (n === undefined || n === null) return "0";
|
||
return Number(n).toLocaleString("de-DE");
|
||
}
|