145 lines
5.9 KiB
HTML
145 lines
5.9 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
|
||
<title>randomp2p – Münzwurf</title>
|
||
<link rel="stylesheet" href="style.css">
|
||
</head>
|
||
<body>
|
||
|
||
<!-- SCREEN: START -->
|
||
<section id="screen-start" class="screen active">
|
||
<div class="screen-inner">
|
||
<h1>randomp2p</h1>
|
||
<p class="subtitle">Vertrauensloser Münzwurf mit Freunden</p>
|
||
<div class="btn-group">
|
||
<button id="btn-create" class="btn-primary">Raum erstellen</button>
|
||
<button id="btn-join" class="btn-secondary">Raum beitreten</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- SCREEN: HOST LOBBY -->
|
||
<section id="screen-host" class="screen">
|
||
<div class="screen-inner">
|
||
<h2>Dein Raum</h2>
|
||
<div class="qr-section">
|
||
<div id="qr-host"></div>
|
||
<p class="hint">Scannen lassen, um beizutreten</p>
|
||
</div>
|
||
<div class="room-code debug-only">
|
||
<span class="room-code-label">Raum-Code</span>
|
||
<span class="room-code-value" id="host-room-code"></span>
|
||
<p class="hint">Auf gleichem Rechner: Code in anderem Tab eingeben</p>
|
||
</div>
|
||
<div id="host-players" class="player-section">
|
||
<h3>Spieler</h3>
|
||
<ul id="host-player-list" class="player-list"></ul>
|
||
</div>
|
||
<div id="host-scan-answer">
|
||
<button id="btn-scan-answer" class="btn-secondary">Antwort-QR scannen</button>
|
||
<video id="host-camera" autoplay playsinline muted></video>
|
||
<canvas id="host-camera-canvas" hidden></canvas>
|
||
<p id="host-scan-status"></p>
|
||
<details class="debug-helper debug-only">
|
||
<summary>QR-Rohdaten</summary>
|
||
<pre id="host-qr-raw" class="raw-data"></pre>
|
||
</details>
|
||
<details class="debug-helper debug-only">
|
||
<summary>Antwort manuell einfügen</summary>
|
||
<textarea id="host-answer-paste" rows="3" placeholder="Antwort-JSON hier einfügen..."></textarea>
|
||
<button id="btn-host-answer-paste" class="btn-small">Antwort einspielen</button>
|
||
</details>
|
||
<details class="debug-helper debug-only">
|
||
<summary>Full-SDP-QR (für andere Geräte)</summary>
|
||
<div id="qr-host-full"></div>
|
||
</details>
|
||
</div>
|
||
<button id="btn-start-game" class="btn-primary" disabled>Münzwurf starten</button>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- SCREEN: JOIN LOBBY -->
|
||
<section id="screen-join" class="screen">
|
||
<div class="screen-inner">
|
||
<h2>Raum beitreten</h2>
|
||
<div class="camera-section">
|
||
<video id="join-camera" autoplay playsinline muted></video>
|
||
<canvas id="join-camera-canvas" hidden></canvas>
|
||
<p id="join-scan-status">QR-Code scannen...</p>
|
||
<div class="debug-only" style="margin-top:12px">
|
||
<input id="join-room-input" type="text" placeholder="Raum-Code" maxlength="4" style="width:100px;padding:10px;text-align:center;font-size:1.2rem;font-family:monospace;text-transform:uppercase;background:var(--bg);border:1px solid var(--border);border-radius:6px;color:var(--text)">
|
||
<button id="btn-join-room" class="btn-small" style="margin-top:8px">Beitreten</button>
|
||
</div>
|
||
<details class="debug-helper debug-only">
|
||
<summary>QR manuell einfügen</summary>
|
||
<textarea id="join-qr-paste" rows="3" placeholder="QR-JSON hier einfügen..."></textarea>
|
||
<button id="btn-join-qr-paste" class="btn-small">Beitreten</button>
|
||
</details>
|
||
</div>
|
||
<div id="join-answer-section" hidden>
|
||
<p>Antwort-QR für den Host:</p>
|
||
<div id="qr-answer"></div>
|
||
<p class="hint">Zeige diesen QR-Code dem Host</p>
|
||
</div>
|
||
<ul id="join-player-list" class="player-list"></ul>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- SCREEN: GAME -->
|
||
<section id="screen-game" class="screen">
|
||
<div class="screen-inner">
|
||
<h2>Münzwurf</h2>
|
||
<div id="game-players" class="player-section">
|
||
<ul id="game-player-list" class="player-list"></ul>
|
||
</div>
|
||
<div id="protocol-status" class="protocol-status">
|
||
<div class="phase" id="phase-ready">Bereit</div>
|
||
<div class="phase" id="phase-commit">Commit</div>
|
||
<div class="phase" id="phase-reveal">Reveal</div>
|
||
<div class="phase" id="phase-verify">Verifikation</div>
|
||
<div class="phase" id="phase-done">Ergebnis</div>
|
||
</div>
|
||
<div id="protocol-text" class="protocol-text">Warte auf Start...</div>
|
||
<div id="coin-area" hidden>
|
||
<div id="coin" class="coin">
|
||
<div class="coin-inner">
|
||
<div class="coin-face front">K</div>
|
||
<div class="coin-face back">Z</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="result-area" hidden>
|
||
<h3 id="result-text"></h3>
|
||
<button id="btn-retry" class="btn-primary">Nochmal</button>
|
||
</div>
|
||
<button id="btn-start-protocol" class="btn-primary">Münzwurf starten</button>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- SCREEN: RESULT OVERLAY -->
|
||
<section id="screen-result" class="screen">
|
||
<div class="screen-inner">
|
||
<div id="result-coin" class="coin large">
|
||
<div class="coin-inner">
|
||
<div class="coin-face front">K</div>
|
||
<div class="coin-face back">Z</div>
|
||
</div>
|
||
</div>
|
||
<h2 id="result-title"></h2>
|
||
<p id="result-detail"></p>
|
||
<button id="btn-play-again" class="btn-primary">Nochmal spielen</button>
|
||
<button id="btn-back-start" class="btn-secondary">Zurück zum Start</button>
|
||
</div>
|
||
</section>
|
||
|
||
<script src="https://unpkg.com/simple-peer@9.11.1/simplepeer.min.js"></script>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
|
||
<script src="https://cdn.jsdelivr.net/npm/jsqr@1.4.0/dist/jsQR.js"></script>
|
||
<script src="crypto.js"></script>
|
||
<script src="p2p.js"></script>
|
||
<script src="protocol.js"></script>
|
||
<script src="app.js"></script>
|
||
</body>
|
||
</html>
|