Store best score in localStorage

Dependency injection and hide best score for incompatible browsers

js/application.js

@@ -1,6 +1,6 @@
 document.addEventListener("DOMContentLoaded", function () {
   // 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,7 +1,8 @@
-function GameManager(size, InputManager, Actuator) {
+function GameManager(size, InputManager, Actuator, ScoreManager) {
   this.size         = size; // Size of the grid
   this.inputManager = new InputManager;
-  this.actuator     = new Actuator;
+  this.scoreManager = new ScoreManager;
+  this.actuator     = new Actuator(this.scoreManager.isSupported());
 
   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

js/html_actuator.js

@@ -1,9 +1,15 @@
-function HTMLActuator() {
+function HTMLActuator(bestScoreSupported) {
   this.tileContainer    = document.getElementsByClassName("tile-container")[0];
   this.scoreContainer   = document.getElementsByClassName("score-container")[0];
+  this.bestContainer    = document.getElementsByClassName("best-container")[0];
   this.messageContainer = document.getElementsByClassName("game-message")[0];
 
   this.score = 0;
+  this.bestScoreSupported = bestScoreSupported;
+
+  if (!this.bestScoreSupported) {
+    this.bestContainer.style.display = "none";
+  }
 }
 
 HTMLActuator.prototype.actuate = function (grid, metadata) {
@@ -21,6 +27,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!
@@ -103,6 +110,12 @@ HTMLActuator.prototype.updateScore = function (score) {
   }
 };
 
+HTMLActuator.prototype.updateBestScore = function (bestScore) {
+  if (this.bestScoreSupported) {
+    this.bestContainer.textContent = bestScore;
+  }
+};
+
 HTMLActuator.prototype.message = function (won) {
   var type    = won ? "game-won" : "game-over";
   var message = won ? "You win!" : "Game over!"

js/local_score_manager.js

@@ -0,0 +1,24 @@
+function LocalScoreManager() {
+  this.key = 'bestScore';
+}
+
+LocalScoreManager.prototype.get = function () {
+  if (!this.isSupported()) {
+    return 0;
+  }
+
+  return localStorage.getItem(this.key);
+};
+
+LocalScoreManager.prototype.set = function (score) {
+  if (!this.isSupported()) {
+    return false;
+  }
+
+  localStorage.setItem(this.key, score);
+};
+
+LocalScoreManager.prototype.isSupported = function () {
+  return !!window.localStorage;
+};
+