From c7fee0fe5b3d826e0323d3232fe3a627c15cd6a1 Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Fri, 18 Jan 2013 17:55:07 -0500
Subject: hundredth-second timing

---
 app.js                     |  9 +++++---
 public/javascripts/util.js | 18 +++++++++++++++-
 views/index.ejs            | 51 +++++++++++++++++++++++++++++++---------------
 3 files changed, 58 insertions(+), 20 deletions(-)

diff --git a/app.js b/app.js
index 3c69dc1..8b037b6 100644
--- a/app.js
+++ b/app.js
@@ -128,7 +128,7 @@ var userSchema = mongoose.Schema({
 
 var User = mongoose.model( 'User', userSchema );
 function updateTime ( user, now, connected ) {
-	var time = ( now - connected ) / 1000;
+	var time = ( now - connected );
 	var newCount = user.count + time;
 	user.count = newCount;
 	user.save(function(err) {
@@ -151,7 +151,7 @@ io.sockets.on('connection', function (socket) {
 	getHighScores(function(err, users) {
 		scores = [];
 		for (var i = 0; i < users.length; i++) {
-			scores.unshift({
+			scores.push({
 				firstname: users[i].firstname,
 				lastname: users[i].lastname,
 				count: users[i].count
@@ -184,7 +184,8 @@ io.sockets.on('connection', function (socket) {
 				lastname: user.lastname,
 				image: user.image,
 				count: user.count,
-				connected: now
+				connected: now,
+				active: true
 			};
 
 			io.sockets.emit('count', {
@@ -203,6 +204,7 @@ io.sockets.on('connection', function (socket) {
 		var now = Date.now();
 		updateTime(socket.user, now, socket.connected);
 		socket.connected = now;
+		users[socket.user.id].active = false;
 		io.sockets.emit('blur', data);
 	});
 	
@@ -210,6 +212,7 @@ io.sockets.on('connection', function (socket) {
 		if (!socket.user) return; 
 		var now = Date.now();
 		socket.connected = now;
+		users[socket.user.id].active = true;
 		io.sockets.emit('focus', data);
 	});
 
diff --git a/public/javascripts/util.js b/public/javascripts/util.js
index 9c2fff4..df29b7e 100644
--- a/public/javascripts/util.js
+++ b/public/javascripts/util.js
@@ -1,8 +1,19 @@
+window.requestAnimFrame = (function(){
+    return  window.requestAnimationFrame       || 
+            window.webkitRequestAnimationFrame || 
+            window.mozRequestAnimationFrame    || 
+            window.oRequestAnimationFrame      || 
+            window.msRequestAnimationFrame     || 
+            function( callback ){
+              window.setTimeout(callback, 1000 / 60);
+            };
+})();
 function pluralize (n, s) {
 	return n + " " + (n == 1 ? s : s + "s");
 }
 function toTime (time) {
 	var str = [];
+	time /= 1000;
 	if (time > 86400) {
 		str.push( pluralize( Math.floor(time / 86400), "day" ) );
 	}
@@ -12,6 +23,11 @@ function toTime (time) {
 	if (time > 60) {
 		str.push( pluralize( Math.floor(time / 60) % 60, "minute" ) );
 	}
-	str.push( pluralize( Math.floor(10 * (time % 60)) / 10, "second" ) );
+	var seconds = Math.floor(100 * (time % 60)) / 100;
+	seconds = (seconds + "").split(".");
+	if (seconds.length == 1) seconds[1] = "00";
+// 	if (seconds[0].length == 1) seconds[0] = "0" + seconds[0];
+	if (seconds[1].length == 1) seconds[1] = seconds[1] + "0";
+	str.push( pluralize( seconds[0] + "." + seconds[1], "second" ) );
 	return str.join(", ");
 }
\ No newline at end of file
diff --git a/views/index.ejs b/views/index.ejs
index 2f616ed..7e9054c 100644
--- a/views/index.ejs
+++ b/views/index.ejs
@@ -8,6 +8,8 @@
     <script src="/javascripts/jquery-ba-throttle.js"></script>
     <script src="/javascripts/util.js"></script>
     <script>
+
+
 			var cursor = "https://s3.amazonaws.com/luckyplop/52d5f60fde3d8562ad566838e0e09ca52725bb09.gif";
 
 			var socket = io.connect();
@@ -19,18 +21,23 @@
 				_id = null;
 			<% } %>
 			
-			var start = 0, now = 0;
+			var start = 0;
 			var users = {};
 	
-			function updateWait(data) {
+			function updateWait(now) {
+				if (afk) return;
 				if (start == 0) {
-					start = data.now;
+					start = now;
 				}
-				now = data.now;
-				var howlong = Math.floor( (now - start) / 1000 );
-				$("#waiting").html( howlong == 1 ? howlong + " second" : howlong + " seconds" );
+				var howlong =  Math.floor( (now - start) ) - delay;
+				$("#waiting").html( toTime( howlong ) );
 			}
-	
+			
+			(function loop (){
+				requestAnimFrame(loop);
+				updateWait(Date.now());
+			})();
+			
 			function updateUsers(data) {
 				console.log(data.users);
 				$("#count").html(Object.keys(data.users).length);
@@ -60,12 +67,12 @@
 			}
 			
 			socket.on('count', function(data){
-				updateWait(data);
+				// updateWait(data);
 				updateUsers(data);
 			});
 				
 			socket.on('update', function(data){
-				updateWait(data);
+				// updateWait(data);
 			});
 			
 			socket.on('mouse', function(data){
@@ -84,28 +91,39 @@
 					$("#scores").append($li);
 				}
 			});
-	
+
 			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');
 				}
 			})
 			
-	
+			var afk = false, blurred = 0, blurTime = 0, delay = 0;
 			if (_id) {
-				window.onfocus = function () {
-					$("#really_waiting").html("FOCUS");
-					socket.emit('focus', { id: _id });
-				}
+
 				window.onblur = function () {
 					$("#really_waiting").html("BLUR");
 					socket.emit('blur', { id: _id });
+					blurred = Date.now();
+					afk = true;
+				}
+				
+				window.onfocus = function () {
+					$("#really_waiting").html("FOCUS");
+					socket.emit('focus', { id: _id });
+					if (blurred) {
+						afk = false;
+						delay = delay + (Date.now() - blurred);
+						$("#reset").html( "You left the page for " + toTime(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 );
@@ -158,7 +176,8 @@
       <a href="/auth/facebook">Login with Facebook</a>
 		<% } %>
 
-		<div>You've been waiting for <span id="waiting">0 seconds</span></div>
+		<div>You've been waiting for <span id="waiting">0 seconds</span><br>
+		<span id="reset"></span></div>
 		<div><span id="count">0</span> ppl online now!!</div>
 		
 		<div id="really_waiting">FOCUS</div>
-- 
cgit v1.2.3-70-g09d2