danog/2048
1
0
Fork 0
mirror of https://github.com/danog/2048.git synced 2024-12-02 17:27:57 +01:00
Code Issues Projects Releases Wiki Activity

Merge pull request #28 from gabrielecirulli/use-transforms

Browse Source 
Use transforms for tile positions
This commit is contained in:
Gabriele Cirulli 2014-03-13 23:14:06 +01:00
commit 7c6fd1b2a4
4 changed files with 277 additions and 234 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
js/html_actuator.js
View File

@ -42,25 +42,27 @@ HTMLActuator.prototype.clearContainer = function (container) {
HTMLActuator.prototype.addTile = function (tile) { HTMLActuator.prototype.addTile = function (tile) {
var self = this; 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 }; var position = tile.previousPosition || { x: tile.x, y: tile.y };
positionClass = this.positionClass(position); positionClass = this.positionClass(position);
// We can't use classlist because it somehow glitches when replacing classes // We can't use classlist because it somehow glitches when replacing classes
var classes = ["tile", "tile-" + tile.value, positionClass]; 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) { if (tile.previousPosition) {
// Make sure that the tile gets rendered in the previous position first // Make sure that the tile gets rendered in the previous position first
window.requestAnimationFrame(function () { window.requestAnimationFrame(function () {
classes[2] = 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 self.applyClasses(wrapper, classes); // Update the position
}); });
} else if (tile.mergedFrom) { } else if (tile.mergedFrom) {
classes.push("tile-merged"); classes.push("tile-merged");
this.applyClasses(element, classes); this.applyClasses(wrapper, classes);
// Render the tiles that merged // Render the tiles that merged
tile.mergedFrom.forEach(function (merged) { tile.mergedFrom.forEach(function (merged) {
@ -68,11 +70,14 @@ HTMLActuator.prototype.addTile = function (tile) {
}); });
} else { } else {
classes.push("tile-new"); 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 // Put the tile on the board
this.tileContainer.appendChild(element); this.tileContainer.appendChild(wrapper);
}; };
HTMLActuator.prototype.applyClasses = function (element, classes) { HTMLActuator.prototype.applyClasses = function (element, classes) {

30
style/helpers.scss
View File

@ -24,11 +24,31 @@
@mixin transition($args...) { @mixin transition($args...) {
-webkit-transition: $args; -webkit-transition: $args;
-moz-transition: $args; -moz-transition: $args;
transition: $args;
} }
@mixin transition-property($args...) { @mixin transition-property($args...) {
-webkit-transition-property: $args; -webkit-transition-property: $args;
-moz-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 // 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 // Media queries
@mixin smaller($width) { @mixin smaller($width) {
@media screen and (max-width: $width) { @media screen and (max-width: $width) {

325
style/main.css
View File

@ -87,8 +87,10 @@ h1.title {
z-index: 100; z-index: 100;
-webkit-animation: move-up 600ms ease-in; -webkit-animation: move-up 600ms ease-in;
-moz-animation: move-up 600ms ease-in; -moz-animation: move-up 600ms ease-in;
animation: move-up 600ms ease-in;
-webkit-animation-fill-mode: both; -webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both; } -moz-animation-fill-mode: both;
animation: both; }
.score-container:after { .score-container:after {
content: "Score"; } content: "Score"; }
@ -168,8 +170,10 @@ hr {
text-align: center; text-align: center;
-webkit-animation: fade-in 800ms ease 1200ms; -webkit-animation: fade-in 800ms ease 1200ms;
-moz-animation: fade-in 800ms ease 1200ms; -moz-animation: fade-in 800ms ease 1200ms;
animation: fade-in 800ms ease 1200ms;
-webkit-animation-fill-mode: both; -webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both; } -moz-animation-fill-mode: both;
animation: both; }
.game-container .game-message p { .game-container .game-message p {
font-size: 60px; font-size: 60px;
font-weight: bold; font-weight: bold;
@ -222,229 +226,252 @@ hr {
position: absolute; position: absolute;
z-index: 2; } z-index: 2; }
.tile { .tile, .tile .tile-inner {
width: 106.25px; width: 107px;
height: 106.25px; height: 107px;
line-height: 116.25px; } line-height: 116.25px; }
.tile.tile-position-1-1 { .tile.tile-position-1-1 {
position: absolute; -webkit-transform: translate(0px, 0px);
left: 0px; -moz-transform: translate(0px, 0px);
top: 0px; } transform: translate(0px, 0px); }
.tile.tile-position-1-2 { .tile.tile-position-1-2 {
position: absolute; -webkit-transform: translate(0px, 121px);
left: 0px; -moz-transform: translate(0px, 121px);
top: 121px; } transform: translate(0px, 121px); }
.tile.tile-position-1-3 { .tile.tile-position-1-3 {
position: absolute; -webkit-transform: translate(0px, 242px);
left: 0px; -moz-transform: translate(0px, 242px);
top: 243px; } transform: translate(0px, 242px); }
.tile.tile-position-1-4 { .tile.tile-position-1-4 {
position: absolute; -webkit-transform: translate(0px, 363px);
left: 0px; -moz-transform: translate(0px, 363px);
top: 364px; } transform: translate(0px, 363px); }
.tile.tile-position-2-1 { .tile.tile-position-2-1 {
position: absolute; -webkit-transform: translate(121px, 0px);
left: 121px; -moz-transform: translate(121px, 0px);
top: 0px; } transform: translate(121px, 0px); }
.tile.tile-position-2-2 { .tile.tile-position-2-2 {
position: absolute; -webkit-transform: translate(121px, 121px);
left: 121px; -moz-transform: translate(121px, 121px);
top: 121px; } transform: translate(121px, 121px); }
.tile.tile-position-2-3 { .tile.tile-position-2-3 {
position: absolute; -webkit-transform: translate(121px, 242px);
left: 121px; -moz-transform: translate(121px, 242px);
top: 243px; } transform: translate(121px, 242px); }
.tile.tile-position-2-4 { .tile.tile-position-2-4 {
position: absolute; -webkit-transform: translate(121px, 363px);
left: 121px; -moz-transform: translate(121px, 363px);
top: 364px; } transform: translate(121px, 363px); }
.tile.tile-position-3-1 { .tile.tile-position-3-1 {
position: absolute; -webkit-transform: translate(242px, 0px);
left: 243px; -moz-transform: translate(242px, 0px);
top: 0px; } transform: translate(242px, 0px); }
.tile.tile-position-3-2 { .tile.tile-position-3-2 {
position: absolute; -webkit-transform: translate(242px, 121px);
left: 243px; -moz-transform: translate(242px, 121px);
top: 121px; } transform: translate(242px, 121px); }
.tile.tile-position-3-3 { .tile.tile-position-3-3 {
position: absolute; -webkit-transform: translate(242px, 242px);
left: 243px; -moz-transform: translate(242px, 242px);
top: 243px; } transform: translate(242px, 242px); }
.tile.tile-position-3-4 { .tile.tile-position-3-4 {
position: absolute; -webkit-transform: translate(242px, 363px);
left: 243px; -moz-transform: translate(242px, 363px);
top: 364px; } transform: translate(242px, 363px); }
.tile.tile-position-4-1 { .tile.tile-position-4-1 {
position: absolute; -webkit-transform: translate(363px, 0px);
left: 364px; -moz-transform: translate(363px, 0px);
top: 0px; } transform: translate(363px, 0px); }
.tile.tile-position-4-2 { .tile.tile-position-4-2 {
position: absolute; -webkit-transform: translate(363px, 121px);
left: 364px; -moz-transform: translate(363px, 121px);
top: 121px; } transform: translate(363px, 121px); }
.tile.tile-position-4-3 { .tile.tile-position-4-3 {
position: absolute; -webkit-transform: translate(363px, 242px);
left: 364px; -moz-transform: translate(363px, 242px);
top: 243px; } transform: translate(363px, 242px); }
.tile.tile-position-4-4 { .tile.tile-position-4-4 {
position: absolute; -webkit-transform: translate(363px, 363px);
left: 364px; -moz-transform: translate(363px, 363px);
top: 364px; } transform: translate(363px, 363px); }
.tile { .tile {
position: absolute;
-webkit-transition: 100ms ease-in-out;
-moz-transition: 100ms ease-in-out;
transition: 100ms ease-in-out;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
transition-property: transform; }
.tile .tile-inner {
border-radius: 3px; border-radius: 3px;
background: #eee4da; background: #eee4da;
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
z-index: 10; z-index: 10;
font-size: 55px; font-size: 55px; }
-webkit-transition: 100ms ease-in-out; .tile.tile-2 .tile-inner {
-moz-transition: 100ms ease-in-out;
-webkit-transition-property: top, left;
-moz-transition-property: top, left; }
.tile.tile-2 {
background: #eee4da; background: #eee4da;
box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0), inset 0 0 0 1px rgba(255, 255, 255, 0); } box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0), inset 0 0 0 1px rgba(255, 255, 255, 0); }
.tile.tile-4 { .tile.tile-4 .tile-inner {
background: #ede0c8; background: #ede0c8;
box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0), inset 0 0 0 1px rgba(255, 255, 255, 0); } box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0), inset 0 0 0 1px rgba(255, 255, 255, 0); }
.tile.tile-8 { .tile.tile-8 .tile-inner {
color: #f9f6f2; color: #f9f6f2;
background: #f2b179; } background: #f2b179; }
.tile.tile-16 { .tile.tile-16 .tile-inner {
color: #f9f6f2; color: #f9f6f2;
background: #f59563; } background: #f59563; }
.tile.tile-32 { .tile.tile-32 .tile-inner {
color: #f9f6f2; color: #f9f6f2;
background: #f67c5f; } background: #f67c5f; }
.tile.tile-64 { .tile.tile-64 .tile-inner {
color: #f9f6f2; color: #f9f6f2;
background: #f65e3b; } background: #f65e3b; }
.tile.tile-128 { .tile.tile-128 .tile-inner {
color: #f9f6f2; color: #f9f6f2;
background: #edcf72; background: #edcf72;
box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.2381), inset 0 0 0 1px rgba(255, 255, 255, 0.14286); box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.2381), inset 0 0 0 1px rgba(255, 255, 255, 0.14286);
font-size: 45px; } font-size: 45px; }
@media screen and (max-width: 480px) { @media screen and (max-width: 480px) {
.tile.tile-128 { .tile.tile-128 .tile-inner {
font-size: 25px; } } font-size: 25px; } }
.tile.tile-256 { .tile.tile-256 .tile-inner {
color: #f9f6f2; color: #f9f6f2;
background: #edcc61; background: #edcc61;
box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.31746), inset 0 0 0 1px rgba(255, 255, 255, 0.19048); box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.31746), inset 0 0 0 1px rgba(255, 255, 255, 0.19048);
font-size: 45px; } font-size: 45px; }
@media screen and (max-width: 480px) { @media screen and (max-width: 480px) {
.tile.tile-256 { .tile.tile-256 .tile-inner {
font-size: 25px; } } font-size: 25px; } }
.tile.tile-512 { .tile.tile-512 .tile-inner {
color: #f9f6f2; color: #f9f6f2;
background: #edc850; background: #edc850;
box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.39683), inset 0 0 0 1px rgba(255, 255, 255, 0.2381); box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.39683), inset 0 0 0 1px rgba(255, 255, 255, 0.2381);
font-size: 45px; } font-size: 45px; }
@media screen and (max-width: 480px) { @media screen and (max-width: 480px) {
.tile.tile-512 { .tile.tile-512 .tile-inner {
font-size: 25px; } } font-size: 25px; } }
.tile.tile-1024 { .tile.tile-1024 .tile-inner {
color: #f9f6f2; color: #f9f6f2;
background: #edc53f; background: #edc53f;
box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.47619), inset 0 0 0 1px rgba(255, 255, 255, 0.28571); box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.47619), inset 0 0 0 1px rgba(255, 255, 255, 0.28571);
font-size: 35px; } font-size: 35px; }
@media screen and (max-width: 480px) { @media screen and (max-width: 480px) {
.tile.tile-1024 { .tile.tile-1024 .tile-inner {
font-size: 15px; } } font-size: 15px; } }
.tile.tile-2048 { .tile.tile-2048 .tile-inner {
color: #f9f6f2; color: #f9f6f2;
background: #edc22e; background: #edc22e;
box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.55556), inset 0 0 0 1px rgba(255, 255, 255, 0.33333); box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.55556), inset 0 0 0 1px rgba(255, 255, 255, 0.33333);
font-size: 35px; } font-size: 35px; }
@media screen and (max-width: 480px) { @media screen and (max-width: 480px) {
.tile.tile-2048 { .tile.tile-2048 .tile-inner {
font-size: 15px; } } font-size: 15px; } }
@-webkit-keyframes appear { @-webkit-keyframes appear {
0% { 0% {
opacity: 0; opacity: 0;
-webkit-transform: scale(0); -webkit-transform: scale(0);
-moz-transform: scale(0); } -moz-transform: scale(0);
transform: scale(0); }
100% { 100% {
opacity: 1; opacity: 1;
-webkit-transform: scale(1); -webkit-transform: scale(1);
-moz-transform: scale(1); } } -moz-transform: scale(1);
transform: scale(1); } }
@-moz-keyframes appear { @-moz-keyframes appear {
0% { 0% {
opacity: 0; opacity: 0;
-webkit-transform: scale(0); -webkit-transform: scale(0);
-moz-transform: scale(0); } -moz-transform: scale(0);
transform: scale(0); }
100% { 100% {
opacity: 1; opacity: 1;
-webkit-transform: scale(1); -webkit-transform: scale(1);
-moz-transform: scale(1); } } -moz-transform: scale(1);
transform: scale(1); } }
@keyframes appear { @keyframes appear {
0% { 0% {
opacity: 0; opacity: 0;
-webkit-transform: scale(0); -webkit-transform: scale(0);
-moz-transform: scale(0); } -moz-transform: scale(0);
transform: scale(0); }
100% { 100% {
opacity: 1; opacity: 1;
-webkit-transform: scale(1); -webkit-transform: scale(1);
-moz-transform: scale(1); } } -moz-transform: scale(1);
transform: scale(1); } }
.tile-new { .tile-new .tile-inner {
-webkit-animation: appear 200ms ease 100ms; -webkit-animation: appear 200ms ease 100ms;
-moz-animation: appear 200ms ease 100ms; -moz-animation: appear 200ms ease 100ms;
-webkit-animation-fill-mode: both; animation: appear 200ms ease 100ms;
-moz-animation-fill-mode: both; } -webkit-animation-fill-mode: backwards;
-moz-animation-fill-mode: backwards;
animation: backwards; }
@-webkit-keyframes pop { @-webkit-keyframes pop {
0% { 0% {
-webkit-transform: scale(0); -webkit-transform: scale(0);
-moz-transform: scale(0); } -moz-transform: scale(0);
transform: scale(0); }
50% { 50% {
-webkit-transform: scale(1.2); -webkit-transform: scale(1.2);
-moz-transform: scale(1.2); } -moz-transform: scale(1.2);
transform: scale(1.2); }
100% { 100% {
-webkit-transform: scale(1); -webkit-transform: scale(1);
-moz-transform: scale(1); } } -moz-transform: scale(1);
transform: scale(1); } }
@-moz-keyframes pop { @-moz-keyframes pop {
0% { 0% {
-webkit-transform: scale(0); -webkit-transform: scale(0);
-moz-transform: scale(0); } -moz-transform: scale(0);
transform: scale(0); }
50% { 50% {
-webkit-transform: scale(1.2); -webkit-transform: scale(1.2);
-moz-transform: scale(1.2); } -moz-transform: scale(1.2);
transform: scale(1.2); }
100% { 100% {
-webkit-transform: scale(1); -webkit-transform: scale(1);
-moz-transform: scale(1); } } -moz-transform: scale(1);
transform: scale(1); } }
@keyframes pop { @keyframes pop {
0% { 0% {
-webkit-transform: scale(0); -webkit-transform: scale(0);
-moz-transform: scale(0); } -moz-transform: scale(0);
transform: scale(0); }
50% { 50% {
-webkit-transform: scale(1.2); -webkit-transform: scale(1.2);
-moz-transform: scale(1.2); } -moz-transform: scale(1.2);
transform: scale(1.2); }
100% { 100% {
-webkit-transform: scale(1); -webkit-transform: scale(1);
-moz-transform: scale(1); } } -moz-transform: scale(1);
transform: scale(1); } }
.tile-merged { .tile-merged .tile-inner {
z-index: 20; z-index: 20;
-webkit-animation: pop 200ms ease 100ms; -webkit-animation: pop 200ms ease 100ms;
-moz-animation: pop 200ms ease 100ms; -moz-animation: pop 200ms ease 100ms;
-webkit-animation-fill-mode: both; animation: pop 200ms ease 100ms;
-moz-animation-fill-mode: both; } -webkit-animation-fill-mode: backwards;
-moz-animation-fill-mode: backwards;
animation: backwards; }
.game-intro { .game-intro {
margin-bottom: 0; } margin-bottom: 0; }
@ -503,8 +530,10 @@ hr {
text-align: center; text-align: center;
-webkit-animation: fade-in 800ms ease 1200ms; -webkit-animation: fade-in 800ms ease 1200ms;
-moz-animation: fade-in 800ms ease 1200ms; -moz-animation: fade-in 800ms ease 1200ms;
animation: fade-in 800ms ease 1200ms;
-webkit-animation-fill-mode: both; -webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both; } -moz-animation-fill-mode: both;
animation: both; }
.game-container .game-message p { .game-container .game-message p {
font-size: 60px; font-size: 60px;
font-weight: bold; font-weight: bold;
@ -557,79 +586,79 @@ hr {
position: absolute; position: absolute;
z-index: 2; } z-index: 2; }
.tile { .tile, .tile .tile-inner {
width: 57.5px; width: 58px;
height: 57.5px; height: 58px;
line-height: 67.5px; } line-height: 67.5px; }
.tile.tile-position-1-1 { .tile.tile-position-1-1 {
position: absolute; -webkit-transform: translate(0px, 0px);
left: 0px; -moz-transform: translate(0px, 0px);
top: 0px; } transform: translate(0px, 0px); }
.tile.tile-position-1-2 { .tile.tile-position-1-2 {
position: absolute; -webkit-transform: translate(0px, 67px);
left: 0px; -moz-transform: translate(0px, 67px);
top: 68px; } transform: translate(0px, 67px); }
.tile.tile-position-1-3 { .tile.tile-position-1-3 {
position: absolute; -webkit-transform: translate(0px, 135px);
left: 0px; -moz-transform: translate(0px, 135px);
top: 135px; } transform: translate(0px, 135px); }
.tile.tile-position-1-4 { .tile.tile-position-1-4 {
position: absolute; -webkit-transform: translate(0px, 202px);
left: 0px; -moz-transform: translate(0px, 202px);
top: 203px; } transform: translate(0px, 202px); }
.tile.tile-position-2-1 { .tile.tile-position-2-1 {
position: absolute; -webkit-transform: translate(67px, 0px);
left: 68px; -moz-transform: translate(67px, 0px);
top: 0px; } transform: translate(67px, 0px); }
.tile.tile-position-2-2 { .tile.tile-position-2-2 {
position: absolute; -webkit-transform: translate(67px, 67px);
left: 68px; -moz-transform: translate(67px, 67px);
top: 68px; } transform: translate(67px, 67px); }
.tile.tile-position-2-3 { .tile.tile-position-2-3 {
position: absolute; -webkit-transform: translate(67px, 135px);
left: 68px; -moz-transform: translate(67px, 135px);
top: 135px; } transform: translate(67px, 135px); }
.tile.tile-position-2-4 { .tile.tile-position-2-4 {
position: absolute; -webkit-transform: translate(67px, 202px);
left: 68px; -moz-transform: translate(67px, 202px);
top: 203px; } transform: translate(67px, 202px); }
.tile.tile-position-3-1 { .tile.tile-position-3-1 {
position: absolute; -webkit-transform: translate(135px, 0px);
left: 135px; -moz-transform: translate(135px, 0px);
top: 0px; } transform: translate(135px, 0px); }
.tile.tile-position-3-2 { .tile.tile-position-3-2 {
position: absolute; -webkit-transform: translate(135px, 67px);
left: 135px; -moz-transform: translate(135px, 67px);
top: 68px; } transform: translate(135px, 67px); }
.tile.tile-position-3-3 { .tile.tile-position-3-3 {
position: absolute; -webkit-transform: translate(135px, 135px);
left: 135px; -moz-transform: translate(135px, 135px);
top: 135px; } transform: translate(135px, 135px); }
.tile.tile-position-3-4 { .tile.tile-position-3-4 {
position: absolute; -webkit-transform: translate(135px, 202px);
left: 135px; -moz-transform: translate(135px, 202px);
top: 203px; } transform: translate(135px, 202px); }
.tile.tile-position-4-1 { .tile.tile-position-4-1 {
position: absolute; -webkit-transform: translate(202px, 0px);
left: 203px; -moz-transform: translate(202px, 0px);
top: 0px; } transform: translate(202px, 0px); }
.tile.tile-position-4-2 { .tile.tile-position-4-2 {
position: absolute; -webkit-transform: translate(202px, 67px);
left: 203px; -moz-transform: translate(202px, 67px);
top: 68px; } transform: translate(202px, 67px); }
.tile.tile-position-4-3 { .tile.tile-position-4-3 {
position: absolute; -webkit-transform: translate(202px, 135px);
left: 203px; -moz-transform: translate(202px, 135px);
top: 135px; } transform: translate(202px, 135px); }
.tile.tile-position-4-4 { .tile.tile-position-4-4 {
position: absolute; -webkit-transform: translate(202px, 202px);
left: 203px; -moz-transform: translate(202px, 202px);
top: 203px; } transform: translate(202px, 202px); }
.game-container { .game-container {
margin-top: 20px; } margin-top: 20px; }
.tile { .tile .tile-inner {
font-size: 35px; } font-size: 35px; }
.game-message p { .game-message p {

53
style/main.scss
View File

@ -274,17 +274,19 @@ hr {
} }
.tile { .tile {
width: $tile-size; &, .tile-inner {
height: $tile-size; width: ceil($tile-size);
height: ceil($tile-size);
line-height: $tile-size + 10px; line-height: $tile-size + 10px;
}
// Build position classes // Build position classes
@for $x from 1 through $grid-row-cells { @for $x from 1 through $grid-row-cells {
@for $y from 1 through $grid-row-cells { @for $y from 1 through $grid-row-cells {
&.tile-position-#{$x}-#{$y} { &.tile-position-#{$x}-#{$y} {
position: absolute; $xPos: floor(($tile-size + $grid-spacing) * ($x - 1));
left: round(($tile-size + $grid-spacing) * ($x - 1)); $yPos: floor(($tile-size + $grid-spacing) * ($y - 1));
top: round(($tile-size + $grid-spacing) * ($y - 1)); @include transform(translate($xPos, $yPos));
} }
} }
} }
@ -295,6 +297,9 @@ hr {
@include game-field; @include game-field;
.tile { .tile {
position: absolute; // Makes transforms relative to the top-left corner
.tile-inner {
border-radius: $tile-border-radius; border-radius: $tile-border-radius;
background: $tile-color; background: $tile-color;
@ -303,9 +308,13 @@ hr {
z-index: 10; z-index: 10;
font-size: 55px; font-size: 55px;
}
// Movement transition
@include transition($transition-speed ease-in-out); @include transition($transition-speed ease-in-out);
@include transition-property(top, left); -webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
transition-property: transform;
$base: 2; $base: 2;
$exponent: 1; $exponent: 1;
@ -328,7 +337,7 @@ hr {
@while $exponent <= $limit { @while $exponent <= $limit {
$power: pow($base, $exponent); $power: pow($base, $exponent);
&.tile-#{$power} { &.tile-#{$power} .tile-inner {
// Calculate base background color // Calculate base background color
$gold-percent: ($exponent - 1) / ($limit - 1) * 100; $gold-percent: ($exponent - 1) / ($limit - 1) * 100;
$mixed-background: mix($tile-gold-color, $tile-color, $gold-percent); $mixed-background: mix($tile-gold-color, $tile-color, $gold-percent);
@ -381,43 +390,38 @@ hr {
@include keyframes(appear) { @include keyframes(appear) {
0% { 0% {
opacity: 0; opacity: 0;
-webkit-transform: scale(0); @include transform(scale(0));
-moz-transform: scale(0);
} }
100% { 100% {
opacity: 1; opacity: 1;
-webkit-transform: scale(1); @include transform(scale(1));
-moz-transform: scale(1);
} }
} }
.tile-new { .tile-new .tile-inner {
@include animation(appear 200ms ease $transition-speed); @include animation(appear 200ms ease $transition-speed);
@include animation-fill-mode(both); @include animation-fill-mode(backwards);
} }
@include keyframes(pop) { @include keyframes(pop) {
0% { 0% {
-webkit-transform: scale(0); @include transform(scale(0));
-moz-transform: scale(0);
} }
50% { 50% {
-webkit-transform: scale(1.2); @include transform(scale(1.2));
-moz-transform: scale(1.2);
} }
100% { 100% {
-webkit-transform: scale(1); @include transform(scale(1));
-moz-transform: scale(1);
} }
} }
.tile-merged { .tile-merged .tile-inner {
z-index: 20; z-index: 20;
@include animation(pop 200ms ease $transition-speed); @include animation(pop 200ms ease $transition-speed);
@include animation-fill-mode(both); @include animation-fill-mode(backwards);
} }
.game-intro { .game-intro {
@ -455,11 +459,6 @@ hr {
margin: 0 auto; margin: 0 auto;
} }
// .scores-container {
// float: left;
// clear: left;
// }
.score-container, .best-container { .score-container, .best-container {
margin-top: 0; margin-top: 0;
padding: 15px 10px; padding: 15px 10px;
@ -478,7 +477,7 @@ hr {
} }
// Rest of the font-size adjustments in the tile class // Rest of the font-size adjustments in the tile class
.tile { .tile .tile-inner {
font-size: 35px; font-size: 35px;
} }