Store best score in localStorage

Dependency injection and hide best score for incompatible browsers

index.html

@@ -11,6 +11,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>
 
@@ -22,7 +23,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>
 

js/application.js

 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

-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

-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

+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;
+};
+

style/main.css

@@ -49,9 +49,12 @@ h1.title {
     top: -50px;
     opacity: 0; } }
 
-.score-container {
+.scores-container {
+  float: right; }
+
+.score-container, .best-container {
   position: relative;
-  float: right;
+  display: inline-block;
   background: #bbada0;
   padding: 15px 25px;
   font-size: 25px;
@@ -60,19 +63,19 @@ h1.title {
   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;
@@ -86,6 +89,12 @@ h1.title {
     -webkit-animation-fill-mode: both;
     -moz-animation-fill-mode: both; }
 
+.score-container:after {
+  content: "Score"; }
+
+.best-container:after {
+  content: "Best"; }
+
 p {
   margin-top: 0;
   margin-bottom: 10px;

style/main.scss

@@ -58,11 +58,15 @@ h1.title {
   }
 }
 
-.score-container {
+.scores-container {
+  float: 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 +76,13 @@ h1.title {
   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 +104,14 @@ h1.title {
   }
 }
 
+.score-container:after {
+  content: "Score";
+}
+
+.best-container:after {
+  content: "Best"
+}
+
 p {
   margin-top: 0;
   margin-bottom: 10px;