151 lines
2.7 KiB
JavaScript
151 lines
2.7 KiB
JavaScript
export async function loadSchwarzmarkt() {
|
|
const ui = document.querySelector(".building-ui");
|
|
|
|
ui.innerHTML = `
|
|
|
|
<div class="market-tabs">
|
|
|
|
<button class="market-tab active" data-tab="inventory">
|
|
Inventar
|
|
</button>
|
|
|
|
<button class="market-tab" data-tab="artifacts">
|
|
Artefakte
|
|
</button>
|
|
|
|
<button class="market-tab" data-tab="special">
|
|
Geheimhandel
|
|
</button>
|
|
|
|
</div>
|
|
|
|
<div class="market-content">
|
|
|
|
<div class="market-tab-content active" id="market-inventory">
|
|
<div id="market-pages"></div>
|
|
</div>
|
|
|
|
<div class="market-tab-content" id="market-artifacts">
|
|
<p>Noch keine Artefakte verfügbar</p>
|
|
</div>
|
|
|
|
<div class="market-tab-content" id="market-special">
|
|
<p>Schwarzmarkt Angebote folgen bald</p>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
`;
|
|
|
|
loadPages();
|
|
initMarketTabs();
|
|
}
|
|
|
|
async function loadPages() {
|
|
const res = await fetch("/api/blackmarket/pages");
|
|
const data = await res.json();
|
|
|
|
const container = document.getElementById("market-pages");
|
|
|
|
let html = "";
|
|
|
|
for (let i = 1; i <= data.maxPages; i++) {
|
|
const price = data.prices.find((p) => p.page === i);
|
|
|
|
if (data.ownedPages.includes(i)) {
|
|
html += `
|
|
<div class="market-slot owned">
|
|
|
|
<img src="/images/items/beutel.png" class="bag-icon">
|
|
|
|
<div class="bag-status owned">
|
|
✔
|
|
</div>
|
|
|
|
</div>
|
|
`;
|
|
} else if (price) {
|
|
html += `
|
|
<div class="market-slot buy" data-page="${i}">
|
|
|
|
<img src="/images/items/beutel.png" class="bag-icon">
|
|
|
|
<div class="bag-price">
|
|
${price.price} <span class="gold-icon">🪙</span>
|
|
</div>
|
|
|
|
<button class="buy-button">
|
|
Kaufen
|
|
</button>
|
|
|
|
</div>
|
|
`;
|
|
} else {
|
|
html += `
|
|
<div class="market-slot locked">
|
|
|
|
<img src="/images/items/beutel.png" class="bag-icon">
|
|
|
|
<div class="bag-status locked">
|
|
🔒
|
|
</div>
|
|
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
|
|
container.innerHTML = html;
|
|
}
|
|
|
|
/* Kaufen */
|
|
|
|
document.addEventListener("click", async (e) => {
|
|
const button = e.target.closest(".buy-button");
|
|
|
|
if (!button) return;
|
|
|
|
const slot = button.closest(".market-slot");
|
|
|
|
const page = slot.dataset.page;
|
|
|
|
const res = await fetch("/api/blackmarket/buy-page", {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify({ page }),
|
|
});
|
|
|
|
const data = await res.json();
|
|
|
|
if (data.error) {
|
|
alert(data.error);
|
|
return;
|
|
}
|
|
|
|
loadPages();
|
|
});
|
|
|
|
/* Tabs */
|
|
|
|
function initMarketTabs() {
|
|
document.querySelectorAll(".market-tab").forEach((tab) => {
|
|
tab.addEventListener("click", () => {
|
|
document
|
|
.querySelectorAll(".market-tab")
|
|
.forEach((t) => t.classList.remove("active"));
|
|
|
|
tab.classList.add("active");
|
|
|
|
document
|
|
.querySelectorAll(".market-tab-content")
|
|
.forEach((c) => c.classList.remove("active"));
|
|
|
|
document
|
|
.getElementById("market-" + tab.dataset.tab)
|
|
.classList.add("active");
|
|
});
|
|
});
|
|
}
|