pop31
This commit is contained in:
parent
63b1ad036e
commit
9200a14118
@ -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 = `<img src="${item.icon}" draggable="true">`;
|
||||
slot.innerHTML = `
|
||||
<img src="${item.icon}"
|
||||
draggable="true"
|
||||
data-id="${item.item_id}"
|
||||
data-level="${item.item_level_id}">
|
||||
`;
|
||||
|
||||
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 += `
|
||||
<div class="inventory-slot"
|
||||
data-slot="${item.equip_slot || ""}"
|
||||
data-id="${item.id}"
|
||||
data-level="${item.level}"
|
||||
draggable="true">
|
||||
<div class="inventory-slot"
|
||||
data-slot="${item.equip_slot || ""}"
|
||||
data-id="${item.id}"
|
||||
data-level="${item.level}"
|
||||
draggable="true">
|
||||
|
||||
<img src="${icon}">
|
||||
<img src="${icon}">
|
||||
|
||||
</div>
|
||||
`;
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
|
||||
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 = `<img src="${existing.src}">`;
|
||||
|
||||
grid.appendChild(newItem);
|
||||
}
|
||||
|
||||
/* neues Item setzen */
|
||||
|
||||
const label = slot.querySelector(".slot-label");
|
||||
|
||||
slot.innerHTML = `
|
||||
<img src="${icon}"
|
||||
draggable="true"
|
||||
data-id="${itemId}"
|
||||
data-level="${itemLevel}">
|
||||
`;
|
||||
|
||||
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 = `<img src="${img.src}">`;
|
||||
|
||||
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 = `<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}"
|
||||
draggable="true"
|
||||
data-id="${itemId}"
|
||||
data-level="${itemLevel}">
|
||||
`;
|
||||
|
||||
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 = `<img src="${icon}">`;
|
||||
|
||||
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();
|
||||
});
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user