77 lines
1.6 KiB
JavaScript
77 lines
1.6 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();
|
|
}
|
|
|
|
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 || ""}">
|
|
<img src="${icon}">
|
|
</div>
|
|
`;
|
|
});
|
|
|
|
grid.innerHTML = html;
|
|
|
|
initEquip();
|
|
}
|
|
|
|
function initEquip() {
|
|
document.querySelectorAll(".inventory-slot").forEach((item) => {
|
|
item.addEventListener("click", () => {
|
|
const slot = item.dataset.slot;
|
|
|
|
const target = document.querySelector(
|
|
'.equip-slot[data-slot="' + slot + '"]',
|
|
);
|
|
|
|
if (!target) return;
|
|
|
|
target.innerHTML = item.innerHTML;
|
|
});
|
|
});
|
|
}
|