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
+
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;