modify the game to allow using transforms

js/html_actuator.js

@@ -42,37 +42,42 @@ HTMLActuator.prototype.clearContainer = function (container) {
 HTMLActuator.prototype.addTile = function (tile) {
   var self = this;
 
-  var element   = document.createElement("div");
+  var wrapper   = document.createElement("div");
+  var inner     = document.createElement("div");
   var position  = tile.previousPosition || { x: tile.x, y: tile.y };
   positionClass = this.positionClass(position);
 
   // We can't use classlist because it somehow glitches when replacing classes
   var classes = ["tile", "tile-" + tile.value, positionClass];
-  this.applyClasses(element, classes);
+  this.applyClasses(wrapper, classes);
 
-  element.textContent = tile.value;
+  inner.classList.add("tile-inner");
+  inner.textContent = tile.value;
 
   if (tile.previousPosition) {
     // Make sure that the tile gets rendered in the previous position first
     window.requestAnimationFrame(function () {
       classes[2] = self.positionClass({ x: tile.x, y: tile.y });
-      self.applyClasses(element, classes); // Update the position
+      self.applyClasses(wrapper, classes); // Update the position
     });
   } else if (tile.mergedFrom) {
     classes.push("tile-merged");
-    this.applyClasses(element, classes);
+    this.applyClasses(wrapper, classes);
 
     // Render the tiles that merged
     tile.mergedFrom.forEach(function (merged) {
       self.addTile(merged);
     });
   } else {
     classes.push("tile-new");
-    this.applyClasses(element, classes);
+    this.applyClasses(wrapper, classes);
   }
 
+  // Add the inner part of the tile to the wrapper
+  wrapper.appendChild(inner);
+
   // Put the tile on the board
-  this.tileContainer.appendChild(element);
+  this.tileContainer.appendChild(wrapper);
 };
 
 HTMLActuator.prototype.applyClasses = function (element, classes) {

style/helpers.scss

@@ -24,11 +24,31 @@
 @mixin transition($args...) {
   -webkit-transition: $args;
   -moz-transition: $args;
+  transition: $args;
 }
 
 @mixin transition-property($args...) {
   -webkit-transition-property: $args;
   -moz-transition-property: $args;
+  transition-property: $args;
+}
+
+@mixin animation($args...) {
+  -webkit-animation: $args;
+  -moz-animation: $args;
+  animation: $args;
+}
+
+@mixin animation-fill-mode($args...) {
+  -webkit-animation-fill-mode: $args;
+  -moz-animation-fill-mode: $args;
+  animation: $args;
+}
+
+@mixin transform($args...) {
+  -webkit-transform: $args;
+  -moz-transform: $args;
+  transform: $args;
 }
 
 // Keyframe animations
@@ -44,16 +64,6 @@
   }
 }
 
-@mixin animation($str) {
-  -webkit-animation: #{$str};
-  -moz-animation: #{$str};
-}
-
-@mixin animation-fill-mode($str) {
-  -webkit-animation-fill-mode: #{$str};
-  -moz-animation-fill-mode: #{$str};
-}
-
 // Media queries
 @mixin smaller($width) {
   @media screen and (max-width: $width) {