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

ahnje

Browse Source
This commit is contained in:
cay 2026-04-10 12:10:23 +01:00
parent 51ca9a27f4
commit 74752fbd75
1 changed files with 51 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
public/js/gaststaette/glucksspiel.js
View File

@ -293,44 +293,46 @@ function renderShell() {
.gs-combine-grid {
flex: 1;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
overflow-y: auto;
padding: 10px 12px;
align-content: start;
display: flex;
align-items: flex-start;
justify-content: center;
padding: 20px 12px 10px;
overflow: hidden;
}
/* Kombinier-Karte (gleich wie gs-card, grüner Rand) */
.gs-combine-card {
/* Gestapelter Kartenstapel */
.gs-card-stack {
position: relative;
/* Breite wie eine Karte in der Sammlung (~160px bei 5-Spalten-Grid) */
width: 140px;
aspect-ratio: 3/4;
cursor: pointer;
}
.gs-stack-card {
position: absolute;
width: 100%;
aspect-ratio: 3/4;
border: 2px solid #4a8b2a;
border-radius: 8px;
overflow: visible;
overflow: hidden;
background: #0f1a04;
cursor: pointer;
transition: transform 0.2s, border-color 0.2s;
aspect-ratio: 3/4;
display: flex;
flex-direction: column;
}
.gs-combine-card:hover {
border-color: #ff4444;
transform: scale(1.05);
z-index: 10;
}
.gs-combine-card:hover::after {
content: "✕";
position: absolute; inset: 0;
background: rgba(180,0,0,0.55);
display: flex; align-items: center; justify-content: center;
font-size: 24px; color: #fff;
border-radius: 6px; pointer-events: none;
}
.gs-combine-card img {
.gs-stack-card img {
width: 100%; height: 100%;
object-fit: cover; display: block;
border-radius: 6px;
}
.gs-card-stack:hover .gs-stack-card:last-child {
border-color: #ff4444;
}
.gs-card-stack:hover .gs-stack-card:last-child::after {
content: "✕ Entfernen";
position: absolute; inset: 0;
background: rgba(180,0,0,0.6);
display: flex; align-items: center; justify-content: center;
font-family: "Cinzel", serif; font-size: 11px;
color: #fff; border-radius: 6px; pointer-events: none;
}
.gs-combine-count {
@ -528,20 +530,34 @@ function renderCombineField() {
hint.style.display = "none";
grid.innerHTML = gs_combineCards.map((c, i) => `
<div class="gs-combine-card" data-index="${i}" title="Entfernen: ${c.name}">
// Karten als gestapelter Stapel – jede Karte leicht versetzt
const offset = Math.min(6, 40 / gs_combineCards.length); // max 6px versatz
const stackHeight = offset * (gs_combineCards.length - 1); // extra höhe für stapel
const stackCards = gs_combineCards.map((c, i) => `
<div class="gs-stack-card" style="
top: ${i * offset}px;
left: ${i * offset * 0.5}px;
z-index: ${i};
${i < gs_combineCards.length - 1 ? 'filter: brightness(0.75);' : ''}
">
<img src="/images/cards/${c.image}" alt="${c.name}"
onerror="this.src='/images/avatar_placeholder.svg'">
${c.cooldown != null ? `<span class="gs-stat-cd">${c.cooldown}</span>` : ""}
</div>
`).join("");
grid.querySelectorAll(".gs-combine-card").forEach((el) => {
el.addEventListener("click", () => {
removeFromField(parseInt(el.dataset.index));
});
grid.innerHTML = `
<div class="gs-card-stack" style="margin-top:${stackHeight}px;" title="Klicken zum Entfernen">
${stackCards}
</div>`;
// Klick auf Stapel → oberste Karte entfernen
grid.querySelector(".gs-card-stack").addEventListener("click", () => {
removeFromField(gs_combineCards.length - 1);
});
count.textContent = `${gs_combineCards.length} Karte${gs_combineCards.length !== 1 ? "n" : ""} im Feld`;
count.textContent = `${gs_combineCards.length} Karte${gs_combineCards.length !== 1 ? "n" : ""} im Stapel`;
btn.disabled = gs_combineCards.length < 2;
}