diff options
Diffstat (limited to 'views/index.ejs')
| -rw-r--r-- | views/index.ejs | 114 |
1 files changed, 94 insertions, 20 deletions
diff --git a/views/index.ejs b/views/index.ejs index a09c60b..65e0dc0 100644 --- a/views/index.ejs +++ b/views/index.ejs @@ -4,34 +4,108 @@ <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/util.js"></script> <script> - var socket = io.connect(); - <% if (currentUser) { %> - socket.emit('current', JSON.stringify({ - "user": "<%= currentUser._id %>" - })); - <% } %> - socket.on('update', function(data){ - console.log(data) - if (Object.keys(data).length === 0) return; - var users = document.getElementById('users') - users.innerHTML = ""; - for(k in data){ - var time = Math.round(data[k]), text; - time == 1 ? text = 'second' : text = 'seconds'; + var cursor = "https://s3.amazonaws.com/luckyplop/52d5f60fde3d8562ad566838e0e09ca52725bb09.gif"; - var li = document.createElement('li').appendChild(document.createTextNode(k + data[k])); - users.appendChild(li); - } - }); + var socket = io.connect(); + + <% if (currentUser) { %> + _id = "<%= currentUser._id %>"; + socket.emit('joined', JSON.stringify({ "id": _id })); + <% } %> + + var start = 0, now = 0; + var users = {}; + + function updateWait(data) { + if (start == 0) { + start = data.now; + } + now = data.now; + var howlong = Math.floor( (now - start) / 1000 ); + $("#waiting").html( howlong == 1 ? howlong + " second" : howlong + " seconds" ); + } + + function updateUsers(data) { + $("#count").html(Object.keys(data.users).length); + } + + socket.on('count', function(data){ + updateWait(data); + updateUsers(data); + }); + + socket.on('update', function(data){ + updateWait(data); + }); + + socket.on('mouse', function(data){ + if (data.id != _id) { + users[data.id].cursor.css({ 'margin-left': data.x, 'margin-top': data.y }); + } + }); + + socket.on('scores', function(data){ + console.log("gat scores . . . .", data); + $("#scores").html(""); + for (var i = 0; i < data.length; i++) { + var s = data[i]; + var $li = $("<li>"); + $li.html("<b>" + s.firstname + " " + s.lastname + "</b> — " + toTime(s.count)); + $("#scores").append($li); + } + }); + + if (_id) { + window.onfocus = function () { + $("#really_waiting").html("FOCUS"); + } + window.onblur = function () { + $("#really_waiting").html("BLUR"); + } + 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 }); + }); + } </script> + <style type="text/css"> + html,body { + width: 100%; + height: 100%; + margin: 0; + padding: 0; + } + .cursor { + position: absolute; + top: 50%; + left: 50%; + width: 32px; + height: 32px; + margin-top: -9999px; + margin-left: -9999px; + } + </style> </head> <body> <h1><%= title %></h1> <% if (!currentUser) { %> <a href="/auth/facebook">Login with Facebook</a> - <% } %> - <ul id="users"></ul> + <% } %> + + <div>You've been waiting for <span id="waiting">0 seconds</span></div> + <div><span id="count">0</span> ppl online now!!</div> + + <div id="really_waiting">FOCUS</div> + + <ol id="users"></ol> + + <ol id="scores"></ol> + </body> </html> |