popup 12

public/css/building.css

@@ -247,3 +247,42 @@ body {
 #map-tooltip strong {
   color: #ffd700;
 }
+
+#inventory-grid {
+  display: grid;
+  grid-template-columns: repeat(6, 64px);
+  gap: 6px;
+  margin-top: 10px;
+}
+
+.inventory-slot {
+  width: 64px;
+  height: 64px;
+  background: #1b1b1b;
+  border: 1px solid #8b6f3d;
+  position: relative;
+  box-shadow: 0 0 4px #000 inset;
+}
+
+.inventory-slot img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.item-amount {
+  position: absolute;
+  bottom: 2px;
+  right: 4px;
+  font-size: 12px;
+  color: white;
+}
+
+#item-tooltip {
+  position: absolute;
+  background: #111;
+  border: 1px solid #555;
+  padding: 6px;
+  color: white;
+  display: none;
+}

public/js/buildings/wohnhaus.js

@@ -1,54 +1,71 @@
 export async function loadWohnhaus(data) {
-  const container = document.querySelector(".building-ui");
+  const ui = document.querySelector(".building-ui");
 
-  container.innerHTML = `
-    <div id="wohnhaus-ui">
+  ui.innerHTML = `
+<div id="wohnhaus-ui">
 
-      <div id="avatar"></div>
+<h3>Inventar</h3>
 
-      <div id="inventory"></div>
+<div id="inventory-grid"></div>
 
-    </div>
-  `;
+</div>
+
+<div id="item-tooltip"></div>
+`;
 
-  loadAvatar();
   loadInventory();
 }
 
-async function loadAvatar() {
-  const res = await fetch("/api/avatar");
-  const avatar = await res.json();
-
-  let html = `<div class="avatar">`;
-
-  avatar.forEach((i) => {
-    html += `<img src="${i.icon}" class="${i.slot}">`;
-  });
-
-  html += "</div>";
-
-  document.getElementById("avatar").innerHTML = html;
-}
-
 async function loadInventory() {
   const res = await fetch("/api/inventory");
   const items = await res.json();
 
+  const grid = document.getElementById("inventory-grid");
+
   let html = "";
-  console.log(items);
-  items.forEach((item) => {
-    const icon = item.icon ? item.icon : "/images/items/default.png";
-    const name = item.name ? item.name : "Unbekannt";
 
-    html += `
-          <div class="inventory-item"
-          data-id="${item.id}"
-          data-level="${item.level}">
-          <img src="${icon}">
-          <p>${name}</p>
-          </div>
-          `;
-  });
+  for (let i = 0; i < 30; i++) {
+    const item = items[i];
 
-  document.getElementById("inventory").innerHTML = html;
+    if (item) {
+      const icon = item.icon || "/images/items/default.png";
+
+      html += `
+<div class="inventory-slot" data-name="${item.name}">
+<img src="${icon}">
+<div class="item-amount">${item.amount || ""}</div>
+</div>
+`;
+    } else {
+      html += `<div class="inventory-slot"></div>`;
+    }
+  }
+
+  grid.innerHTML = html;
+
+  initTooltips();
+}
+
+function initTooltips() {
+  const tooltip = document.getElementById("item-tooltip");
+
+  document.querySelectorAll(".inventory-slot").forEach((slot) => {
+    slot.addEventListener("mouseenter", () => {
+      const name = slot.dataset.name;
+
+      if (!name) 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";
+    });
+  });
 }