From 14aa83ff6e1358bd927b945971811cd57520d48d Mon Sep 17 00:00:00 2001
From: Ole <Ole Jancke>
Date: Sun, 14 Jun 2026 17:11:17 +0200
Subject: [PATCH] Debug-Chat per Data-Channel (nur ?debug)

---
 app.js     | 26 ++++++++++++++++++++++++++
 index.html |  7 +++++++
 p2p.js     |  6 ++++++
 style.css  | 34 ++++++++++++++++++++++++++++++++++
 4 files changed, 73 insertions(+)

diff --git a/app.js b/app.js
index 0d71de8..f0b5542 100644
--- a/app.js
+++ b/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();
+  });
+
 })();
diff --git a/index.html b/index.html
index 32c3acb..13de288 100644
--- a/index.html
+++ b/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>
diff --git a/p2p.js b/p2p.js
index 43c21c2..462c308 100644
--- a/p2p.js
+++ b/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);
     }
diff --git a/style.css b/style.css
index 282929d..096c288 100644
--- a/style.css
+++ b/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; }