dtzkit
This commit is contained in:
parent
82b13fde0b
commit
f5e7e2443a
@ -149,7 +149,7 @@ body {
|
||||
}
|
||||
|
||||
.area:hover {
|
||||
fill: rgba(120, 200, 255, 0.18);
|
||||
fill: rgba(255, 255, 255, 0);
|
||||
stroke: transparent;
|
||||
}
|
||||
|
||||
|
||||
@ -4,14 +4,17 @@
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title><%= title || "Spielfeld" %></title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&display=swap" rel="stylesheet" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link rel="stylesheet" href="/css/1v1.css" />
|
||||
<style>
|
||||
#match-result-overlay {
|
||||
display: none;
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0,0,0,0.88);
|
||||
background: rgba(0, 0, 0, 0.88);
|
||||
z-index: 9999;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
@ -19,74 +22,149 @@
|
||||
font-family: "Cinzel", serif;
|
||||
animation: fadeIn 0.4s ease;
|
||||
}
|
||||
#match-result-overlay.show { display: flex; }
|
||||
@keyframes fadeIn { from{opacity:0;} to{opacity:1;} }
|
||||
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:0.5;} }
|
||||
|
||||
.result-title { font-size:48px; letter-spacing:6px; margin-bottom:12px; text-shadow:0 0 30px currentColor; }
|
||||
.result-title.win { color:#f0d060; }
|
||||
.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 {
|
||||
background:linear-gradient(#4a3010,#2a1a08); border:2px solid #c8960c;
|
||||
color:#f0d9a6; font-family:"Cinzel",serif; font-size:14px;
|
||||
padding:10px 30px; border-radius:8px; cursor:pointer;
|
||||
letter-spacing:2px; margin-top:10px; transition:0.2s;
|
||||
#match-result-overlay.show {
|
||||
display: flex;
|
||||
}
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes pulse {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.result-title {
|
||||
font-size: 48px;
|
||||
letter-spacing: 6px;
|
||||
margin-bottom: 12px;
|
||||
text-shadow: 0 0 30px currentColor;
|
||||
}
|
||||
.result-title.win {
|
||||
color: #f0d060;
|
||||
}
|
||||
.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 {
|
||||
background: linear-gradient(#4a3010, #2a1a08);
|
||||
border: 2px solid #c8960c;
|
||||
color: #f0d9a6;
|
||||
font-family: "Cinzel", serif;
|
||||
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>
|
||||
|
||||
/* ── Deck-Stapel ────────────────────────── */
|
||||
.hand-slot-deck {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
.deck-stack-wrap {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: calc(100% - 18px);
|
||||
}
|
||||
.deck-card-back,
|
||||
.deck-card-top {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 7px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.7);
|
||||
}
|
||||
.deck-shadow-3 { transform: translate(-4px, -4px); }
|
||||
.deck-shadow-2 { 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 {
|
||||
position: absolute;
|
||||
bottom: 2px;
|
||||
left: 0; right: 0;
|
||||
text-align: center;
|
||||
font-family: "Cinzel", serif;
|
||||
font-size: 10px;
|
||||
color: #f0d060;
|
||||
text-shadow: 0 1px 3px rgba(0,0,0,0.8);
|
||||
}
|
||||
.hand-slot-card {
|
||||
border: 1px solid rgba(200,150,42,0.4) !important;
|
||||
}
|
||||
.hand-slot-card > img {
|
||||
border-radius: calc(var(--s) * 7);
|
||||
overflow: hidden;
|
||||
}
|
||||
.hand-slot-card:hover {
|
||||
border-color: rgba(200,150,42,0.9) !important;
|
||||
transform: translateY(-4px);
|
||||
transition: transform 0.15s;
|
||||
}
|
||||
/* ── Deck-Stapel ────────────────────────── */
|
||||
.hand-slot-deck {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
.deck-stack-wrap {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: calc(100% - 18px);
|
||||
}
|
||||
.deck-card-back,
|
||||
.deck-card-top {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 7px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
.deck-shadow-3 {
|
||||
transform: translate(-4px, -4px);
|
||||
}
|
||||
.deck-shadow-2 {
|
||||
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 {
|
||||
position: absolute;
|
||||
bottom: 2px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
font-family: "Cinzel", serif;
|
||||
font-size: 10px;
|
||||
color: #f0d060;
|
||||
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
.hand-slot-card {
|
||||
border: 1px solid rgba(200, 150, 42, 0.4) !important;
|
||||
}
|
||||
.hand-slot-card > img {
|
||||
border-radius: calc(var(--s) * 7);
|
||||
overflow: hidden;
|
||||
}
|
||||
.hand-slot-card:hover {
|
||||
border-color: rgba(200, 150, 42, 0.9) !important;
|
||||
transform: translateY(-4px);
|
||||
transition: transform 0.15s;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
@ -102,31 +180,41 @@
|
||||
<div class="game-title"><%= title || "Spielfeld" %></div>
|
||||
|
||||
<!-- 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">
|
||||
<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-track" />
|
||||
<circle cx="22" cy="22" r="18" class="tt-fill" id="tt-circle" />
|
||||
</svg>
|
||||
<div id="turn-timer-num">20</div>
|
||||
</div>
|
||||
|
||||
<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 class="top-bar-actions">
|
||||
<button class="end-turn-btn" id="end-turn-btn" disabled>Zug beenden</button>
|
||||
<button class="end-turn-btn" id="end-turn-btn" disabled>
|
||||
Zug beenden
|
||||
</button>
|
||||
<button class="aufgeben-btn" id="aufgeben-btn">🏳 Aufgeben</button>
|
||||
</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-label">Bereit machen</div>
|
||||
<div id="ready-timer-ring">
|
||||
<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-fill" id="timer-circle"/>
|
||||
<circle cx="40" cy="40" r="34" class="timer-track" />
|
||||
<circle
|
||||
cx="40"
|
||||
cy="40"
|
||||
r="34"
|
||||
class="timer-fill"
|
||||
id="timer-circle"
|
||||
/>
|
||||
</svg>
|
||||
<div id="ready-timer-number">30</div>
|
||||
</div>
|
||||
@ -142,11 +230,19 @@
|
||||
<div class="avatar avatar-left" id="avLeft">
|
||||
<input type="file" accept="image/*" id="fileInputLeft" />
|
||||
<img id="avImgL" class="av-img" />
|
||||
<div class="av-placeholder" id="avPhL"><div class="av-icon">⚔</div></div>
|
||||
<div class="av-placeholder" id="avPhL">
|
||||
<div class="av-icon">⚔</div>
|
||||
</div>
|
||||
<div class="av-name" id="nameLeft"><%= player1 || "Spieler 1" %></div>
|
||||
<div class="av-stats">
|
||||
<div class="stat hp"><span class="s-icon">❤</span><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 class="stat hp">
|
||||
<span class="s-icon">❤</span
|
||||
><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 class="hp-orb" id="orbLeft"><%= player1hp || 15 %></div>
|
||||
</div>
|
||||
@ -154,19 +250,27 @@
|
||||
<div class="avatar avatar-right" id="avRight">
|
||||
<input type="file" accept="image/*" id="fileInputRight" />
|
||||
<img id="avImgR" class="av-img" />
|
||||
<div class="av-placeholder" id="avPhR"><div class="av-icon">🛡</div></div>
|
||||
<div class="av-placeholder" id="avPhR">
|
||||
<div class="av-icon">🛡</div>
|
||||
</div>
|
||||
<div class="av-name" id="nameRight"><%= player2 || "Gegner" %></div>
|
||||
<div class="av-stats">
|
||||
<div class="stat hp"><span class="s-icon">❤</span><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 class="stat hp">
|
||||
<span class="s-icon">❤</span
|
||||
><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 class="hp-orb" id="orbRight"><%= player2hp || 15 %></div>
|
||||
</div>
|
||||
|
||||
<div class="card-area">
|
||||
<div class="row-label">Reihe 1</div>
|
||||
<div class="row-label"></div>
|
||||
<div class="card-row" id="row1"></div>
|
||||
<div class="row-label">Reihe 2</div>
|
||||
<div class="row-label"></div>
|
||||
<div class="card-row" id="row2"></div>
|
||||
</div>
|
||||
|
||||
@ -191,14 +295,26 @@
|
||||
<div id="match-result-overlay">
|
||||
<div class="result-title" id="result-title"></div>
|
||||
<div class="result-points" id="result-points"></div>
|
||||
<div class="result-levelup" id="result-levelup" style="display:none;"></div>
|
||||
<div class="result-progress-wrap" id="result-progress-wrap" style="display:none;">
|
||||
<div
|
||||
class="result-levelup"
|
||||
id="result-levelup"
|
||||
style="display: none"
|
||||
></div>
|
||||
<div
|
||||
class="result-progress-wrap"
|
||||
id="result-progress-wrap"
|
||||
style="display: none"
|
||||
>
|
||||
<div class="result-progress-label">
|
||||
<span id="result-level-label">Level</span>
|
||||
<span id="result-pts-label"></span>
|
||||
</div>
|
||||
<div class="result-progress-track">
|
||||
<div class="result-progress-fill" id="result-progress-fill" style="width:0%"></div>
|
||||
<div
|
||||
class="result-progress-fill"
|
||||
id="result-progress-fill"
|
||||
style="width: 0%"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="result-close-btn" id="result-close-btn">Schließen</button>
|
||||
@ -207,12 +323,15 @@
|
||||
<script src="/socket.io/socket.io.js"></script>
|
||||
<script>
|
||||
/* ── Spielfeld aufbauen ─────────────────────────────── */
|
||||
["row1","row2"].forEach(id => {
|
||||
["row1", "row2"].forEach((id) => {
|
||||
const row = document.getElementById(id);
|
||||
for (let i = 1; i <= 11; i++) {
|
||||
const s = document.createElement("div");
|
||||
s.className = "card-slot";
|
||||
s.innerHTML = '<span class="slot-icon">✦</span><span class="slot-num">' + i + "</span>";
|
||||
s.innerHTML =
|
||||
'<span class="slot-icon">✦</span><span class="slot-num">' +
|
||||
i +
|
||||
"</span>";
|
||||
row.appendChild(s);
|
||||
}
|
||||
});
|
||||
@ -236,7 +355,7 @@
|
||||
|
||||
// ── Slots 2–4: aufgedeckte Handkarten (leer bis API lädt) ───
|
||||
const handCardIds = ["hand-card-1", "hand-card-2", "hand-card-3"];
|
||||
handCardIds.forEach(id => {
|
||||
handCardIds.forEach((id) => {
|
||||
const s = document.createElement("div");
|
||||
s.className = "hand-slot hand-slot-card";
|
||||
s.id = id;
|
||||
@ -260,11 +379,13 @@
|
||||
|
||||
// State pro Slot: { card, currentCd } oder null = leer
|
||||
const handSlotState = {};
|
||||
handCardIds.forEach(id => { handSlotState[id] = null; });
|
||||
handCardIds.forEach((id) => {
|
||||
handSlotState[id] = null;
|
||||
});
|
||||
|
||||
/* ── Slot rendern ──────────────────────────────────── */
|
||||
function renderHandSlot(id) {
|
||||
const slot = document.getElementById(id);
|
||||
const slot = document.getElementById(id);
|
||||
const state = handSlotState[id];
|
||||
if (!slot) return;
|
||||
|
||||
@ -277,16 +398,18 @@
|
||||
const { card, currentCd } = state;
|
||||
const isReady = currentCd <= 0;
|
||||
|
||||
const atkVal = card.attack ?? null;
|
||||
const atkVal = card.attack ?? null;
|
||||
const defVal = card.defends ?? null;
|
||||
|
||||
const statsHtml = `
|
||||
<div class="card-stat-overlay">
|
||||
${atkVal != null ? `<span class="cs-atk">${atkVal}</span>` : ""}
|
||||
${defVal != null ? `<span class="cs-def">${defVal}</span>` : ""}
|
||||
${card.cooldown != null
|
||||
? `<span class="cs-cd ${isReady ? "cs-cd-ready" : ""}">${isReady ? "✓" : currentCd}</span>`
|
||||
: ""}
|
||||
${
|
||||
card.cooldown != null
|
||||
? `<span class="cs-cd ${isReady ? "cs-cd-ready" : ""}">${isReady ? "✓" : currentCd}</span>`
|
||||
: ""
|
||||
}
|
||||
</div>`;
|
||||
|
||||
const readyBadge = isReady
|
||||
@ -317,7 +440,7 @@
|
||||
/* ── Karte vom Deck ziehen ─────────────────────────── */
|
||||
function drawNextCard() {
|
||||
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
|
||||
const card = deckQueue.shift();
|
||||
setHandSlot(freeSlot, card);
|
||||
@ -327,7 +450,7 @@
|
||||
|
||||
/* ── Cooldowns beim Zug-Ende reduzieren ────────────── */
|
||||
function tickHandCooldowns() {
|
||||
handCardIds.forEach(id => {
|
||||
handCardIds.forEach((id) => {
|
||||
const state = handSlotState[id];
|
||||
if (!state) return;
|
||||
if (state.currentCd > 0) state.currentCd--;
|
||||
@ -338,8 +461,9 @@
|
||||
/* ── Deck laden ────────────────────────────────────── */
|
||||
(async () => {
|
||||
try {
|
||||
const urlP = new URLSearchParams(window.location.search);
|
||||
const deckId = urlP.get("deck") || sessionStorage.getItem("selectedDeckId");
|
||||
const urlP = new URLSearchParams(window.location.search);
|
||||
const deckId =
|
||||
urlP.get("deck") || sessionStorage.getItem("selectedDeckId");
|
||||
if (!deckId) return;
|
||||
|
||||
const cardsRes = await fetch("/api/decks/" + deckId + "/cards");
|
||||
@ -348,7 +472,7 @@
|
||||
|
||||
// Karten nach amount auffalten
|
||||
const expanded = [];
|
||||
cards.forEach(card => {
|
||||
cards.forEach((card) => {
|
||||
for (let i = 0; i < (card.amount ?? 1); i++) expanded.push(card);
|
||||
});
|
||||
|
||||
@ -367,8 +491,7 @@
|
||||
deckQueue = expanded.slice(3);
|
||||
const countEl = document.getElementById("deck-count");
|
||||
if (countEl) countEl.textContent = deckQueue.length;
|
||||
|
||||
} catch(e) {
|
||||
} catch (e) {
|
||||
console.error("[Battlefield] Deck laden:", e);
|
||||
}
|
||||
})();
|
||||
@ -376,10 +499,10 @@
|
||||
/* ══════════════════════════════════════════════════════
|
||||
ZUG-TIMER (20 Sekunden)
|
||||
══════════════════════════════════════════════════════ */
|
||||
const TURN_SECONDS = 20;
|
||||
const TT_CIRCUM = 2 * Math.PI * 18; // r=18
|
||||
let turnTimerInt = null;
|
||||
let turnSecsLeft = TURN_SECONDS;
|
||||
const TURN_SECONDS = 20;
|
||||
const TT_CIRCUM = 2 * Math.PI * 18; // r=18
|
||||
let turnTimerInt = null;
|
||||
let turnSecsLeft = TURN_SECONDS;
|
||||
|
||||
function startTurnTimer() {
|
||||
clearInterval(turnTimerInt);
|
||||
@ -403,7 +526,9 @@
|
||||
// Watchdog: falls turn_change nach 5s nicht ankommt → selbst freischalten
|
||||
setTimeout(() => {
|
||||
if (!isMyTurn) {
|
||||
console.warn("[1v1] Kein turn_change nach 5s – Zug lokal übergeben");
|
||||
console.warn(
|
||||
"[1v1] Kein turn_change nach 5s – Zug lokal übergeben",
|
||||
);
|
||||
setTurnState(true);
|
||||
}
|
||||
}, 5000);
|
||||
@ -419,12 +544,13 @@
|
||||
}
|
||||
|
||||
function updateTimerUI(secs) {
|
||||
const num = document.getElementById("turn-timer-num");
|
||||
const num = document.getElementById("turn-timer-num");
|
||||
const circle = document.getElementById("tt-circle");
|
||||
if (num) num.textContent = secs;
|
||||
if (num) num.textContent = secs;
|
||||
if (circle) {
|
||||
circle.style.strokeDashoffset = TT_CIRCUM * (1 - secs / TURN_SECONDS);
|
||||
circle.style.stroke = secs > 10 ? "#27ae60" : secs > 5 ? "#f39c12" : "#e74c3c";
|
||||
circle.style.stroke =
|
||||
secs > 10 ? "#27ae60" : secs > 5 ? "#f39c12" : "#e74c3c";
|
||||
if (secs <= 5) {
|
||||
num.style.color = "#e74c3c";
|
||||
num.style.animation = "tt-pulse 0.5s ease-in-out infinite";
|
||||
@ -441,7 +567,7 @@
|
||||
|
||||
// Bin ich der linke Spieler? Wird nach Seitenzuweisung gesetzt.
|
||||
let amILeftPlayer = null;
|
||||
let isMyTurn = false;
|
||||
let isMyTurn = false;
|
||||
|
||||
function setTurnState(myTurn) {
|
||||
isMyTurn = myTurn;
|
||||
@ -455,7 +581,10 @@
|
||||
document.getElementById("turn-indicator")?.remove();
|
||||
startTurnTimer();
|
||||
// Watchdog für wartenden Spieler abbrechen falls vorhanden
|
||||
if (window._waitWatchdog) { clearTimeout(window._waitWatchdog); window._waitWatchdog = null; }
|
||||
if (window._waitWatchdog) {
|
||||
clearTimeout(window._waitWatchdog);
|
||||
window._waitWatchdog = null;
|
||||
}
|
||||
} else {
|
||||
btn.disabled = true;
|
||||
btn.style.opacity = "0.4";
|
||||
@ -465,7 +594,9 @@
|
||||
if (window._waitWatchdog) clearTimeout(window._waitWatchdog);
|
||||
window._waitWatchdog = setTimeout(() => {
|
||||
if (!isMyTurn) {
|
||||
console.warn("[1v1] Kein turn_change nach 26s – Zug lokal übernommen");
|
||||
console.warn(
|
||||
"[1v1] Kein turn_change nach 26s – Zug lokal übernommen",
|
||||
);
|
||||
setTurnState(true);
|
||||
}
|
||||
}, 26000);
|
||||
@ -508,19 +639,22 @@
|
||||
/* ── Hilfsfunktion: Karte mit Stats in einen Slot rendern ── */
|
||||
function renderCardInSlot(slot, card) {
|
||||
if (!slot || !card) return;
|
||||
const atkVal = card.attack ?? null;
|
||||
const defVal = card.defends ?? null;
|
||||
const cdVal = card.cooldown ?? null;
|
||||
const atkVal = card.attack ?? null;
|
||||
const defVal = card.defends ?? null;
|
||||
const cdVal = card.cooldown ?? null;
|
||||
|
||||
const hasAtk = atkVal != null;
|
||||
const hasDef = defVal != null;
|
||||
const hasCd = cdVal != null;
|
||||
const statsHtml = (hasAtk || hasDef || hasCd) ? `
|
||||
const hasCd = cdVal != null;
|
||||
const statsHtml =
|
||||
hasAtk || hasDef || hasCd
|
||||
? `
|
||||
<div class="card-stat-overlay">
|
||||
${hasAtk ? `<span class="cs-atk">${atkVal}</span>` : ""}
|
||||
${hasDef ? `<span class="cs-def">${defVal}</span>` : ""}
|
||||
${hasCd ? `<span class="cs-cd">${cdVal}</span>` : ""}
|
||||
</div>` : "";
|
||||
${hasCd ? `<span class="cs-cd">${cdVal}</span>` : ""}
|
||||
</div>`
|
||||
: "";
|
||||
|
||||
slot.classList.add("slot-occupied");
|
||||
slot.innerHTML = card.image
|
||||
@ -538,9 +672,9 @@
|
||||
}
|
||||
|
||||
/* ── Match-Daten ────────────────────────────────────── */
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const matchId = urlParams.get("match") || "<%= matchId || '' %>";
|
||||
const mySlot = urlParams.get("slot") || "<%= mySlot || 'player1' %>";
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const matchId = urlParams.get("match") || "<%= matchId || '' %>";
|
||||
const mySlot = urlParams.get("slot") || "<%= mySlot || 'player1' %>";
|
||||
const amIPlayer1 = mySlot === "player1";
|
||||
|
||||
/* ── Socket ─────────────────────────────────────────── */
|
||||
@ -550,23 +684,31 @@
|
||||
let myIngameName = null;
|
||||
|
||||
function emitArenaJoin(me) {
|
||||
myIngameName = (me && (me.ingame_name || me.username || me.name || String(me.id))) || "Spieler";
|
||||
const myNameEl = document.getElementById(amIPlayer1 ? "nameLeft" : "nameRight");
|
||||
myIngameName =
|
||||
(me && (me.ingame_name || me.username || me.name || String(me.id))) ||
|
||||
"Spieler";
|
||||
const myNameEl = document.getElementById(
|
||||
amIPlayer1 ? "nameLeft" : "nameRight",
|
||||
);
|
||||
if (myNameEl) myNameEl.textContent = myIngameName;
|
||||
console.log("[1v1] emitArenaJoin →", { matchId, slot: mySlot, name: myIngameName });
|
||||
console.log("[1v1] emitArenaJoin →", {
|
||||
matchId,
|
||||
slot: mySlot,
|
||||
name: myIngameName,
|
||||
});
|
||||
socket.emit("arena_join", {
|
||||
matchId,
|
||||
slot: mySlot,
|
||||
accountId: me?.id ?? null,
|
||||
slot: mySlot,
|
||||
accountId: me?.id ?? null,
|
||||
playerName: myIngameName,
|
||||
});
|
||||
}
|
||||
|
||||
function fetchAndJoin() {
|
||||
fetch("/arena/me")
|
||||
.then(r => r.json())
|
||||
.then(me => emitArenaJoin(me))
|
||||
.catch(() => {
|
||||
.then((r) => r.json())
|
||||
.then((me) => emitArenaJoin(me))
|
||||
.catch(() => {
|
||||
console.warn("[1v1] /arena/me fehlgeschlagen – join ohne Account");
|
||||
emitArenaJoin(null);
|
||||
});
|
||||
@ -594,39 +736,52 @@
|
||||
}, 10000);
|
||||
|
||||
/* ── Gegner verbunden ───────────────────────────────── */
|
||||
socket.on("arena_opponent_joined", data => {
|
||||
socket.on("arena_opponent_joined", (data) => {
|
||||
console.log("[Arena] arena_opponent_joined:", data);
|
||||
clearTimeout(readyFallbackTimer);
|
||||
const name = data.name || "Gegner";
|
||||
document.getElementById(amIPlayer1 ? "nameRight" : "nameLeft").textContent = name;
|
||||
document.getElementById(
|
||||
amIPlayer1 ? "nameRight" : "nameLeft",
|
||||
).textContent = name;
|
||||
document.getElementById("connecting-overlay")?.remove();
|
||||
const lockOverlay = document.getElementById("board-lock-overlay");
|
||||
if (lockOverlay) lockOverlay.style.display = "flex";
|
||||
});
|
||||
|
||||
socket.on("arena_ready", data => {
|
||||
socket.on("arena_ready", (data) => {
|
||||
console.log("[Arena] arena_ready:", data);
|
||||
clearTimeout(readyFallbackTimer);
|
||||
document.getElementById("connecting-overlay")?.remove();
|
||||
// Gegner-Name aus server-Daten setzen (immer, außer leer)
|
||||
const oppName = amIPlayer1 ? data.player2 : data.player1;
|
||||
const oppEl = document.getElementById(amIPlayer1 ? "nameRight" : "nameLeft");
|
||||
const oppEl = document.getElementById(
|
||||
amIPlayer1 ? "nameRight" : "nameLeft",
|
||||
);
|
||||
if (oppEl && oppName) oppEl.textContent = oppName;
|
||||
// Eigenen Namen sichern falls noch nicht gesetzt
|
||||
const myEl = document.getElementById(amIPlayer1 ? "nameLeft" : "nameRight");
|
||||
const myEl = document.getElementById(
|
||||
amIPlayer1 ? "nameLeft" : "nameRight",
|
||||
);
|
||||
if (myEl && myIngameName) myEl.textContent = myIngameName;
|
||||
const lockOverlay = document.getElementById("board-lock-overlay");
|
||||
if (lockOverlay) lockOverlay.style.display = "flex";
|
||||
});
|
||||
|
||||
/* ── Server: Zugwechsel ──────────────────────────────── */
|
||||
socket.on("turn_change", data => {
|
||||
socket.on("turn_change", (data) => {
|
||||
const nowMyTurn = data.activeSlot === mySlot;
|
||||
console.log("[1v1] turn_change:", data.activeSlot, "| ich bin:", mySlot, "| meinZug:", nowMyTurn);
|
||||
console.log(
|
||||
"[1v1] turn_change:",
|
||||
data.activeSlot,
|
||||
"| ich bin:",
|
||||
mySlot,
|
||||
"| meinZug:",
|
||||
nowMyTurn,
|
||||
);
|
||||
setTurnState(nowMyTurn);
|
||||
});
|
||||
|
||||
socket.on("turn_started", data => {
|
||||
socket.on("turn_started", (data) => {
|
||||
setTurnState(data.slot === mySlot);
|
||||
});
|
||||
|
||||
@ -646,49 +801,67 @@
|
||||
const timerCircle = document.getElementById("timer-circle");
|
||||
if (timerCircle) timerCircle.style.strokeDasharray = CIRCUMFERENCE;
|
||||
|
||||
socket.on("ready_timer", data => {
|
||||
socket.on("ready_timer", (data) => {
|
||||
const num = document.getElementById("ready-timer-number");
|
||||
if (num) num.textContent = data.remaining;
|
||||
if (timerCircle) {
|
||||
timerCircle.style.strokeDashoffset = CIRCUMFERENCE * (1 - data.remaining / 30);
|
||||
timerCircle.style.stroke = data.remaining > 15 ? "#27ae60" : data.remaining > 7 ? "#f39c12" : "#e74c3c";
|
||||
timerCircle.style.strokeDashoffset =
|
||||
CIRCUMFERENCE * (1 - data.remaining / 30);
|
||||
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 pip2 = document.getElementById("pip-player2");
|
||||
if (data.readySlots) {
|
||||
if (data.readySlots.includes("player1") && pip1) pip1.textContent = "✅ " + (document.getElementById("nameLeft")?.textContent || "Spieler 1");
|
||||
if (data.readySlots.includes("player2") && pip2) pip2.textContent = "✅ " + (document.getElementById("nameRight")?.textContent || "Spieler 2");
|
||||
if (data.readySlots.includes("player1") && pip1)
|
||||
pip1.textContent =
|
||||
"✅ " +
|
||||
(document.getElementById("nameLeft")?.textContent || "Spieler 1");
|
||||
if (data.readySlots.includes("player2") && pip2)
|
||||
pip2.textContent =
|
||||
"✅ " +
|
||||
(document.getElementById("nameRight")?.textContent ||
|
||||
"Spieler 2");
|
||||
}
|
||||
if (data.readyCount === 2) {
|
||||
// ── Zufällige Seitenzuweisung ──────────────────────
|
||||
const seed = matchId.split("").reduce((a, c) => a + c.charCodeAt(0), 0);
|
||||
const seed = matchId
|
||||
.split("")
|
||||
.reduce((a, c) => a + c.charCodeAt(0), 0);
|
||||
const flip = seed % 2 === 1;
|
||||
|
||||
// Eigenen Namen immer aus myIngameName, Gegner aus DOM
|
||||
const myName = myIngameName || "Spieler";
|
||||
const oppEl = document.getElementById(amIPlayer1 ? "nameRight" : "nameLeft");
|
||||
const myName = myIngameName || "Spieler";
|
||||
const oppEl = document.getElementById(
|
||||
amIPlayer1 ? "nameRight" : "nameLeft",
|
||||
);
|
||||
const oppName = oppEl?.textContent || "Gegner";
|
||||
|
||||
// player1-Name und player2-Name bestimmen
|
||||
const p1Name = amIPlayer1 ? myName : oppName;
|
||||
const p1Name = amIPlayer1 ? myName : oppName;
|
||||
const p2Name = amIPlayer1 ? oppName : myName;
|
||||
|
||||
const leftName = flip ? p2Name : p1Name;
|
||||
const leftName = flip ? p2Name : p1Name;
|
||||
const rightName = flip ? p1Name : p2Name;
|
||||
|
||||
// Namen in Avatar-Slots schreiben
|
||||
document.getElementById("nameLeft").textContent = leftName;
|
||||
document.getElementById("nameLeft").textContent = leftName;
|
||||
document.getElementById("nameRight").textContent = rightName;
|
||||
|
||||
// Platzhalter: Ingame-Namen anzeigen
|
||||
["avLeft", "avRight"].forEach(avId => {
|
||||
const av = document.getElementById(avId);
|
||||
const ph = av?.querySelector(".av-placeholder");
|
||||
["avLeft", "avRight"].forEach((avId) => {
|
||||
const av = document.getElementById(avId);
|
||||
const ph = av?.querySelector(".av-placeholder");
|
||||
const name = avId === "avLeft" ? leftName : rightName;
|
||||
if (ph) ph.innerHTML = `
|
||||
if (ph)
|
||||
ph.innerHTML = `
|
||||
<div style="
|
||||
font-family:'Cinzel',serif;
|
||||
font-size:calc(var(--s)*13);
|
||||
@ -706,11 +879,14 @@
|
||||
|
||||
// Festlegen ob ich der linke Spieler bin
|
||||
// flip=false: player1=links, flip=true: player1=rechts
|
||||
amILeftPlayer = flip ? (mySlot === "player2") : (mySlot === "player1");
|
||||
amILeftPlayer = flip ? mySlot === "player2" : mySlot === "player1";
|
||||
|
||||
// Linker Spieler beginnt
|
||||
setTurnState(amILeftPlayer);
|
||||
socket.emit("end_turn_init", { matchId, starterSlot: flip ? "player2" : "player1" });
|
||||
socket.emit("end_turn_init", {
|
||||
matchId,
|
||||
starterSlot: flip ? "player2" : "player1",
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
@ -719,7 +895,8 @@
|
||||
// Eigenes Modal statt browser confirm()
|
||||
const modal = document.createElement("div");
|
||||
modal.id = "surrender-modal";
|
||||
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;";
|
||||
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;";
|
||||
modal.innerHTML = `
|
||||
<div style="background:linear-gradient(#2a1a08,#1a0f04);border:2px solid #c8960c;
|
||||
border-radius:14px;padding:32px 40px;text-align:center;max-width:360px;
|
||||
@ -741,13 +918,17 @@
|
||||
</div>`;
|
||||
document.body.appendChild(modal);
|
||||
|
||||
document.getElementById("surrender-no").addEventListener("click", () => modal.remove());
|
||||
document.getElementById("surrender-yes").addEventListener("click", () => {
|
||||
modal.remove();
|
||||
socket.emit("player_surrender", { matchId, slot: mySlot });
|
||||
// Eigene Weiterleitung nach kurzer Verzögerung
|
||||
showSurrenderMessage(false);
|
||||
});
|
||||
document
|
||||
.getElementById("surrender-no")
|
||||
.addEventListener("click", () => modal.remove());
|
||||
document
|
||||
.getElementById("surrender-yes")
|
||||
.addEventListener("click", () => {
|
||||
modal.remove();
|
||||
socket.emit("player_surrender", { matchId, slot: mySlot });
|
||||
// Eigene Weiterleitung nach kurzer Verzögerung
|
||||
showSurrenderMessage(false);
|
||||
});
|
||||
}
|
||||
|
||||
/* ── Zurück zum Arena-Popup (nicht zum Launcher) ─────── */
|
||||
@ -813,7 +994,8 @@
|
||||
document.body.appendChild(overlay);
|
||||
|
||||
// Button-Klick → zurück zum Arena-Popup
|
||||
document.getElementById("surrender-close-btn")
|
||||
document
|
||||
.getElementById("surrender-close-btn")
|
||||
.addEventListener("click", closeToArena);
|
||||
|
||||
// Auto-Close nach 8s
|
||||
@ -821,7 +1003,7 @@
|
||||
}
|
||||
|
||||
/* ── Spielende Events ───────────────────────────────── */
|
||||
socket.on("player_surrendered", data => {
|
||||
socket.on("player_surrendered", (data) => {
|
||||
const iLost = data.slot === mySlot;
|
||||
if (!iLost) {
|
||||
// Ich habe gewonnen – Gegner hat aufgegeben
|
||||
@ -831,7 +1013,7 @@
|
||||
});
|
||||
|
||||
/* Punkte-Ergebnis vom Server (kommt kurz nach player_surrendered) */
|
||||
socket.on("match_result", data => {
|
||||
socket.on("match_result", (data) => {
|
||||
updateResultWithPoints(data);
|
||||
});
|
||||
|
||||
@ -841,12 +1023,12 @@
|
||||
|
||||
/* ── Ergebnis-Overlay ───────────────────────────────── */
|
||||
function showResultOverlay(won, data) {
|
||||
const overlay = document.getElementById("match-result-overlay");
|
||||
const titleEl = document.getElementById("result-title");
|
||||
const overlay = document.getElementById("match-result-overlay");
|
||||
const titleEl = document.getElementById("result-title");
|
||||
const pointsEl = document.getElementById("result-points");
|
||||
|
||||
titleEl.textContent = won ? "⚔️ SIEG!" : "💀 NIEDERLAGE";
|
||||
titleEl.className = "result-title " + (won ? "win" : "lose");
|
||||
titleEl.className = "result-title " + (won ? "win" : "lose");
|
||||
pointsEl.textContent = "Punkte werden berechnet…";
|
||||
|
||||
overlay.classList.add("show");
|
||||
@ -855,37 +1037,45 @@
|
||||
}
|
||||
|
||||
function updateResultWithPoints(data) {
|
||||
const pointsEl = document.getElementById("result-points");
|
||||
const levelupEl = document.getElementById("result-levelup");
|
||||
const pointsEl = document.getElementById("result-points");
|
||||
const levelupEl = document.getElementById("result-levelup");
|
||||
const progressEl = document.getElementById("result-progress-wrap");
|
||||
const fillEl = document.getElementById("result-progress-fill");
|
||||
const lvlLbl = document.getElementById("result-level-label");
|
||||
const ptsLbl = document.getElementById("result-pts-label");
|
||||
const fillEl = document.getElementById("result-progress-fill");
|
||||
const lvlLbl = document.getElementById("result-level-label");
|
||||
const ptsLbl = document.getElementById("result-pts-label");
|
||||
|
||||
/* Overlay anzeigen falls noch nicht sichtbar */
|
||||
const overlay = document.getElementById("match-result-overlay");
|
||||
if (!overlay.classList.contains("show")) {
|
||||
document.getElementById("result-title").textContent = data.won ? "⚔️ SIEG!" : "💀 NIEDERLAGE";
|
||||
document.getElementById("result-title").className = "result-title " + (data.won ? "win" : "lose");
|
||||
document.getElementById("result-title").textContent = data.won
|
||||
? "⚔️ SIEG!"
|
||||
: "💀 NIEDERLAGE";
|
||||
document.getElementById("result-title").className =
|
||||
"result-title " + (data.won ? "win" : "lose");
|
||||
overlay.classList.add("show");
|
||||
}
|
||||
|
||||
pointsEl.textContent = data.awarded > 0
|
||||
? "+" + data.awarded + " Arena-Punkte"
|
||||
: "Keine Punkte (Aufgabe zu früh oder Tageslimit erreicht)";
|
||||
pointsEl.textContent =
|
||||
data.awarded > 0
|
||||
? "+" + data.awarded + " Arena-Punkte"
|
||||
: "Keine Punkte (Aufgabe zu früh oder Tageslimit erreicht)";
|
||||
|
||||
if (data.level_up) {
|
||||
levelupEl.style.display = "block";
|
||||
levelupEl.textContent = "⬆ LEVEL UP! → Level " + data.new_level;
|
||||
levelupEl.textContent = "⬆ LEVEL UP! → Level " + data.new_level;
|
||||
}
|
||||
|
||||
/* Fortschrittsbalken vom Server laden */
|
||||
fetch("/api/points/me")
|
||||
.then(r => r.json())
|
||||
.then(me => {
|
||||
.then((r) => r.json())
|
||||
.then((me) => {
|
||||
progressEl.style.display = "block";
|
||||
lvlLbl.textContent = "Level " + me.current_level + (me.next_level ? " → " + me.next_level : " (MAX)");
|
||||
ptsLbl.textContent = me.points_this_level + " / " + me.points_for_next + " Pts";
|
||||
lvlLbl.textContent =
|
||||
"Level " +
|
||||
me.current_level +
|
||||
(me.next_level ? " → " + me.next_level : " (MAX)");
|
||||
ptsLbl.textContent =
|
||||
me.points_this_level + " / " + me.points_for_next + " Pts";
|
||||
requestAnimationFrame(() => {
|
||||
fillEl.style.width = me.progress_percent + "%";
|
||||
});
|
||||
@ -898,27 +1088,44 @@
|
||||
closeToArena();
|
||||
}
|
||||
|
||||
document.getElementById("result-close-btn").addEventListener("click", closePopup);
|
||||
document
|
||||
.getElementById("result-close-btn")
|
||||
.addEventListener("click", closePopup);
|
||||
|
||||
/* ── Avatar ─────────────────────────────────────────── */
|
||||
function loadAvatar(input, imgId, parentId) {
|
||||
const file = input.files[0];
|
||||
if (!file) return;
|
||||
const r = new FileReader();
|
||||
r.onload = e => {
|
||||
r.onload = (e) => {
|
||||
const img = document.getElementById(imgId);
|
||||
img.src = e.target.result;
|
||||
img.style.display = "block";
|
||||
document.getElementById(parentId)?.querySelector(".av-placeholder")?.style.setProperty("display","none");
|
||||
document
|
||||
.getElementById(parentId)
|
||||
?.querySelector(".av-placeholder")
|
||||
?.style.setProperty("display", "none");
|
||||
};
|
||||
r.readAsDataURL(file);
|
||||
}
|
||||
|
||||
/* ── Event-Listener ─────────────────────────────────── */
|
||||
document.getElementById("bereit-btn") ?.addEventListener("click", handleBereit);
|
||||
document.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"); });
|
||||
document
|
||||
.getElementById("bereit-btn")
|
||||
?.addEventListener("click", handleBereit);
|
||||
document
|
||||
.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>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user