Added vim keybindings
Added vim keybindings

file:b/CONTRIBUTING.md (new)
--- /dev/null
+++ b/CONTRIBUTING.md
@@ -1,1 +1,3 @@
+## Contributing
+Changes and improvements are more than welcome! Feel free to fork and open a pull request. Please make your changes in a specifically made branch and request to pull on `master`! If you can, please make sure the game fully works before sending the PR, as that will help speed up the process.
 

file:b/LICENSE.txt (new)
--- /dev/null
+++ b/LICENSE.txt
@@ -1,1 +1,22 @@
+The MIT License (MIT)
 
+Copyright (c) 2014 Gabriele Cirulli
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+

file:a/README.md -> file:b/README.md
--- a/README.md
+++ b/README.md
@@ -5,3 +5,13 @@
 
 [![Screenshot](http://pictures.gabrielecirulli.com/2048-20140309-234100.png)](http://pictures.gabrielecirulli.com/2048-20140309-234100.png)
 
+That screenshot is fake by, the way. I never reached 2048 :smile:
+
+## Contributing
+Changes and improvements are more than welcome! Feel free to fork and open a pull request. Please make your changes in a specifically made branch and request to pull on `master`! If you can, please make sure the game fully works before sending the PR, as that will help speed up the process.
+
+You can find the same information in the [contributing guide.](https://github.com/gabrielecirulli/2048/blob/master/CONTRIBUTING.txt)
+
+## License
+2048 is licensed under the [MIT license.](https://github.com/gabrielecirulli/2048/blob/master/LICENSE.txt)
+

file:a/index.html -> file:b/index.html
--- a/index.html
+++ b/index.html
@@ -24,7 +24,9 @@
     <div class="game-container">
       <div class="game-message">
         <p></p>
-        <a class="retry-button">Try again</a>
+        <div class="lower">
+          <a class="retry-button">Try again</a>
+        </div>
       </div>
 
       <div class="grid-container">

--- a/js/html_actuator.js
+++ b/js/html_actuator.js
@@ -44,24 +44,37 @@
   var position  = tile.previousPosition || { x: tile.x, y: tile.y };
   positionClass = this.positionClass(position);
 
-  element.classList.add("tile", "tile-" + tile.value, positionClass);
+  // We can't use classlist because it somehow glitches when replacing classes
+  var classes = ["tile", "tile-" + tile.value, positionClass];
+  this.applyClasses(element, classes);
+
   element.textContent = tile.value;
 
-  this.tileContainer.appendChild(element);
-
   if (tile.previousPosition) {
+    // Make sure that the tile gets rendered in the previous position first
     window.requestAnimationFrame(function () {
-      element.classList.remove(element.classList[2]);
-      element.classList.add(self.positionClass({ x: tile.x, y: tile.y }));
+      classes[2] = self.positionClass({ x: tile.x, y: tile.y });
+      self.applyClasses(element, classes); // Update the position
     });
   } else if (tile.mergedFrom) {
-    element.classList.add("tile-merged");
+    classes.push("tile-merged");
+    this.applyClasses(element, classes);
+
+    // Render the tiles that merged
     tile.mergedFrom.forEach(function (merged) {
       self.addTile(merged);
     });
   } else {
-    element.classList.add("tile-new");
+    classes.push("tile-new");
+    this.applyClasses(element, classes);
   }
+
+  // Put the tile on the board
+  this.tileContainer.appendChild(element);
+};
+
+HTMLActuator.prototype.applyClasses = function (element, classes) {
+  element.setAttribute("class", classes.join(" "));
 };
 
 HTMLActuator.prototype.normalizePosition = function (position) {
@@ -91,8 +104,6 @@
 };
 
 HTMLActuator.prototype.message = function (won) {
-  if (ga) ga("send", "event", "game", "end", type, this.score);
-
   var type    = won ? "game-won" : "game-over";
   var message = won ? "You win!" : "Game over!"
 

--- a/js/keyboard_input_manager.js
+++ b/js/keyboard_input_manager.js
@@ -27,7 +27,11 @@
     38: 0, // Up
     39: 1, // Right
     40: 2, // Down
-    37: 3  // Left
+    37: 3,  // Left
+    75: 0, // vim keybindings
+    76: 1,
+    74: 2,
+    72: 3
   };
 
   document.addEventListener("keydown", function (event) {
@@ -35,16 +39,22 @@
                     event.shiftKey;
     var mapped    = map[event.which];
 
-    if (!modifiers && mapped !== undefined) {
-      event.preventDefault();
-      self.emit("move", mapped);
+    if (!modifiers) {
+      if (mapped !== undefined) {
+        event.preventDefault();
+        self.emit("move", mapped);
+      }
+
+      if (event.which === 32) self.restart.bind(self)(event);
     }
   });
 
   var retry = document.getElementsByClassName("retry-button")[0];
-  retry.addEventListener("click", function (event) {
-    event.preventDefault();
-    self.emit("restart");
-  });
+  retry.addEventListener("click", this.restart.bind(this));
 };
 
+KeyboardInputManager.prototype.restart = function (event) {
+  event.preventDefault();
+  this.emit("restart");
+};
+

--- a/style/main.css
+++ b/style/main.css
@@ -143,6 +143,8 @@
   border-radius: 6px;
   width: 500px;
   height: 500px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
   box-sizing: border-box; }
   .game-container .game-message {
     display: none;
@@ -164,16 +166,19 @@
       height: 60px;
       line-height: 60px;
       margin-top: 222px; }
+    .game-container .game-message .lower {
+      display: block;
+      margin-top: 59px; }
     .game-container .game-message a {
       display: inline-block;
-      background: #a69382;
+      background: #8f7a66;
       border-radius: 3px;
       padding: 0 20px;
       text-decoration: none;
       color: #f9f6f2;
       height: 40px;
       line-height: 42px;
-      margin-top: 59px; }
+      margin-left: 9px; }
     .game-container .game-message.game-won {
       background: rgba(237, 194, 46, 0.5);
       color: #f9f6f2; }
@@ -333,29 +338,35 @@
 @-webkit-keyframes appear {
   0% {
     opacity: 0;
-    -webkit-transform: scale(0); }
+    -webkit-transform: scale(0);
+    -moz-transform: scale(0); }
 
   100% {
     opacity: 1;
-    -webkit-transform: scale(1); } }
+    -webkit-transform: scale(1);
+    -moz-transform: scale(1); } }
 
 @-moz-keyframes appear {
   0% {
     opacity: 0;
-    -webkit-transform: scale(0); }
+    -webkit-transform: scale(0);
+    -moz-transform: scale(0); }
 
   100% {
     opacity: 1;
-    -webkit-transform: scale(1); } }
+    -webkit-transform: scale(1);
+    -moz-transform: scale(1); } }
 
 @keyframes appear {
   0% {
     opacity: 0;
-    -webkit-transform: scale(0); }
+    -webkit-transform: scale(0);
+    -moz-transform: scale(0); }
 
   100% {
     opacity: 1;
-    -webkit-transform: scale(1); } }
+    -webkit-transform: scale(1);
+    -moz-transform: scale(1); } }
 
 .tile-new {
   -webkit-animation: appear 200ms ease 100ms;
@@ -365,33 +376,42 @@
 
 @-webkit-keyframes pop {
   0% {
-    -webkit-transform: scale(0); }
+    -webkit-transform: scale(0);
+    -moz-transform: scale(0); }
 
   50% {
-    -webkit-transform: scale(1.2); }
-
-  100% {
-    -webkit-transform: scale(1); } }
+    -webkit-transform: scale(1.2);
+    -moz-transform: scale(1.2); }
+
+  100% {
+    -webkit-transform: scale(1);
+    -moz-transform: scale(1); } }
 
 @-moz-keyframes pop {
   0% {
-    -webkit-transform: scale(0); }
+    -webkit-transform: scale(0);
+    -moz-transform: scale(0); }
 
   50% {
-    -webkit-transform: scale(1.2); }
-
-  100% {
-    -webkit-transform: scale(1); } }
+    -webkit-transform: scale(1.2);
+    -moz-transform: scale(1.2); }
+
+  100% {
+    -webkit-transform: scale(1);
+    -moz-transform: scale(1); } }
 
 @keyframes pop {
   0% {
-    -webkit-transform: scale(0); }
+    -webkit-transform: scale(0);
+    -moz-transform: scale(0); }
 
   50% {
-    -webkit-transform: scale(1.2); }
-
-  100% {
-    -webkit-transform: scale(1); } }
+    -webkit-transform: scale(1.2);
+    -moz-transform: scale(1.2); }
+
+  100% {
+    -webkit-transform: scale(1);
+    -moz-transform: scale(1); } }
 
 .tile-merged {
   z-index: 20;

--- a/style/main.scss
+++ b/style/main.scss
@@ -155,6 +155,8 @@
   border-radius: $tile-border-radius * 2;
   width: $field-width;
   height: $field-width;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
   box-sizing: border-box;
 
   .game-message {
@@ -180,16 +182,22 @@
       // line-height: $field-width;
     }
 
+    .lower {
+      display: block;
+      margin-top: 59px;
+    }
+
     a {
       display: inline-block;
-      background: darken($game-container-background, 10%);
+      background: darken($game-container-background, 20%);
       border-radius: 3px;
       padding: 0 20px;
       text-decoration: none;
       color: $bright-text-color;
       height: 40px;
       line-height: 42px;
-      margin-top: 59px;
+      margin-left: 9px;
+      // margin-top: 59px;
     }
 
     @include animation(fade-in 800ms ease $transition-speed * 12);
@@ -336,15 +344,15 @@
 
 @include keyframes(appear) {
   0% {
-    // -webkit-transform: scale(1.5);
     opacity: 0;
     -webkit-transform: scale(0);
+    -moz-transform: scale(0);
   }
 
   100% {
-    // -webkit-transform: scale(1);
     opacity: 1;
     -webkit-transform: scale(1);
+    -moz-transform: scale(1);
   }
 }
 
@@ -356,16 +364,17 @@
 @include keyframes(pop) {
   0% {
     -webkit-transform: scale(0);
-    // opacity: 0;
+    -moz-transform: scale(0);
   }
 
   50% {
     -webkit-transform: scale(1.2);
+    -moz-transform: scale(1.2);
   }
 
   100% {
     -webkit-transform: scale(1);
-    // opacity: 1;
+    -moz-transform: scale(1);
   }
 }
 

comments