113 lines
2.4 KiB
JavaScript
113 lines
2.4 KiB
JavaScript
export async function loadWohnhaus() {
|
|
const ui = document.querySelector(".building-ui");
|
|
|
|
ui.innerHTML = `
|
|
|
|
<div id="character-ui">
|
|
|
|
<div class="equip-left">
|
|
<div class="equip-slot" data-slot="helmet"></div>
|
|
<div class="equip-slot" data-slot="shoulder"></div>
|
|
<div class="equip-slot" data-slot="gloves"></div>
|
|
<div class="equip-slot" data-slot="belt"></div>
|
|
<div class="equip-slot" data-slot="boots"></div>
|
|
</div>
|
|
|
|
<div class="character">
|
|
<img src="/images/avatar.png">
|
|
</div>
|
|
|
|
<div class="equip-right">
|
|
<div class="equip-slot" data-slot="amulet"></div>
|
|
<div class="equip-slot" data-slot="weapon"></div>
|
|
<div class="equip-slot" data-slot="shield"></div>
|
|
<div class="equip-slot" data-slot="ring"></div>
|
|
</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}">
|
|
<img src="${icon}">
|
|
</div>
|
|
`;
|
|
});
|
|
|
|
grid.innerHTML = html;
|
|
|
|
initEquip();
|
|
}
|
|
|
|
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(
|
|
'.equip-slot[data-slot="' + slotType + '"]',
|
|
);
|
|
|
|
if (!target) return;
|
|
|
|
target.innerHTML = `<img src="${icon}">`;
|
|
|
|
saveEquipment(slotType, item.dataset.id, item.dataset.level);
|
|
});
|
|
});
|
|
}
|
|
|
|
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,
|
|
}),
|
|
});
|
|
}
|