diff options
Diffstat (limited to 'public/javascripts')
| -rw-r--r-- | public/javascripts/game.js | 128 |
1 files changed, 83 insertions, 45 deletions
diff --git a/public/javascripts/game.js b/public/javascripts/game.js index 2ddc432..f088988 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,28 +94,21 @@ 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]; } @@ -127,7 +118,7 @@ var UI = { users[i] = data.users[i]; } if (i != _id && ! users[i].cursor) { - var cursor = new Cursor( users[i] ); + var cursor = new Cursor( users[i], now ); users[i].cursor = cursor; cursors.push(cursor); } @@ -149,21 +140,68 @@ 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) { + console.log(">>>>", base.initial, now, user.connected, now - user.connected) + 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(); } |