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:
@@ -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">🔒 </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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user