Replace color generation with CSS classes

These colors were built using the current generation function to have
similar style.

client/css/style.css

@@ -752,6 +752,71 @@ button,
 	color: #50a656 !important;
 }
 
+#chat .user.color-1 { color: #1396cf; }
+#chat .user.color-2 { color: #ffcf89; }
+#chat .user.color-3 { color: #00dc5f; }
+#chat .user.color-4 { color: #ff5bc8; }
+#chat .user.color-5 { color: #ff0e1b; }
+#chat .user.color-6 { color: #000094; }
+#chat .user.color-7 { color: #006441; }
+#chat .user.color-8 { color: #00566e; }
+#chat .user.color-9 { color: #ff0078; }
+#chat .user.color-10 { color: #15d5a3; }
+#chat .user.color-11 { color: #006b3b; }
+#chat .user.color-12 { color: #00c5ba; }
+#chat .user.color-13 { color: #00465b; }
+#chat .user.color-14 { color: #ffafce; }
+#chat .user.color-15 { color: #ff3b12; }
+#chat .user.color-16 { color: #16cc6a; }
+#chat .user.color-17 { color: #ff0072; }
+#chat .user.color-18 { color: #ff5877; }
+#chat .user.color-19 { color: #ff1753; }
+#chat .user.color-20 { color: #007a56; }
+#chat .user.color-21 { color: #095092; }
+#chat .user.color-22 { color: #000bde; }
+#chat .user.color-23 { color: #00bca9; }
+#chat .user.color-24 { color: #00367d; }
+#chat .user.color-25 { color: #009ec4; }
+#chat .user.color-26 { color: #006119; }
+#chat .user.color-27 { color: #008bb8; }
+#chat .user.color-28 { color: #469c00; }
+#chat .user.color-29 { color: #ff0f95; }
+#chat .user.color-30 { color: #ff7615; }
+#chat .user.color-31 { color: #ff0eb2; }
+#chat .user.color-32 { color: #ff199b; }
+#chat .user.color-33 { color: #ffcd7d; }
+#chat .user.color-34 { color: #009a47; }
+#chat .user.color-35 { color: #ffa804; }
+#chat .user.color-36 { color: #e100ad; }
+#chat .user.color-37 { color: #ff9e6b; }
+#chat .user.color-38 { color: #0001dc; }
+#chat .user.color-39 { color: #007d86; }
+#chat .user.color-40 { color: #ff00b1; }
+#chat .user.color-41 { color: #ff2086; }
+#chat .user.color-42 { color: #00bb72; }
+#chat .user.color-43 { color: #ff9901; }
+#chat .user.color-44 { color: #0d32d7; }
+#chat .user.color-45 { color: #ff0b62; }
+#chat .user.color-46 { color: #0057c4; }
+#chat .user.color-47 { color: #001488; }
+#chat .user.color-48 { color: #006f1c; }
+#chat .user.color-49 { color: #1d2b16; }
+#chat .user.color-50 { color: #00cb53; }
+#chat .user.color-51 { color: #ff598b; }
+#chat .user.color-52 { color: #0009e4; }
+#chat .user.color-53 { color: #ff31b7; }
+#chat .user.color-54 { color: #ff0290; }
+#chat .user.color-55 { color: #1e79e4; }
+#chat .user.color-56 { color: #ff76bc; }
+#chat .user.color-57 { color: #1e9563; }
+#chat .user.color-58 { color: #0000a4; }
+#chat .user.color-59 { color: #ffd500; }
+#chat .user.color-60 { color: #ff298f; }
+#chat .user.color-61 { color: #2d960e; }
+#chat .user.color-62 { color: #ff4846; }
+#chat .user.color-63 { color: #0094c0; }
+#chat .user.color-64 { color: #0000c4; }
+
 #chat .text {
 	padding-left: 10px;
 	padding-right: 6px;

client/js/libs/handlebars/colorClass.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Handlebars.registerHelper(
+	// Generates a string from "color-1" to "color-64" based on an input string
+	"colorClass", function(str) {
+		var hash = 0;
+		for (var i = 0; i < str.length; i++) {
+			hash += str.charCodeAt(i);
+		}
+
+		return "color-" + (1 + hash % 64);
+	}
+);

client/js/libs/handlebars/stringcolor.js

@@ -1,5 +0,0 @@
-Handlebars.registerHelper(
-	"stringcolor", function(str) {
-		return window.stringcolor(str);
-	}
-);

client/js/libs/stringcolor.js

@@ -1,87 +0,0 @@
-/*!
- * stringcolor
- * Generate a consistent color from any string.
- *
- * Source:
- * https://github.com/erming/stringcolor
- *
- * Version 0.2.0
- */
-(function($) {
-	/**
-	 * Generate hex color code from a string.
-	 *
-	 * @param {String} string
-	 */
-	$.stringcolor = function(string) {
-		return "#" + stringcolor(string);
-	};
-
-	/**
-	 * Set one or more CSS properties for the set of matched elements.
-	 *
-	 * @param {String|Array} property
-	 * @param {String} string
-	 */
-	$.fn.stringcolor = function(property, string) {
-		if (!property || !string) {
-			throw new Error("$(selector).string_to_color() takes 2 arguments");
-		}
-		return this.each(function() {
-			var props = [].concat(property);
-			var $this = $(this);
-			$.map(props, function(p) {
-				$this.css(p, $.stringcolor(string));
-			});
-		});
-	};
-})(jQuery);
-
-/*!
- * Name: string_to_color
- * Author: Brandon Corbin [code@icorbin.com]
- * Website: http://icorbin.com
- */
-function string_to_color(str) {
-	// Generate a Hash for the String
-	var hash = function(word) {
-		var h = 0;
-		for (var i = 0; i < word.length; i++) {
-			h = word.charCodeAt(i) + ((h << 5) - h);
-		}
-		return h;
-	};
-
-	// Change the darkness or lightness
-	var shade = function(color, prc) {
-		var num = parseInt(color, 16),
-		    amt = Math.round(2.55 * prc),
-		    R = (num >> 16) + amt,
-		    G = (num >> 8 & 0x00FF) + amt,
-		    B = (num & 0x0000FF) + amt;
-		return (0x1000000 + (R < 255 ? R < 1 ? 0 : R : 255) * 0x10000 +
-			(G < 255 ? G < 1 ? 0 : G : 255) * 0x100 +
-			(B < 255 ? B < 1 ? 0 : B : 255))
-			.toString(16)
-			.slice(1);
-	};
-
-	// Convert init to an RGBA
-	var int_to_rgba = function(i) {
-		var color = ((i >> 24) & 0xFF).toString(16) +
-			((i >> 16) & 0xFF).toString(16) +
-			((i >> 8) & 0xFF).toString(16) +
-			(i & 0xFF).toString(16);
-		return color;
-	};
-
-	return shade(
-		int_to_rgba(hash(str)),
-		-10
-	);
-}
-
-var cache = {};
-function stringcolor(str) {
-	return cache[str] = cache[str] || string_to_color(str);
-}

client/views/actions/action.tpl

@@ -1,2 +1,2 @@
-<a href="#" class="user" data-name="{{from}}" style="color:#{{stringcolor from}}">{{mode}}{{from}}</a>
+<a href="#" class="user {{colorClass from}}" data-name="{{from}}">{{mode}}{{from}}</a>
 <span class="action-text">{{{parse text}}}</span>

client/views/actions/ctcp.tpl

@@ -1,2 +1,2 @@
-<a href="#" class="user" data-name="{{from}}" style="color:#{{stringcolor from}}">{{from}}</a>
+<a href="#" class="user {{colorClass from}}" data-name="{{from}}">{{from}}</a>
 <b>{{ctcpType}}</b> {{{parse ctcpMessage}}}

client/views/actions/invite.tpl

@@ -1,9 +1,9 @@
-<a href="#" class="user" data-name="{{from}}" style="color:#{{stringcolor from}}">{{from}}</a>
+<a href="#" class="user {{colorClass from}}" data-name="{{from}}">{{from}}</a>
 invited
 {{#if invitedYou}}
 	you
 {{else}}
-	<a href="#" class="user" data-name="{{invited}}" style="color:#{{stringcolor invited}}">{{invited}}</a>
+	<a href="#" class="user {{colorClass invited}}" data-name="{{invited}}">{{invited}}</a>
 {{/if}}
 to
 {{{parse channel}}}

client/views/actions/join.tpl

@@ -1,3 +1,3 @@
-<a href="#" class="user" data-name="{{from}}" style="color:#{{stringcolor from}}">{{mode}}{{from}}</a>
+<a href="#" class="user {{colorClass from}}" data-name="{{from}}">{{mode}}{{from}}</a>
 <i class="hostmask">({{hostmask}})</i>
 has joined the channel

client/views/actions/kick.tpl

@@ -1,6 +1,6 @@
-<a href="#" class="user" data-name="{{from}}" style="color:#{{stringcolor from}}">{{mode}}{{from}}</a>
+<a href="#" class="user {{colorClass from}}" data-name="{{from}}">{{mode}}{{from}}</a>
 has kicked
-<a href="#" class="user" data-name="{{target}}" style="color:#{{stringcolor target}}">{{target}}</a>
+<a href="#" class="user {{colorClass target}}" data-name="{{target}}">{{target}}</a>
 {{#if text}}
 	<i class="part-reason">({{{parse text}}})</i>
 {{/if}}

client/views/actions/mode.tpl

@@ -1,3 +1,3 @@
-<a href="#" class="user" data-name="{{from}}" style="color:#{{stringcolor from}}">{{mode}}{{from}}</a>
+<a href="#" class="user {{colorClass from}}" data-name="{{from}}">{{mode}}{{from}}</a>
 sets mode
 {{{parse text}}}

client/views/actions/nick.tpl

@@ -1,3 +1,3 @@
-<a href="#" class="user" data-name="{{nick}}" style="color:#{{stringcolor nick}}">{{mode}}{{nick}}</a>
+<a href="#" class="user {{colorClass nick}}" data-name="{{nick}}">{{mode}}{{nick}}</a>
 is now known as
-<a href="#" class="user" data-name="{{new_nick}}" style="color:#{{stringcolor new_nick}}">{{mode}}{{new_nick}}</a>
+<a href="#" class="user {{colorClass new_nick}}" data-name="{{new_nick}}">{{mode}}{{new_nick}}</a>

client/views/actions/part.tpl

@@ -1,4 +1,4 @@
-<a href="#" class="user" data-name="{{from}}" style="color:#{{stringcolor from}}">{{mode}}{{from}}</a>
+<a href="#" class="user {{colorClass from}}" data-name="{{from}}">{{mode}}{{from}}</a>
 <i class="hostmask">({{hostmask}})</i>
 has left the channel
 {{#if text}}

client/views/actions/quit.tpl

@@ -1,4 +1,4 @@
-<a href="#" class="user" data-name="{{from}}" style="color:#{{stringcolor from}}">{{mode}}{{from}}</a>
+<a href="#" class="user {{colorClass from}}" data-name="{{from}}">{{mode}}{{from}}</a>
 <i class="hostmask">({{hostmask}})</i>
 has quit
 {{#if text}}

client/views/actions/topic.tpl

@@ -1,5 +1,5 @@
 {{#if from}}
-	<a href="#" class="user" data-name="{{from}}" style="color:#{{stringcolor from}}">{{mode}}{{from}}</a>
+	<a href="#" class="user {{colorClass from}}" data-name="{{from}}">{{mode}}{{from}}</a>
 	has changed the topic to:
 {{else}}
 	The topic is:

client/views/actions/topic_set_by.tpl

@@ -1,3 +1,3 @@
 Topic set by
-<a href="#" class="user" data-name="{{nick}}" style="color:#{{stringcolor nick}}">{{mode}}{{nick}}</a>
+<a href="#" class="user {{colorClass nick}}" data-name="{{nick}}">{{mode}}{{nick}}</a>
 on {{localeDate when}}

client/views/actions/whois.tpl

@@ -1,35 +1,35 @@
 <div>
-	<a href="#" class="user" data-name="{{whois.nick}}" style="color:#{{stringcolor whois.nick}}">{{whois.nick}}</a>
+	<a href="#" class="user {{colorClass whois.nick}}" data-name="{{whois.nick}}">{{whois.nick}}</a>
 	<i class="hostmask">({{whois.user}}@{{whois.host}})</i>:
 	<b>{{whois.real_name}}</b>
 </div>
 {{#if whois.account}}
 <div>
-	<a href="#" class="user" data-name="{{whois.nick}}" style="color:#{{stringcolor whois.nick}}">{{whois.nick}}</a>
+	<a href="#" class="user {{colorClass whois.nick}}" data-name="{{whois.nick}}">{{whois.nick}}</a>
 	is logged in as <b>{{whois.account}}</b>
 </div>
 {{/if}}
 {{#if whois.channels}}
 <div>
-	<a href="#" class="user" data-name="{{whois.nick}}" style="color:#{{stringcolor whois.nick}}">{{whois.nick}}</a>
+	<a href="#" class="user {{colorClass whois.nick}}" data-name="{{whois.nick}}">{{whois.nick}}</a>
 	is on the following channels: {{{parse whois.channels}}}
 </div>
 {{/if}}
 {{#if whois.server}}
 <div>
-	<a href="#" class="user" data-name="{{whois.nick}}" style="color:#{{stringcolor whois.nick}}">{{whois.nick}}</a>
+	<a href="#" class="user {{colorClass whois.nick}}" data-name="{{whois.nick}}">{{whois.nick}}</a>
 	is connected to {{whois.server}} <i>({{whois.server_info}})</i>
 </div>
 {{/if}}
 {{#if whois.secure}}
 <div>
-	<a href="#" class="user" data-name="{{whois.nick}}" style="color:#{{stringcolor whois.nick}}">{{whois.nick}}</a>
+	<a href="#" class="user {{colorClass whois.nick}}" data-name="{{whois.nick}}">{{whois.nick}}</a>
 	is using a secure connection
 </div>
 {{/if}}
 {{#if whois.away}}
 <div>
-	<a href="#" class="user" data-name="{{whois.nick}}" style="color:#{{stringcolor whois.nick}}">{{whois.nick}}</a>
+	<a href="#" class="user {{colorClass whois.nick}}" data-name="{{whois.nick}}">{{whois.nick}}</a>
 	is away <i>({{whois.away}})</i>
 </div>
 {{/if}}

client/views/msg.tpl

@@ -4,7 +4,7 @@
 	</span>
 	<span class="from">
 		{{#if from}}
-		<a href="#" class="user" style="color: #{{stringcolor from}}" data-name="{{from}}">{{mode}}{{from}}</a>
+		<a href="#" class="user {{colorClass from}}" data-name="{{from}}">{{mode}}{{from}}</a>
 		{{/if}}
 	</span>
 	{{#equal type "toggle"}}

client/views/user.tpl

@@ -13,7 +13,7 @@
 			{{/unless}}
 			<div class="user-mode {{modes mode}}">
 			{{/diff}}
-			<button class="user" style="color: #{{stringcolor name}}" data-name="{{name}}">{{mode}}{{name}}</button>
+			<button class="user {{colorClass name}}" data-name="{{name}}">{{mode}}{{name}}</button>
 		{{/each}}
 		</div>
 	</div>