add WASD controls (closes #10)
add WASD controls (closes #10)

file:a/README.md -> file:b/README.md
--- a/README.md
+++ b/README.md
@@ -16,5 +16,5 @@
 2048 is licensed under the [MIT license.](https://github.com/gabrielecirulli/2048/blob/master/LICENSE.txt)
 
 ## Donations
-I made this in my spare time, and it's hosted on GitHub (which means I don't have any hosting costs), but if you enjoyed the game and feel like you'd like to buy me a coffee, you can me donate at the `1JoG1ctMSx9PgXdm8bc2XZ5o9BrWiq4vEZ` BTC address. Thank you very much!
+I made this in my spare time, and it's hosted on GitHub (which means I don't have any hosting costs), but if you enjoyed the game and feel like you'd like to buy me a coffee, you can me donate at the `1Ec6onfsQmoP9kkL3zkpB6c5sA4PVcXU2i` BTC address. Thank you very much!
 

file:b/favicon.ico (new)
 Binary files /dev/null and b/favicon.ico differ
file:a/index.html -> file:b/index.html
--- a/index.html
+++ b/index.html
@@ -5,14 +5,7 @@
   <title>2048</title>
 
   <link href="style/main.css" rel="stylesheet" type="text/css">
-
-  <script src="js/hammer.min.js"></script>
-  <script src="js/keyboard_input_manager.js"></script>
-  <script src="js/html_actuator.js"></script>
-  <script src="js/grid.js"></script>
-  <script src="js/tile.js"></script>
-  <script src="js/game_manager.js"></script>
-  <script src="js/application.js"></script>
+  <link rel="shortcut icon" href="favicon.ico">
 
   <meta name="HandheldFriendly" content="True">
   <meta name="MobileOptimized" content="320">
@@ -74,6 +67,15 @@
     Created by <a href="http://gabrielecirulli.com" target="_blank">Gabriele Cirulli.</a> Based on <a href="https://itunes.apple.com/us/app/1024!/id823499224" target="_blank">1024 by Veewo Studio</a> and conceptually similar to <a href="http://asherv.com/threes/" target="_blank">Threes by Asher Vollmer.</a>
     </p>
   </div>
+
+  <script src="js/animframe_polyfill.js"></script>
+  <script src="js/hammer.min.js"></script>
+  <script src="js/keyboard_input_manager.js"></script>
+  <script src="js/html_actuator.js"></script>
+  <script src="js/grid.js"></script>
+  <script src="js/tile.js"></script>
+  <script src="js/game_manager.js"></script>
+  <script src="js/application.js"></script>
 </body>
 </html>
 

--- /dev/null
+++ b/js/animframe_polyfill.js
@@ -1,1 +1,27 @@
+(function() {
+  var lastTime = 0;
+  var vendors = ['webkit', 'moz'];
+  for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
+    window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
+    window.cancelAnimationFrame =
+    window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
+  }
 
+  if (!window.requestAnimationFrame) {
+    window.requestAnimationFrame = function(callback, element) {
+      var currTime = new Date().getTime();
+      var timeToCall = Math.max(0, 16 - (currTime - lastTime));
+      var id = window.setTimeout(function() { callback(currTime + timeToCall); },
+      timeToCall);
+      lastTime = currTime + timeToCall;
+      return id;
+    };
+  }
+
+  if (!window.cancelAnimationFrame) {
+    window.cancelAnimationFrame = function(id) {
+      clearTimeout(id);
+    };
+  }
+}());
+

--- a/js/application.js
+++ b/js/application.js
@@ -1,7 +1,5 @@
-document.addEventListener("DOMContentLoaded", function () {
-  // Wait till the browser is ready to render the game (avoids glitches)
-  window.requestAnimationFrame(function () {
-    var manager = new GameManager(4, KeyboardInputManager, HTMLActuator);
-  });
+// Wait till the browser is ready to render the game (avoids glitches)
+window.requestAnimationFrame(function () {
+  var manager = new GameManager(4, KeyboardInputManager, HTMLActuator);
 });
 

--- a/js/keyboard_input_manager.js
+++ b/js/keyboard_input_manager.js
@@ -31,7 +31,11 @@
     75: 0, // vim keybindings
     76: 1,
     74: 2,
-    72: 3
+    72: 3,
+    87: 0, // W
+    68: 1, // D
+    83: 2, // S
+    65: 3  // A
   };
 
   document.addEventListener("keydown", function (event) {

--- a/style/main.css
+++ b/style/main.css
@@ -130,6 +130,16 @@
 
   100% {
     opacity: 1; } }
+
+.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; }
 
 .game-container {
   margin-top: 40px;
@@ -170,14 +180,6 @@
       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.game-won {
       background: rgba(237, 194, 46, 0.5);
@@ -502,14 +504,6 @@
         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.game-won {
         background: rgba(237, 194, 46, 0.5);

--- a/style/main.scss
+++ b/style/main.scss
@@ -141,6 +141,18 @@
   }
 }
 
+// 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;
+}
+
 // Game field mixin used to render CSS at different width
 @mixin game-field {
   .game-container {
@@ -190,14 +202,7 @@
       }
 
       a {
-        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 button;
         margin-left: 9px;
         // margin-top: 59px;
       }

comments