diff options
| -rw-r--r-- | public/images/transparent.png | bin | 0 -> 200 bytes | |||
| -rw-r--r-- | public/javascripts/game.js | 22 | ||||
| -rw-r--r-- | public/javascripts/util.js | 28 | ||||
| -rw-r--r-- | public/stylesheets/style.css | 14 | ||||
| -rw-r--r-- | views/index.ejs | 2 |
5 files changed, 47 insertions, 19 deletions
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..cb51987 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,19 +53,18 @@ 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; + own_cursor.el.addClass('idle'); } window.onfocus = function () { $("#really_waiting").html("FOCUS"); socket.emit('focus', { id: _id }); afk = false; + own_cursor.el.removeClass('idle'); if (blurTime) { delay += (Date.now() - blurTime); $("#reset").html( "You left the page for " + timeInWords(delay) + ", counting it against your score.." ); @@ -91,7 +90,9 @@ var UI = { start = now; } var howlong = Math.floor( (now - start) ) - delay; - $("#waiting").html( timeInWords( howlong ) ); + if (own_cursor) { + $("#waiting").html( timeInSecs( howlong ) ); + } } else { if (blurTime) { $("#reset").html( "You left the page for " + timeInWords(now - blurTime) + ", counting it against your score.." ); @@ -138,6 +139,15 @@ 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.html( user.firstname ); + + this.time = $("<div>"); + 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..86c8328 100644 --- a/public/javascripts/util.js +++ b/public/javascripts/util.js @@ -30,4 +30,32 @@ 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 ) ); + } + 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 413e29a..2c033a9 100644 --- a/public/stylesheets/style.css +++ b/public/stylesheets/style.css @@ -387,7 +387,7 @@ header { transition: none; } -.cursor span { +.cursor div { position: relative; left: 25px; top: 0; @@ -396,17 +396,7 @@ header { font-family: 'Julius Sans One', sans-serif; z-index:2; } -.cursor span:after { - content: "15:33"; - margin-left: 25px; - color: black; - display: block; - float: left; -} -.cursor.idle span { - color: transparent; -} -.cursor.idle span:after { +.cursor.idle div { color: transparent; } diff --git a/views/index.ejs b/views/index.ejs index 5abc026..d3fb6af 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"> |
