From 386b2a374b90638affc956b88a40c276207aa265 Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Thu, 24 Jan 2013 13:56:06 -0500
Subject: refactor

---
 views/index.ejs | 600 +++-----------------------------------------------------
 1 file changed, 27 insertions(+), 573 deletions(-)

(limited to 'views/index.ejs')

diff --git a/views/index.ejs b/views/index.ejs
index 3f2a7b5..aa959fa 100644
--- a/views/index.ejs
+++ b/views/index.ejs
@@ -7,586 +7,40 @@
     <script src="/javascripts/jquery-1.9.0.min.js"></script>
     <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();
-			
-			<% if (currentUser) { %>
-				_id = "<%= currentUser._id %>";
-				socket.emit('joined', JSON.stringify({ "id": _id }));
-			<% } else { %>
-				_id = null;
-			<% } %>
-			
-			var start = 0;
-			var afk = false, blurTime = 0, delay = 0;
-			var users = {};
-	
-			function updateWait(now) {
-				if (! afk) {
-					if (start == 0) {
-						start = now;
-					}
-					var howlong =  Math.floor( (now - start) ) - delay;
-					$("#waiting").html( toTime( howlong ) );
-				} else {
-					if (blurTime) {
-						$("#reset").html( "You left the page for " + toTime(now - blurTime) + ", counting it against your score.." );
-					}
-				}
-			}
-			
-			(function loop (){
-				requestAnimFrame(loop);
-				updateWait(Date.now());
-			})();
-			
-			function updateUsers(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) {
-					console.log(" . . . " + i)
-					if (!( i in users )) {
-						users[i] = data.users[i];
-					}
-					if (i != _id && ! users[i].cursor) {
-						console.log("new cursor: " + i);
-						var $cursor = $("<div>");
-						$cursor.addClass("cursor");
-						$cursor.css('background-image', 'url(' + cursor + '?' + Math.floor(Math.random() * 1000) + ')');
-						$cursor.html("<span>" + users[i].firstname + "</span>")
-						$("#cursors").append($cursor);
-						users[i].cursor = $cursor;
-					}
-				}
-			}
-			
-			socket.on('count', function(data){
-				// updateWait(data);
-				updateUsers(data);
-			});
-				
-			socket.on('update', function(data){
-				// updateWait(data);
-			});
-			
-			socket.on('mouse', function(data){
-				if (data.id != _id) {
-					users[data.id].cursor.css({ 'margin-right': -data.x, 'margin-bottom': -data.y });
-				}
-			});
-			
-			socket.on('scores', 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; " + toTime(s.count));
-					$("#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');
-				}
-			})
-			
-			if (_id) {
-
-				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 " + 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 );
-						socket.emit('mouse', { x: x, y: y, id: _id });
+    <script src="/javascripts/game.js"></script>
+
+		<% if (currentUser) { %>
+			<style>
+				body {
+		/*
+					cursor:url(https://s3.amazonaws.com/luckyplop/52d5f60fde3d8562ad566838e0e09ca52725bb09.gif), default;
+		*/
+					cursor: none;
+				}
+			</style>
+			<script type="text/javascript">
+				$(function(){
+					window._id = "<%= currentUser._id %>";
+					socket.emit('joined', JSON.stringify({ "id": window._id }));
+					init();
 				});
-			}
-			
-    </script>
-    <style type="text/css">
-
-
-		@import url(http://fonts.googleapis.com/css?family=Julius+Sans+One);
-
-
-		@-webkit-keyframes a {
-			0% {
-				opacity: 0;
-				-o-transform: translate3d(0, -60px, 0);
-				-ms-transform: translate3d(0, -60px, 0);
-				-moz-transform: translate3d(0, -60px, 0);
-				-webkit-transform: translate3d(0, -60px, 0);
-				transform: translate3d(0, -60px, 0);
-				color:transparent;
-				
-			}
-
-			30% {
-				opacity: 1;
-				-o-transform: translate3d(0, 5px, 0);
-				-ms-transform: translate3d(0, 5px, 0);
-				-moz-transform: translate3d(0, 5px, 0);
-				-webkit-transform: translate3d(0, 5px, 0);
-				transform: translate3d(0, 5px, 0);
-				text-shadow:0 0 30px #888;
-				color:transparent;
-			}
-
-			60% {
-				-o-transform: translate3d(0, -2px, 0);
-				-ms-transform: translate3d(0, -2px, 0);
-				-moz-transform: translate3d(0, -2px, 0);
-				-webkit-transform: translate3d(0, -2px, 0);
-				transform: translate3d(0, -2px, 0);
-				
-				
-			}
-
-			100% {
-				-o-transform: translate3d(0, 0px, 0);
-				-ms-transform: translate3d(0, 0px, 0);
-				-moz-transform: translate3d(0, 0px, 0);
-				-webkit-transform: translate3d(0, 0px, 0);
-				transform: translate3d(0, 0px, 0);
-			}
-
-		}
-		@-webkit-keyframes b {
-			0% {
-				opacity: 0;
-				-o-transform: translate3d(0, -40px, 0);
-				-ms-transform: translate3d(0, -40px, 0);
-				-moz-transform: translate3d(0, -40px, 0);
-				-webkit-transform: translate3d(0, -40px, 0);
-				transform: translate3d(0, -40px, 0);
-				color:transparent;
-				
-			}
-
-			30% {
-				opacity: 1;
-				-o-transform: translate3d(0, 5px, 0);
-				-ms-transform: translate3d(0, 5px, 0);
-				-moz-transform: translate3d(0, 5px, 0);
-				-webkit-transform: translate3d(0, 5px, 0);
-				transform: translate3d(0, 5px, 0);
-				text-shadow:0 0 30px #888;
-				color:transparent;
-			}
-			
-			60%{
-				color:transparent;
-			}
-
-			100% {
-				opacity: 1;
-				-o-transform: translate3d(0, 0px, 0);
-				-ms-transform: translate3d(0, 0px, 0);
-				-moz-transform: translate3d(0, 0px, 0);
-				-webkit-transform: translate3d(0, 0px, 0);
-				transform: translate3d(0, 0px, 0);
-				
-			}
-
-		}
-
-		@-webkit-keyframes c {
-			0% {
-				opacity: 0;
-				-o-transform: translate3d(0, 40px, 0);
-				-ms-transform: translate3d(0, 40px, 0);
-				-moz-transform: translate3d(0, 40px, 0);
-				-webkit-transform: translate3d(0, 40px, 0);
-				transform: translate3d(0, 40px, 0);
-			}
-
-			30% {
-				opacity: 1;
-				-o-transform: translate3d(0, 45px, 0);
-				-ms-transform: translate3d(0, 45px, 0);
-				-moz-transform: translate3d(0, 45px, 0);
-				-webkit-transform: translate3d(0, 45px, 0);
-				transform: translate3d(0, 45px, 0);
-			}
-
-			100% {
-				opacity: 1;
-				-o-transform: translate3d(0, 0px, 0);
-				-ms-transform: translate3d(0, 0px, 0);
-				-moz-transform: translate3d(0, 0px, 0);
-				-webkit-transform: translate3d(0, 0px, 0);
-				transform: translate3d(0, 0px, 0);
-			}
-
-		}
-
-
-		@-moz-keyframes a {
-			0% {
-				opacity: 0;
-				-o-transform: translate3d(0, -60px, 0);
-				-ms-transform: translate3d(0, -60px, 0);
-				-moz-transform: translate3d(0, -60px, 0);
-				-webkit-transform: translate3d(0, -60px, 0);
-				transform: translate3d(0, -60px, 0);
-			}
-
-			30% {
-				opacity: 1;
-				-o-transform: translate3d(0, 5px, 0);
-				-ms-transform: translate3d(0, 5px, 0);
-				-moz-transform: translate3d(0, 5px, 0);
-				-webkit-transform: translate3d(0, 5px, 0);
-				transform: translate3d(0, 5px, 0);
-			}
-
-			60% {
-				-o-transform: translate3d(0, -2px, 0);
-				-ms-transform: translate3d(0, -2px, 0);
-				-moz-transform: translate3d(0, -2px, 0);
-				-webkit-transform: translate3d(0, -2px, 0);
-				transform: translate3d(0, -2px, 0);
-			}
-
-			100% {
-				-o-transform: translate3d(0, 0px, 0);
-				-ms-transform: translate3d(0, 0px, 0);
-				-moz-transform: translate3d(0, 0px, 0);
-				-webkit-transform: translate3d(0, 0px, 0);
-				transform: translate3d(0, 0px, 0);
-			}
-
-		}
-		@-moz-keyframes b {
-			0% {
-				opacity: 0;
-				-o-transform: translate3d(0, -40px, 0);
-				-ms-transform: translate3d(0, -40px, 0);
-				-moz-transform: translate3d(0, -40px, 0);
-				-webkit-transform: translate3d(0, -40px, 0);
-				transform: translate3d(0, -40px, 0);
-			}
-
-			30% {
-				opacity: 1;
-				-o-transform: translate3d(0, 5px, 0);
-				-ms-transform: translate3d(0, 5px, 0);
-				-moz-transform: translate3d(0, 5px, 0);
-				-webkit-transform: translate3d(0, 5px, 0);
-				transform: translate3d(0, 5px, 0);
-			}
-
-			100% {
-				opacity: 1;
-				-o-transform: translate3d(0, 0px, 0);
-				-ms-transform: translate3d(0, 0px, 0);
-				-moz-transform: translate3d(0, 0px, 0);
-				-webkit-transform: translate3d(0, 0px, 0);
-				transform: translate3d(0, 0px, 0);
-			}
-
-		}
-
-		@-webkit-keyframes c {
-			0% {
-				opacity: 0;
-
-			}
-			
-			60% {
-				opacity:0.2;
-			}
-
-			90% {
-				opacity: 1;
-
-			}
-
-		}
-		
-		@-webkit-keyframes d {
-			40% {
-				opacity: 0.4;
-
-			}
-
-			60% {
-				color: #999;
-
-			}
-
-		}
-				ol li:nth-child(1){
-					-webkit-animation-name: b;
-					-webkit-animation-duration: 2.2s;
-					-webkit-animation-iteration-count: 1;
-					-webkit-animation-delay: 0s;
-				}
-				ol li:nth-child(2){
-					-webkit-animation-name: b;
-					-webkit-animation-duration: 2.4s;
-					-webkit-animation-iteration-count: 1;
-					-webkit-animation-delay: 0s;
-				}
-				ol li:nth-child(3){
-					-webkit-animation-name: b;
-					-webkit-animation-duration: 2.6s;
-					-webkit-animation-iteration-count: 1;
-					-webkit-animation-delay: 0s;
-				}
-				ol li:nth-child(4){
-					-webkit-animation-name: b;
-					-webkit-animation-duration: 2.8s;
-					-webkit-animation-iteration-count: 1;
-					-webkit-animation-delay: 0s;
-				}
-				ol li:nth-child(5){
-					-webkit-animation-name: b;
-					-webkit-animation-duration: 3s;
-					-webkit-animation-iteration-count: 1;
-					-webkit-animation-delay: 0s;
-				}
-				ol li:nth-child(6){
-					-webkit-animation-name: b;
-					-webkit-animation-duration: 3.2s;
-					-webkit-animation-iteration-count: 1;
-					-webkit-animation-delay: 0s;
-				}
-				ol li:nth-child(7){
-					-webkit-animation-name: b;
-					-webkit-animation-duration: 3.4s;
-					-webkit-animation-iteration-count: 1;
-					-webkit-animation-delay: 0s;
-				}
-				ol li:nth-child(8){
-					-webkit-animation-name: b;
-					-webkit-animation-duration: 3.6s;
-					-webkit-animation-iteration-count: 1;
-					-webkit-animation-delay: 0s;
-				}
-				ol li:nth-child(9){
-					-webkit-animation-name: b;
-					-webkit-animation-duration: 3.8s;
-					-webkit-animation-iteration-count: 1;
-					-webkit-animation-delay: 0s;
-				}
-				ol li:nth-child(10){
-					-webkit-animation-name: b;
-					-webkit-animation-duration: 4s;
-					-webkit-animation-iteration-count: 1;
-					-webkit-animation-delay: 0s;
-				}
-
-
-
-		h1 {
-			font-family: 'Julius Sans One', sans-serif;
-			-webkit-animation-name: a;
-			-webkit-animation-duration: 2s;
-			-webkit-animation-iteration-count: 1;
-			-webkit-animation-delay: 0s;
-			-moz-animation-name: a;
-			-moz-animation-duration: 2s;
-			-moz-animation-iteration-count: 1;
-			-moz-animation-delay: 0s;
-			font-weight:500;
-			font-size:50px;
-			margin:20px 0 0 0;
-			letter-spacing: 12px;
-
-		}
-
-		h2 {
-			font-family: 'Julius Sans One', sans-serif;
-			-webkit-animation-name: b;
-			-webkit-animation-duration: 2s;
-			-webkit-animation-iteration-count: 1;
-			-webkit-animation-delay: 0s;
-			-moz-animation-name: b;
-			-moz-animation-duration: 2s;
-			-moz-animation-iteration-count: 1;
-			-moz-animation-delay: 0s;
-			font-weight:500;
-			margin:7px 0 0 0;
-			letter-spacing: 8px;
-			font-size:18px;
-		}
-			
-			h3 {
-				font-family: 'Julius Sans One', sans-serif;
-				-webkit-animation-name: b;
-				-webkit-animation-duration: 2s;
-				-webkit-animation-iteration-count: 1;
-				-webkit-animation-delay: 0s;
-				-moz-animation-name: b;
-				-moz-animation-duration: 2s;
-				-moz-animation-iteration-count: 1;
-				-moz-animation-delay: 0s;
-				font-weight: 500;
-				margin: 0;
-				font-size: 33px;
-				border-bottom: 1px solid;
-				padding: 7px 0;
-				margin-bottom: 10px;
-				letter-spacing: 12px;
-				display: inline-block;
-				
-			}
-
-    	html,body {
-    		width: 100%;
-    		height: 100%;
-    		margin: 0;
-    		padding: 0;
-				overflow: hidden;
-				text-align: center;
-				background-attachment: fixed;
-				background-size: cover;
-    	}
-			header {
-				position:relative;
-				z-index:2;
-
-			}
-    	.cursor {
-    		position: absolute;
-    		bottom: 50%;
-    		right: 50%;
-    		width: 32px;
-    		height: 32px;
-    		margin-bottom: -9999px;
-    		margin-right: -9999px;
-				z-index:0;
-				-webkit-transform: translateZ(0);
-				-webkit-touch-callout: none;
-				-webkit-user-select: none;
-				-khtml-user-select: none;
-				-moz-user-select: none;
-				-ms-user-select: none;
-				user-select: none;
-				-webkit-transition: all .1s ease-out;
-				-moz-transition: all .1s ease-out;
-				-ms-transition: all .1s ease-out;
-				-o-transition: all .1s ease-out;
-				transition: all .1s ease-out;
-    	}
-			.cursor.idle {
-				background-image: url(/images/cursor-gray.png) !important;
-				text-shadow: 0 0 2px #333;
-				color: transparent;
-				opacity:0.8;
-			}
-			
-			.cursor span {
-				position: relative;
-				left: 25px;
-				top: 0;
-				font-size: 12px;
-				color: #333;
-				font-family: 'Julius Sans One', sans-serif;
-				z-index:2;
-			}
-			.cursor span:after {
-				content: "15:33";
-				margin-left: 25px;
-				color: black;
-				display: block;
-				float: left;
-			}
-			.cursor.idle span {
-				color: transparent;
-			}
-			.cursor.idle span:after {
-				color: transparent;
-			}
+			</script>
+		<% } else { %>
+			<script type="text/javascript">
+				$(function(){
+					window._id = null;
+					init();
+				});
+			</script>
+		<% } %>
 
-			ol{
-				list-style:none;
-				padding:0;
-				
-				margin:0;
 
-			}
-	
-			.fbutton {
-					background: url('https://s3.amazonaws.com/luckyplop/cf8dc6647202296b7c84c906dbf43c6d46e04958.png') no-repeat -2px -53px;
-					display:inline-block;
-					width: 223px;
-					height: 34px;
-					margin:10px 0;
-					-webkit-animation-name: c;
-					-webkit-animation-duration: 4s;
-					-webkit-animation-iteration-count: 1;
-					opacity:1;
-					-webkit-animation-delay: 0s;
-			}
-			
-			.fbutton:hover {
-					background-position: -2px -97px;					
-			}
-			
-			.fbutton:focus {
-					background: url(https://s3.amazonaws.com/luckyplop/cf8dc6647202296b7c84c906dbf43c6d46e04958.png) no-repeat -2px -97px;
-			}
-			.okfocus {
-				text-align:center;
-				position:fixed;
-				bottom:10px;
-				left:0;
-				width:100%;
-				
-			}
-			.okfocus img {
-				width:100px;
-			}
-    </style>
   </head>
   <body>
     <h1>WAIT SITE</h1>
 		<h2>Waiting Alone Together</h2>
-
-   <% if (currentUser) { %>
-	<style>
-	body{
-		cursor:url(https://s3.amazonaws.com/luckyplop/52d5f60fde3d8562ad566838e0e09ca52725bb09.gif), default;
-	}
-	</style>
-	<% } %>
-	<!--	<div>You've been waiting for <span id="waiting">0 seconds</span><br>
+<!--
+		<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>
 		
-- 
cgit v1.2.3-70-g09d2