diff --git a/app.js b/app.js index c457b5b..43fc7e4 100644 --- a/app.js +++ b/app.js @@ -8,6 +8,10 @@ const $ = id => document.getElementById(id); + if (location.search.includes('debug')) { + document.body.classList.add('debug-mode'); + } + /* ─── Screen routing ─── */ function show(name) { ['start','host','join','game','result'].forEach(s => @@ -179,7 +183,15 @@ mesh.onpeerdisconnect = () => { renderPlayers('host-player-list'); }; - mesh.onqrupdate = d => showQR('qr-host', d); + mesh.onqrupdate = d => { + showQR('qr-host', d); + const raw = $('host-qr-raw'); + if (raw) raw.textContent = d; + const codeEl = $('host-room-code'); + if (codeEl && mesh.roomCode) codeEl.textContent = mesh.roomCode; + const fullSDP = mesh.getFullSDPData ? mesh.getFullSDPData() : null; + if (fullSDP) showQR('qr-host-full', fullSDP); + }; mesh.onreadyupdate = (ready, total) => { $('btn-start-game').disabled = ready < total || total === 0; }; @@ -212,6 +224,19 @@ } }); + $('btn-host-answer-paste').addEventListener('click', () => { + const raw = $('host-answer-paste').value.trim(); + if (!raw) return; + if (!mesh) return; + try { JSON.parse(raw); } catch (e) { + $('host-scan-status').textContent = 'Ungültiges JSON'; + return; + } + mesh.feedAnswer(raw); + $('host-answer-paste').value = ''; + $('host-scan-status').textContent = 'Verbunden!'; + }); + /* ─── Join screen ─── */ $('btn-join').addEventListener('click', async () => { role = 'peer'; @@ -243,16 +268,41 @@ let scanned = false; camScan('join-camera', 'join-camera-canvas', (parsed, raw) => { if (scanned) return; - if (!parsed.s || !parsed.id) return; + if (!parsed.id) return; scanned = true; $('join-scan-status').textContent = 'Verbinde...'; - mesh.joinFromQR(raw); + if (parsed.room) { + $('join-room-input').value = parsed.room; + mesh.joinFromRoomCode(parsed.room); + } else if (parsed.s) { + mesh.joinFromQR(raw); + } }); } catch (e) { $('join-scan-status').textContent = 'Kamera nicht verfügbar'; } }); + $('btn-join-qr-paste').addEventListener('click', () => { + const raw = $('join-qr-paste').value.trim(); + if (!raw) return; + if (!mesh) { show('start'); return; } + try { JSON.parse(raw); } catch (e) { return; } + mesh.joinFromQR(raw); + $('join-qr-paste').value = ''; + $('join-scan-status').textContent = 'Verbinde...'; + }); + + $('btn-join-room').addEventListener('click', () => { + const code = $('join-room-input').value.trim().toUpperCase(); + if (!code) return; + if (!mesh) { show('start'); return; } + camStop(); + $('join-scan-status').textContent = 'Verbinde...'; + $('join-camera').classList.remove('active'); + mesh.joinFromRoomCode(code); + }); + /* ─── Host: start game button (in host screen) ─── */ $('btn-start-game').addEventListener('click', () => { setupGame(false); diff --git a/index.html b/index.html index fd74221..f851d63 100644 --- a/index.html +++ b/index.html @@ -28,6 +28,11 @@

Scannen lassen, um beizutreten

+
+ Raum-Code + +

Auf gleichem Rechner: Code in anderem Tab eingeben

+

Spieler

@@ -37,6 +42,19 @@

+
+ QR-Rohdaten +

+        
+
+ Antwort manuell einfügen + + +
+
+ Full-SDP-QR (für andere Geräte) +
+
@@ -50,6 +68,15 @@

QR-Code scannen...

+
+ + +
+
+ QR manuell einfügen + + +