diff --git a/cache.appcache b/cache.appcache index c543964ecadb5af32ac65a712a5f2917853b1e0e..513f4784cdec3c7a7a4f425e3b52105b4d0957bf 100644 --- a/cache.appcache +++ b/cache.appcache @@ -3,7 +3,7 @@ CACHE MANIFEST # Adds the ability to play the game online. # The following comment needs to be updated whenever a change is made. # Run `rake appcache:update` to do so -# Updated: 2014-03-23T20:22:44+01:00 +# Updated: 2014-03-24T19:07:26+01:00 # Main page index.html diff --git a/index.html b/index.html index cb2ce18f3c5ea3fa8e2975d71598a0d39dabec6b..5506701c46fdf27f5377acbd7385c6c1d024f4fe 100644 --- a/index.html +++ b/index.html @@ -41,6 +41,21 @@ Keep going Try again
+
+ +
+ Get email updates from Gabriele + + + + +
+ +
+ + +
+
diff --git a/js/keyboard_input_manager.js b/js/keyboard_input_manager.js index 32a177a47dc5452c979cdd0e14d1a2a188e779a0..e8768edb773a78fb42298c8e1a9421e7d5f89a29 100644 --- a/js/keyboard_input_manager.js +++ b/js/keyboard_input_manager.js @@ -55,6 +55,9 @@ KeyboardInputManager.prototype.listen = function () { event.shiftKey; var mapped = map[event.which]; + // Ignore the event if it's happening in a text field + if (self.targetIsInput(event)) return; + if (!modifiers) { if (mapped !== undefined) { event.preventDefault(); @@ -79,8 +82,9 @@ KeyboardInputManager.prototype.listen = function () { gameContainer.addEventListener(this.eventTouchstart, function (event) { if ((!window.navigator.msPointerEnabled && event.touches.length > 1) || - event.targetTouches > 1) { - return; // Ignore if touching with more than 1 finger + event.targetTouches > 1 || + self.targetIsInput(event)) { + return; // Ignore if touching with more than 1 finger or touching input } if (window.navigator.msPointerEnabled) { @@ -100,8 +104,9 @@ KeyboardInputManager.prototype.listen = function () { gameContainer.addEventListener(this.eventTouchend, function (event) { if ((!window.navigator.msPointerEnabled && event.touches.length > 0) || - event.targetTouches > 0) { - return; // Ignore if still touching with one or more fingers + event.targetTouches > 0 || + self.targetIsInput(event)) { + return; // Ignore if still touching with one or more fingers or input } var touchEndClientX, touchEndClientY; @@ -142,3 +147,7 @@ KeyboardInputManager.prototype.bindButtonPress = function (selector, fn) { button.addEventListener("click", fn.bind(this)); button.addEventListener(this.eventTouchend, fn.bind(this)); }; + +KeyboardInputManager.prototype.targetIsInput = function (event) { + return event.target.tagName.toLowerCase() === "input"; +}; diff --git a/style/main.css b/style/main.css index 409e7d6a7ba3464714143a6e14a2295960b282fc..7a2fde8a21bd75bae01d1076b83cd881557235ca 100644 --- a/style/main.css +++ b/style/main.css @@ -10,6 +10,38 @@ html, body { body { margin: 80px 0; } +input { + display: inline-block; + background: #8f7a66; + border-radius: 3px; + padding: 0 20px; + text-decoration: none; + color: #f9f6f2; + height: 40px; + line-height: 42px; + cursor: pointer; + font: inherit; + border: none; + outline: none; + box-sizing: border-box; + font-weight: bold; + margin: 0; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; } + input[type="text"], input[type="email"] { + cursor: auto; + background: #fcfbf9; + font-weight: normal; + color: #776e65; + padding: 0 15px; } + input[type="text"]::-webkit-input-placeholder, input[type="email"]::-webkit-input-placeholder { + color: #9d948c; } + input[type="text"]::-moz-placeholder, input[type="email"]::-moz-placeholder { + color: #9d948c; } + input[type="text"]:-ms-input-placeholder, input[type="email"]:-ms-input-placeholder { + color: #9d948c; } + .heading:after { content: ""; display: block; @@ -137,6 +169,24 @@ hr { 100% { opacity: 1; } } +@-webkit-keyframes slide-up { + 0% { + margin-top: 32%; } + + 100% { + margin-top: 20%; } } +@-moz-keyframes slide-up { + 0% { + margin-top: 32%; } + + 100% { + margin-top: 20%; } } +@keyframes slide-up { + 0% { + margin-top: 32%; } + + 100% { + margin-top: 20%; } } .game-container { margin-top: 40px; position: relative; @@ -156,54 +206,79 @@ hr { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } - .game-container .game-message { - display: none; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - background: rgba(238, 228, 218, 0.5); - z-index: 100; - text-align: center; - -webkit-animation: fade-in 800ms ease 1200ms; - -moz-animation: fade-in 800ms ease 1200ms; - animation: fade-in 800ms ease 1200ms; - -webkit-animation-fill-mode: both; - -moz-animation-fill-mode: both; - animation-fill-mode: both; } - .game-container .game-message p { - font-size: 60px; - font-weight: bold; - height: 60px; - line-height: 60px; - margin-top: 222px; } - .game-container .game-message .lower { + +.game-message { + display: none; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + background: rgba(238, 228, 218, 0.73); + z-index: 100; + padding-top: 40px; + text-align: center; + -webkit-animation: fade-in 800ms ease 1200ms; + -moz-animation: fade-in 800ms ease 1200ms; + animation: fade-in 800ms ease 1200ms; + -webkit-animation-fill-mode: both; + -moz-animation-fill-mode: both; + animation-fill-mode: both; } + .game-message p { + font-size: 60px; + font-weight: bold; + height: 60px; + line-height: 60px; + margin-top: 222px; } + .game-message .lower { + display: block; + margin-top: 29px; } + .game-message .mailing-list { + margin-top: 52px; } + .game-message .mailing-list strong { display: block; - margin-top: 59px; } - .game-container .game-message a { - display: inline-block; - background: #8f7a66; - border-radius: 3px; - padding: 0 20px; - text-decoration: none; - color: #f9f6f2; - height: 40px; - line-height: 42px; - margin-left: 9px; } - .game-container .game-message a.keep-playing-button { - display: none; } - .game-container .game-message .score-sharing { - display: inline-block; - vertical-align: middle; - margin-left: 10px; } - .game-container .game-message.game-won { - background: rgba(237, 194, 46, 0.5); - color: #f9f6f2; } - .game-container .game-message.game-won a.keep-playing-button { - display: inline-block; } - .game-container .game-message.game-won, .game-container .game-message.game-over { - display: block; } + margin-bottom: 10px; } + .game-message .mailing-list .mailing-list-email-field { + width: 230px; + margin-right: 5px; } + .game-message a { + display: inline-block; + background: #8f7a66; + border-radius: 3px; + padding: 0 20px; + text-decoration: none; + color: #f9f6f2; + height: 40px; + line-height: 42px; + cursor: pointer; + margin-left: 9px; } + .game-message a.keep-playing-button { + display: none; } + .game-message .score-sharing { + display: inline-block; + vertical-align: middle; + margin-left: 10px; } + .game-message.game-won { + background: rgba(237, 194, 46, 0.5); + color: #f9f6f2; } + .game-message.game-won a.keep-playing-button { + display: inline-block; } + .game-message.game-won, .game-message.game-over { + display: block; } + .game-message.game-won p, .game-message.game-over p { + -webkit-animation: slide-up 1.5s ease-in-out 2500ms; + -moz-animation: slide-up 1.5s ease-in-out 2500ms; + animation: slide-up 1.5s ease-in-out 2500ms; + -webkit-animation-fill-mode: both; + -moz-animation-fill-mode: both; + animation-fill-mode: both; } + .game-message.game-won .mailing-list, .game-message.game-over .mailing-list { + -webkit-animation: fade-in 1.5s ease-in-out 2500ms; + -moz-animation: fade-in 1.5s ease-in-out 2500ms; + animation: fade-in 1.5s ease-in-out 2500ms; + -webkit-animation-fill-mode: both; + -moz-animation-fill-mode: both; + animation-fill-mode: both; } .grid-container { position: absolute; @@ -499,6 +574,7 @@ hr { color: #f9f6f2; height: 40px; line-height: 42px; + cursor: pointer; display: block; text-align: center; float: right; } @@ -569,54 +645,79 @@ hr { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } - .game-container .game-message { - display: none; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - background: rgba(238, 228, 218, 0.5); - z-index: 100; - text-align: center; - -webkit-animation: fade-in 800ms ease 1200ms; - -moz-animation: fade-in 800ms ease 1200ms; - animation: fade-in 800ms ease 1200ms; - -webkit-animation-fill-mode: both; - -moz-animation-fill-mode: both; - animation-fill-mode: both; } - .game-container .game-message p { - font-size: 60px; - font-weight: bold; - height: 60px; - line-height: 60px; - margin-top: 222px; } - .game-container .game-message .lower { + + .game-message { + display: none; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + background: rgba(238, 228, 218, 0.73); + z-index: 100; + padding-top: 40px; + text-align: center; + -webkit-animation: fade-in 800ms ease 1200ms; + -moz-animation: fade-in 800ms ease 1200ms; + animation: fade-in 800ms ease 1200ms; + -webkit-animation-fill-mode: both; + -moz-animation-fill-mode: both; + animation-fill-mode: both; } + .game-message p { + font-size: 60px; + font-weight: bold; + height: 60px; + line-height: 60px; + margin-top: 222px; } + .game-message .lower { + display: block; + margin-top: 29px; } + .game-message .mailing-list { + margin-top: 52px; } + .game-message .mailing-list strong { display: block; - margin-top: 59px; } - .game-container .game-message a { - display: inline-block; - background: #8f7a66; - border-radius: 3px; - padding: 0 20px; - text-decoration: none; - color: #f9f6f2; - height: 40px; - line-height: 42px; - margin-left: 9px; } - .game-container .game-message a.keep-playing-button { - display: none; } - .game-container .game-message .score-sharing { - display: inline-block; - vertical-align: middle; - margin-left: 10px; } - .game-container .game-message.game-won { - background: rgba(237, 194, 46, 0.5); - color: #f9f6f2; } - .game-container .game-message.game-won a.keep-playing-button { - display: inline-block; } - .game-container .game-message.game-won, .game-container .game-message.game-over { - display: block; } + margin-bottom: 10px; } + .game-message .mailing-list .mailing-list-email-field { + width: 230px; + margin-right: 5px; } + .game-message a { + display: inline-block; + background: #8f7a66; + border-radius: 3px; + padding: 0 20px; + text-decoration: none; + color: #f9f6f2; + height: 40px; + line-height: 42px; + cursor: pointer; + margin-left: 9px; } + .game-message a.keep-playing-button { + display: none; } + .game-message .score-sharing { + display: inline-block; + vertical-align: middle; + margin-left: 10px; } + .game-message.game-won { + background: rgba(237, 194, 46, 0.5); + color: #f9f6f2; } + .game-message.game-won a.keep-playing-button { + display: inline-block; } + .game-message.game-won, .game-message.game-over { + display: block; } + .game-message.game-won p, .game-message.game-over p { + -webkit-animation: slide-up 1.5s ease-in-out 2500ms; + -moz-animation: slide-up 1.5s ease-in-out 2500ms; + animation: slide-up 1.5s ease-in-out 2500ms; + -webkit-animation-fill-mode: both; + -moz-animation-fill-mode: both; + animation-fill-mode: both; } + .game-message.game-won .mailing-list, .game-message.game-over .mailing-list { + -webkit-animation: fade-in 1.5s ease-in-out 2500ms; + -moz-animation: fade-in 1.5s ease-in-out 2500ms; + animation: fade-in 1.5s ease-in-out 2500ms; + -webkit-animation-fill-mode: both; + -moz-animation-fill-mode: both; + animation-fill-mode: both; } .grid-container { position: absolute; @@ -717,13 +818,24 @@ hr { .tile .tile-inner { font-size: 35px; } - .game-message p { - font-size: 30px !important; - height: 30px !important; - line-height: 30px !important; - margin-top: 90px !important; } - .game-message .lower { - margin-top: 30px !important; } + .game-message { + padding-top: 0; } + .game-message p { + font-size: 30px !important; + height: 30px !important; + line-height: 30px !important; + margin-top: 32% !important; + margin-bottom: 0 !important; } + .game-message .lower { + margin-top: 10px !important; } + .game-message.game-won .score-sharing { + margin-top: 10px; } + .game-message.game-over .mailing-list { + margin-top: 25px; } + .game-message .mailing-list { + margin-top: 10px; } + .game-message .mailing-list .mailing-list-email-field { + width: 180px; } .sharing > iframe, .sharing > span, .sharing > form { display: block; @@ -736,7 +848,6 @@ hr { border: none; font: inherit; color: inherit; - cursor: pointer; display: inline-block; background: #8f7a66; border-radius: 3px; @@ -744,7 +855,8 @@ hr { text-decoration: none; color: #f9f6f2; height: 40px; - line-height: 42px; } + line-height: 42px; + cursor: pointer; } .pp-donate button img { vertical-align: -4px; margin-right: 8px; } diff --git a/style/main.scss b/style/main.scss index 4fa4e12a600034d74b366cd01179480af228f470..40ddf1c1a6b7f9f339d9174bfc4df620e097333d 100644 --- a/style/main.scss +++ b/style/main.scss @@ -35,6 +35,56 @@ body { margin: 80px 0; } +// Styles for buttons +@mixin button { + display: inline-block; + background: darken($game-container-background, 20%); + border-radius: 3px; + padding: 0 20px; + text-decoration: none; + color: $bright-text-color; + height: 40px; + line-height: 42px; + cursor: pointer; +} + +input { + @include button; + font: inherit; + border: none; + outline: none; + box-sizing: border-box; + font-weight: bold; + margin: 0; + @include appearance(none); + + &[type="text"], &[type="email"] { + cursor: auto; + background: lighten($tile-color, 9%); + font-weight: normal; + color: $text-color; + + padding: 0 15px; + + @mixin placeholder { + color: lighten($text-color, 15%); + } + + // Included separately so that browsers don't refuse mixed rules + &::-webkit-input-placeholder { + @include placeholder; + } + + &::-moz-placeholder { + @include placeholder; + } + + &:-ms-input-placeholder { + @include placeholder; + } + } +} + .heading { @include clearfix; } @@ -155,16 +205,16 @@ hr { } } -// Styles for buttons -@mixin button { - display: inline-block; - background: darken($game-container-background, 20%); - border-radius: 3px; - padding: 0 20px; - text-decoration: none; - color: $bright-text-color; - height: 40px; - line-height: 42px; +@include keyframes(slide-up) { + 0% { + margin-top: 32%; + // margin-top: 222px; + } + + 100% { + margin-top: 20%; + // margin-top: 150px; + } } // Game field mixin used to render CSS at different width @@ -192,65 +242,91 @@ hr { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; + } - .game-message { - display: none; + .game-message { + display: none; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - background: rgba($tile-color, .5); - z-index: 100; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + background: rgba($tile-color, .73); + z-index: 100; - text-align: center; + padding-top: 40px; // Pushes content down in desktop version (removed on mobile) - p { - font-size: 60px; - font-weight: bold; - height: 60px; - line-height: 60px; - margin-top: 222px; - // height: $field-width; - // line-height: $field-width; - } + text-align: center; - .lower { + p { + font-size: 60px; + font-weight: bold; + height: 60px; + line-height: 60px; + margin-top: 222px; + // height: $field-width; + // line-height: $field-width; + } + + .lower { + display: block; + margin-top: 29px; + } + + .mailing-list { + margin-top: 52px; + + strong { display: block; - margin-top: 59px; + margin-bottom: 10px; } - a { - @include button; - margin-left: 9px; - // margin-top: 59px; + .mailing-list-email-field { + width: 230px; + margin-right: 5px; + } + } + + a { + @include button; + margin-left: 9px; + // margin-top: 59px; - &.keep-playing-button { - display: none; - } + &.keep-playing-button { + display: none; } + } + + .score-sharing { + display: inline-block; + vertical-align: middle; + margin-left: 10px; + } + + @include animation(fade-in 800ms ease $transition-speed * 12); + @include animation-fill-mode(both); + + &.game-won { + background: rgba($tile-gold-color, .5); + color: $bright-text-color; - .score-sharing { + a.keep-playing-button { display: inline-block; - vertical-align: middle; - margin-left: 10px; } + } - @include animation(fade-in 800ms ease $transition-speed * 12); - @include animation-fill-mode(both); - - &.game-won { - background: rgba($tile-gold-color, .5); - color: $bright-text-color; + &.game-won, &.game-over { + display: block; - a.keep-playing-button { - display: inline-block; - } + p { + @include animation(slide-up 1.5s ease-in-out $transition-speed * 25); + @include animation-fill-mode(both); } - &.game-won, &.game-over { - display: block; + .mailing-list { + @include animation(fade-in 1.5s ease-in-out $transition-speed * 25); + @include animation-fill-mode(both); } } } @@ -551,15 +627,34 @@ hr { } .game-message { + padding-top: 0; + p { font-size: 30px !important; height: 30px !important; line-height: 30px !important; - margin-top: 90px !important; + margin-top: 32% !important; + margin-bottom: 0 !important; } .lower { - margin-top: 30px !important; + margin-top: 10px !important; + } + + &.game-won .score-sharing { + margin-top: 10px; + } + + &.game-over .mailing-list { + margin-top: 25px; + } + + .mailing-list { + margin-top: 10px; + + .mailing-list-email-field { + width: 180px; + } } } @@ -579,7 +674,6 @@ hr { border: none; font: inherit; color: inherit; - cursor: pointer; @include button; img { @@ -595,7 +689,6 @@ hr { position: relative; margin-left: 10px; @include button; - cursor: pointer; img { vertical-align: -4px;