diff options
Diffstat (limited to 'public/javascripts')
| -rw-r--r-- | public/javascripts/game.js | 134 | ||||
| -rw-r--r-- | public/javascripts/util.js | 2 | ||||
| -rw-r--r-- | public/javascripts/vendor/jquery-1.9.0.min.js (renamed from public/javascripts/jquery-1.9.0.min.js) | 0 | ||||
| -rw-r--r-- | public/javascripts/vendor/jquery-ba-throttle.js (renamed from public/javascripts/jquery-ba-throttle.js) | 0 |
4 files changed, 135 insertions, 1 deletions
diff --git a/public/javascripts/game.js b/public/javascripts/game.js new file mode 100644 index 0000000..be86b86 --- /dev/null +++ b/public/javascripts/game.js @@ -0,0 +1,134 @@ + +var cursor = "https://s3.amazonaws.com/luckyplop/52d5f60fde3d8562ad566838e0e09ca52725bb09.gif"; + +var socket = io.connect(); + +var start = 0; +var afk = false, blurTime = 0, delay = 0; +var users = {}; + +var game = { + cursor: null, + init: function (){ + game.bindSocket(); + if (window._id) { + game.bindEvents(); + } + game.loop(); + }, + + loop: function (){ + requestAnimFrame(game.loop); + ui.updateWait(Date.now()); + }, + + bindSocket: function(){ + socket.on('count', function(data){ + UI.updateUsers(data); + }); + socket.on('scores', function(data){ + UI.updateScores(data); + }); + socket.on('mouse', function(data){ + if (data.id != _id) { + 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'); + } + }); + socket.on('blur', function(data){ + if (data.id != _id && _id in users && users[data.id].cursor) { + users[data.id].cursor.addClass('idle'); + } + }) + }, + + bindEvents: function(){ + game.cursor = new Cursor ({ + firstname: "you", + }); + 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 " + timeInWords(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 }); + own_cursor.el.css({ 'margin-right': -data.x, 'margin-bottom': -data.y }); + }); + } +}; + +var UI = { + + updateWait: function(now) { + if (! afk) { + if (start == 0) { + start = now; + } + var howlong = Math.floor( (now - start) ) - delay; + $("#waiting").html( timeInWords( howlong ) ); + } else { + if (blurTime) { + $("#reset").html( "You left the page for " + timeInWords(now - blurTime) + ", counting it against your score.." ); + } + } + } + + updateUsers: function(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) { + if (!( i in users )) { + users[i] = data.users[i]; + } + if (i != _id && ! users[i].cursor) { + var cursor = new Cursor( users[i] ); + users[i].cursor = cursor; + cursors.push(cursor); + } + } + }, + + updateScores: 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> — " + timeInWords(s.count)); + $("#scores").append($li); + } + } +} + +function Cursor ( user ) { + this.el = $("<div>"); + this.el.addClass("cursor"); + this.el.css('background-image', 'url(' + cursor_image + '?' + Math.floor(Math.random() * 1000) + ')'); + this.el.html("<span>" + user.firstname + "</span>") + $("#cursors").append(this.el); +} diff --git a/public/javascripts/util.js b/public/javascripts/util.js index df29b7e..cd1e0c9 100644 --- a/public/javascripts/util.js +++ b/public/javascripts/util.js @@ -11,7 +11,7 @@ window.requestAnimFrame = (function(){ function pluralize (n, s) { return n + " " + (n == 1 ? s : s + "s"); } -function toTime (time) { +function timeInWords (time) { var str = []; time /= 1000; if (time > 86400) { diff --git a/public/javascripts/jquery-1.9.0.min.js b/public/javascripts/vendor/jquery-1.9.0.min.js index 50d1b22..50d1b22 100644 --- a/public/javascripts/jquery-1.9.0.min.js +++ b/public/javascripts/vendor/jquery-1.9.0.min.js diff --git a/public/javascripts/jquery-ba-throttle.js b/public/javascripts/vendor/jquery-ba-throttle.js index fa30bdf..fa30bdf 100644 --- a/public/javascripts/jquery-ba-throttle.js +++ b/public/javascripts/vendor/jquery-ba-throttle.js |