public/css/building.css

@@ -505,13 +505,6 @@ body {
   transform: scale(1.1);
 }
 
-#inv-left:disabled,
-#inv-right:disabled {
-  opacity: 0.25;
-  cursor: not-allowed;
-  transform: none;
-}
-
 #inventory-nav {
   display: flex;
   align-items: center;

public/js/buildings/wohnhaus.js

@@ -1,7 +1,6 @@
 let inventoryPage = 0;
 const slotsPerPage = 32;
 let inventoryItems = [];
-let totalInventoryPages = 1;
 
 export async function loadWohnhaus() {
   const ui = document.querySelector(".building-ui");
@@ -63,16 +62,9 @@ export async function loadWohnhaus() {
   <button id="inv-right">&#9658;</button>
 </div>`;
 
-  // Variablen zurücksetzen beim Öffnen
-  inventoryPage = 0;
-  totalInventoryPages = 1;
-  inventoryItems = [];
-
-  // Buttons zuerst initialisieren
-  initInventoryButtons();
-
   await loadInventory();
   await loadEquipment();
+  initInventoryButtons();
   initDrag();
   initSlotDrag();
   initDrop();
@@ -84,9 +76,7 @@ export async function loadWohnhaus() {
 ================================ */
 
 function updateAvatarOverlay(slotName, iconSrc) {
-  const overlay = document.querySelector(
+  const overlay = document.querySelector(`.avatar-overlay[data-slot="${slotName}"]`);
-    `.avatar-overlay[data-slot="${slotName}"]`,
-  );
   if (!overlay) return;
 
   const img = overlay.querySelector("img");
@@ -96,9 +86,7 @@ function updateAvatarOverlay(slotName, iconSrc) {
     overlay.classList.add("visible");
   } else {
     overlay.classList.remove("visible");
-    setTimeout(() => {
+    setTimeout(() => { img.src = ""; }, 250);
-      img.src = "";
-    }, 250);
   }
 }
 
@@ -108,11 +96,7 @@ function updateAvatarOverlay(slotName, iconSrc) {
 
 async function loadInventory() {
   const res = await fetch("/api/inventory");
-  const data = await res.json();
+  inventoryItems = await res.json();
-
-  inventoryItems = data.items;
-  totalInventoryPages = data.totalPages;
-
   renderInventory();
 }
 
@@ -147,15 +131,9 @@ function renderInventory() {
 
   grid.innerHTML = html;
 
+  const totalPages = Math.max(1, Math.ceil(inventoryItems.length / slotsPerPage));
   document.getElementById("inventory-page").innerText =
-    "Seite " + (inventoryPage + 1) + " / " + totalInventoryPages;
+    "Seite " + (inventoryPage + 1) + " / " + totalPages;
-
-  // Buttons aktivieren/deaktivieren
-  const btnLeft = document.getElementById("inv-left");
-  const btnRight = document.getElementById("inv-right");
-
-  if (btnLeft) btnLeft.disabled = inventoryPage === 0;
-  if (btnRight) btnRight.disabled = inventoryPage >= totalInventoryPages - 1;
 
   initDrag();
 }
@@ -173,7 +151,8 @@ function initInventoryButtons() {
   };
 
   document.getElementById("inv-right").onclick = () => {
-    if (inventoryPage < totalInventoryPages - 1) {
+    const totalPages = Math.max(1, Math.ceil(inventoryItems.length / slotsPerPage));
+    if (inventoryPage < totalPages - 1) {
       inventoryPage++;
       renderInventory();
     }
@@ -249,10 +228,10 @@ function initDrop() {
     slot.addEventListener("drop", (e) => {
       e.preventDefault();
 
-      const itemId = e.dataTransfer.getData("itemId");
+      const itemId   = e.dataTransfer.getData("itemId");
       const itemLevel = e.dataTransfer.getData("itemLevel");
-      const itemSlot = e.dataTransfer.getData("slot");
+      const itemSlot  = e.dataTransfer.getData("slot");
-      const source = e.dataTransfer.getData("source");
+      const source    = e.dataTransfer.getData("source");
       const targetSlot = slot.dataset.slot;
 
       if (!itemSlot || itemSlot !== targetSlot) return;
@@ -260,17 +239,13 @@ function initDrop() {
       let icon;
 
       if (source === "inventory") {
-        const inventoryItem = document.querySelector(
+        const inventoryItem = document.querySelector('.inventory-slot[data-id="' + itemId + '"]');
-          '.inventory-slot[data-id="' + itemId + '"]',
-        );
         if (!inventoryItem) return;
         icon = inventoryItem.querySelector("img").src;
         inventoryItem.classList.add("empty");
         inventoryItem.innerHTML = "";
       } else {
-        const slotItem = document.querySelector(
+        const slotItem = document.querySelector('.slot[data-slot="' + itemSlot + '"] img');
-          '.slot[data-slot="' + itemSlot + '"] img',
-        );
         if (!slotItem) return;
         icon = slotItem.src;
       }
@@ -302,12 +277,12 @@ function initInventoryDrop() {
   grid.addEventListener("drop", (e) => {
     e.preventDefault();
 
-    const source = e.dataTransfer.getData("source");
+    const source   = e.dataTransfer.getData("source");
     if (source !== "slot") return;
 
-    const itemId = e.dataTransfer.getData("itemId");
+    const itemId   = e.dataTransfer.getData("itemId");
     const itemLevel = e.dataTransfer.getData("itemLevel");
-    const slotName = e.dataTransfer.getData("slot");
+    const slotName  = e.dataTransfer.getData("slot");
 
     const slot = document.querySelector('.slot[data-slot="' + slotName + '"]');
     if (!slot) return;
@@ -348,4 +323,4 @@ async function saveEquipment(slot, itemId, itemLevelId) {
     headers: { "Content-Type": "application/json" },
     body: JSON.stringify({ slot, itemId, itemLevelId }),
   });
-}
+}

routes/inventory.js

@@ -24,16 +24,7 @@ WHERE user_inventory.user_id=?
       [userId],
     );
 
-    // Gekaufte Seiten laden
+    res.json(items);
-    const [ownedPages] = await db.query(
-      `SELECT COUNT(*) as total FROM user_inventory_pages WHERE user_id = ?`,
-      [userId],
-    );
-
-    // Seite 1 ist immer kostenlos
-    const totalPages = Math.max(1, ownedPages[0].total);
-
-    res.json({ items, totalPages });
   } catch (err) {
     console.error("Inventory Fehler:", err);
     res.status(500).json({ error: "DB Fehler" });