Game Play States

[00:00:00]
>> So far most things are looking pretty good, but we have some game logic that has not yet been accounted for. So, there's a few things that can happen. We can win the game by finding all of the pairs, or we can lose the game by running out of time.

[00:00:15]
We can also pause the game by hitting the pause button. So, let's represent each of those. First the pause one is easy to do. We're just gonna add an On click here. And that's gonna forward any click events on the button up to the game component. We'll add on the countdown, we'll add, oops, get rid of that.

[00:00:57]
We'll add a little to-do to ourselves. In the grid component, if we find all of the pairs, then the length of the found array will be equal to the area of the grid divided by 2. And finally, if we run out of time inside our countdown loop, then we lose the game.

[00:01:38]
And the way that we're gonna do this is we're gonna have a variety of states that the application can be in. I'm gonna go back into our page.svelte component. And we're gonna define a set of states for the game. We can be waiting when we first load the game.

[00:02:04]
We can be playing. We can be paused. We can be in a win state. Call it won. Or we can have lost the game. And we'll initialize that with a value of waiting. We need to add lang="ts" because, otherwise, it doesn't understand this syntax. And so now we can add some UI around the game itself so that when we first come to this app, we're not launched into the game immediately, we have this interstitial welcome screen.

[00:02:49]
And when we interact with that, it takes us into the game. So anytime we are not actively playing, whether it's because we've paused the game, or because we've won or we've lost, we wanna have a modal that appears on top of the game UI. So if state is not playing, Then we wanna have some content.

[00:03:13]
And we're gonna put that in a new modal component, so that we can add some styles to it. So add that component, Modal.svelte. The first thing we're gonna do is create a modal-background, Which covers the entire screen. Use position fixed, Give it a width and a height of 100%.

[00:03:58]
And we're gonna give it a backdrop filter, That blurs everything behind the modal. We're gonna use display grid and then just place everything in the center. And finally, we're gonna give it a z-index to put it safely above all of the content. And then, inside that, we'll have the modal content itself.

[00:04:37]
And we're gonna create a slot, so, that we can pass some content into this modal. Save that and over here we'll create our modal. Then we can start adding some content inside here depending on the state that we're currently in. So when we first load the page, the state is going to be waiting.

[00:05:00]
So we'll add if state is waiting, We'll add some text that just says, choose a level. It looks like we need to add some positioning on that fixed element so that we can see it. All right, this is the first time I've actually had some text in this application, and we can suddenly see that we're using Times New Roman which is a horrible sin.

[00:05:41]
So we need to pick some nicer fonts for this. One thing that I like to do when I'm creating any new styles is, have a default style that is using the system UI. Because this way, we don't need to download any custom fonts, and it will look pretty nice on basically whatever platform you're using.

[00:06:03]
So in VS code, if you just start typing system UI, you will get some nicer fonts like that. But for the for the logo of the game, we want something a little bit nicer than the system font. You can pick your own font but this is one that I particularly liked called grandstander.

[00:06:23]
And rather than going into Google fonts or whatever and downloading a .WOFF file and adding it to my project, I'm just gonna install it from npm. There's a wonderful set of packages called fontsource. And I'm just gonna install fontsource/grandstander. But if you have a font that you would like to use instead then you can install that.

[00:06:50]
And once that's installed, all I need to do in here is add an import declaration to the top of my styles.css. That points to that new package. Right, this makes the grandstander font available to my app. So if I add an h1, I can use font-family, Grandstander. And then now if I've set that up correctly, I can add an h1 inside that modal.

[00:07:30]
Hey, presto, we have a logo. Looks like we need to add some more styles to the modal so that everything is correctly justified. Or maybe we just need to make the h1 a little bit bigger so let's add some styles here. Make that nice and big. And in the original, we're highlighting the text inside.

[00:08:06]
So I'm gonna do that by creating a span inside the h1, And giving that nice color. I'm just gonna wrap all of that in a header, so that we can add a little tagline as well. Gonna give the p font-family a Grandstander as well. And then we need to handle all of the other states that our application could be in.

[00:09:01]
So we already know that we're not in the playing state and that leaves paused, won, and lost. So we can handle the won and the lost states together. If state is won, or state is lost, We'll add some text that says you state the game. If the game is paused, We'll just say game is currently paused.

[00:09:50]
And then we'll turn this into an else if state is waiting. Then we'll invite the player to choose a level. And then below that text, we wanna have some buttons so that we can actually start a new game. And the buttons that we show are gonna be dependent on what state we're in.

[00:10:20]
If the game is currently paused, then we wanna show a Resume button or a Quit button. Otherwise, we want to show the different levels. And I'm just roughing out the UI at this point. We'll add the logic in a moment. Okay, right now there's only one button visible and that is the easy level because we haven't added the others.

[00:11:09]
So let's go into levels.ts and add the other levels of our game. We'll add one for medium, it's gonna have a size of 6. And a duration of, let's say, 2 and a half minutes. And we're gonna copy the emojis from the gist that I shared earlier. And then finally, for the masochists you're gonna have a hard level which is gonna be 8 by 8 which means 32 pairs.

[00:12:01]
And for this one we'll say 5 minutes It's also gonna be hard because we're using face emojis and they all look basically the same, so it's kinda hard to distinguish between them. All right, and now if we look at our app, we should see easy, medium, and hard.