cay/dok
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

serth

Browse Source
This commit is contained in:
cay 2026-03-30 16:39:19 +01:00
parent 2276946ef0
commit 13cc66e4c5
2 changed files with 104 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
app.js
View File

@ -151,10 +151,10 @@ app.get("/api/building/:id", requireLogin, async (req, res) => {
upgradeCost: nextLevel[0] upgradeCost: nextLevel[0]
? `${nextLevel[0].wood} Holz, ${nextLevel[0].stone} Stein, ${nextLevel[0].gold} Gold` ? `${nextLevel[0].wood} Holz, ${nextLevel[0].stone} Stein, ${nextLevel[0].gold} Gold`
: "Max Level erreicht", : "Max Level erreicht",
upgradeWood: nextLevel[0]?.wood ?? null, upgradeWood: nextLevel[0]?.wood ?? null,
upgradeStone: nextLevel[0]?.stone ?? null, upgradeStone: nextLevel[0]?.stone ?? null,
upgradeGold: nextLevel[0]?.gold ?? null, upgradeGold: nextLevel[0]?.gold ?? null,
upgradeRequiredPoints: nextLevel[0]?.required_points ?? null, // NEU upgradeRequiredPoints: nextLevel[0]?.required_points ?? null, // NEU
}); });
} catch (err) { } catch (err) {
console.error(err); console.error(err);
@ -190,9 +190,7 @@ app.post("/api/building/:id/upgrade", requireLogin, async (req, res) => {
); );
if (!levelData) { if (!levelData) {
return res return res.status(400).json({ error: "Maximales Level bereits erreicht" });
.status(400)
.json({ error: "Maximales Level bereits erreicht" });
} }
// Punkte prüfen // Punkte prüfen
@ -212,23 +210,11 @@ app.post("/api/building/:id/upgrade", requireLogin, async (req, res) => {
return res.status(400).json({ error: "Keine Währungsdaten gefunden" }); return res.status(400).json({ error: "Keine Währungsdaten gefunden" });
} }
if ( if (currency.wood < levelData.wood || currency.stone < levelData.stone || currency.gold < levelData.gold) {
currency.wood < levelData.wood ||
currency.stone < levelData.stone ||
currency.gold < levelData.gold
) {
return res.status(400).json({ return res.status(400).json({
error: "Nicht genügend Ressourcen", error: "Nicht genügend Ressourcen",
required: { required: { wood: levelData.wood, stone: levelData.stone, gold: levelData.gold },
wood: levelData.wood, current: { wood: currency.wood, stone: currency.stone, gold: currency.gold },
stone: levelData.stone,
gold: levelData.gold,
},
current: {
wood: currency.wood,
stone: currency.stone,
gold: currency.gold,
},
}); });
} }
@ -247,11 +233,7 @@ app.post("/api/building/:id/upgrade", requireLogin, async (req, res) => {
res.json({ res.json({
success: true, success: true,
newLevel: nextLevel, newLevel: nextLevel,
cost: { cost: { wood: levelData.wood, stone: levelData.stone, gold: levelData.gold },
wood: levelData.wood,
stone: levelData.stone,
gold: levelData.gold,
},
}); });
} catch (err) { } catch (err) {
console.error(err); console.error(err);
@ -315,12 +297,26 @@ 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 Cards API
======================== */ ======================== */
app.get("/api/cards", requireLogin, async (req, res) => { app.get("/api/cards", requireLogin, async (req, res) => {
const { race, page = 1, limit = 12 } = req.query; const { group_id, page = 1, limit = 12 } = req.query;
const offset = (page - 1) * limit; const offset = (page - 1) * limit;
try { try {
@ -330,31 +326,21 @@ app.get("/api/cards", requireLogin, async (req, res) => {
FROM cards c FROM cards c
LEFT JOIN card_groups cg ON cg.id = c.group_id 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 LEFT JOIN card_levels cl ON cl.card_id = c.id AND cl.level = 1
WHERE c.race = ? WHERE c.group_id = ?
LIMIT ? OFFSET ?`, LIMIT ? OFFSET ?`,
[race, parseInt(limit), parseInt(offset)], [group_id, parseInt(limit), parseInt(offset)]
); );
const [[{ total }]] = await db.query( const [[{ total }]] = await db.query(
"SELECT COUNT(*) as total FROM cards WHERE race = ?", "SELECT COUNT(*) as total FROM cards WHERE group_id = ?", [group_id]
[race],
); );
res.json({ res.json({ cards, total, page: parseInt(page), totalPages: Math.ceil(total / limit) });
cards,
total,
page: parseInt(page),
totalPages: Math.ceil(total / limit),
});
} catch (err) { } catch (err) {
console.error(err); console.error(err);
res.status(500).json({ error: "DB Fehler" }); res.status(500).json({ error: "DB Fehler" });
} }
}); });
/* ========================
Body Parser
======================== */
app.use(express.json()); app.use(express.json());
app.use(express.urlencoded({ extended: true })); app.use(express.urlencoded({ extended: true }));

167
public/js/quickmenu/lucky-box.js
View File

@ -1,40 +1,37 @@
const CARDS_PER_PAGE = 12; const CARDS_PER_PAGE = 12;
const RACES = [ let currentGroupId = null;
{ id: "ritter", label: "Ritter", icon: "⚔️" }, let currentPage = 1;
{ 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() { export async function loadLuckyBox() {
const body = document.getElementById("qm-body-glucksbox"); const body = document.getElementById("qm-body-glucksbox");
if (!body) return; if (!body) return;
body.innerHTML = renderShell(); body.innerHTML = renderShell();
attachTabEvents();
await loadCards(); 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();
}
} catch (err) {
console.error("Gruppen Fehler:", err);
}
} }
/* ── HTML-Grundstruktur ─────────────────────── */ /* ── Grundstruktur ──────────────────────────── */
function renderShell() { function renderShell() {
const tabs = RACES.map(
(r, i) => `
<button class="kd-tab ${i === 0 ? "kd-tab-active" : ""}" data-race="${r.id}">
<span class="kd-tab-icon">${r.icon}</span>
<span class="kd-tab-label">${r.label}</span>
</button>
`,
).join("");
return ` return `
<div class="kd-wrap"> <div class="kd-wrap">
<aside class="kd-tabs">${tabs}</aside> <aside class="kd-tabs" id="kd-tabs">
<div class="kd-loading">Lade...</div>
</aside>
<main class="kd-main"> <main class="kd-main">
<div class="kd-grid" id="kd-grid"></div> <div class="kd-grid" id="kd-grid"></div>
<div class="kd-pagination" id="kd-pagination"></div> <div class="kd-pagination" id="kd-pagination"></div>
@ -50,7 +47,6 @@ function renderShell() {
font-family: "Cinzel", serif; font-family: "Cinzel", serif;
} }
/* ── Tabs ── */
.kd-tabs { .kd-tabs {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -58,8 +54,9 @@ function renderShell() {
padding: 20px 10px; padding: 20px 10px;
background: rgba(0,0,0,0.25); background: rgba(0,0,0,0.25);
border-right: 2px solid #6b4b2a; border-right: 2px solid #6b4b2a;
min-width: 130px; min-width: 140px;
flex-shrink: 0; flex-shrink: 0;
overflow-y: auto;
} }
.kd-tab { .kd-tab {
@ -68,7 +65,7 @@ function renderShell() {
gap: 8px; gap: 8px;
padding: 10px 14px; padding: 10px 14px;
background: linear-gradient(135deg, #2a1a08, #1a0f04); background: linear-gradient(135deg, #2a1a08, #1a0f04);
border: 1px solid #6b4b2a; border: 2px solid #6b4b2a;
border-radius: 8px; border-radius: 8px;
color: #c8a86a; color: #c8a86a;
font-family: "Cinzel", serif; font-family: "Cinzel", serif;
@ -81,22 +78,23 @@ function renderShell() {
} }
.kd-tab:hover { .kd-tab:hover {
border-color: #f0d060;
color: #f0d9a6; color: #f0d9a6;
background: linear-gradient(135deg, #3a2810, #2a1a08); filter: brightness(1.2);
box-shadow: 0 0 10px rgba(200,160,60,0.2);
} }
.kd-tab-active { .kd-tab-active {
background: linear-gradient(135deg, #6b4b2a, #3c2414) !important; color: #fff !important;
border-color: #f0d060 !important; box-shadow: inset 0 0 10px rgba(0,0,0,0.5), 0 0 14px rgba(200,160,60,0.3) !important;
color: #fff5cc !important;
box-shadow: inset 0 0 10px rgba(0,0,0,0.4), 0 0 12px rgba(200,160,60,0.3) !important;
} }
.kd-tab-icon { font-size: 18px; } .kd-tab-dot {
width: 12px;
height: 12px;
border-radius: 50%;
flex-shrink: 0;
border: 1px solid rgba(255,255,255,0.3);
}
/* ── Main ── */
.kd-main { .kd-main {
flex: 1; flex: 1;
display: flex; display: flex;
@ -105,7 +103,6 @@ function renderShell() {
overflow: hidden; overflow: hidden;
} }
/* ── Grid ── */
.kd-grid { .kd-grid {
flex: 1; flex: 1;
display: grid; display: grid;
@ -115,7 +112,6 @@ function renderShell() {
align-content: start; align-content: start;
} }
/* ── Karte ── */
.kd-card { .kd-card {
position: relative; position: relative;
border: 2px solid #6b4b2a; border: 2px solid #6b4b2a;
@ -155,7 +151,6 @@ function renderShell() {
line-height: 1.3; line-height: 1.3;
} }
/* Angriff / Verteidigung Badges */
.kd-stat-atk { .kd-stat-atk {
position: absolute; position: absolute;
bottom: 28px; bottom: 28px;
@ -184,7 +179,6 @@ function renderShell() {
padding: 1px 5px; padding: 1px 5px;
} }
/* ── Leer-Zustand ── */
.kd-empty { .kd-empty {
grid-column: 1 / -1; grid-column: 1 / -1;
text-align: center; text-align: center;
@ -193,7 +187,6 @@ function renderShell() {
padding: 60px 0; padding: 60px 0;
} }
/* ── Pagination ── */
.kd-pagination { .kd-pagination {
display: flex; display: flex;
align-items: center; align-items: center;
@ -217,7 +210,6 @@ function renderShell() {
.kd-page-btn:hover { .kd-page-btn:hover {
border-color: #f0d060; border-color: #f0d060;
background: linear-gradient(#5a3820, #2a1404);
} }
.kd-page-btn:disabled { .kd-page-btn:disabled {
@ -238,13 +230,11 @@ function renderShell() {
text-align: center; text-align: center;
} }
/* ── Loading ── */
.kd-loading { .kd-loading {
grid-column: 1 / -1;
text-align: center; text-align: center;
color: #8b6a3c; color: #8b6a3c;
font-size: 15px; font-size: 15px;
padding: 60px 0; padding: 20px 0;
animation: kd-pulse 1.2s infinite; animation: kd-pulse 1.2s infinite;
} }
@ -256,16 +246,34 @@ function renderShell() {
`; `;
} }
/* ── Tab-Klick ─────────────────────────────── */ /* ── Tabs aus DB ────────────────────────────── */
function attachTabEvents() { function renderTabs(groups) {
document.querySelectorAll(".kd-tab").forEach((btn) => { const container = document.getElementById("kd-tabs");
if (!container) 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("");
container.querySelectorAll(".kd-tab").forEach((btn) => {
btn.addEventListener("click", async () => { btn.addEventListener("click", async () => {
document const color = btn.style.borderColor;
.querySelectorAll(".kd-tab") container.querySelectorAll(".kd-tab").forEach((b) => {
.forEach((b) => b.classList.remove("kd-tab-active")); b.classList.remove("kd-tab-active");
b.style.background = "";
});
btn.classList.add("kd-tab-active"); btn.classList.add("kd-tab-active");
currentRace = btn.dataset.race; btn.style.background = `${color}33`;
currentPage = 1; currentGroupId = parseInt(btn.dataset.group);
currentPage = 1;
await loadCards(); await loadCards();
}); });
}); });
@ -273,7 +281,7 @@ function attachTabEvents() {
/* ── Karten laden ───────────────────────────── */ /* ── Karten laden ───────────────────────────── */
async function loadCards() { async function loadCards() {
const grid = document.getElementById("kd-grid"); const grid = document.getElementById("kd-grid");
const pagination = document.getElementById("kd-pagination"); const pagination = document.getElementById("kd-pagination");
if (!grid) return; if (!grid) return;
@ -281,72 +289,49 @@ async function loadCards() {
pagination.innerHTML = ""; pagination.innerHTML = "";
try { try {
const res = await fetch( const res = await fetch(`/api/cards?group_id=${currentGroupId}&page=${currentPage}&limit=${CARDS_PER_PAGE}`);
`/api/cards?race=${currentRace}&page=${currentPage}&limit=${CARDS_PER_PAGE}`,
);
if (!res.ok) throw new Error("API Fehler"); if (!res.ok) throw new Error("API Fehler");
const data = await res.json(); const data = await res.json();
// data = { cards: [...], total: N, page: N, totalPages: N }
renderGrid(grid, data.cards); renderGrid(grid, data.cards);
renderPagination(pagination, data.totalPages, data.total); renderPagination(pagination, data.totalPages, data.total);
} catch { } catch {
grid.innerHTML = `<div class="kd-empty">Noch keine Karten für diese Rasse vorhanden.</div>`; grid.innerHTML = `<div class="kd-empty">Noch keine Karten für diese Gruppe vorhanden.</div>`;
} }
} }
/* ── Grid rendern ───────────────────────────── */ /* ── Grid ───────────────────────────────────── */
function renderGrid(grid, cards) { function renderGrid(grid, cards) {
if (!cards || !cards.length) { if (!cards || !cards.length) {
grid.innerHTML = `<div class="kd-empty">Noch keine Karten für diese Rasse vorhanden.</div>`; grid.innerHTML = `<div class="kd-empty">Noch keine Karten für diese Gruppe vorhanden.</div>`;
return; return;
} }
grid.innerHTML = cards.map((c) => `
grid.innerHTML = cards
.map(
(c) => `
<div class="kd-card" title="${c.name}"> <div class="kd-card" title="${c.name}">
<img src="/images/cards/${c.image}" alt="${c.name}" <img src="/images/cards/${c.image}" alt="${c.name}"
onerror="this.src='/images/cards/placeholder.png'"> onerror="this.src='/images/avatar_placeholder.svg'">
${c.attack !== undefined ? `<span class="kd-stat-atk">${c.attack}</span>` : ""} ${c.attack != null ? `<span class="kd-stat-atk">${c.attack}</span>` : ""}
${c.defense !== undefined ? `<span class="kd-stat-def">${c.defense}</span>` : ""} ${c.defense != null ? `<span class="kd-stat-def">${c.defense}</span>` : ""}
<div class="kd-card-name">${c.name}</div> <div class="kd-card-name">${c.name}</div>
</div> </div>
`, `).join("");
)
.join("");
} }
/* ── Pagination rendern ─────────────────────── */ /* ── Pagination ─────────────────────────────── */
function renderPagination(pagination, totalPages, total) { function renderPagination(pagination, totalPages, total) {
if (totalPages <= 1) return; if (totalPages <= 1) return;
const pages = Array.from({ length: totalPages }, (_, i) => i + 1);
pagination.innerHTML = ` pagination.innerHTML = `
<button class="kd-page-btn" id="kd-prev" ${currentPage === 1 ? "disabled" : ""}>◀</button> <button class="kd-page-btn" id="kd-prev" ${currentPage === 1 ? "disabled" : ""}>◀</button>
${pages ${Array.from({ length: totalPages }, (_, i) => i + 1).map((p) => `
.map(
(p) => `
<button class="kd-page-btn ${p === currentPage ? "kd-page-active" : ""}" data-page="${p}">${p}</button> <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> <button class="kd-page-btn" id="kd-next" ${currentPage === totalPages ? "disabled" : ""}>▶</button>
<span class="kd-page-info">${total} Karten</span> <span class="kd-page-info">${total} Karten</span>
`; `;
document.getElementById("kd-prev")?.addEventListener("click", async () => { document.getElementById("kd-prev")?.addEventListener("click", async () => {
if (currentPage > 1) { if (currentPage > 1) { currentPage--; await loadCards(); }
currentPage--;
await loadCards();
}
}); });
document.getElementById("kd-next")?.addEventListener("click", async () => { document.getElementById("kd-next")?.addEventListener("click", async () => {
if (currentPage < totalPages) { if (currentPage < totalPages) { currentPage++; await loadCards(); }
currentPage++;
await loadCards();
}
}); });
pagination.querySelectorAll("[data-page]").forEach((btn) => { pagination.querySelectorAll("[data-page]").forEach((btn) => {
btn.addEventListener("click", async () => { btn.addEventListener("click", async () => {