diff --git a/js/html_actuator.js b/js/html_actuator.js index 80fc7898c87bde5e5dff137d9c87e77958882b2b..3452be98bade620c8c121b8a03e7a823c27c74ab 100644 --- a/js/html_actuator.js +++ b/js/html_actuator.js @@ -46,24 +46,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 658d2d8500db77b4d8fbb2f279cd2f095fc3cf42..4d0df7e6ca747ee30c1162d0bf2ff11c7c7c2d20 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; @@ -340,29 +342,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; @@ -372,33 +380,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 962c2a5b78b00ba24fb4bd7a5ca19c70973b95ec..c37bad135ff0ac709c5dd50d172a8d290cb8de35 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 { @@ -348,15 +350,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); } } @@ -368,16 +370,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); } }