Popup eingebaut

app.js

@@ -49,6 +49,22 @@ app.use(
 app.set("view engine", "ejs");
 app.set("views", path.join(__dirname, "views"));
 
+/* ========================
+   Route für Ajax
+======================== */
+
+app.get("/api/building/:id", (req, res) => {
+  const data = {
+    name: "Burg",
+    level: 3,
+    description: "Das Herz deiner Stadt.",
+    upgradeCost: "500 Holz, 200 Stein",
+    history: "Die Burg wurde vor Jahrhunderten erbaut.",
+  };
+
+  res.json(data);
+});
+
 /* ========================
    Body Parser
 ======================== */

public/css/launcher.css

@@ -16,7 +16,7 @@
 
 .area {
   fill: rgba(255, 255, 255, 0);
-
+  transition: 0.2s ease;
   cursor: pointer;
 
   transition: 0.25s;
@@ -31,3 +31,77 @@
 
   filter: drop-shadow(0 0 14px #6ec6ff);
 }
+
+.building-popup {
+  position: fixed;
+
+  transform: translate(-50%, -50%);
+
+  width: 420px;
+
+  background: linear-gradient(#2b2115, #1b140b);
+
+  border: 3px solid #8b6a3c;
+
+  border-radius: 10px;
+
+  box-shadow: 0 0 30px rgba(0, 0, 0, 0.8);
+
+  display: none;
+
+  color: #f3e6c5;
+
+  font-family: serif;
+
+  z-index: 1000;
+}
+
+.popup-header {
+  padding: 12px;
+
+  background: #3a2a17;
+
+  border-bottom: 2px solid #8b6a3c;
+
+  display: flex;
+
+  justify-content: space-between;
+
+  font-weight: bold;
+}
+
+.popup-tabs {
+  display: flex;
+
+  border-bottom: 2px solid #8b6a3c;
+}
+
+.popup-tabs button {
+  flex: 1;
+
+  padding: 10px;
+
+  background: transparent;
+
+  border: none;
+
+  color: #f3e6c5;
+
+  cursor: pointer;
+}
+
+.popup-tabs button.active {
+  background: #5b4325;
+}
+
+.popup-content {
+  padding: 15px;
+}
+
+.tab-content {
+  display: none;
+}
+
+.tab-content.active {
+  display: block;
+}

public/js/map-ui.js

@@ -0,0 +1,65 @@
+const popup = document.getElementById("building-popup");
+const title = document.getElementById("popup-title");
+
+document.querySelectorAll(".building").forEach((b) => {
+  b.addEventListener("click", async (e) => {
+    e.preventDefault();
+
+    const name = b.querySelector("title").textContent;
+    const url = b.getAttribute("href");
+
+    title.innerText = name;
+
+    // Position des Gebäudes
+    const rect = b.getBoundingClientRect();
+
+    popup.style.left = rect.left + rect.width / 2 + "px";
+    popup.style.top = rect.top + rect.height / 2 + "px";
+
+    popup.style.display = "block";
+
+    // AJAX Gebäudedaten laden
+    const res = await fetch("/api" + url);
+    const data = await res.json();
+
+    document.getElementById("tab-info").innerHTML = `
+      <h3>${data.name}</h3>
+      <p>Level: ${data.level}</p>
+      <p>${data.description}</p>
+    `;
+
+    document.getElementById("tab-actions").innerHTML = `
+      <button>Betreten</button>
+      <button>Handeln</button>
+    `;
+
+    document.getElementById("tab-upgrade").innerHTML = `
+      <p>Kosten: ${data.upgradeCost}</p>
+      <button>Upgrade</button>
+    `;
+
+    document.getElementById("tab-history").innerHTML = `
+      <p>${data.history}</p>
+    `;
+  });
+});
+
+// Tabs
+document.querySelectorAll(".tab").forEach((tab) => {
+  tab.addEventListener("click", () => {
+    document
+      .querySelectorAll(".tab")
+      .forEach((t) => t.classList.remove("active"));
+    tab.classList.add("active");
+
+    document
+      .querySelectorAll(".tab-content")
+      .forEach((c) => c.classList.remove("active"));
+
+    document.getElementById("tab-" + tab.dataset.tab).classList.add("active");
+  });
+});
+
+document.querySelector(".popup-close").onclick = () => {
+  popup.style.display = "none";
+};

views/launcher.ejs

@@ -157,5 +157,28 @@
         </a>
       </svg>
     </div>
+
+    <div id="building-popup" class="building-popup">
+      <div class="popup-header">
+        <span id="popup-title">Gebäude</span>
+        <span class="popup-close">✕</span>
+      </div>
+
+      <div class="popup-tabs">
+        <button class="tab active" data-tab="info">Info</button>
+        <button class="tab" data-tab="actions">Aktionen</button>
+        <button class="tab" data-tab="upgrade">Upgrade</button>
+        <button class="tab" data-tab="history">Geschichte</button>
+      </div>
+
+      <div class="popup-content">
+        <div class="tab-content active" id="tab-info"></div>
+        <div class="tab-content" id="tab-actions"></div>
+        <div class="tab-content" id="tab-upgrade"></div>
+        <div class="tab-content" id="tab-history"></div>
+      </div>
+    </div>
+
+    <script src="/js/map-ui.js"></script>
   </body>
 </html>