From 17582670a7b5481dd19cd65fe940d4faaada4d18 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Fri, 18 Jan 2013 17:19:06 -0500 Subject: blur/focus stuff --- app.js | 59 +++++++++++++++++------------ public/images/cursor-gray.png | Bin 0 -> 1447 bytes public/images/sanddune2.jpg | Bin 0 -> 46204 bytes views/index.ejs | 86 ++++++++++++++++++++++++++++++++++++------ 4 files changed, 109 insertions(+), 36 deletions(-) create mode 100644 public/images/cursor-gray.png create mode 100644 public/images/sanddune2.jpg 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 Binary files /dev/null and b/public/images/cursor-gray.png differ diff --git a/public/images/sanddune2.jpg b/public/images/sanddune2.jpg new file mode 100644 index 0000000..68fdb8e Binary files /dev/null and b/public/images/sanddune2.jpg differ 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 = $("
"); + $cursor.addClass("cursor"); + $cursor.css('background-image', 'url(' + cursor + '?' + Math.floor(Math.random() * 1000) + ')'); + $cursor.html("" + users[i].firstname + "") + $("#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.html("" + s.firstname + " " + s.lastname + " — " + 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; + } @@ -103,9 +163,13 @@
    FOCUS
    +

    currently online!~!

      +

      high scores!!

        +
        + -- cgit v1.2.3-70-g09d2