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

rtzjssr

Browse Source
This commit is contained in:
cay 2026-04-11 14:59:15 +01:00
parent 350c2e7bdd
commit a1e75f6229
2 changed files with 22 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
public/css/bazaar.css
View File

@ -142,7 +142,6 @@
background: #1a0f04; background: #1a0f04;
cursor: pointer; cursor: pointer;
transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
aspect-ratio: 3/4;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
@ -152,13 +151,19 @@
box-shadow: 0 8px 24px rgba(0,0,0,0.7), 0 0 14px rgba(200,160,60,0.3); box-shadow: 0 8px 24px rgba(0,0,0,0.7), 0 0 14px rgba(200,160,60,0.3);
z-index: 10; z-index: 10;
} }
.baz-card-img {
position: relative;
aspect-ratio: 3/4;
overflow: visible;
flex-shrink: 0;
}
.baz-card img { .baz-card img {
width: 100%; height: 100%; width: 100%; height: 100%;
object-fit: cover; display: block; object-fit: cover; display: block;
border-radius: 6px 6px 0 0; border-radius: 6px 6px 0 0;
} }
/* Stats */ /* Stats – relativ zur Bild-Wrapper */
.baz-stat-atk { .baz-stat-atk {
position: absolute; right: 8px; top: 38%; position: absolute; right: 8px; top: 38%;
transform: translateY(-50%); transform: translateY(-50%);
@ -176,7 +181,7 @@
padding: 2px 4px; z-index: 5; padding: 2px 4px; z-index: 5;
} }
.baz-stat-cd { .baz-stat-cd {
position: absolute; bottom: 32px; right: 5px; position: absolute; bottom: 6px; right: 5px;
width: 18px; height: 18px; border-radius: 50%; width: 18px; height: 18px; border-radius: 50%;
background: rgba(0,0,0,0.75); border: 1px solid #f0d060; background: rgba(0,0,0,0.75); border: 1px solid #f0d060;
display: flex; align-items: center; justify-content: center; display: flex; align-items: center; justify-content: center;
@ -205,18 +210,21 @@
.baz-badge-range { background: rgba(30,20,0,0.82); border: 1px solid #e8b84b; color: #e8b84b; } .baz-badge-range { background: rgba(30,20,0,0.82); border: 1px solid #e8b84b; color: #e8b84b; }
.baz-badge-race { background: rgba(0,25,0,0.82); border: 1px solid #7de87d; color: #7de87d; } .baz-badge-race { background: rgba(0,25,0,0.82); border: 1px solid #7de87d; color: #7de87d; }
/* Preis-Badge */ /* Preis-Leiste unter dem Bild */
.baz-price { .baz-price {
position: absolute; bottom: 0; left: 0; right: 0; display: flex;
display: flex; justify-content: center; gap: 4px; flex-wrap: wrap; justify-content: center;
padding: 2px 3px 3px; gap: 4px;
background: linear-gradient(transparent, rgba(0,0,0,0.85)); flex-wrap: wrap;
padding: 4px 4px;
background: rgba(0,0,0,0.6);
border-top: 1px solid #3a2810;
border-radius: 0 0 6px 6px; border-radius: 0 0 6px 6px;
z-index: 7; pointer-events: none; min-height: 20px;
} }
.baz-price-gold, .baz-price-silver { .baz-price-wood, .baz-price-iron,
font-family: "Cinzel", serif; font-size: 8px; font-weight: bold; .baz-price-gold, .baz-price-gems, .baz-price-silver {
line-height: 1.3; font-family: "Cinzel", serif; font-size: 9px; font-weight: bold; line-height: 1.4;
} }
.baz-price-wood { color: #c8a050; } .baz-price-wood { color: #c8a050; }
.baz-price-iron { color: #a0b0c0; } .baz-price-iron { color: #a0b0c0; }

2
public/js/buildings/bazaar.js
View File

@ -145,6 +145,7 @@ async function loadShopCards() {
return ` return `
<div class="baz-card" data-card-id="${c.id}" title="${c.name}"> <div class="baz-card" data-card-id="${c.id}" title="${c.name}">
<div class="baz-card-img">
<img src="/images/cards/${c.image}" alt="${c.name}" <img src="/images/cards/${c.image}" alt="${c.name}"
onerror="this.src='/images/avatar_placeholder.svg'"> onerror="this.src='/images/avatar_placeholder.svg'">
${c.attack != null ? `<span class="baz-stat-atk">${c.attack}</span>` : ""} ${c.attack != null ? `<span class="baz-stat-atk">${c.attack}</span>` : ""}
@ -156,6 +157,7 @@ async function loadShopCards() {
${c.range != null ? `<span class="baz-badge-range">${BAZ_SVG_RANGE}&thinsp;${c.range}</span>` : ""} ${c.range != null ? `<span class="baz-badge-range">${BAZ_SVG_RANGE}&thinsp;${c.range}</span>` : ""}
${c.race != null ? `<span class="baz-badge-race">${BAZ_SVG_RACE}&thinsp;${c.race}</span>` : ""} ${c.race != null ? `<span class="baz-badge-race">${BAZ_SVG_RACE}&thinsp;${c.race}</span>` : ""}
</div>` : ""} </div>` : ""}
</div>
<div class="baz-price">${prices || "<span style='color:#8b6a3c;font-size:8px;'>Kostenlos</span>"}</div> <div class="baz-price">${prices || "<span style='color:#8b6a3c;font-size:8px;'>Kostenlos</span>"}</div>
</div>`; </div>`;
}).join(""); }).join("");