Added colored nicknames (optional)

client/css/style.css

@@ -518,8 +518,9 @@ button {
 	padding-bottom: 10px;
 }
 #chat .msg .type {
-	color: #ddd;
+	color: #ccc;
 	display: none;
+	font-style: normal;
 }
 #chat .time,
 #chat .from,
@@ -542,11 +543,13 @@ button {
 	width: 134px;
 	min-width: 134px;
 }
-#chat a,
-#chat .from button,
-#chat .sidebar button {
+#chat a {
 	color: #84ce88;
 }
+#chat.no-colors .from button,
+#chat.no-colors .sidebar button {
+	color: #84ce88 !important;
+}
 #chat .text {
 	padding-left: 10px;
 	padding-right: 6px;
@@ -592,7 +595,10 @@ button {
 	color: #f39c12;
 }
 #chat .action .user:before {
-	content: '* ';
+	content: "* ";
+}
+#chat .action .user:after {
+	content: "";
 }
 #chat .toggle-button {
 	background: #f5f5f5;
@@ -673,6 +679,9 @@ button {
 	display: block;
 	line-height: 1.6;
 }
+#chat .names .inner {
+	width: 300px;
+}
 #sign-in label {
 	display: block;
 	margin-top: 10px;
@@ -766,7 +775,6 @@ button {
 	position: absolute;
 	right: 0px;
 }
-
 #form .inner {
 	bottom: 7px;
 	left: 7px;

client/index.html

@@ -38,7 +38,7 @@
 		</footer>
 		<div id="main">
 			<div id="windows">
-				<div id="chat"></div>
+				<div id="chat" class="no-colors"></div>
 				<div id="sign-in" class="window">
 					<div class="header">
 						<button class="lt"></button>
@@ -200,19 +200,28 @@
 									Show quits
 								</label>
 							</div>
+							<div class="col-sm-12">
+								<h2>Visual Aids</h2>
+							</div>
+							<div class="col-sm-12">
+								<label class="opt">
+									<input type="checkbox" name="colors">
+									Enable colored nicknames
+								</label>
+							</div>
 							<div class="col-sm-12">
 								<h2>Links and URLs</h2>
 							</div>
 							<div class="col-sm-6">
 								<label class="opt">
 									<input type="checkbox" name="thumbnails">
-									Show thumbnails
+									Auto-expand thumbnails
 								</label>
 							</div>
 							<div class="col-sm-6">
 								<label class="opt">
 									<input type="checkbox" name="links">
-									Show link descriptions
+									Auto-expand links
 								</label>
 							</div>
 							<div class="col-sm-12">

client/js/libs/handlebars/stringcolor.js

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

client/js/libs/stringcolor.js

@@ -0,0 +1,87 @@
+/*!
+ * 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/js/shout.js

@@ -303,6 +303,7 @@ $(function() {
 	var settings = $("#settings");
 	var options = $.extend({
 		badge: false,
+		colors: false,
 		join: true,
 		links: true,
 		mode: true,
@@ -340,6 +341,9 @@ $(function() {
 		].indexOf(name) !== -1) {
 			chat.toggleClass("hide-" + name, !self.prop("checked"));
 		}
+		if (name == "colors") {
+			chat.toggleClass("no-colors", !self.prop("checked"));
+		}
 	}).find("input")
 		.trigger("change");
 
@@ -504,7 +508,7 @@ $(function() {
 
 	var whois = false;
 	chat.on("click", ".user", function() {
-		var user = $(this).html().trim().replace(/[+%@~]/, "");
+		var user = $(this).text().trim().replace(/[+%@~&]/, "");
 		if (user.indexOf("#") !== -1) {
 			return;
 		}

client/js/shout.templates.js

@@ -84,8 +84,10 @@ templates['msg'] = template({"1":function(depth0,helpers,partials,data) {
 },"2":function(depth0,helpers,partials,data) {
   return "self";
   },"4":function(depth0,helpers,partials,data) {
-  var helper, functionType="function", helperMissing=helpers.helperMissing, escapeExpression=this.escapeExpression;
-  return "		<button class=\"user\">"
+  var helper, helperMissing=helpers.helperMissing, escapeExpression=this.escapeExpression, functionType="function";
+  return "		<button class=\"user\" style=\"color: #"
+    + escapeExpression(((helpers.stringcolor || (depth0 && depth0.stringcolor) || helperMissing).call(depth0, (depth0 != null ? depth0.from : depth0), {"name":"stringcolor","hash":{},"data":data})))
+    + "\">"
     + escapeExpression(((helper = (helper = helpers.from || (depth0 != null ? depth0.from : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"from","hash":{},"data":data}) : helper)))
     + "</button>\n";
 },"6":function(depth0,helpers,partials,data) {
@@ -162,8 +164,10 @@ templates['user'] = template({"1":function(depth0,helpers,partials,data) {
     + escapeExpression(((helpers.users || (depth0 && depth0.users) || helperMissing).call(depth0, ((stack1 = (depth0 != null ? depth0.users : depth0)) != null ? stack1.length : stack1), {"name":"users","hash":{},"data":data})))
     + "\">\n</div>\n";
 },"3":function(depth0,helpers,partials,data) {
-  var helper, functionType="function", helperMissing=helpers.helperMissing, escapeExpression=this.escapeExpression;
-  return "	<button class=\"user\">"
+  var helper, helperMissing=helpers.helperMissing, escapeExpression=this.escapeExpression, functionType="function";
+  return "		<button class=\"user\" style=\"color: #"
+    + escapeExpression(((helpers.stringcolor || (depth0 && depth0.stringcolor) || helperMissing).call(depth0, (depth0 != null ? depth0.name : depth0), {"name":"stringcolor","hash":{},"data":data})))
+    + "\">"
     + escapeExpression(((helper = (helper = helpers.mode || (depth0 != null ? depth0.mode : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"mode","hash":{},"data":data}) : helper)))
     + escapeExpression(((helper = (helper = helpers.name || (depth0 != null ? depth0.name : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"name","hash":{},"data":data}) : helper)))
     + "</button>\n";
@@ -171,9 +175,9 @@ templates['user'] = template({"1":function(depth0,helpers,partials,data) {
   var stack1, buffer = "";
   stack1 = helpers['if'].call(depth0, ((stack1 = (depth0 != null ? depth0.users : depth0)) != null ? stack1.length : stack1), {"name":"if","hash":{},"fn":this.program(1, data),"inverse":this.noop,"data":data});
   if (stack1 != null) { buffer += stack1; }
-  buffer += "<div class=\"names\">\n";
+  buffer += "<div class=\"names\">\n	<div class=\"inner\">\n";
   stack1 = helpers.each.call(depth0, (depth0 != null ? depth0.users : depth0), {"name":"each","hash":{},"fn":this.program(3, data),"inverse":this.noop,"data":data});
   if (stack1 != null) { buffer += stack1; }
-  return buffer + "</div>\n";
+  return buffer + "	</div>\n</div>\n";
 },"useData":true});
 })();

client/templates/msg.tpl

@@ -5,7 +5,7 @@
 	</span>
 	<span class="from">
 		{{#if from}}
-		<button class="user">{{from}}</button>
+		<button class="user" style="color: #{{stringcolor from}}">{{from}}</button>
 		{{/if}}
 	</span>
 	<span class="text">

client/templates/user.tpl

@@ -4,7 +4,9 @@
 </div>
 {{/if}}
 <div class="names">
+	<div class="inner">
 		{{#each users}}
-	<button class="user">{{mode}}{{name}}</button>
+		<button class="user" style="color: #{{stringcolor name}}">{{mode}}{{name}}</button>
 		{{/each}}
+	</div>
 </div>