add roster.js for handling da userlist

4 files changed, 50 insertions, 10 deletions

diff --git a/public/js/auth.js b/public/js/auth.js
index 4e301e8..e2ad58d 100644
--- a/public/js/auth.js
+++ b/public/js/auth.js
@@ -3,6 +3,7 @@ var Auth = {
 		Auth.bind();
 		if (Auth.loggedIn()) {
 			$("#login").hide();
+			Chat.join();
 		}
 		else {
 			$("#login").show();
@@ -32,6 +33,7 @@ var Auth = {
 		localStorage['nick'] = Game.nick;
 		$("#username").val("");
 		$("#login").hide();
+		Chat.join();
 	},
 	logout: function(){
 		$("#login").show();
diff --git a/public/js/chat.js b/public/js/chat.js
index 752ed67..e652f91 100644
--- a/public/js/chat.js
+++ b/public/js/chat.js
@@ -25,6 +25,10 @@ var Chat = {
 		}
 	},
 	
+	join: function () {
+		Events.send.join({ nick: Game.nick });
+	},
+	
 	send: function () {
 		var body = $("#chat-message").val();
 		$("#chat-message").val("");
diff --git a/public/js/game.js b/public/js/game.js
index 8aed496..78a4728 100644
--- a/public/js/game.js
+++ b/public/js/game.js
@@ -34,25 +34,28 @@ var Events = {
 		// Player connects to the game
 		welcome: function(data){
 			for (var i in data.messages) {
-				Chat.add(data.messages[i]);
+				Chat.add( data.messages[i] );
+			}
+			for (var i in data.players) {
+				Roster.add( data.players[i] );
 			}
 		},
 		
 		// Another player joins the room
 		join: function(data){
-			Events.receive.state(data);
+			Roster.add( data );
 		},
 		
 		// Another player leaves the room
 		part: function(data){
-			Events.receive.state(data);
+			Roster.remove( data );
 		},
 		
 		// Game state changes
 		state: function(data){
 			if (Game.state == data.state) return;
 			UI[ States.current ].unload();
-			UI[ data.state ].load();
+			UI[ data.state ].load(data);
 			Game.state = data.state;
 		},
 		
@@ -65,7 +68,9 @@ var Events = {
 		image: function(data) {
 			console.log(data);
 			if (data.nick == Game.nick) return;
-			$("#image").attr("src", data.url).show();
+			// preload the image
+			var img = new Image();
+			img.src = data.url;
 		},
 
 		// Another player votes on an image
@@ -76,6 +81,11 @@ var Events = {
 
 	send: {
 
+		// Joining the game
+		join: function(data) {
+			socket.emit('event-join', data);
+		},
+
 		// Sending a message
 		message: function(msg) {
 			socket.emit('event-message', msg);
@@ -94,35 +104,48 @@ var Events = {
 // Anything a load method does should be undone by the unload method.. for now.
 var UI = {};
 UI[ State.WAITING ] = {
-	load: function(){
+	load: function(data){
+		$("#current-state").html("Waiting");
+		$("#drawing").show();
 	},
 	unload: function(){
+		$("#drawing").hide();
 	}
 }
 
 UI[ State.DRAWING ] = {
-	load: function(){
+	load: function(data){
+		$("#current-state").html("Draw!");
+		$("#drawing").show();
 	},
 	unload: function(){
+		$("#drawing").hide();
 	}
 }
 
 UI[ State.VOTING ] = {
-	load: function(){
+	load: function(data){
+		$("#current-state").html("Vote!");
+		$("#voting").show();
 	},
 	unload: function(){
+		$("#voting").hide();
 	}
 }
 
 UI[ State.WINNING ] = {
-	load: function(){
+	load: function(data){
+		$("#current-state").html("Win!");
+		$("#winning").show();
 	},
 	unload: function(){
+		$("#winning").hide();
 	}
 }
 
 UI[ State.RESET ] = {
-	load: function(){
+	load: function(data){
+		$("#current-state").html("whoahao RESET!");
 	},
 	unload: function(){
 	}
diff --git a/public/js/roster.js b/public/js/roster.js
new file mode 100644
index 0000000..c4cb690
--- /dev/null
+++ b/public/js/roster.js
@@ -0,0 +1,11 @@
+var Roster = {
+	add: function(user) {
+		var $li = $("<li>");
+		$li.attr("id", user.id);
+		$li.html(user.nick);
+		$("#roster").append( $li );
+	},
+	remove: function(user) {
+		$("#" + user.id).remove();
+	}
+};