165 lines
3.8 KiB
JavaScript
165 lines
3.8 KiB
JavaScript
import { showNotification } from "../notification.js";
|
|
|
|
export async function loadBlackmarket() {
|
|
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">
|
|
<p class="market-info-text">Erweitere deinen Taschenplatz indem du zusätzliche Taschen freischaltest</p>
|
|
<div id="market-pages"></div>
|
|
</div>
|
|
|
|
<div class="market-tab-content" id="market-artifacts">
|
|
<p class="market-placeholder">⚗️ Noch keine Artefakte verfügbar</p>
|
|
</div>
|
|
|
|
<div class="market-tab-content" id="market-special">
|
|
<p class="market-placeholder">🤫 Schwarzmarkt Angebote folgen bald...</p>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
`;
|
|
|
|
loadPages();
|
|
initMarketTabs();
|
|
}
|
|
|
|
async function loadPages() {
|
|
try {
|
|
const res = await fetch("/api/blackmarket/pages");
|
|
|
|
if (!res.ok) throw new Error("API Fehler");
|
|
|
|
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-label">Beutel ${i}</div>
|
|
<div class="bag-status">✔</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-label">Beutel ${i}</div>
|
|
<div class="bag-price">${price.price} <img src="/images/items/goldmuenze.png" class="inline-gold-icon" alt="Gold"></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-label">Beutel ${i}</div>
|
|
<div class="bag-status">🔒</div>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
|
|
container.innerHTML = html;
|
|
} catch (err) {
|
|
console.error("Schwarzmarkt Fehler:", err);
|
|
}
|
|
}
|
|
|
|
/* 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;
|
|
|
|
try {
|
|
const res = await fetch("/api/blackmarket/buy-page", {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify({ page }),
|
|
});
|
|
|
|
if (!res.ok) throw new Error("API Fehler");
|
|
|
|
const data = await res.json();
|
|
|
|
if (data.error) {
|
|
if (data.missing) {
|
|
showNotification(
|
|
`Du hast ${data.gold} Gold.\nDu brauchst ${data.price} Gold.\nEs fehlen dir noch ${data.missing} Gold.`,
|
|
"Nicht genug Gold",
|
|
"🪙",
|
|
);
|
|
} else {
|
|
showNotification(data.error, "Hinweis", "⚠️");
|
|
}
|
|
return;
|
|
}
|
|
|
|
loadPages();
|
|
} catch (err) {
|
|
console.error("Kauf Fehler:", err);
|
|
showNotification(
|
|
"Fehler beim Kauf. Bitte erneut versuchen.",
|
|
"Fehler",
|
|
"⚠️",
|
|
);
|
|
}
|
|
});
|
|
|
|
/* 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");
|
|
});
|
|
});
|
|
}
|