Fehler beim Laden.
`;
}
}
/* ══════════════════════════════════════════════
SHELL
══════════════════════════════════════════════ */
function renderShell() {
return `
Lade Karten...
`;
if (pagination) pagination.innerHTML = "";
try {
const res = await fetch(
`/api/user-cards?group_id=${gs_groupId}&page=${gs_page}&limit=${CARDS_PER_PAGE}`
);
if (!res.ok) throw new Error();
const data = await res.json();
gs_cards = data.cards || [];
renderGrid(grid, gs_cards);
renderPagination(pagination, data.totalPages, data.total);
} catch {
grid.innerHTML = `Keine Karten gefunden.
`;
}
}
/* ══════════════════════════════════════════════
KARTEN-GRID RENDERN
══════════════════════════════════════════════ */
function renderGrid(grid, cards) {
if (!cards || !cards.length) {
grid.innerHTML = `Keine Karten in dieser Gruppe.
`;
return;
}
grid.innerHTML = cards.map((c) => {
// Karte deaktivieren wenn sie nicht zur aktuellen Kombination passt
const disabled = gs_combineId !== null && c.card_id !== gs_combineId;
// Anzahl bereits im Kombinier-Feld
const inField = gs_combineCards.filter(x => x.card_id === c.card_id).length;
const available = c.amount - inField;
return `
${c.attack != null ? `
${c.attack}` : ""}
${c.defends != null ? `
${c.defends}` : ""}
${c.rarity ? `
${rarityImgs(c.rarity, 12)}
` : ""}
`;
}).join("");
grid.querySelectorAll(".gs-card:not(.gs-card-disabled)").forEach((el) => {
el.addEventListener("click", () => {
const card = cards.find((c) => c.card_id === parseInt(el.dataset.cardId));
if (!card) return;
const inField = gs_combineCards.filter(x => x.card_id === card.card_id).length;
if (inField >= card.amount) {
showToast("Keine weiteren Exemplare verfügbar.");
return;
}
addToField(card);
});
});
}
/* ══════════════════════════════════════════════
KARTE ZUM KOMBINIER-FELD HINZUFÜGEN
══════════════════════════════════════════════ */
function addToField(card) {
gs_combineId = card.card_id;
gs_combineCards.push({ ...card });
renderCombineField();
renderGrid(document.getElementById("gs-grid"), gs_cards);
}
/* ══════════════════════════════════════════════
KARTE AUS FELD ENTFERNEN
══════════════════════════════════════════════ */
function removeFromField(index) {
gs_combineCards.splice(index, 1);
if (gs_combineCards.length === 0) gs_combineId = null;
renderCombineField();
renderGrid(document.getElementById("gs-grid"), gs_cards);
}
/* ══════════════════════════════════════════════
KOMBINIER-FELD RENDERN
══════════════════════════════════════════════ */
function renderCombineField() {
const grid = document.getElementById("gs-combine-grid");
const hint = document.getElementById("gs-combine-hint");
const count = document.getElementById("gs-combine-count");
const btn = document.getElementById("gs-combine-btn");
if (!grid) return;
if (!gs_combineCards.length) {
grid.innerHTML = "";
hint.style.display = "block";
count.textContent = "";
btn.disabled = true;
return;
}
hint.style.display = "none";
// Karten als gestapelter Stapel – jede Karte leicht versetzt
const offset = Math.min(6, 40 / gs_combineCards.length); // max 6px versatz
const stackHeight = offset * (gs_combineCards.length - 1); // extra höhe für stapel
const stackCards = gs_combineCards.map((c, i) => `
`;
return img.repeat(count);
}
// State
let gs_groupId = null;
let gs_page = 1;
let gs_cards = []; // aktuelle Seite
let gs_combineId = null; // card_id der Karte im Kombinier-Feld
let gs_combineCards = []; // [{card_id, name, image, rarity, attack, defends, cooldown}] im Feld
let gs_initialized = false;
/* ══════════════════════════════════════════════
INIT
══════════════════════════════════════════════ */
export async function loadGlucksspiel() {
const container = document.getElementById("gs-tab1");
if (!container) return;
// Nur beim ersten Aufruf rendern
if (gs_initialized) return;
gs_initialized = true;
container.innerHTML = renderShell();
attachCombineEvents();
try {
const res = await fetch("/api/card-groups");
if (!res.ok) throw new Error();
const groups = await res.json();
renderTabs(groups);
if (groups.length) {
gs_groupId = groups[0].id;
await loadCards();
}
} catch {
container.innerHTML = `