erg

public/css/building.css

@@ -34,8 +34,8 @@ body {
 .building-popup {
   position: fixed;
   left: 50%;
-  top: 50px;
+  top: 50%;
-  transform: translateX(-50%);
+  transform: translate(-50%, -50%);
 
   width: 900px;
   max-width: 90vw;
@@ -713,12 +713,12 @@ body {
 @keyframes popupFade {
   from {
     opacity: 0;
-    transform: translateX(-50%) translateY(-20px);
+    transform: translate(-50%, -40%);
   }
 
   to {
     opacity: 1;
-    transform: translateX(-50%) translateY(0);
+    transform: translate(-50%, -50%);
   }
 }
 

public/js/map-ui.js

@@ -9,15 +9,65 @@ const tooltip = document.getElementById("map-tooltip");
 const tooltipCache = {};
 
 const buildingModules = {
-  11: loadWohnhaus, // Tabs ausblenden, eigenes UI
+  11: loadWohnhaus,
-  12: loadSchwarzmarkt, // Tabs ausblenden, eigenes UI
+  12: loadSchwarzmarkt,
-  10: loadMine, // Tabs bleiben sichtbar, nur Aktionen-Tab befüllen
+  10: loadMine,
-  1: loadArena, //Tab für die PVP Arena
+  1: loadArena,
 };
 
-// Gebäude die ihre eigenen Tabs behalten sollen
 const keepTabsVisible = new Set([10]);
 
+/* ================================
+   Popup verschiebbar machen
+================================ */
+
+(function makeDraggable() {
+  const header = document.querySelector(".popup-header");
+  if (!header) return;
+
+  let isDragging = false;
+  let startX, startY, startLeft, startTop;
+
+  header.style.cursor = "grab";
+
+  header.addEventListener("mousedown", (e) => {
+    // Schließen-Button nicht draggable
+    if (e.target.classList.contains("popup-close")) return;
+
+    isDragging = true;
+    header.style.cursor = "grabbing";
+
+    const rect = popup.getBoundingClientRect();
+    startX = e.clientX;
+    startY = e.clientY;
+    startLeft = rect.left;
+    startTop = rect.top;
+
+    // transform zurücksetzen, auf konkrete px-Werte umstellen
+    popup.style.transform = "none";
+    popup.style.left = startLeft + "px";
+    popup.style.top = startTop + "px";
+
+    e.preventDefault();
+  });
+
+  document.addEventListener("mousemove", (e) => {
+    if (!isDragging) return;
+
+    const dx = e.clientX - startX;
+    const dy = e.clientY - startY;
+
+    popup.style.left = (startLeft + dx) + "px";
+    popup.style.top  = (startTop  + dy) + "px";
+  });
+
+  document.addEventListener("mouseup", () => {
+    if (!isDragging) return;
+    isDragging = false;
+    header.style.cursor = "grab";
+  });
+})();
+
 /* ================================
    Tabs zurücksetzen
 ================================ */
@@ -52,6 +102,7 @@ document.querySelectorAll(".building").forEach((building) => {
 
       popup.style.left = "50%";
       popup.style.top = "50%";
+      popup.style.transform = "translate(-50%, -50%)";
       popup.classList.add("active");
 
       resetTabs();