/* ================================
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");
}
/* ════════════════════════════════════════════
Energie kaufen – Popup beim + Klick
════════════════════════════════════════════ */
document.getElementById("hud-energy-plus")?.addEventListener("click", openEnergyBuyPopup);
async function openEnergyBuyPopup() {
/* Aktuellen Stand laden */
let hud, energyStatus;
try {
[hud, energyStatus] = await Promise.all([
fetch("/api/hud").then(r => r.json()),
fetch("/api/energy").then(r => r.json()),
]);
} catch {
return;
}
/* Altes Popup entfernen */
document.getElementById("energy-buy-overlay")?.remove();
const alreadyBought = energyStatus.bought_today;
const energyFull = (energyStatus.energy ?? 0) >= (energyStatus.energy_max ?? 40);
const canGems = hud.gems >= 10;
const canGold = hud.gold >= 200;
const overlay = document.createElement("div");
overlay.id = "energy-buy-overlay";
overlay.style.cssText = `
position:fixed; inset:0; z-index:99999;
background:rgba(0,0,0,.75);
display:flex; align-items:center; justify-content:center;`;
/* ── Inhalt je nach Status ── */
let body = "";
if (alreadyBought) {
body = `
⏳
BEREITS AUFGEFÜLLT
Du hast heute bereits Energie dazugekauft.
Morgen wieder verfügbar.
`;
} else if (energyFull) {
body = `
⚡
ENERGIE VOLL
Deine Energie ist bereits auf dem Maximum.
`;
} else {
const gemBtn = canGems
? ``
: ``;
const goldBtn = canGold
? ``
: ``;
body = `
⚡
ENERGIE AUFFÜLLEN
+10 Energie · max. 1× täglich
${gemBtn}${goldBtn}
${!canGems && !canGold
? `Weder genug Gems noch Gold vorhanden.
`
: ""}`;
}
overlay.innerHTML = `
${body}
`;
document.body.appendChild(overlay);
/* Schließen */
document.getElementById("ebtn-close").addEventListener("click", () => overlay.remove());
overlay.addEventListener("click", e => { if (e.target === overlay) overlay.remove(); });
/* Kauf-Buttons */
overlay.querySelectorAll(".ebtn").forEach(btn => {
btn.addEventListener("mouseenter", () => { btn.style.transform = "translateY(-2px)"; btn.style.opacity = ".9"; });
btn.addEventListener("mouseleave", () => { btn.style.transform = ""; btn.style.opacity = ""; });
btn.addEventListener("click", () => buyEnergy(btn.dataset.pay, overlay));
});
}
async function buyEnergy(payWith, overlay) {
/* Buttons deaktivieren während Kauf */
overlay.querySelectorAll(".ebtn").forEach(b => { b.disabled = true; b.style.opacity = ".5"; });
try {
const res = await fetch("/api/energy/buy", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ currency: payWith }),
});
const data = await res.json();
if (!res.ok) {
overlay.querySelector("div > div:last-of-type").insertAdjacentHTML(
"beforebegin",
`${data.error || "Fehler beim Kauf."}
`
);
overlay.querySelectorAll(".ebtn").forEach(b => { b.disabled = false; b.style.opacity = ""; });
return;
}
/* Erfolg: HUD aktualisieren + Popup mit Bestätigung */
await refreshHud();
overlay.remove();
const confirm = document.createElement("div");
confirm.style.cssText = `
position:fixed; inset:0; z-index:99999;
background:rgba(0,0,0,.75);
display:flex; align-items:center; justify-content:center;`;
confirm.innerHTML = `
⚡
+10 ENERGIE
Energie aufgefüllt auf ${data.energy} / ${data.energy_max}
`;
document.body.appendChild(confirm);
setTimeout(() => confirm.remove(), 3000);
} catch {
overlay.querySelectorAll(".ebtn").forEach(b => { b.disabled = false; b.style.opacity = ""; });
}
}
function formatNum(n) {
return Number(n || 0).toLocaleString("de-DE");
}