AI8

public/css/building.css

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

routes/inventory.js

@@ -24,7 +24,16 @@ WHERE user_inventory.user_id=?
       [userId],
     );
 
-    res.json(items);
+    // Gekaufte Seiten laden
+    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" });