diff options
| -rw-r--r-- | app.js | 21 | ||||
| -rw-r--r-- | public/javascripts/game.js | 136 |
2 files changed, 102 insertions, 55 deletions
@@ -159,7 +159,8 @@ io.sockets.on('connection', function (socket) { } socket.emit('scores', { 'scores': scores.reverse(), - 'users': users + 'users': users, + 'now': Date.now() }) }); @@ -185,7 +186,10 @@ io.sockets.on('connection', function (socket) { image: user.image, count: user.count, connected: now, - active: true + current: 0, + active: true, + x: -9999, + y: -9999 }; io.sockets.emit('count', { @@ -196,17 +200,21 @@ io.sockets.on('connection', function (socket) { }); socket.on('mouse', function(data){ + if (! socket.user || ! data || ! data.x || ! data.y) return; + users[socket.user.id].x = data.x; + users[socket.user.id].y = data.y; 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; if (socket.user.id in users) { users[socket.user.id].active = false; + users[socket.user.id].current += now - socket.connected; } + updateTime(socket.user, now, socket.connected); + socket.connected = now; io.sockets.emit('blur', data); }); @@ -214,7 +222,9 @@ io.sockets.on('connection', function (socket) { if (!socket.user) return; var now = Date.now(); socket.connected = now; - users[socket.user.id].active = true; + if (socket.user.id in users) { + users[socket.user.id].active = true; + } io.sockets.emit('focus', data); }); @@ -230,7 +240,6 @@ io.sockets.on('connection', function (socket) { users: users, now: now }); - }); }); diff --git a/public/javascripts/game.js b/public/javascripts/game.js index 2ddc432..8672f23 100644 --- a/public/javascripts/game.js +++ b/public/javascripts/game.js @@ -4,9 +4,7 @@ var own_cursor; var socket = io.connect(); -var start = 0; -var afk = false, blurTime = 0, delay = 0; -var users = {}; +var users = {}, cursors = []; var game = { cursor: null, @@ -14,9 +12,15 @@ var game = { game.bindSocket(); if (window._id) { socket.emit('joined', JSON.stringify({ "id": window._id })); + var now = Date.now(); own_cursor = new Cursor({ - firstname: "you" - }); + firstname: "you", + score: 0, + current: 0, + active: true, + connected: now + }, now); + own_cursor.own = true; own_cursor.el.addClass("own"); game.bindEvents(); } @@ -33,21 +37,22 @@ var game = { UI.updateUsers(data); }); socket.on('scores', function(data){ + UI.updateUsers(data); UI.updateScores(data); }); socket.on('mouse', function(data){ - if (data.id != _id) { + 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 && _id in users && users[data.id].cursor) { - users[data.id].cursor.removeClass('idle'); + users[data.id].cursor.focus(); } }); socket.on('blur', function(data){ if (data.id != _id && _id in users && users[data.id].cursor) { - users[data.id].cursor.addClass('idle'); + users[data.id].cursor.blur(); } }) }, @@ -59,22 +64,15 @@ var game = { socket.emit('mouse', { x: x, y: y, id: _id }); }); $(window).bind({ - blur: function () { + blur: function (e) { $("#really_waiting").html("BLUR"); socket.emit('blur', { id: _id }); - blurTime = Date.now(); - afk = true; - own_cursor.el.addClass('idle'); + own_cursor.blur(); }, - focus: function () { + focus: function (e) { $("#really_waiting").html("FOCUS"); socket.emit('focus', { id: _id }); - afk = false; - own_cursor.el.removeClass('idle').show(); - if (blurTime) { - delay += (Date.now() - blurTime); - $("#reset").html( "You left the page for " + timeInWords(delay) + ", counting it against your score.." ); - } + own_cursor.focus(); }, mousemove: function(e){ emit_mouse_movement(e); @@ -96,40 +94,34 @@ var game = { var UI = { updateWait: function(now) { - if (! afk) { - if (start == 0) { - start = now; - } - var howlong = Math.floor( (now - start) ) - delay; - if (own_cursor) { - own_cursor.time.html( timeInSecs( howlong ) ); - } - } else { - if (blurTime) { - $("#reset").html( "You left the page for " + timeInWords(now - blurTime) + ", counting it against your score.." ); + 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; $("#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(); + users[i].cursor.remove(); } delete users[i]; } } for (var i in data.users) { + var user = data.users[i]; if (!( i in users )) { - users[i] = data.users[i]; + users[i] = user; } - if (i != _id && ! users[i].cursor) { - var cursor = new Cursor( users[i] ); - users[i].cursor = cursor; - cursors.push(cursor); + if (i != _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 (i == _id) { own_cursor.name.html( users[i].firstname ); @@ -149,21 +141,67 @@ var UI = { } } -function Cursor ( user ) { - this.el = $("<div>"); - this.el.addClass("cursor"); - this.el.css('background-image', 'url(' + cursor_image + '?' + Math.floor(Math.random() * 1000) + ')'); +function Cursor ( user, now ) { + var base = this; + + base.start = Date.now(); + base.initial = user.current || 0; + base.delay = 0; + base.blurStart = 0; + base.afk = false; + base.own = false; + + 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); + } - this.name = $("<div>"); - this.name.addClass('name'); - this.name.html( user.firstname ); + base.update = function(now){ + var howlong = Math.floor( (now - base.start) ) + base.initial - base.delay; + base.time.html( timeInSecs( howlong ) ); + } - this.time = $("<div>"); - this.time.addClass('time'); - this.time.html( "0:00" ); + base.blur = function(){ + base.blurStart = Date.now(); + base.afk = true; + base.el.addClass('idle'); + } - this.el.append(this.name); - this.el.append(this.time); + base.focus = function(){ + base.afk = false; + base.el.removeClass('idle').show(); + if (base.blurStart) { + base.delay += (Date.now() - base.blurStart); + } + } + + base.remove = function(){ + base.el.remove(); + cursors.splice( cursors.indexOf(base), 1 ) + } - $("#cursors").append(this.el); + base.add(); } |