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 = `${isMe ? 'Du' : id.slice(0, 8)}`;
+ const displayName = isMe ? 'Du' : mesh.getPeerName(id);
+ li.innerHTML = `${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 @@
randomp2p
Vertrauensloser Münzwurf mit Freunden
+
+
+
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;