blur/focus stuff

4 files changed, 109 insertions, 36 deletions

diff --git a/app.js b/app.js
index ea42ae8..3c69dc1 100644
--- a/app.js
+++ b/app.js
@@ -126,7 +126,15 @@ var userSchema = mongoose.Schema({
   count: { type: Number, default: 0 }
 });
 
-var User = mongoose.model('User', userSchema);
+var User = mongoose.model( 'User', userSchema );
+function updateTime ( user, now, connected ) {
+	var time = ( now - connected ) / 1000;
+	var newCount = user.count + time;
+	user.count = newCount;
+	user.save(function(err) {
+    	if(err) { throw err; }
+	});
+}
 
 function getHighScores (callback) {
   return User.find({}).sort({ score: 'desc' }).limit(10).exec(callback);
@@ -149,7 +157,10 @@ io.sockets.on('connection', function (socket) {
 				count: users[i].count
 			});
 		}
-		socket.emit('scores', scores)
+		socket.emit('scores', {
+			'scores': scores,
+			'users': users
+		})
 	});
 
 	userCount++;
@@ -163,6 +174,7 @@ io.sockets.on('connection', function (socket) {
 		User.findById(data.id, function(err, user){
 			if (err || ! user) return;
 			
+			socket.user = user;
 			socket.user_id = user.id;
 			socket.connected = now;
 
@@ -177,41 +189,38 @@ io.sockets.on('connection', function (socket) {
 
 			io.sockets.emit('count', {
 				users: users,
-				welcome: users[data.user],
 				now: now
 			});
 		})
 	});
 	
 	socket.on('mouse', function(data){
-		io.sockets.emit('mouse', data);
+		io.sockets.volatile.emit('mouse', data);
+	});
+
+	socket.on('blur', function(data){
+		if (! socket.user) return; 
+		var now = Date.now();
+		updateTime(socket.user, now, socket.connected);
+		socket.connected = now;
+		io.sockets.emit('blur', data);
 	});
 	
+	socket.on('focus', function(data){
+		if (!socket.user) return; 
+		var now = Date.now();
+		socket.connected = now;
+		io.sockets.emit('focus', data);
+	});
+
 	socket.on('disconnect', function(data){
 		userCount--;
-		var connected = socket.connected;
+		if (!socket.user) return;
+
 		var now = Date.now();
-		console.log("<<<<<<<<<<<<<<<<<<<", socket.user_id, "disconnected")
-		if (!socket.user_id) return;
-		User.findById(socket.user_id, function(err, user){
-			if (err) throw err;
-			if (!user) return;
-			var time = (now - connected) / 1000;
-			var newCount = user.count + time;
-			console.log("<<<<<<<<<<<<<<<<<<<", socket.user_id, "was on for", time, ", new count is ", newCount)
-			user.count = newCount;
-			user.save(function(err) {
-	        	if(err) { throw err; }
-	  		})
-/*
-			update({ id: socket.user_id }, { count: newCount }, function (err, numberAffected, raw) {
-				if (err) return;
-				console.log("<<<<<<<<<<<<<<<<<<< updated")
-			});
-*/
-		});
+		updateTime(socket.user, now, socket.connected);
 		
-		delete users[socket.user_id];
+		delete users[socket.user.id];
 		io.sockets.emit('count', {
 			users: users,
 			now: now
diff --git a/public/images/cursor-gray.png b/public/images/cursor-gray.png
new file mode 100644
index 0000000..ed61e06
--- /dev/null
+++ b/public/images/cursor-gray.png
diff --git a/public/images/sanddune2.jpg b/public/images/sanddune2.jpg
new file mode 100644
index 0000000..68fdb8e
--- /dev/null
+++ b/public/images/sanddune2.jpg
diff --git a/views/index.ejs b/views/index.ejs
index 65e0dc0..2f616ed 100644
--- a/views/index.ejs
+++ b/views/index.ejs
@@ -13,8 +13,10 @@
 			var socket = io.connect();
 			
 			<% if (currentUser) { %>
-			_id = "<%= currentUser._id %>";
-			socket.emit('joined', JSON.stringify({ "id": _id }));
+				_id = "<%= currentUser._id %>";
+				socket.emit('joined', JSON.stringify({ "id": _id }));
+			<% } else { %>
+				_id = null;
 			<% } %>
 			
 			var start = 0, now = 0;
@@ -30,7 +32,31 @@
 			}
 	
 			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){
@@ -44,27 +70,41 @@
 			
 			socket.on('mouse', function(data){
 				if (data.id != _id) {
-					users[data.id].cursor.css({ 'margin-left': data.x, 'margin-top': data.y });
+					users[data.id].cursor.css({ 'margin-right': -data.x, 'margin-bottom': -data.y });
 				}
 			});
-				
+			
 			socket.on('scores', function(data){
-				console.log("gat scores . . . .", data);
+				var scores = data.scores;
 				$("#scores").html("");
-				for (var i = 0; i < data.length; i++) {
-					var s = data[i];
+				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.onfocus = function () {
 					$("#really_waiting").html("FOCUS");
+					socket.emit('focus', { id: _id });
 				}
 				window.onblur = function () {
 					$("#really_waiting").html("BLUR");
+					socket.emit('blur', { id: _id });
 				}
 				window.onmousemove = $.throttle(50, function (e) {
 						var y = Math.floor( e.pageY - window.innerHeight / 2 );
@@ -80,16 +120,36 @@
     		height: 100%;
     		margin: 0;
     		padding: 0;
+				overflow: hidden;
+				text-align: center;
+				background-image: url(/images/sanddune2.jpg);
+				background-attachment: fixed;
+				background-size: cover;
+				-webkit-transform: translateZ(0);
     	}
     	.cursor {
     		position: absolute;
-    		top: 50%;
-    		left: 50%;
+    		bottom: 50%;
+    		right: 50%;
     		width: 32px;
     		height: 32px;
-    		margin-top: -9999px;
-    		margin-left: -9999px;
+    		margin-bottom: -9999px;
+    		margin-right: -9999px;
+				-webkit-transform: translateZ(0);
     	}
+			.cursor.idle {
+				background-image: url(/images/cursor-gray.png) !important;
+			}
+			.cursor span {
+				position: relative;
+				left: 25px;
+				top: 6px;
+				font-size: 12px;
+				color: teal;
+			}
+			.cursor.idle span {
+				color: #888888;
+			}
     </style>
   </head>
   <body>
@@ -103,9 +163,13 @@
 		
 		<div id="really_waiting">FOCUS</div>
 		
+		<h1>currently online!~!</h1>
 		<ol id="users"></ol>
 
+		<h1>high scores!!</h1>
 		<ol id="scores"></ol>
 
+		<div id="cursors"></div>
+
   </body>
 </html>