Merge pull request #1 from Mechazawa/patch-1
Merge pull request #1 from Mechazawa/patch-1

forgot the http://

file:b/CONTRIBUTING.md (new)
--- /dev/null
+++ b/CONTRIBUTING.md
@@ -1,1 +1,3 @@
+## Contributing
+Changes and improvements are more than welcome! Feel free to fork and open a pull request. Please make your changes in a specifically made branch and request to pull on `master`! If you can, please make sure the game fully works before sending the PR, as that will help speed up the process.
 

file:b/LICENSE.txt (new)
--- /dev/null
+++ b/LICENSE.txt
@@ -1,1 +1,22 @@
+The MIT License (MIT)
 
+Copyright (c) 2014 Gabriele Cirulli
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+

file:a/README.md -> file:b/README.md
--- a/README.md
+++ b/README.md
@@ -1,7 +1,17 @@
 # 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).
+A small clone of [1024](https://play.google.com/store/apps/details?id=com.veewo.a1024), based on [Saming's 2048](http://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)
 
+That screenshot is fake by, the way. I never reached 2048 :smile:
+
+## Contributing
+Changes and improvements are more than welcome! Feel free to fork and open a pull request. Please make your changes in a specifically made branch and request to pull on `master`! If you can, please make sure the game fully works before sending the PR, as that will help speed up the process.
+
+You can find the same information in the [contributing guide.](https://github.com/gabrielecirulli/2048/blob/master/CONTRIBUTING.md)
+
+## License
+2048 is licensed under the [MIT license.](https://github.com/gabrielecirulli/2048/blob/master/LICENSE.txt)
+

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,19 +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.won          = false;
 
-  this.inputManager.on("move", this.move.bind(this));
-
-  this.setup();
-}
-
-// Set up the game
-GameManager.prototype.setup = function () {
+  // Add the initial tiles
   this.addStartTiles();
 
   // Update the actuator

--- a/js/html_actuator.js
+++ b/js/html_actuator.js
@@ -1,7 +1,7 @@
 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;
 }
@@ -27,6 +27,10 @@
   });
 };
 
+HTMLActuator.prototype.restart = function () {
+  this.clearMessage();
+};
+
 HTMLActuator.prototype.clearContainer = function (container) {
   while (container.firstChild) {
     container.removeChild(container.firstChild);
@@ -40,24 +44,37 @@
   var position  = tile.previousPosition || { x: tile.x, y: tile.y };
   positionClass = this.positionClass(position);
 
-  element.classList.add("tile", "tile-" + tile.value, positionClass);
+  // We can't use classlist because it somehow glitches when replacing classes
+  var classes = ["tile", "tile-" + tile.value, positionClass];
+  this.applyClasses(element, classes);
+
   element.textContent = tile.value;
 
-  this.tileContainer.appendChild(element);
-
   if (tile.previousPosition) {
+    // Make sure that the tile gets rendered in the previous position first
     window.requestAnimationFrame(function () {
-      element.classList.remove(element.classList[2]);
-      element.classList.add(self.positionClass({ x: tile.x, y: tile.y }));
+      classes[2] = self.positionClass({ x: tile.x, y: tile.y });
+      self.applyClasses(element, classes); // Update the position
     });
   } else if (tile.mergedFrom) {
-    element.classList.add("tile-merged");
+    classes.push("tile-merged");
+    this.applyClasses(element, classes);
+
+    // Render the tiles that merged
     tile.mergedFrom.forEach(function (merged) {
       self.addTile(merged);
     });
   } else {
-    element.classList.add("tile-new");
+    classes.push("tile-new");
+    this.applyClasses(element, classes);
   }
+
+  // Put the tile on the board
+  this.tileContainer.appendChild(element);
+};
+
+HTMLActuator.prototype.applyClasses = function (element, classes) {
+  element.setAttribute("class", classes.join(" "));
 };
 
 HTMLActuator.prototype.normalizePosition = function (position) {
@@ -77,7 +94,7 @@
 
   this.scoreContainer.textContent = this.score;
 
-  if (difference) {
+  if (difference > 0) {
     var addition = document.createElement("div");
     addition.classList.add("score-addition");
     addition.textContent = "+" + difference;
@@ -87,7 +104,14 @@
 };
 
 HTMLActuator.prototype.message = function (won) {
-  var type = won ? "game-won" : "game-over";
-  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");
+};
+

--- a/js/keyboard_input_manager.js
+++ b/js/keyboard_input_manager.js
@@ -35,10 +35,22 @@
                     event.shiftKey;
     var mapped    = map[event.which];
 
-    if (!modifiers && mapped !== undefined) {
-      event.preventDefault();
-      self.emit("move", mapped);
+    if (!modifiers) {
+      if (mapped !== undefined) {
+        event.preventDefault();
+        self.emit("move", mapped);
+      }
+
+      if (event.which === 32) self.restart.bind(self)(event);
     }
   });
+
+  var retry = document.getElementsByClassName("retry-button")[0];
+  retry.addEventListener("click", this.restart.bind(this));
 };
 
+KeyboardInputManager.prototype.restart = function (event) {
+  event.preventDefault();
+  this.emit("restart");
+};
+

--- a/style/main.css
+++ b/style/main.css
@@ -53,7 +53,7 @@
   position: relative;
   float: right;
   background: #bbada0;
-  padding: 15px 20px;
+  padding: 15px 25px;
   font-size: 25px;
   height: 25px;
   line-height: 47px;
@@ -94,7 +94,8 @@
 a {
   color: #776e65;
   font-weight: bold;
-  text-decoration: underline; }
+  text-decoration: underline;
+  cursor: pointer; }
 
 strong.important {
   text-transform: uppercase; }
@@ -142,31 +143,47 @@
   border-radius: 6px;
   width: 500px;
   height: 500px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
   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);
+    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-over:after {
-    content: "Game over!"; }
-  .game-container.game-won:after {
-    content: "You win!";
-    background: rgba(237, 194, 46, 0.5);
-    color: #f9f6f2; }
+    .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;
@@ -321,29 +338,35 @@
 @-webkit-keyframes appear {
   0% {
     opacity: 0;
-    -webkit-transform: scale(0); }
+    -webkit-transform: scale(0);
+    -moz-transform: scale(0); }
 
   100% {
     opacity: 1;
-    -webkit-transform: scale(1); } }
+    -webkit-transform: scale(1);
+    -moz-transform: scale(1); } }
 
 @-moz-keyframes appear {
   0% {
     opacity: 0;
-    -webkit-transform: scale(0); }
+    -webkit-transform: scale(0);
+    -moz-transform: scale(0); }
 
   100% {
     opacity: 1;
-    -webkit-transform: scale(1); } }
+    -webkit-transform: scale(1);
+    -moz-transform: scale(1); } }
 
 @keyframes appear {
   0% {
     opacity: 0;
-    -webkit-transform: scale(0); }
+    -webkit-transform: scale(0);
+    -moz-transform: scale(0); }
 
   100% {
     opacity: 1;
-    -webkit-transform: scale(1); } }
+    -webkit-transform: scale(1);
+    -moz-transform: scale(1); } }
 
 .tile-new {
   -webkit-animation: appear 200ms ease 100ms;
@@ -353,33 +376,42 @@
 
 @-webkit-keyframes pop {
   0% {
-    -webkit-transform: scale(0); }
+    -webkit-transform: scale(0);
+    -moz-transform: scale(0); }
 
   50% {
-    -webkit-transform: scale(1.2); }
-
-  100% {
-    -webkit-transform: scale(1); } }
+    -webkit-transform: scale(1.2);
+    -moz-transform: scale(1.2); }
+
+  100% {
+    -webkit-transform: scale(1);
+    -moz-transform: scale(1); } }
 
 @-moz-keyframes pop {
   0% {
-    -webkit-transform: scale(0); }
+    -webkit-transform: scale(0);
+    -moz-transform: scale(0); }
 
   50% {
-    -webkit-transform: scale(1.2); }
-
-  100% {
-    -webkit-transform: scale(1); } }
+    -webkit-transform: scale(1.2);
+    -moz-transform: scale(1.2); }
+
+  100% {
+    -webkit-transform: scale(1);
+    -moz-transform: scale(1); } }
 
 @keyframes pop {
   0% {
-    -webkit-transform: scale(0); }
+    -webkit-transform: scale(0);
+    -moz-transform: scale(0); }
 
   50% {
-    -webkit-transform: scale(1.2); }
-
-  100% {
-    -webkit-transform: scale(1); } }
+    -webkit-transform: scale(1.2);
+    -moz-transform: scale(1.2); }
+
+  100% {
+    -webkit-transform: scale(1);
+    -moz-transform: scale(1); } }
 
 .tile-merged {
   z-index: 20;

--- a/style/main.scss
+++ b/style/main.scss
@@ -64,7 +64,7 @@
   position: relative;
   float: right;
   background: $game-container-background;
-  padding: 15px 20px;
+  padding: 15px 25px;
   font-size: $height;
   height: $height;
   line-height: $height + 22px;
@@ -110,6 +110,7 @@
   color: $text-color;
   font-weight: bold;
   text-decoration: underline;
+  cursor: pointer;
 }
 
 strong {
@@ -154,37 +155,62 @@
   border-radius: $tile-border-radius * 2;
   width: $field-width;
   height: $field-width;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
   box-sizing: border-box;
 
-  &.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;
+  .game-message {
+    display: none;
+
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background: rgba($tile-color, .5);
+    z-index: 100;
+
+    text-align: center;
+
+    p {
       font-size: 60px;
       font-weight: bold;
-
-      @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;
+      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;
+    }
   }
 }
 
@@ -318,15 +344,15 @@
 
 @include keyframes(appear) {
   0% {
-    // -webkit-transform: scale(1.5);
     opacity: 0;
     -webkit-transform: scale(0);
+    -moz-transform: scale(0);
   }
 
   100% {
-    // -webkit-transform: scale(1);
     opacity: 1;
     -webkit-transform: scale(1);
+    -moz-transform: scale(1);
   }
 }
 
@@ -338,16 +364,17 @@
 @include keyframes(pop) {
   0% {
     -webkit-transform: scale(0);
-    // opacity: 0;
+    -moz-transform: scale(0);
   }
 
   50% {
     -webkit-transform: scale(1.2);
+    -moz-transform: scale(1.2);
   }
 
   100% {
     -webkit-transform: scale(1);
-    // opacity: 1;
+    -moz-transform: scale(1);
   }
 }
 

comments