add win condition

js/game_manager.js

@@ -8,6 +8,7 @@ function GameManager(size, InputManager, Actuator) {
 
   this.score        = 0;
   this.over         = false;
+  this.won          = false;
 
   this.inputManager.on("move", this.move.bind(this));
 
@@ -43,7 +44,8 @@ GameManager.prototype.addRandomTile = function () {
 GameManager.prototype.actuate = function () {
   this.actuator.actuate(this.grid, {
     score: this.score,
-    over:  this.over
+    over:  this.over,
+    won:   this.won
   });
 };
 
@@ -69,7 +71,7 @@ GameManager.prototype.move = function (direction) {
   // 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;
 
@@ -104,7 +106,8 @@ GameManager.prototype.move = function (direction) {
           // Update the score
           self.score += merged.value;
 
-          // Something's moved for sure
+          // The mighty 2048 tile
+          if (merged.value === 2048) self.won = true;
         } else {
           self.moveTile(tile, positions.farthest);
         }

js/html_actuator.js

@@ -22,9 +22,8 @@ HTMLActuator.prototype.actuate = function (grid, metadata) {
 
     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!
   });
 };
 
@@ -87,6 +86,7 @@ HTMLActuator.prototype.updateScore = function (score) {
   }
 };
 
-HTMLActuator.prototype.gameOver = function () {
-  this.gameContainer.classList.add("game-over");
+HTMLActuator.prototype.message = function (won) {
+  var type = won ? "game-won" : "game-over";
+  this.gameContainer.classList.add(type);
 };

style/main.css

@@ -53,7 +53,7 @@ h1.title {
   position: relative;
   float: right;
   background: #bbada0;
-  padding: 15px 30px;
+  padding: 15px 20px;
   font-size: 25px;
   height: 25px;
   line-height: 47px;
@@ -143,13 +143,12 @@ hr {
   width: 500px;
   height: 500px;
   box-sizing: border-box; }
-  .game-container.game-over:after {
+  .game-container.game-over:after, .game-container.game-won:after {
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
-    content: "Game over!";
     display: block;
     background: rgba(238, 228, 218, 0.5);
     text-align: center;
@@ -162,6 +161,12 @@ hr {
     -moz-animation: fade-in 800ms ease 1200ms;
     -webkit-animation-fill-mode: both;
     -moz-animation-fill-mode: both; }
+  .game-container.game-over:after {
+    content: "Game over!"; }
+  .game-container.game-won:after {
+    content: "You win!";
+    background: rgba(237, 194, 46, 0.5);
+    color: #f9f6f2; }
 
 .grid-container {
   position: absolute;

style/main.scss

@@ -64,7 +64,7 @@ h1.title {
   position: relative;
   float: right;
   background: $game-container-background;
-  padding: 15px 30px;
+  padding: 15px 20px;
   font-size: $height;
   height: $height;
   line-height: $height + 22px;
@@ -156,24 +156,35 @@ hr {
   height: $field-width;
   box-sizing: border-box;
 
-  &.game-over:after {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    content: "Game over!";
-    display: block;
-    background: rgba($tile-color, .5);
-    text-align: center;
-    height: $field-width;
-    line-height: $field-width;
-    z-index: 100;
-    font-size: 60px;
-    font-weight: bold;
+  &.game-over, &.game-won {
+    &:after {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      display: block;
+      background: rgba($tile-color, .5);
+      text-align: center;
+      height: $field-width;
+      line-height: $field-width;
+      z-index: 100;
+      font-size: 60px;
+      font-weight: bold;
 
-    @include animation(fade-in 800ms ease $transition-speed * 12);
-    @include animation-fill-mode(both);
+      @include animation(fade-in 800ms ease $transition-speed * 12);
+      @include animation-fill-mode(both);
+    }
+  }
+
+  &.game-over:after {
+    content: "Game over!";
+  }
+
+  &.game-won:after {
+    content: "You win!";
+    background: rgba($tile-gold-color, .5);
+    color: $bright-text-color;
   }
 }