fix conflict

js/application.js

@@ -1,4 +1,4 @@
 // 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);
 });

js/game_manager.js

@@ -1,6 +1,7 @@
-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;
@@ -51,11 +52,17 @@ GameManager.prototype.addRandomTile = function () {
 
 // 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()
   });
+
 };
 
 // Save all tile positions and remove merger info
@@ -204,8 +211,6 @@ GameManager.prototype.tileMatchesAvailable = function () {
           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

js/html_actuator.js

@@ -1,8 +1,9 @@
 function HTMLActuator() {
-  this.tileContainer    = document.getElementsByClassName("tile-container")[0];
-  this.scoreContainer   = document.getElementsByClassName("score-container")[0];
-  this.messageContainer = document.getElementsByClassName("game-message")[0];
-  this.sharingContainer = document.getElementsByClassName("score-sharing")[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.sharingContainer = document.querySelector(".score-sharing");
 
   this.score = 0;
 }
@@ -22,6 +23,7 @@ HTMLActuator.prototype.actuate = function (grid, metadata) {
     });
 
     self.updateScore(metadata.score);
+    self.updateBestScore(metadata.bestScore);
 
     if (metadata.over) self.message(false); // You lose
     if (metadata.won) self.message(true); // You win!
@@ -29,7 +31,9 @@ HTMLActuator.prototype.actuate = function (grid, metadata) {
 };
 
 HTMLActuator.prototype.restart = function () {
-  if (ga) ga("send", "event", "game", "restart");
+  if (typeof ga !== "undefined") {
+    ga("send", "event", "game", "restart");
+  }
   this.clearMessage();
 };
 
@@ -105,11 +109,17 @@ HTMLActuator.prototype.updateScore = function (score) {
   }
 };
 
+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!"
+  var message = won ? "You win!" : "Game over!";
 
-  if (ga) ga("send", "event", "game", "end", type, this.score);
+  if (typeof ga !== "undefined") {
+    ga("send", "event", "game", "end", type, this.score);
+  }
 
   this.messageContainer.classList.add(type);
   this.messageContainer.getElementsByTagName("p")[0].textContent = message;

js/keyboard_input_manager.js

@@ -59,20 +59,22 @@ KeyboardInputManager.prototype.listen = function () {
   // 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);
 

js/local_score_manager.js

@@ -0,0 +1,32 @@
+window.fakeStorage = {
+  _data       : {},
+  setItem     : function (id, val) {
+    console.log("set");
+    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 () {
+  var score = this.storage.getItem(this.key);
+  if (typeof score === "undefined" || score === null) {
+    score = 0;
+  }
+  return score;
+};
+
+LocalScoreManager.prototype.set = function (score) {
+  this.storage.setItem(this.key, score);
+};
+