2 files changed, 55 insertions, 9 deletions
diff --git a/app.js b/app.js
index 3610b08..c206271 100644
--- a/app.js
+++ b/app.js
@@ -132,7 +132,7 @@ function updateTime ( user, now, connected ) {
 	var newCount = user.count + time;
 	user.count = newCount;
 	user.save(function(err) {
-    	if(err) { throw err; }
+    if(err) { throw err; }
 	});
 }
 
@@ -154,7 +154,8 @@ io.sockets.on('connection', function (socket) {
 			scores.push({
 				firstname: users[i].firstname,
 				lastname: users[i].lastname,
-				count: users[i].count
+				count: users[i].count,
+				id: users[i].id
 			});
 		}
 		socket.emit('scores', {
diff --git a/public/javascripts/game.js b/public/javascripts/game.js
index 90e3a67..3839a40 100644
--- a/public/javascripts/game.js
+++ b/public/javascripts/game.js
@@ -4,7 +4,7 @@ var own_cursor;
 
 var socket = io.connect();
 
-var users = {}, cursors = [];
+var users = {}, scores = {}, cursors = [];
 
 var game = {
 	cursor: null,
@@ -123,33 +123,75 @@ var UI = {
 					user.cursor.el.css({ 'margin-right': -user.x, 'margin-bottom': -user.y });
 				}
 				else if (user.id == _id && own_cursor) {
+					user.cursor = own_cursor;
 					own_cursor.name.html( user.firstname );
 				}
+				
+				if (user.id in scores) {
+					user.cursor.score = scores[user.id];
+				}
+
 			}
 		}
 	},
 	
 	updateScores: function(data){
-		var scores = data.scores;
+		var current_scores = data.scores;
 		$("#scores").html("");
-		for (var i = 0; i < scores.length; i++) {
-			var s = scores[i];
-			var $li = $("<li>");
-			$li.html("<b>" + s.firstname + " " + s.lastname + "</b> &mdash; " + timeInWords(s.count));
-			$("#scores").append($li);
+		for (var i = 0; i < current_scores.length; i++) {
+			var score = new Score( current_scores[i] );
+
+			if (score.id in users) {
+				users[score.id].cursor.score = score;
+			}
+			
+			scores[score.id] = score;
 		}
 	}
 }
 
+function Score ( user ) {
+	var base = this;
+	base.add = function(){
+		base.el = $("<li>");
+		
+		base.id = user.id;
+		base.count = user.count;
+
+		base.name = $("<span>");
+		base.name.addClass("name");
+		base.name.html(user.firstname + " " + user.lastname);
+
+		base.time = $("<span>");
+		base.time.addClass("time");
+		base.time.html( timeInWords(user.count) );
+		
+		base.el.append(base.name);
+		base.el.append(" &mdash; ");
+		base.el.append(base.time);
+		
+		$("#scores").append(base.el);
+	}
+	
+	base.update = function(howlong){
+		base.time.html( timeInWords( base.count + howlong ) );
+	}
+	
+	base.add();
+
+}
+
 function Cursor ( user, now ) {
 	var base = this;
 
+	base.id = user.id;
 	base.start = Date.now();
 	base.initial = user.current || 0;
 	base.delay = 0;
 	base.blurStart = 0;
 	base.afk = false;
 	base.own = false;
+	base.score = null;
 
 	base.add = function(){
 		base.el = $("<div>");
@@ -182,6 +224,9 @@ function Cursor ( user, now ) {
 	base.update = function(now){
 		var howlong = Math.floor( (now - base.start) ) + base.initial - base.delay;
 		base.time.html( timeInSecs( howlong ) );
+		if (base.score) {
+			base.score.update( howlong );
+		}
 	}
 
 	base.blur = function(){