From 9200a14118cb3c2cee533b90d6673d1a774a64ae Mon Sep 17 00:00:00 2001 From: Cay Date: Fri, 13 Mar 2026 18:19:42 +0000 Subject: [PATCH] pop31 --- public/js/buildings/wohnhaus.js | 332 ++++++++++++++++++-------------- 1 file changed, 183 insertions(+), 149 deletions(-) diff --git a/public/js/buildings/wohnhaus.js b/public/js/buildings/wohnhaus.js index e250549..5645da4 100644 --- a/public/js/buildings/wohnhaus.js +++ b/public/js/buildings/wohnhaus.js @@ -57,33 +57,46 @@ export async function loadWohnhaus() { `; - loadInventory(); - loadEquipment(); + await loadInventory(); + await loadEquipment(); + + initDrag(); + initDrop(); + initSlotDrag(); + initInventoryDrop(); } +/* ================================ + Equipment laden +================================ */ + async function loadEquipment() { const res = await fetch("/api/equipment"); const equipment = await res.json(); equipment.forEach((item) => { const slot = document.querySelector('.slot[data-slot="' + item.slot + '"]'); - if (!slot) return; const label = slot.querySelector(".slot-label"); - slot.innerHTML = ``; + slot.innerHTML = ` + + `; - initSlotDrag(); - - if (label) { - slot.appendChild(label); - } + 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(); @@ -96,35 +109,184 @@ async function loadInventory() { const icon = item.icon || "/images/items/default.png"; html += ` -
+
- + -
- `; +
+`; }); grid.innerHTML = html; - - initInventoryDrop(); - initDrag(); - initDrop(); } +/* ================================ + Drag Inventar +================================ */ + function initDrag() { document.querySelectorAll(".inventory-slot").forEach((item) => { item.addEventListener("dragstart", (e) => { e.dataTransfer.setData("itemId", item.dataset.id); e.dataTransfer.setData("itemLevel", item.dataset.level); e.dataTransfer.setData("slot", item.dataset.slot); + e.dataTransfer.setData("source", "inventory"); }); }); } +/* ================================ + Drag Slot +================================ */ + +function initSlotDrag() { + document.querySelectorAll(".slot img").forEach((img) => { + img.addEventListener("dragstart", (e) => { + const slot = img.closest(".slot"); + + e.dataTransfer.setData("itemId", img.dataset.id); + e.dataTransfer.setData("itemLevel", img.dataset.level); + e.dataTransfer.setData("slot", slot.dataset.slot); + e.dataTransfer.setData("source", "slot"); + }); + }); +} + +/* ================================ + Slot Drop +================================ */ + +function initDrop() { + document.querySelectorAll(".slot").forEach((slot) => { + slot.addEventListener("dragover", (e) => e.preventDefault()); + + slot.addEventListener("drop", (e) => { + e.preventDefault(); + + 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 targetSlot = slot.dataset.slot; + + if (!itemSlot || itemSlot !== targetSlot) return; + + const icon = + source === "inventory" + ? document.querySelector( + '.inventory-slot[data-id="' + itemId + '"] img', + ).src + : document.querySelector('.slot[data-slot="' + itemSlot + '"] img') + .src; + + /* Inventar Item entfernen */ + + if (source === "inventory") { + const inventoryItem = document.querySelector( + '.inventory-slot[data-id="' + itemId + '"]', + ); + if (inventoryItem) inventoryItem.remove(); + } + + /* vorhandenes Item zurück ins Inventar */ + + const existing = slot.querySelector("img"); + + if (existing) { + const grid = document.getElementById("inventory-grid"); + + const newItem = document.createElement("div"); + newItem.classList.add("inventory-slot"); + newItem.setAttribute("draggable", "true"); + + newItem.dataset.id = existing.dataset.id; + newItem.dataset.level = existing.dataset.level; + newItem.dataset.slot = slot.dataset.slot; + + newItem.innerHTML = ``; + + grid.appendChild(newItem); + } + + /* neues Item setzen */ + + const label = slot.querySelector(".slot-label"); + + slot.innerHTML = ` + +`; + + if (label) slot.appendChild(label); + + slot.classList.add("has-item"); + + initDrag(); + initSlotDrag(); + + saveEquipment(targetSlot, itemId, itemLevel); + }); + }); +} + +/* ================================ + Drop ins Inventar +================================ */ + +function initInventoryDrop() { + const grid = document.getElementById("inventory-grid"); + + grid.addEventListener("dragover", (e) => e.preventDefault()); + + grid.addEventListener("drop", (e) => { + e.preventDefault(); + + const itemId = e.dataTransfer.getData("itemId"); + const itemLevel = e.dataTransfer.getData("itemLevel"); + const slotName = e.dataTransfer.getData("slot"); + const source = e.dataTransfer.getData("source"); + + if (source !== "slot") return; + + const slot = document.querySelector('.slot[data-slot="' + slotName + '"]'); + const img = slot.querySelector("img"); + if (!img) return; + + const newItem = document.createElement("div"); + + newItem.classList.add("inventory-slot"); + newItem.setAttribute("draggable", "true"); + + newItem.dataset.id = itemId; + newItem.dataset.level = itemLevel; + newItem.dataset.slot = slotName; + + newItem.innerHTML = ``; + + grid.appendChild(newItem); + + const label = slot.querySelector(".slot-label"); + + slot.innerHTML = ""; + if (label) slot.appendChild(label); + + slot.classList.remove("has-item"); + + initDrag(); + }); +} + +/* ================================ + DB speichern +================================ */ + async function saveEquipment(slot, itemId, itemLevelId) { await fetch("/api/equip", { method: "POST", @@ -138,131 +300,3 @@ async function saveEquipment(slot, itemId, itemLevelId) { }), }); } - -function initDrop() { - document.querySelectorAll(".slot").forEach((slot) => { - slot.addEventListener("dragover", (e) => { - e.preventDefault(); - }); - - slot.addEventListener("drop", (e) => { - e.preventDefault(); - - const itemId = e.dataTransfer.getData("itemId"); - const itemLevel = e.dataTransfer.getData("itemLevel"); - const itemSlot = e.dataTransfer.getData("slot"); - - const targetSlot = slot.dataset.slot; - - if (!itemSlot || itemSlot !== targetSlot) return; - - const item = document.querySelector( - '.inventory-slot[data-id="' + itemId + '"]', - ); - - const icon = item.querySelector("img").src; - - item.remove(); - - /* Wenn Slot schon Item hat */ - - const existingItem = slot.querySelector("img"); - - if (existingItem) { - const inventory = document.getElementById("inventory-grid"); - - const newSlot = document.createElement("div"); - - 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 = ` - - `; - - initSlotDrag(); - - if (label) slot.appendChild(label); - - slot.classList.add("has-item"); - - saveEquipment(targetSlot, itemId, itemLevel); - }); - }); -} - -function initSlotDrag() { - document.querySelectorAll(".slot img").forEach((img) => { - img.addEventListener("dragstart", (e) => { - const slot = img.closest(".slot"); - - e.dataTransfer.setData("itemId", img.dataset.id); - e.dataTransfer.setData("itemLevel", img.dataset.level); - e.dataTransfer.setData("slot", slot.dataset.slot); - }); - }); -} - -function initInventoryDrop() { - const grid = document.getElementById("inventory-grid"); - - grid.addEventListener("dragover", (e) => { - e.preventDefault(); - }); - - grid.addEventListener("drop", (e) => { - e.preventDefault(); - - const itemId = e.dataTransfer.getData("itemId"); - const itemLevel = e.dataTransfer.getData("itemLevel"); - const slot = e.dataTransfer.getData("slot"); - - if (!itemId) return; - - const icon = document.querySelector( - '.slot[data-slot="' + slot + '"] img', - ).src; - - const newItem = document.createElement("div"); - - newItem.classList.add("inventory-slot"); - newItem.setAttribute("draggable", "true"); - - newItem.dataset.id = itemId; - newItem.dataset.level = itemLevel; - - newItem.innerHTML = ``; - - grid.appendChild(newItem); - - /* Slot leeren */ - - const equipSlot = document.querySelector('.slot[data-slot="' + slot + '"]'); - - const label = equipSlot.querySelector(".slot-label"); - - equipSlot.innerHTML = ""; - - if (label) { - equipSlot.appendChild(label); - } - - equipSlot.classList.remove("has-item"); - - initDrag(); - }); -}