146 lines
5.6 KiB
HTML
146 lines
5.6 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<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="name-section">
|
||
<input type="text" id="player-name" placeholder="Dein Name" maxlength="24" autocomplete="off">
|
||
</div>
|
||
<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>
|
||
<details class="debug-helper debug-only" style="margin-top:8px">
|
||
<summary>QR-Rohdaten</summary>
|
||
<pre id="host-qr-raw" class="raw-data"></pre>
|
||
</details>
|
||
</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>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>
|
||
</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>
|
||
<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>
|
||
<details class="debug-helper debug-only" style="margin-top:8px">
|
||
<summary>QR-Rohdaten</summary>
|
||
<pre id="answer-raw" class="raw-data"></pre>
|
||
</details>
|
||
</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="results-container" class="results-container" hidden></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>
|
||
|
||
<div id="debug-chat" class="debug-only">
|
||
<div id="debug-chat-messages"></div>
|
||
<div id="debug-chat-input">
|
||
<input type="text" id="debug-chat-text" placeholder="Chat (debug)">
|
||
<button id="debug-chat-send">Senden</button>
|
||
</div>
|
||
</div>
|
||
<div id="debug-pairing" class="debug-only">
|
||
<div id="debug-pairing-header">Pairing-Logs</div>
|
||
<div id="debug-pairing-messages"></div>
|
||
</div>
|
||
<footer>
|
||
<p>© by neunzig.wtf · commit <a id="commit-hash" href="https://git.ziemlichoptimal.de/90wtf/randomp2p/src/commit/HASH">HASH</a></p>
|
||
</footer>
|
||
<script src="vendor/simplepeer.min.js"></script>
|
||
<script src="vendor/qrcode.min.js"></script>
|
||
<script src="vendor/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>
|