69

public/js/map-ui.js

@@ -36,28 +36,19 @@ function resetTabs() {
 }
 
 /* ================================
-   Gebäude Popup öffnen
+   Gebäude Popup öffnen (Funktion)
 ================================ */
 
-document.querySelectorAll(".building").forEach((building) => {
+async function openBuildingPopup(url) {
-  building.addEventListener("click", async (e) => {
-    e.preventDefault();
-
-    try {
-      const url = building.getAttribute("href");
-
   title.innerText = "Lädt...";
-
   popup.style.left = "50%";
   popup.style.top = "50%";
   popup.classList.add("active");
-
   resetTabs();
 
+  try {
     const res = await fetch("/api" + url);
-
     if (!res.ok) throw new Error("API Fehler");
-
     const data = await res.json();
 
     title.innerText = data.name;
@@ -65,7 +56,6 @@ document.querySelectorAll(".building").forEach((building) => {
     const infoTab = document.getElementById("tab-info");
     const tabs = document.querySelector(".popup-tabs");
 
-      // Standard: Info anzeigen
     infoTab.innerHTML = `
   <div class="popup-info-title">${data.name}</div>
   <div class="popup-stat-row"><span class="popup-stat-key">Level</span><span class="popup-stat-val">${data.level}</span></div>
@@ -82,32 +72,16 @@ document.querySelectorAll(".building").forEach((building) => {
   <div class="popup-divider">✦ · ✦ · ✦</div>
 `;
 
-      // Standard Tabs anzeigen
     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 = `<div class="building-ui"></div>`;
       }
-
       buildingModules[buildingType](buildingType);
     }
 
@@ -121,13 +95,68 @@ document.querySelectorAll(".building").forEach((building) => {
         ⚒ UPGRADE STARTEN ⚒
       </button>
     `;
-
   } 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
 ================================ */