From 433127cd9382be90bf6567211b8047c4bc5bdb2f Mon Sep 17 00:00:00 2001
From: Gabriele Cirulli <gabrycir@gmail.com>
Date: Mon, 10 Mar 2014 18:03:43 +0100
Subject: [PATCH] remove use of class list in actuator, fix animations for
 firefox

---
 js/html_actuator.js | 27 +++++++++++++++++++-------
 style/main.css      | 47 ++++++++++++++++++++++++++++++---------------
 style/main.scss     | 11 +++++++----
 3 files changed, 59 insertions(+), 26 deletions(-)

diff --git a/js/html_actuator.js b/js/html_actuator.js
index dbf8405..c825b51 100644
--- a/js/html_actuator.js
+++ b/js/html_actuator.js
@@ -44,24 +44,37 @@ HTMLActuator.prototype.addTile = function (tile) {
   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) {
diff --git a/style/main.css b/style/main.css
index 3fe2316..f5760a4 100644
--- a/style/main.css
+++ b/style/main.css
@@ -143,6 +143,8 @@ hr {
   border-radius: 6px;
   width: 500px;
   height: 500px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
   box-sizing: border-box; }
   .game-container .game-message {
     display: none;
@@ -336,29 +338,35 @@ hr {
 @-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;
@@ -368,33 +376,42 @@ hr {
 
 @-webkit-keyframes pop {
   0% {
-    -webkit-transform: scale(0); }
+    -webkit-transform: scale(0);
+    -moz-transform: scale(0); }
 
   50% {
-    -webkit-transform: scale(1.2); }
+    -webkit-transform: scale(1.2);
+    -moz-transform: scale(1.2); }
 
   100% {
-    -webkit-transform: scale(1); } }
+    -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); }
+    -webkit-transform: scale(1.2);
+    -moz-transform: scale(1.2); }
 
   100% {
-    -webkit-transform: scale(1); } }
+    -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); }
+    -webkit-transform: scale(1.2);
+    -moz-transform: scale(1.2); }
 
   100% {
-    -webkit-transform: scale(1); } }
+    -webkit-transform: scale(1);
+    -moz-transform: scale(1); } }
 
 .tile-merged {
   z-index: 20;
diff --git a/style/main.scss b/style/main.scss
index ecfa9e6..5343c6d 100644
--- a/style/main.scss
+++ b/style/main.scss
@@ -155,6 +155,8 @@ hr {
   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-message {
@@ -342,15 +344,15 @@ hr {
 
 @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);
   }
 }
 
@@ -362,16 +364,17 @@ hr {
 @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);
   }
 }