Initial commit: P2P coin flip with QR signaling and commit-reveal protocol
This commit is contained in:
Ole
commit
bdd85db8a7
7 changed files with 1234 additions and 0 deletions
113
README.md
Normal file
113
README.md
Normal file
|
|
@ -0,0 +1,113 @@
|
||||||
|
# randomp2p
|
||||||
|
|
||||||
|
**Vertrauensloser Multiplayer-Münzwurf – P2P im Browser, keine Server, kein Trust.**
|
||||||
|
|
||||||
|
Zwei bis N Spieler verbinden sich via WebRTC (simple-peer) und führen ein kryptografisches Commit-Reveal-Protokoll aus, um einen garantiert fairen Münzwurf zu erhalten. Solange **ein** Teilnehmer ehrlich ist, ist das Ergebnis zufällig und manipulationssicher.
|
||||||
|
|
||||||
|
## Features
|
||||||
|
|
||||||
|
- **P2P** – Kein Server, kein Account, keine zentrale Instanz
|
||||||
|
- **Trustless** – Commit-Reveal-Protokoll mit SHA-256-Bindung, jeder verifiziert
|
||||||
|
- **QR-Bootstrapping** – SDP-Offers/Answers werden als QR-Codes ausgetauscht
|
||||||
|
- **Multiplayer (2–n)** – Beliebig viele Teilnehmer in einer Runde
|
||||||
|
- **Coin-Animation** – 3D-Münzwurf via CSS
|
||||||
|
- **100% Vanilla JS** – Keine Build-Tools, kein npm, keine Abhängigkeiten außer CDN-Libs
|
||||||
|
|
||||||
|
## Quick Start
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git clone <repo-url>
|
||||||
|
cd randomp2p
|
||||||
|
python3 -m http.server 8080
|
||||||
|
```
|
||||||
|
|
||||||
|
Dann auf zwei (oder mehr) Geräten `http://localhost:8080` öffnen.
|
||||||
|
|
||||||
|
> WebRTC + Kamera (`getUserMedia`) + Web Crypto API brauchen einen **sicheren Kontext**. Lokal via localhost funktioniert das. Für andere Geräte im selben Netzwerk die lokale IP verwenden.
|
||||||
|
|
||||||
|
## Spielanleitung
|
||||||
|
|
||||||
|
### Host
|
||||||
|
|
||||||
|
1. **"Raum erstellen"** – QR-Code mit SDP Offer wird angezeigt
|
||||||
|
2. **"Antwort-QR scannen"** – Kamera startet, scannt die Antwort-QRs der Beitreter
|
||||||
|
3. Jeder neue Spieler erscheint in der Liste
|
||||||
|
4. **"Münzwurf starten"** – Übergang in den Spiel-Screen
|
||||||
|
5. **"Münzwurf starten"** – Protokoll beginnt (Commit → Reveal → Ergebnis)
|
||||||
|
|
||||||
|
### Beitreter
|
||||||
|
|
||||||
|
1. **"Raum beitreten"** – Kamera startet
|
||||||
|
2. QR des Hosts scannen
|
||||||
|
3. **Antwort-QR zeigen** – Host scannt diesen QR
|
||||||
|
4. Verbindung steht, warten auf Start
|
||||||
|
5. Protokoll läuft automatisch durch – Ergebnis erscheint
|
||||||
|
|
||||||
|
### Protokoll-Phasen
|
||||||
|
|
||||||
|
| Phase | Beschreibung |
|
||||||
|
|-------|-------------|
|
||||||
|
| **Commit** | Jeder Spieler generiert 32 Zufallsbytes und sendet den SHA-256-Hash an alle |
|
||||||
|
| **Warten** | Sammle Commits aller Teilnehmer |
|
||||||
|
| **Reveal** | Jeder sendet die rohen Zufallsbytes an alle |
|
||||||
|
| **Verify** | Jeder prüft: SHA-256(received) == stored_commit |
|
||||||
|
| **Result** | XOR aller Secrets → Parity (0=Kopf, 1=Zahl) |
|
||||||
|
|
||||||
|
## Architektur
|
||||||
|
|
||||||
|
```
|
||||||
|
randomp2p/
|
||||||
|
├── index.html – 5 Screens + CDN-Libs
|
||||||
|
├── style.css – Dark-Theme, Coin-Animation
|
||||||
|
├── crypto.js – SHA-256, Zufallsbytes, XOR-Combine
|
||||||
|
├── p2p.js – MeshNet: simple-peer, QR-Signaling, Datenkanal
|
||||||
|
├── protocol.js – Commit-Reveal State Machine
|
||||||
|
└── app.js – UI-Routing, Kamera/QR-Scan, Verkabelung
|
||||||
|
```
|
||||||
|
|
||||||
|
### Abhängigkeiten (CDN)
|
||||||
|
|
||||||
|
| Library | Zweck |
|
||||||
|
|---------|-------|
|
||||||
|
| [simple-peer](https://github.com/feross/simple-peer) | WebRTC-Datenkanäle |
|
||||||
|
| [qrcodejs](https://github.com/davidshimjs/qrcodejs) | QR-Code-Generierung |
|
||||||
|
| [jsQR](https://github.com/cozmo/jsQR) | QR-Code-Scanning per Kamera |
|
||||||
|
|
||||||
|
## Netzwerk-Topologie
|
||||||
|
|
||||||
|
**Best Case (gleiches WiFi):**
|
||||||
|
QR-SDP-Austausch zwischen Host und jedem Peer. Host teilt IP-Liste → potentiell volles Mesh über `signal_relay`.
|
||||||
|
|
||||||
|
**Worst Case (NAT/Internet):**
|
||||||
|
Stern-Topologie über den Host. Protokoll funktioniert trotzdem – die Fairness ist nicht von der Topologie abhängig.
|
||||||
|
|
||||||
|
## Warum ist das fair?
|
||||||
|
|
||||||
|
Das Commit-Reveal-Protokoll garantiert:
|
||||||
|
|
||||||
|
1. **Keine späte Manipulation:** Der SHA-256-Commit bindet jeden Spieler vor dem Reveal an sein Secret (Preimage-Resistenz)
|
||||||
|
2. **Keine Absprache nötig:** Solange **ein** Teilnehmer ehrlich Zufallsbytes beisteuert, ist das XOR-Ergebnis zufällig
|
||||||
|
3. **Volle Transparenz:** Jeder Teilnehmer rechnet lokal alle Prüfungen und das Endergebnis
|
||||||
|
|
||||||
|
Mathematisch: `result = S_1 ⊕ S_2 ⊕ ... ⊕ S_n`. Wenn `S_k` echt zufällig und vor `S_1..S_{k-1}, S_{k+1}..S_n` festgelegt wurde, ist `result` zufällig – unabhängig von allen anderen Secrets.
|
||||||
|
|
||||||
|
## IPFS-Deployment
|
||||||
|
|
||||||
|
```bash
|
||||||
|
ipfs add -r .
|
||||||
|
# → CID notieren, über IPFS-Gateway aufrufbar
|
||||||
|
# → Gateway-URL als QR-Code in die App einbauen
|
||||||
|
```
|
||||||
|
|
||||||
|
## Ausblick / TODOs
|
||||||
|
|
||||||
|
- [ ] Volles Mesh: Peers verbinden sich direkt via relayed signaling
|
||||||
|
- [ ] Timeout + Reconnect bei Verbindungsabbruch
|
||||||
|
- [ ] Raum-Code als Alternative zum QR-Scan
|
||||||
|
- [ ] TURN-Server-Konfiguration für NAT-Traversal
|
||||||
|
- [ ] Mehrere Runden mit Historie
|
||||||
|
- [ ] PWA-Manifest + ServiceWorker für IPFS-Distribution
|
||||||
|
|
||||||
|
## Lizenz
|
||||||
|
|
||||||
|
MIT
|
||||||
286
app.js
Normal file
286
app.js
Normal file
|
|
@ -0,0 +1,286 @@
|
||||||
|
(function() {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
let mesh = null;
|
||||||
|
let protocol = null;
|
||||||
|
let role = null;
|
||||||
|
let scanningHost = false;
|
||||||
|
|
||||||
|
const $ = id => document.getElementById(id);
|
||||||
|
|
||||||
|
/* ─── Screen routing ─── */
|
||||||
|
function show(name) {
|
||||||
|
['start','host','join','game','result'].forEach(s =>
|
||||||
|
$(`screen-${s}`).classList.toggle('active', s === name)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── Player list ─── */
|
||||||
|
function renderPlayers(containerId) {
|
||||||
|
const list = $(containerId);
|
||||||
|
if (!list) return;
|
||||||
|
const all = [mesh.myPeerId, ...mesh.getPeerIds()];
|
||||||
|
const seen = new Set();
|
||||||
|
list.innerHTML = '';
|
||||||
|
all.forEach(id => {
|
||||||
|
if (seen.has(id)) return;
|
||||||
|
seen.add(id);
|
||||||
|
const isMe = id === mesh.myPeerId;
|
||||||
|
const li = document.createElement('li');
|
||||||
|
li.className = 'player-chip' + (isMe ? ' self' : '');
|
||||||
|
li.innerHTML = `<span class="dot online"></span>${isMe ? 'Du' : id.slice(0, 8)}`;
|
||||||
|
list.appendChild(li);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── QR ─── */
|
||||||
|
let qrHost = null;
|
||||||
|
function showQR(containerId, data) {
|
||||||
|
const c = $(containerId);
|
||||||
|
if (!c) return;
|
||||||
|
c.innerHTML = '';
|
||||||
|
qrHost = new QRCode(c, { text: data, width: 200, height: 200, correctLevel: QRCode.CorrectLevel.L });
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── Camera ─── */
|
||||||
|
let camStream = null;
|
||||||
|
let camRaf = null;
|
||||||
|
|
||||||
|
async function camStart(videoId) {
|
||||||
|
await camStop();
|
||||||
|
camStream = await navigator.mediaDevices.getUserMedia({
|
||||||
|
video: { facingMode: 'environment', width: { ideal: 320 }, height: { ideal: 240 } }
|
||||||
|
});
|
||||||
|
const v = $(videoId);
|
||||||
|
v.srcObject = camStream;
|
||||||
|
v.setAttribute('playsinline', '');
|
||||||
|
v.classList.add('active');
|
||||||
|
await v.play();
|
||||||
|
return v;
|
||||||
|
}
|
||||||
|
|
||||||
|
function camStop() {
|
||||||
|
if (camRaf) { cancelAnimationFrame(camRaf); camRaf = null; }
|
||||||
|
if (camStream) { camStream.getTracks().forEach(t => t.stop()); camStream = null; }
|
||||||
|
}
|
||||||
|
|
||||||
|
function camScan(videoId, canvasId, callback) {
|
||||||
|
const v = $(videoId);
|
||||||
|
const c = $(canvasId);
|
||||||
|
const ctx = c.getContext('2d');
|
||||||
|
camRaf = requestAnimationFrame(function tick() {
|
||||||
|
if (!v.videoWidth) { camRaf = requestAnimationFrame(tick); return; }
|
||||||
|
c.width = v.videoWidth; c.height = v.videoHeight;
|
||||||
|
ctx.drawImage(v, 0, 0);
|
||||||
|
const img = ctx.getImageData(0, 0, c.width, c.height);
|
||||||
|
const code = jsQR(img.data, img.width, img.height);
|
||||||
|
if (code && code.data) {
|
||||||
|
try {
|
||||||
|
const p = JSON.parse(code.data);
|
||||||
|
if (p.v === 1) { callback(p, code.data); return; }
|
||||||
|
} catch(e) {}
|
||||||
|
}
|
||||||
|
camRaf = requestAnimationFrame(tick);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── Coin animation ─── */
|
||||||
|
function flipCoin(resultBit, areaId) {
|
||||||
|
const area = $(areaId);
|
||||||
|
if (!area) return;
|
||||||
|
area.hidden = false;
|
||||||
|
const coin = area.querySelector('.coin');
|
||||||
|
coin.classList.remove('flipping','result-kopf','result-zahl');
|
||||||
|
void coin.offsetWidth;
|
||||||
|
coin.classList.add('flipping');
|
||||||
|
setTimeout(() => {
|
||||||
|
coin.classList.remove('flipping');
|
||||||
|
coin.classList.add(resultBit === 0 ? 'result-kopf' : 'result-zahl');
|
||||||
|
}, 1500);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── Protocol phases UI ─── */
|
||||||
|
function updatePhases(state) {
|
||||||
|
const map = { IDLE:'ready', STARTING:'ready', COMMITTING:'commit',
|
||||||
|
WAITING_FOR_COMMITS:'commit', REVEALING:'reveal',
|
||||||
|
WAITING_FOR_REVEALS:'reveal', VERIFYING:'verify', COMPLETE:'done' };
|
||||||
|
const active = map[state] || 'ready';
|
||||||
|
let doneSeen = false;
|
||||||
|
['ready','commit','reveal','verify','done'].forEach(p => {
|
||||||
|
const el = $('phase-'+p);
|
||||||
|
if (!el) return;
|
||||||
|
el.classList.toggle('active', p === active && !doneSeen);
|
||||||
|
el.classList.toggle('done', doneSeen);
|
||||||
|
if (p === active) doneSeen = true;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── Game setup ─── */
|
||||||
|
function setupGame(autostart) {
|
||||||
|
show('game');
|
||||||
|
renderPlayers('game-player-list');
|
||||||
|
$('btn-start-protocol').hidden = autostart || role !== 'host';
|
||||||
|
$('coin-area').hidden = true;
|
||||||
|
$('result-area').hidden = true;
|
||||||
|
$('protocol-text').textContent = autostart ? 'Starte Protokoll...' : 'Bereit zum Münzwurf';
|
||||||
|
updatePhases('IDLE');
|
||||||
|
|
||||||
|
protocol = new CoinFlipProtocol(mesh);
|
||||||
|
|
||||||
|
protocol.onstatechange = updatePhases;
|
||||||
|
protocol.onprogress = (phase, rcvd, total) => {
|
||||||
|
$('protocol-text').textContent =
|
||||||
|
phase === 'commit' ? `Commits: ${rcvd}/${total}` : `Reveals: ${rcvd}/${total}`;
|
||||||
|
};
|
||||||
|
protocol.oncomplete = result => {
|
||||||
|
const text = result === 0 ? 'KOPF' : 'ZAHL';
|
||||||
|
$('protocol-text').textContent = `Ergebnis: ${text}!`;
|
||||||
|
flipCoin(result, 'coin-area');
|
||||||
|
$('result-area').hidden = false;
|
||||||
|
$('result-text').textContent = text;
|
||||||
|
$('btn-start-protocol').hidden = true;
|
||||||
|
};
|
||||||
|
protocol.onerror = err => {
|
||||||
|
$('protocol-text').textContent = 'Fehler: ' + err;
|
||||||
|
};
|
||||||
|
|
||||||
|
mesh.ondata = (peerId, msg) => {
|
||||||
|
if (msg.type === 'protocol_start' && protocol && protocol.state === 'IDLE') {
|
||||||
|
$('btn-start-protocol').hidden = true;
|
||||||
|
protocol.start();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (msg.type === 'protocol' && protocol) {
|
||||||
|
protocol.handleMessage(peerId, msg);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (autostart) {
|
||||||
|
protocol.start();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── Start screen ─── */
|
||||||
|
$('btn-create').addEventListener('click', () => {
|
||||||
|
role = 'host';
|
||||||
|
mesh = new MeshNet();
|
||||||
|
|
||||||
|
mesh.onpeerconnect = pid => {
|
||||||
|
renderPlayers('host-player-list');
|
||||||
|
$('btn-start-game').disabled = mesh.getCount() < 1;
|
||||||
|
};
|
||||||
|
mesh.onpeerdisconnect = () => {
|
||||||
|
renderPlayers('host-player-list');
|
||||||
|
$('btn-start-game').disabled = mesh.getCount() < 1;
|
||||||
|
};
|
||||||
|
mesh.onqrupdate = d => showQR('qr-host', d);
|
||||||
|
|
||||||
|
mesh.createRoom();
|
||||||
|
show('host');
|
||||||
|
renderPlayers('host-player-list');
|
||||||
|
$('btn-start-game').disabled = true;
|
||||||
|
});
|
||||||
|
|
||||||
|
/* ─── Host: scan answer QR ─── */
|
||||||
|
$('btn-scan-answer').addEventListener('click', async () => {
|
||||||
|
if (camStream) { camStop(); return; }
|
||||||
|
try {
|
||||||
|
await camStart('host-camera');
|
||||||
|
$('host-scan-status').textContent = 'Warte auf Antwort-QR...';
|
||||||
|
scanningHost = true;
|
||||||
|
camScan('host-camera', 'host-camera-canvas', (parsed, raw) => {
|
||||||
|
if (!parsed.s || !parsed.id) return;
|
||||||
|
if (parsed.to && parsed.to !== mesh.myPeerId) return;
|
||||||
|
camStop();
|
||||||
|
scanningHost = false;
|
||||||
|
$('host-scan-status').textContent = 'Verbunden!';
|
||||||
|
mesh.feedAnswer(raw);
|
||||||
|
$('btn-scan-answer').textContent = 'Antwort-QR scannen';
|
||||||
|
});
|
||||||
|
$('btn-scan-answer').textContent = 'Scannen beenden';
|
||||||
|
} catch (e) {
|
||||||
|
$('host-scan-status').textContent = 'Kamera-Fehler';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
/* ─── Join screen ─── */
|
||||||
|
$('btn-join').addEventListener('click', async () => {
|
||||||
|
role = 'peer';
|
||||||
|
mesh = new MeshNet();
|
||||||
|
show('join');
|
||||||
|
$('join-answer-section').hidden = true;
|
||||||
|
$('join-scan-status').textContent = 'QR-Code scannen...';
|
||||||
|
|
||||||
|
mesh.onanswerready = answerData => {
|
||||||
|
$('join-answer-section').hidden = false;
|
||||||
|
showQR('qr-answer', answerData);
|
||||||
|
$('join-scan-status').textContent = 'Antwort-QR dem Host zeigen';
|
||||||
|
camStop();
|
||||||
|
};
|
||||||
|
|
||||||
|
mesh.onpeerconnect = () => {
|
||||||
|
renderPlayers('join-player-list');
|
||||||
|
$('join-scan-status').textContent = 'Verbunden – warte auf Start...';
|
||||||
|
};
|
||||||
|
|
||||||
|
mesh.ondata = (peerId, msg) => {
|
||||||
|
if (msg.type === 'protocol_start') {
|
||||||
|
setupGame(true);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
try {
|
||||||
|
await camStart('join-camera');
|
||||||
|
let scanned = false;
|
||||||
|
camScan('join-camera', 'join-camera-canvas', (parsed, raw) => {
|
||||||
|
if (scanned) return;
|
||||||
|
if (!parsed.s || !parsed.id) return;
|
||||||
|
scanned = true;
|
||||||
|
$('join-scan-status').textContent = 'Verbinde...';
|
||||||
|
mesh.joinFromQR(raw);
|
||||||
|
});
|
||||||
|
} catch (e) {
|
||||||
|
$('join-scan-status').textContent = 'Kamera nicht verfügbar';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
/* ─── Host: start game button (in host screen) ─── */
|
||||||
|
$('btn-start-game').addEventListener('click', () => {
|
||||||
|
setupGame(false);
|
||||||
|
});
|
||||||
|
|
||||||
|
/* ─── Host: start protocol button (in game screen) ─── */
|
||||||
|
$('btn-start-protocol').addEventListener('click', async () => {
|
||||||
|
if (!mesh || !protocol) return;
|
||||||
|
mesh.broadcast({ type: 'protocol_start' });
|
||||||
|
$('btn-start-protocol').hidden = true;
|
||||||
|
await protocol.start();
|
||||||
|
});
|
||||||
|
|
||||||
|
/* ─── Retry / again ─── */
|
||||||
|
$('btn-retry').addEventListener('click', () => {
|
||||||
|
if (protocol) protocol.reset();
|
||||||
|
$('coin-area').hidden = true;
|
||||||
|
$('result-area').hidden = true;
|
||||||
|
$('btn-start-protocol').hidden = role !== 'host';
|
||||||
|
$('protocol-text').textContent = 'Bereit zum Münzwurf';
|
||||||
|
updatePhases('IDLE');
|
||||||
|
});
|
||||||
|
|
||||||
|
/* ─── Result screen → play again ─── */
|
||||||
|
$('btn-play-again').addEventListener('click', () => {
|
||||||
|
if (protocol) protocol.reset();
|
||||||
|
$('coin-area').hidden = true;
|
||||||
|
$('result-area').hidden = true;
|
||||||
|
setupGame(false);
|
||||||
|
});
|
||||||
|
|
||||||
|
/* ─── Back to start ─── */
|
||||||
|
$('btn-back-start').addEventListener('click', () => {
|
||||||
|
if (mesh) { mesh.destroy(); mesh = null; }
|
||||||
|
protocol = null;
|
||||||
|
camStop();
|
||||||
|
show('start');
|
||||||
|
});
|
||||||
|
|
||||||
|
})();
|
||||||
61
crypto.js
Normal file
61
crypto.js
Normal file
|
|
@ -0,0 +1,61 @@
|
||||||
|
function generatePeerId() {
|
||||||
|
const bytes = new Uint8Array(8);
|
||||||
|
crypto.getRandomValues(bytes);
|
||||||
|
return Array.from(bytes).map(b => b.toString(16).padStart(2, '0')).join('');
|
||||||
|
}
|
||||||
|
|
||||||
|
async function generateSecret() {
|
||||||
|
const secret = new Uint8Array(32);
|
||||||
|
crypto.getRandomValues(secret);
|
||||||
|
return secret;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function commit(secret) {
|
||||||
|
const hash = await crypto.subtle.digest('SHA-256', secret);
|
||||||
|
return new Uint8Array(hash);
|
||||||
|
}
|
||||||
|
|
||||||
|
function arraysEqual(a, b) {
|
||||||
|
if (a.length !== b.length) return false;
|
||||||
|
let diff = 0;
|
||||||
|
for (let i = 0; i < a.length; i++) {
|
||||||
|
diff |= a[i] ^ b[i];
|
||||||
|
}
|
||||||
|
return diff === 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
function combine(secrets) {
|
||||||
|
const result = new Uint8Array(32);
|
||||||
|
for (const secret of secrets) {
|
||||||
|
for (let i = 0; i < 32; i++) {
|
||||||
|
result[i] ^= secret[i];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return result[0] & 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
function bufToBase64(buf) {
|
||||||
|
const bytes = new Uint8Array(buf);
|
||||||
|
let binary = '';
|
||||||
|
for (let i = 0; i < bytes.length; i++) {
|
||||||
|
binary += String.fromCharCode(bytes[i]);
|
||||||
|
}
|
||||||
|
return btoa(binary);
|
||||||
|
}
|
||||||
|
|
||||||
|
function base64ToBuf(base64) {
|
||||||
|
const binary = atob(base64);
|
||||||
|
const bytes = new Uint8Array(binary.length);
|
||||||
|
for (let i = 0; i < binary.length; i++) {
|
||||||
|
bytes[i] = binary.charCodeAt(i);
|
||||||
|
}
|
||||||
|
return bytes;
|
||||||
|
}
|
||||||
|
|
||||||
|
function hexToBuf(hex) {
|
||||||
|
const bytes = new Uint8Array(hex.length / 2);
|
||||||
|
for (let i = 0; i < hex.length; i += 2) {
|
||||||
|
bytes[i / 2] = parseInt(hex.substring(i, i + 2), 16);
|
||||||
|
}
|
||||||
|
return bytes;
|
||||||
|
}
|
||||||
118
index.html
Normal file
118
index.html
Normal file
|
|
@ -0,0 +1,118 @@
|
||||||
|
<!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 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>
|
||||||
|
</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>
|
||||||
|
<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>
|
||||||
217
p2p.js
Normal file
217
p2p.js
Normal file
|
|
@ -0,0 +1,217 @@
|
||||||
|
class MeshNet {
|
||||||
|
constructor() {
|
||||||
|
this.myPeerId = generatePeerId();
|
||||||
|
this.connections = new Map();
|
||||||
|
this.isHost = false;
|
||||||
|
this._pendingPeer = null;
|
||||||
|
this._currentQRData = null;
|
||||||
|
|
||||||
|
this.onpeerconnect = null;
|
||||||
|
this.onpeerdisconnect = null;
|
||||||
|
this.ondata = null;
|
||||||
|
this.onqrupdate = null;
|
||||||
|
this.onanswerready = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
createRoom() {
|
||||||
|
this.isHost = true;
|
||||||
|
this._createPendingPeer();
|
||||||
|
}
|
||||||
|
|
||||||
|
_createPendingPeer() {
|
||||||
|
if (this._pendingPeer) {
|
||||||
|
try { this._pendingPeer.peer.destroy(); } catch (e) {}
|
||||||
|
}
|
||||||
|
|
||||||
|
const peer = new SimplePeer({ initiator: true, trickle: false });
|
||||||
|
let signalSent = false;
|
||||||
|
let connected = false;
|
||||||
|
|
||||||
|
peer.on('signal', signal => {
|
||||||
|
if (signalSent) return;
|
||||||
|
signalSent = true;
|
||||||
|
this._currentQRData = JSON.stringify({ v: 1, id: this.myPeerId, s: signal });
|
||||||
|
if (this.onqrupdate) this.onqrupdate(this._currentQRData);
|
||||||
|
});
|
||||||
|
|
||||||
|
peer.on('connect', () => {
|
||||||
|
connected = true;
|
||||||
|
peer.send(JSON.stringify({ type: 'identity', peerId: this.myPeerId }));
|
||||||
|
});
|
||||||
|
|
||||||
|
peer.on('data', data => {
|
||||||
|
try {
|
||||||
|
const msg = JSON.parse(data.toString());
|
||||||
|
this._handleMessage(msg, peer);
|
||||||
|
} catch (e) {
|
||||||
|
console.error('p2p data parse error:', e);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
peer.on('close', () => {
|
||||||
|
this._cleanupPeer(peer);
|
||||||
|
});
|
||||||
|
|
||||||
|
peer.on('error', err => {
|
||||||
|
console.error('p2p error:', err);
|
||||||
|
});
|
||||||
|
|
||||||
|
this._pendingPeer = { peer, signalSent, connected, peerId: null };
|
||||||
|
}
|
||||||
|
|
||||||
|
feedAnswer(answerStr) {
|
||||||
|
if (!this._pendingPeer || this._pendingPeer.signalReceived) return;
|
||||||
|
try {
|
||||||
|
const data = JSON.parse(answerStr);
|
||||||
|
this._pendingPeer.peerId = data.id;
|
||||||
|
this._pendingPeer.peer.signal(data.s);
|
||||||
|
this._pendingPeer.signalReceived = true;
|
||||||
|
} catch (e) {
|
||||||
|
console.error('feedAnswer error:', e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
joinFromQR(qrContent) {
|
||||||
|
const data = JSON.parse(qrContent);
|
||||||
|
const remoteId = data.id;
|
||||||
|
const offer = data.s;
|
||||||
|
|
||||||
|
const peer = new SimplePeer({ initiator: false, trickle: false });
|
||||||
|
let answerSent = false;
|
||||||
|
let connected = false;
|
||||||
|
|
||||||
|
peer.on('signal', signal => {
|
||||||
|
if (answerSent) return;
|
||||||
|
answerSent = true;
|
||||||
|
const answerData = JSON.stringify({
|
||||||
|
v: 1, id: this.myPeerId, s: signal, to: remoteId
|
||||||
|
});
|
||||||
|
if (this.onanswerready) this.onanswerready(answerData);
|
||||||
|
});
|
||||||
|
|
||||||
|
peer.on('connect', () => {
|
||||||
|
connected = true;
|
||||||
|
this.connections.set(remoteId, peer);
|
||||||
|
peer.send(JSON.stringify({ type: 'identity', peerId: this.myPeerId }));
|
||||||
|
if (this.onpeerconnect) this.onpeerconnect(remoteId);
|
||||||
|
});
|
||||||
|
|
||||||
|
peer.on('data', data => {
|
||||||
|
try {
|
||||||
|
const msg = JSON.parse(data.toString());
|
||||||
|
this._handleMessage(msg, peer);
|
||||||
|
} catch (e) {
|
||||||
|
console.error('p2p data parse error:', e);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
peer.on('close', () => {
|
||||||
|
this._cleanupPeer(peer);
|
||||||
|
});
|
||||||
|
|
||||||
|
peer.on('error', err => {
|
||||||
|
console.error('p2p error:', err);
|
||||||
|
});
|
||||||
|
|
||||||
|
peer.signal(offer);
|
||||||
|
this.connections.set(remoteId, peer);
|
||||||
|
this._pendingPeer = { peer, peerId: remoteId, connected };
|
||||||
|
}
|
||||||
|
|
||||||
|
_handleMessage(msg, peer) {
|
||||||
|
if (msg.type === 'identity') {
|
||||||
|
const existing = this._findPeerId(peer);
|
||||||
|
if (existing && existing !== msg.peerId) {
|
||||||
|
this.connections.delete(existing);
|
||||||
|
}
|
||||||
|
this.connections.set(msg.peerId, peer);
|
||||||
|
|
||||||
|
if (this._pendingPeer && this._pendingPeer.peer === peer) {
|
||||||
|
this._pendingPeer.peerId = msg.peerId;
|
||||||
|
this._pendingPeer.connected = true;
|
||||||
|
if (this.onpeerconnect) this.onpeerconnect(msg.peerId);
|
||||||
|
if (this.isHost) {
|
||||||
|
setTimeout(() => this._createPendingPeer(), 300);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (this.onpeerconnect) this.onpeerconnect(msg.peerId);
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (msg.type === 'signal_relay') {
|
||||||
|
const target = this.connections.get(msg.to);
|
||||||
|
if (target) {
|
||||||
|
target.send(JSON.stringify({
|
||||||
|
type: 'signal_relayed',
|
||||||
|
from: msg.from,
|
||||||
|
signal: msg.signal
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.ondata) {
|
||||||
|
const peerId = this._findPeerId(peer) || 'unknown';
|
||||||
|
this.ondata(peerId, msg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
_findPeerId(peer) {
|
||||||
|
for (const [id, p] of this.connections) {
|
||||||
|
if (p === peer) return id;
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
_cleanupPeer(peer) {
|
||||||
|
const peerId = this._findPeerId(peer);
|
||||||
|
if (peerId) {
|
||||||
|
this.connections.delete(peerId);
|
||||||
|
if (this.onpeerdisconnect) this.onpeerdisconnect(peerId);
|
||||||
|
}
|
||||||
|
if (this._pendingPeer && this._pendingPeer.peer === peer) {
|
||||||
|
this._pendingPeer = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
broadcast(msg) {
|
||||||
|
const str = JSON.stringify(msg);
|
||||||
|
for (const [id, peer] of this.connections) {
|
||||||
|
try { peer.send(str); } catch (e) { console.error('broadcast to', id, 'failed:', e); }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
sendTo(peerId, msg) {
|
||||||
|
const peer = this.connections.get(peerId);
|
||||||
|
if (peer) {
|
||||||
|
try { peer.send(JSON.stringify(msg)); } catch (e) { console.error('sendTo', peerId, 'failed:', e); }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
relaySignal(from, to, signal) {
|
||||||
|
const target = this.connections.get(to);
|
||||||
|
if (target) {
|
||||||
|
target.send(JSON.stringify({ type: 'signal_relay', from, to, signal }));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
getPeerIds() {
|
||||||
|
return Array.from(this.connections.keys());
|
||||||
|
}
|
||||||
|
|
||||||
|
getCount() {
|
||||||
|
return this.connections.size;
|
||||||
|
}
|
||||||
|
|
||||||
|
destroy() {
|
||||||
|
for (const peer of this.connections.values()) {
|
||||||
|
try { peer.destroy(); } catch (e) {}
|
||||||
|
}
|
||||||
|
this.connections.clear();
|
||||||
|
if (this._pendingPeer) {
|
||||||
|
try { this._pendingPeer.peer.destroy(); } catch (e) {}
|
||||||
|
this._pendingPeer = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
109
protocol.js
Normal file
109
protocol.js
Normal file
|
|
@ -0,0 +1,109 @@
|
||||||
|
class CoinFlipProtocol {
|
||||||
|
constructor(mesh) {
|
||||||
|
this.mesh = mesh;
|
||||||
|
this.state = 'IDLE';
|
||||||
|
this.secret = null;
|
||||||
|
this.commits = new Map();
|
||||||
|
this.reveals = new Map();
|
||||||
|
this.result = null;
|
||||||
|
this.totalPeers = 0;
|
||||||
|
|
||||||
|
this.onstatechange = null;
|
||||||
|
this.onprogress = null;
|
||||||
|
this.oncomplete = null;
|
||||||
|
this.onerror = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
async start() {
|
||||||
|
if (this.state !== 'IDLE') return;
|
||||||
|
this.state = 'STARTING';
|
||||||
|
this.totalPeers = this.mesh.getCount() + 1;
|
||||||
|
this.secret = await generateSecret();
|
||||||
|
const myCommit = await commit(this.secret);
|
||||||
|
this.commits.set(this.mesh.myPeerId, myCommit);
|
||||||
|
if (this.onprogress) this.onprogress('commit', 1, this.totalPeers);
|
||||||
|
if (this.onstatechange) this.onstatechange('COMMITTING');
|
||||||
|
this.mesh.broadcast({ type: 'protocol', phase: 'commit', data: bufToBase64(myCommit) });
|
||||||
|
this.state = 'WAITING_FOR_COMMITS';
|
||||||
|
if (this.onstatechange) this.onstatechange('WAITING_FOR_COMMITS');
|
||||||
|
this._checkCommits();
|
||||||
|
}
|
||||||
|
|
||||||
|
handleMessage(peerId, msg) {
|
||||||
|
if (msg.type !== 'protocol') return;
|
||||||
|
|
||||||
|
if (msg.phase === 'commit' && (this.state === 'WAITING_FOR_COMMITS' || this.state === 'COMMITTING' || this.state === 'STARTING')) {
|
||||||
|
if (!this.commits.has(peerId)) {
|
||||||
|
this.commits.set(peerId, base64ToBuf(msg.data));
|
||||||
|
if (this.onprogress) this.onprogress('commit', this.commits.size, this.totalPeers);
|
||||||
|
this._checkCommits();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (msg.phase === 'reveal' && (this.state === 'WAITING_FOR_REVEALS' || this.state === 'REVEALING')) {
|
||||||
|
if (!this.reveals.has(peerId)) {
|
||||||
|
this.reveals.set(peerId, base64ToBuf(msg.data));
|
||||||
|
if (this.onprogress) this.onprogress('reveal', this.reveals.size, this.totalPeers);
|
||||||
|
this._checkReveals();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
_checkCommits() {
|
||||||
|
if (this.state !== 'WAITING_FOR_COMMITS') return;
|
||||||
|
if (this.commits.size >= this.totalPeers) {
|
||||||
|
this._allCommitsReceived();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async _allCommitsReceived() {
|
||||||
|
this.state = 'REVEALING';
|
||||||
|
if (this.onstatechange) this.onstatechange('REVEALING');
|
||||||
|
this.mesh.broadcast({ type: 'protocol', phase: 'reveal', data: bufToBase64(this.secret) });
|
||||||
|
this.reveals.set(this.mesh.myPeerId, this.secret);
|
||||||
|
if (this.onprogress) this.onprogress('reveal', 1, this.totalPeers);
|
||||||
|
this.state = 'WAITING_FOR_REVEALS';
|
||||||
|
if (this.onstatechange) this.onstatechange('WAITING_FOR_REVEALS');
|
||||||
|
this._checkReveals();
|
||||||
|
}
|
||||||
|
|
||||||
|
_checkReveals() {
|
||||||
|
if (this.state !== 'WAITING_FOR_REVEALS') return;
|
||||||
|
if (this.reveals.size >= this.totalPeers) {
|
||||||
|
this._allRevealsReceived();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async _allRevealsReceived() {
|
||||||
|
this.state = 'VERIFYING';
|
||||||
|
if (this.onstatechange) this.onstatechange('VERIFYING');
|
||||||
|
|
||||||
|
for (const [peerId, secret] of this.reveals) {
|
||||||
|
if (peerId === this.mesh.myPeerId) continue;
|
||||||
|
const commitment = this.commits.get(peerId);
|
||||||
|
if (!commitment) {
|
||||||
|
if (this.onerror) this.onerror(`Fehler: Kein Commit von ${peerId}`);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const expected = await commit(secret);
|
||||||
|
if (!arraysEqual(expected, commitment)) {
|
||||||
|
if (this.onerror) this.onerror(`Betrug erkannt! ${peerId} hat gefälscht.`);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.state = 'COMPLETE';
|
||||||
|
this.result = combine(Array.from(this.reveals.values()));
|
||||||
|
if (this.onstatechange) this.onstatechange('COMPLETE');
|
||||||
|
if (this.oncomplete) this.oncomplete(this.result);
|
||||||
|
}
|
||||||
|
|
||||||
|
reset() {
|
||||||
|
this.state = 'IDLE';
|
||||||
|
this.secret = null;
|
||||||
|
this.commits.clear();
|
||||||
|
this.reveals.clear();
|
||||||
|
this.result = null;
|
||||||
|
this.totalPeers = 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
330
style.css
Normal file
330
style.css
Normal file
|
|
@ -0,0 +1,330 @@
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--bg: #0d1117;
|
||||||
|
--bg-card: #161b22;
|
||||||
|
--bg-hover: #1c2333;
|
||||||
|
--text: #c9d1d9;
|
||||||
|
--text-dim: #8b949e;
|
||||||
|
--accent: #238636;
|
||||||
|
--accent-hover: #2ea043;
|
||||||
|
--border: #30363d;
|
||||||
|
--gold: #f0c040;
|
||||||
|
--silver: #c0c0c0;
|
||||||
|
--radius: 12px;
|
||||||
|
--shadow: 0 4px 24px rgba(0,0,0,0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
html, body {
|
||||||
|
height: 100%;
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||||
|
background: var(--bg);
|
||||||
|
color: var(--text);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Screens */
|
||||||
|
.screen {
|
||||||
|
display: none;
|
||||||
|
height: 100%;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
.screen.active {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.screen-inner {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 420px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 2rem;
|
||||||
|
font-weight: 800;
|
||||||
|
background: linear-gradient(135deg, var(--gold), #e0a030);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
h2 {
|
||||||
|
font-size: 1.4rem;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
h3 {
|
||||||
|
font-size: 1rem;
|
||||||
|
color: var(--text-dim);
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
.subtitle {
|
||||||
|
color: var(--text-dim);
|
||||||
|
margin-bottom: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Buttons */
|
||||||
|
.btn-group {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
.btn-primary, .btn-secondary {
|
||||||
|
padding: 14px 24px;
|
||||||
|
border: none;
|
||||||
|
border-radius: var(--radius);
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background 0.2s, opacity 0.2s;
|
||||||
|
}
|
||||||
|
.btn-primary {
|
||||||
|
background: var(--accent);
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.btn-primary:hover:not(:disabled) {
|
||||||
|
background: var(--accent-hover);
|
||||||
|
}
|
||||||
|
.btn-primary:disabled {
|
||||||
|
opacity: 0.4;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
.btn-secondary {
|
||||||
|
background: var(--bg-card);
|
||||||
|
color: var(--text);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
.btn-secondary:hover {
|
||||||
|
background: var(--bg-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* QR section */
|
||||||
|
.qr-section {
|
||||||
|
background: #fff;
|
||||||
|
border-radius: var(--radius);
|
||||||
|
padding: 16px;
|
||||||
|
display: inline-block;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
.qr-section canvas, .qr-section img {
|
||||||
|
display: block;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
.hint {
|
||||||
|
color: var(--text-dim);
|
||||||
|
font-size: 0.85rem;
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Player list */
|
||||||
|
.player-section {
|
||||||
|
margin: 16px 0;
|
||||||
|
}
|
||||||
|
.player-list {
|
||||||
|
list-style: none;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 8px;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.player-chip {
|
||||||
|
background: var(--bg-card);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 20px;
|
||||||
|
padding: 6px 16px;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
.player-chip .dot {
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
.player-chip .dot.online {
|
||||||
|
background: var(--accent);
|
||||||
|
}
|
||||||
|
.player-chip .dot.waiting {
|
||||||
|
background: #f0c040;
|
||||||
|
}
|
||||||
|
.player-chip.self {
|
||||||
|
border-color: var(--accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Camera section */
|
||||||
|
.camera-section {
|
||||||
|
position: relative;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
.camera-section video {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 320px;
|
||||||
|
border-radius: var(--radius);
|
||||||
|
border: 2px solid var(--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Protocol status */
|
||||||
|
.protocol-status {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 4px;
|
||||||
|
margin: 20px 0;
|
||||||
|
}
|
||||||
|
.phase {
|
||||||
|
padding: 6px 12px;
|
||||||
|
border-radius: 20px;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
background: var(--bg-card);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
color: var(--text-dim);
|
||||||
|
transition: all 0.3s;
|
||||||
|
}
|
||||||
|
.phase.active {
|
||||||
|
background: var(--accent);
|
||||||
|
border-color: var(--accent);
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.phase.done {
|
||||||
|
background: #1a4a1a;
|
||||||
|
border-color: var(--accent);
|
||||||
|
color: var(--accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.protocol-text {
|
||||||
|
margin: 12px 0;
|
||||||
|
color: var(--text-dim);
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Coin flip animation */
|
||||||
|
.coin {
|
||||||
|
width: 120px;
|
||||||
|
height: 120px;
|
||||||
|
margin: 24px auto;
|
||||||
|
perspective: 600px;
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
.coin.large {
|
||||||
|
width: 160px;
|
||||||
|
height: 160px;
|
||||||
|
}
|
||||||
|
.coin-inner {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: relative;
|
||||||
|
transform-style: preserve-3d;
|
||||||
|
transition: transform 1.5s cubic-bezier(0.22, 1, 0.36, 1);
|
||||||
|
}
|
||||||
|
.coin-face {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 50%;
|
||||||
|
backface-visibility: hidden;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 2.5rem;
|
||||||
|
font-weight: 900;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
.coin.large .coin-face {
|
||||||
|
font-size: 3.5rem;
|
||||||
|
}
|
||||||
|
.coin-face.front {
|
||||||
|
background: radial-gradient(circle at 40% 35%, #ffe066, #f0c040 50%, #c89020);
|
||||||
|
border: 4px solid #b8860b;
|
||||||
|
transform: rotateY(0deg);
|
||||||
|
}
|
||||||
|
.coin-face.back {
|
||||||
|
background: radial-gradient(circle at 40% 35%, #e8e8e8, #c0c0c0 50%, #909090);
|
||||||
|
border: 4px solid #707070;
|
||||||
|
transform: rotateY(180deg);
|
||||||
|
}
|
||||||
|
.coin.flipping .coin-inner {
|
||||||
|
animation: coinFlip 1.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
|
||||||
|
}
|
||||||
|
@keyframes coinFlip {
|
||||||
|
0% { transform: rotateY(0deg); }
|
||||||
|
60% { transform: rotateY(720deg); }
|
||||||
|
80% { transform: rotateY(800deg); }
|
||||||
|
100% { transform: rotateY(720deg); }
|
||||||
|
}
|
||||||
|
.coin.result-kopf .coin-inner {
|
||||||
|
transform: rotateY(0deg);
|
||||||
|
}
|
||||||
|
.coin.result-zahl .coin-inner {
|
||||||
|
transform: rotateY(180deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Result area */
|
||||||
|
#result-area {
|
||||||
|
margin-top: 24px;
|
||||||
|
}
|
||||||
|
#result-text {
|
||||||
|
font-size: 2rem;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
#result-title {
|
||||||
|
font-size: 3rem;
|
||||||
|
margin: 24px 0 8px;
|
||||||
|
}
|
||||||
|
#result-detail {
|
||||||
|
color: var(--text-dim);
|
||||||
|
margin-bottom: 24px;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Host camera (scan answer) */
|
||||||
|
#host-scan-answer {
|
||||||
|
margin: 12px 0;
|
||||||
|
}
|
||||||
|
#host-camera {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 240px;
|
||||||
|
border-radius: var(--radius);
|
||||||
|
display: none;
|
||||||
|
margin: 8px auto;
|
||||||
|
}
|
||||||
|
#host-camera.active {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
#host-scan-status {
|
||||||
|
color: var(--text-dim);
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Join answer QR */
|
||||||
|
#join-answer-section {
|
||||||
|
margin: 16px 0;
|
||||||
|
}
|
||||||
|
#join-answer-section .qr-section {
|
||||||
|
background: #fff;
|
||||||
|
border-radius: var(--radius);
|
||||||
|
padding: 16px;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive */
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
.screen {
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
h1 { font-size: 1.6rem; }
|
||||||
|
.phase {
|
||||||
|
font-size: 0.65rem;
|
||||||
|
padding: 4px 8px;
|
||||||
|
}
|
||||||
|
.coin { width: 100px; height: 100px; }
|
||||||
|
.coin.large { width: 140px; height: 140px; }
|
||||||
|
.coin-face { font-size: 2rem; }
|
||||||
|
.coin.large .coin-face { font-size: 3rem; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Utility */
|
||||||
|
.hidden { display: none !important; }
|
||||||
Loading…
Reference in a new issue