popup13

public/css/building.css

@@ -286,3 +286,50 @@ body {
   color: white;
   display: none;
 }
+
+#character-ui {
+  display: flex;
+  justify-content: center;
+  gap: 40px;
+  margin-bottom: 20px;
+}
+
+.equip-left,
+.equip-right {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.equip-slot {
+  width: 64px;
+  height: 64px;
+  border: 2px solid #8b6f3d;
+  background: #111;
+}
+
+.equip-slot img {
+  width: 100%;
+}
+
+.character img {
+  height: 260px;
+}
+
+#inventory-grid {
+  display: grid;
+  grid-template-columns: repeat(8, 64px);
+  gap: 6px;
+}
+
+.inventory-slot {
+  width: 64px;
+  height: 64px;
+  border: 1px solid #555;
+  background: #1b1b1b;
+  cursor: pointer;
+}
+
+.inventory-slot img {
+  width: 100%;
+}

public/js/buildings/wohnhaus.js

@@ -1,16 +1,35 @@
-export async function loadWohnhaus(data) {
+export async function loadWohnhaus() {
   const ui = document.querySelector(".building-ui");
 
   ui.innerHTML = `
-<div id="wohnhaus-ui">
+
+<div id="character-ui">
+
+<div class="equip-left">
+<div class="equip-slot" data-slot="helmet"></div>
+<div class="equip-slot" data-slot="shoulder"></div>
+<div class="equip-slot" data-slot="gloves"></div>
+<div class="equip-slot" data-slot="belt"></div>
+<div class="equip-slot" data-slot="boots"></div>
+</div>
+
+<div class="character">
+<img src="/images/avatar.png">
+</div>
+
+<div class="equip-right">
+<div class="equip-slot" data-slot="amulet"></div>
+<div class="equip-slot" data-slot="weapon"></div>
+<div class="equip-slot" data-slot="shield"></div>
+<div class="equip-slot" data-slot="ring"></div>
+</div>
+
+</div>
 
 <h3>Inventar</h3>
 
 <div id="inventory-grid"></div>
 
-</div>
-
-<div id="item-tooltip"></div>
 `;
 
   loadInventory();
@@ -24,48 +43,34 @@ async function loadInventory() {
 
   let html = "";
 
-  for (let i = 0; i < 30; i++) {
-    const item = items[i];
+  items.forEach((item) => {
+    const icon = item.icon || "/images/items/default.png";
 
-    if (item) {
-      const icon = item.icon || "/images/items/default.png";
-
-      html += `
-<div class="inventory-slot" data-name="${item.name}">
+    html += `
+<div class="inventory-slot"
+data-slot="${item.equip_slot || ""}">
 <img src="${icon}">
-<div class="item-amount">${item.amount || ""}</div>
 </div>
 `;
-    } else {
-      html += `<div class="inventory-slot"></div>`;
-    }
-  }
+  });
 
   grid.innerHTML = html;
 
-  initTooltips();
+  initEquip();
 }
 
-function initTooltips() {
-  const tooltip = document.getElementById("item-tooltip");
+function initEquip() {
+  document.querySelectorAll(".inventory-slot").forEach((item) => {
+    item.addEventListener("click", () => {
+      const slot = item.dataset.slot;
 
-  document.querySelectorAll(".inventory-slot").forEach((slot) => {
-    slot.addEventListener("mouseenter", () => {
-      const name = slot.dataset.name;
+      const target = document.querySelector(
+        '.equip-slot[data-slot="' + slot + '"]',
+      );
 
-      if (!name) return;
+      if (!target) return;
 
-      tooltip.innerHTML = `<strong>${name}</strong>`;
-      tooltip.style.display = "block";
-    });
-
-    slot.addEventListener("mousemove", (e) => {
-      tooltip.style.left = e.pageX + 10 + "px";
-      tooltip.style.top = e.pageY + 10 + "px";
-    });
-
-    slot.addEventListener("mouseleave", () => {
-      tooltip.style.display = "none";
+      target.innerHTML = item.innerHTML;
     });
   });
 }

public/js/map-ui.js

@@ -65,14 +65,23 @@ document.querySelectorAll(".building").forEach((building) => {
       `;
 
       const actionsTab = document.getElementById("tab-actions");
+      const tabs = document.querySelector(".popup-tabs");
 
-      actionsTab.innerHTML = ` <button>Betreten</button> `;
+      // Standard: Tabs anzeigen
+      tabs.style.display = "flex";
 
-      // Prüfen ob das Gebäude ein eigenes Modul hat
+      actionsTab.innerHTML = `<button>Betreten</button>`;
+
+      // Prüfen ob Gebäude ein eigenes Modul hat
       if (buildingModules[Number(data.type)]) {
+        // NUR beim Wohnhaus Tabs ausblenden
+        if (Number(data.type) === 11) {
+          tabs.style.display = "none";
+        }
+
         actionsTab.innerHTML = `
-          <div class="building-ui"></div>
-        `;
+    <div class="building-ui"></div>
+  `;
 
         // Modul starten
         buildingModules[data.type](data);