From 4c032c03a7caf3c51d60a92b55eb29fcacf18540 Mon Sep 17 00:00:00 2001
From: Simon Ser <contact@emersion.fr>
Date: Sat, 25 Apr 2020 10:28:23 +0200
Subject: [PATCH] Colorful nicknames

---
 assets/client.js | 13 +++++++++-
 assets/style.css | 63 +++++++++++++++++++++++++++++++++++++++++++-----
 2 files changed, 69 insertions(+), 7 deletions(-)

diff --git a/assets/client.js b/assets/client.js
index 6e4b227..eb31799 100644
--- a/assets/client.js
+++ b/assets/client.js
@@ -15,6 +15,15 @@ var logElt = document.getElementById("log");
 var composerElt = document.getElementById("composer");
 var composerInputElt = document.getElementById("composer-input");
 
+function djb2(s) {
+	var hash = 5381;
+	for (var i = 0; i < s.length; i++) {
+		hash = (hash << 5) + hash + s.charCodeAt(i);
+		hash = hash >>> 0; // convert to uint32
+	}
+	return hash;
+}
+
 function createMessageElement(msg) {
 	var date = new Date();
 
@@ -39,9 +48,11 @@ function createMessageElement(msg) {
 	case "PRIVMSG":
 		var text = msg.params[1];
 
+		line.className += " talk";
+
 		var nick = document.createElement("a");
 		nick.href = "#";
-		nick.className = "nick";
+		nick.className = "nick nick-" + (djb2(msg.prefix.name) % 16 + 1);
 		nick.innerText = msg.prefix.name;
 		nick.onclick = function(event) {
 			event.preventDefault();
diff --git a/assets/style.css b/assets/style.css
index 1034f58..68ee1a4 100644
--- a/assets/style.css
+++ b/assets/style.css
@@ -32,11 +32,6 @@ body {
 	width: 100%;
 }
 
-#log {
-	box-sizing: border-box;
-	padding: 10px;
-}
-
 #composer {
 	grid-column: 2;
 	border-top: 1px solid #e3e3e3;
@@ -70,6 +65,62 @@ a.nick:hover, a.nick:active {
 	text-decoration: underline;
 }
 
-a.nick {
+#log {
+	box-sizing: border-box;
+	padding: 10px;
+	color: #4a4a4a;
+}
+#log .talk {
+	color: black;
+}
+#log .me-tell {
+	color: #b37400;
+}
+#log .nick-1 {
 	color: #f25e0d;
 }
+#log .nick-2 {
+	color: #e43611;
+}
+#log .nick-3 {
+	color: #f98a11;
+}
+#log .nick-4 {
+	color: #b4a700;
+}
+#log .nick-5 {
+	color: #89bd3b;
+}
+#log .nick-6 {
+	color: #4ea847;
+}
+#log .nick-7 {
+	color: #287e52;
+}
+#log .nick-8 {
+	color: #117873;
+}
+#log .nick-9 {
+	color: #0083a7;
+}
+#log .nick-10 {
+	color: #2a6596;
+}
+#log .nick-11 {
+	color: #385189;
+}
+#log .nick-12 {
+	color: #434078;
+}
+#log .nick-13 {
+	color: #5e4279;
+}
+#log .nick-14 {
+	color: #7a447a;
+}
+#log .nick-15 {
+	color: #e92980;
+}
+#log .nick-16 {
+	color: #ec273e;
+}