From e61ef188242658ae97da139571e87195f69f2543 Mon Sep 17 00:00:00 2001
From: Laurent Margirier <laurent.margirier@gmail.com>
Date: Wed, 12 Mar 2014 12:27:27 +0100
Subject: [PATCH 1/5] Endless Game. Allow user to continue the game.

- main.css isn't compiled
- a special class `.tile-gold` is added to tiles above 2048
---
 index.html                   |  1 +
 js/game_manager.js           | 23 +++++++++++++++++++++--
 js/html_actuator.js          | 29 +++++++++++++++++++++++------
 js/keyboard_input_manager.js | 10 +++++++++-
 style/main.scss              |  8 ++++++++
 5 files changed, 62 insertions(+), 9 deletions(-)

diff --git a/index.html b/index.html
index c61559caa6..638fec890e 100644
--- a/index.html
+++ b/index.html
@@ -26,6 +26,7 @@ <h1 class="title">2048</h1>
       <div class="game-message">
         <p></p>
         <div class="lower">
+	  <a class="keep-playing-button">Keep playing</a>
           <a class="retry-button">Try again</a>
         </div>
       </div>
diff --git a/js/game_manager.js b/js/game_manager.js
index 01ce04c3bb..95f75e58ad 100644
--- a/js/game_manager.js
+++ b/js/game_manager.js
@@ -8,6 +8,7 @@ function GameManager(size, InputManager, Actuator, ScoreManager) {
 
   this.inputManager.on("move", this.move.bind(this));
   this.inputManager.on("restart", this.restart.bind(this));
+  this.inputManager.on("keepPlaying", this.keepPlaying.bind(this));
 
   this.setup();
 }
@@ -18,6 +19,22 @@ GameManager.prototype.restart = function () {
   this.setup();
 };
 
+// Keep playing after winning
+GameManager.prototype.keepPlaying = function () {
+  this.keepPlaying = true;
+  this.actuator.keepPlaying();
+};
+
+GameManager.prototype.isGameOver = function() {
+  if (this.over || (this.won && !this.keepPlaying) ) {
+    return true;
+  }
+  else {
+    return false;
+  }
+}
+
+
 // Set up the game
 GameManager.prototype.setup = function () {
   this.grid         = new Grid(this.size);
@@ -25,6 +42,7 @@ GameManager.prototype.setup = function () {
   this.score        = 0;
   this.over         = false;
   this.won          = false;
+  this.keepPlaying  = false;
 
   // Add the initial tiles
   this.addStartTiles();
@@ -60,7 +78,8 @@ GameManager.prototype.actuate = function () {
     score:     this.score,
     over:      this.over,
     won:       this.won,
-    bestScore: this.scoreManager.get()
+    bestScore: this.scoreManager.get(),
+    gameOver:  this.isGameOver()
   });
 
 };
@@ -87,7 +106,7 @@ GameManager.prototype.move = function (direction) {
   // 0: up, 1: right, 2:down, 3: left
   var self = this;
 
-  if (this.over || this.won) return; // Don't do anything if the game's over
+  if (this.isGameOver()) return; // Don't do anything if the game's over
 
   var cell, tile;
 
diff --git a/js/html_actuator.js b/js/html_actuator.js
index 5562ce9c11..2ca979eb7f 100644
--- a/js/html_actuator.js
+++ b/js/html_actuator.js
@@ -24,8 +24,11 @@ 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!
+    if (metadata.gameOver) {
+      if (metadata.over) self.message(false); // You lose
+      else if (metadata.won) self.message(true); // You win!
+    }
+
   });
 };
 
@@ -33,6 +36,10 @@ HTMLActuator.prototype.restart = function () {
   this.clearMessage();
 };
 
+HTMLActuator.prototype.keepPlaying = function () {
+  this.clearMessage();
+}
+
 HTMLActuator.prototype.clearContainer = function (container) {
   while (container.firstChild) {
     container.removeChild(container.firstChild);
@@ -42,12 +49,13 @@ HTMLActuator.prototype.clearContainer = function (container) {
 HTMLActuator.prototype.addTile = function (tile) {
   var self = this;
 
-  var element   = document.createElement("div");
-  var position  = tile.previousPosition || { x: tile.x, y: tile.y };
-  positionClass = this.positionClass(position);
+  var element       = document.createElement("div");
+  var position      = tile.previousPosition || { x: tile.x, y: tile.y };
+  var positionClass = this.positionClass(position);
+  var styleClass    = this.styleClass(tile);
 
   // We can't use classlist because it somehow glitches when replacing classes
-  var classes = ["tile", "tile-" + tile.value, positionClass];
+  var classes = ["tile", styleClass, positionClass];
   this.applyClasses(element, classes);
 
   element.textContent = tile.value;
@@ -88,6 +96,15 @@ HTMLActuator.prototype.positionClass = function (position) {
   return "tile-position-" + position.x + "-" + position.y;
 };
 
+HTMLActuator.prototype.styleClass = function (tile) {
+  var className = 'tile-'+tile.value;
+
+  if (tile.value > 2048 ) {
+    className = className+' tile-gold';
+  }
+  return className;
+};
+
 HTMLActuator.prototype.updateScore = function (score) {
   this.clearContainer(this.scoreContainer);
 
diff --git a/js/keyboard_input_manager.js b/js/keyboard_input_manager.js
index 24dde7a123..431b4a5cde 100644
--- a/js/keyboard_input_manager.js
+++ b/js/keyboard_input_manager.js
@@ -53,9 +53,12 @@ KeyboardInputManager.prototype.listen = function () {
     }
   });
 
-  var retry = document.getElementsByClassName("retry-button")[0];
+  var retry = document.querySelector(".retry-button");
   retry.addEventListener("click", this.restart.bind(this));
 
+  var keepPlaying = document.querySelector(".keep-playing-button");
+  keepPlaying.addEventListener("click", this.keepPlaying.bind(this));
+
   // Listen to swipe events
   var touchStartClientX, touchStartClientY;
   var gameContainer = document.getElementsByClassName("game-container")[0];
@@ -92,3 +95,8 @@ KeyboardInputManager.prototype.restart = function (event) {
   event.preventDefault();
   this.emit("restart");
 };
+
+KeyboardInputManager.prototype.keepPlaying = function (event) {
+  event.preventDefault();
+  this.emit("keepPlaying");
+};
diff --git a/style/main.scss b/style/main.scss
index b5e2609998..f6660d0901 100644
--- a/style/main.scss
+++ b/style/main.scss
@@ -218,6 +218,10 @@ hr {
         @include button;
         margin-left: 9px;
         // margin-top: 59px;
+
+	&.keep-playing-button {
+	  display: none;
+	}
       }
 
       @include animation(fade-in 800ms ease $transition-speed * 12);
@@ -226,6 +230,10 @@ hr {
       &.game-won {
         background: rgba($tile-gold-color, .5);
         color: $bright-text-color;
+
+	a.keep-playing-button {
+	  display: inline-block;
+	}
       }
 
       &.game-won, &.game-over {

From 7b4c2c171fd9b4dbc52d8c53f6db8fe12c4e7eca Mon Sep 17 00:00:00 2001
From: Laurent Margirier <laurent.margirier@gmail.com>
Date: Wed, 12 Mar 2014 13:37:08 +0100
Subject: [PATCH 2/5] compile main.css

---
 style/main.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/style/main.css b/style/main.css
index c28f9be5cc..46ece197c6 100644
--- a/style/main.css
+++ b/style/main.css
@@ -189,9 +189,13 @@ hr {
       height: 40px;
       line-height: 42px;
       margin-left: 9px; }
+      .game-container .game-message a.keep-playing-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 {
       display: block; }
 

From 9626e2b060485b69d944a70ad670e251ba014aa4 Mon Sep 17 00:00:00 2001
From: Laurent Margirier <laurent.margirier@gmail.com>
Date: Wed, 12 Mar 2014 12:27:27 +0100
Subject: [PATCH 3/5] Endless Game. Allow user to continue the game.

- main.css isn't compiled
- a special class `.tile-gold` is added to tiles above 2048
---
 index.html                   |  1 +
 js/game_manager.js           | 23 +++++++++++++++++++++--
 js/html_actuator.js          | 29 +++++++++++++++++++++++------
 js/keyboard_input_manager.js | 10 +++++++++-
 style/main.scss              |  8 ++++++++
 5 files changed, 62 insertions(+), 9 deletions(-)

diff --git a/index.html b/index.html
index 50469057a3..206c639017 100644
--- a/index.html
+++ b/index.html
@@ -28,6 +28,7 @@ <h1 class="title">2048</h1>
       <div class="game-message">
         <p></p>
         <div class="lower">
+	  <a class="keep-playing-button">Keep playing</a>
           <a class="retry-button">Try again</a>
         </div>
       </div>
diff --git a/js/game_manager.js b/js/game_manager.js
index 01ce04c3bb..95f75e58ad 100644
--- a/js/game_manager.js
+++ b/js/game_manager.js
@@ -8,6 +8,7 @@ function GameManager(size, InputManager, Actuator, ScoreManager) {
 
   this.inputManager.on("move", this.move.bind(this));
   this.inputManager.on("restart", this.restart.bind(this));
+  this.inputManager.on("keepPlaying", this.keepPlaying.bind(this));
 
   this.setup();
 }
@@ -18,6 +19,22 @@ GameManager.prototype.restart = function () {
   this.setup();
 };
 
+// Keep playing after winning
+GameManager.prototype.keepPlaying = function () {
+  this.keepPlaying = true;
+  this.actuator.keepPlaying();
+};
+
+GameManager.prototype.isGameOver = function() {
+  if (this.over || (this.won && !this.keepPlaying) ) {
+    return true;
+  }
+  else {
+    return false;
+  }
+}
+
+
 // Set up the game
 GameManager.prototype.setup = function () {
   this.grid         = new Grid(this.size);
@@ -25,6 +42,7 @@ GameManager.prototype.setup = function () {
   this.score        = 0;
   this.over         = false;
   this.won          = false;
+  this.keepPlaying  = false;
 
   // Add the initial tiles
   this.addStartTiles();
@@ -60,7 +78,8 @@ GameManager.prototype.actuate = function () {
     score:     this.score,
     over:      this.over,
     won:       this.won,
-    bestScore: this.scoreManager.get()
+    bestScore: this.scoreManager.get(),
+    gameOver:  this.isGameOver()
   });
 
 };
@@ -87,7 +106,7 @@ GameManager.prototype.move = function (direction) {
   // 0: up, 1: right, 2:down, 3: left
   var self = this;
 
-  if (this.over || this.won) return; // Don't do anything if the game's over
+  if (this.isGameOver()) return; // Don't do anything if the game's over
 
   var cell, tile;
 
diff --git a/js/html_actuator.js b/js/html_actuator.js
index 04a137b9a3..38d16eb211 100644
--- a/js/html_actuator.js
+++ b/js/html_actuator.js
@@ -24,8 +24,11 @@ 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!
+    if (metadata.gameOver) {
+      if (metadata.over) self.message(false); // You lose
+      else if (metadata.won) self.message(true); // You win!
+    }
+
   });
 };
 
@@ -33,6 +36,10 @@ HTMLActuator.prototype.restart = function () {
   this.clearMessage();
 };
 
+HTMLActuator.prototype.keepPlaying = function () {
+  this.clearMessage();
+}
+
 HTMLActuator.prototype.clearContainer = function (container) {
   while (container.firstChild) {
     container.removeChild(container.firstChild);
@@ -42,12 +49,13 @@ HTMLActuator.prototype.clearContainer = function (container) {
 HTMLActuator.prototype.addTile = function (tile) {
   var self = this;
 
-  var element   = document.createElement("div");
-  var position  = tile.previousPosition || { x: tile.x, y: tile.y };
-  positionClass = this.positionClass(position);
+  var element       = document.createElement("div");
+  var position      = tile.previousPosition || { x: tile.x, y: tile.y };
+  var positionClass = this.positionClass(position);
+  var styleClass    = this.styleClass(tile);
 
   // We can't use classlist because it somehow glitches when replacing classes
-  var classes = ["tile", "tile-" + tile.value, positionClass];
+  var classes = ["tile", styleClass, positionClass];
   this.applyClasses(element, classes);
 
   element.textContent = tile.value;
@@ -88,6 +96,15 @@ HTMLActuator.prototype.positionClass = function (position) {
   return "tile-position-" + position.x + "-" + position.y;
 };
 
+HTMLActuator.prototype.styleClass = function (tile) {
+  var className = 'tile-'+tile.value;
+
+  if (tile.value > 2048 ) {
+    className = className+' tile-gold';
+  }
+  return className;
+};
+
 HTMLActuator.prototype.updateScore = function (score) {
   this.clearContainer(this.scoreContainer);
 
diff --git a/js/keyboard_input_manager.js b/js/keyboard_input_manager.js
index b85c8c2dca..84d830b379 100644
--- a/js/keyboard_input_manager.js
+++ b/js/keyboard_input_manager.js
@@ -53,10 +53,13 @@ KeyboardInputManager.prototype.listen = function () {
     }
   });
 
-  var retry = document.getElementsByClassName("retry-button")[0];
+  var retry = document.querySelector(".retry-button");
   retry.addEventListener("click", this.restart.bind(this));
   retry.addEventListener("touchend", this.restart.bind(this));
 
+  var keepPlaying = document.querySelector(".keep-playing-button");
+  keepPlaying.addEventListener("click", this.keepPlaying.bind(this));
+
   // Listen to swipe events
   var touchStartClientX, touchStartClientY;
   var gameContainer = document.getElementsByClassName("game-container")[0];
@@ -93,3 +96,8 @@ KeyboardInputManager.prototype.restart = function (event) {
   event.preventDefault();
   this.emit("restart");
 };
+
+KeyboardInputManager.prototype.keepPlaying = function (event) {
+  event.preventDefault();
+  this.emit("keepPlaying");
+};
diff --git a/style/main.scss b/style/main.scss
index b5e2609998..f6660d0901 100644
--- a/style/main.scss
+++ b/style/main.scss
@@ -218,6 +218,10 @@ hr {
         @include button;
         margin-left: 9px;
         // margin-top: 59px;
+
+	&.keep-playing-button {
+	  display: none;
+	}
       }
 
       @include animation(fade-in 800ms ease $transition-speed * 12);
@@ -226,6 +230,10 @@ hr {
       &.game-won {
         background: rgba($tile-gold-color, .5);
         color: $bright-text-color;
+
+	a.keep-playing-button {
+	  display: inline-block;
+	}
       }
 
       &.game-won, &.game-over {

From e7be14d65a173a19065784fa3de80d93384754d5 Mon Sep 17 00:00:00 2001
From: Laurent Margirier <laurent.margirier@gmail.com>
Date: Wed, 12 Mar 2014 13:37:08 +0100
Subject: [PATCH 4/5] compile main.css

---
 style/main.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/style/main.css b/style/main.css
index c28f9be5cc..6bb58d326c 100644
--- a/style/main.css
+++ b/style/main.css
@@ -189,9 +189,13 @@ hr {
       height: 40px;
       line-height: 42px;
       margin-left: 9px; }
+      .game-container .game-message a.keep-playing-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 {
       display: block; }
 

From bd62716d604fd30fe3e0ffa015161279afa47461 Mon Sep 17 00:00:00 2001
From: Laurent Margirier <laurent.margirier@gmail.com>
Date: Thu, 13 Mar 2014 10:17:57 +0100
Subject: [PATCH 5/5] add touchend event (see PR #32)

---
 js/keyboard_input_manager.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/js/keyboard_input_manager.js b/js/keyboard_input_manager.js
index 84d830b379..822cc3bdfd 100644
--- a/js/keyboard_input_manager.js
+++ b/js/keyboard_input_manager.js
@@ -59,6 +59,7 @@ KeyboardInputManager.prototype.listen = function () {
 
   var keepPlaying = document.querySelector(".keep-playing-button");
   keepPlaying.addEventListener("click", this.keepPlaying.bind(this));
+  keepPlaying.addEventListener("touchend", this.keepPlaying.bind(this));
 
   // Listen to swipe events
   var touchStartClientX, touchStartClientY;