This commit is contained in:
cay 2026-04-11 13:18:28 +01:00
parent 3319d581e0
commit fbf6e2c89f
2 changed files with 47 additions and 1 deletions

View File

@ -341,7 +341,7 @@
/* Kristalle mittig unten */
.bs-rarity {
position: absolute;
top: 72%;
top: 62%;
left: 0;
right: 0;
display: flex;
@ -353,6 +353,41 @@
pointer-events: none;
}
/* Reichweite & Laufen Badges */
.bs-range-race {
position: absolute;
top: 74%;
left: 0;
right: 0;
display: flex;
justify-content: center;
gap: 3px;
pointer-events: none;
z-index: 6;
}
.bs-badge-range,
.bs-badge-race {
display: flex;
align-items: center;
gap: 2px;
padding: 1px 4px;
border-radius: 20px;
font-family: "Cinzel", serif;
font-size: 8px;
font-weight: bold;
line-height: 1;
}
.bs-badge-range {
background: rgba(30, 20, 0, 0.85);
border: 1px solid #e8b84b;
color: #e8b84b;
}
.bs-badge-race {
background: rgba(0, 25, 0, 0.85);
border: 1px solid #7de87d;
color: #7de87d;
}
/* Kartenname ganz unten */
.bs-card-name {
position: absolute;

View File

@ -1,6 +1,12 @@
/* ================================
Kristall-Mapping (aus carddeck.js)
================================ */
/* ================================
Stat-Icons SVG
================================ */
const BS_SVG_RANGE = `<svg viewBox="0 0 16 16" width="10" height="10" style="display:inline;vertical-align:middle;flex-shrink:0" fill="none" stroke="#e8b84b" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 2 Q1 8 4 14"/><line x1="4" y1="2" x2="4" y2="14" stroke-width="0.7" stroke-dasharray="2,1.5"/><line x1="4" y1="8" x2="13" y2="8"/><polyline points="11,6 13,8 11,10"/><line x1="5" y1="7" x2="4" y2="8"/><line x1="5" y1="9" x2="4" y2="8"/></svg>`;
const BS_SVG_RACE = `<svg viewBox="0 0 16 16" width="10" height="10" style="display:inline;vertical-align:middle;flex-shrink:0" fill="none" stroke="#7de87d" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="2.5" r="1.4" fill="#7de87d" stroke="none"/><line x1="9" y1="4" x2="8" y2="9"/><line x1="8" y1="9" x2="10" y2="14"/><line x1="8" y1="9" x2="6" y2="13"/><line x1="8.5" y1="5.5" x2="11" y2="8"/><line x1="8.5" y1="5.5" x2="6" y2="7"/></svg>`;
const RARITY_CRYSTALS = {
1: "roter-cristal.png",
2: "blauer-cristal.png",
@ -35,6 +41,11 @@ function cardHTML(card, isFront = true) {
${card?.defends != null ? `<span class="bs-stat-def">${card.defends}</span>` : ""}
${card?.cooldown != null ? `<span class="bs-stat-cd">${card.cooldown}</span>` : ""}
${card?.rarity ? `<div class="bs-rarity">${rarityImgs(card.rarity, 11)}</div>` : ""}
${(card?.range != null || card?.race != null) ? `
<div class="bs-range-race">
${card?.range != null ? `<span class="bs-badge-range">${BS_SVG_RANGE}&thinsp;${card.range}</span>` : ""}
${card?.race != null ? `<span class="bs-badge-race">${BS_SVG_RACE}&thinsp;${card.race}</span>` : ""}
</div>` : ""}
<div class="bs-card-name">${card?.name || ""}</div>
`;
}