145 lines
6.0 KiB
Plaintext
145 lines
6.0 KiB
Plaintext
<!doctype html>
|
|
<html lang="de">
|
|
<head>
|
|
<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 rel="stylesheet" href="/css/1v1.css" />
|
|
</head>
|
|
<body>
|
|
|
|
<div id="connecting-overlay">
|
|
<div class="spinner"></div>
|
|
<div>Warte auf Gegner…</div>
|
|
<p>Verbindung wird hergestellt</p>
|
|
</div>
|
|
|
|
<div class="board">
|
|
|
|
<div class="top-bar">
|
|
<div class="game-title"><%= title || "Spielfeld" %></div>
|
|
<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" />
|
|
</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>
|
|
<div class="top-bar-actions">
|
|
<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="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" />
|
|
</svg>
|
|
<div id="ready-timer-number">30</div>
|
|
</div>
|
|
<div id="ready-timer-sub">Beide Spieler müssen BEREIT klicken</div>
|
|
<div id="ready-status-row">
|
|
<div class="ready-pip" id="pip-player1">⬜ Spieler 1</div>
|
|
<div class="ready-pip" id="pip-player2">⬜ Spieler 2</div>
|
|
</div>
|
|
<button class="bereit-btn" id="bereit-btn">✔ BEREIT</button>
|
|
</div>
|
|
</div>
|
|
|
|
<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-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>
|
|
<div class="hp-orb" id="orbLeft"><%= player1hp || 15 %></div>
|
|
</div>
|
|
|
|
<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-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>
|
|
<div class="hp-orb" id="orbRight"><%= player2hp || 15 %></div>
|
|
</div>
|
|
|
|
<div class="card-area">
|
|
<div class="row-label"></div>
|
|
<div class="card-row" id="row1"></div>
|
|
<div class="row-label"></div>
|
|
<div class="card-row" id="row2"></div>
|
|
</div>
|
|
|
|
<div class="bottom-bar">
|
|
<!-- Ablagestapel: links neben dem Deck -->
|
|
<div id="discard-zone" class="hand-slot-discard" title="Karte abwerfen">
|
|
<div class="discard-stack-wrap" id="discard-stack"></div>
|
|
<div class="discard-label">Ablage</div>
|
|
<div class="discard-count" id="discard-count">0</div>
|
|
</div>
|
|
<div class="hand-area" id="handArea"></div>
|
|
<div class="action-hud">
|
|
<div class="action-row">
|
|
<div class="action-btn" title="Angriff">⚔</div>
|
|
<div class="action-btn" title="Magie">✨</div>
|
|
<div class="action-btn" title="Verteidigung">🛡</div>
|
|
</div>
|
|
<div class="action-row">
|
|
<div class="action-btn" title="Heilen">💊</div>
|
|
<div class="action-btn" title="Karte ziehen">🃏</div>
|
|
<div class="action-btn" title="Einstellungen">⚙</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Match-Ergebnis Overlay -->
|
|
<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-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>
|
|
</div>
|
|
<button class="result-close-btn" id="result-close-btn">Schließen</button>
|
|
</div>
|
|
|
|
<!-- EJS -> JS Bridge -->
|
|
<script>
|
|
window.GAME_CONFIG = {
|
|
matchId : '<%= matchId || "" %>',
|
|
mySlot : '<%= mySlot || "player1" %>',
|
|
title : '<%= title || "Spielfeld" %>'
|
|
};
|
|
</script>
|
|
|
|
<script src="/socket.io/socket.io.js"></script>
|
|
<script src="/js/buildings/1v1.js"></script>
|
|
|
|
</body>
|
|
</html> |