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

srthsert

Browse Source
This commit is contained in:
cay 2026-04-12 10:27:28 +01:00
parent 74f86e36f2
commit c9dbd6c842
2 changed files with 64 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
public/css/1v1.css
View File

@ -257,9 +257,9 @@ body {
} }
.card-slot { .card-slot {
width: calc(var(--s) * 90); width: calc(var(--s) * 105);
height: calc(var(--s) * 140); height: calc(var(--s) * 160);
border-radius: calc(var(--s) * 10); border-radius: calc(var(--s) * 9);
border: 2px dashed rgba(255, 215, 80, 0.35); border: 2px dashed rgba(255, 215, 80, 0.35);
background: rgba(0, 0, 0, 0.25); background: rgba(0, 0, 0, 0.25);
backdrop-filter: blur(3px); backdrop-filter: blur(3px);
@ -829,3 +829,59 @@ body {
letter-spacing: 1px; letter-spacing: 1px;
transition: color 0.3s; transition: color 0.3s;
} }
/* ═══════════════════════════════════════════════════════════
PLACEMENT ZONES – Linker Spieler (Slots 1–3) & Rechter Spieler (Slots 9–11)
═══════════════════════════════════════════════════════════ */
/* Linke Zone (Slots 1–3): Gold/Amber für Spieler 1 */
.board.my-side-left .card-row .card-slot:nth-child(-n+3),
.board.my-side-right .card-row .card-slot:nth-last-child(-n+3) {
border-color: rgba(200, 150, 42, 0.75);
background: rgba(180, 120, 20, 0.18);
box-shadow:
0 0 0 1px rgba(200, 150, 42, 0.2),
0 calc(var(--s) * 4) calc(var(--s) * 14) rgba(0, 0, 0, 0.3),
inset 0 0 calc(var(--s) * 20) rgba(200, 150, 42, 0.08);
}
/* Hover auf eigener Zone: stärker leuchten */
.board.my-side-left .card-row .card-slot:nth-child(-n+3):hover,
.board.my-side-right .card-row .card-slot:nth-last-child(-n+3):hover {
border-color: rgba(240, 190, 60, 1);
background: rgba(200, 140, 30, 0.28);
box-shadow:
0 0 0 2px rgba(240, 190, 60, 0.35),
0 0 calc(var(--s) * 18) rgba(200, 150, 42, 0.4);
transform: translateY(calc(var(--s) * -2));
}
/* Zonen-Label oben im Slot (kleine Markierung) */
.board.my-side-left .card-row .card-slot:nth-child(-n+3)::after,
.board.my-side-right .card-row .card-slot:nth-last-child(-n+3)::after {
content: "⚔";
position: absolute;
top: calc(var(--s) * 5);
font-size: calc(var(--s) * 10);
opacity: 0.35;
pointer-events: none;
}
/* Gegner-Zone: dezentes Blau/Lila – nicht bespielbar */
.board.my-side-left .card-row .card-slot:nth-last-child(-n+3),
.board.my-side-right .card-row .card-slot:nth-child(-n+3) {
border-color: rgba(80, 130, 200, 0.45);
background: rgba(40, 80, 160, 0.10);
cursor: not-allowed;
opacity: 0.75;
}
.board.my-side-left .card-row .card-slot:nth-last-child(-n+3)::after,
.board.my-side-right .card-row .card-slot:nth-child(-n+3)::after {
content: "🛡";
position: absolute;
top: calc(var(--s) * 5);
font-size: calc(var(--s) * 10);
opacity: 0.25;
pointer-events: none;
}

5
views/1v1-battlefield.ejs
View File

@ -720,6 +720,11 @@
const mySlot = urlParams.get("slot") || "<%= mySlot || 'player1' %>"; const mySlot = urlParams.get("slot") || "<%= mySlot || 'player1' %>";
const amIPlayer1 = mySlot === "player1"; const amIPlayer1 = mySlot === "player1";
// Board-Klasse setzen damit CSS die richtigen Zonen einfärbt
document.querySelector(".board")?.classList.add(
amIPlayer1 ? "my-side-left" : "my-side-right"
);
// Gegner-Name direkt aus URL setzen (kommt aus match_found, immer korrekt) // Gegner-Name direkt aus URL setzen (kommt aus match_found, immer korrekt)
const opponentNameFromUrl = urlParams.get("opponent"); const opponentNameFromUrl = urlParams.get("opponent");
if (opponentNameFromUrl) { if (opponentNameFromUrl) {