add retry button

index.html

@@ -22,6 +22,11 @@
     <p class="game-intro">Join the numbers and get to the <strong>2048 tile!</strong></p>
 
     <div class="game-container">
+      <div class="game-message">
+        <p></p>
+        <a class="retry-button">Try again</a>
+      </div>
+
       <div class="grid-container">
         <div class="grid-row">
           <div class="grid-cell"></div>

js/game_manager.js

@@ -4,19 +4,28 @@ function GameManager(size, InputManager, Actuator) {
   this.actuator     = new Actuator;
 
   this.startTiles   = 2;
+
+  this.inputManager.on("move", this.move.bind(this));
+  this.inputManager.on("restart", this.restart.bind(this));
+
+  this.setup();
+}
+
+// Restart the game
+GameManager.prototype.restart = function () {
+  this.actuator.restart();
+  this.setup();
+};
+
+// Set up the game
+GameManager.prototype.setup = function () {
   this.grid         = new Grid(this.size);
 
   this.score        = 0;
   this.over         = false;
   this.won          = false;
 
-  this.inputManager.on("move", this.move.bind(this));
+  // Add the initial tiles
-
-  this.setup();
-}
-
-// Set up the game
-GameManager.prototype.setup = function () {
   this.addStartTiles();
 
   // Update the actuator

js/html_actuator.js

@@ -1,7 +1,7 @@
 function HTMLActuator() {
-  this.tileContainer  = document.getElementsByClassName("tile-container")[0];
+  this.tileContainer    = document.getElementsByClassName("tile-container")[0];
-  this.gameContainer  = document.getElementsByClassName("game-container")[0];
+  this.scoreContainer   = document.getElementsByClassName("score-container")[0];
-  this.scoreContainer = document.getElementsByClassName("score-container")[0];
+  this.messageContainer = document.getElementsByClassName("game-message")[0];
 
   this.score = 0;
 }
@@ -27,6 +27,10 @@ HTMLActuator.prototype.actuate = function (grid, metadata) {
   });
 };
 
+HTMLActuator.prototype.restart = function () {
+  this.clearMessage();
+};
+
 HTMLActuator.prototype.clearContainer = function (container) {
   while (container.firstChild) {
     container.removeChild(container.firstChild);
@@ -77,7 +81,7 @@ HTMLActuator.prototype.updateScore = function (score) {
 
   this.scoreContainer.textContent = this.score;
 
-  if (difference) {
+  if (difference > 0) {
     var addition = document.createElement("div");
     addition.classList.add("score-addition");
     addition.textContent = "+" + difference;
@@ -87,6 +91,15 @@ HTMLActuator.prototype.updateScore = function (score) {
 };
 
 HTMLActuator.prototype.message = function (won) {
-  var type = won ? "game-won" : "game-over";
+  if (ga) ga("send", "event", "game", "end", type, this.score);
-  this.gameContainer.classList.add(type);
+
+  var type    = won ? "game-won" : "game-over";
+  var message = won ? "You win!" : "Game over!"
+
+  this.messageContainer.classList.add(type);
+  this.messageContainer.getElementsByTagName("p")[0].textContent = message;
+};
+
+HTMLActuator.prototype.clearMessage = function () {
+  this.messageContainer.classList.remove("game-won", "game-over");
 };

js/keyboard_input_manager.js

@@ -40,4 +40,10 @@ KeyboardInputManager.prototype.listen = function () {
       self.emit("move", mapped);
     }
   });
+
+  var retry = document.getElementsByClassName("retry-button")[0];
+  retry.addEventListener("click", function (event) {
+    event.preventDefault();
+    self.emit("restart");
+  });
 };

style/main.css

@@ -94,7 +94,8 @@ p {
 a {
   color: #776e65;
   font-weight: bold;
-  text-decoration: underline; }
+  text-decoration: underline;
+  cursor: pointer; }
 
 strong.important {
   text-transform: uppercase; }
@@ -143,30 +144,41 @@ hr {
   width: 500px;
   height: 500px;
   box-sizing: border-box; }
-  .game-container.game-over:after, .game-container.game-won:after {
+  .game-container .game-message {
+    display: none;
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
-    display: block;
     background: rgba(238, 228, 218, 0.5);
-    text-align: center;
-    height: 500px;
-    line-height: 500px;
     z-index: 100;
-    font-size: 60px;
+    text-align: center;
-    font-weight: bold;
     -webkit-animation: fade-in 800ms ease 1200ms;
     -moz-animation: fade-in 800ms ease 1200ms;
     -webkit-animation-fill-mode: both;
     -moz-animation-fill-mode: both; }
-  .game-container.game-over:after {
+    .game-container .game-message p {
-    content: "Game over!"; }
+      font-size: 60px;
-  .game-container.game-won:after {
+      font-weight: bold;
-    content: "You win!";
+      height: 60px;
-    background: rgba(237, 194, 46, 0.5);
+      line-height: 60px;
-    color: #f9f6f2; }
+      margin-top: 222px; }
+    .game-container .game-message a {
+      display: inline-block;
+      background: #a69382;
+      border-radius: 3px;
+      padding: 0 20px;
+      text-decoration: none;
+      color: #f9f6f2;
+      height: 40px;
+      line-height: 42px;
+      margin-top: 59px; }
+    .game-container .game-message.game-won {
+      background: rgba(237, 194, 46, 0.5);
+      color: #f9f6f2; }
+    .game-container .game-message.game-won, .game-container .game-message.game-over {
+      display: block; }
 
 .grid-container {
   position: absolute;

style/main.scss

@@ -110,6 +110,7 @@ a {
   color: $text-color;
   font-weight: bold;
   text-decoration: underline;
+  cursor: pointer;
 }
 
 strong {
@@ -156,35 +157,52 @@ hr {
   height: $field-width;
   box-sizing: border-box;
 
-  &.game-over, &.game-won {
+  .game-message {
-    &:after {
+    display: none;
-      position: absolute;
+
-      top: 0;
+    position: absolute;
-      right: 0;
+    top: 0;
-      bottom: 0;
+    right: 0;
-      left: 0;
+    bottom: 0;
-      display: block;
+    left: 0;
-      background: rgba($tile-color, .5);
+    background: rgba($tile-color, .5);
-      text-align: center;
+    z-index: 100;
-      height: $field-width;
+
-      line-height: $field-width;
+    text-align: center;
-      z-index: 100;
+
+    p {
       font-size: 60px;
       font-weight: bold;
-
+      height: 60px;
-      @include animation(fade-in 800ms ease $transition-speed * 12);
+      line-height: 60px;
-      @include animation-fill-mode(both);
+      margin-top: 222px;
+      // height: $field-width;
+      // line-height: $field-width;
     }
-  }
 
-  &.game-over:after {
+    a {
-    content: "Game over!";
+      display: inline-block;
-  }
+      background: darken($game-container-background, 10%);
+      border-radius: 3px;
+      padding: 0 20px;
+      text-decoration: none;
+      color: $bright-text-color;
+      height: 40px;
+      line-height: 42px;
+      margin-top: 59px;
+    }
 
-  &.game-won:after {
+    @include animation(fade-in 800ms ease $transition-speed * 12);
-    content: "You win!";
+    @include animation-fill-mode(both);
-    background: rgba($tile-gold-color, .5);
+
-    color: $bright-text-color;
+    &.game-won {
+      background: rgba($tile-gold-color, .5);
+      color: $bright-text-color;
+    }
+
+    &.game-won, &.game-over {
+      display: block;
+    }
   }
 }