Basic message functionality

css/style.css

@@ -243,6 +243,51 @@ span.nought {
 	margin-left: 5px;
 }
 
+#overlay {
+	width: 960px;
+	height: 700px;
+	background: #fff;
+	position: absolute;
+	top: 0px;
+}
+
+#nickname {
+	width: 300px;
+	margin: 0 auto;
+	margin-top: 130px;
+}
+
+#nickname-err {
+	display: none;
+}
+
+#connecting {
+	display: none;
+	width: 300px;
+	margin: 0 auto;
+	margin-top: 130px;
+}
+
+#messages {
+	height: 100px;
+	overflow: auto;
+}
+
+#messages ul {
+	list-style-type: none;
+	margin: 0px;
+	padding: 0px;
+}
+
+#messages ul b {
+	font-weight: bold;
+}
+
+#messages ul em {
+	font-style: italic;
+	color: #666;
+}
+
 /**
  * Non-semantic helper classes: please define your styles before this section.
  */

index.html

@@ -79,11 +79,12 @@ <h3>Online: </h3>
 		<div class="clear"></div>
 
 		<div id="announcements"></div>
-		<div id="chat">
+		<div id="overlay">
 			<div id="nickname">
 				<form class="wrap" id="set-nickname">
-					<p>Please type in your nickname and press enter</p>
+					<p>Please type in your nickname</p>
 					<input type="text" id="name_input"/>
+					<input type="submit" />
 					<p id="nickname-err">Nickname already in use</p>
 				</form>
 			</div>
@@ -92,9 +93,10 @@ <h3>Online: </h3>
 					Connecting to socket.io server
 				</div>
 			</div>
+		</div>
+		<div id="chat">
 			<div id="messages">
-				<div id="nicknames"></div>
-				<div id="lines"></div>
+				<ul></ul>
 			</div>
 			<form id="send-message">
 				<input type="text" id="message"/>

js/script.js

@@ -51,17 +51,13 @@ var view = new GameView({
 var socket = new io.connect(null, {port: 8080});
 
 socket.on('connect', function() {
-	$('#announcements').text('Connected!');
-});
 
-socket.on('message', function(data) {
-	console.log(data);
 });
 
 // annoncements
 socket.on('announcement', function(msg) {
 	console.log(msg);
-	$('#announcements').text(msg);
+	$('#chat #messages ul').append('<li><em>'+msg+'</em></li>');
 });
 
 socket.on('users', function(users) {
@@ -71,6 +67,17 @@ socket.on('users', function(users) {
 	}
 });
 
+socket.on('message', message);
+
+function clear() {
+	$('#message').val('').focus();
+};
+
+function message(from, msg) {
+	console.log(from+' '+msg);
+	$('#chat #messages ul').append('<li><b>'+from+'</b> '+msg+'</li>');
+}
+
 $(document).ready(function(){
 
    // Add jquery 
@@ -88,16 +95,27 @@ $(document).ready(function(){
 	});
 
 	$('#set-nickname').submit(function() {
+		$('#nickname').hide();
+		$('#connecting').show();
 		socket.emit('user', $('#name_input').val(), function(set) {
 			if(!set) {
 				console.log('Nickname set');
-				$('#nickname').hide();
+				$('#overlay').fadeOut(700);
 			} else {
 				console.log('Nickname not set');
+				$('#nickname').show();
 			}
 		});
 		return false;
 	});
+
+	// TODO:  add send verification
+	$('#send-message').submit(function() {
+		message('me', $('#message').val());
+		socket.emit('message', $('#message').val());
+		clear();
+		return false;
+	});
 })
 
 

server.js

@@ -28,6 +28,10 @@ io.sockets.on('connection', function(socket) {
 		}
 	});
 
+	socket.on('message', function (msg) {
+		socket.broadcast.emit('message', socket.user, msg);
+	});
+
 	socket.on('disconnect', function () {
 		if(!socket.user) return;