v0.0.4: unique colors per peer in web UI

Each peer gets a stable color from a 12-color palette based on
their fingerprint/alias hash. Self messages stay green.
No more same-color for different users.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Siavash Sameni
2026-03-27 09:30:55 +04:00
parent 1aba435af3
commit 4fc1cc2ab1
3 changed files with 17 additions and 10 deletions

View File

@@ -83,7 +83,6 @@ const WEB_HTML: &str = r##"<!DOCTYPE html>
.msg { padding: 2px 0; font-size: 0.85em; white-space: pre-wrap; word-wrap: break-word; }
.msg .ts { color: #333; margin-right: 4px; }
.msg .from-self { color: #4ade80; font-weight: bold; }
.msg .from-peer { color: #e6a23c; font-weight: bold; }
.msg .from-sys { color: #5e9ca0; font-style: italic; }
.msg .lock { color: #ff6b9d; }
@@ -160,7 +159,7 @@ let peerBundles = {}; // peerFP -> bundle bytes
let pollTimer = null;
let wasmReady = false;
const VERSION = '0.0.3';
const VERSION = '0.0.4';
let DEBUG = true; // toggle with /debug command
function dbg(...args) {
@@ -402,12 +401,20 @@ function esc(s) {
return d.innerHTML;
}
const PEER_COLORS = ['#e6a23c','#f56c9d','#67c7eb','#b39ddb','#ff8a65','#81c784','#ce93d8','#4fc3f7','#ffb74d','#aed581','#f06292','#4dd0e1'];
function peerColor(name) {
let h = 0;
for (let i = 0; i < name.length; i++) h = ((h << 5) - h + name.charCodeAt(i)) | 0;
return PEER_COLORS[Math.abs(h) % PEER_COLORS.length];
}
function addMsg(from, text, isSelf) {
const d = document.createElement('div');
d.className = 'msg';
const cls = isSelf ? 'from-self' : 'from-peer';
const color = isSelf ? '#4ade80' : peerColor(from);
const lock = isSelf ? '' : '<span class="lock">&#128274; </span>';
d.innerHTML = '<span class="ts">' + ts() + '</span> ' + lock + '<span class="' + cls + '">' + esc(from) + '</span>: ' + esc(text);
d.innerHTML = '<span class="ts">' + ts() + '</span> ' + lock + '<span style="color:' + color + ';font-weight:bold">' + esc(from) + '</span>: ' + esc(text);
$messages.appendChild(d);
$messages.scrollTop = $messages.scrollHeight;
}