7 files changed, 90 insertions, 7 deletions
diff --git a/public/css/chat.css b/public/css/chat.css
index dc627b0..f792709 100644
--- a/public/css/chat.css
+++ b/public/css/chat.css
@@ -1,8 +1,8 @@
 #chat_container {
-  overflow: hidden;
   position: absolute;
+  background: #fffdf8;
 }
-#chat_container #chat {
+#chat {
   overflow-y: scroll;
   overflow-x: hidden;
   max-height: 400px;
@@ -12,6 +12,9 @@
   padding-right: 10px;
   padding-bottom: 5px;
 }
+#chat #chat_shim {
+	height: 390px;
+}
 #chat p {
 	margin: 0;
 }
diff --git a/public/css/drawdrawdraw.css b/public/css/drawdrawdraw.css
index 3f34505..b4cc6cb 100644
--- a/public/css/drawdrawdraw.css
+++ b/public/css/drawdrawdraw.css
@@ -1,6 +1,7 @@
 html,body { padding: 0; margin: 0; width: 100%; height: 100%;
 	font-family: 'Optima',sans-serif;
 	overflow: hidden;
+	background: #fcfaf5;
 }
 
 ::-webkit-scrollbar {
@@ -13,4 +14,23 @@ html,body { padding: 0; margin: 0; width: 100%; height: 100%;
 	width: 4px;
 	height: 10px;
 	background: #ddd;
-}
-\ No newline at end of file
+}
+
+.curtain {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background: rgba(255,255,255,0.9);
+}
+.curtain .inner {
+	position: absolute;
+	top: 20%;
+	left: 50%;
+	width: 400px;
+	padding: 10px;
+	margin-left: -210px;
+	background: #fff;
+	box-shadow: 0 1px 4px #888;
+}
diff --git a/public/index.html b/public/index.html
index c986e00..f5f087f 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,18 +1,19 @@
 <!doctype html>
 <html>
 <head>
-<title>CocaPaint</title>
+<title>CocoPaint</title>
 <link rel="stylesheet" href="/css/drawdrawdraw.css" type="text/css">
 <link rel="stylesheet" href="/css/chat.css" type="text/css">
 <script type="text/javascript" src="/js/jquery-1.9.1.min.js"></script>
 <script type="text/javascript" src="/socket.io/socket.io.js"></script>
 <script type="text/javascript" src="/js/util.js"></script>
+<script type="text/javascript" src="/js/auth.js"></script>
 <script type="text/javascript" src="/js/draw.js"></script>
 <script type="text/javascript" src="/js/chat.js"></script>
 <script type="text/javascript" src="/js/game.js"></script>
 </head>
 <body>
-	<h1>Cocapaint</h1>
+	<h1>Cocopaint</h1>
 
 	<div id="chat_container">
 		<div id="chat"><div id="chat_shim"></div></div>
@@ -24,7 +25,19 @@
 			-->
 		</div>
 	</div>
-
+	
+	<div id="login" class="curtain">
+		<div class="inner">
+			Welcome to Cocopaint!
+			<br>
+			<br>
+			Enter your name to start playing..
+			<br><br>
+			<input type="text" id="username">
+			<br><br>
+			<button id="login-go">GO</button>
+		</div>
+	</div>
 </body>
 </html>
 
diff --git a/public/js/auth.js b/public/js/auth.js
new file mode 100644
index 0000000..6cdc4c0
--- /dev/null
+++ b/public/js/auth.js
@@ -0,0 +1,38 @@
+var Auth = {
+	init: function(){
+		Auth.bind();
+		if (Auth.loggedIn()) {
+		}
+		else {
+			$("#login").show();
+		}
+	},
+	bind: function(){
+		$("#login-go").click(Auth.login);
+		$("#username").keydown(function(e){
+		switch (e.keyCode) {
+			case 13: // enter
+				Auth.login();
+				break
+			}
+		});
+	},
+	loggedIn: function(){
+		if (localStorage && localStorage.nick) {
+			Game.nick = strip(localStorage.nick);
+			if (Game.nick.length == 0) return false;
+			return true;
+		}
+		return false;
+	},
+	login: function(){
+		Game.nick = strip( $("#username").val() );
+		if (Game.nick.length == 0) return;
+		localStorage.nick = Game.nick;
+		$("#username").val("");
+		$("#login").hide();
+	},
+	logout: function(){
+		$("#login").show();
+	}
+}
diff --git a/public/js/chat.js b/public/js/chat.js
index 67b6255..752ed67 100644
--- a/public/js/chat.js
+++ b/public/js/chat.js
@@ -2,6 +2,10 @@ var Chat = {
 	height: 300,
 
 	init: function(){
+		Chat.bind();
+	},
+	
+	bind: function(){
 		$("#chat-message").on("keydown", Chat.keys);
 	},
 
diff --git a/public/js/game.js b/public/js/game.js
index 3b0a71b..af05ad9 100644
--- a/public/js/game.js
+++ b/public/js/game.js
@@ -1,13 +1,14 @@
 var socket = io.connect(window.location.hostname);
 
 var Game = {
-	nick: "ryz",
+	nick: null,
 	
 	init: function(){
 
 		// Bind events from the server
 		socket.on('event-join', Events.receive.join);
 		socket.on('event-message', Events.receive.message);
+		Auth.init();
 		Chat.init();
 	}
 }
@@ -15,6 +16,7 @@ var Game = {
 var Events = {
 
 	receive: {
+	
 		join: function(data){
 			for (var i in data.messages) {
 				Chat.add(data.messages[i]);
diff --git a/public/js/util.js b/public/js/util.js
index 12a331a..e51b844 100644
--- a/public/js/util.js
+++ b/public/js/util.js
@@ -1,6 +1,9 @@
 function trim (s) {
 	return s.replace(/^\s+/, "").replace(/\s+$/, "");
 }
+function strip (s) {
+	return trim(s).replace(/\W+/, "");
+}
 function sanitize (s) {
 	return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/\"/g, "&quot;");
 }