Use transforms for tile positions

[gabrielecirulli]

Attempts to solve #25. Currently broken due to tile animations not mixing up with position transforms.

[gabrielecirulli]

I'm currently having a few issues with this PR. Using transforms for tile positions makes the game feel a lot snappier, but it also causes issues with other tile animations (appear animation, merge animation), because when they're executing their own transforms they won't keep consideration of the transforms that set the tile's position, so they'll just stick to the top left corner.

Is there a way to solve this?

[elicwhite]

If I understand your question correctly, the translates are causing the other animations to break. In order to have multiple transforms, you specify the property as

-webkit-transform: translate(10,-25) scale(1)

[gabrielecirulli]

I tried changing the part where I define transforms for every tile position to the following:

-webkit-transform: translate($xPos, $yPos) scale(1);

This still causes tiles to animate at the start position (top left corner) and then get to where they're meant to be only after the animation has run. I don't think I can afford to define custom animations for each possible tile position, because that'd render a lot of CSS. Is there no other way to have two different transforms "cooperate"?

[elicwhite]

It seems like these transforms should be set in javascript, in which case you just tell the piece where to go to next which sets the property with the correct positions

[gabrielecirulli]

Wouldn't resorting to inline styles still cause the same issue, where whatever transform definition has the most precedence (in this case I believe the position one in the inline style) would take over the other (animations such as merge and appear) and cancel it?

The only ways I can see this working are either by creating a huge list of all positions with the appropriate @Keyframes definitions (which is unfeasible because it'd be huge) or if there were a way to somehow make two (necessarily) separate transform definitions have combined effects on the element.
I can't find any evidence that the latter is possible, though.

[elicwhite]

Does this help answer your question? http://jsfiddle.net/am8ub/

Sorry for not being more helpful right now, its 3am and I've been playing (and still am) 2048 for hours. ^_^

[elicwhite]

Ah, I think I understand a little bit better. My friend and I just thought of putting the tile in a wrapper div, the tile scales, and the wrapper div translates...

[marg51]

@TheSavior You are right, it works that way. ( test , diff )

ps : my test is ugly on mobile, I didn't take care of the size of divs, it wasn't the point. But yes, it's smoother (I have an iPhone 4 ios 7 )

[gabrielecirulli]

Nice solution. I'm gonna try to bring it into this patch soon.

[elicwhite]

👍