added timer master
added timer

--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -1,3 +1,34 @@
-## 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.
+# Contributing
+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 with the core game. This means that some modifications won't be merged, or will have to be evaluated carefully before 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,6 +8,7 @@
  - [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.
 

file:a/index.html -> file:b/index.html
--- a/index.html
+++ b/index.html
@@ -7,7 +7,10 @@
   <link href="style/main.css" rel="stylesheet" type="text/css">
   <link rel="shortcut icon" href="favicon.ico">
   <link rel="apple-touch-icon" href="meta/apple-touch-icon.png">
+  <link rel="apple-touch-startup-image" href="meta/apple-touch-startup-image-640x1096.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)"> <!-- iPhone 5+ -->
+  <link rel="apple-touch-startup-image" href="meta/apple-touch-startup-image-640x920.png"  media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)"> <!-- iPhone, retina -->
   <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
   <meta name="HandheldFriendly" content="True">
   <meta name="MobileOptimized" content="320">
@@ -20,6 +23,7 @@
       <div class="scores-container">
         <div class="score-container">0</div>
         <div class="best-container">0</div>
+        <div class="timer-container" id="time-container">00:00</div>
       </div>
     </div>
 
@@ -82,6 +86,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>

--- a/js/animframe_polyfill.js
+++ b/js/animframe_polyfill.js
@@ -1,17 +1,19 @@
-(function() {
+(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'];
+  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) {
+    window.requestAnimationFrame = function (callback) {
       var currTime = new Date().getTime();
       var timeToCall = Math.max(0, 16 - (currTime - lastTime));
-      var id = window.setTimeout(function() { callback(currTime + timeToCall); },
+      var id = window.setTimeout(function () {
+        callback(currTime + timeToCall);
+      },
       timeToCall);
       lastTime = currTime + timeToCall;
       return id;
@@ -19,7 +21,7 @@
   }
 
   if (!window.cancelAnimationFrame) {
-    window.cancelAnimationFrame = function(id) {
+    window.cancelAnimationFrame = function (id) {
       clearTimeout(id);
     };
   }

--- /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
@@ -11,23 +11,32 @@
   this.inputManager.on("keepPlaying", this.keepPlaying.bind(this));
 
   this.setup();
+
+  // timer
+  this.timerMinutes = 0;
+  this.timerSeconds = 10;
 }
 
 // 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
+
+  // game is over on given timer in seconds
+  this.timer ();
+};
+
+// 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)) {
+    clearInterval(this.gameTimer);
     return true;
   } else {
     return false;
@@ -36,9 +45,11 @@
 
 // Set up the game
 GameManager.prototype.setup = function () {
+  clearInterval(this.gameTimer);
   var previousState = this.storageManager.getGameState();
 
-  if (previousState) {
+  // Reload the game from a previous game if present
+  if (previousState && 1==2) {
     this.grid        = new Grid(previousState.grid.size,
                                 previousState.grid.cells); // Reload grid
     this.score       = previousState.score;
@@ -55,9 +66,12 @@
     // Add the initial tiles
     this.addStartTiles();
   }
+  this.initialTime = 0;
+  this.gameTimer = 0;
 
   // Update the actuator
   this.actuate();
+  this.timer ();
 };
 
 // Set up the initial tiles to start the game with
@@ -100,6 +114,7 @@
 
 };
 
+// Represent the current game as an object
 GameManager.prototype.serialize = function () {
   return {
     grid:        this.grid.serialize(),
@@ -129,7 +144,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
@@ -195,10 +210,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];
@@ -272,3 +287,38 @@
   return first.x === second.x && first.y === second.y;
 };
 
+// Timer for game to be over in 3 minutes
+GameManager.prototype.timer = function () {
+  this.initialTime = Date.now();
+  clearInterval(this.gameTimer);
+  var t = this;
+  this.gameTimer = setInterval(function(){t.checkTime();}, 100);
+};
+
+GameManager.prototype.checkTime = function (){
+  var timeDifference = Date.now() - this.initialTime;
+  var totalSeconds = Math.floor(timeDifference/1000);
+  var minutes = Math.floor(totalSeconds/60);
+  var seconds = totalSeconds - minutes * 60;
+  this.gameOver (minutes, seconds);
+  if (seconds < 10) seconds = "0"+seconds;
+  if (minutes < 10) minutes = "0"+minutes;
+  var formatted = minutes + ':' + seconds;
+  document.getElementById('time-container').innerHTML = '' + formatted;
+};
+
+GameManager.prototype.gameOver = function (minutes, seconds) {
+  var _secondsRun = minutes * 60 + seconds;
+  var _secondsPerGame = this.timerMinutes * 60 + this.timerSeconds;
+  if ( _secondsRun >= _secondsPerGame ) {
+    clearInterval(this.gameTimer);
+    this.over = true;
+    this.actuator.actuate(this.grid, {
+      score:      this.score,
+      over:       this.over,
+      won:        this.won,
+      bestScore:  this.storageManager.getBestScore(),
+      terminated: this.isGameTerminated()
+    });
+  }
+};

--- 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();
 };
 

 Binary files /dev/null and b/meta/apple-touch-startup-image-640x1096.png differ
 Binary files /dev/null and b/meta/apple-touch-startup-image-640x920.png differ
--- a/style/main.css
+++ b/style/main.css
@@ -50,7 +50,7 @@
   float: right;
   text-align: right; }
 
-.score-container, .best-container {
+.score-container, .best-container, .timer-container {
   position: relative;
   display: inline-block;
   background: #bbada0;
@@ -63,7 +63,7 @@
   color: white;
   margin-top: 8px;
   text-align: center; }
-  .score-container:after, .best-container:after {
+  .score-container:after, .best-container:after, .timer-container:after {
     position: absolute;
     width: 100%;
     top: 10px;
@@ -95,6 +95,9 @@
 .best-container:after {
   content: "Best"; }
 
+.timer-container:after {
+  content: "Timer"; }
+
 p {
   margin-top: 0;
   margin-bottom: 10px;
@@ -143,14 +146,16 @@
   padding: 15px;
   cursor: default;
   -webkit-touch-callout: none;
+  -ms-touch-callout: none;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
+  -ms-touch-action: none;
+  touch-action: none;
   background: #bbada0;
   border-radius: 6px;
   width: 500px;
   height: 500px;
-  -ms-touch-action: none;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box; }
@@ -543,14 +548,16 @@
     padding: 10px;
     cursor: default;
     -webkit-touch-callout: none;
+    -ms-touch-callout: none;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
+    -ms-touch-action: none;
+    touch-action: none;
     background: #bbada0;
     border-radius: 6px;
     width: 280px;
     height: 280px;
-    -ms-touch-action: none;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box; }

--- a/style/main.scss
+++ b/style/main.scss
@@ -176,15 +176,19 @@
 
     cursor: default;
     -webkit-touch-callout: none;
+    -ms-touch-callout: none;
+
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
+
+    -ms-touch-action: none;
+    touch-action: none;
 
     background: $game-container-background;
     border-radius: $tile-border-radius * 2;
     width: $field-width;
     height: $field-width;
-    -ms-touch-action: none;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;

comments