the word is ....

4 files changed, 36 insertions, 9 deletions

diff --git a/public/css/drawdrawdraw.css b/public/css/drawdrawdraw.css
index 0a33b61..ddb9061 100644
--- a/public/css/drawdrawdraw.css
+++ b/public/css/drawdrawdraw.css
@@ -47,6 +47,7 @@ body {
 }
 
 #drawing {
+	display: none;
 	position: absolute;
 	left: 400px;
 	top: 50px;
@@ -58,6 +59,7 @@ body {
 }
 
 #voting {
+	display: none;
 	position: absolute;
 	left: 400px;
 	top: 50px;
@@ -67,7 +69,11 @@ body {
 }
 
 #winning {
+	display: none;
 	position: absolute;
 	left: 400px;
 	top: 50px;
 }
+#winning li {
+	list-style-type: none;
+}
diff --git a/public/js/draw.js b/public/js/draw.js
index 8bd82df..b969c1e 100644
--- a/public/js/draw.js
+++ b/public/js/draw.js
@@ -9,8 +9,8 @@ $(function(){
 	
 	clearWorkspace();
 	
-	var offset = $(workspace).offset();
-	
+	var offset;
+
 	$(workspace).mousedown(function(e){
 		drawing = true;
 	});
@@ -30,6 +30,9 @@ $(function(){
 		}
 		$("#chat-message").focus();
 	});
+	$(window).on("drawing:start", function(){
+		offset = $(workspace).offset();
+	});
 	function clearWorkspace(){
 		workspaceCtx.fillStyle = "#fff";
 		workspaceCtx.fillRect(0,0,workspace.width,workspace.height);
diff --git a/public/js/game.js b/public/js/game.js
index a4cf74b..0b90328 100644
--- a/public/js/game.js
+++ b/public/js/game.js
@@ -71,7 +71,7 @@ var Events = {
 			img.src = data.url;
 		},
 
-		// Another player votes on an image
+		// Another player votes on an image..
 		vote: function(data){
 		}
 
@@ -116,8 +116,9 @@ UI[ State.WAITING ] = new function() {
 
 UI[ State.DRAWING ] = new function(){
 	this.load = function(data){
-		$("#current-state").html("Draw!");
+		$("#current-state").html("Draw! The word is " + data.word);
 		$("#drawing").show();
+		$(window).trigger("drawing:start")
 	},
 	this.unload = function(){
 		$("#drawing").hide();
@@ -149,13 +150,30 @@ UI[ State.VOTING ] = new function(){
 	this.click = function(){
 		voted = true;
 		var nick = $(this).data("nick");
+		console.log("VOTE >> ", nick);
 		Events.send.vote({ nick: nick });
 	}
 }
 
 UI[ State.WINNING ] = new function(){
+	this.build = function(data){
+		$("#winning").empty();
+		var scores = [];
+		for (var i in data.scores) {
+			scores.push( [data.scores[i], i] );
+		}
+		var topthree = scores.sort(function(){ a[0] - b[0] }).splice(0, 3);
+		for (var i in topthree) {
+			var score = topthree[i][0]
+			var nick = topthree[i][1]
+			var image = data.images[ nick ];
+			var $li = $("<li>");
+			$li.html("<img src='" + image.url + "'> " + image.nick );
+		}
+	}
 	this.load = function(data){
 		$("#current-state").html("Win!");
+		this.build(data);
 		$("#winning").show();
 	}
 	this.unload = function(){
diff --git a/server.js b/server.js
index 32b5849..e70efa5 100644
--- a/server.js
+++ b/server.js
@@ -83,7 +83,7 @@ function Channel() {
   this.images = {};
   this.imageCount = 0;
   this.votes = {};
-  this.voters = {};
+  this.scores = {};
   this.voteCount = 0;
 	this.word = "";
 	this.timer = null;
@@ -110,7 +110,7 @@ Channel.prototype.getState = function(){
 		word: this.word,
 		players: this.players,
 		images: this.images,
-		votes: this.votes,
+		scores: this.scores,
 		voteCount: this.voteCount,
 		imageCount: this.imageCount,
 	};
@@ -156,8 +156,8 @@ Channel.prototype.pushImage = function(image){
 Channel.prototype.addVote = function(data, user){
 	if (data.nick in this.images && not( user.nick in this.voters )) {
 		this.voteCount++;
-		this.voters[ user.nick ] = true;
-		this.votes[ data.nick ] += 1;
+		this.votes[ user.nick ] = true;
+		this.scores[ data.nick ] += 1;
 		if (this.voteCount == this.playerCount) this.startWinning();
 	}
 }
@@ -166,7 +166,7 @@ Channel.prototype.reset = function(){
 	this.images = {};
 	this.imageCount = 0;
 	this.votes = {};
-	this.voters = {};
+	this.scores = {};
 	this.voteCount = 0;
 }
 Channel.prototype.startDrawing = function(){