add touchend event (see PR #32)
add touchend event (see PR #32)

file:a/README.md -> file:b/README.md
--- a/README.md
+++ b/README.md
@@ -2,6 +2,15 @@
 A small clone of [1024](https://play.google.com/store/apps/details?id=com.veewo.a1024), based on [Saming's 2048](http://saming.fr/p/2048/) (also a clone).
 
 Made just for fun. [Play it here!](http://gabrielecirulli.github.io/2048/)
+
+### Contributions
+
+ - [TimPetricola](https://github.com/TimPetricola) added best score storage
+ - [chrisprice](https://github.com/chrisprice) added custom code for swipe handling on mobile
+
+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)
 

file:a/index.html -> file:b/index.html
--- a/index.html
+++ b/index.html
@@ -6,6 +6,8 @@
 
   <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">
+  <meta name="apple-mobile-web-app-capable" content="yes">
 
   <meta name="HandheldFriendly" content="True">
   <meta name="MobileOptimized" content="320">
@@ -15,7 +17,10 @@
   <div class="container">
     <div class="heading">
       <h1 class="title">2048</h1>
-      <div class="score-container">0</div>
+      <div class="scores-container">
+        <div class="score-container">0</div>
+        <div class="best-container">0</div>
+      </div>
     </div>
     <p class="game-intro">Join the numbers and get to the <strong>2048 tile!</strong></p>
 
@@ -23,6 +28,7 @@
       <div class="game-message">
         <p></p>
         <div class="lower">
+	  <a class="keep-playing-button">Keep playing</a>
           <a class="retry-button">Try again</a>
         </div>
       </div>
@@ -73,6 +79,7 @@
   <script src="js/html_actuator.js"></script>
   <script src="js/grid.js"></script>
   <script src="js/tile.js"></script>
+  <script src="js/local_score_manager.js"></script>
   <script src="js/game_manager.js"></script>
   <script src="js/application.js"></script>
 </body>

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

--- a/js/game_manager.js
+++ b/js/game_manager.js
@@ -1,12 +1,14 @@
-function GameManager(size, InputManager, Actuator) {
+function GameManager(size, InputManager, Actuator, ScoreManager) {
   this.size         = size; // Size of the grid
   this.inputManager = new InputManager;
+  this.scoreManager = new ScoreManager;
   this.actuator     = new Actuator;
 
   this.startTiles   = 2;
 
   this.inputManager.on("move", this.move.bind(this));
   this.inputManager.on("restart", this.restart.bind(this));
+  this.inputManager.on("keepPlaying", this.keepPlaying.bind(this));
 
   this.setup();
 }
@@ -17,6 +19,22 @@
   this.setup();
 };
 
+// Keep playing after winning
+GameManager.prototype.keepPlaying = function () {
+  this.keepPlaying = true;
+  this.actuator.keepPlaying();
+};
+
+GameManager.prototype.isGameOver = function() {
+  if (this.over || (this.won && !this.keepPlaying) ) {
+    return true;
+  }
+  else {
+    return false;
+  }
+}
+
+
 // Set up the game
 GameManager.prototype.setup = function () {
   this.grid         = new Grid(this.size);
@@ -24,6 +42,7 @@
   this.score        = 0;
   this.over         = false;
   this.won          = false;
+  this.keepPlaying  = false;
 
   // Add the initial tiles
   this.addStartTiles();
@@ -51,11 +70,18 @@
 
 // Sends the updated grid to the actuator
 GameManager.prototype.actuate = function () {
+  if (this.scoreManager.get() < this.score) {
+    this.scoreManager.set(this.score);
+  }
+
   this.actuator.actuate(this.grid, {
-    score: this.score,
-    over:  this.over,
-    won:   this.won
+    score:     this.score,
+    over:      this.over,
+    won:       this.won,
+    bestScore: this.scoreManager.get(),
+    gameOver:  this.isGameOver()
   });
+
 };
 
 // Save all tile positions and remove merger info
@@ -80,7 +106,7 @@
   // 0: up, 1: right, 2:down, 3: left
   var self = this;
 
-  if (this.over || this.won) return; // Don't do anything if the game's over
+  if (this.isGameOver()) return; // Don't do anything if the game's over
 
   var cell, tile;
 
@@ -204,8 +230,6 @@
           var cell   = { x: x + vector.x, y: y + vector.y };
 
           var other  = self.grid.cellContent(cell);
-          if (other) {
-          }
 
           if (other && other.value === tile.value) {
             return true; // These two tiles can be merged

--- a/js/html_actuator.js
+++ b/js/html_actuator.js
@@ -1,7 +1,8 @@
 function HTMLActuator() {
-  this.tileContainer    = document.getElementsByClassName("tile-container")[0];
-  this.scoreContainer   = document.getElementsByClassName("score-container")[0];
-  this.messageContainer = document.getElementsByClassName("game-message")[0];
+  this.tileContainer    = document.querySelector(".tile-container");
+  this.scoreContainer   = document.querySelector(".score-container");
+  this.bestContainer    = document.querySelector(".best-container");
+  this.messageContainer = document.querySelector(".game-message");
 
   this.score = 0;
 }
@@ -21,15 +22,23 @@
     });
 
     self.updateScore(metadata.score);
+    self.updateBestScore(metadata.bestScore);
 
-    if (metadata.over) self.message(false); // You lose
-    if (metadata.won) self.message(true); // You win!
+    if (metadata.gameOver) {
+      if (metadata.over) self.message(false); // You lose
+      else if (metadata.won) self.message(true); // You win!
+    }
+
   });
 };
 
 HTMLActuator.prototype.restart = function () {
   this.clearMessage();
 };
+
+HTMLActuator.prototype.keepPlaying = function () {
+  this.clearMessage();
+}
 
 HTMLActuator.prototype.clearContainer = function (container) {
   while (container.firstChild) {
@@ -40,12 +49,13 @@
 HTMLActuator.prototype.addTile = function (tile) {
   var self = this;
 
-  var element   = document.createElement("div");
-  var position  = tile.previousPosition || { x: tile.x, y: tile.y };
-  positionClass = this.positionClass(position);
+  var element       = document.createElement("div");
+  var position      = tile.previousPosition || { x: tile.x, y: tile.y };
+  var positionClass = this.positionClass(position);
+  var styleClass    = this.styleClass(tile);
 
   // We can't use classlist because it somehow glitches when replacing classes
-  var classes = ["tile", "tile-" + tile.value, positionClass];
+  var classes = ["tile", styleClass, positionClass];
   this.applyClasses(element, classes);
 
   element.textContent = tile.value;
@@ -86,6 +96,15 @@
   return "tile-position-" + position.x + "-" + position.y;
 };
 
+HTMLActuator.prototype.styleClass = function (tile) {
+  var className = 'tile-'+tile.value;
+
+  if (tile.value > 2048 ) {
+    className = className+' tile-gold';
+  }
+  return className;
+};
+
 HTMLActuator.prototype.updateScore = function (score) {
   this.clearContainer(this.scoreContainer);
 
@@ -103,19 +122,19 @@
   }
 };
 
+HTMLActuator.prototype.updateBestScore = function (bestScore) {
+  this.bestContainer.textContent = bestScore;
+};
+
 HTMLActuator.prototype.message = function (won) {
   var type    = won ? "game-won" : "game-over";
-  var message = won ? "You win!" : "Game over!"
-
-  // if (ga) ga("send", "event", "game", "end", type, this.score);
+  var message = won ? "You win!" : "Game over!";
 
   this.messageContainer.classList.add(type);
   this.messageContainer.getElementsByTagName("p")[0].textContent = message;
 };
 
 HTMLActuator.prototype.clearMessage = function () {
-  // IE only takes one value to remove at a time.
-  this.messageContainer.classList.remove("game-won");
-  this.messageContainer.classList.remove("game-over");
+  this.messageContainer.classList.remove("game-won", "game-over");
 };
 

--- a/js/keyboard_input_manager.js
+++ b/js/keyboard_input_manager.js
@@ -53,26 +53,33 @@
     }
   });
 
-  var retry = document.getElementsByClassName("retry-button")[0];
+  var retry = document.querySelector(".retry-button");
   retry.addEventListener("click", this.restart.bind(this));
+  retry.addEventListener("touchend", this.restart.bind(this));
+
+  var keepPlaying = document.querySelector(".keep-playing-button");
+  keepPlaying.addEventListener("click", this.keepPlaying.bind(this));
+  keepPlaying.addEventListener("touchend", this.keepPlaying.bind(this));
 
   // Listen to swipe events
   var touchStartClientX, touchStartClientY;
   var gameContainer = document.getElementsByClassName("game-container")[0];
-  gameContainer.addEventListener("touchstart", function(event) {
+
+  gameContainer.addEventListener("touchstart", function (event) {
     if (event.touches.length > 1) return;
 
     touchStartClientX = event.touches[0].clientX;
     touchStartClientY = event.touches[0].clientY;
     event.preventDefault();
   });
-  gameContainer.addEventListener("touchmove", function(event) {
+
+  gameContainer.addEventListener("touchmove", function (event) {
     event.preventDefault();
   });
-  gameContainer.addEventListener("touchend", function(event) {
-    if (event.touches.length > 0) {
-      return;
-    }
+
+  gameContainer.addEventListener("touchend", function (event) {
+    if (event.touches.length > 0) return;
+
     var dx = event.changedTouches[0].clientX - touchStartClientX;
     var absDx = Math.abs(dx);
 
@@ -91,3 +98,8 @@
   this.emit("restart");
 };
 
+KeyboardInputManager.prototype.keepPlaying = function (event) {
+  event.preventDefault();
+  this.emit("keepPlaying");
+};
+

--- /dev/null
+++ b/js/local_score_manager.js
@@ -1,1 +1,36 @@
+window.fakeStorage = {
+  _data: {},
 
+  setItem: function (id, val) {
+    return this._data[id] = String(val);
+  },
+
+  getItem: function (id) {
+    return this._data.hasOwnProperty(id) ? this._data[id] : undefined;
+  },
+
+  removeItem: function (id) {
+    return delete this._data[id];
+  },
+
+  clear: function () {
+    return this._data = {};
+  }
+};
+
+function LocalScoreManager() {
+  var localSupported = !!window.localStorage;
+
+  this.key     = "bestScore";
+  this.storage = localSupported ? window.localStorage : window.fakeStorage;
+}
+
+LocalScoreManager.prototype.get = function () {
+  return this.storage.getItem(this.key) || 0;
+};
+
+LocalScoreManager.prototype.set = function (score) {
+  this.storage.setItem(this.key, score);
+};
+
+

 Binary files /dev/null and b/meta/apple-touch-icon.png differ
--- a/style/main.css
+++ b/style/main.css
@@ -49,9 +49,13 @@
     top: -50px;
     opacity: 0; } }
 
-.score-container {
+.scores-container {
+  float: right;
+  text-align: right; }
+
+.score-container, .best-container {
   position: relative;
-  float: right;
+  display: inline-block;
   background: #bbada0;
   padding: 15px 25px;
   font-size: 25px;
@@ -60,19 +64,19 @@
   font-weight: bold;
   border-radius: 3px;
   color: white;
-  margin-top: 8px; }
-  .score-container:after {
+  margin-top: 8px;
+  text-align: center; }
+  .score-container:after, .best-container:after {
     position: absolute;
     width: 100%;
     top: 10px;
     left: 0;
-    content: "Score";
     text-transform: uppercase;
     font-size: 13px;
     line-height: 13px;
     text-align: center;
     color: #eee4da; }
-  .score-container .score-addition {
+  .score-container .score-addition, .best-container .score-addition {
     position: absolute;
     right: 30px;
     color: red;
@@ -85,6 +89,12 @@
     -moz-animation: move-up 600ms ease-in;
     -webkit-animation-fill-mode: both;
     -moz-animation-fill-mode: both; }
+
+.score-container:after {
+  content: "Score"; }
+
+.best-container:after {
+  content: "Best"; }
 
 p {
   margin-top: 0;
@@ -179,9 +189,13 @@
       height: 40px;
       line-height: 42px;
       margin-left: 9px; }
+      .game-container .game-message a.keep-playing-button {
+	display: none; }
     .game-container .game-message.game-won {
       background: rgba(237, 194, 46, 0.5);
       color: #f9f6f2; }
+      .game-container .game-message.game-won a.keep-playing-button {
+	display: inline-block; }
     .game-container .game-message.game-won, .game-container .game-message.game-over {
       display: block; }
 
@@ -451,14 +465,17 @@
     padding: 0 20px; }
 
   h1.title {
-    font-size: 50px; }
+    font-size: 27px;
+    margin-top: 15px; }
 
   .container {
     width: 280px;
     margin: 0 auto; }
 
-  .score-container {
-    margin-top: 0; }
+  .score-container, .best-container {
+    margin-top: 0;
+    padding: 15px 10px;
+    min-width: 40px; }
 
   .heading {
     margin-bottom: 10px; }

--- a/style/main.scss
+++ b/style/main.scss
@@ -58,11 +58,16 @@
   }
 }
 
-.score-container {
+.scores-container {
+  float: right;
+  text-align: right;
+}
+
+.score-container, .best-container {
   $height: 25px;
 
   position: relative;
-  float: right;
+  display: inline-block;
   background: $game-container-background;
   padding: 15px 25px;
   font-size: $height;
@@ -72,13 +77,13 @@
   border-radius: 3px;
   color: white;
   margin-top: 8px;
+  text-align: center;
 
   &:after {
     position: absolute;
     width: 100%;
     top: 10px;
     left: 0;
-    content: "Score";
     text-transform: uppercase;
     font-size: 13px;
     line-height: 13px;
@@ -100,6 +105,14 @@
   }
 }
 
+.score-container:after {
+  content: "Score";
+}
+
+.best-container:after {
+  content: "Best"
+}
+
 p {
   margin-top: 0;
   margin-bottom: 10px;
@@ -205,6 +218,10 @@
         @include button;
         margin-left: 9px;
         // margin-top: 59px;
+
+	&.keep-playing-button {
+	  display: none;
+	}
       }
 
       @include animation(fade-in 800ms ease $transition-speed * 12);
@@ -213,6 +230,10 @@
       &.game-won {
         background: rgba($tile-gold-color, .5);
         color: $bright-text-color;
+
+	a.keep-playing-button {
+	  display: inline-block;
+	}
       }
 
       &.game-won, &.game-over {
@@ -433,7 +454,8 @@
   }
 
   h1.title {
-    font-size: 50px;
+    font-size: 27px;
+    margin-top: 15px;
   }
 
   .container {
@@ -441,8 +463,15 @@
     margin: 0 auto;
   }
 
-  .score-container {
+  // .scores-container {
+  //   float: left;
+  //   clear: left;
+  // }
+
+  .score-container, .best-container {
     margin-top: 0;
+    padding: 15px 10px;
+    min-width: 40px;
   }
 
   .heading {

comments