diff --git a/public/js/quickmenu/lucky-box.js b/public/js/quickmenu/lucky-box.js index deb84f8..3001662 100644 --- a/public/js/quickmenu/lucky-box.js +++ b/public/js/quickmenu/lucky-box.js @@ -1,16 +1,16 @@ 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: "🐉" }, + { id: "ritter", label: "Ritter", 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; +let currentPage = 1; export async function loadLuckyBox() { const body = document.getElementById("qm-body-glucksbox"); @@ -23,12 +23,14 @@ export async function loadLuckyBox() { /* ── HTML-Grundstruktur ─────────────────────── */ function renderShell() { - const tabs = RACES.map((r, i) => ` + const tabs = RACES.map( + (r, i) => ` - `).join(""); + `, + ).join(""); return `
@@ -258,7 +260,9 @@ function renderShell() { function attachTabEvents() { document.querySelectorAll(".kd-tab").forEach((btn) => { btn.addEventListener("click", async () => { - document.querySelectorAll(".kd-tab").forEach((b) => b.classList.remove("kd-tab-active")); + document + .querySelectorAll(".kd-tab") + .forEach((b) => b.classList.remove("kd-tab-active")); btn.classList.add("kd-tab-active"); currentRace = btn.dataset.race; currentPage = 1; @@ -269,7 +273,7 @@ function attachTabEvents() { /* ── Karten laden ───────────────────────────── */ async function loadCards() { - const grid = document.getElementById("kd-grid"); + const grid = document.getElementById("kd-grid"); const pagination = document.getElementById("kd-pagination"); if (!grid) return; @@ -277,7 +281,9 @@ async function loadCards() { pagination.innerHTML = ""; try { - const res = await fetch(`/api/cards?race=${currentRace}&page=${currentPage}&limit=${CARDS_PER_PAGE}`); + 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 } @@ -296,15 +302,19 @@ function renderGrid(grid, cards) { return; } - grid.innerHTML = cards.map((c) => ` + grid.innerHTML = cards + .map( + (c) => `
${c.name} - ${c.attack !== undefined ? `${c.attack}` : ""} + ${c.attack !== undefined ? `${c.attack}` : ""} ${c.defense !== undefined ? `${c.defense}` : ""}
${c.name}
- `).join(""); + `, + ) + .join(""); } /* ── Pagination rendern ─────────────────────── */ @@ -315,18 +325,28 @@ function renderPagination(pagination, totalPages, total) { pagination.innerHTML = ` - ${pages.map((p) => ` + ${pages + .map( + (p) => ` - `).join("")} + `, + ) + .join("")} ${total} Karten `; document.getElementById("kd-prev")?.addEventListener("click", async () => { - if (currentPage > 1) { currentPage--; await loadCards(); } + if (currentPage > 1) { + currentPage--; + await loadCards(); + } }); document.getElementById("kd-next")?.addEventListener("click", async () => { - if (currentPage < totalPages) { currentPage++; await loadCards(); } + if (currentPage < totalPages) { + currentPage++; + await loadCards(); + } }); pagination.querySelectorAll("[data-page]").forEach((btn) => { btn.addEventListener("click", async () => {