hover route

4 files changed, 333 insertions, 0 deletions

diff --git a/app.js b/app.js
index 5dbb1aa..fcb5388 100644
--- a/app.js
+++ b/app.js
@@ -94,6 +94,7 @@ passport.use(new FacebookStrategy({
 
 
 app.get('/', routes.index);
+app.get('/hover', routes.hover);
 app.get('/auth/facebook', passport.authenticate('facebook'));
 app.get('/auth/facebook/callback', passport.authenticate('facebook', { successRedirect: '/',
                                                                        failureRedirect: '/' }));
diff --git a/public/javascripts/hover.js b/public/javascripts/hover.js
new file mode 100644
index 0000000..1f648e1
--- /dev/null
+++ b/public/javascripts/hover.js
@@ -0,0 +1,266 @@
+
+var cursor_image = "https://s3.amazonaws.com/luckyplop/52d5f60fde3d8562ad566838e0e09ca52725bb09.gif";
+var own_cursor;
+
+var socket = io.connect();
+
+var users = {}, scores = {}, cursors = [];
+
+var game = {
+	cursor: null,
+	init: function (){
+		game.bindSocket();
+		if (window._id) {
+			socket.emit('joined', JSON.stringify({ "id": window._id }));
+			var now = Date.now();
+			own_cursor = new Cursor({
+				firstname: "...",
+				score: 0,
+				current: 0,
+				active: true,
+				connected: now
+			}, now);
+			own_cursor.own = true;
+			own_cursor.el.addClass("own");
+			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.updateUsers(data);
+			UI.updateScores(data);
+		});
+		socket.on('mouse', function(data){
+			if (data.id != _id && data.id in users) {
+				users[data.id].cursor.el.css({ 'margin-right': -data.x, 'margin-bottom': -data.y });
+			}
+		});
+		socket.on('focus', function(data) {
+			if (data.id != _id && data.id in users && users[data.id].cursor) {
+				users[data.id].cursor.focus();
+			}
+		});
+		socket.on('blur', function(data){
+			if (data.id != _id && data.id in users && users[data.id].cursor) {
+				users[data.id].cursor.blur();
+			}
+		})
+	},
+	
+	bindEvents: function(){
+		var emit_mouse_movement = $.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 });
+		});
+		$(window).bind({
+			blur: function (e) {
+				$("#really_waiting").html("BLUR");
+				socket.emit('blur', { id: _id });
+				own_cursor.blur();
+			},
+			focus: function (e) {
+				$("#really_waiting").html("FOCUS");
+				socket.emit('focus', { id: _id });
+				own_cursor.focus();
+			},
+			mousemove: function(e){
+				emit_mouse_movement(e);
+				own_cursor.el.css({ 'left': e.pageX, 'top': e.pageY });
+			}
+		});
+		
+		$(".okfocus").bind({
+			mouseover: function(){
+				own_cursor.el.hide();
+			},
+			mouseout: function(){
+				own_cursor.el.show();
+			}
+		});
+	}
+};
+
+var UI = {
+
+	updateWait: function(now) {
+		for (var i = 0, _len = cursors.length; i < _len; i++) {
+			if (! cursors[i].afk) {
+				cursors[i].update(now);
+			}
+		}
+	},
+	
+	updateUsers: function(data) {
+		console.log(data.users);
+		var now = data.now;
+
+		var seen_ids = {};
+
+		for (var i in data.users) {
+			var user = data.users[i];
+			seen_ids[ user.id ] = true;
+			if (!( user.id in users )) {
+				users[user.id] = user;
+				if (user.id != _id && ! user.cursor) {
+					var cursor = new Cursor( user, now );
+					user.cursor = cursor;
+					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];
+				}
+
+			}
+		}
+		
+		for (var id in users) {
+			if (!( id in seen_ids )) {
+				if (users[id].cursor) {
+					users[id].cursor.remove();
+				}
+				delete users[id];
+			}
+		}
+		
+	},
+	
+	updateScores: function(data){
+		var current_scores = data.scores;
+		$("#scores").html("");
+		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.current = 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.current = base.count + howlong
+		base.time.html( timeInWords( base.current ) );
+	}
+	
+	base.save = function(){
+		base.count = base.current;
+	}
+	
+	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>");
+		base.el.addClass("cursor");
+		base.el.css('background-image', 'url(' + cursor_image + '?' + Math.floor(Math.random() * 1000) + ')');
+	
+		base.name = $("<div>");
+		base.name.addClass('name');
+		base.name.html( user.firstname );
+	
+		base.time = $("<div>");
+		base.time.addClass('time');
+		base.time.html( "0:00" );
+	
+		base.el.append(base.name);
+		base.el.append(base.time);
+		
+		$("#cursors").append(base.el);
+		cursors.push(base);
+		
+		if (user.active) {
+			base.initial += now - user.connected;
+		} else {
+			base.blur();
+		}
+
+		// console.log(now, base.start, base.initial, base.delay);
+	}
+
+	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(){
+		base.blurStart = Date.now();
+		base.afk = true;
+		base.el.addClass('idle');
+	}
+
+	base.focus = function(){
+		base.afk = false;
+		base.el.removeClass('idle').show();
+		if (base.blurStart) {
+			base.delay += (Date.now() - base.blurStart);
+		}
+	}
+	
+	base.remove = function(){
+		if (base.score) {
+			base.score.save();
+		}
+		base.el.remove();
+		cursors.splice( cursors.indexOf(base), 1 )
+	}
+
+	base.add();
+}
diff --git a/routes/index.js b/routes/index.js
index ac696e9..b8a9461 100644
--- a/routes/index.js
+++ b/routes/index.js
@@ -6,3 +6,7 @@
 exports.index = function(req, res){
   res.render('index', { title: 'Wait Site', currentUser: req.user });
 };
+
+exports.hover = function(req, res){
+  res.render('hover', { title: 'Wait Site', currentUser: req.user });
+};
diff --git a/views/hover.ejs b/views/hover.ejs
new file mode 100644
index 0000000..be7fc77
--- /dev/null
+++ b/views/hover.ejs
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title><%= title %></title>
+    <link rel='stylesheet' href='/stylesheets/style.css' />
+    <script src="/socket.io/socket.io.js"></script>
+    <script src="/javascripts/vendor/jquery-1.9.0.min.js"></script>
+    <script src="/javascripts/vendor/jquery-ba-throttle.js"></script>
+    <script src="/javascripts/util.js"></script>
+    <script src="/javascripts/hover.js"></script>
+		<% if (currentUser) { %>
+			<style>
+				body {
+		/*
+					cursor:url(https://s3.amazonaws.com/luckyplop/52d5f60fde3d8562ad566838e0e09ca52725bb09.gif), default;
+		*/
+					cursor: url(/images/transparent.png), none;
+				}
+			</style>
+			<script type="text/javascript">
+				$(function(){
+					window._id = "<%= currentUser._id %>";
+					game.init();
+				});
+			</script>
+		<% } else { %>
+			<script type="text/javascript">
+				$(function(){
+					window._id = null;
+					game.init();
+				});
+			</script>
+		<% } %>
+
+
+  </head>
+  <body>
+    <h1>WAIT SITE</h1>
+		<h2>Waiting Alone Together</h2>
+		<h2>winner gets 1000 big ones</h2>
+<!--
+		<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>
+
+		<p>currently waiting</p>
+		<ol id="users"></ol>
+-->
+		<header>
+			<h3>high scores</h3>
+			<ol id="scores"></ol>		
+			<% if (!currentUser) { %>
+				<a href="/auth/facebook"class="fbutton"></a><br>
+			<% } %>
+		</header>
+		<a href="mailto:frontdesk@okfoc.us?subject=hello OKFocus" class="okfocus"><img src="/images/okfocus_logo.png" alt="OKFocus"><br>hire us!</a>
+		<div id="cursors"></div>
+
+  </body>
+</html>