-
+
-
- Demnächst verfügbar…
-
+
+
-
+
-
- Demnächst verfügbar…
-
+
Demnächst verfügbar…
-
+
-
- Demnächst verfügbar…
-
+
Demnächst verfügbar…
-
- `;
+
`;
document.body.appendChild(popup);
- /* Schließen-Button */
popup.querySelector("#bazaar-close").addEventListener("click", closeBazaar);
- /* Tab-Klick */
popup.querySelectorAll(".mp-tab").forEach((btn) => {
btn.addEventListener("click", () => {
- popup.querySelectorAll(".mp-tab").forEach((t) => t.classList.remove("mp-tab-active"));
- popup.querySelectorAll(".mp-panel").forEach((p) => p.classList.remove("active"));
+ popup.querySelectorAll(".mp-tab").forEach(t => t.classList.remove("mp-tab-active"));
+ popup.querySelectorAll(".mp-panel").forEach(p => p.classList.remove("active"));
btn.classList.add("mp-tab-active");
document.getElementById(btn.dataset.tab)?.classList.add("active");
});
});
- /* Drag-fähig machen */
+ /* Drag */
const header = popup.querySelector(".qm-popup-header");
- let isDragging = false, startX, startY, startLeft, startTop;
- header.style.cursor = "grab";
- header.addEventListener("mousedown", (e) => {
- if (e.target.classList.contains("qm-popup-close")) return;
- isDragging = true;
- header.style.cursor = "grabbing";
- const rect = popup.getBoundingClientRect();
- startX = e.clientX; startY = e.clientY;
- startLeft = rect.left; startTop = rect.top;
- popup.style.transform = "none";
- popup.style.left = startLeft + "px";
- popup.style.top = startTop + "px";
+ let dragging=false, sx,sy,sl,st;
+ header.style.cursor="grab";
+ header.addEventListener("mousedown",(e)=>{
+ if(e.target.classList.contains("qm-popup-close"))return;
+ dragging=true; header.style.cursor="grabbing";
+ const r=popup.getBoundingClientRect();
+ sx=e.clientX;sy=e.clientY;sl=r.left;st=r.top;
+ popup.style.transform="none";
+ popup.style.left=sl+"px";popup.style.top=st+"px";
e.preventDefault();
});
- document.addEventListener("mousemove", (e) => {
- if (!isDragging) return;
- popup.style.left = (startLeft + (e.clientX - startX)) + "px";
- popup.style.top = (startTop + (e.clientY - startY)) + "px";
- });
- document.addEventListener("mouseup", () => {
- if (!isDragging) return;
- isDragging = false;
- header.style.cursor = "grab";
+ document.addEventListener("mousemove",(e)=>{
+ if(!dragging)return;
+ popup.style.left=(sl+(e.clientX-sx))+"px";
+ popup.style.top=(st+(e.clientY-sy))+"px";
});
+ document.addEventListener("mouseup",()=>{dragging=false;header.style.cursor="grab";});
+}
+
+function updateCurrencyDisplay() {
+ const fmt = n => n.toLocaleString("de-DE");
+ const w=document.getElementById("baz-wood"); if(w) w.textContent=fmt(baz_wood);
+ const i=document.getElementById("baz-iron"); if(i) i.textContent=fmt(baz_iron);
+ const g=document.getElementById("baz-gold"); if(g) g.textContent=fmt(baz_gold);
+ const d=document.getElementById("baz-gems"); if(d) d.textContent=fmt(baz_gems);
+}
+
+async function loadShopCards() {
+ const grid = document.getElementById("baz-grid");
+ const pagination = document.getElementById("baz-pagination");
+ if (!grid) return;
+ grid.innerHTML = `
Lade Karten…
`;
+ if (pagination) pagination.innerHTML = "";
+
+ try {
+ const res = await fetch(`/api/bazaar/cards?page=${baz_page}&limit=${BAZAAR_PER_PAGE}`);
+ if (!res.ok) throw new Error(res.status);
+ const data = await res.json();
+
+ baz_wood=data.wood; baz_iron=data.iron; baz_gold=data.gold; baz_gems=data.gems;
+ updateCurrencyDisplay();
+
+ if (!data.cards.length) {
+ grid.innerHTML = `
Keine Karten verfügbar.
`;
+ return;
+ }
+
+ grid.innerHTML = data.cards.map((c) => {
+ const prices = [
+ c.price_wood > 0 ? `
🪵 ${c.price_wood}` : "",
+ c.price_iron > 0 ? `
⚙️ ${c.price_iron}` : "",
+ c.price_gold > 0 ? `
🪙 ${c.price_gold}` : "",
+ c.price_gems > 0 ? `
💎 ${c.price_gems}` : "",
+ ].filter(Boolean).join("");
+
+ return `
+
+
+ ${c.attack != null ? `
${c.attack}` : ""}
+ ${c.defends != null ? `
${c.defends}` : ""}
+ ${c.cooldown != null ? `
${c.cooldown}` : ""}
+ ${c.rarity ? `
${rarityImgs(c.rarity,11)}
` : ""}
+ ${(c.range != null || c.race != null) ? `
+
+ ${c.range != null ? `${BAZ_SVG_RANGE} ${c.range}` : ""}
+ ${c.race != null ? `${BAZ_SVG_RACE} ${c.race}` : ""}
+
` : ""}
+
${prices || "Kostenlos"}
+
`;
+ }).join("");
+
+ grid.querySelectorAll(".baz-card").forEach((el) => {
+ el.addEventListener("click", () => {
+ const card = data.cards.find(c => c.id === parseInt(el.dataset.cardId));
+ if (card) showBuyConfirm(card);
+ });
+ });
+
+ renderPagination(pagination, data.totalPages, data.total);
+ } catch (err) {
+ grid.innerHTML = `
Fehler beim Laden.
`;
+ console.error("[bazaar]", err);
+ }
+}
+
+function showBuyConfirm(card) {
+ document.getElementById("baz-confirm-modal")?.remove();
+
+ const canAfford =
+ baz_wood >= card.price_wood &&
+ baz_iron >= card.price_iron &&
+ baz_gold >= card.price_gold &&
+ baz_gems >= card.price_gems;
+
+ const priceStr = [
+ card.price_wood > 0 ? `🪵 ${card.price_wood} Holz` : "",
+ card.price_iron > 0 ? `⚙️ ${card.price_iron} Eisen` : "",
+ card.price_gold > 0 ? `🪙 ${card.price_gold} Gold` : "",
+ card.price_gems > 0 ? `💎 ${card.price_gems} Gems` : "",
+ ].filter(Boolean).join(" ");
+
+ const modal = document.createElement("div");
+ modal.id = "baz-confirm-modal";
+ modal.innerHTML = `
+
+
+
+
+
+
${card.name}
+
${priceStr || "Kostenlos"}
+ ${!canAfford ? `
⚠ Nicht genug Ressourcen
` : ""}
+
+
+
+
+
`;
+ document.getElementById("bazaar-popup").appendChild(modal);
+
+ modal.querySelector("#baz-cancel").onclick = () => modal.remove();
+ modal.querySelector(".baz-confirm-backdrop").onclick = () => modal.remove();
+ modal.querySelector("#baz-confirm").onclick = async () => {
+ const btn = modal.querySelector("#baz-confirm");
+ btn.disabled = true; btn.textContent = "…";
+ try {
+ const res = await fetch("/api/bazaar/buy", {
+ method:"POST", headers:{"Content-Type":"application/json"},
+ body: JSON.stringify({ card_id: card.id }),
+ });
+ const data = await res.json();
+ if (!res.ok) { btn.textContent = data.error||"Fehler"; setTimeout(()=>modal.remove(),2000); return; }
+ baz_wood=data.wood; baz_iron=data.iron; baz_gold=data.gold; baz_gems=data.gems;
+ updateCurrencyDisplay();
+ modal.remove();
+ showToast(`✅ ${card.name} gekauft!`);
+ await loadShopCards();
+ } catch { btn.textContent="Fehler"; setTimeout(()=>modal.remove(),2000); }
+ };
+}
+
+function renderPagination(el, totalPages, total) {
+ if (!el||!totalPages||totalPages<=1) return;
+ el.innerHTML = `
+
+ ${Array.from({length:totalPages},(_,i)=>i+1).map(p=>
+ `
`
+ ).join("")}
+
+
${total} Karten`;
+ el.querySelector("#baz-prev")?.addEventListener("click",async()=>{if(baz_page>1){baz_page--;await loadShopCards();}});
+ el.querySelector("#baz-next")?.addEventListener("click",async()=>{if(baz_page
btn.addEventListener("click",async()=>{baz_page=parseInt(btn.dataset.page);await loadShopCards();}));
+}
+
+function showToast(msg) {
+ const t=document.createElement("div"); t.className="baz-toast"; t.textContent=msg;
+ document.body.appendChild(t); setTimeout(()=>t.remove(),2800);
}
function closeBazaar() {
@@ -109,17 +254,14 @@ function closeBazaar() {
document.getElementById("qm-overlay")?.classList.remove("active");
}
-/* ── Öffentliche Funktion ── */
export function loadBazaar() {
loadCSS();
ensurePopup();
-
- const popup = document.getElementById("bazaar-popup");
- const overlay = document.getElementById("qm-overlay");
-
- popup.style.left = "50%";
- popup.style.top = "50%";
- popup.style.transform = "translate(-50%, -50%) scale(1)";
+ const popup=document.getElementById("bazaar-popup");
+ const overlay=document.getElementById("qm-overlay");
+ popup.style.left="50%"; popup.style.top="50%";
+ popup.style.transform="translate(-50%, -50%) scale(1)";
popup.classList.add("active");
overlay?.classList.add("active");
+ if (!baz_initialized) { baz_initialized=true; baz_page=1; loadShopCards(); }
}
diff --git a/routes/bazaar.route.js b/routes/bazaar.route.js
new file mode 100644
index 0000000..980b109
--- /dev/null
+++ b/routes/bazaar.route.js
@@ -0,0 +1,153 @@
+/* ============================================================
+ routes/bazaar.route.js
+============================================================ */
+
+const express = require("express");
+const router = express.Router();
+const db = require("../database/database");
+
+function requireLogin(req, res, next) {
+ if (!req.session?.user) return res.status(401).json({ error: "Nicht eingeloggt" });
+ next();
+}
+
+function getMaxRarity(playerLevel) {
+ if (playerLevel < 10) return 2;
+ if (playerLevel < 20) return 3;
+ if (playerLevel < 30) return 4;
+ if (playerLevel < 40) return 5;
+ return 6;
+}
+
+/* ════════════════════════════════════════════
+ GET /api/bazaar/cards?page=1&limit=18
+════════════════════════════════════════════ */
+router.get("/bazaar/cards", requireLogin, async (req, res) => {
+ const userId = req.session.user.id;
+ const page = parseInt(req.query.page) || 1;
+ const limit = parseInt(req.query.limit) || 18;
+ const offset = (page - 1) * limit;
+
+ try {
+ const [[account]] = await db.query("SELECT level FROM accounts WHERE id = ?", [userId]);
+ const maxRarity = getMaxRarity(account?.level ?? 1);
+
+ const [cards] = await db.query(
+ `SELECT
+ c.id, c.name, c.image, c.rarity,
+ c.attack, c.defends, c.cooldown, c.\`range\`, c.\`race\`,
+ COALESCE(p.price_wood, 0) AS price_wood,
+ COALESCE(p.price_iron, 0) AS price_iron,
+ COALESCE(p.price_gold, 0) AS price_gold,
+ COALESCE(p.price_gems, 0) AS price_gems
+ FROM cards c
+ LEFT JOIN card_shop_prices p ON p.rarity = c.rarity
+ WHERE c.rarity <= ?
+ ORDER BY c.rarity ASC, c.name ASC
+ LIMIT ? OFFSET ?`,
+ [maxRarity, limit, offset]
+ );
+
+ const [[{ total }]] = await db.query(
+ "SELECT COUNT(*) AS total FROM cards WHERE rarity <= ?", [maxRarity]
+ );
+
+ const [[currency]] = await db.query(
+ "SELECT wood, iron, gold, gems FROM account_currency WHERE account_id = ?", [userId]
+ );
+
+ res.json({
+ cards, total, page,
+ totalPages: Math.ceil(total / limit),
+ wood: currency?.wood || 0,
+ iron: currency?.iron || 0,
+ gold: currency?.gold || 0,
+ gems: currency?.gems || 0,
+ });
+ } catch (err) {
+ console.error("[bazaar/cards]", err);
+ res.status(500).json({ error: "DB Fehler" });
+ }
+});
+
+/* ════════════════════════════════════════════
+ POST /api/bazaar/buy { card_id }
+════════════════════════════════════════════ */
+router.post("/bazaar/buy", requireLogin, async (req, res) => {
+ const userId = req.session.user.id;
+ const { card_id } = req.body;
+ if (!card_id) return res.status(400).json({ error: "card_id fehlt." });
+
+ try {
+ const [[card]] = await db.query(
+ `SELECT c.id, c.name, c.rarity,
+ COALESCE(p.price_wood, 0) AS price_wood,
+ COALESCE(p.price_iron, 0) AS price_iron,
+ COALESCE(p.price_gold, 0) AS price_gold,
+ COALESCE(p.price_gems, 0) AS price_gems
+ FROM cards c
+ LEFT JOIN card_shop_prices p ON p.rarity = c.rarity
+ WHERE c.id = ?`, [card_id]
+ );
+ if (!card) return res.status(404).json({ error: "Karte nicht gefunden." });
+
+ const [[account]] = await db.query("SELECT level FROM accounts WHERE id = ?", [userId]);
+ if (parseInt(card.rarity) > getMaxRarity(account?.level ?? 1)) {
+ return res.status(403).json({ error: "Dein Level reicht für diese Karte nicht aus." });
+ }
+
+ const [[currency]] = await db.query(
+ "SELECT wood, iron, gold, gems FROM account_currency WHERE account_id = ?", [userId]
+ );
+ if (!currency) return res.status(400).json({ error: "Keine Währungsdaten gefunden." });
+
+ const checks = [
+ { key: "wood", label: "Holz" },
+ { key: "iron", label: "Eisen" },
+ { key: "gold", label: "Gold" },
+ { key: "gems", label: "Gems" },
+ ];
+ for (const { key, label } of checks) {
+ const need = card[`price_${key}`];
+ if (need > 0 && (currency[key] || 0) < need) {
+ return res.status(400).json({
+ error: `Nicht genug ${label}. Benötigt: ${need}, Vorhanden: ${currency[key] || 0}`
+ });
+ }
+ }
+
+ await db.query(
+ `UPDATE account_currency
+ SET wood = wood - ?,
+ iron = iron - ?,
+ gold = gold - ?,
+ gems = gems - ?
+ WHERE account_id = ?`,
+ [card.price_wood, card.price_iron, card.price_gold, card.price_gems, userId]
+ );
+
+ await db.query(
+ `INSERT INTO user_cards (user_id, card_id, amount) VALUES (?, ?, 1)
+ ON DUPLICATE KEY UPDATE amount = amount + 1`,
+ [userId, card_id]
+ );
+
+ const [[updated]] = await db.query(
+ "SELECT wood, iron, gold, gems FROM account_currency WHERE account_id = ?", [userId]
+ );
+
+ res.json({
+ success: true,
+ card: { id: card.id, name: card.name },
+ wood: updated?.wood || 0,
+ iron: updated?.iron || 0,
+ gold: updated?.gold || 0,
+ gems: updated?.gems || 0,
+ });
+ } catch (err) {
+ console.error("[bazaar/buy]", err);
+ res.status(500).json({ error: "DB Fehler" });
+ }
+});
+
+module.exports = router;
`;
+ return img.repeat(parseInt(rarity)||0);
+}
-/* ── CSS einmalig laden ── */
function loadCSS() {
if (!document.querySelector('link[href="/css/bazaar.css"]')) {
- const link = document.createElement("link");
- link.rel = "stylesheet";
- link.href = "/css/bazaar.css";
- document.head.appendChild(link);
+ const l = document.createElement("link");
+ l.rel = "stylesheet"; l.href = "/css/bazaar.css";
+ document.head.appendChild(l);
}
}
-/* ── Popup-Element erzeugen falls noch nicht vorhanden ── */
function ensurePopup() {
if (document.getElementById("bazaar-popup")) return;
-
const popup = document.createElement("div");
popup.id = "bazaar-popup";
popup.className = "qm-popup";
popup.innerHTML = `