add score and endgame
[2048.git] / js / html_actuator.js
blob:a/js/html_actuator.js -> blob:b/js/html_actuator.js
--- a/js/html_actuator.js
+++ b/js/html_actuator.js
@@ -1,14 +1,16 @@
 function HTMLActuator() {
-  this.tileContainer  = document.getElementsByClassName("tile-container")[0];
-  this.gameContainer  = document.getElementsByClassName("game-container")[0];
-  this.scoreContainer = document.getElementsByClassName("score-container")[0];
+  this.tileContainer    = document.getElementsByClassName("tile-container")[0];
+  this.scoreContainer   = document.getElementsByClassName("score-container")[0];
+  this.messageContainer = document.getElementsByClassName("game-message")[0];
+
+  this.score = 0;
 }
 
 HTMLActuator.prototype.actuate = function (grid, metadata) {
   var self = this;
 
   window.requestAnimationFrame(function () {
-    self.clearContainer();
+    self.clearContainer(self.tileContainer);
 
     grid.cells.forEach(function (column) {
       column.forEach(function (cell) {
@@ -20,15 +22,18 @@
 
     self.updateScore(metadata.score);
 
-    if (metadata.over) {
-      self.gameOver();
-    }
+    if (metadata.over) self.message(false); // You lose
+    if (metadata.won) self.message(true); // You win!
   });
 };
 
-HTMLActuator.prototype.clearContainer = function () {
-  while (this.tileContainer.firstChild) {
-    this.tileContainer.removeChild(this.tileContainer.firstChild);
+HTMLActuator.prototype.restart = function () {
+  this.clearMessage();
+};
+
+HTMLActuator.prototype.clearContainer = function (container) {
+  while (container.firstChild) {
+    container.removeChild(container.firstChild);
   }
 };
 
@@ -39,24 +44,37 @@
   var position  = tile.previousPosition || { x: tile.x, y: tile.y };
   positionClass = this.positionClass(position);
 
-  element.classList.add("tile", "tile-" + tile.value, positionClass);
+  // We can't use classlist because it somehow glitches when replacing classes
+  var classes = ["tile", "tile-" + tile.value, positionClass];
+  this.applyClasses(element, classes);
+
   element.textContent = tile.value;
 
-  this.tileContainer.appendChild(element);
-
   if (tile.previousPosition) {
+    // Make sure that the tile gets rendered in the previous position first
     window.requestAnimationFrame(function () {
-      element.classList.remove(element.classList[2]);
-      element.classList.add(self.positionClass({ x: tile.x, y: tile.y }));
+      classes[2] = self.positionClass({ x: tile.x, y: tile.y });
+      self.applyClasses(element, classes); // Update the position
     });
   } else if (tile.mergedFrom) {
-    element.classList.add("tile-merged");
+    classes.push("tile-merged");
+    this.applyClasses(element, classes);
+
+    // Render the tiles that merged
     tile.mergedFrom.forEach(function (merged) {
       self.addTile(merged);
     });
   } else {
-    element.classList.add("tile-new");
+    classes.push("tile-new");
+    this.applyClasses(element, classes);
   }
+
+  // Put the tile on the board
+  this.tileContainer.appendChild(element);
+};
+
+HTMLActuator.prototype.applyClasses = function (element, classes) {
+  element.setAttribute("class", classes.join(" "));
 };
 
 HTMLActuator.prototype.normalizePosition = function (position) {
@@ -69,10 +87,33 @@
 };
 
 HTMLActuator.prototype.updateScore = function (score) {
-  this.scoreContainer.textContent = score;
+  this.clearContainer(this.scoreContainer);
+
+  var difference = score - this.score;
+  this.score = score;
+
+  this.scoreContainer.textContent = this.score;
+
+  if (difference > 0) {
+    var addition = document.createElement("div");
+    addition.classList.add("score-addition");
+    addition.textContent = "+" + difference;
+
+    this.scoreContainer.appendChild(addition);
+  }
 };
 
-HTMLActuator.prototype.gameOver = function () {
-  this.gameContainer.classList.add("game-over");
+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);
+
+  this.messageContainer.classList.add(type);
+  this.messageContainer.getElementsByTagName("p")[0].textContent = message;
 };
 
+HTMLActuator.prototype.clearMessage = function () {
+  this.messageContainer.classList.remove("game-won", "game-over");
+};
+

comments