add game restart confirmation

Author: uberspot

index.html

@@ -37,6 +37,8 @@ <h1 class="title">2048</h1>
         <div class="lower">
 	        <a class="keep-playing-button">Keep going</a>
           <a class="retry-button">Try again</a>
+          <a class="confirm-button">OK</a>
+          <a class="cancel-button">Cancel</a>
         </div>
       </div>
 

js/game_manager.js

@@ -8,6 +8,7 @@ function GameManager(size, InputManager, Actuator, StorageManager) {
 
   this.inputManager.on("move", this.move.bind(this));
   this.inputManager.on("restart", this.restart.bind(this));
+  this.inputManager.on("restartWithConfirmation", this.restartWithConfirmation.bind(this));
   this.inputManager.on("keepPlaying", this.keepPlaying.bind(this));
 
   this.setup();
@@ -20,6 +21,13 @@ GameManager.prototype.restart = function () {
   this.setup();
 };
 
+// Restart the game after user confirmation
+
+GameManager.prototype.restartWithConfirmation = function () {
+    // Open confirm message
+    this.actuator.promptRestart();
+};
+
 // Keep playing after winning (allows going over 2048)
 GameManager.prototype.keepPlaying = function () {
   this.keepPlaying = true;

js/html_actuator.js

@@ -132,8 +132,15 @@ HTMLActuator.prototype.message = function (won) {
   this.messageContainer.getElementsByTagName("p")[0].textContent = message;
 };
 
+HTMLActuator.prototype.promptRestart = function () {
+  var message = "Start a new game?";
+  this.messageContainer.classList.add("restart-game");
+  this.messageContainer.getElementsByTagName("p")[0].textContent = message;
+};
+
 HTMLActuator.prototype.clearMessage = function () {
   // IE only takes one value to remove at a time.
   this.messageContainer.classList.remove("game-won");
   this.messageContainer.classList.remove("game-over");
+  this.messageContainer.classList.remove("restart-game");
 };

js/keyboard_input_manager.js

@@ -70,8 +70,10 @@ KeyboardInputManager.prototype.listen = function () {
 
   // Respond to button presses
   this.bindButtonPress(".retry-button", this.restart);
-  this.bindButtonPress(".restart-button", this.restart);
+  this.bindButtonPress(".restart-button", this.restartWithConfirmation);
   this.bindButtonPress(".keep-playing-button", this.keepPlaying);
+  this.bindButtonPress(".confirm-button", this.restart);
+  this.bindButtonPress(".cancel-button", this.keepPlaying);
 
   // Respond to swipe events
   var touchStartClientX, touchStartClientY;
@@ -132,6 +134,11 @@ KeyboardInputManager.prototype.restart = function (event) {
   this.emit("restart");
 };
 
+KeyboardInputManager.prototype.restartWithConfirmation = function (event) {
+  event.preventDefault();
+  this.emit("restartWithConfirmation");
+};
+
 KeyboardInputManager.prototype.keepPlaying = function (event) {
   event.preventDefault();
   this.emit("keepPlaying");

style/main.css

@@ -188,16 +188,30 @@ hr {
       height: 40px;
       line-height: 42px;
       margin-left: 9px; }
-      .game-container .game-message a.keep-playing-button {
+      .game-container .game-message a.keep-playing-button, .game-container .game-message a.confirm-button, .game-container .game-message a.cancel-button  {
         display: none; }
     .game-container .game-message.game-won {
       background: rgba(237, 194, 46, 0.5);
       color: #f9f6f2; }
       .game-container .game-message.game-won a.keep-playing-button {
         display: inline-block; }
-    .game-container .game-message.game-won, .game-container .game-message.game-over {
+    .game-container .game-message.game-won, .game-container .game-message.game-over, .game-container .game-message.restart-game  {
       display: block; }
 
+.game-container .game-message.restart-game {
+   -webkit-animation: fade-in 400ms ease 100ms;
+   -moz-animation: fade-in 400ms ease 100ms;
+   animation: fade-in 400ms ease 100ms;
+   -webkit-animation-fill-mode: both;
+   -moz-animation-fill-mode: both;
+   animation-fill-mode: both; }
+.game-container .game-message.restart-game .lower {
+   margin-top: 85px; }
+.game-container .game-message.restart-game .lower a.confirm-button, .game-container .game-message.restart-game .lower a.cancel-button {
+   display: inline-block; }
+.game-container .game-message.restart-game .lower a.retry-button {
+   display: none; }
+
 .grid-container {
   position: absolute;
   z-index: 1; }
@@ -590,15 +604,28 @@ hr {
         height: 40px;
         line-height: 42px;
         margin-left: 9px; }
-        .game-container .game-message a.keep-playing-button {
+        .game-container .game-message a.keep-playing-button, .game-container .game-message a.confirm-button, .game-container .game-message a.cancel-button {
           display: none; }
       .game-container .game-message.game-won {
         background: rgba(237, 194, 46, 0.5);
         color: #f9f6f2; }
         .game-container .game-message.game-won a.keep-playing-button {
           display: inline-block; }
-      .game-container .game-message.game-won, .game-container .game-message.game-over {
+      .game-container .game-message.game-won, .game-container .game-message.game-over, .game-container .game-message.restart-game  {
         display: block; }
+.game-container .game-message.restart-game {
+ -webkit-animation: fade-in 400ms ease 100ms;
+ -moz-animation: fade-in 400ms ease 100ms;
+ animation: fade-in 400ms ease 100ms;
+ -webkit-animation-fill-mode: both;
+ -moz-animation-fill-mode: both;
+  animation-fill-mode: both; }
+.game-container .game-message.restart-game .lower {
+  margin-top: 85px; }
+ .game-container .game-message.restart-game .lower a.confirm-button, .game-container .game-message.restart-game .lower a.cancel-button {
+  display: inline-block; }
+.game-container .game-message.restart-game .lower a.retry-button {
+  display: none; }
 
   .grid-container {
     position: absolute;