diff --git a/public/js/map-ui.js b/public/js/map-ui.js index 4b6b8e0..6855bd0 100644 --- a/public/js/map-ui.js +++ b/public/js/map-ui.js @@ -36,37 +36,27 @@ function resetTabs() { } /* ================================ - Gebäude Popup öffnen + Gebäude Popup öffnen (Funktion) ================================ */ -document.querySelectorAll(".building").forEach((building) => { - building.addEventListener("click", async (e) => { - e.preventDefault(); +async function openBuildingPopup(url) { + title.innerText = "Lädt..."; + popup.style.left = "50%"; + popup.style.top = "50%"; + popup.classList.add("active"); + resetTabs(); - try { - const url = building.getAttribute("href"); + try { + const res = await fetch("/api" + url); + if (!res.ok) throw new Error("API Fehler"); + const data = await res.json(); - title.innerText = "Lädt..."; + title.innerText = data.name; - popup.style.left = "50%"; - popup.style.top = "50%"; - popup.classList.add("active"); + const infoTab = document.getElementById("tab-info"); + const tabs = document.querySelector(".popup-tabs"); - resetTabs(); - - const res = await fetch("/api" + url); - - if (!res.ok) throw new Error("API Fehler"); - - const data = await res.json(); - - title.innerText = data.name; - - const infoTab = document.getElementById("tab-info"); - const tabs = document.querySelector(".popup-tabs"); - - // Standard: Info anzeigen - infoTab.innerHTML = ` + infoTab.innerHTML = ` @@ -82,52 +72,91 @@ document.querySelectorAll(".building").forEach((building) => { `; - // Standard Tabs anzeigen - tabs.style.display = "flex"; + tabs.style.display = "flex"; - // Prüfen ob Gebäude eigenes UI hat - const buildingType = Number(data.type); - if (buildingModules[buildingType]) { - if (keepTabsVisible.has(buildingType)) { - // Tabs sichtbar lassen (z.B. Mine) - tabs.style.display = "flex"; - // Aktionen-Tab aktivieren - document - .querySelectorAll(".tab") - .forEach((t) => t.classList.remove("active")); - document - .querySelectorAll(".tab-content") - .forEach((c) => c.classList.remove("active")); - document - .querySelector(".tab[data-tab='actions']") - .classList.add("active"); - document.getElementById("tab-actions").classList.add("active"); - } else { - // Tabs ausblenden, eigenes Voll-UI (Wohnhaus, Schwarzmarkt) - tabs.style.display = "none"; - infoTab.innerHTML = `
`; - } - - buildingModules[buildingType](buildingType); + const buildingType = Number(data.type); + if (buildingModules[buildingType]) { + if (keepTabsVisible.has(buildingType)) { + tabs.style.display = "flex"; + } else { + tabs.style.display = "none"; + infoTab.innerHTML = `
`; } - - document.getElementById("tab-upgrade").innerHTML = ` - - - - - - `; - - } catch (error) { - console.error("Gebäude konnte nicht geladen werden:", error); + buildingModules[buildingType](buildingType); } + + document.getElementById("tab-upgrade").innerHTML = ` + + + + + + `; + } catch (error) { + console.error("Gebäude konnte nicht geladen werden:", error); + } +} + +/* ================================ + Gebäude Popup per Klick öffnen +================================ */ + +document.querySelectorAll(".building").forEach((building) => { + building.addEventListener("click", async (e) => { + e.preventDefault(); + const url = building.getAttribute("href"); + await openBuildingPopup(url); }); }); +/* ================================ + Upgrade Button +================================ */ + +document.addEventListener("click", async (e) => { + const btn = e.target.closest("#upgrade-btn"); + if (!btn || btn.disabled) return; + + const buildingId = btn.dataset.building; + btn.disabled = true; + btn.textContent = "Wird durchgeführt..."; + + try { + const res = await fetch("/api/building/" + buildingId + "/upgrade", { + method: "POST", + }); + const data = await res.json(); + + if (!res.ok || data.error) { + window.showNotification(data.error || "Upgrade fehlgeschlagen.", "Upgrade", "⚒️"); + btn.disabled = false; + btn.textContent = "⚒ UPGRADE STARTEN ⚒"; + return; + } + + window.showNotification( + `Upgrade erfolgreich!\nNeues Level: ${data.newLevel}\n\nKosten: ${data.cost.wood} Holz, ${data.cost.stone} Stein, ${data.cost.gold} Gold`, + "Upgrade", + "⚒️" + ); + + // Popup mit frischen Daten neu laden + await openBuildingPopup("/building/" + buildingId); + + // HUD aktualisieren + import("/js/hud.js").then(({ loadHud }) => loadHud()); + + } catch (err) { + console.error("Upgrade Fehler:", err); + window.showNotification("Fehler beim Upgrade. Bitte erneut versuchen.", "Fehler", "⚠️"); + btn.disabled = false; + btn.textContent = "⚒ UPGRADE STARTEN ⚒"; + } +}); + /* ================================ Tabs wechseln ================================ */ @@ -155,54 +184,6 @@ document.querySelector(".popup-close").onclick = () => { popup.classList.remove("active"); }; -/* ================================ - Upgrade Button -================================ */ - -document.addEventListener("click", async (e) => { - const btn = e.target.closest("#upgrade-btn"); - if (!btn || btn.disabled) return; - - const buildingId = btn.dataset.building; - - btn.disabled = true; - btn.textContent = "Wird durchgeführt..."; - - try { - const res = await fetch("/api/building/" + buildingId + "/upgrade", { - method: "POST", - }); - - const data = await res.json(); - - if (!res.ok || data.error) { - window.showNotification(data.error || "Upgrade fehlgeschlagen.", "Upgrade", "⚒️"); - btn.disabled = false; - btn.textContent = "⚒ UPGRADE STARTEN ⚒"; - return; - } - - window.showNotification( - `Upgrade erfolgreich!\nNeues Level: ${data.newLevel}\n\nKosten: ${data.cost.wood} Holz, ${data.cost.stone} Stein, ${data.cost.gold} Gold`, - "Upgrade", - "⚒️" - ); - - // Popup neu laden mit aktualisierten Daten - const building = document.querySelector(`.building[href="/building/${buildingId}"]`); - if (building) building.dispatchEvent(new MouseEvent("click", { bubbles: true })); - - // HUD aktualisieren - import("/js/hud.js").then(({ loadHud }) => loadHud()); - - } catch (err) { - console.error("Upgrade Fehler:", err); - window.showNotification("Fehler beim Upgrade. Bitte erneut versuchen.", "Fehler", "⚠️"); - btn.disabled = false; - btn.textContent = "⚒ UPGRADE STARTEN ⚒"; - } -}); - /* ================================ Tooltip ================================ */