pop34

public/css/building.css

@@ -381,13 +381,14 @@ body {
   display: grid;
 
   grid-template-columns: repeat(8, 70px);
-  grid-auto-rows: 70px;
+  grid-template-rows: repeat(4, 70px);
 
   gap: 8px;
 
-  justify-content: center;
+  max-height: 320px;
+  overflow-y: auto;
 
-  margin-top: 30px;
+  padding: 10px;
 }
 
 .inventory-slot {

public/js/buildings/wohnhaus.js

@@ -105,21 +105,31 @@ async function loadInventory() {
 
   let html = "";
 
-  items.forEach((item) => {
+  /* feste 32 slots erzeugen */
-    const icon = item.icon || "/images/items/default.png";
 
-    html += `
+  for (let i = 0; i < 32; i++) {
-<div class="inventory-slot"
+    const item = items[i];
-data-slot="${item.equip_slot || ""}"
-data-id="${item.id}"
-data-level="${item.level}"
-draggable="true">
 
-<img src="${icon}">
+    if (item) {
+      const icon = item.icon || "/images/items/default.png";
 
-</div>
+      html += `
+      <div class="inventory-slot"
+      data-slot="${item.equip_slot || ""}"
+      data-id="${item.id}"
+      data-level="${item.level}"
+      draggable="true">
+
+      <img src="${icon}">
+
+      </div>
+      `;
+    } else {
+      html += `
+<div class="inventory-slot empty"></div>
 `;
-  });
+    }
+  }
 
   grid.innerHTML = html;
 }