Unique color per nick

client/css/style.css

@@ -1,6 +1,6 @@
 html,
 body {
-	font: 12px Consolas, monospace;
+	font: 13px "Consolas", monospace;
 	height: 100%;
 }
 a:focus {
@@ -164,6 +164,7 @@ h2 {
 	background: #fff;
 	border-left: 1px solid #ddd;
 	bottom: 30px;
+	line-height: 1.4em;
 	overflow-y: auto;
 	padding: 4px 0;
 	position: absolute;
@@ -173,20 +174,23 @@ h2 {
 }
 #chat .users .user {
 	display: block;
-	color: #f00;
 	padding: 0 8px;
 }
 #chat .messages {
 	bottom: 30px;
 	left: 0;
 	overflow-y: auto;
-	padding: 4px 8px;
+	padding: 4px 0;
 	position: absolute;
 	right: 160px;
 	top: 43px;
 	word-wrap: break-word;
 	z-index: 0;
 }
+#chat .message {
+	line-height: 1.4em;
+	padding: 0 6px;
+}
 #chat .message .time {
 	color: #bbb;
 }

client/index.html

@@ -90,7 +90,7 @@
 		</div>
 		<div class="users">
 			{{#each users}}
-			<a href="{{name}}" class="user">
+			<a href="{{name}}" class="user" style="color: {{color name}}">
 				{{mode}}{{name}}
 			</a>
 			{{/each}}
@@ -99,8 +99,8 @@
 			{{#each messages}}
 			<div class="message {{type}}">
 				<span class="time">{{time}}</span>
-				<a href="{{user}}" class="user">{{mode}}{{user}}</a>
-				<span class="text">{{type}} {{{autoLink text}}}</span>
+				<a href="{{user}}" class="user" style="color: {{color user}}">{{mode}}{{user}}</a>
+				<span class="text">{{type}} {{{link text}}}</span>
 			</div>
 			{{/each}}
 		</div>
@@ -114,7 +114,7 @@
 
 	<script type="text/html" id="user">
 	{{#users}}
-	<a href="{{name}}" class="user">
+	<a href="{{name}}" class="user" style="color: {{color name}}">
 		{{mode}}{{name}}
 	</a>
 	{{/users}}
@@ -124,8 +124,8 @@
 	{{#messages}}
 	<div class="message {{type}}">
 		<span class="time">{{time}}</span>
-		<a href="{{user}}" class="user">{{mode}}{{user}}</a>
-		<span class="text">{{type}} {{{autoLink text}}}</span>
+		<a href="{{user}}" class="user" style="color: {{color user}}">{{mode}}{{user}}</a>
+		<span class="text">{{type}} {{{link text}}}</span>
 	</div>
 	{{/messages}}
 	</script>

client/js/chat.js

@@ -215,9 +215,58 @@ $(function() {
 	};
 });
 
-Handlebars.registerHelper("autoLink", function(text) {
+Handlebars.registerHelper("link", function(text) {
 	var text = Handlebars.Utils.escapeExpression(text);
 	return URI.withinString(text, function(url) {
 		return "<a href='" + url + "' target='_blank'>" + url + "</a>";
 	});
 });
+
+Handlebars.registerHelper("color", function(text) {
+	return get_color(text);
+});
+
+// colornicks
+// https://github.com/avidal
+
+function clean_nick(nick) {
+	// attempts to clean up a nickname
+	// by removing alternate characters from the end
+	// nc_ becomes nc, avidal` becomes avidal
+	
+	nick = nick.toLowerCase();
+	
+	// typically ` and _ are used on the end alone
+	nick = nick.replace(/[`_]+$/, '');
+	
+	// remove |<anything> from the end
+	nick = nick.replace(/|.*$/, '');
+	
+	return nick;
+}
+
+function hash(nick) {
+	var cleaned = clean_nick(nick);
+	var h = 0;
+	
+	for(var i = 0; i < cleaned.length; i++) {
+		h = cleaned.charCodeAt(i) + (h << 6) + (h << 16) - h;
+	}
+	
+	return h;
+}
+
+function get_color(nick) {
+	var nickhash = hash(nick);
+	
+	// get a random value for the hue
+	var h = nickhash % 360;
+	
+	var l = 50;
+	var s = 100;
+	
+	// playing around with some numbers
+	h = 360 + (h % 40);
+	
+	return "hsl(" + h + "," + s + "%," + l + "%)";
+}