Game Animations

[00:00:00]
>> We don't have much of a game at this point because the emojis are facing us. We need to make this start to resemble a real game. And to do that, we're gonna have the cards on their backs by default. And if you recall from the original demo, these kind of flip over using CSS transforms.

[00:00:18]
So we're gonna need to set a few things up to make that work. The first thing we need to do is we need to add some perspective on our grid. And there's a CSS property called perspective. We're gonna give it a value of 100 vw. Doesn't really matter, it just affects how severe the distortion is when things are flipping over using CSS transforms.

[00:00:45]
And then inside our square component, I'm just gonna close all of the junk up here cuz I don't need it anymore. We are gonna add some CSS transforms that simulate the card being flipped around. In order to see the flip happen, we're gonna need to add a transition.

[00:01:15]
Let's do something like that, transition the transform property for 0.4 seconds. So far nothing's happening and I think that's because we need to add a transform style on here of preserve 3D. CSS transforms especially when we're dealing with 3D is the kind of stuff that I have to look at MDN at each time.

[00:01:48]
I can never remember how to get it right, clearly I haven't got it right at this point. It's because we're applying the transform only to the button instead of to the entire flipped element. So we're gonna change that selector so that we're targeting flipped, and you'll see that that cow flipped around there.

[00:02:16]
Okay, so it's starting to look a little bit like what we want except that the emojis shouldn't be visible until the card is flipped. So to make that work, we need to have a default transform on the image of rotate y by 180 degrees. And we also need to add a property called backface-visibility which should be hidden.

[00:02:48]
Okay, so now the emoji is not visible until the card is flipped. One thing that we don't want to happen is for the button to continue being visible after we flip because we don't want you to be able to click on that. So the button is also gonna get a backface-visibility hidden.

[00:03:11]
And that means that the background that we put in earlier is now showing through. So let's make that a nicer color. In fact, we're gonna need to add another element for that background. Let's call it div class equals background. And, just like the image that's only gonna become visible when the card as a whole is flipped.

[00:04:02]
Okay, we're getting there but we need to add some more styles. So clearly, let's do width 100%, height 100% and we'll slap in a position absolute in there as well. Okay, things are starting to behave. But what we're finding is that some of these cards are still flippable even though we've already found those pairs.

[00:04:29]
So we actually want to remove those or rather we wanna keep them flipped once they've been found. So we're gonna keep the flipped class active when the square has either been selected or it's been found. And do that like that and so now you can see which cards have already been found, and which ones still need to be found.

[00:04:58]
Okay, we wanna get rid of these default ugly button styles. We're gonna give that a background of eee and get rid of the border. And let's give it a border radius as well while we're at it of one ems. Okay, that's starting to look a little bit like what we had on the published version.

[00:05:21]
We'll add that border radius to the background when the card is flipped as well. We're actually gonna change that background to white and give it a border of eee. Let's make that a little bit bigger maybe, a little bit thicker. Okay, we're starting to get a little bit closer to what we had before.

[00:06:00]
The border radius isn't quite the same between the button and the div, and that's because by default in the browser, buttons have a font size that does not inherit from the surrounding content. So we need to add that explicitly, font size inherit. Now everything is using the same border radius.

[00:06:30]
In the same vein, we wanna get rid of the default styles on the button in the countdown to give it a background of transparent and a border of none. And the countdown button now looks a little bit nicer. At the moment it doesn't do anything because you haven't wired up any event handlers, but we'll come to that soon.