#98 improve contributing guide
#98 improve contributing guide

--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -1,3 +1,33 @@
 ## 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.
+Changes and improvements are more than welcome! Feel free to fork and open a pull request.
 
+Please follow the house rules to have a bigger chance of your contribution being merged.
+
+### House rules
+
+#### How to make changes
+ - To make changes, create a new branch based on `master` (do not create one from `gh-pages` unless strictly necessary) and make them there, then create a Pull Request to master.  
+ `gh-pages` is different from master in that it contains sharing features, analytics and other things that have no direct bearing with the game. `master` is the "pure" version of the game.
+ - If you want to modify the CSS, please edit the SCSS files present in `style/`: `main.scss` and others. Don't edit the `main.css`, because it's supposed to be generated.  
+ In order to compile your SCSS modifications, you need to use the `sass` gem (install it by running `gem install sass` once Ruby is installed). To run SASS, simply use the following command:  
+ `sass --watch style/main.scss`  
+ SASS will automatically recompile your css when changed.
+ - `Rakefile` contains some tasks that help during development. Feel free to add useful tasks if needed.
+ - Please use 2-space indentation when editing the JavaScript. A `.jshintrc` file is present, which will help your code to follow the guidelines if you install and run `jshint`.
+ - Please test your modification thouroughly before submitting your Pull Request.
+
+#### Changes that might not be accepted
+We have to be conservative in regards to the core game. This means that some modifications won't be merged, or will have to be evaluated carefully before doing being merged:
+
+ - Undo/redo features
+ - Save/reload features
+ - Changes to how the tiles look or their contents
+ - Changes to the layout
+ - Changes to the grid size
+
+#### Changes that are welcome
+ - Bug fixes
+ - Compatibility improvements
+ - "Under the hood" enhancements
+ - Small changes that don't have an impact on the core gameplay
+

file:a/README.md -> file:b/README.md
--- a/README.md
+++ b/README.md
@@ -8,12 +8,15 @@
  - [TimPetricola](https://github.com/TimPetricola) added best score storage
  - [chrisprice](https://github.com/chrisprice) added custom code for swipe handling on mobile
  - [elektryk](https://github.com/elektryk) made swipes work on Windows Phone
+ - [mgarciaisaia](https://github.com/mgarciaisaia) addes support for Android 2.3
 
 Many thanks to [rayhaanj](https://github.com/rayhaanj), [Mechazawa](https://github.com/Mechazawa), [grant](https://github.com/grant), [remram44](https://github.com/remram44) and [ghoullier](https://github.com/ghoullier) for the many other good contributions.
 
 ### Screenshot
 
-[![Screenshot](http://pictures.gabrielecirulli.com/2048-20140309-234100.png)](http://pictures.gabrielecirulli.com/2048-20140309-234100.png)
+<p align="center">
+  <img src="http://pictures.gabrielecirulli.com/2048-20140309-234100.png" alt="Screenshot"/>
+</p>
 
 That screenshot is fake, by the way. I never reached 2048 :smile:
 

file:a/index.html -> file:b/index.html
--- a/index.html
+++ b/index.html
@@ -22,8 +22,12 @@
         <div class="best-container">0</div>
       </div>
     </div>
-    <p class="game-intro">Join the numbers and get the <strong>2048 tile!</strong></p>
-    <a class="restart-button">New Game</a>
+
+    <div class="above-game">
+      <p class="game-intro">Join the numbers and get to the <strong>2048 tile!</strong></p>
+      <a class="restart-button">New Game</a>
+    </div>
+
     <div class="game-container">
       <div class="game-message">
         <p></p>
@@ -78,6 +82,8 @@
     </p>
   </div>
 
+  <script src="js/bind_polyfill.js"></script>
+  <script src="js/classlist_polyfill.js"></script>
   <script src="js/animframe_polyfill.js"></script>
   <script src="js/keyboard_input_manager.js"></script>
   <script src="js/html_actuator.js"></script>

--- /dev/null
+++ b/js/bind_polyfill.js
@@ -1,1 +1,10 @@
+Function.prototype.bind = Function.prototype.bind || function (target) {
+  var self = this;
+  return function (args) {
+    if (!(args instanceof Array)) {
+      args = [args];
+    }
+    self.apply(target, args);
+  };
+};
 

--- /dev/null
+++ b/js/classlist_polyfill.js
@@ -1,1 +1,72 @@
+(function () {
+  if (typeof window.Element === "undefined" ||
+      "classList" in document.documentElement) {
+    return;
+  }
 
+  var prototype = Array.prototype,
+      push = prototype.push,
+      splice = prototype.splice,
+      join = prototype.join;
+
+  function DOMTokenList(el) {
+    this.el = el;
+    // The className needs to be trimmed and split on whitespace
+    // to retrieve a list of classes.
+    var classes = el.className.replace(/^\s+|\s+$/g, '').split(/\s+/);
+    for (var i = 0; i < classes.length; i++) {
+      push.call(this, classes[i]);
+    }
+  }
+
+  DOMTokenList.prototype = {
+    add: function (token) {
+      if (this.contains(token)) return;
+      push.call(this, token);
+      this.el.className = this.toString();
+    },
+    contains: function (token) {
+      return this.el.className.indexOf(token) != -1;
+    },
+    item: function (index) {
+      return this[index] || null;
+    },
+    remove: function (token) {
+      if (!this.contains(token)) return;
+      for (var i = 0; i < this.length; i++) {
+        if (this[i] == token) break;
+      }
+      splice.call(this, i, 1);
+      this.el.className = this.toString();
+    },
+    toString: function () {
+      return join.call(this, ' ');
+    },
+    toggle: function (token) {
+      if (!this.contains(token)) {
+        this.add(token);
+      } else {
+        this.remove(token);
+      }
+
+      return this.contains(token);
+    }
+  };
+
+  window.DOMTokenList = DOMTokenList;
+
+  function defineElementGetter(obj, prop, getter) {
+    if (Object.defineProperty) {
+      Object.defineProperty(obj, prop, {
+        get: getter
+      });
+    } else {
+      obj.__defineGetter__(prop, getter);
+    }
+  }
+
+  defineElementGetter(HTMLElement.prototype, 'classList', function () {
+    return new DOMTokenList(this);
+  });
+})();
+

--- a/js/game_manager.js
+++ b/js/game_manager.js
@@ -1,10 +1,10 @@
 function GameManager(size, InputManager, Actuator, StorageManager) {
-  this.size         = size; // Size of the grid
-  this.inputManager = new InputManager;
+  this.size           = size; // Size of the grid
+  this.inputManager   = new InputManager;
   this.storageManager = new StorageManager;
-  this.actuator     = new Actuator;
-
-  this.startTiles   = 2;
+  this.actuator       = new Actuator;
+
+  this.startTiles     = 2;
 
   this.inputManager.on("move", this.move.bind(this));
   this.inputManager.on("restart", this.restart.bind(this));
@@ -16,16 +16,17 @@
 // Restart the game
 GameManager.prototype.restart = function () {
   this.storageManager.clearGameState();
-  this.actuator.continue();
+  this.actuator.continueGame(); // Clear the game won/lost message
   this.setup();
 };
 
-// Keep playing after winning
+// Keep playing after winning (allows going over 2048)
 GameManager.prototype.keepPlaying = function () {
   this.keepPlaying = true;
-  this.actuator.continue();
-};
-
+  this.actuator.continueGame(); // Clear the game won/lost message
+};
+
+// Return true if the game is lost, or has won and the user hasn't kept playing
 GameManager.prototype.isGameTerminated = function () {
   if (this.over || (this.won && !this.keepPlaying)) {
     return true;
@@ -38,6 +39,7 @@
 GameManager.prototype.setup = function () {
   var previousState = this.storageManager.getGameState();
 
+  // Reload the game from a previous game if present
   if (previousState) {
     this.grid        = new Grid(previousState.grid.size,
                                 previousState.grid.cells); // Reload grid
@@ -83,7 +85,12 @@
     this.storageManager.setBestScore(this.score);
   }
 
-  this.storageManager.setGameState(this.serialize());
+  // Clear the state when the game is over (game over only, not win)
+  if (this.over) {
+    this.storageManager.clearGameState();
+  } else {
+    this.storageManager.setGameState(this.serialize());
+  }
 
   this.actuator.actuate(this.grid, {
     score:      this.score,
@@ -95,9 +102,9 @@
 
 };
 
+// Represent the current game as an object
 GameManager.prototype.serialize = function () {
   return {
-    size:        this.size,
     grid:        this.grid.serialize(),
     score:       this.score,
     over:        this.over,
@@ -125,7 +132,7 @@
 
 // Move tiles on the grid in the specified direction
 GameManager.prototype.move = function (direction) {
-  // 0: up, 1: right, 2:down, 3: left
+  // 0: up, 1: right, 2: down, 3: left
   var self = this;
 
   if (this.isGameTerminated()) return; // Don't do anything if the game's over
@@ -191,10 +198,10 @@
 GameManager.prototype.getVector = function (direction) {
   // Vectors representing tile movement
   var map = {
-    0: { x: 0,  y: -1 }, // up
-    1: { x: 1,  y: 0 },  // right
-    2: { x: 0,  y: 1 },  // down
-    3: { x: -1, y: 0 }   // left
+    0: { x: 0,  y: -1 }, // Up
+    1: { x: 1,  y: 0 },  // Right
+    2: { x: 0,  y: 1 },  // Down
+    3: { x: -1, y: 0 }   // Left
   };
 
   return map[direction];

--- a/js/html_actuator.js
+++ b/js/html_actuator.js
@@ -36,7 +36,7 @@
 };
 
 // Continues the game (both restart and keep playing)
-HTMLActuator.prototype.continue = function () {
+HTMLActuator.prototype.continueGame = function () {
   this.clearMessage();
 };
 

--- a/js/keyboard_input_manager.js
+++ b/js/keyboard_input_manager.js
@@ -60,6 +60,11 @@
         event.preventDefault();
         self.emit("move", mapped);
       }
+    }
+
+    // R key restarts the game
+    if (!modifiers && event.which === 82) {
+      self.restart.call(self, event);
     }
   });
 

--- a/style/helpers.scss
+++ b/style/helpers.scss
@@ -71,3 +71,12 @@
   }
 }
 
+// Clearfix
+@mixin clearfix {
+  &:after {
+    content: "";
+    display: block;
+    clear: both;
+  }
+}
+

--- a/style/main.css
+++ b/style/main.css
@@ -30,7 +30,6 @@
   100% {
     top: -50px;
     opacity: 0; } }
-
 @-moz-keyframes move-up {
   0% {
     top: 25px;
@@ -39,7 +38,6 @@
   100% {
     top: -50px;
     opacity: 0; } }
-
 @keyframes move-up {
   0% {
     top: 25px;
@@ -48,7 +46,6 @@
   100% {
     top: -50px;
     opacity: 0; } }
-
 .scores-container {
   float: right;
   text-align: right; }
@@ -128,42 +125,27 @@
 
   100% {
     opacity: 1; } }
-
 @-moz-keyframes fade-in {
   0% {
     opacity: 0; }
 
   100% {
     opacity: 1; } }
-
 @keyframes fade-in {
   0% {
     opacity: 0; }
 
   100% {
     opacity: 1; } }
-
-.restart-button {
-  display: inline-block;
-  background: #8f7a66;
-  border-radius: 3px;
-  padding: 0 20px;
-  text-decoration: none;
-  color: #f9f6f2;
-  height: 40px;
-  line-height: 42px;
-  display: block;
-  width: 100px;
-  margin: 10px auto 10px auto;
-  text-align: center; }
-
 .game-container {
+  margin-top: 40px;
   position: relative;
   padding: 15px;
   cursor: default;
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -moz-user-select: none;
+  -ms-user-select: none;
   background: #bbada0;
   border-radius: 6px;
   width: 500px;
@@ -406,7 +388,6 @@
     -webkit-transform: scale(1);
     -moz-transform: scale(1);
     transform: scale(1); } }
-
 @-moz-keyframes appear {
   0% {
     opacity: 0;
@@ -419,7 +400,6 @@
     -webkit-transform: scale(1);
     -moz-transform: scale(1);
     transform: scale(1); } }
-
 @keyframes appear {
   0% {
     opacity: 0;
@@ -432,7 +412,6 @@
     -webkit-transform: scale(1);
     -moz-transform: scale(1);
     transform: scale(1); } }
-
 .tile-new .tile-inner {
   -webkit-animation: appear 200ms ease 100ms;
   -moz-animation: appear 200ms ease 100ms;
@@ -456,7 +435,6 @@
     -webkit-transform: scale(1);
     -moz-transform: scale(1);
     transform: scale(1); } }
-
 @-moz-keyframes pop {
   0% {
     -webkit-transform: scale(0);
@@ -472,7 +450,6 @@
     -webkit-transform: scale(1);
     -moz-transform: scale(1);
     transform: scale(1); } }
-
 @keyframes pop {
   0% {
     -webkit-transform: scale(0);
@@ -488,7 +465,6 @@
     -webkit-transform: scale(1);
     -moz-transform: scale(1);
     transform: scale(1); } }
-
 .tile-merged .tile-inner {
   z-index: 20;
   -webkit-animation: pop 200ms ease 100ms;
@@ -498,8 +474,28 @@
   -moz-animation-fill-mode: backwards;
   animation-fill-mode: backwards; }
 
+.above-game:after {
+  content: "";
+  display: block;
+  clear: both; }
+
 .game-intro {
+  float: left;
+  line-height: 42px;
   margin-bottom: 0; }
+
+.restart-button {
+  display: inline-block;
+  background: #8f7a66;
+  border-radius: 3px;
+  padding: 0 20px;
+  text-decoration: none;
+  color: #f9f6f2;
+  height: 40px;
+  line-height: 42px;
+  display: block;
+  text-align: center;
+  float: right; }
 
 .game-explanation {
   margin-top: 50px; }
@@ -528,13 +524,28 @@
   .heading {
     margin-bottom: 10px; }
 
+  .game-intro {
+    width: 55%;
+    display: block;
+    box-sizing: border-box;
+    line-height: 1.65; }
+
+  .restart-button {
+    width: 42%;
+    padding: 0;
+    display: block;
+    box-sizing: border-box;
+    margin-top: 2px; }
+
   .game-container {
+    margin-top: 17px;
     position: relative;
     padding: 10px;
     cursor: default;
     -webkit-touch-callout: none;
     -webkit-user-select: none;
     -moz-user-select: none;
+    -ms-user-select: none;
     background: #bbada0;
     border-radius: 6px;
     width: 280px;
@@ -684,9 +695,6 @@
     -moz-transform: translate(202px, 202px);
     transform: translate(202px, 202px); }
 
-  .game-container {
-    margin-top: 20px; }
-
   .tile .tile-inner {
     font-size: 35px; }
 

--- a/style/main.scss
+++ b/style/main.scss
@@ -16,6 +16,7 @@
 $tile-gold-color: #edc22e;
 $tile-gold-glow-color: lighten($tile-gold-color, 15%);
 
+$game-container-margin-top: 40px;
 $game-container-background: #bbada0;
 
 $transition-speed: 100ms;
@@ -34,10 +35,8 @@
   margin: 80px 0;
 }
 
-.heading:after {
-  content: "";
-  display: block;
-  clear: both;
+.heading {
+  @include clearfix;
 }
 
 h1.title {
@@ -168,17 +167,10 @@
   line-height: 42px;
 }
 
-.restart-button {
-  @include button;
-  display: block;
-  width: 100px;
-  margin: 10px auto 10px auto;
-  text-align: center;
-}
-
 // Game field mixin used to render CSS at different width
 @mixin game-field {
   .game-container {
+    margin-top: $game-container-margin-top;
     position: relative;
     padding: $grid-spacing;
 
@@ -186,6 +178,7 @@
     -webkit-touch-callout: none;
     -webkit-user-select: none;
     -moz-user-select: none;
+    -ms-user-select: none;
 
     background: $game-container-background;
     border-radius: $tile-border-radius * 2;
@@ -454,8 +447,21 @@
   @include animation-fill-mode(backwards);
 }
 
+.above-game {
+  @include clearfix;
+}
+
 .game-intro {
+  float: left;
+  line-height: 42px;
   margin-bottom: 0;
+}
+
+.restart-button {
+  @include button;
+  display: block;
+  text-align: center;
+  float: right;
 }
 
 .game-explanation {
@@ -469,6 +475,7 @@
   $grid-row-cells: 4;
   $tile-size: ($field-width - $grid-spacing * ($grid-row-cells + 1)) / $grid-row-cells;
   $tile-border-radius: 3px;
+  $game-container-margin-top: 17px;
 
   html, body {
     font-size: 15px;
@@ -499,12 +506,24 @@
     margin-bottom: 10px;
   }
 
+  // Show intro and restart button side by side
+  .game-intro {
+    width: 55%;
+    display: block;
+    box-sizing: border-box;
+    line-height: 1.65;
+  }
+
+  .restart-button {
+    width: 42%;
+    padding: 0;
+    display: block;
+    box-sizing: border-box;
+    margin-top: 2px;
+  }
+
   // Render the game field at the right width
   @include game-field;
-
-  .game-container {
-    margin-top: 20px;
-  }
 
   // Rest of the font-size adjustments in the tile class
   .tile .tile-inner {

comments