pop48

public/css/building.css

@@ -396,11 +396,33 @@ body {
 }
 
 #inventory-wrapper {
-  width: 640px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+}
 
-  margin: 0 auto;
+#inventory-page {
+  text-align: center;
+  margin-top: 6px;
+  font-size: 16px;
+  font-weight: bold;
+}
 
-  max-height: 340px;
+#inv-left,
+#inv-right {
+  width: 40px;
+  height: 40px;
+
+  font-size: 22px;
+
+  cursor: pointer;
+
+  background: #6b4b2a;
+  color: white;
+
+  border: none;
+  border-radius: 4px;
 }
 
 .inventory-slot {

public/js/buildings/wohnhaus.js

@@ -1,3 +1,7 @@
+let inventoryPage = 0;
+const slotsPerPage = 32;
+let inventoryItems = [];
+
 export async function loadWohnhaus() {
   const ui = document.querySelector(".building-ui");
 
@@ -54,14 +58,24 @@ export async function loadWohnhaus() {
 <h3>Inventar</h3>
 
 <div id="inventory-wrapper">
+
+<button id="inv-left">◀</button>
+
 <div id="inventory-grid"></div>
+
+<button id="inv-right">▶</button>
+
 </div>
 
+<div id="inventory-page"></div>
+
 `;
 
   await loadInventory();
   await loadEquipment();
 
+  initInventoryButtons();
+
   initDrag();
   initSlotDrag();
   initDrop();
@@ -69,66 +83,45 @@ export async function loadWohnhaus() {
 }
 
 /* ================================
-   Equipment laden
+   INVENTAR LADEN
-================================ */
-
-async function loadEquipment() {
-  const res = await fetch("/api/equipment");
-  const equipment = await res.json();
-
-  equipment.forEach((item) => {
-    if (!item.item_id) return; // ← WICHTIG
-
-    const slot = document.querySelector('.slot[data-slot="' + item.slot + '"]');
-    if (!slot) return;
-
-    const label = slot.querySelector(".slot-label");
-
-    slot.innerHTML = `
-      <img src="${item.icon}"
-      draggable="true"
-      data-id="${item.item_id}"
-      data-level="${item.item_level_id}">
-      `;
-
-    if (label) slot.appendChild(label);
-
-    slot.classList.add("has-item");
-  });
-}
-
-/* ================================
-   Inventar laden
 ================================ */
 
 async function loadInventory() {
   const res = await fetch("/api/inventory");
-  const items = await res.json();
+  inventoryItems = await res.json();
 
+  renderInventory();
+}
+
+/* ================================
+   INVENTAR RENDERN
+================================ */
+
+function renderInventory() {
   const grid = document.getElementById("inventory-grid");
 
   let html = "";
 
-  /* feste 32 slots erzeugen */
+  const start = inventoryPage * slotsPerPage;
+  const end = start + slotsPerPage;
 
-  const totalSlots = Math.max(32, items.length);
+  for (let i = start; i < end; i++) {
-  for (let i = 0; i < totalSlots; i++) {
+    const item = inventoryItems[i];
-    const item = items[i];
 
     if (item) {
       const icon = item.icon || "/images/items/default.png";
 
       html += `
-      <div class="inventory-slot"
+<div class="inventory-slot"
-      data-slot="${item.equip_slot || ""}"
+data-slot="${item.equip_slot || ""}"
-      data-id="${item.id}"
+data-id="${item.id}"
-      data-level="${item.level}"
+data-level="${item.level}"
-      draggable="true">
+draggable="true">
 
-      <img src="${icon}">
+<img src="${icon}">
 
-      </div>
+</div>
-      `;
+`;
     } else {
       html += `
 <div class="inventory-slot empty"></div>
@@ -137,10 +130,67 @@ async function loadInventory() {
   }
 
   grid.innerHTML = html;
+
+  const totalPages = Math.max(
+    1,
+    Math.ceil(inventoryItems.length / slotsPerPage),
+  );
+
+  document.getElementById("inventory-page").innerText =
+    "Seite " + (inventoryPage + 1) + " / " + totalPages;
+
+  initDrag();
 }
 
 /* ================================
-   Drag Inventar
+   INVENTAR BUTTONS
+================================ */
+
+function initInventoryButtons() {
+  document.getElementById("inv-left").onclick = () => {
+    if (inventoryPage > 0) {
+      inventoryPage--;
+      renderInventory();
+    }
+  };
+
+  document.getElementById("inv-right").onclick = () => {
+    inventoryPage++;
+    renderInventory();
+  };
+}
+
+/* ================================
+   EQUIPMENT LADEN
+================================ */
+
+async function loadEquipment() {
+  const res = await fetch("/api/equipment");
+  const equipment = await res.json();
+
+  equipment.forEach((item) => {
+    if (!item.item_id) return;
+
+    const slot = document.querySelector('.slot[data-slot="' + item.slot + '"]');
+    if (!slot) return;
+
+    const label = slot.querySelector(".slot-label");
+
+    slot.innerHTML = `
+<img src="${item.icon}"
+draggable="true"
+data-id="${item.item_id}"
+data-level="${item.item_level_id}">
+`;
+
+    if (label) slot.appendChild(label);
+
+    slot.classList.add("has-item");
+  });
+}
+
+/* ================================
+   DRAG INVENTAR
 ================================ */
 
 function initDrag() {
@@ -155,7 +205,7 @@ function initDrag() {
 }
 
 /* ================================
-   Drag Slot
+   SLOT DRAG
 ================================ */
 
 function initSlotDrag() {
@@ -174,7 +224,7 @@ function initSlotDrag() {
 }
 
 /* ================================
-   Slot Drop
+   SLOT DROP
 ================================ */
 
 function initDrop() {
@@ -193,8 +243,6 @@ function initDrop() {
 
       if (!itemSlot || itemSlot !== targetSlot) return;
 
-      /* Icon bestimmen */
-
       let icon;
 
       if (source === "inventory") {
@@ -206,48 +254,17 @@ function initDrop() {
 
         icon = inventoryItem.querySelector("img").src;
 
-        /* Slot leeren statt löschen */
-
         inventoryItem.classList.add("empty");
-
-        inventoryItem.removeAttribute("data-id");
-        inventoryItem.removeAttribute("data-level");
-        inventoryItem.removeAttribute("data-slot");
-
         inventoryItem.innerHTML = "";
       } else {
         const slotItem = document.querySelector(
           '.slot[data-slot="' + itemSlot + '"] img',
         );
-
         if (!slotItem) return;
 
         icon = slotItem.src;
       }
 
-      /* vorhandenes Item zurück ins Inventar */
-
-      const existing = slot.querySelector("img");
-
-      if (existing) {
-        const grid = document.getElementById("inventory-grid");
-
-        const emptySlot = grid.querySelector(".inventory-slot.empty");
-
-        if (emptySlot) {
-          emptySlot.classList.remove("empty");
-
-          emptySlot.dataset.id = existing.dataset.id;
-          emptySlot.dataset.level = existing.dataset.level;
-          emptySlot.dataset.slot = existing.dataset.slot;
-          emptySlot.setAttribute("draggable", "true");
-
-          emptySlot.innerHTML = `<img src="${existing.src}">`;
-        }
-      }
-
-      /* neues Item setzen */
-
       const label = slot.querySelector(".slot-label");
 
       slot.innerHTML = `
@@ -270,15 +287,13 @@ data-level="${itemLevel}">
 }
 
 /* ================================
-   Drop ins Inventar
+   INVENTAR DROP
 ================================ */
 
 function initInventoryDrop() {
   const grid = document.getElementById("inventory-grid");
 
-  grid.addEventListener("dragover", (e) => {
+  grid.addEventListener("dragover", (e) => e.preventDefault());
-    e.preventDefault();
-  });
 
   grid.addEventListener("drop", (e) => {
     e.preventDefault();
@@ -299,65 +314,37 @@ function initInventoryDrop() {
 
     if (!img) return;
 
-    /* neues Inventar Item */
+    inventoryItems.push({
+      id: itemId,
+      level: itemLevel,
+      equip_slot: slotName,
+      icon: img.src,
+    });
 
-    const newItem = document.createElement("div");
+    renderInventory();
-
-    newItem.classList.add("inventory-slot");
-    newItem.setAttribute("draggable", "true");
-
-    newItem.dataset.id = itemId;
-    newItem.dataset.level = itemLevel;
-    newItem.dataset.slot = slotName;
-
-    newItem.innerHTML = `<img src="${img.src}">`;
-
-    const emptySlot = grid.querySelector(".inventory-slot.empty");
-
-    if (emptySlot) {
-      emptySlot.classList.remove("empty");
-
-      emptySlot.dataset.id = itemId;
-      emptySlot.dataset.level = itemLevel;
-      emptySlot.dataset.slot = slotName;
-      emptySlot.setAttribute("draggable", "true");
-
-      emptySlot.innerHTML = `<img src="${img.src}">`;
-    }
-
-    initDrag();
-
-    /* Slot leeren */
 
     const label = slot.querySelector(".slot-label");
 
     slot.innerHTML = "";
-
+    if (label) slot.appendChild(label);
-    if (label) {
-      slot.appendChild(label);
-    }
 
     slot.classList.remove("has-item");
 
     saveEquipment(slotName, null, null);
 
-    /* Drag wieder aktivieren */
-
     initDrag();
     initSlotDrag();
   });
 }
 
 /* ================================
-   DB speichern
+   DB SPEICHERN
 ================================ */
 
 async function saveEquipment(slot, itemId, itemLevelId) {
   await fetch("/api/equip", {
     method: "POST",
-    headers: {
+    headers: { "Content-Type": "application/json" },
-      "Content-Type": "application/json",
-    },
     body: JSON.stringify({
       slot: slot,
       itemId: itemId,