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 = `
`;
+ newSlot.setAttribute("draggable", "true");
inventory.appendChild(newSlot);
+
+ initDrag();
}
/* Neues Item setzen */
const label = slot.querySelector(".slot-label");
- slot.innerHTML = `
`;
+ slot.innerHTML = `
`;
+
+ 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 = `
`;
+
+ grid.appendChild(newItem);
+
+ initDrag();
+ });
+}