summaryrefslogtreecommitdiff
path: root/public
diff options
context:
space:
mode:
Diffstat (limited to 'public')
-rw-r--r--public/javascripts/game.js134
-rw-r--r--public/javascripts/util.js2
-rw-r--r--public/javascripts/vendor/jquery-1.9.0.min.js (renamed from public/javascripts/jquery-1.9.0.min.js)0
-rw-r--r--public/javascripts/vendor/jquery-ba-throttle.js (renamed from public/javascripts/jquery-ba-throttle.js)0
-rw-r--r--public/stylesheets/style.css429
5 files changed, 564 insertions, 1 deletions
diff --git a/public/javascripts/game.js b/public/javascripts/game.js
new file mode 100644
index 0000000..be86b86
--- /dev/null
+++ b/public/javascripts/game.js
@@ -0,0 +1,134 @@
+
+var cursor = "https://s3.amazonaws.com/luckyplop/52d5f60fde3d8562ad566838e0e09ca52725bb09.gif";
+
+var socket = io.connect();
+
+var start = 0;
+var afk = false, blurTime = 0, delay = 0;
+var users = {};
+
+var game = {
+ cursor: null,
+ init: function (){
+ game.bindSocket();
+ if (window._id) {
+ game.bindEvents();
+ }
+ game.loop();
+ },
+
+ loop: function (){
+ requestAnimFrame(game.loop);
+ ui.updateWait(Date.now());
+ },
+
+ bindSocket: function(){
+ socket.on('count', function(data){
+ UI.updateUsers(data);
+ });
+ socket.on('scores', function(data){
+ UI.updateScores(data);
+ });
+ socket.on('mouse', function(data){
+ if (data.id != _id) {
+ users[data.id].cursor.el.css({ 'margin-right': -data.x, 'margin-bottom': -data.y });
+ }
+ });
+ 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');
+ }
+ })
+ },
+
+ bindEvents: function(){
+ game.cursor = new Cursor ({
+ firstname: "you",
+ });
+ 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 " + 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 UI = {
+
+ updateWait: function(now) {
+ if (! afk) {
+ if (start == 0) {
+ start = now;
+ }
+ var howlong = Math.floor( (now - start) ) - delay;
+ $("#waiting").html( timeInWords( howlong ) );
+ } else {
+ if (blurTime) {
+ $("#reset").html( "You left the page for " + timeInWords(now - blurTime) + ", counting it against your score.." );
+ }
+ }
+ }
+
+ updateUsers: function(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) {
+ if (!( i in users )) {
+ users[i] = data.users[i];
+ }
+ if (i != _id && ! users[i].cursor) {
+ var cursor = new Cursor( users[i] );
+ users[i].cursor = cursor;
+ cursors.push(cursor);
+ }
+ }
+ },
+
+ updateScores: 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> &mdash; " + timeInWords(s.count));
+ $("#scores").append($li);
+ }
+ }
+}
+
+function Cursor ( user ) {
+ this.el = $("<div>");
+ this.el.addClass("cursor");
+ this.el.css('background-image', 'url(' + cursor_image + '?' + Math.floor(Math.random() * 1000) + ')');
+ this.el.html("<span>" + user.firstname + "</span>")
+ $("#cursors").append(this.el);
+}
diff --git a/public/javascripts/util.js b/public/javascripts/util.js
index df29b7e..cd1e0c9 100644
--- a/public/javascripts/util.js
+++ b/public/javascripts/util.js
@@ -11,7 +11,7 @@ window.requestAnimFrame = (function(){
function pluralize (n, s) {
return n + " " + (n == 1 ? s : s + "s");
}
-function toTime (time) {
+function timeInWords (time) {
var str = [];
time /= 1000;
if (time > 86400) {
diff --git a/public/javascripts/jquery-1.9.0.min.js b/public/javascripts/vendor/jquery-1.9.0.min.js
index 50d1b22..50d1b22 100644
--- a/public/javascripts/jquery-1.9.0.min.js
+++ b/public/javascripts/vendor/jquery-1.9.0.min.js
diff --git a/public/javascripts/jquery-ba-throttle.js b/public/javascripts/vendor/jquery-ba-throttle.js
index fa30bdf..fa30bdf 100644
--- a/public/javascripts/jquery-ba-throttle.js
+++ b/public/javascripts/vendor/jquery-ba-throttle.js
diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css
index 30e047d..5f1e9a9 100644
--- a/public/stylesheets/style.css
+++ b/public/stylesheets/style.css
@@ -5,4 +5,433 @@ body {
a {
color: #00B7FF;
+}
+
+@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;
+}
+
+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;
} \ No newline at end of file
generated by cgit v1.2.3-70-g09d2 (git 2.51.0) at 2025-12-10 10:11:06 +0000