1 files changed, 134 insertions, 0 deletions
diff --git a/public/javascripts/game.js b/public/javascripts/game.js
new file mode 100644
index 0000000..be86b86
--- /dev/null
+++ b/public/javascripts/game.js
@@ -0,0 +1,134 @@
+
+var cursor = "https://s3.amazonaws.com/luckyplop/52d5f60fde3d8562ad566838e0e09ca52725bb09.gif";
+
+var socket = io.connect();
+
+var start = 0;
+var afk = false, blurTime = 0, delay = 0;
+var users = {};
+
+var game = {
+	cursor: null,
+	init: function (){
+		game.bindSocket();
+		if (window._id) {
+			game.bindEvents();
+		}
+		game.loop();
+	},
+	
+	loop: function (){
+		requestAnimFrame(game.loop);
+		ui.updateWait(Date.now());
+	},
+	
+	bindSocket: function(){
+		socket.on('count', function(data){
+			UI.updateUsers(data);
+		});
+		socket.on('scores', function(data){
+			UI.updateScores(data);
+		});
+		socket.on('mouse', function(data){
+			if (data.id != _id) {
+				users[data.id].cursor.el.css({ 'margin-right': -data.x, 'margin-bottom': -data.y });
+			}
+		});
+		socket.on('focus', function(data) {
+			if (data.id != _id && _id in users && users[data.id].cursor) {
+				users[data.id].cursor.removeClass('idle');
+			}
+		});
+		socket.on('blur', function(data){
+			if (data.id != _id && _id in users && users[data.id].cursor) {
+				users[data.id].cursor.addClass('idle');
+			}
+		})
+	},
+	
+	bindEvents: function(){
+		game.cursor = new Cursor ({
+			firstname: "you",
+		});
+		window.onblur = function () {
+			$("#really_waiting").html("BLUR");
+			socket.emit('blur', { id: _id });
+			blurTime = Date.now();
+			afk = true;
+		}
+		window.onfocus = function () {
+			$("#really_waiting").html("FOCUS");
+			socket.emit('focus', { id: _id });
+			afk = false;
+			if (blurTime) {
+				delay += (Date.now() - blurTime);
+				$("#reset").html( "You left the page for " + timeInWords(delay) + ", counting it against your score.." );
+			}
+		}
+		window.onmousemove = $.throttle(50, function (e) {
+				var y = Math.floor( e.pageY - window.innerHeight / 2 );
+				var x = Math.floor( e.pageX - window.innerWidth / 2 );
+				socket.emit('mouse', { x: x, y: y, id: _id });
+				own_cursor.el.css({ 'margin-right': -data.x, 'margin-bottom': -data.y });
+		});
+	}
+};
+
+var UI = {
+
+	updateWait: function(now) {
+		if (! afk) {
+			if (start == 0) {
+				start = now;
+			}
+			var howlong =  Math.floor( (now - start) ) - delay;
+			$("#waiting").html( timeInWords( howlong ) );
+		} else {
+			if (blurTime) {
+				$("#reset").html( "You left the page for " + timeInWords(now - blurTime) + ", counting it against your score.." );
+			}
+		}
+	}
+	
+	updateUsers: function(data) {
+		console.log(data.users);
+		$("#count").html(Object.keys(data.users).length);
+		for (var i in users) {
+			if (!( i in data.users )) {
+				if (users[i].cursor) {
+					$( users[i].cursor ).remove();
+				}
+				delete users[i];
+			}
+		}
+		for (var i in data.users) {
+			if (!( i in users )) {
+				users[i] = data.users[i];
+			}
+			if (i != _id && ! users[i].cursor) {
+				var cursor = new Cursor( users[i] );
+				users[i].cursor = cursor;
+				cursors.push(cursor);
+			}			
+		}
+	},
+	
+	updateScores: function(data){
+		var 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);
+		}
+	}
+}
+
+function Cursor ( user ) {
+	this.el = $("<div>");
+	this.el.addClass("cursor");
+	this.el.css('background-image', 'url(' + cursor_image + '?' + Math.floor(Math.random() * 1000) + ')');
+	this.el.html("<span>" + user.firstname + "</span>")
+	$("#cursors").append(this.el);
+}