diff options
| -rw-r--r-- | app.js | 2 | ||||
| -rw-r--r-- | public/images/transparent.png | bin | 0 -> 200 bytes | |||
| -rw-r--r-- | public/javascripts/game.js | 78 | ||||
| -rw-r--r-- | public/javascripts/util.js | 30 | ||||
| -rw-r--r-- | public/stylesheets/style.css | 35 | ||||
| -rw-r--r-- | views/index.ejs | 19 |
6 files changed, 108 insertions, 56 deletions
@@ -158,7 +158,7 @@ io.sockets.on('connection', function (socket) { }); } socket.emit('scores', { - 'scores': scores, + 'scores': scores.reverse(), 'users': users }) }); diff --git a/public/images/transparent.png b/public/images/transparent.png Binary files differnew file mode 100644 index 0000000..972bde7 --- /dev/null +++ b/public/images/transparent.png diff --git a/public/javascripts/game.js b/public/javascripts/game.js index dc69682..2ddc432 100644 --- a/public/javascripts/game.js +++ b/public/javascripts/game.js @@ -15,7 +15,7 @@ var game = { if (window._id) { socket.emit('joined', JSON.stringify({ "id": window._id })); own_cursor = new Cursor({ - firstName: "you" + firstname: "you" }); own_cursor.el.addClass("own"); game.bindEvents(); @@ -53,33 +53,43 @@ var game = { }, 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.." ); - } - } var emit_mouse_movement = $.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 }); }); - window.onmousemove = function(e){ - emit_mouse_movement(e); - own_cursor.el.css({ 'left': e.pageX, 'top': e.pageY }); - } + $(window).bind({ + blur: function () { + $("#really_waiting").html("BLUR"); + socket.emit('blur', { id: _id }); + blurTime = Date.now(); + afk = true; + own_cursor.el.addClass('idle'); + }, + focus: function () { + $("#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.." ); + } + }, + mousemove: function(e){ + emit_mouse_movement(e); + own_cursor.el.css({ 'left': e.pageX, 'top': e.pageY }); + } + }); + + $(".okfocus").bind({ + mouseover: function(){ + own_cursor.el.hide(); + }, + mouseout: function(){ + own_cursor.el.show(); + } + }); } }; @@ -91,7 +101,9 @@ var UI = { start = now; } var howlong = Math.floor( (now - start) ) - delay; - $("#waiting").html( timeInWords( howlong ) ); + 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.." ); @@ -118,7 +130,10 @@ var UI = { var cursor = new Cursor( users[i] ); users[i].cursor = cursor; cursors.push(cursor); - } + } + else if (i == _id) { + own_cursor.name.html( users[i].firstname ); + } } }, @@ -138,6 +153,17 @@ 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>") + + this.name = $("<div>"); + this.name.addClass('name'); + this.name.html( user.firstname ); + + this.time = $("<div>"); + this.time.addClass('time'); + this.time.html( "0:00" ); + + this.el.append(this.name); + this.el.append(this.time); + $("#cursors").append(this.el); } diff --git a/public/javascripts/util.js b/public/javascripts/util.js index cd1e0c9..91c4713 100644 --- a/public/javascripts/util.js +++ b/public/javascripts/util.js @@ -30,4 +30,34 @@ function timeInWords (time) { if (seconds[1].length == 1) seconds[1] = seconds[1] + "0"; str.push( pluralize( seconds[0] + "." + seconds[1], "second" ) ); return str.join(", "); +} + +function timeInSecs (time) { + var str = []; + time /= 1000; + if (time > 86400) { + str.push( leading( time / 86400 ) ); + } + if (time > 3600) { + str.push( leading( (time / 3600) % 24 ) ); + } + if (time > 60) { + str.push( leading( (time / 60) % 60 ) ); + } else { + str.push( Math.floor( time / 60 ) ); + } + str.push( leading( time % 60 ) ); + +/* + var seconds = Math.floor(10 * (time % 60)) / 10; + seconds = (seconds + "").split("."); + if (seconds.length == 1) seconds[1] = "0"; + str.push( leading( time % 60 ) + "." + seconds[1] ); +*/ + + return str.join(":"); +} +function leading(num) { + num = Math.floor(num); + return num < 10 ? "0" + num : num; }
\ No newline at end of file diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css index bf5d394..8681414 100644 --- a/public/stylesheets/style.css +++ b/public/stylesheets/style.css @@ -389,26 +389,23 @@ header { transition: none; } -.cursor span { +.cursor div { position: relative; left: 25px; - top: 0; + top: 6px; font-size: 12px; color: #333; font-family: 'Julius Sans One', sans-serif; z-index:2; + text-shadow: 0 0 5px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 2px #fff, 0 0 1px #fff; } -.cursor span:after { - content: "15:33"; - margin-left: 25px; - color: black; - display: block; - float: left; +.cursor div.name { + left: 29px; } -.cursor.idle span { - color: transparent; +.cursor div.time { + font-size: 10px; } -.cursor.idle span:after { +.cursor.idle div { color: transparent; } @@ -439,14 +436,14 @@ ol { background: url(https://s3.amazonaws.com/luckyplop/cf8dc6647202296b7c84c906dbf43c6d46e04958.png) no-repeat -2px -97px; } .okfocus { - text-align:center; - position:fixed; - bottom:10px; - left:0; - font-size:11px; - width:100%; - + text-align: center; + position: fixed; + bottom: 10px; + left: 0; + font-size: 11px; + width: 100%; + cursor: pointer; } .okfocus img { - width:100px; + width: 100px; }
\ No newline at end of file diff --git a/views/index.ejs b/views/index.ejs index eabc503..8658182 100644 --- a/views/index.ejs +++ b/views/index.ejs @@ -14,7 +14,7 @@ /* cursor:url(https://s3.amazonaws.com/luckyplop/52d5f60fde3d8562ad566838e0e09ca52725bb09.gif), default; */ - cursor: none; + cursor: url(/images/transparent.png), none; } </style> <script type="text/javascript"> @@ -47,15 +47,14 @@ <p>currently waiting</p> <ol id="users"></ol> --> -<header> - <h3>high scores</h3> - <ol id="scores"></ol> - <% if (!currentUser) { %> - <a href="/auth/facebook"class="fbutton"></a><br> - <% } %> - <a href="mailto:frontdesk@okfoc.us?subject=hello OKFocus"class="okfocus"><img src="/images/okfocus_logo.png" alt="OKFocus"><br>hire us!</a> - -</header> + <header> + <h3>high scores</h3> + <ol id="scores"></ol> + <% if (!currentUser) { %> + <a href="/auth/facebook"class="fbutton"></a><br> + <% } %> + </header> + <a href="mailto:frontdesk@okfoc.us?subject=hello OKFocus" class="okfocus"><img src="/images/okfocus_logo.png" alt="OKFocus"><br>hire us!</a> <div id="cursors"></div> </body> |
