Unhiding Elements

[00:00:00]
>> We've reached the CSS completed milestone. So if you fell behind with the CSS or HTML, feel free to move on and grab that CSS completed milestone. So now if we look at our game, we have no fox there because it's hidden. But let's go ahead and remove the hidden for a second.

[00:00:18]
And nothing's there because we need to give it a modifier so if I say like fox-hungry. You can see there it'll add our fox friend to the page. All I'm doing is just changing you have fox and fox dash something. It's like I can put dead and you can see it brings a tombstone up.

[00:00:44]
Or if I do fox-pooping, I think is what I called it. You can see that's what it looks like when the fox poops. Right? Or fox-sleep. So now that we have all this kinda stuff, now all we have to do is change the class of that fox and it can be in its various different states.

[00:01:09]
So all we're gonna do is tie that to the state machine. So whenever the fox is sleeping, it's gonna have the fox sleep class and everything is gonna work visually. So we just have to control the JavaScript and make that JavaScript just output the class to the CSS, and everything kinda takes care of itself.

[00:01:25]
I think the last thing I wanna do here, before we move on, is let's go ahead and fix this modal. So I'm gonna actually move this to the side to the right. And let's just go ahead, I'll show you how I kind of do this in general. This is how I do my CSS is I just do it in the browser first and then I copy and paste that into the stylesheet.

[00:01:55]
So let's give it a padding, Of like 15 px. Maybe like 25 px. We'll give it a font size. Bump it up to like 16 px, no. Not 25, 20, let's make a bold as well, font weight, bold. And let's round those corners because everybody loves rounded corners.

[00:02:30]
So when you border radius, 5 px. Let's have a little bit more round, it's a more friendly game, 12 pixels. And that's it. That's really what I would do. So I just copy this. This is on the inner, I believe. Notes on the model itself. So we'll just copy that.

[00:02:51]
And I'll move back over to my VS code and I'll find that modal where I put the background, this one, and I'll just paste that and save, and when I say that, prettier will automatically readjust the formatting there. All right, that was a whole lot of HTML and CSS.

[00:03:13]
Again, you can grab that as CSS completed. Cool, does anyone have any questions about any of that?
>> Yeah, how is the animation loop occuring when there's no user interaction? Is this JavaScript or something else?
>> I'm gonna give you a very short version, because again, I'm not necessarily the expert on these.

[00:03:32]
There's a whole amazing course from Sarah Drasner on SVG animations, which is the advanced part of this. And there's other great content on Frontend masters about animations. But let's take a look at the remedial stuff that I did. So, I'll inspect element on our little foxy friend. So fox sleep right there.

[00:03:55]
You can see I have this coming in. It's coming from sprites.css right here. And you can see I have a background, and then I'm using animation here to do some of the animation here. So let's take a look at sleeping dot whatever this is up here, it has four frames of the fox and it's just stepping between quarters, right, so it's here, then it moves here, then it moves here, right, and that gives the impression of motion.

[00:04:27]
So if I look back, not that one, this one, you can see each one of these frames, it's kind of moving between them, right? So something fun I could do, if I can show you. I think if I got rid of the width and height that would show you.

[00:04:54]
Or with. That's really interesting. So Background repeat. So you can see all that that's how it's doing right? So it's actually moving like very jumpily, right? It's jumping between the various different frames, which is giving it the impression of motion. And that's what this step four say, like it's this wide, it's this long.

[00:05:31]
And move it between these various different frames every second is how often it's jumping frames. So if you search for like CSS steps, animations, you'll find a whole bunch of stuff on that. And it'll teach you a lot more than what I'm doing here. But that's kind of the gist of what's happening here.