72 lines
1.4 KiB
JavaScript
72 lines
1.4 KiB
JavaScript
export async function loadWohnhaus(data) {
|
|
const ui = document.querySelector(".building-ui");
|
|
|
|
ui.innerHTML = `
|
|
<div id="wohnhaus-ui">
|
|
|
|
<h3>Inventar</h3>
|
|
|
|
<div id="inventory-grid"></div>
|
|
|
|
</div>
|
|
|
|
<div id="item-tooltip"></div>
|
|
`;
|
|
|
|
loadInventory();
|
|
}
|
|
|
|
async function loadInventory() {
|
|
const res = await fetch("/api/inventory");
|
|
const items = await res.json();
|
|
|
|
const grid = document.getElementById("inventory-grid");
|
|
|
|
let html = "";
|
|
|
|
for (let i = 0; i < 30; i++) {
|
|
const item = items[i];
|
|
|
|
if (item) {
|
|
const icon = item.icon || "/images/items/default.png";
|
|
|
|
html += `
|
|
<div class="inventory-slot" data-name="${item.name}">
|
|
<img src="${icon}">
|
|
<div class="item-amount">${item.amount || ""}</div>
|
|
</div>
|
|
`;
|
|
} else {
|
|
html += `<div class="inventory-slot"></div>`;
|
|
}
|
|
}
|
|
|
|
grid.innerHTML = html;
|
|
|
|
initTooltips();
|
|
}
|
|
|
|
function initTooltips() {
|
|
const tooltip = document.getElementById("item-tooltip");
|
|
|
|
document.querySelectorAll(".inventory-slot").forEach((slot) => {
|
|
slot.addEventListener("mouseenter", () => {
|
|
const name = slot.dataset.name;
|
|
|
|
if (!name) return;
|
|
|
|
tooltip.innerHTML = `<strong>${name}</strong>`;
|
|
tooltip.style.display = "block";
|
|
});
|
|
|
|
slot.addEventListener("mousemove", (e) => {
|
|
tooltip.style.left = e.pageX + 10 + "px";
|
|
tooltip.style.top = e.pageY + 10 + "px";
|
|
});
|
|
|
|
slot.addEventListener("mouseleave", () => {
|
|
tooltip.style.display = "none";
|
|
});
|
|
});
|
|
}
|