const CARDS_PER_PAGE = 12;
let currentGroupId = null;
let currentPage = 1;
export async function loadCardDeck() {
const body = document.getElementById("qm-body-carddeck");
if (!body) return;
body.innerHTML = renderShell();
try {
const res = await fetch("/api/card-groups");
if (!res.ok) throw new Error("API Fehler");
const groups = await res.json();
renderTabs(groups);
if (groups.length) {
currentGroupId = groups[0].id;
await loadCards();
}
} catch (err) {
console.error("Gruppen Fehler:", err);
}
}
/* ── Grundstruktur ──────────────────────────── */
function renderShell() {
return `
`;
}
/* ── Tabs aus DB ────────────────────────────── */
function renderTabs(groups) {
const container = document.getElementById("kd-tabs");
if (!container) return;
container.innerHTML = groups.map((g, i) => {
const color = g.color || "#6b4b2a";
return `
`;
}).join("");
container.querySelectorAll(".kd-tab").forEach((btn) => {
btn.addEventListener("click", async () => {
const color = btn.style.borderColor;
container.querySelectorAll(".kd-tab").forEach((b) => {
b.classList.remove("kd-tab-active");
b.style.background = "";
});
btn.classList.add("kd-tab-active");
btn.style.background = `${color}33`;
currentGroupId = parseInt(btn.dataset.group);
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?group_id=${currentGroupId}&page=${currentPage}&limit=${CARDS_PER_PAGE}`);
if (!res.ok) throw new Error("API Fehler");
const data = await res.json();
renderGrid(grid, data.cards);
renderPagination(pagination, data.totalPages, data.total);
} catch {
grid.innerHTML = `Noch keine Karten für diese Gruppe vorhanden.
`;
}
}
/* ── Grid ───────────────────────────────────── */
function renderGrid(grid, cards) {
if (!cards || !cards.length) {
grid.innerHTML = `Noch keine Karten für diese Gruppe vorhanden.
`;
return;
}
grid.innerHTML = cards.map((c) => `
${c.attack != null ? `
${c.attack}` : ""}
${c.defense != null ? `
${c.defense}` : ""}
${c.name}
`).join("");
}
/* ── Pagination ─────────────────────────────── */
function renderPagination(pagination, totalPages, total) {
if (totalPages <= 1) return;
pagination.innerHTML = `
${Array.from({ length: totalPages }, (_, i) => i + 1).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();
});
});
}