diff options
Diffstat (limited to 'views/index.ejs')
| -rw-r--r-- | views/index.ejs | 596 |
1 files changed, 25 insertions, 571 deletions
diff --git a/views/index.ejs b/views/index.ejs index 3f2a7b5..aa959fa 100644 --- a/views/index.ejs +++ b/views/index.ejs @@ -7,586 +7,40 @@ <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> + <script src="/javascripts/game.js"></script> - - var cursor = "https://s3.amazonaws.com/luckyplop/52d5f60fde3d8562ad566838e0e09ca52725bb09.gif"; - - var socket = io.connect(); - - <% if (currentUser) { %> - _id = "<%= currentUser._id %>"; - socket.emit('joined', JSON.stringify({ "id": _id })); - <% } else { %> - _id = null; - <% } %> - - var start = 0; - var afk = false, blurTime = 0, delay = 0; - var users = {}; - - function updateWait(now) { - if (! afk) { - if (start == 0) { - start = now; - } - var howlong = Math.floor( (now - start) ) - delay; - $("#waiting").html( toTime( howlong ) ); - } else { - if (blurTime) { - $("#reset").html( "You left the page for " + toTime(now - blurTime) + ", counting it against your score.." ); - } - } - } - - (function loop (){ - requestAnimFrame(loop); - updateWait(Date.now()); - })(); - - function updateUsers(data) { - console.log(data.users); - $("#count").html(Object.keys(data.users).length); - for (var i in users) { - if (!( i in data.users )) { - if (users[i].cursor) { - $( users[i].cursor ).remove(); - } - delete users[i]; - } - } - for (var i in data.users) { - console.log(" . . . " + i) - if (!( i in users )) { - users[i] = data.users[i]; - } - if (i != _id && ! users[i].cursor) { - console.log("new cursor: " + i); - var $cursor = $("<div>"); - $cursor.addClass("cursor"); - $cursor.css('background-image', 'url(' + cursor + '?' + Math.floor(Math.random() * 1000) + ')'); - $cursor.html("<span>" + users[i].firstname + "</span>") - $("#cursors").append($cursor); - users[i].cursor = $cursor; - } - } - } - - 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-right': -data.x, 'margin-bottom': -data.y }); + <% if (currentUser) { %> + <style> + body { + /* + cursor:url(https://s3.amazonaws.com/luckyplop/52d5f60fde3d8562ad566838e0e09ca52725bb09.gif), default; + */ + cursor: none; } - }); - - socket.on('scores', function(data){ - var scores = data.scores; - $("#scores").html(""); - for (var i = 0; i < scores.length; i++) { - var s = scores[i]; - var $li = $("<li>"); - $li.html("<b>" + s.firstname + " " + s.lastname + "</b> — " + toTime(s.count)); - $("#scores").append($li); - } - }); - - socket.on('focus', function(data) { - if (data.id != _id && _id in users && users[data.id].cursor) { - users[data.id].cursor.removeClass('idle'); - } - }); - - socket.on('blur', function(data){ - if (data.id != _id && _id in users && users[data.id].cursor) { - users[data.id].cursor.addClass('idle'); - } - }) - - if (_id) { - - 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 " + toTime(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 }); + </style> + <script type="text/javascript"> + $(function(){ + window._id = "<%= currentUser._id %>"; + socket.emit('joined', JSON.stringify({ "id": window._id })); + init(); }); - } - - </script> - <style type="text/css"> - - - @import url(http://fonts.googleapis.com/css?family=Julius+Sans+One); - - - @-webkit-keyframes a { - 0% { - opacity: 0; - -o-transform: translate3d(0, -60px, 0); - -ms-transform: translate3d(0, -60px, 0); - -moz-transform: translate3d(0, -60px, 0); - -webkit-transform: translate3d(0, -60px, 0); - transform: translate3d(0, -60px, 0); - color:transparent; - - } - - 30% { - opacity: 1; - -o-transform: translate3d(0, 5px, 0); - -ms-transform: translate3d(0, 5px, 0); - -moz-transform: translate3d(0, 5px, 0); - -webkit-transform: translate3d(0, 5px, 0); - transform: translate3d(0, 5px, 0); - text-shadow:0 0 30px #888; - color:transparent; - } - - 60% { - -o-transform: translate3d(0, -2px, 0); - -ms-transform: translate3d(0, -2px, 0); - -moz-transform: translate3d(0, -2px, 0); - -webkit-transform: translate3d(0, -2px, 0); - transform: translate3d(0, -2px, 0); - - - } - - 100% { - -o-transform: translate3d(0, 0px, 0); - -ms-transform: translate3d(0, 0px, 0); - -moz-transform: translate3d(0, 0px, 0); - -webkit-transform: translate3d(0, 0px, 0); - transform: translate3d(0, 0px, 0); - } - - } - @-webkit-keyframes b { - 0% { - opacity: 0; - -o-transform: translate3d(0, -40px, 0); - -ms-transform: translate3d(0, -40px, 0); - -moz-transform: translate3d(0, -40px, 0); - -webkit-transform: translate3d(0, -40px, 0); - transform: translate3d(0, -40px, 0); - color:transparent; - - } - - 30% { - opacity: 1; - -o-transform: translate3d(0, 5px, 0); - -ms-transform: translate3d(0, 5px, 0); - -moz-transform: translate3d(0, 5px, 0); - -webkit-transform: translate3d(0, 5px, 0); - transform: translate3d(0, 5px, 0); - text-shadow:0 0 30px #888; - color:transparent; - } - - 60%{ - color:transparent; - } - - 100% { - opacity: 1; - -o-transform: translate3d(0, 0px, 0); - -ms-transform: translate3d(0, 0px, 0); - -moz-transform: translate3d(0, 0px, 0); - -webkit-transform: translate3d(0, 0px, 0); - transform: translate3d(0, 0px, 0); - - } - - } - - @-webkit-keyframes c { - 0% { - opacity: 0; - -o-transform: translate3d(0, 40px, 0); - -ms-transform: translate3d(0, 40px, 0); - -moz-transform: translate3d(0, 40px, 0); - -webkit-transform: translate3d(0, 40px, 0); - transform: translate3d(0, 40px, 0); - } - - 30% { - opacity: 1; - -o-transform: translate3d(0, 45px, 0); - -ms-transform: translate3d(0, 45px, 0); - -moz-transform: translate3d(0, 45px, 0); - -webkit-transform: translate3d(0, 45px, 0); - transform: translate3d(0, 45px, 0); - } - - 100% { - opacity: 1; - -o-transform: translate3d(0, 0px, 0); - -ms-transform: translate3d(0, 0px, 0); - -moz-transform: translate3d(0, 0px, 0); - -webkit-transform: translate3d(0, 0px, 0); - transform: translate3d(0, 0px, 0); - } - - } - - - @-moz-keyframes a { - 0% { - opacity: 0; - -o-transform: translate3d(0, -60px, 0); - -ms-transform: translate3d(0, -60px, 0); - -moz-transform: translate3d(0, -60px, 0); - -webkit-transform: translate3d(0, -60px, 0); - transform: translate3d(0, -60px, 0); - } - - 30% { - opacity: 1; - -o-transform: translate3d(0, 5px, 0); - -ms-transform: translate3d(0, 5px, 0); - -moz-transform: translate3d(0, 5px, 0); - -webkit-transform: translate3d(0, 5px, 0); - transform: translate3d(0, 5px, 0); - } - - 60% { - -o-transform: translate3d(0, -2px, 0); - -ms-transform: translate3d(0, -2px, 0); - -moz-transform: translate3d(0, -2px, 0); - -webkit-transform: translate3d(0, -2px, 0); - transform: translate3d(0, -2px, 0); - } - - 100% { - -o-transform: translate3d(0, 0px, 0); - -ms-transform: translate3d(0, 0px, 0); - -moz-transform: translate3d(0, 0px, 0); - -webkit-transform: translate3d(0, 0px, 0); - transform: translate3d(0, 0px, 0); - } - - } - @-moz-keyframes b { - 0% { - opacity: 0; - -o-transform: translate3d(0, -40px, 0); - -ms-transform: translate3d(0, -40px, 0); - -moz-transform: translate3d(0, -40px, 0); - -webkit-transform: translate3d(0, -40px, 0); - transform: translate3d(0, -40px, 0); - } - - 30% { - opacity: 1; - -o-transform: translate3d(0, 5px, 0); - -ms-transform: translate3d(0, 5px, 0); - -moz-transform: translate3d(0, 5px, 0); - -webkit-transform: translate3d(0, 5px, 0); - transform: translate3d(0, 5px, 0); - } - - 100% { - opacity: 1; - -o-transform: translate3d(0, 0px, 0); - -ms-transform: translate3d(0, 0px, 0); - -moz-transform: translate3d(0, 0px, 0); - -webkit-transform: translate3d(0, 0px, 0); - transform: translate3d(0, 0px, 0); - } - - } - - @-webkit-keyframes c { - 0% { - opacity: 0; - - } - - 60% { - opacity:0.2; - } - - 90% { - opacity: 1; - - } - - } - - @-webkit-keyframes d { - 40% { - opacity: 0.4; - - } - - 60% { - color: #999; - - } - - } - ol li:nth-child(1){ - -webkit-animation-name: b; - -webkit-animation-duration: 2.2s; - -webkit-animation-iteration-count: 1; - -webkit-animation-delay: 0s; - } - ol li:nth-child(2){ - -webkit-animation-name: b; - -webkit-animation-duration: 2.4s; - -webkit-animation-iteration-count: 1; - -webkit-animation-delay: 0s; - } - ol li:nth-child(3){ - -webkit-animation-name: b; - -webkit-animation-duration: 2.6s; - -webkit-animation-iteration-count: 1; - -webkit-animation-delay: 0s; - } - ol li:nth-child(4){ - -webkit-animation-name: b; - -webkit-animation-duration: 2.8s; - -webkit-animation-iteration-count: 1; - -webkit-animation-delay: 0s; - } - ol li:nth-child(5){ - -webkit-animation-name: b; - -webkit-animation-duration: 3s; - -webkit-animation-iteration-count: 1; - -webkit-animation-delay: 0s; - } - ol li:nth-child(6){ - -webkit-animation-name: b; - -webkit-animation-duration: 3.2s; - -webkit-animation-iteration-count: 1; - -webkit-animation-delay: 0s; - } - ol li:nth-child(7){ - -webkit-animation-name: b; - -webkit-animation-duration: 3.4s; - -webkit-animation-iteration-count: 1; - -webkit-animation-delay: 0s; - } - ol li:nth-child(8){ - -webkit-animation-name: b; - -webkit-animation-duration: 3.6s; - -webkit-animation-iteration-count: 1; - -webkit-animation-delay: 0s; - } - ol li:nth-child(9){ - -webkit-animation-name: b; - -webkit-animation-duration: 3.8s; - -webkit-animation-iteration-count: 1; - -webkit-animation-delay: 0s; - } - ol li:nth-child(10){ - -webkit-animation-name: b; - -webkit-animation-duration: 4s; - -webkit-animation-iteration-count: 1; - -webkit-animation-delay: 0s; - } - - - - h1 { - font-family: 'Julius Sans One', sans-serif; - -webkit-animation-name: a; - -webkit-animation-duration: 2s; - -webkit-animation-iteration-count: 1; - -webkit-animation-delay: 0s; - -moz-animation-name: a; - -moz-animation-duration: 2s; - -moz-animation-iteration-count: 1; - -moz-animation-delay: 0s; - font-weight:500; - font-size:50px; - margin:20px 0 0 0; - letter-spacing: 12px; - - } - - h2 { - font-family: 'Julius Sans One', sans-serif; - -webkit-animation-name: b; - -webkit-animation-duration: 2s; - -webkit-animation-iteration-count: 1; - -webkit-animation-delay: 0s; - -moz-animation-name: b; - -moz-animation-duration: 2s; - -moz-animation-iteration-count: 1; - -moz-animation-delay: 0s; - font-weight:500; - margin:7px 0 0 0; - letter-spacing: 8px; - font-size:18px; - } - - h3 { - font-family: 'Julius Sans One', sans-serif; - -webkit-animation-name: b; - -webkit-animation-duration: 2s; - -webkit-animation-iteration-count: 1; - -webkit-animation-delay: 0s; - -moz-animation-name: b; - -moz-animation-duration: 2s; - -moz-animation-iteration-count: 1; - -moz-animation-delay: 0s; - font-weight: 500; - margin: 0; - font-size: 33px; - border-bottom: 1px solid; - padding: 7px 0; - margin-bottom: 10px; - letter-spacing: 12px; - display: inline-block; - - } - - html,body { - width: 100%; - height: 100%; - margin: 0; - padding: 0; - overflow: hidden; - text-align: center; - background-attachment: fixed; - background-size: cover; - } - header { - position:relative; - z-index:2; - - } - .cursor { - position: absolute; - bottom: 50%; - right: 50%; - width: 32px; - height: 32px; - margin-bottom: -9999px; - margin-right: -9999px; - z-index:0; - -webkit-transform: translateZ(0); - -webkit-touch-callout: none; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - -webkit-transition: all .1s ease-out; - -moz-transition: all .1s ease-out; - -ms-transition: all .1s ease-out; - -o-transition: all .1s ease-out; - transition: all .1s ease-out; - } - .cursor.idle { - background-image: url(/images/cursor-gray.png) !important; - text-shadow: 0 0 2px #333; - color: transparent; - opacity:0.8; - } - - .cursor span { - position: relative; - left: 25px; - top: 0; - font-size: 12px; - color: #333; - 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 { - color: transparent; - } + </script> + <% } else { %> + <script type="text/javascript"> + $(function(){ + window._id = null; + init(); + }); + </script> + <% } %> - ol{ - list-style:none; - padding:0; - - margin:0; - } - - .fbutton { - background: url('https://s3.amazonaws.com/luckyplop/cf8dc6647202296b7c84c906dbf43c6d46e04958.png') no-repeat -2px -53px; - display:inline-block; - width: 223px; - height: 34px; - margin:10px 0; - -webkit-animation-name: c; - -webkit-animation-duration: 4s; - -webkit-animation-iteration-count: 1; - opacity:1; - -webkit-animation-delay: 0s; - } - - .fbutton:hover { - background-position: -2px -97px; - } - - .fbutton:focus { - background: url(https://s3.amazonaws.com/luckyplop/cf8dc6647202296b7c84c906dbf43c6d46e04958.png) no-repeat -2px -97px; - } - .okfocus { - text-align:center; - position:fixed; - bottom:10px; - left:0; - width:100%; - - } - .okfocus img { - width:100px; - } - </style> </head> <body> <h1>WAIT SITE</h1> <h2>Waiting Alone Together</h2> - - <% if (currentUser) { %> - <style> - body{ - cursor:url(https://s3.amazonaws.com/luckyplop/52d5f60fde3d8562ad566838e0e09ca52725bb09.gif), default; - } - </style> - <% } %> - <!-- <div>You've been waiting for <span id="waiting">0 seconds</span><br> +<!-- + <div>You've been waiting for <span id="waiting">0 seconds</span><br> <span id="reset"></span></div> <div><span id="count">0</span> ppl online now!!</div> |