add email form to game over screen

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

index.html

@@ -41,6 +41,21 @@
 	        <a class="keep-playing-button">Keep going</a>
           <a class="retry-button">Try again</a>
           <div class="score-sharing"></div>
+          <div class="mailing-list">
+            <!-- MailChimp Signup Form -->
+            <form action="http://gabrielecirulli.us8.list-manage.com/subscribe/post?u=991201206817cfb4e4247ed6c&amp;id=7928ea817b" method="post" name="mc-embedded-subscribe-form" class="mailing-list-form" target="_blank">
+              <strong>Get email updates from Gabriele</strong>
+
+              <input type="email" value="" name="EMAIL" class="mailing-list-email-field" placeholder="Your email address" spellcheck="false">
+
+              <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
+              <div style="position: absolute; left: -9999px;">
+                <input type="text" name="b_991201206817cfb4e4247ed6c_7928ea817b" value="">
+              </div>
+
+              <input type="submit" value="Go" name="subscribe" class="mailing-list-subscribe-button">
+            </form>
+          </div>
         </div>
       </div>
 

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

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,15 +206,17 @@ hr {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box; }
-  .game-container .game-message {
+
+.game-message {
   display: none;
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
-    background: rgba(238, 228, 218, 0.5);
+  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;
@@ -172,16 +224,24 @@ hr {
   -webkit-animation-fill-mode: both;
   -moz-animation-fill-mode: both;
   animation-fill-mode: both; }
-    .game-container .game-message p {
+  .game-message p {
     font-size: 60px;
     font-weight: bold;
     height: 60px;
     line-height: 60px;
     margin-top: 222px; }
-    .game-container .game-message .lower {
+  .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 {
+      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;
@@ -190,20 +250,35 @@ hr {
     color: #f9f6f2;
     height: 40px;
     line-height: 42px;
+    cursor: pointer;
     margin-left: 9px; }
-      .game-container .game-message a.keep-playing-button {
+    .game-message a.keep-playing-button {
       display: none; }
-    .game-container .game-message .score-sharing {
+  .game-message .score-sharing {
     display: inline-block;
     vertical-align: middle;
     margin-left: 10px; }
-    .game-container .game-message.game-won {
+  .game-message.game-won {
     background: rgba(237, 194, 46, 0.5);
     color: #f9f6f2; }
-      .game-container .game-message.game-won a.keep-playing-button {
+    .game-message.game-won a.keep-playing-button {
       display: inline-block; }
-    .game-container .game-message.game-won, .game-container .game-message.game-over {
+  .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,15 +645,17 @@ hr {
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box; }
-    .game-container .game-message {
+
+  .game-message {
     display: none;
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
-      background: rgba(238, 228, 218, 0.5);
+    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;
@@ -585,16 +663,24 @@ hr {
     -webkit-animation-fill-mode: both;
     -moz-animation-fill-mode: both;
     animation-fill-mode: both; }
-      .game-container .game-message p {
+    .game-message p {
       font-size: 60px;
       font-weight: bold;
       height: 60px;
       line-height: 60px;
       margin-top: 222px; }
-      .game-container .game-message .lower {
+    .game-message .lower {
       display: block;
-        margin-top: 59px; }
-      .game-container .game-message a {
+      margin-top: 29px; }
+    .game-message .mailing-list {
+      margin-top: 52px; }
+      .game-message .mailing-list strong {
+        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;
@@ -603,20 +689,35 @@ hr {
       color: #f9f6f2;
       height: 40px;
       line-height: 42px;
+      cursor: pointer;
       margin-left: 9px; }
-        .game-container .game-message a.keep-playing-button {
+      .game-message a.keep-playing-button {
         display: none; }
-      .game-container .game-message .score-sharing {
+    .game-message .score-sharing {
       display: inline-block;
       vertical-align: middle;
       margin-left: 10px; }
-      .game-container .game-message.game-won {
+    .game-message.game-won {
       background: rgba(237, 194, 46, 0.5);
       color: #f9f6f2; }
-        .game-container .game-message.game-won a.keep-playing-button {
+      .game-message.game-won a.keep-playing-button {
         display: inline-block; }
-      .game-container .game-message.game-won, .game-container .game-message.game-over {
+    .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 {
+    padding-top: 0; }
     .game-message p {
       font-size: 30px !important;
       height: 30px !important;
       line-height: 30px !important;
-    margin-top: 90px !important; }
+      margin-top: 32% !important;
+      margin-bottom: 0 !important; }
     .game-message .lower {
-    margin-top: 30px !important; }
+      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; }

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,6 +242,7 @@ hr {
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
+  }
 
   .game-message {
     display: none;
@@ -201,9 +252,11 @@ hr {
     right: 0;
     bottom: 0;
     left: 0;
-      background: rgba($tile-color, .5);
+    background: rgba($tile-color, .73);
     z-index: 100;
 
+    padding-top: 40px; // Pushes content down in desktop version (removed on mobile)
+
     text-align: center;
 
     p {
@@ -218,7 +271,21 @@ hr {
 
     .lower {
       display: block;
-        margin-top: 59px;
+      margin-top: 29px;
+    }
+
+    .mailing-list {
+      margin-top: 52px;
+
+      strong {
+        display: block;
+        margin-bottom: 10px;
+      }
+
+      .mailing-list-email-field {
+        width: 230px;
+        margin-right: 5px;
+      }
     }
 
     a {
@@ -251,6 +318,15 @@ hr {
 
     &.game-won, &.game-over {
       display: block;
+
+      p {
+        @include animation(slide-up 1.5s ease-in-out $transition-speed * 25);
+        @include animation-fill-mode(both);
+      }
+
+      .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;