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

tgkdtz

Browse Source
This commit is contained in:
cay 2026-04-10 08:54:45 +01:00
parent 861b03da45
commit fea1b776e5
1 changed files with 213 additions and 404 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

439
views/1v1-battlefield.ejs
View File

@ -4,10 +4,7 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><%= title || "Spielfeld" %></title> <title><%= title || "Spielfeld" %></title>
<link <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&display=swap" rel="stylesheet" />
href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="/css/1v1.css" /> <link rel="stylesheet" href="/css/1v1.css" />
<style> <style>
#match-result-overlay { #match-result-overlay {
@ -22,94 +19,29 @@
font-family: "Cinzel", serif; font-family: "Cinzel", serif;
animation: fadeIn 0.4s ease; animation: fadeIn 0.4s ease;
} }
#match-result-overlay.show { #match-result-overlay.show { display: flex; }
display: flex; @keyframes fadeIn { from{opacity:0;} to{opacity:1;} }
} @keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:0.5;} }
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes pulse {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
.result-title { .result-title { font-size:48px; letter-spacing:6px; margin-bottom:12px; text-shadow:0 0 30px currentColor; }
font-size: 48px; .result-title.win { color:#f0d060; }
letter-spacing: 6px; .result-title.lose { color:#c84040; }
margin-bottom: 12px; .result-points { font-size:22px; color:#c8a860; margin-bottom:6px; letter-spacing:2px; }
text-shadow: 0 0 30px currentColor; .result-levelup { font-size:18px; color:#60e060; margin-bottom:20px; letter-spacing:2px; animation:pulse 1s ease-in-out infinite; }
} .result-progress-wrap { width:320px; margin-bottom:24px; }
.result-title.win { .result-progress-label { display:flex; justify-content:space-between; font-size:12px; color:#a08060; margin-bottom:6px; }
color: #f0d060; .result-progress-track { height:10px; background:rgba(255,255,255,0.08); border-radius:5px; overflow:hidden; }
} .result-progress-fill { height:100%; background:linear-gradient(90deg,#c8960c,#f0d060); border-radius:5px; transition:width 1s ease; }
.result-title.lose {
color: #c84040;
}
.result-points {
font-size: 22px;
color: #c8a860;
margin-bottom: 6px;
letter-spacing: 2px;
}
.result-levelup {
font-size: 18px;
color: #60e060;
margin-bottom: 20px;
letter-spacing: 2px;
animation: pulse 1s ease-in-out infinite;
}
.result-progress-wrap {
width: 320px;
margin-bottom: 24px;
}
.result-progress-label {
display: flex;
justify-content: space-between;
font-size: 12px;
color: #a08060;
margin-bottom: 6px;
}
.result-progress-track {
height: 10px;
background: rgba(255, 255, 255, 0.08);
border-radius: 5px;
overflow: hidden;
}
.result-progress-fill {
height: 100%;
background: linear-gradient(90deg, #c8960c, #f0d060);
border-radius: 5px;
transition: width 1s ease;
}
.result-close-btn { .result-close-btn {
background: linear-gradient(#4a3010, #2a1a08); background:linear-gradient(#4a3010,#2a1a08); border:2px solid #c8960c;
border: 2px solid #c8960c; color:#f0d9a6; font-family:"Cinzel",serif; font-size:14px;
color: #f0d9a6; padding:10px 30px; border-radius:8px; cursor:pointer;
font-family: "Cinzel", serif; letter-spacing:2px; margin-top:10px; transition:0.2s;
font-size: 14px;
padding: 10px 30px;
border-radius: 8px;
cursor: pointer;
letter-spacing: 2px;
margin-top: 10px;
transition: 0.2s;
}
.result-close-btn:hover {
border-color: #f0d060;
filter: brightness(1.2);
} }
.result-close-btn:hover { border-color:#f0d060; filter:brightness(1.2); }
</style> </style>
<style> <style>
/* ── Deck-Stapel ────────────────────────── */ /* ── Deck-Stapel ────────────────────────── */
.hand-slot-deck { .hand-slot-deck {
position: relative; position: relative;
@ -129,24 +61,14 @@
border-radius: 7px; border-radius: 7px;
box-shadow: 0 2px 8px rgba(0,0,0,0.7); box-shadow: 0 2px 8px rgba(0,0,0,0.7);
} }
.deck-shadow-3 { .deck-shadow-3 { transform: translate(-4px, -4px); }
transform: translate(-4px, -4px); .deck-shadow-2 { transform: translate(-2px, -2px); }
} .deck-shadow-1 { transform: translate(-1px, -1px); }
.deck-shadow-2 { .deck-card-top { transform: translate(0,0); border: 1px solid rgba(200,150,42,0.5); }
transform: translate(-2px, -2px);
}
.deck-shadow-1 {
transform: translate(-1px, -1px);
}
.deck-card-top {
transform: translate(0, 0);
border: 1px solid rgba(200, 150, 42, 0.5);
}
.deck-count { .deck-count {
position: absolute; position: absolute;
bottom: 2px; bottom: 2px;
left: 0; left: 0; right: 0;
right: 0;
text-align: center; text-align: center;
font-family: "Cinzel", serif; font-family: "Cinzel", serif;
font-size: 10px; font-size: 10px;
@ -180,7 +102,7 @@
<div class="game-title"><%= title || "Spielfeld" %></div> <div class="game-title"><%= title || "Spielfeld" %></div>
<!-- Zug-Timer mittig --> <!-- Zug-Timer mittig -->
<div id="turn-timer-wrap" style="display: none"> <div id="turn-timer-wrap" style="display:none;">
<svg id="turn-timer-svg" viewBox="0 0 44 44" width="44" height="44"> <svg id="turn-timer-svg" viewBox="0 0 44 44" width="44" height="44">
<circle cx="22" cy="22" r="18" class="tt-track"/> <circle cx="22" cy="22" r="18" class="tt-track"/>
<circle cx="22" cy="22" r="18" class="tt-fill" id="tt-circle"/> <circle cx="22" cy="22" r="18" class="tt-fill" id="tt-circle"/>
@ -189,32 +111,22 @@
</div> </div>
<div class="top-icons"> <div class="top-icons">
<div class="top-icon">⚙</div> <div class="top-icon">⚙</div><div class="top-icon">🗺</div>
<div class="top-icon">🗺</div> <div class="top-icon">📖</div><div class="top-icon">🏆</div>
<div class="top-icon">📖</div>
<div class="top-icon">🏆</div>
</div> </div>
<div class="top-bar-actions"> <div class="top-bar-actions">
<button class="end-turn-btn" id="end-turn-btn" disabled> <button class="end-turn-btn" id="end-turn-btn" disabled>Zug beenden</button>
Zug beenden
</button>
<button class="aufgeben-btn" id="aufgeben-btn">🏳 Aufgeben</button> <button class="aufgeben-btn" id="aufgeben-btn">🏳 Aufgeben</button>
</div> </div>
</div> </div>
<div id="board-lock-overlay" style="display: none"> <div id="board-lock-overlay" style="display:none;">
<div id="ready-timer-box"> <div id="ready-timer-box">
<div id="ready-timer-label">Bereit machen</div> <div id="ready-timer-label">Bereit machen</div>
<div id="ready-timer-ring"> <div id="ready-timer-ring">
<svg viewBox="0 0 80 80" width="80" height="80"> <svg viewBox="0 0 80 80" width="80" height="80">
<circle cx="40" cy="40" r="34" class="timer-track"/> <circle cx="40" cy="40" r="34" class="timer-track"/>
<circle <circle cx="40" cy="40" r="34" class="timer-fill" id="timer-circle"/>
cx="40"
cy="40"
r="34"
class="timer-fill"
id="timer-circle"
/>
</svg> </svg>
<div id="ready-timer-number">30</div> <div id="ready-timer-number">30</div>
</div> </div>
@ -230,19 +142,11 @@
<div class="avatar avatar-left" id="avLeft"> <div class="avatar avatar-left" id="avLeft">
<input type="file" accept="image/*" id="fileInputLeft" /> <input type="file" accept="image/*" id="fileInputLeft" />
<img id="avImgL" class="av-img" /> <img id="avImgL" class="av-img" />
<div class="av-placeholder" id="avPhL"> <div class="av-placeholder" id="avPhL"><div class="av-icon">⚔</div></div>
<div class="av-icon">⚔</div>
</div>
<div class="av-name" id="nameLeft"><%= player1 || "Spieler 1" %></div> <div class="av-name" id="nameLeft"><%= player1 || "Spieler 1" %></div>
<div class="av-stats"> <div class="av-stats">
<div class="stat hp"> <div class="stat hp"><span class="s-icon">❤</span><span class="s-val" id="hpLeft"><%= player1hp || 20 %></span></div>
<span class="s-icon">❤</span <div class="stat mana"><span class="s-icon">💧</span><span class="s-val" id="manaLeft"><%= player1mana || 3 %></span></div>
><span class="s-val" id="hpLeft"><%= player1hp || 20 %></span>
</div>
<div class="stat mana">
<span class="s-icon">💧</span
><span class="s-val" id="manaLeft"><%= player1mana || 3 %></span>
</div>
</div> </div>
<div class="hp-orb" id="orbLeft"><%= player1hp || 15 %></div> <div class="hp-orb" id="orbLeft"><%= player1hp || 15 %></div>
</div> </div>
@ -250,27 +154,19 @@
<div class="avatar avatar-right" id="avRight"> <div class="avatar avatar-right" id="avRight">
<input type="file" accept="image/*" id="fileInputRight" /> <input type="file" accept="image/*" id="fileInputRight" />
<img id="avImgR" class="av-img" /> <img id="avImgR" class="av-img" />
<div class="av-placeholder" id="avPhR"> <div class="av-placeholder" id="avPhR"><div class="av-icon">🛡</div></div>
<div class="av-icon">🛡</div>
</div>
<div class="av-name" id="nameRight"><%= player2 || "Gegner" %></div> <div class="av-name" id="nameRight"><%= player2 || "Gegner" %></div>
<div class="av-stats"> <div class="av-stats">
<div class="stat hp"> <div class="stat hp"><span class="s-icon">❤</span><span class="s-val" id="hpRight"><%= player2hp || 20 %></span></div>
<span class="s-icon">❤</span <div class="stat mana"><span class="s-icon">💧</span><span class="s-val" id="manaRight"><%= player2mana || 3 %></span></div>
><span class="s-val" id="hpRight"><%= player2hp || 20 %></span>
</div>
<div class="stat mana">
<span class="s-icon">💧</span
><span class="s-val" id="manaRight"><%= player2mana || 3 %></span>
</div>
</div> </div>
<div class="hp-orb" id="orbRight"><%= player2hp || 15 %></div> <div class="hp-orb" id="orbRight"><%= player2hp || 15 %></div>
</div> </div>
<div class="card-area"> <div class="card-area">
<div class="row-label"></div> <div class="row-label">Reihe 1</div>
<div class="card-row" id="row1"></div> <div class="card-row" id="row1"></div>
<div class="row-label"></div> <div class="row-label">Reihe 2</div>
<div class="card-row" id="row2"></div> <div class="card-row" id="row2"></div>
</div> </div>
@ -295,26 +191,14 @@
<div id="match-result-overlay"> <div id="match-result-overlay">
<div class="result-title" id="result-title"></div> <div class="result-title" id="result-title"></div>
<div class="result-points" id="result-points"></div> <div class="result-points" id="result-points"></div>
<div <div class="result-levelup" id="result-levelup" style="display:none;"></div>
class="result-levelup" <div class="result-progress-wrap" id="result-progress-wrap" style="display:none;">
id="result-levelup"
style="display: none"
></div>
<div
class="result-progress-wrap"
id="result-progress-wrap"
style="display: none"
>
<div class="result-progress-label"> <div class="result-progress-label">
<span id="result-level-label">Level</span> <span id="result-level-label">Level</span>
<span id="result-pts-label"></span> <span id="result-pts-label"></span>
</div> </div>
<div class="result-progress-track"> <div class="result-progress-track">
<div <div class="result-progress-fill" id="result-progress-fill" style="width:0%"></div>
class="result-progress-fill"
id="result-progress-fill"
style="width: 0%"
></div>
</div> </div>
</div> </div>
<button class="result-close-btn" id="result-close-btn">Schließen</button> <button class="result-close-btn" id="result-close-btn">Schließen</button>
@ -323,15 +207,12 @@
<script src="/socket.io/socket.io.js"></script> <script src="/socket.io/socket.io.js"></script>
<script> <script>
/* ── Spielfeld aufbauen ─────────────────────────────── */ /* ── Spielfeld aufbauen ─────────────────────────────── */
["row1", "row2"].forEach((id) => { ["row1","row2"].forEach(id => {
const row = document.getElementById(id); const row = document.getElementById(id);
for (let i = 1; i <= 11; i++) { for (let i = 1; i <= 11; i++) {
const s = document.createElement("div"); const s = document.createElement("div");
s.className = "card-slot"; s.className = "card-slot";
s.innerHTML = s.innerHTML = '<span class="slot-icon">✦</span><span class="slot-num">' + i + "</span>";
'<span class="slot-icon">✦</span><span class="slot-num">' +
i +
"</span>";
row.appendChild(s); row.appendChild(s);
} }
}); });
@ -355,7 +236,7 @@
// ── Slots 2–4: aufgedeckte Handkarten (leer bis API lädt) ─── // ── Slots 2–4: aufgedeckte Handkarten (leer bis API lädt) ───
const handCardIds = ["hand-card-1", "hand-card-2", "hand-card-3"]; const handCardIds = ["hand-card-1", "hand-card-2", "hand-card-3"];
handCardIds.forEach((id) => { handCardIds.forEach(id => {
const s = document.createElement("div"); const s = document.createElement("div");
s.className = "hand-slot hand-slot-card"; s.className = "hand-slot hand-slot-card";
s.id = id; s.id = id;
@ -379,9 +260,7 @@
// State pro Slot: { card, currentCd } oder null = leer // State pro Slot: { card, currentCd } oder null = leer
const handSlotState = {}; const handSlotState = {};
handCardIds.forEach((id) => { handCardIds.forEach(id => { handSlotState[id] = null; });
handSlotState[id] = null;
});
/* ── Slot rendern ──────────────────────────────────── */ /* ── Slot rendern ──────────────────────────────────── */
function renderHandSlot(id) { function renderHandSlot(id) {
@ -405,11 +284,9 @@
<div class="card-stat-overlay"> <div class="card-stat-overlay">
${atkVal != null ? `<span class="cs-atk">${atkVal}</span>` : ""} ${atkVal != null ? `<span class="cs-atk">${atkVal}</span>` : ""}
${defVal != null ? `<span class="cs-def">${defVal}</span>` : ""} ${defVal != null ? `<span class="cs-def">${defVal}</span>` : ""}
${ ${card.cooldown != null
card.cooldown != null
? `<span class="cs-cd ${isReady ? "cs-cd-ready" : ""}">${isReady ? "✓" : currentCd}</span>` ? `<span class="cs-cd ${isReady ? "cs-cd-ready" : ""}">${isReady ? "✓" : currentCd}</span>`
: "" : ""}
}
</div>`; </div>`;
const readyBadge = isReady const readyBadge = isReady
@ -440,7 +317,7 @@
/* ── Karte vom Deck ziehen ─────────────────────────── */ /* ── Karte vom Deck ziehen ─────────────────────────── */
function drawNextCard() { function drawNextCard() {
if (deckQueue.length === 0) return; if (deckQueue.length === 0) return;
const freeSlot = handCardIds.find((id) => handSlotState[id] === null); const freeSlot = handCardIds.find(id => handSlotState[id] === null);
if (!freeSlot) return; // alle Slots belegt → Karte bleibt im Deck if (!freeSlot) return; // alle Slots belegt → Karte bleibt im Deck
const card = deckQueue.shift(); const card = deckQueue.shift();
setHandSlot(freeSlot, card); setHandSlot(freeSlot, card);
@ -450,7 +327,7 @@
/* ── Cooldowns beim Zug-Ende reduzieren ────────────── */ /* ── Cooldowns beim Zug-Ende reduzieren ────────────── */
function tickHandCooldowns() { function tickHandCooldowns() {
handCardIds.forEach((id) => { handCardIds.forEach(id => {
const state = handSlotState[id]; const state = handSlotState[id];
if (!state) return; if (!state) return;
if (state.currentCd > 0) state.currentCd--; if (state.currentCd > 0) state.currentCd--;
@ -462,8 +339,7 @@
(async () => { (async () => {
try { try {
const urlP = new URLSearchParams(window.location.search); const urlP = new URLSearchParams(window.location.search);
const deckId = const deckId = urlP.get("deck") || sessionStorage.getItem("selectedDeckId");
urlP.get("deck") || sessionStorage.getItem("selectedDeckId");
if (!deckId) return; if (!deckId) return;
const cardsRes = await fetch("/api/decks/" + deckId + "/cards"); const cardsRes = await fetch("/api/decks/" + deckId + "/cards");
@ -472,7 +348,7 @@
// Karten nach amount auffalten // Karten nach amount auffalten
const expanded = []; const expanded = [];
cards.forEach((card) => { cards.forEach(card => {
for (let i = 0; i < (card.amount ?? 1); i++) expanded.push(card); for (let i = 0; i < (card.amount ?? 1); i++) expanded.push(card);
}); });
@ -491,6 +367,7 @@
deckQueue = expanded.slice(3); deckQueue = expanded.slice(3);
const countEl = document.getElementById("deck-count"); const countEl = document.getElementById("deck-count");
if (countEl) countEl.textContent = deckQueue.length; if (countEl) countEl.textContent = deckQueue.length;
} catch(e) { } catch(e) {
console.error("[Battlefield] Deck laden:", e); console.error("[Battlefield] Deck laden:", e);
} }
@ -517,12 +394,19 @@
updateTimerUI(turnSecsLeft); updateTimerUI(turnSecsLeft);
if (turnSecsLeft <= 0) { if (turnSecsLeft <= 0) {
clearInterval(turnTimerInt); clearInterval(turnTimerInt);
// Zeit abgelaufen → Zug automatisch beenden
if (isMyTurn) { if (isMyTurn) {
tickHandCooldowns(); tickHandCooldowns();
drawNextCard(); drawNextCard();
setTurnState(false); setTurnState(false);
socket.emit("end_turn", { matchId, slot: mySlot }); socket.emit("end_turn", { matchId, slot: mySlot });
// Watchdog: falls turn_change nach 5s nicht ankommt → selbst freischalten
setTimeout(() => {
if (!isMyTurn) {
console.warn("[1v1] Kein turn_change nach 5s – Zug lokal übergeben");
setTurnState(true);
}
}, 5000);
} }
} }
}, 1000); }, 1000);
@ -540,8 +424,7 @@
if (num) num.textContent = secs; if (num) num.textContent = secs;
if (circle) { if (circle) {
circle.style.strokeDashoffset = TT_CIRCUM * (1 - secs / TURN_SECONDS); circle.style.strokeDashoffset = TT_CIRCUM * (1 - secs / TURN_SECONDS);
circle.style.stroke = circle.style.stroke = secs > 10 ? "#27ae60" : secs > 5 ? "#f39c12" : "#e74c3c";
secs > 10 ? "#27ae60" : secs > 5 ? "#f39c12" : "#e74c3c";
if (secs <= 5) { if (secs <= 5) {
num.style.color = "#e74c3c"; num.style.color = "#e74c3c";
num.style.animation = "tt-pulse 0.5s ease-in-out infinite"; num.style.animation = "tt-pulse 0.5s ease-in-out infinite";
@ -571,11 +454,21 @@
btn.style.opacity = "1"; btn.style.opacity = "1";
document.getElementById("turn-indicator")?.remove(); document.getElementById("turn-indicator")?.remove();
startTurnTimer(); startTurnTimer();
// Watchdog für wartenden Spieler abbrechen falls vorhanden
if (window._waitWatchdog) { clearTimeout(window._waitWatchdog); window._waitWatchdog = null; }
} else { } else {
btn.disabled = true; btn.disabled = true;
btn.style.opacity = "0.4"; btn.style.opacity = "0.4";
stopTurnTimer(); stopTurnTimer();
showTurnIndicator(); showTurnIndicator();
// Watchdog: falls nach 26s kein turn_change → eigenen Zug erzwingen
if (window._waitWatchdog) clearTimeout(window._waitWatchdog);
window._waitWatchdog = setTimeout(() => {
if (!isMyTurn) {
console.warn("[1v1] Kein turn_change nach 26s – Zug lokal übernommen");
setTurnState(true);
}
}, 26000);
} }
} }
@ -612,7 +505,6 @@
setTurnState(false); setTurnState(false);
socket.emit("end_turn", { matchId, slot: mySlot }); socket.emit("end_turn", { matchId, slot: mySlot });
}); });
/* ── Hilfsfunktion: Karte mit Stats in einen Slot rendern ── */ /* ── Hilfsfunktion: Karte mit Stats in einen Slot rendern ── */
function renderCardInSlot(slot, card) { function renderCardInSlot(slot, card) {
if (!slot || !card) return; if (!slot || !card) return;
@ -623,15 +515,12 @@
const hasAtk = atkVal != null; const hasAtk = atkVal != null;
const hasDef = defVal != null; const hasDef = defVal != null;
const hasCd = cdVal != null; const hasCd = cdVal != null;
const statsHtml = const statsHtml = (hasAtk || hasDef || hasCd) ? `
hasAtk || hasDef || hasCd
? `
<div class="card-stat-overlay"> <div class="card-stat-overlay">
${hasAtk ? `<span class="cs-atk">${atkVal}</span>` : ""} ${hasAtk ? `<span class="cs-atk">${atkVal}</span>` : ""}
${hasDef ? `<span class="cs-def">${defVal}</span>` : ""} ${hasDef ? `<span class="cs-def">${defVal}</span>` : ""}
${hasCd ? `<span class="cs-cd">${cdVal}</span>` : ""} ${hasCd ? `<span class="cs-cd">${cdVal}</span>` : ""}
</div>` </div>` : "";
: "";
slot.classList.add("slot-occupied"); slot.classList.add("slot-occupied");
slot.innerHTML = card.image slot.innerHTML = card.image
@ -661,18 +550,10 @@
let myIngameName = null; let myIngameName = null;
function emitArenaJoin(me) { function emitArenaJoin(me) {
myIngameName = myIngameName = (me && (me.ingame_name || me.username || me.name || String(me.id))) || "Spieler";
(me && (me.ingame_name || me.username || me.name || String(me.id))) || const myNameEl = document.getElementById(amIPlayer1 ? "nameLeft" : "nameRight");
"Spieler";
const myNameEl = document.getElementById(
amIPlayer1 ? "nameLeft" : "nameRight",
);
if (myNameEl) myNameEl.textContent = myIngameName; if (myNameEl) myNameEl.textContent = myIngameName;
console.log("[1v1] emitArenaJoin →", { console.log("[1v1] emitArenaJoin →", { matchId, slot: mySlot, name: myIngameName });
matchId,
slot: mySlot,
name: myIngameName,
});
socket.emit("arena_join", { socket.emit("arena_join", {
matchId, matchId,
slot: mySlot, slot: mySlot,
@ -683,8 +564,8 @@
function fetchAndJoin() { function fetchAndJoin() {
fetch("/arena/me") fetch("/arena/me")
.then((r) => r.json()) .then(r => r.json())
.then((me) => emitArenaJoin(me)) .then(me => emitArenaJoin(me))
.catch(() => { .catch(() => {
console.warn("[1v1] /arena/me fehlgeschlagen – join ohne Account"); console.warn("[1v1] /arena/me fehlgeschlagen – join ohne Account");
emitArenaJoin(null); emitArenaJoin(null);
@ -713,60 +594,40 @@
}, 10000); }, 10000);
/* ── Gegner verbunden ───────────────────────────────── */ /* ── Gegner verbunden ───────────────────────────────── */
socket.on("arena_opponent_joined", (data) => { socket.on("arena_opponent_joined", data => {
console.log("[Arena] arena_opponent_joined:", data); console.log("[Arena] arena_opponent_joined:", data);
clearTimeout(readyFallbackTimer); clearTimeout(readyFallbackTimer);
const name = data.name || "Gegner"; const name = data.name || "Gegner";
document.getElementById( document.getElementById(amIPlayer1 ? "nameRight" : "nameLeft").textContent = name;
amIPlayer1 ? "nameRight" : "nameLeft",
).textContent = name;
document.getElementById("connecting-overlay")?.remove(); document.getElementById("connecting-overlay")?.remove();
const lockOverlay = document.getElementById("board-lock-overlay"); const lockOverlay = document.getElementById("board-lock-overlay");
if (lockOverlay) lockOverlay.style.display = "flex"; if (lockOverlay) lockOverlay.style.display = "flex";
}); });
socket.on("arena_ready", (data) => { socket.on("arena_ready", data => {
console.log("[Arena] arena_ready:", data); console.log("[Arena] arena_ready:", data);
clearTimeout(readyFallbackTimer); clearTimeout(readyFallbackTimer);
document.getElementById("connecting-overlay")?.remove(); document.getElementById("connecting-overlay")?.remove();
// Eigenen Namen nicht überschreiben – nur Gegner-Slot aktualisieren // Gegner-Name aus server-Daten setzen (immer, außer leer)
const oppNameFromServer = amIPlayer1 const oppName = amIPlayer1 ? data.player2 : data.player1;
? data.player2 || "Gegner" const oppEl = document.getElementById(amIPlayer1 ? "nameRight" : "nameLeft");
: data.player1 || "Gegner"; if (oppEl && oppName) oppEl.textContent = oppName;
const oppEl = document.getElementById( // Eigenen Namen sichern falls noch nicht gesetzt
amIPlayer1 ? "nameRight" : "nameLeft", const myEl = document.getElementById(amIPlayer1 ? "nameLeft" : "nameRight");
); if (myEl && myIngameName) myEl.textContent = myIngameName;
if (
oppEl &&
oppNameFromServer !== "Spieler" &&
oppNameFromServer !== "Spieler 2" &&
oppNameFromServer !== "Spieler 1"
) {
oppEl.textContent = oppNameFromServer;
}
const lockOverlay = document.getElementById("board-lock-overlay"); const lockOverlay = document.getElementById("board-lock-overlay");
if (lockOverlay) lockOverlay.style.display = "flex"; if (lockOverlay) lockOverlay.style.display = "flex";
}); });
/* ── Server: Zugwechsel ──────────────────────────────── */ /* ── Server: Zugwechsel ──────────────────────────────── */
socket.on("turn_change", (data) => { socket.on("turn_change", data => {
// data.activeSlot ist immer "player1" oder "player2" (Server-Slot)
// mySlot ist ebenfalls "player1" oder "player2" → direkt vergleichen
const nowMyTurn = data.activeSlot === mySlot; const nowMyTurn = data.activeSlot === mySlot;
console.log( console.log("[1v1] turn_change:", data.activeSlot, "| ich bin:", mySlot, "| meinZug:", nowMyTurn);
"[1v1] turn_change:",
data.activeSlot,
"| ich bin:",
mySlot,
"| meinZug:",
nowMyTurn,
);
setTurnState(nowMyTurn); setTurnState(nowMyTurn);
}); });
socket.on("turn_started", (data) => { socket.on("turn_started", data => {
const nowMyTurn = data.slot === mySlot; setTurnState(data.slot === mySlot);
setTurnState(nowMyTurn);
}); });
/* ── Bereit-System ──────────────────────────────────── */ /* ── Bereit-System ──────────────────────────────────── */
@ -785,47 +646,30 @@
const timerCircle = document.getElementById("timer-circle"); const timerCircle = document.getElementById("timer-circle");
if (timerCircle) timerCircle.style.strokeDasharray = CIRCUMFERENCE; if (timerCircle) timerCircle.style.strokeDasharray = CIRCUMFERENCE;
socket.on("ready_timer", (data) => { socket.on("ready_timer", data => {
const num = document.getElementById("ready-timer-number"); const num = document.getElementById("ready-timer-number");
if (num) num.textContent = data.remaining; if (num) num.textContent = data.remaining;
if (timerCircle) { if (timerCircle) {
timerCircle.style.strokeDashoffset = timerCircle.style.strokeDashoffset = CIRCUMFERENCE * (1 - data.remaining / 30);
CIRCUMFERENCE * (1 - data.remaining / 30); timerCircle.style.stroke = data.remaining > 15 ? "#27ae60" : data.remaining > 7 ? "#f39c12" : "#e74c3c";
timerCircle.style.stroke =
data.remaining > 15
? "#27ae60"
: data.remaining > 7
? "#f39c12"
: "#e74c3c";
} }
}); });
socket.on("ready_status", (data) => { socket.on("ready_status", data => {
const pip1 = document.getElementById("pip-player1"); const pip1 = document.getElementById("pip-player1");
const pip2 = document.getElementById("pip-player2"); const pip2 = document.getElementById("pip-player2");
if (data.readySlots) { if (data.readySlots) {
if (data.readySlots.includes("player1") && pip1) if (data.readySlots.includes("player1") && pip1) pip1.textContent = "✅ " + (document.getElementById("nameLeft")?.textContent || "Spieler 1");
pip1.textContent = if (data.readySlots.includes("player2") && pip2) pip2.textContent = "✅ " + (document.getElementById("nameRight")?.textContent || "Spieler 2");
"✅ " +
(document.getElementById("nameLeft")?.textContent || "Spieler 1");
if (data.readySlots.includes("player2") && pip2)
pip2.textContent =
"✅ " +
(document.getElementById("nameRight")?.textContent ||
"Spieler 2");
} }
if (data.readyCount === 2) { if (data.readyCount === 2) {
// ── Zufällige Seitenzuweisung ────────────────────── // ── Zufällige Seitenzuweisung ──────────────────────
const seed = matchId const seed = matchId.split("").reduce((a, c) => a + c.charCodeAt(0), 0);
.split("")
.reduce((a, c) => a + c.charCodeAt(0), 0);
const flip = seed % 2 === 1; const flip = seed % 2 === 1;
// Eigenen Namen immer aus myIngameName, Gegner aus DOM // Eigenen Namen immer aus myIngameName, Gegner aus DOM
const myName = myIngameName || "Spieler"; const myName = myIngameName || "Spieler";
const oppEl = document.getElementById( const oppEl = document.getElementById(amIPlayer1 ? "nameRight" : "nameLeft");
amIPlayer1 ? "nameRight" : "nameLeft",
);
const oppName = oppEl?.textContent || "Gegner"; const oppName = oppEl?.textContent || "Gegner";
// player1-Name und player2-Name bestimmen // player1-Name und player2-Name bestimmen
@ -840,12 +684,11 @@
document.getElementById("nameRight").textContent = rightName; document.getElementById("nameRight").textContent = rightName;
// Platzhalter: Ingame-Namen anzeigen // Platzhalter: Ingame-Namen anzeigen
["avLeft", "avRight"].forEach((avId) => { ["avLeft", "avRight"].forEach(avId => {
const av = document.getElementById(avId); const av = document.getElementById(avId);
const ph = av?.querySelector(".av-placeholder"); const ph = av?.querySelector(".av-placeholder");
const name = avId === "avLeft" ? leftName : rightName; const name = avId === "avLeft" ? leftName : rightName;
if (ph) if (ph) ph.innerHTML = `
ph.innerHTML = `
<div style=" <div style="
font-family:'Cinzel',serif; font-family:'Cinzel',serif;
font-size:calc(var(--s)*13); font-size:calc(var(--s)*13);
@ -863,14 +706,11 @@
// Festlegen ob ich der linke Spieler bin // Festlegen ob ich der linke Spieler bin
// flip=false: player1=links, flip=true: player1=rechts // flip=false: player1=links, flip=true: player1=rechts
amILeftPlayer = flip ? mySlot === "player2" : mySlot === "player1"; amILeftPlayer = flip ? (mySlot === "player2") : (mySlot === "player1");
// Linker Spieler beginnt // Linker Spieler beginnt
setTurnState(amILeftPlayer); setTurnState(amILeftPlayer);
socket.emit("end_turn_init", { socket.emit("end_turn_init", { matchId, starterSlot: flip ? "player2" : "player1" });
matchId,
starterSlot: flip ? "player2" : "player1",
});
} }
}); });
@ -879,8 +719,7 @@
// Eigenes Modal statt browser confirm() // Eigenes Modal statt browser confirm()
const modal = document.createElement("div"); const modal = document.createElement("div");
modal.id = "surrender-modal"; modal.id = "surrender-modal";
modal.style.cssText = modal.style.cssText = "position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,0.8);display:flex;align-items:center;justify-content:center;";
"position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,0.8);display:flex;align-items:center;justify-content:center;";
modal.innerHTML = ` modal.innerHTML = `
<div style="background:linear-gradient(#2a1a08,#1a0f04);border:2px solid #c8960c; <div style="background:linear-gradient(#2a1a08,#1a0f04);border:2px solid #c8960c;
border-radius:14px;padding:32px 40px;text-align:center;max-width:360px; border-radius:14px;padding:32px 40px;text-align:center;max-width:360px;
@ -902,12 +741,8 @@
</div>`; </div>`;
document.body.appendChild(modal); document.body.appendChild(modal);
document document.getElementById("surrender-no").addEventListener("click", () => modal.remove());
.getElementById("surrender-no") document.getElementById("surrender-yes").addEventListener("click", () => {
.addEventListener("click", () => modal.remove());
document
.getElementById("surrender-yes")
.addEventListener("click", () => {
modal.remove(); modal.remove();
socket.emit("player_surrender", { matchId, slot: mySlot }); socket.emit("player_surrender", { matchId, slot: mySlot });
// Eigene Weiterleitung nach kurzer Verzögerung // Eigene Weiterleitung nach kurzer Verzögerung
@ -918,8 +753,7 @@
/* ── Nachricht anzeigen + weiterleiten ──────────────── */ /* ── Nachricht anzeigen + weiterleiten ──────────────── */
function showSurrenderMessage(iWon) { function showSurrenderMessage(iWon) {
const overlay = document.createElement("div"); const overlay = document.createElement("div");
overlay.style.cssText = overlay.style.cssText = "position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,0.9);display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:'Cinzel',serif;";
"position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,0.9);display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:'Cinzel',serif;";
overlay.innerHTML = iWon overlay.innerHTML = iWon
? `<div style="font-size:48px;margin-bottom:16px;">🏆</div> ? `<div style="font-size:48px;margin-bottom:16px;">🏆</div>
<div style="font-size:28px;color:#f0d060;letter-spacing:4px;">SIEG!</div> <div style="font-size:28px;color:#f0d060;letter-spacing:4px;">SIEG!</div>
@ -942,7 +776,7 @@
} }
/* ── Spielende Events ───────────────────────────────── */ /* ── Spielende Events ───────────────────────────────── */
socket.on("player_surrendered", (data) => { socket.on("player_surrendered", data => {
const iLost = data.slot === mySlot; const iLost = data.slot === mySlot;
if (!iLost) { if (!iLost) {
// Ich habe gewonnen (Gegner hat aufgegeben) // Ich habe gewonnen (Gegner hat aufgegeben)
@ -952,7 +786,7 @@
}); });
/* Punkte-Ergebnis vom Server (kommt kurz nach player_surrendered) */ /* Punkte-Ergebnis vom Server (kommt kurz nach player_surrendered) */
socket.on("match_result", (data) => { socket.on("match_result", data => {
updateResultWithPoints(data); updateResultWithPoints(data);
}); });
@ -986,16 +820,12 @@
/* Overlay anzeigen falls noch nicht sichtbar */ /* Overlay anzeigen falls noch nicht sichtbar */
const overlay = document.getElementById("match-result-overlay"); const overlay = document.getElementById("match-result-overlay");
if (!overlay.classList.contains("show")) { if (!overlay.classList.contains("show")) {
document.getElementById("result-title").textContent = data.won document.getElementById("result-title").textContent = data.won ? "⚔️ SIEG!" : "💀 NIEDERLAGE";
? "⚔️ SIEG!" document.getElementById("result-title").className = "result-title " + (data.won ? "win" : "lose");
: "💀 NIEDERLAGE";
document.getElementById("result-title").className =
"result-title " + (data.won ? "win" : "lose");
overlay.classList.add("show"); overlay.classList.add("show");
} }
pointsEl.textContent = pointsEl.textContent = data.awarded > 0
data.awarded > 0
? "+" + data.awarded + " Arena-Punkte" ? "+" + data.awarded + " Arena-Punkte"
: "Keine Punkte (Aufgabe zu früh oder Tageslimit erreicht)"; : "Keine Punkte (Aufgabe zu früh oder Tageslimit erreicht)";
@ -1006,15 +836,11 @@
/* Fortschrittsbalken vom Server laden */ /* Fortschrittsbalken vom Server laden */
fetch("/api/points/me") fetch("/api/points/me")
.then((r) => r.json()) .then(r => r.json())
.then((me) => { .then(me => {
progressEl.style.display = "block"; progressEl.style.display = "block";
lvlLbl.textContent = lvlLbl.textContent = "Level " + me.current_level + (me.next_level ? " → " + me.next_level : " (MAX)");
"Level " + ptsLbl.textContent = me.points_this_level + " / " + me.points_for_next + " Pts";
me.current_level +
(me.next_level ? " → " + me.next_level : " (MAX)");
ptsLbl.textContent =
me.points_this_level + " / " + me.points_for_next + " Pts";
requestAnimationFrame(() => { requestAnimationFrame(() => {
fillEl.style.width = me.progress_percent + "%"; fillEl.style.width = me.progress_percent + "%";
}); });
@ -1031,44 +857,27 @@
window.top.location.href = "/launcher"; window.top.location.href = "/launcher";
} }
document document.getElementById("result-close-btn").addEventListener("click", closePopup);
.getElementById("result-close-btn")
.addEventListener("click", closePopup);
/* ── Avatar ─────────────────────────────────────────── */ /* ── Avatar ─────────────────────────────────────────── */
function loadAvatar(input, imgId, parentId) { function loadAvatar(input, imgId, parentId) {
const file = input.files[0]; const file = input.files[0];
if (!file) return; if (!file) return;
const r = new FileReader(); const r = new FileReader();
r.onload = (e) => { r.onload = e => {
const img = document.getElementById(imgId); const img = document.getElementById(imgId);
img.src = e.target.result; img.src = e.target.result;
img.style.display = "block"; img.style.display = "block";
document document.getElementById(parentId)?.querySelector(".av-placeholder")?.style.setProperty("display","none");
.getElementById(parentId)
?.querySelector(".av-placeholder")
?.style.setProperty("display", "none");
}; };
r.readAsDataURL(file); r.readAsDataURL(file);
} }
/* ── Event-Listener ─────────────────────────────────── */ /* ── Event-Listener ─────────────────────────────────── */
document document.getElementById("bereit-btn") ?.addEventListener("click", handleBereit);
.getElementById("bereit-btn") document.getElementById("aufgeben-btn") ?.addEventListener("click", handleAufgeben);
?.addEventListener("click", handleBereit); document.getElementById("fileInputLeft") ?.addEventListener("change", function() { loadAvatar(this,"avImgL","avLeft"); });
document document.getElementById("fileInputRight")?.addEventListener("change", function() { loadAvatar(this,"avImgR","avRight"); });
.getElementById("aufgeben-btn")
?.addEventListener("click", handleAufgeben);
document
.getElementById("fileInputLeft")
?.addEventListener("change", function () {
loadAvatar(this, "avImgL", "avLeft");
});
document
.getElementById("fileInputRight")
?.addEventListener("change", function () {
loadAvatar(this, "avImgR", "avRight");
});
</script> </script>
</body> </body>
</html> </html>