diff --git a/public/css/building.css b/public/css/building.css index ad4da2e..4d48ba8 100644 --- a/public/css/building.css +++ b/public/css/building.css @@ -543,38 +543,6 @@ body { } } -/* ========================= - Schwarzmarkt -========================= */ - -.market-page { - padding: 8px 12px; - - border: 1px solid #8b6a3c; - - background: rgba(0, 0, 0, 0.15); -} - -.market-page.owned { - color: #3cff3c; -} - -.market-page.buy { - cursor: pointer; - - background: #6b4b2a; - - color: white; -} - -.market-page.buy:hover { - background: #8b6a3c; -} - -.market-page.locked { - opacity: 0.4; -} - /* ========================= Schwarzmarkt Tabs ========================= */ @@ -582,32 +550,43 @@ body { .market-tabs { display: flex; gap: 6px; - margin-bottom: 10px; + margin-bottom: 16px; + border-bottom: 2px solid #8b6a3c; + padding-bottom: 8px; } .market-tab { - padding: 8px 14px; + padding: 8px 20px; - background: #5c3b20; + background: linear-gradient(#5c3b20, #3a2513); color: #e7d9b4; border: 1px solid #8b6a3c; + border-radius: 4px; cursor: pointer; - font-family: "Cinzel", serif; + font-size: 13px; + font-weight: bold; + + letter-spacing: 0.5px; + transition: 0.2s; } .market-tab:hover { - background: #8b6a3c; + background: linear-gradient(#8b6a3c, #5c3b20); + box-shadow: 0 0 8px rgba(200, 160, 80, 0.4); } .market-tab.active { - background: #d4b97a; + background: linear-gradient(#d4b97a, #9c7a3a); color: #2b1b0f; + border-color: #f0d9a6; } -/* Tab Inhalte */ +/* ========================= + Schwarzmarkt Tab Inhalte +========================= */ .market-tab-content { display: none; @@ -617,21 +596,147 @@ body { display: block; } +/* ========================= + Schwarzmarkt Seiten Grid +========================= */ + #market-pages { display: grid; - - grid-template-columns: repeat(4, 120px); - - gap: 14px; - - justify-content: center; - - margin-top: 15px; - - /* Ehemals doppelt definiert – zusammengeführt */ + grid-template-columns: repeat(4, 1fr); + gap: 16px; + padding: 10px 4px; } +/* ========================= + Schwarzmarkt Slot Karten +========================= */ + +.market-slot { + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-between; + + padding: 14px 10px; + gap: 8px; + + border-radius: 8px; + border: 2px solid #8b6a3c; + + background: linear-gradient( + 160deg, + rgba(80, 50, 20, 0.6), + rgba(40, 25, 10, 0.8) + ); + + box-shadow: + 0 4px 12px rgba(0, 0, 0, 0.4), + inset 0 1px 0 rgba(255, 220, 100, 0.1); + + transition: 0.2s; + min-height: 150px; + position: relative; +} + +/* Besessen */ + +.market-slot.owned { + border-color: #3caa3c; + background: linear-gradient( + 160deg, + rgba(20, 60, 20, 0.6), + rgba(10, 35, 10, 0.8) + ); +} + +.market-slot.owned .bag-status { + font-size: 22px; + color: #3cff3c; + text-shadow: 0 0 8px #3cff3c; +} + +/* Kaufbar */ + +.market-slot.buy { + cursor: pointer; + border-color: #caa24b; +} + +.market-slot.buy:hover { + transform: translateY(-3px); + border-color: #f0d060; + box-shadow: + 0 8px 20px rgba(0, 0, 0, 0.5), + 0 0 15px rgba(200, 160, 60, 0.3); +} + +/* Gesperrt */ + +.market-slot.locked { + opacity: 0.4; + filter: grayscale(60%); +} + +/* ========================= + Schwarzmarkt Slot Inhalt +========================= */ + .bag-icon { - width: 60px; - height: 60px; + width: 64px; + height: 64px; + object-fit: contain; + filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6)); +} + +.bag-label { + font-family: "Cinzel", serif; + font-size: 12px; + font-weight: bold; + color: #e7d9b4; + letter-spacing: 0.5px; +} + +.bag-price { + font-family: "Cinzel", serif; + font-size: 14px; + font-weight: bold; + color: #ffd700; + text-shadow: 0 0 6px rgba(255, 215, 0, 0.5); + display: flex; + align-items: center; + gap: 4px; +} + +.buy-button { + padding: 6px 16px !important; + font-size: 12px !important; + font-family: "Cinzel", serif !important; + font-weight: bold !important; + background: linear-gradient(#7a5a2a, #caa24b) !important; + border: 1px solid #e0c67b !important; + border-radius: 4px; + color: #1a1206 !important; + cursor: pointer; + transition: 0.2s; + margin-top: 0 !important; + width: 100%; +} + +.buy-button:hover { + transform: scale(1.05); + box-shadow: + 0 0 8px #ffd66b, + 0 0 18px #caa24b; +} + +/* Placeholder Texte */ + +.market-placeholder { + text-align: center; + padding: 30px 20px; + color: #8b6a3c; + font-family: "Cinzel", serif; + font-size: 14px; + font-style: italic; + letter-spacing: 0.5px; } diff --git a/public/js/buildings/schwarzmarkt.js b/public/js/buildings/schwarzmarkt.js index 11d567b..d11861e 100644 --- a/public/js/buildings/schwarzmarkt.js +++ b/public/js/buildings/schwarzmarkt.js @@ -26,11 +26,11 @@ Geheimhandel
-

Noch keine Artefakte verfügbar

+

⚗️ Noch keine Artefakte verfügbar

-

Schwarzmarkt Angebote folgen bald

+

🤫 Schwarzmarkt Angebote folgen bald...

@@ -59,41 +59,26 @@ async function loadPages() { if (data.ownedPages.includes(i)) { html += `
- - - -
-✔ -
- + +
Seite ${i}
+
✔
`; } else if (price) { html += `
- - - -
-${price.price} 🪙 -
- - - + +
Seite ${i}
+
${price.price} 🪙
+
`; } else { html += `
- - - -
-🔒 -
- + +
Seite ${i}
+
🔒
`; } diff --git a/public/js/map-ui.js b/public/js/map-ui.js index 07647da..aeeac4f 100644 --- a/public/js/map-ui.js +++ b/public/js/map-ui.js @@ -39,10 +39,9 @@ document.querySelectorAll(".building").forEach((building) => { e.preventDefault(); try { - const name = building.querySelector("title")?.textContent || "Gebäude"; const url = building.getAttribute("href"); - title.innerText = name; + title.innerText = "Lädt..."; popup.style.left = "50%"; popup.style.top = "50%"; @@ -55,7 +54,8 @@ document.querySelectorAll(".building").forEach((building) => { if (!res.ok) throw new Error("API Fehler"); const data = await res.json(); - console.log("Gebäude API Antwort:", data); + + title.innerText = data.name; const infoTab = document.getElementById("tab-info"); const actionsTab = document.getElementById("tab-actions");