diff options
| -rw-r--r-- | public/javascripts/game.js | 25 | ||||
| -rw-r--r-- | public/stylesheets/style.css | 14 | ||||
| -rw-r--r-- | views/index.ejs | 10 |
3 files changed, 34 insertions, 15 deletions
diff --git a/public/javascripts/game.js b/public/javascripts/game.js index be86b86..dc69682 100644 --- a/public/javascripts/game.js +++ b/public/javascripts/game.js @@ -1,5 +1,6 @@ -var cursor = "https://s3.amazonaws.com/luckyplop/52d5f60fde3d8562ad566838e0e09ca52725bb09.gif"; +var cursor_image = "https://s3.amazonaws.com/luckyplop/52d5f60fde3d8562ad566838e0e09ca52725bb09.gif"; +var own_cursor; var socket = io.connect(); @@ -12,6 +13,11 @@ var game = { init: function (){ game.bindSocket(); if (window._id) { + socket.emit('joined', JSON.stringify({ "id": window._id })); + own_cursor = new Cursor({ + firstName: "you" + }); + own_cursor.el.addClass("own"); game.bindEvents(); } game.loop(); @@ -19,7 +25,7 @@ var game = { loop: function (){ requestAnimFrame(game.loop); - ui.updateWait(Date.now()); + UI.updateWait(Date.now()); }, bindSocket: function(){ @@ -65,12 +71,15 @@ var game = { $("#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 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 }); + } } }; @@ -88,7 +97,7 @@ var UI = { $("#reset").html( "You left the page for " + timeInWords(now - blurTime) + ", counting it against your score.." ); } } - } + }, updateUsers: function(data) { console.log(data.users); diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css index 5f1e9a9..413e29a 100644 --- a/public/stylesheets/style.css +++ b/public/stylesheets/style.css @@ -372,7 +372,19 @@ header { background-image: url(/images/cursor-gray.png) !important; text-shadow: 0 0 2px #333; color: transparent; - opacity:0.8; + opacity: 0.8; +} +.cursor.own { + position: absolute; + top: -200px; + left: -200px; + margin: 0; + z-index: 2; + -webkit-transition: none; + -moz-transition: none; + -ms-transition: none; + -o-transition: none; + transition: none; } .cursor span { diff --git a/views/index.ejs b/views/index.ejs index aa959fa..5abc026 100644 --- a/views/index.ejs +++ b/views/index.ejs @@ -4,11 +4,10 @@ <title><%= title %></title> <link rel='stylesheet' href='/stylesheets/style.css' /> <script src="/socket.io/socket.io.js"></script> - <script src="/javascripts/jquery-1.9.0.min.js"></script> - <script src="/javascripts/jquery-ba-throttle.js"></script> + <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/game.js"></script> - <% if (currentUser) { %> <style> body { @@ -21,15 +20,14 @@ <script type="text/javascript"> $(function(){ window._id = "<%= currentUser._id %>"; - socket.emit('joined', JSON.stringify({ "id": window._id })); - init(); + game.init(); }); </script> <% } else { %> <script type="text/javascript"> $(function(){ window._id = null; - init(); + game.init(); }); </script> <% } %> |