156 lines
3.4 KiB
JavaScript
156 lines
3.4 KiB
JavaScript
export async function loadWohnhaus() {
|
|
const ui = document.querySelector(".building-ui");
|
|
|
|
ui.innerHTML = `
|
|
|
|
<div id="character-ui">
|
|
|
|
<div class="slot helmet" data-slot="helmet"></div>
|
|
|
|
<div class="slot shoulder" data-slot="shoulder"></div>
|
|
<div class="slot amulet" data-slot="amulet"></div>
|
|
|
|
<div class="slot gloves" data-slot="gloves"></div>
|
|
<div class="slot weapon" data-slot="weapon"></div>
|
|
|
|
<div class="character">
|
|
<img src="/images/avatar.png">
|
|
</div>
|
|
|
|
<div class="slot belt" data-slot="belt"></div>
|
|
<div class="slot shield" data-slot="shield"></div>
|
|
|
|
<div class="slot ring1" data-slot="ring"></div>
|
|
<div class="slot ring2" data-slot="ring"></div>
|
|
|
|
<div class="slot boots" data-slot="boots"></div>
|
|
|
|
</div>
|
|
|
|
<h3>Inventar</h3>
|
|
|
|
<div id="inventory-grid"></div>
|
|
|
|
`;
|
|
|
|
loadInventory();
|
|
loadEquipment();
|
|
}
|
|
|
|
async function loadEquipment() {
|
|
const res = await fetch("/api/equipment");
|
|
const equipment = await res.json();
|
|
|
|
equipment.forEach((item) => {
|
|
const slot = document.querySelector(
|
|
'.equip-slot[data-slot="' + item.slot + '"]',
|
|
);
|
|
|
|
if (!slot) return;
|
|
|
|
slot.innerHTML = `<img src="${item.icon}">`;
|
|
});
|
|
}
|
|
|
|
async function loadInventory() {
|
|
const res = await fetch("/api/inventory");
|
|
const items = await res.json();
|
|
|
|
const grid = document.getElementById("inventory-grid");
|
|
|
|
let html = "";
|
|
|
|
items.forEach((item) => {
|
|
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">
|
|
|
|
<img src="${icon}">
|
|
|
|
</div>
|
|
`;
|
|
});
|
|
|
|
grid.innerHTML = html;
|
|
|
|
initDrag();
|
|
initDrop();
|
|
}
|
|
|
|
function initEquip() {
|
|
document.querySelectorAll(".inventory-slot").forEach((item) => {
|
|
const icon = item.querySelector("img").src;
|
|
|
|
item.addEventListener("click", () => {
|
|
const slotType = item.dataset.slot;
|
|
|
|
const target = document.querySelector(
|
|
'.slot[data-slot="' + slotType + '"]',
|
|
);
|
|
|
|
if (!target) return;
|
|
|
|
target.innerHTML = `<img src="${icon}">`;
|
|
|
|
saveEquipment(slotType, item.dataset.id, item.dataset.level);
|
|
});
|
|
});
|
|
}
|
|
|
|
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);
|
|
});
|
|
});
|
|
}
|
|
|
|
async function saveEquipment(slot, itemId, itemLevelId) {
|
|
await fetch("/api/equip", {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify({
|
|
slot: slot,
|
|
itemId: itemId,
|
|
itemLevelId: itemLevelId,
|
|
}),
|
|
});
|
|
}
|
|
|
|
function initDrop() {
|
|
document.querySelectorAll(".equip-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 !== targetSlot) return;
|
|
|
|
const icon = document.querySelector(
|
|
'.inventory-slot[data-id="' + itemId + '"] img',
|
|
).src;
|
|
|
|
slot.innerHTML = `<img src="${icon}">`;
|
|
|
|
saveEquipment(targetSlot, itemId, itemLevel);
|
|
});
|
|
});
|
|
}
|