From c29df1ca80e00035132e43f38899536adea83d53 Mon Sep 17 00:00:00 2001
From: Ole <Ole Jancke>
Date: Sun, 14 Jun 2026 16:55:37 +0200
Subject: [PATCH] Eigenen Namen eingeben vor Raum-Erstellen/Beitreten

---
 app.js     | 13 ++++++++++---
 index.html |  3 +++
 p2p.js     | 17 +++++++++++++----
 style.css  | 20 ++++++++++++++++++++
 4 files changed, 46 insertions(+), 7 deletions(-)

diff --git a/app.js b/app.js
index 025369d..c26093c 100644
--- a/app.js
+++ b/app.js
@@ -53,7 +53,8 @@
       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)}`;
+      const displayName = isMe ? 'Du' : mesh.getPeerName(id);
+      li.innerHTML = `<span class="dot online"></span>${displayName}`;
       list.appendChild(li);
     });
   }
@@ -147,7 +148,7 @@
       if (r === undefined) return;
 
       const isMe = id === mesh.myPeerId;
-      const name = isMe ? 'Du' : id.slice(0, 8);
+      const displayName = isMe ? 'Du' : mesh.getPeerName(id);
 
       const item = document.createElement('div');
       item.className = 'result-item';
@@ -159,7 +160,7 @@
             <div class="coin-face back">Z</div>
           </div>
         </div>
-        <div class="result-label">${name}</div>
+        <div class="result-label">${displayName}</div>
       `;
       container.appendChild(item);
     });
@@ -244,7 +245,10 @@
   /* ─── Start screen ─── */
   $('btn-create').addEventListener('click', () => {
     role = 'host';
+    const name = $('player-name').value.trim();
     mesh = new MeshNet();
+    mesh.playerName = name;
+    mesh.names.set(mesh.myPeerId, name || mesh.myPeerId.slice(0, 8));
 
     mesh.onpeerconnect = pid => {
       renderPlayers('host-player-list');
@@ -305,7 +309,10 @@
   /* ─── Join screen ─── */
   $('btn-join').addEventListener('click', async () => {
     role = 'peer';
+    const name = $('player-name').value.trim();
     mesh = new MeshNet();
+    mesh.playerName = name;
+    mesh.names.set(mesh.myPeerId, name || mesh.myPeerId.slice(0, 8));
     show('join');
     $('join-answer-section').hidden = true;
     $('join-scan-status').textContent = 'QR-Code scannen...';
diff --git a/index.html b/index.html
index 126b2c5..e85a87a 100644
--- a/index.html
+++ b/index.html
@@ -13,6 +13,9 @@
     <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>
diff --git a/p2p.js b/p2p.js
index e48c482..3fd04db 100644
--- a/p2p.js
+++ b/p2p.js
@@ -11,6 +11,9 @@ class MeshNet {
     this.roster = [];
     this.readyPeers = new Set();
     this._meshReadySent = false;
+    this.playerName = '';
+    this.names = new Map();
+    this.names.set(this.myPeerId, '');
 
     this.onpeerconnect = null;
     this.onpeerdisconnect = null;
@@ -46,7 +49,7 @@ class MeshNet {
     });
 
     peer.on('connect', () => {
-      peer.send(JSON.stringify({ type: 'identity', peerId: this.myPeerId }));
+      peer.send(JSON.stringify({ type: 'identity', peerId: this.myPeerId, name: this.playerName }));
     });
 
     peer.on('data', data => {
@@ -98,7 +101,7 @@ class MeshNet {
 
     peer.on('connect', () => {
       this.connections.set(remoteId, peer);
-      peer.send(JSON.stringify({ type: 'identity', peerId: this.myPeerId }));
+      peer.send(JSON.stringify({ type: 'identity', peerId: this.myPeerId, name: this.playerName }));
       if (this.onpeerconnect) this.onpeerconnect(remoteId);
     });
 
@@ -214,7 +217,7 @@ class MeshNet {
   _broadcastRoster() {
     this.roster = this.getPeerIds();
     this.readyPeers.clear();
-    this.broadcast({ type: 'roster', peers: this.roster });
+    this.broadcast({ type: 'roster', peers: this.roster.map(id => ({ id, name: this.names.get(id) || '' })) });
     if (this.onreadyupdate) this.onreadyupdate(0, this.roster.length);
   }
 
@@ -224,6 +227,7 @@ class MeshNet {
     const peerId = this._findPeerId(peer) || 'unknown';
 
     if (msg.type === 'identity') {
+      if (msg.name) this.names.set(msg.peerId, msg.name);
       const existing = this._findPeerId(peer);
       if (existing && existing !== msg.peerId) {
         this.connections.delete(existing);
@@ -263,7 +267,8 @@ class MeshNet {
     }
 
     if (msg.type === 'roster') {
-      this.roster = msg.peers || [];
+      this.roster = (msg.peers || []).map(p => p.id || p);
+      if (msg.peers) msg.peers.forEach(p => { if (p.name) this.names.set(p.id, p.name); });
       this._meshReadySent = false;
       this._checkMeshConnections();
       return;
@@ -344,6 +349,10 @@ class MeshNet {
     return this.connections.size;
   }
 
+  getPeerName(peerId) {
+    return this.names.get(peerId) || peerId.slice(0, 8);
+  }
+
   getFullSDPData() {
     return this._fullSDPData;
   }
diff --git a/style.css b/style.css
index 1307de8..282929d 100644
--- a/style.css
+++ b/style.css
@@ -72,6 +72,26 @@ h3 {
   margin-bottom: 32px;
 }
 
+/* Name input */
+.name-section {
+  margin-bottom: 24px;
+}
+#player-name {
+  width: 100%;
+  padding: 12px 16px;
+  border-radius: var(--radius);
+  border: 1px solid var(--border);
+  background: var(--bg-card);
+  color: var(--text);
+  font-size: 1rem;
+  text-align: center;
+  outline: none;
+  transition: border-color 0.2s;
+}
+#player-name:focus {
+  border-color: var(--accent);
+}
+
 /* Buttons */
 .btn-group {
   display: flex;