diff options
Diffstat (limited to 'views')
| -rw-r--r-- | views/index.ejs | 86 |
1 files changed, 75 insertions, 11 deletions
diff --git a/views/index.ejs b/views/index.ejs index 65e0dc0..2f616ed 100644 --- a/views/index.ejs +++ b/views/index.ejs @@ -13,8 +13,10 @@ var socket = io.connect(); <% if (currentUser) { %> - _id = "<%= currentUser._id %>"; - socket.emit('joined', JSON.stringify({ "id": _id })); + _id = "<%= currentUser._id %>"; + socket.emit('joined', JSON.stringify({ "id": _id })); + <% } else { %> + _id = null; <% } %> var start = 0, now = 0; @@ -30,7 +32,31 @@ } 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){ @@ -44,27 +70,41 @@ socket.on('mouse', function(data){ if (data.id != _id) { - users[data.id].cursor.css({ 'margin-left': data.x, 'margin-top': data.y }); + users[data.id].cursor.css({ 'margin-right': -data.x, 'margin-bottom': -data.y }); } }); - + socket.on('scores', function(data){ - console.log("gat scores . . . .", data); + var scores = data.scores; $("#scores").html(""); - for (var i = 0; i < data.length; i++) { - var s = data[i]; + 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.onfocus = function () { $("#really_waiting").html("FOCUS"); + socket.emit('focus', { id: _id }); } window.onblur = function () { $("#really_waiting").html("BLUR"); + socket.emit('blur', { id: _id }); } window.onmousemove = $.throttle(50, function (e) { var y = Math.floor( e.pageY - window.innerHeight / 2 ); @@ -80,16 +120,36 @@ height: 100%; margin: 0; padding: 0; + overflow: hidden; + text-align: center; + background-image: url(/images/sanddune2.jpg); + background-attachment: fixed; + background-size: cover; + -webkit-transform: translateZ(0); } .cursor { position: absolute; - top: 50%; - left: 50%; + bottom: 50%; + right: 50%; width: 32px; height: 32px; - margin-top: -9999px; - margin-left: -9999px; + margin-bottom: -9999px; + margin-right: -9999px; + -webkit-transform: translateZ(0); } + .cursor.idle { + background-image: url(/images/cursor-gray.png) !important; + } + .cursor span { + position: relative; + left: 25px; + top: 6px; + font-size: 12px; + color: teal; + } + .cursor.idle span { + color: #888888; + } </style> </head> <body> @@ -103,9 +163,13 @@ <div id="really_waiting">FOCUS</div> + <h1>currently online!~!</h1> <ol id="users"></ol> + <h1>high scores!!</h1> <ol id="scores"></ol> + <div id="cursors"></div> + </body> </html> |