98 lines
2.7 KiB
JavaScript
98 lines
2.7 KiB
JavaScript
const popup = document.getElementById("building-popup");
|
|
const title = document.getElementById("popup-title");
|
|
|
|
document.querySelectorAll(".building").forEach((b) => {
|
|
b.addEventListener("click", async (e) => {
|
|
e.preventDefault();
|
|
|
|
const name = b.querySelector("title").textContent;
|
|
const url = b.getAttribute("href");
|
|
|
|
title.innerText = name;
|
|
|
|
// Position des Gebäudes
|
|
const rect = b.getBoundingClientRect();
|
|
|
|
popup.style.left = rect.left + rect.width / 2 + "px";
|
|
popup.style.top = rect.top + rect.height / 2 + "px";
|
|
|
|
//popup.style.display = "block";
|
|
|
|
// AJAX Gebäudedaten laden
|
|
const res = await fetch("/api" + url);
|
|
const data = await res.json();
|
|
|
|
document.getElementById("tab-info").innerHTML = `
|
|
<h3>${data.name}</h3>
|
|
<p>Level: ${data.level}</p>
|
|
<p>Punkte: ${data.points} / ${data.nextLevelPoints}</p>
|
|
<p>${data.description}</p>
|
|
<div class="progress-bar">
|
|
<div class="progress-fill"
|
|
style="width:${(data.points / data.nextLevelPoints) * 100}%">
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
document.getElementById("tab-actions").innerHTML = `
|
|
<button>Betreten</button>
|
|
<button>Handeln</button>
|
|
`;
|
|
|
|
document.getElementById("tab-upgrade").innerHTML = `
|
|
<p>Kosten: ${data.upgradeCost}</p>
|
|
<button>Upgrade</button>
|
|
`;
|
|
|
|
document.getElementById("tab-history").innerHTML = `
|
|
<p>${data.history}</p>
|
|
`;
|
|
});
|
|
});
|
|
|
|
// Tabs
|
|
document.querySelectorAll(".tab").forEach((tab) => {
|
|
tab.addEventListener("click", () => {
|
|
document
|
|
.querySelectorAll(".tab")
|
|
.forEach((t) => t.classList.remove("active"));
|
|
tab.classList.add("active");
|
|
|
|
document
|
|
.querySelectorAll(".tab-content")
|
|
.forEach((c) => c.classList.remove("active"));
|
|
|
|
document.getElementById("tab-" + tab.dataset.tab).classList.add("active");
|
|
});
|
|
});
|
|
|
|
document.querySelector(".popup-close").onclick = () => {
|
|
popup.style.display = "none";
|
|
};
|
|
|
|
async function loadBuilding(buildingId) {
|
|
try {
|
|
const res = await fetch("/api/building/" + buildingId);
|
|
const data = await res.json();
|
|
|
|
document.getElementById("tab-info").innerHTML = `
|
|
<h3>${data.name}</h3>
|
|
<p>Level: ${data.level}</p>
|
|
<p>Punkte: ${data.points} / ${data.nextLevelPoints}</p>
|
|
<p>${data.description}</p>
|
|
`;
|
|
|
|
document.getElementById("tab-upgrade").innerHTML = `
|
|
<p>Nächstes Level benötigt:</p>
|
|
<p>${data.nextLevelPoints} Punkte</p>
|
|
<p>Kosten: ${data.upgradeCost}</p>
|
|
`;
|
|
|
|
document.getElementById("tab-history").innerHTML = `
|
|
<p>${data.history}</p>
|
|
`;
|
|
} catch (err) {
|
|
console.error("Fehler beim Laden des Gebäudes:", err);
|
|
}
|
|
}
|