pop31
This commit is contained in:
parent
63b1ad036e
commit
9200a14118
@ -57,33 +57,46 @@ export async function loadWohnhaus() {
|
|||||||
|
|
||||||
`;
|
`;
|
||||||
|
|
||||||
loadInventory();
|
await loadInventory();
|
||||||
loadEquipment();
|
await loadEquipment();
|
||||||
|
|
||||||
|
initDrag();
|
||||||
|
initDrop();
|
||||||
|
initSlotDrag();
|
||||||
|
initInventoryDrop();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ================================
|
||||||
|
Equipment laden
|
||||||
|
================================ */
|
||||||
|
|
||||||
async function loadEquipment() {
|
async function loadEquipment() {
|
||||||
const res = await fetch("/api/equipment");
|
const res = await fetch("/api/equipment");
|
||||||
const equipment = await res.json();
|
const equipment = await res.json();
|
||||||
|
|
||||||
equipment.forEach((item) => {
|
equipment.forEach((item) => {
|
||||||
const slot = document.querySelector('.slot[data-slot="' + item.slot + '"]');
|
const slot = document.querySelector('.slot[data-slot="' + item.slot + '"]');
|
||||||
|
|
||||||
if (!slot) return;
|
if (!slot) return;
|
||||||
|
|
||||||
const label = slot.querySelector(".slot-label");
|
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");
|
slot.classList.add("has-item");
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ================================
|
||||||
|
Inventar laden
|
||||||
|
================================ */
|
||||||
|
|
||||||
async function loadInventory() {
|
async function loadInventory() {
|
||||||
const res = await fetch("/api/inventory");
|
const res = await fetch("/api/inventory");
|
||||||
const items = await res.json();
|
const items = await res.json();
|
||||||
@ -109,22 +122,171 @@ async function loadInventory() {
|
|||||||
});
|
});
|
||||||
|
|
||||||
grid.innerHTML = html;
|
grid.innerHTML = html;
|
||||||
|
|
||||||
initInventoryDrop();
|
|
||||||
initDrag();
|
|
||||||
initDrop();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ================================
|
||||||
|
Drag Inventar
|
||||||
|
================================ */
|
||||||
|
|
||||||
function initDrag() {
|
function initDrag() {
|
||||||
document.querySelectorAll(".inventory-slot").forEach((item) => {
|
document.querySelectorAll(".inventory-slot").forEach((item) => {
|
||||||
item.addEventListener("dragstart", (e) => {
|
item.addEventListener("dragstart", (e) => {
|
||||||
e.dataTransfer.setData("itemId", item.dataset.id);
|
e.dataTransfer.setData("itemId", item.dataset.id);
|
||||||
e.dataTransfer.setData("itemLevel", item.dataset.level);
|
e.dataTransfer.setData("itemLevel", item.dataset.level);
|
||||||
e.dataTransfer.setData("slot", item.dataset.slot);
|
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) {
|
async function saveEquipment(slot, itemId, itemLevelId) {
|
||||||
await fetch("/api/equip", {
|
await fetch("/api/equip", {
|
||||||
method: "POST",
|
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