Debug-Chat per Data-Channel (nur ?debug)

app.js

@@ -250,6 +250,7 @@
     mesh = new MeshNet();
     mesh.playerName = name;
     mesh.names.set(mesh.myPeerId, name || mesh.myPeerId.slice(0, 8));
+    mesh.onchat = (peerId, text) => addChatMessage(mesh.getPeerName(peerId), text);
 
     mesh.onpeerconnect = pid => {
       renderPlayers('host-player-list');
@@ -316,6 +317,7 @@
     mesh = new MeshNet();
     mesh.playerName = name;
     mesh.names.set(mesh.myPeerId, name || mesh.myPeerId.slice(0, 8));
+    mesh.onchat = (peerId, text) => addChatMessage(mesh.getPeerName(peerId), text);
     show('join');
     $('join-answer-section').hidden = true;
     $('join-scan-status').textContent = 'QR-Code scannen...';
@@ -406,4 +408,28 @@
     show('start');
   });
 
+  /* ─── Debug chat ─── */
+  const chatInput = $('debug-chat-text');
+  const chatMessages = $('debug-chat-messages');
+
+  function addChatMessage(from, text) {
+    if (!chatMessages) return;
+    const div = document.createElement('div');
+    div.textContent = `${from}: ${text}`;
+    chatMessages.appendChild(div);
+    chatMessages.scrollTop = chatMessages.scrollHeight;
+  }
+
+  $('debug-chat-send').addEventListener('click', () => {
+    const text = chatInput.value.trim();
+    if (!text || !mesh) return;
+    mesh.broadcast({ type: 'chat', text });
+    addChatMessage('Du', text);
+    chatInput.value = '';
+  });
+
+  chatInput.addEventListener('keydown', e => {
+    if (e.key === 'Enter') $('debug-chat-send').click();
+  });
+
 })();

index.html

@@ -121,6 +121,13 @@
     </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>
   <footer>
     <p>&copy; by neunzig.wtf &middot; commit <a id="commit-hash" href="https://git.ziemlichoptimal.de/90wtf/randomp2p/src/commit/HASH">HASH</a></p>
   </footer>

p2p.js

@@ -21,6 +21,7 @@ class MeshNet {
     this.onqrupdate = null;
     this.onanswerready = null;
     this.onreadyupdate = null;
+    this.onchat = null;
   }
 
   /* ─── Host: room ─── */
@@ -282,6 +283,11 @@ class MeshNet {
       return;
     }
 
+    if (msg.type === 'chat') {
+      if (this.onchat) this.onchat(peerId, msg.text);
+      return;
+    }
+
     if (this.ondata) {
       this.ondata(peerId, msg);
     }

style.css

@@ -442,5 +442,39 @@ footer {
   border-top: 1px solid var(--border);
 }
 
+/* Debug chat */
+#debug-chat {
+  position: fixed; bottom: 0; right: 8px;
+  width: 280px; max-height: 220px;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius) var(--radius) 0 0;
+  flex-direction: column;
+  font-size: 0.8rem;
+  z-index: 100;
+  display: none;
+}
+.debug-mode #debug-chat { display: flex; }
+#debug-chat-messages {
+  flex: 1; overflow-y: auto; padding: 8px;
+  max-height: 160px;
+  display: flex; flex-direction: column; gap: 4px;
+}
+#debug-chat-input {
+  display: flex;
+  border-top: 1px solid var(--border);
+}
+#debug-chat-input input {
+  flex: 1; padding: 6px 8px; border: none;
+  background: transparent; color: var(--text); outline: none;
+}
+#debug-chat-input button {
+  padding: 6px 12px; border: none;
+  background: var(--accent); color: #fff; cursor: pointer;
+}
+#debug-chat-input button:hover {
+  background: var(--accent-hover);
+}
+
 /* Utility */
 .hidden { display: none !important; }