const CARDS_PER_PAGE = 12;
const RACES = [
{ id: "menschen", label: "Menschen", icon: "βοΈ" },
{ id: "elfen", label: "Elfen", icon: "πΏ" },
{ id: "zwerge", label: "Zwerge", icon: "βοΈ" },
{ id: "orks", label: "Orks", icon: "π" },
{ id: "untote", label: "Untote", icon: "π" },
{ id: "drachen", label: "Drachen", icon: "π" },
];
let currentRace = RACES[0].id;
let currentPage = 1;
export async function loadLuckyBox() {
const body = document.getElementById("qm-body-glucksbox");
if (!body) return;
body.innerHTML = renderShell();
attachTabEvents();
await loadCards();
}
/* ββ HTML-Grundstruktur βββββββββββββββββββββββ */
function renderShell() {
const tabs = RACES.map((r, i) => `
`).join("");
return `
`;
}
/* ββ Tab-Klick βββββββββββββββββββββββββββββββ */
function attachTabEvents() {
document.querySelectorAll(".kd-tab").forEach((btn) => {
btn.addEventListener("click", async () => {
document.querySelectorAll(".kd-tab").forEach((b) => b.classList.remove("kd-tab-active"));
btn.classList.add("kd-tab-active");
currentRace = btn.dataset.race;
currentPage = 1;
await loadCards();
});
});
}
/* ββ Karten laden βββββββββββββββββββββββββββββ */
async function loadCards() {
const grid = document.getElementById("kd-grid");
const pagination = document.getElementById("kd-pagination");
if (!grid) return;
grid.innerHTML = `Lade Karten...
`;
pagination.innerHTML = "";
try {
const res = await fetch(`/api/cards?race=${currentRace}&page=${currentPage}&limit=${CARDS_PER_PAGE}`);
if (!res.ok) throw new Error("API Fehler");
const data = await res.json();
// data = { cards: [...], total: N, page: N, totalPages: N }
renderGrid(grid, data.cards);
renderPagination(pagination, data.totalPages, data.total);
} catch {
grid.innerHTML = `Noch keine Karten fΓΌr diese Rasse vorhanden.
`;
}
}
/* ββ Grid rendern βββββββββββββββββββββββββββββ */
function renderGrid(grid, cards) {
if (!cards || !cards.length) {
grid.innerHTML = `Noch keine Karten fΓΌr diese Rasse vorhanden.
`;
return;
}
grid.innerHTML = cards.map((c) => `
${c.attack !== undefined ? `
${c.attack}` : ""}
${c.defense !== undefined ? `
${c.defense}` : ""}
${c.name}
`).join("");
}
/* ββ Pagination rendern βββββββββββββββββββββββ */
function renderPagination(pagination, totalPages, total) {
if (totalPages <= 1) return;
const pages = Array.from({ length: totalPages }, (_, i) => i + 1);
pagination.innerHTML = `
${pages.map((p) => `
`).join("")}
${total} Karten
`;
document.getElementById("kd-prev")?.addEventListener("click", async () => {
if (currentPage > 1) { currentPage--; await loadCards(); }
});
document.getElementById("kd-next")?.addEventListener("click", async () => {
if (currentPage < totalPages) { currentPage++; await loadCards(); }
});
pagination.querySelectorAll("[data-page]").forEach((btn) => {
btn.addEventListener("click", async () => {
currentPage = parseInt(btn.dataset.page);
await loadCards();
});
});
}