diff --git a/app.js b/app.js
index 1bd3471..8071216 100644
--- a/app.js
+++ b/app.js
@@ -22,6 +22,7 @@ const equip = require("./routes/equip");
const equipment = require("./routes/equipment");
const blackmarket = require("./routes/blackmarket");
const mineRoute = require("./routes/mine");
+const carddeckRoutes = require("./routes/carddeck");
const arenaRoutes = require("./routes/arena");
const { registerArenaHandlers } = require("./sockets/arena");
const { registerChatHandlers } = require("./sockets/chat");
@@ -297,44 +298,9 @@ app.get("/api/buildings", requireLogin, async (req, res) => {
}
});
-/* ========================
- Card Groups API
-======================== */
-
-app.get("/api/card-groups", requireLogin, async (req, res) => {
- try {
- const [groups] = await db.query("SELECT * FROM card_groups ORDER BY id");
- res.json(groups);
- } catch (err) {
- console.error(err);
- res.status(500).json({ error: "DB Fehler" });
}
});
-/* ========================
- Cards API
-======================== */
-
-app.get("/api/cards", requireLogin, async (req, res) => {
- const { group_id, page = 1, limit = 12 } = req.query;
- const offset = (page - 1) * limit;
-
- try {
- const [cards] = await db.query(
- `SELECT c.*, cg.name AS group_name, cg.color AS group_color,
- cl.attack, cl.defense, cl.cooldown
- FROM cards c
- LEFT JOIN card_groups cg ON cg.id = c.group_id
- LEFT JOIN card_levels cl ON cl.card_id = c.id AND cl.level = 1
- WHERE c.group_id = ?
- LIMIT ? OFFSET ?`,
- [group_id, parseInt(limit), parseInt(offset)]
- );
- const [[{ total }]] = await db.query(
- "SELECT COUNT(*) as total FROM cards WHERE group_id = ?", [group_id]
- );
-
- res.json({ cards, total, page: parseInt(page), totalPages: Math.ceil(total / limit) });
} catch (err) {
console.error(err);
res.status(500).json({ error: "DB Fehler" });
@@ -367,6 +333,7 @@ app.use("/api/equip", equip);
app.use("/api/equipment", equipment);
app.use("/api/blackmarket", blackmarket);
app.use("/api/mine", mineRoute);
+app.use("/api", carddeckRoutes);
app.use("/arena", arenaRoutes);
/* ========================
diff --git a/public/js/quickmenu/carddeck.js b/public/js/quickmenu/carddeck.js
index 4601c39..0ca318d 100644
--- a/public/js/quickmenu/carddeck.js
+++ b/public/js/quickmenu/carddeck.js
@@ -1,254 +1,458 @@
-const CARDS_PER_PAGE = 12;
+const CARDS_PER_PAGE = 18;
-let currentGroupId = null;
-let currentPage = 1;
+let currentGroupId = null;
+let currentPage = 1;
+let currentDeckId = null;
+let deckCards = []; // [{card_id, level, amount}]
+let userCardsCache = []; // aktuelle Seite: [{card_id, level, amount, name, image, attack, defense}]
+let decks = []; // [{id, name}]
+/* ══════════════════════════════════════════════
+ INIT
+══════════════════════════════════════════════ */
export async function loadCardDeck() {
const body = document.getElementById("qm-body-carddeck");
if (!body) return;
body.innerHTML = renderShell();
+ attachShellEvents();
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();
+ await Promise.all([loadUserCards(), loadDecks()]);
}
} catch (err) {
- console.error("Gruppen Fehler:", err);
+ console.error("Init Fehler:", err);
}
}
-/* ── Grundstruktur ──────────────────────────── */
+/* ══════════════════════════════════════════════
+ SHELL HTML
+══════════════════════════════════════════════ */
function renderShell() {
return `
+
+
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Kein Deck ausgewählt.
+
+
+
+
Noch keine Karten für diese Gruppe vorhanden.
`;
+ grid.innerHTML = `Keine Karten gefunden.
`;
}
}
-/* ── Grid ───────────────────────────────────── */
-function renderGrid(grid, cards) {
- if (!cards || !cards.length) {
- grid.innerHTML = `Noch keine Karten für diese Gruppe vorhanden.
`;
+/* ══════════════════════════════════════════════
+ DECKS laden
+ GET /api/decks
+ → [{id, name, card_count}]
+══════════════════════════════════════════════ */
+async function loadDecks() {
+ try {
+ const res = await fetch("/api/decks");
+ if (!res.ok) throw new Error("API Fehler");
+ decks = await res.json();
+ renderDeckSelect();
+ } catch (err) {
+ console.error("Decks Fehler:", err);
+ }
+}
+
+function renderDeckSelect() {
+ const sel = document.getElementById("kd-deck-select");
+ if (!sel) return;
+ sel.innerHTML = `` +
+ decks.map(d => ``).join("");
+}
+
+/* ══════════════════════════════════════════════
+ DECK-KARTEN laden
+ GET /api/decks/:id/cards
+ → [{card_id, level, amount, name, image, attack, defense}]
+══════════════════════════════════════════════ */
+async function loadDeckCards(deckId) {
+ const grid = document.getElementById("kd-deck-grid");
+ const info = document.getElementById("kd-deck-info");
+ if (!grid) return;
+
+ grid.innerHTML = `Lade Deck...
`;
+ info.innerHTML = "";
+
+ try {
+ const res = await fetch(`/api/decks/${deckId}/cards`);
+ if (!res.ok) throw new Error("API Fehler");
+ deckCards = await res.json();
+
+ const total = deckCards.reduce((s, c) => s + c.amount, 0);
+ const isFull = total >= 30;
+
+ info.innerHTML = `
+ Karten im Deck:
+ ${total} / 30`;
+
+ renderDeckGrid(grid, deckCards);
+ // Sammlung neu rendern damit Deck-Zähler aktualisiert werden
+ renderCollectionGrid(document.getElementById("kd-grid"), userCardsCache);
+ } catch {
+ grid.innerHTML = `Fehler beim Laden des Decks.
`;
+ }
+}
+
+/* ══════════════════════════════════════════════
+ KARTE ZUM DECK HINZUFÜGEN
+ POST /api/decks/:id/cards { card_id, level }
+══════════════════════════════════════════════ */
+async function addCardToDeck(card) {
+ if (!currentDeckId) {
+ showToast("Bitte zuerst ein Deck auswählen.");
return;
}
- grid.innerHTML = cards.map((c) => `
-
-
- ${c.attack != null ? `
${c.attack}` : ""}
- ${c.defense != null ? `
${c.defense}` : ""}
-
${c.name}
-
Deck ist leer.
Klicke links auf eine Karte um sie hinzuzufügen.
`;
+ document.getElementById("kd-deck-info").innerHTML =
+ `Karten im Deck:0 / 30`;
+ renderCollectionGrid(document.getElementById("kd-grid"), userCardsCache);
+ } catch {
+ showToast("Verbindungsfehler.");
+ }
+}
+
+/* ══════════════════════════════════════════════
+ RENDER: SAMMLUNGS-GRID
+══════════════════════════════════════════════ */
+function renderCollectionGrid(grid, cards) {
+ if (!grid) return;
+ if (!cards || !cards.length) {
+ grid.innerHTML = `Keine Karten in dieser Gruppe.
`;
+ return;
+ }
+
+ const totalInDeck = deckCards.reduce((s, c) => s + c.amount, 0);
+
+ grid.innerHTML = cards.map(c => {
+ const inDeck = getDeckCount(c.card_id, c.level);
+ const maxed = isMaxedOut(c, inDeck, totalInDeck);
+ return `
+
+
${c.name}
+
+ ${c.attack != null ? `
${c.attack}` : ""}
+ ${c.defense != null ? `
${c.defense}` : ""}
+
+
Deck ist leer.
Klicke links auf eine Karte um sie hinzuzufügen.
`;
+ return;
+ }
+ grid.innerHTML = cards.map(c => `
+
+ ${c.amount > 1 ? `
${c.amount}×` : ""}
+
+
+
Kein Deck ausgewählt.
`;
+ document.getElementById("kd-deck-info").innerHTML = "";
+ renderCollectionGrid(document.getElementById("kd-grid"), userCardsCache);
+ return;
+ }
+ currentDeckId = val;
+ await loadDeckCards(currentDeckId);
+ });
+
+ // Neues Deck
+ document.addEventListener("click", (e) => {
+ if (e.target.id !== "kd-btn-new-deck") return;
+ showNewDeckModal();
+ });
+}
+
+/* ══════════════════════════════════════════════
+ MODAL: Neues Deck
+══════════════════════════════════════════════ */
+function showNewDeckModal() {
+ if (decks.length >= 10) {
+ showToast("Du hast bereits 10 Decks (Maximum erreicht).");
+ return;
+ }
+ const wrap = document.querySelector(".kd-split");
+ const modal = document.createElement("div");
+ modal.className = "kd-modal-overlay";
+ modal.innerHTML = `
+
+
Neues Deck erstellen
+
+
+
+
+
+