diff options
| -rw-r--r-- | public/images/cursor-black.png | bin | 468 -> 3136 bytes | |||
| -rw-r--r-- | public/images/cursor-blue.png | bin | 538 -> 3153 bytes | |||
| -rw-r--r-- | public/images/cursor-purple.png | bin | 516 -> 3181 bytes | |||
| -rw-r--r-- | public/images/hand-red.gif | bin | 356 -> 0 bytes | |||
| -rw-r--r-- | public/images/hand-white.gif | bin | 376 -> 0 bytes | |||
| -rw-r--r-- | public/javascripts/hover.js | 22 | ||||
| -rw-r--r-- | public/javascripts/hoverpng.js | 120 | ||||
| -rw-r--r-- | public/javascripts/util.js | 13 | ||||
| -rw-r--r-- | views/hover.ejs | 3 |
9 files changed, 146 insertions, 12 deletions
diff --git a/public/images/cursor-black.png b/public/images/cursor-black.png Binary files differindex 9f9293a..daf568f 100644 --- a/public/images/cursor-black.png +++ b/public/images/cursor-black.png diff --git a/public/images/cursor-blue.png b/public/images/cursor-blue.png Binary files differindex a82bf52..961830f 100644 --- a/public/images/cursor-blue.png +++ b/public/images/cursor-blue.png diff --git a/public/images/cursor-purple.png b/public/images/cursor-purple.png Binary files differindex fa010ab..012d137 100644 --- a/public/images/cursor-purple.png +++ b/public/images/cursor-purple.png diff --git a/public/images/hand-red.gif b/public/images/hand-red.gif Binary files differdeleted file mode 100644 index d2e48dd..0000000 --- a/public/images/hand-red.gif +++ /dev/null diff --git a/public/images/hand-white.gif b/public/images/hand-white.gif Binary files differdeleted file mode 100644 index 54eae78..0000000 --- a/public/images/hand-white.gif +++ /dev/null diff --git a/public/javascripts/hover.js b/public/javascripts/hover.js index fd91ec5..5ab7cdc 100644 --- a/public/javascripts/hover.js +++ b/public/javascripts/hover.js @@ -72,7 +72,7 @@ var game = { focus: function (e) { // $("#really_waiting").html("FOCUS"); // socket.emit('focus', { id: _id }); - own_cursor.focus(); + // own_cursor.focus(); }, mousemove: function(e){ emit_mouse_movement(e); @@ -82,17 +82,21 @@ var game = { var hovering = false; own_cursor.blur(); - $("#racecar").bind({ - mouseover: function(){ + + $("#racecar").hoverpng({ + mouseover: function(e){ socket.emit('focus', { id: _id }); own_cursor.focus(); - }, - mouseout: function(){ + }, + mousemove: function(e){ + }, + mouseout: function(e){ socket.emit('blur', { id: _id }); own_cursor.blur(); - } - }); - + }, + threshold: 0.8 + }); + $(".okfocus").bind({ mouseover: function(){ own_cursor.el.hide(); @@ -247,7 +251,7 @@ function Cursor ( user, now ) { base.update = function(now){ var howlong = Math.floor( (now - base.start) ) + base.initial - base.delay; - base.time.html( timeInSecs( howlong ) ); + base.time.html( timeInMillisecs( howlong ) ); if (base.score) { base.score.update( howlong ); } diff --git a/public/javascripts/hoverpng.js b/public/javascripts/hoverpng.js new file mode 100644 index 0000000..de7cdd5 --- /dev/null +++ b/public/javascripts/hoverpng.js @@ -0,0 +1,120 @@ +/* + * Hover PNG by OKFocus - http://okfoc.us - @okfocus + * Version 1.0 + * Licensed under MIT. + * + */ + +(function($){ + + $.hoverpng = function(el, options){ + var base = this; + base.$el = $(el); + base.el = el; + base.$el.data("hoverpng", base); + + var active = true, hovering = false; + var canvas, imageData = null; + + base.init = function(){ + base.options = $.extend({}, $.hoverpng.options, options); + base.options.threshold = Math.floor( base.options.threshold *= 254 ); + base.build(); + }; + + base.build = function(){ + $(window).bind({ + 'blur': function(){ hovering = false; } + }); + base.$el.bind({ + 'load': base.fetch, + 'mouseover': base.mouseover, + 'mouseout': base.mouseout, + 'mousemove': base.mousemove + }); + if (base.el.complete) { + base.fetch(); + } + }; + + base.fetch = function(){ + canvas = document.createElement("canvas"); + canvas.width = base.el.naturalWidth; + canvas.height = base.el.naturalHeight; + var ctx = canvas.getContext('2d'); + ctx.drawImage(base.el, 0, 0); + imageData = ctx.getImageData( 0, 0, canvas.width, canvas.height ).data; + } + + base.clamp = function (x, min, max) { + return Math.max(min, Math.min(max, x)); + }; + + base.mouseover = function(e) { + if ( base.detect(e) ) { + hovering = true; + base.options.mouseover(e); + } + } + base.mouseout = function(e) { + if ( hovering ) { + base.options.mouseout(e); + } + hovering = false; + } + base.mousemove = function(e) { + if ( base.detect(e) ) { + if ( hovering ) { +xxx = e; + base.options.mousemove(e); + } + else { + base.options.mouseover(e); + } + hovering = true; + } + else if ( hovering ) { + base.options.mouseout(e); + hovering = false; + } + } + base.detect = function (e){ + if (! imageData) { + return false; + } + var offset = base.$el.offset(); + var x = e.pageX - offset.left; + var y = e.pageY - offset.top; + var pixelOffset = (canvas.width * y + x) * 4; + var alpha = imageData[ pixelOffset + 3 ]; + e.rgba = [ + imageData[(canvas.width * y + x) * 4 ], + imageData[(canvas.width * y + x) * 4 + 1 ], + imageData[(canvas.width * y + x) * 4 + 2 ], + imageData[(canvas.width * y + x) * 4 + 3 ] + ]; + e.alpha = alpha; + return alpha > base.options.threshold; + } + + base.init(); + }; + + $.hoverpng.options = { + mouseover: function(){}, + mousemove: function(){}, + mouseout: function(){}, + threshold: 0 + }; + + $.fn.hoverpng = function(options){ + return this.each(function(){ + (new $.hoverpng(this, options)); + }); + }; + + function detectMobile () { + return navigator.userAgent.indexOf("Mobile") !== -1 || navigator.userAgent.indexOf("Android") !== -1; + } +})(jQuery); + diff --git a/public/javascripts/util.js b/public/javascripts/util.js index 91c4713..d3869a1 100644 --- a/public/javascripts/util.js +++ b/public/javascripts/util.js @@ -32,7 +32,7 @@ function timeInWords (time) { return str.join(", "); } -function timeInSecs (time) { +function timeInMillisecs (time) { var str = []; time /= 1000; if (time > 86400) { @@ -46,8 +46,6 @@ function timeInSecs (time) { } else { str.push( Math.floor( time / 60 ) ); } - str.push( leading( time % 60 ) ); - /* var seconds = Math.floor(10 * (time % 60)) / 10; seconds = (seconds + "").split("."); @@ -55,6 +53,15 @@ function timeInSecs (time) { str.push( leading( time % 60 ) + "." + seconds[1] ); */ +// str.push( leading( time % 60 ) ); + + var seconds = Math.floor(100 * (time % 60)) / 100; + seconds = (seconds + "").split("."); + if (seconds.length == 1) seconds[1] = "00"; + if (seconds[0].length == 1) seconds[0] = "0" + seconds[0]; + if (seconds[1].length == 1) seconds[1] = seconds[1] + "0"; + str.push( seconds[0] + "." + seconds[1] ); + return str.join(":"); } function leading(num) { diff --git a/views/hover.ejs b/views/hover.ejs index 57b5d4e..eac95dd 100644 --- a/views/hover.ejs +++ b/views/hover.ejs @@ -7,6 +7,7 @@ <script src="/javascripts/vendor/jquery-1.9.0.min.js"></script> <script src="/javascripts/vendor/jquery-ba-throttle.js"></script> <script src="/javascripts/util.js"></script> + <script src="/javascripts/hoverpng.js"></script> <script src="/javascripts/hover.js"></script> <% if (currentUser) { %> <style> @@ -45,10 +46,12 @@ } .cursor { background-image: url(/images/cursor-red.png) !important; + background-position: -2px -2px; background-repeat: no-repeat; } .cursor.idle { background-image: url(/images/cursor-black.png) !important; + background-position: -2px -2px; } </style> </head> |
