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

10
warzone/Cargo.lock generated
View File

@@ -2555,7 +2555,7 @@ dependencies = [
[[package]] [[package]]
name = "warzone-client" name = "warzone-client"
version = "0.0.3" version = "0.0.4"
dependencies = [ dependencies = [
"anyhow", "anyhow",
"argon2", "argon2",
@@ -2584,7 +2584,7 @@ dependencies = [
[[package]] [[package]]
name = "warzone-mule" name = "warzone-mule"
version = "0.0.3" version = "0.0.4"
dependencies = [ dependencies = [
"anyhow", "anyhow",
"clap", "clap",
@@ -2593,7 +2593,7 @@ dependencies = [
[[package]] [[package]]
name = "warzone-protocol" name = "warzone-protocol"
version = "0.0.3" version = "0.0.4"
dependencies = [ dependencies = [
"base64", "base64",
"bincode", "bincode",
@@ -2616,7 +2616,7 @@ dependencies = [
[[package]] [[package]]
name = "warzone-server" name = "warzone-server"
version = "0.0.3" version = "0.0.4"
dependencies = [ dependencies = [
"anyhow", "anyhow",
"axum", "axum",
@@ -2642,7 +2642,7 @@ dependencies = [
[[package]] [[package]]
name = "warzone-wasm" name = "warzone-wasm"
version = "0.0.3" version = "0.0.4"
dependencies = [ dependencies = [
"base64", "base64",
"bincode", "bincode",

View File

@@ -9,7 +9,7 @@ members = [
] ]
[workspace.package] [workspace.package]
version = "0.0.3" version = "0.0.4"
edition = "2021" edition = "2021"
license = "MIT" license = "MIT"
rust-version = "1.75" rust-version = "1.75"

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 { padding: 2px 0; font-size: 0.85em; white-space: pre-wrap; word-wrap: break-word; }
.msg .ts { color: #333; margin-right: 4px; } .msg .ts { color: #333; margin-right: 4px; }
.msg .from-self { color: #4ade80; font-weight: bold; } .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 .from-sys { color: #5e9ca0; font-style: italic; }
.msg .lock { color: #ff6b9d; } .msg .lock { color: #ff6b9d; }
@@ -160,7 +159,7 @@ let peerBundles = {}; // peerFP -> bundle bytes
let pollTimer = null; let pollTimer = null;
let wasmReady = false; let wasmReady = false;
const VERSION = '0.0.3'; const VERSION = '0.0.4';
let DEBUG = true; // toggle with /debug command let DEBUG = true; // toggle with /debug command
function dbg(...args) { function dbg(...args) {
@@ -402,12 +401,20 @@ function esc(s) {
return d.innerHTML; 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) { function addMsg(from, text, isSelf) {
const d = document.createElement('div'); const d = document.createElement('div');
d.className = 'msg'; d.className = 'msg';
const cls = isSelf ? 'from-self' : 'from-peer'; const color = isSelf ? '#4ade80' : peerColor(from);
const lock = isSelf ? '' : '<span class="lock">&#128274; </span>'; 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.appendChild(d);
$messages.scrollTop = $messages.scrollHeight; $messages.scrollTop = $messages.scrollHeight;
} }