diff --git a/js/html_actuator.js b/js/html_actuator.js
index dbf84052b9b3b01e01e80864525f0f4a00cc69ba..c825b5187017d0586d5410889088d649cf1531eb 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);
- element.textContent = tile.value;
+ // We can't use classlist because it somehow glitches when replacing classes
+ var classes = ["tile", "tile-" + tile.value, positionClass];
+ this.applyClasses(element, classes);
- this.tileContainer.appendChild(element);
+ element.textContent = tile.value;
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 3fe231693697719b579a163639ab35814f50f777..f5760a4901be75ea68d9091e1decbb261f43c2f8 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 ecfa9e6ea5b62ebf3a7ef106d5749ec2d932d476..5343c6d88a4056a463d402b8b71b2cdd70948151 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);
}
}