uzilö
This commit is contained in:
parent
b9fd729f2c
commit
68e7a93f91
@ -1,22 +1,21 @@
|
||||
const CARDS_PER_PAGE = 18;
|
||||
|
||||
let currentGroupId = null;
|
||||
let currentPage = 1;
|
||||
let currentDeckId = null;
|
||||
let deckCards = []; // [{card_id, amount}]
|
||||
let userCardsCache = []; // aktuelle Seite: [{card_id, amount, name, image, rarity, attack, defense}]
|
||||
let decks = []; // [{id, name}]
|
||||
|
||||
let currentGroupId = null;
|
||||
let currentPage = 1;
|
||||
let currentDeckId = null;
|
||||
let deckCards = []; // [{card_id, amount}]
|
||||
let userCardsCache = []; // aktuelle Seite: [{card_id, amount, name, image, rarity, attack, defense}]
|
||||
let decks = []; // [{id, name}]
|
||||
|
||||
/* ── Kristall-Mapping ───────────────────────── */
|
||||
const RARITY_CRYSTALS = {
|
||||
"1": "roter-cristal.png",
|
||||
"2": "blauer-cristal.png",
|
||||
"3": "gelber-cristal.png",
|
||||
"4": "gruener-cristal.png",
|
||||
"5": "oranger-cristal.png",
|
||||
"6": "violet-cristal.png",
|
||||
"7": "pinker-cristal.png",
|
||||
1: "roter-cristal.png",
|
||||
2: "blauer-cristal.png",
|
||||
3: "gelber-cristal.png",
|
||||
4: "gruener-cristal.png",
|
||||
5: "oranger-cristal.png",
|
||||
6: "violet-cristal.png",
|
||||
7: "pinker-cristal.png",
|
||||
};
|
||||
|
||||
function rarityImgs(rarity, size = 14) {
|
||||
@ -250,8 +249,8 @@ function renderShell() {
|
||||
}
|
||||
.kd-stat-atk {
|
||||
position: absolute;
|
||||
right: 4px;
|
||||
top: 50%;
|
||||
right: 12px;
|
||||
top: 36%;
|
||||
transform: translateY(-50%);
|
||||
background: rgba(180,40,20,0.88);
|
||||
border: 1px solid #ff6040;
|
||||
@ -261,8 +260,8 @@ function renderShell() {
|
||||
}
|
||||
.kd-stat-def {
|
||||
position: absolute;
|
||||
left: 4px;
|
||||
top: 50%;
|
||||
left: 12px;
|
||||
top: 36%;
|
||||
transform: translateY(-50%);
|
||||
background: rgba(20,80,180,0.88);
|
||||
border: 1px solid #4090ff;
|
||||
@ -272,8 +271,8 @@ function renderShell() {
|
||||
}
|
||||
.kd-stat-cd {
|
||||
position: absolute;
|
||||
bottom: 3px;
|
||||
right: 3px;
|
||||
bottom: 16px;
|
||||
right: 11px;
|
||||
width: 22px; height: 22px;
|
||||
border-radius: 50%;
|
||||
background: rgba(0,0,0,0.75);
|
||||
@ -516,16 +515,18 @@ function renderTabs(groups) {
|
||||
const container = document.getElementById("kd-tabs");
|
||||
if (!container) return;
|
||||
|
||||
container.innerHTML = groups.map((g, i) => {
|
||||
const color = g.color || "#6b4b2a";
|
||||
return `
|
||||
container.innerHTML = groups
|
||||
.map((g, i) => {
|
||||
const color = g.color || "#6b4b2a";
|
||||
return `
|
||||
<button class="kd-tab ${i === 0 ? "kd-tab-active" : ""}"
|
||||
data-group="${g.id}"
|
||||
style="border-color:${color};${i === 0 ? `background:${color}33;` : ""}">
|
||||
<span class="kd-tab-dot" style="background:${color};"></span>
|
||||
<span>${g.name}</span>
|
||||
</button>`;
|
||||
}).join("");
|
||||
})
|
||||
.join("");
|
||||
|
||||
container.querySelectorAll(".kd-tab").forEach((btn) => {
|
||||
btn.addEventListener("click", async () => {
|
||||
@ -550,7 +551,7 @@ function renderTabs(groups) {
|
||||
totalPages, total }
|
||||
══════════════════════════════════════════════ */
|
||||
async function loadUserCards() {
|
||||
const grid = document.getElementById("kd-grid");
|
||||
const grid = document.getElementById("kd-grid");
|
||||
const pagination = document.getElementById("kd-pagination");
|
||||
if (!grid) return;
|
||||
|
||||
@ -558,7 +559,9 @@ async function loadUserCards() {
|
||||
pagination.innerHTML = "";
|
||||
|
||||
try {
|
||||
const res = await fetch(`/api/user-cards?group_id=${currentGroupId}&page=${currentPage}&limit=${CARDS_PER_PAGE}`);
|
||||
const res = await fetch(
|
||||
`/api/user-cards?group_id=${currentGroupId}&page=${currentPage}&limit=${CARDS_PER_PAGE}`,
|
||||
);
|
||||
if (!res.ok) throw new Error("API Fehler");
|
||||
const data = await res.json();
|
||||
userCardsCache = data.cards || [];
|
||||
@ -588,8 +591,14 @@ async function loadDecks() {
|
||||
function renderDeckSelect() {
|
||||
const sel = document.getElementById("kd-deck-select");
|
||||
if (!sel) return;
|
||||
sel.innerHTML = `<option value="">— Deck wählen —</option>` +
|
||||
decks.map(d => `<option value="${d.id}" ${d.id === currentDeckId ? "selected" : ""}>${d.name}</option>`).join("");
|
||||
sel.innerHTML =
|
||||
`<option value="">— Deck wählen —</option>` +
|
||||
decks
|
||||
.map(
|
||||
(d) =>
|
||||
`<option value="${d.id}" ${d.id === currentDeckId ? "selected" : ""}>${d.name}</option>`,
|
||||
)
|
||||
.join("");
|
||||
}
|
||||
|
||||
/* ══════════════════════════════════════════════
|
||||
@ -643,7 +652,7 @@ async function addCardToDeck(card) {
|
||||
|
||||
// Rarity > 5: max. 1 Exemplar im Deck
|
||||
if (parseInt(card.rarity) > 5) {
|
||||
const already = deckCards.find(c => c.card_id === card.card_id);
|
||||
const already = deckCards.find((c) => c.card_id === card.card_id);
|
||||
if (already) {
|
||||
showToast("Karten ab Rarity 6 dürfen nur 1x im Deck sein.");
|
||||
return;
|
||||
@ -740,17 +749,18 @@ function renderCollectionGrid(grid, cards) {
|
||||
|
||||
const totalInDeck = deckCards.reduce((s, c) => s + c.amount, 0);
|
||||
|
||||
grid.innerHTML = cards.map(c => {
|
||||
const inDeck = getDeckCount(c.card_id);
|
||||
const maxed = isMaxedOut(c, inDeck, totalInDeck);
|
||||
return `
|
||||
grid.innerHTML = cards
|
||||
.map((c) => {
|
||||
const inDeck = getDeckCount(c.card_id);
|
||||
const maxed = isMaxedOut(c, inDeck, totalInDeck);
|
||||
return `
|
||||
<div class="kd-card ${maxed ? "kd-card-maxed" : ""}"
|
||||
data-card-id="${c.card_id}"
|
||||
title="${c.name}">
|
||||
<img src="/images/cards/${c.image}" alt="${c.name}"
|
||||
onerror="this.src='/images/avatar_placeholder.svg'">
|
||||
${c.attack != null ? `<span class="kd-stat-atk">${c.attack}</span>` : ""}
|
||||
${c.defends != null ? `<span class="kd-stat-def">${c.defends}</span>` : ""}
|
||||
${c.attack != null ? `<span class="kd-stat-atk">${c.attack}</span>` : ""}
|
||||
${c.defends != null ? `<span class="kd-stat-def">${c.defends}</span>` : ""}
|
||||
${c.cooldown != null ? `<span class="kd-stat-cd">${c.cooldown}</span>` : ""}
|
||||
<div class="kd-card-footer">
|
||||
<span class="kd-count-owned" title="Besitzt du">${c.amount}×</span>
|
||||
@ -758,11 +768,12 @@ function renderCollectionGrid(grid, cards) {
|
||||
</div>
|
||||
${c.rarity ? `<div class="kd-rarity">${rarityImgs(c.rarity, 13)}</div>` : ""}
|
||||
</div>`;
|
||||
}).join("");
|
||||
})
|
||||
.join("");
|
||||
|
||||
grid.querySelectorAll(".kd-card:not(.kd-card-maxed)").forEach(el => {
|
||||
grid.querySelectorAll(".kd-card:not(.kd-card-maxed)").forEach((el) => {
|
||||
el.addEventListener("click", async () => {
|
||||
const card = cards.find(c => c.card_id === parseInt(el.dataset.cardId));
|
||||
const card = cards.find((c) => c.card_id === parseInt(el.dataset.cardId));
|
||||
if (card) await addCardToDeck(card);
|
||||
});
|
||||
});
|
||||
@ -777,10 +788,11 @@ function renderDeckGrid(grid, cards) {
|
||||
return;
|
||||
}
|
||||
// Owned-Anzahl aus userCardsCache auslesen
|
||||
grid.innerHTML = cards.map(c => {
|
||||
const ownedEntry = userCardsCache.find(u => u.card_id === c.card_id);
|
||||
const ownedAmt = ownedEntry ? ownedEntry.amount : "?";
|
||||
return `
|
||||
grid.innerHTML = cards
|
||||
.map((c) => {
|
||||
const ownedEntry = userCardsCache.find((u) => u.card_id === c.card_id);
|
||||
const ownedAmt = ownedEntry ? ownedEntry.amount : "?";
|
||||
return `
|
||||
<div class="kd-deck-card" data-card-id="${c.card_id}" title="Klicken zum Entfernen: ${c.name}">
|
||||
<img src="/images/cards/${c.image}" alt="${c.name}"
|
||||
onerror="this.src='/images/avatar_placeholder.svg'">
|
||||
@ -789,11 +801,12 @@ function renderDeckGrid(grid, cards) {
|
||||
</div>
|
||||
${c.rarity ? `<div class="kd-rarity" style="top:75%">${rarityImgs(c.rarity, 14)}</div>` : ""}
|
||||
</div>`;
|
||||
}).join("");
|
||||
})
|
||||
.join("");
|
||||
|
||||
grid.querySelectorAll(".kd-deck-card").forEach(el => {
|
||||
grid.querySelectorAll(".kd-deck-card").forEach((el) => {
|
||||
el.addEventListener("click", async () => {
|
||||
const card = cards.find(c => c.card_id === parseInt(el.dataset.cardId));
|
||||
const card = cards.find((c) => c.card_id === parseInt(el.dataset.cardId));
|
||||
if (card) await removeCardFromDeck(card);
|
||||
});
|
||||
});
|
||||
@ -806,19 +819,29 @@ function renderPagination(pagination, totalPages, total) {
|
||||
if (!totalPages || totalPages <= 1) return;
|
||||
pagination.innerHTML = `
|
||||
<button class="kd-page-btn" id="kd-prev" ${currentPage === 1 ? "disabled" : ""}>◀</button>
|
||||
${Array.from({ length: totalPages }, (_, i) => i + 1).map(p => `
|
||||
${Array.from({ length: totalPages }, (_, i) => i + 1)
|
||||
.map(
|
||||
(p) => `
|
||||
<button class="kd-page-btn ${p === currentPage ? "kd-page-active" : ""}" data-page="${p}">${p}</button>
|
||||
`).join("")}
|
||||
`,
|
||||
)
|
||||
.join("")}
|
||||
<button class="kd-page-btn" id="kd-next" ${currentPage === totalPages ? "disabled" : ""}>▶</button>
|
||||
<span class="kd-page-info">${total} Karten</span>`;
|
||||
|
||||
pagination.querySelector("#kd-prev")?.addEventListener("click", async () => {
|
||||
if (currentPage > 1) { currentPage--; await loadUserCards(); }
|
||||
if (currentPage > 1) {
|
||||
currentPage--;
|
||||
await loadUserCards();
|
||||
}
|
||||
});
|
||||
pagination.querySelector("#kd-next")?.addEventListener("click", async () => {
|
||||
if (currentPage < totalPages) { currentPage++; await loadUserCards(); }
|
||||
if (currentPage < totalPages) {
|
||||
currentPage++;
|
||||
await loadUserCards();
|
||||
}
|
||||
});
|
||||
pagination.querySelectorAll("[data-page]").forEach(btn => {
|
||||
pagination.querySelectorAll("[data-page]").forEach((btn) => {
|
||||
btn.addEventListener("click", async () => {
|
||||
currentPage = parseInt(btn.dataset.page);
|
||||
await loadUserCards();
|
||||
@ -882,7 +905,10 @@ function showNewDeckModal() {
|
||||
modal.querySelector("#kd-modal-cancel").onclick = () => modal.remove();
|
||||
modal.querySelector("#kd-modal-confirm").onclick = async () => {
|
||||
const name = input.value.trim();
|
||||
if (!name) { input.focus(); return; }
|
||||
if (!name) {
|
||||
input.focus();
|
||||
return;
|
||||
}
|
||||
modal.remove();
|
||||
await createDeck(name);
|
||||
};
|
||||
@ -901,14 +927,14 @@ function showNewDeckModal() {
|
||||
HELPERS
|
||||
══════════════════════════════════════════════ */
|
||||
function getDeckCount(cardId) {
|
||||
const entry = deckCards.find(c => c.card_id === cardId);
|
||||
const entry = deckCards.find((c) => c.card_id === cardId);
|
||||
return entry ? entry.amount : 0;
|
||||
}
|
||||
|
||||
function isMaxedOut(card, inDeck, totalInDeck) {
|
||||
if (!currentDeckId) return false;
|
||||
if (totalInDeck >= 30) return true;
|
||||
if (inDeck >= card.amount) return true; // mehr als besessen
|
||||
if (inDeck >= card.amount) return true; // mehr als besessen
|
||||
if (parseInt(card.rarity) > 5 && inDeck >= 1) return true; // Rarity > 5: nur 1x
|
||||
return false;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user