From 0745a27a1503cd919e9787c45c178a7b921713f0 Mon Sep 17 00:00:00 2001
From: Cay <cay@joksch.ch>
Date: Fri, 13 Mar 2026 18:08:07 +0000
Subject: [PATCH] pop28

---
 public/css/building.css         |  5 +++
 public/js/buildings/wohnhaus.js | 79 ++++++++++++++++++++-------------
 2 files changed, 54 insertions(+), 30 deletions(-)

diff --git a/public/css/building.css b/public/css/building.css
index 8e25e28..21ef0f5 100644
--- a/public/css/building.css
+++ b/public/css/building.css
@@ -279,6 +279,11 @@ body {
   display: none;
 }
 
+.slot.drag-over {
+  outline: 3px solid gold;
+  box-shadow: 0 0 10px gold;
+}
+
 .slot:hover {
   filter: brightness(1.3);
 }
diff --git a/public/js/buildings/wohnhaus.js b/public/js/buildings/wohnhaus.js
index 3aaabba..84f0d55 100644
--- a/public/js/buildings/wohnhaus.js
+++ b/public/js/buildings/wohnhaus.js
@@ -108,37 +108,11 @@ async function loadInventory() {
 
   grid.innerHTML = html;
 
+  initInventoryDrop();
   initDrag();
   initDrop();
 }
 
-function initEquip() {
-  let draggedItem = null;
-
-  document.querySelectorAll(".inventory-slot").forEach((item) => {
-    item.addEventListener("dragstart", () => {
-      draggedItem = item;
-    });
-  });
-
-  document.querySelectorAll(".slot").forEach((slot) => {
-    slot.addEventListener("dragover", (e) => {
-      e.preventDefault();
-    });
-
-    slot.addEventListener("drop", (e) => {
-      e.preventDefault();
-
-      const itemSlot = draggedItem.dataset.slot;
-      const targetSlot = slot.dataset.slot;
-
-      if (itemSlot !== targetSlot) return;
-
-      slot.innerHTML = draggedItem.innerHTML;
-    });
-  });
-}
-
 function initDrag() {
   document.querySelectorAll(".inventory-slot").forEach((item) => {
     item.addEventListener("dragstart", (e) => {
@@ -184,10 +158,10 @@ function initDrop() {
         '.inventory-slot[data-id="' + itemId + '"]',
       );
 
-      item.remove();
-
       const icon = item.querySelector("img").src;
 
+      item.remove();
+
       /* Wenn Slot schon Item hat */
 
       const existingItem = slot.querySelector("img");
@@ -200,15 +174,20 @@ function initDrop() {
         newSlot.classList.add("inventory-slot");
 
         newSlot.innerHTML = `<img src="${existingItem.src}">`;
+        newSlot.setAttribute("draggable", "true");
 
         inventory.appendChild(newSlot);
+
+        initDrag();
       }
 
       /* Neues Item setzen */
 
       const label = slot.querySelector(".slot-label");
 
-      slot.innerHTML = `<img src="${icon}">`;
+      slot.innerHTML = `<img src="${icon}" draggable="true">`;
+
+      initSlotDrag();
 
       if (label) slot.appendChild(label);
 
@@ -218,3 +197,43 @@ function initDrop() {
     });
   });
 }
+
+function initSlotDrag() {
+  document.querySelectorAll(".slot").forEach((slot) => {
+    slot.addEventListener("dragstart", (e) => {
+      const img = slot.querySelector("img");
+
+      if (!img) return;
+
+      e.dataTransfer.setData("icon", img.src);
+      e.dataTransfer.setData("fromSlot", slot.dataset.slot);
+    });
+  });
+}
+
+function initInventoryDrop() {
+  const grid = document.getElementById("inventory-grid");
+
+  grid.addEventListener("dragover", (e) => {
+    e.preventDefault();
+  });
+
+  grid.addEventListener("drop", (e) => {
+    e.preventDefault();
+
+    const icon = e.dataTransfer.getData("icon");
+
+    if (!icon) return;
+
+    const newItem = document.createElement("div");
+
+    newItem.classList.add("inventory-slot");
+    newItem.setAttribute("draggable", "true");
+
+    newItem.innerHTML = `<img src="${icon}">`;
+
+    grid.appendChild(newItem);
+
+    initDrag();
+  });
+}