diff --git a/public/js/lucky-box.js b/public/js/lucky-box.js deleted file mode 100644 index deb84f8..0000000 --- a/public/js/lucky-box.js +++ /dev/null @@ -1,337 +0,0 @@ -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.name} - ${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(); - }); - }); -} diff --git a/public/js/quickmenu/lucky-box.js b/public/js/quickmenu/lucky-box.js index 1cf9060..deb84f8 100644 --- a/public/js/quickmenu/lucky-box.js +++ b/public/js/quickmenu/lucky-box.js @@ -1,8 +1,337 @@ -ο»Ώexport async function loadLuckyBox() { +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 = ` -

Inhalt folgt...

+ 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.name} + ${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(); + }); + }); +}