Client-side stuff

client/css/style.css

@@ -36,10 +36,11 @@ button {
 	padding: 0;
 }
 #sidebar {
-	bottom: 0;
 	background: #262c36;
+	bottom: 0;
 	left: 0;
-	padding-bottom: 60px;
+	overflow: auto;
+	overflow-x: hidden;
 	position: absolute;
 	top: 0;
 	width: 220px;
@@ -61,9 +62,8 @@ button {
 	color: #fff;
 }
 #channels {
-	max-height: 100%;
-	overflow: auto;
-	padding: 30px 40px;
+	min-height: 100%;
+	padding: 30px 40px 80px;
 }
 #channels .network + .network {
 	margin-top: 30px;
@@ -94,12 +94,11 @@ button {
 	transition: all .1s;
 }
 #footer {
-	bottom: 0;
 	height: 80px;
 	line-height: 80px;
-	position: absolute;
+	margin-top: -80px;
 	text-align: center;
-	width: 100%;
+	width: 220px;
 }
 #footer button {
 	font: 18px Octicons;

client/index.html

@@ -86,6 +86,57 @@
 		</div>
 	</div>
 	
+	<div id="templates">
+		<script type="text/html" class="networks">
+		{{#each networks}}
+		<section class="network">
+			{{partial "channels"}}
+		</section>
+		{{/each}}
+		</script>
+		
+		<script type="text/html" class="channels">
+		{{#each channels}}
+		<button class="chan">
+			<span class="badge"></span>
+			Network
+		</button>
+		{{/each}}
+		</script>
+		
+		<script type="text/html" class="users">
+		<div id="meta">
+			<h1>{{name}}</h1>
+			<div class="count">
+				{{users.length}}
+				users
+			</div>
+		</div>
+		<div id="users">
+			{{#each users}}
+			<button>{{mode}}{{name}}</button>
+			{{/each}}
+		</div>
+		</script>
+		
+		<script type="text/html" class="messages">
+		{{#each messages}}
+		<div class="msg">
+			<span class="time">
+				{{time}}
+			</span>
+			<span class="from">
+				<button>{{from}}</button>
+			</span>
+			<span class="text">
+				<em class="type">{{type}}</em>
+				{{{uri text}}}
+			</span>
+		</div>
+		{{/each}}
+		</script>
+	</div>
+	
 	<script src="js/components.min.js"></script>
 	<script src="js/shout.js"></script>
 	

client/js/shout.js

@@ -1,4 +1,118 @@
 $(function() {
-	var socket = io();
-	socket.emit("h", "hello");
+	new Shout();
 });
+
+function Shout() {
+	var client = this;
+	var socket = io();
+	var events = [
+		"auth",
+		"init",
+		"join",
+		"msg",
+		"network",
+		"nick",
+		"part",
+		"quit",
+		"users"
+	].forEach(function(e) {
+		socket.on(e, function() {
+			client[e].call(client, socket);
+		});
+	});
+}
+
+Shout.prototype.auth = function(socket) {
+	socket.on("auth", function(json) {
+		console.log(json);
+	});
+};
+
+Shout.prototype.init = function(socket) {
+	socket.on("init", function(json) {
+		console.log(json);
+	});
+};
+
+Shout.prototype.join = function(socket) {
+	socket.on("join", function(json) {
+		console.log(json);
+	});
+};
+
+Shout.prototype.msg = function(socket) {
+	socket.on("msg", function(json) {
+		console.log(json);
+	});
+};
+
+Shout.prototype.network = function(socket) {
+	socket.on("network", function(json) {
+		console.log(json);
+	});
+};
+
+Shout.prototype.nick = function(socket) {
+	socket.on("nick", function(json) {
+		console.log(json);
+	});
+};
+
+Shout.prototype.part = function(socket) {
+	socket.on("part", function(json) {
+		console.log(json);
+	});
+};
+
+Shout.prototype.quit = function(socket) {
+	socket.on("quit", function(json) {
+		console.log(json);
+	});
+};
+
+Shout.prototype.users = function(socket) {
+	socket.on("quit", function(json) {
+		console.log(json);
+	});
+};
+
+var tpl = [];
+function render(name, data) {
+	tpl[name] = tpl[name] || Handlebars.compile($("#templates ." + name).html());
+	return tpl[name](data);
+}
+
+function escape(text) {
+	var e = {
+		"<": "&lt;",
+		">": "&gt;"
+	};
+	return text.replace(/[<>]/g, function (c) {
+		return e[c];
+	});
+}
+
+Handlebars.registerHelper(
+	"partial", function(id) {
+		return new Handlebars.SafeString(render(id, this));
+	}
+);
+
+Handlebars.registerHelper(
+	"uri", function(text) {
+		var urls = [];
+		text = URI.withinString(text, function(url) {
+			urls.push(url);
+			return "$(" + (urls.length - 1) + ")";	
+		});
+		text = escape(text);
+		for (var i in urls) {
+			var url = escape(urls[i]);
+			text = text.replace(
+				"$(" + i + ")",
+				"<a href='" + url.replace(/^www/, "//www") + "' target='_blank'>" + url + "</a>"
+			);
+		}
+		return text;
+	}
+);

lib/shout.js

@@ -8,7 +8,6 @@ var clients = [];
 
 var inputs = [
 	"action",
-	"connect",
 	"invite",
 	"join",
 	"kick",
@@ -19,6 +18,7 @@ var inputs = [
 	"part",
 	"quit",
 	"raw",
+	"server",
 	"topic",
 	"whois"
 ];
@@ -49,10 +49,12 @@ module.exports = function() {
 
 var init = function(socket, client) {
 	if (!client) {
+		socket.emit("auth");
+		socket.on("auth", auth);
 	} else {
 	}
 };
 
-var auth = function(data) {
-	// ..
+var auth = function() {
+	var socket = this;
 };