update rendered stylesheet
update rendered stylesheet

file:a/README.md -> file:b/README.md
--- a/README.md
+++ b/README.md
@@ -1,7 +1,7 @@
 # 2048
 A small clone of [1024](https://play.google.com/store/apps/details?id=com.veewo.a1024), based on [Saming's 2048](saming.fr/p/2048/) (also a clone).
 
-Made just for fun.
+Made just for fun. [Play it here!](http://gabrielecirulli.github.io/2048/)
 
-[![Screenshot](http://pictures.gabrielecirulli.com/2048-20140305-231246.png)](http://pictures.gabrielecirulli.com/2048-20140305-231246.png)
+[![Screenshot](http://pictures.gabrielecirulli.com/2048-20140309-234100.png)](http://pictures.gabrielecirulli.com/2048-20140309-234100.png)
 

file:a/index.html -> file:b/index.html
--- a/index.html
+++ b/index.html
@@ -22,6 +22,13 @@
     <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>
+        <div class="lower">
+          <a class="retry-button">Try again</a>
+        </div>
+      </div>
+
       <div class="grid-container">
         <div class="grid-row">
           <div class="grid-cell"></div>

--- a/js/game_manager.js
+++ b/js/game_manager.js
@@ -4,18 +4,28 @@
   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.inputManager.on("move", this.move.bind(this));
-
-  this.setup();
-}
-
-// Set up the game
-GameManager.prototype.setup = function () {
+  this.won          = false;
+
+  // Add the initial tiles
   this.addStartTiles();
 
   // Update the actuator
@@ -43,7 +53,8 @@
 GameManager.prototype.actuate = function () {
   this.actuator.actuate(this.grid, {
     score: this.score,
-    over:  this.over
+    over:  this.over,
+    won:   this.won
   });
 };
 
@@ -69,7 +80,7 @@
   // 0: up, 1: right, 2:down, 3: left
   var self = this;
 
-  if (this.over) return; // Don't do anything if the game's over
+  if (this.over || this.won) return; // Don't do anything if the game's over
 
   var cell, tile;
 
@@ -103,11 +114,16 @@
 
           // Update the score
           self.score += merged.value;
+
+          // The mighty 2048 tile
+          if (merged.value === 2048) self.won = true;
         } else {
           self.moveTile(tile, positions.farthest);
         }
 
-        moved = true;
+        if (!self.positionsEqual(cell, tile)) {
+          moved = true; // The tile moved from its original cell!
+        }
       }
     });
   });
@@ -202,3 +218,7 @@
   return false;
 };
 
+GameManager.prototype.positionsEqual = function (first, second) {
+  return first.x === second.x && first.y === second.y;
+};
+

--- 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);
   }
 };
 
@@ -69,10 +74,31 @@
 };
 
 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!"
+
+  this.messageContainer.classList.add(type);
+  this.messageContainer.getElementsByTagName("p")[0].textContent = message;
 };
 
+HTMLActuator.prototype.clearMessage = function () {
+  this.messageContainer.classList.remove("game-won", "game-over");
+};
+

--- a/js/keyboard_input_manager.js
+++ b/js/keyboard_input_manager.js
@@ -40,5 +40,11 @@
       self.emit("move", mapped);
     }
   });
+
+  var retry = document.getElementsByClassName("retry-button")[0];
+  retry.addEventListener("click", function (event) {
+    event.preventDefault();
+    self.emit("restart");
+  });
 };
 

--- a/style/main.css
+++ b/style/main.css
@@ -22,11 +22,38 @@
   display: block;
   float: left; }
 
+@-webkit-keyframes move-up {
+  0% {
+    top: 25px;
+    opacity: 1; }
+
+  100% {
+    top: -50px;
+    opacity: 0; } }
+
+@-moz-keyframes move-up {
+  0% {
+    top: 25px;
+    opacity: 1; }
+
+  100% {
+    top: -50px;
+    opacity: 0; } }
+
+@keyframes move-up {
+  0% {
+    top: 25px;
+    opacity: 1; }
+
+  100% {
+    top: -50px;
+    opacity: 0; } }
+
 .score-container {
   position: relative;
   float: right;
   background: #bbada0;
-  padding: 15px 30px;
+  padding: 15px 25px;
   font-size: 25px;
   height: 25px;
   line-height: 47px;
@@ -45,6 +72,19 @@
     line-height: 13px;
     text-align: center;
     color: #eee4da; }
+  .score-container .score-addition {
+    position: absolute;
+    right: 30px;
+    color: red;
+    font-size: 25px;
+    line-height: 25px;
+    font-weight: bold;
+    color: rgba(119, 110, 101, 0.9);
+    z-index: 100;
+    -webkit-animation: move-up 600ms ease-in;
+    -moz-animation: move-up 600ms ease-in;
+    -webkit-animation-fill-mode: both;
+    -moz-animation-fill-mode: both; }
 
 p {
   margin-top: 0;
@@ -54,7 +94,8 @@
 a {
   color: #776e65;
   font-weight: bold;
-  text-decoration: underline; }
+  text-decoration: underline;
+  cursor: pointer; }
 
 strong.important {
   text-transform: uppercase; }
@@ -103,25 +144,44 @@
   width: 500px;
   height: 500px;
   box-sizing: border-box; }
-  .game-container.game-over:after {
+  .game-container .game-message {
+    display: none;
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
-    content: "Game over!";
-    display: block;
     background: rgba(238, 228, 218, 0.5);
+    z-index: 100;
     text-align: center;
-    height: 500px;
-    line-height: 500px;
-    z-index: 100;
-    font-size: 60px;
-    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-message p {
+      font-size: 60px;
+      font-weight: bold;
+      height: 60px;
+      line-height: 60px;
+      margin-top: 222px; }
+    .game-container .game-message .lower {
+      display: block;
+      margin-top: 59px; }
+    .game-container .game-message a {
+      display: inline-block;
+      background: #8f7a66;
+      border-radius: 3px;
+      padding: 0 20px;
+      text-decoration: none;
+      color: #f9f6f2;
+      height: 40px;
+      line-height: 42px;
+      margin-left: 9px; }
+    .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;

--- a/style/main.scss
+++ b/style/main.scss
@@ -46,13 +46,25 @@
   float: left;
 }
 
+@include keyframes(move-up) {
+  0% {
+    top: 25px;
+    opacity: 1;
+  }
+
+  100% {
+    top: -50px;
+    opacity: 0;
+  }
+}
+
 .score-container {
   $height: 25px;
 
   position: relative;
   float: right;
   background: $game-container-background;
-  padding: 15px 30px;
+  padding: 15px 25px;
   font-size: $height;
   height: $height;
   line-height: $height + 22px;
@@ -73,6 +85,19 @@
     text-align: center;
     color: $tile-color;
   }
+
+  .score-addition {
+    position: absolute;
+    right: 30px;
+    color: red;
+    font-size: $height;
+    line-height: $height;
+    font-weight: bold;
+    color: rgba($text-color, .9);
+    z-index: 100;
+    @include animation(move-up 600ms ease-in);
+    @include animation-fill-mode(both);
+  }
 }
 
 p {
@@ -85,6 +110,7 @@
   color: $text-color;
   font-weight: bold;
   text-decoration: underline;
+  cursor: pointer;
 }
 
 strong {
@@ -131,24 +157,58 @@
   height: $field-width;
   box-sizing: border-box;
 
-  &.game-over:after {
+  .game-message {
+    display: none;
+
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
-    content: "Game over!";
-    display: block;
     background: rgba($tile-color, .5);
+    z-index: 100;
+
     text-align: center;
-    height: $field-width;
-    line-height: $field-width;
-    z-index: 100;
-    font-size: 60px;
-    font-weight: bold;
+
+    p {
+      font-size: 60px;
+      font-weight: bold;
+      height: 60px;
+      line-height: 60px;
+      margin-top: 222px;
+      // height: $field-width;
+      // line-height: $field-width;
+    }
+
+    .lower {
+      display: block;
+      margin-top: 59px;
+    }
+
+    a {
+      display: inline-block;
+      background: darken($game-container-background, 20%);
+      border-radius: 3px;
+      padding: 0 20px;
+      text-decoration: none;
+      color: $bright-text-color;
+      height: 40px;
+      line-height: 42px;
+      margin-left: 9px;
+      // margin-top: 59px;
+    }
 
     @include animation(fade-in 800ms ease $transition-speed * 12);
     @include animation-fill-mode(both);
+
+    &.game-won {
+      background: rgba($tile-gold-color, .5);
+      color: $bright-text-color;
+    }
+
+    &.game-won, &.game-over {
+      display: block;
+    }
   }
 }
 

comments