Switching Game States

[00:00:00]
>> We need to get the state into this screen, and we also need to be able to start new games and interact with the game component. So we're gonna need to expose some functions from our game component that the page can interact with. The first one we'll do is start.

[00:00:22]
Create a function, start, and then this is gonna take a level. All right, then we call this start function from outside, that is gonna reset the game state. So we'll do size = level.size. The grid is a newly created grid. And remaining and duration are both equal to level.duration.

[00:01:01]
And then we're gonna actually start the game by calling a new function called resume which we're about to create. So now we're gonna set playing to true. Then call our countdown function. And then the final step is to communicate that state back up to the page component. So we're gonna need to create an event dispatcher for that.

[00:01:33]
So, as before, const dispatch=createEventDispatcher(). And when the game resumes, we are going to dispatch a play event. We need to export this start function so that we can call it from outside. And now inside our page.svelte component. When we click on one of these buttons, we're gonna call that start function.

[00:02:12]
But before we can do that, we need to get a reference to the game component. So we're gonna create let game up here and then bind that to the game component, then inside our event handler, we're gonna call game.start. And we also want we need to pass in the the level that you want to start it with.

[00:02:42]
We need to give a type to this. This is gonna be a. A game object and so that that now understands that the start function takes a level argument. Okay, so we've got the main component telling the game component to start a new game, we now need to get the state back from the game component into the page.

[00:03:10]
We'll do that with event handler. On play, We're gonna set the state to playing and that's gonna have the effect of getting rid of the modal. So if you choose a level the game begins. But we need to get rid of all of the initial state that we had to begin with.

[00:03:35]
We don't want to have a level already selected. We don't want to have a default size the grid needs to be empty just gonna get rid of all of this. Let remaining=0, let duration=0. And we don't even want to show this countdown unless the game is currently active.

[00:04:01]
So we're just gonna wrap this whole thing in an if playing. Okay, so now we can pick a harder level if you want. We can choose medium and we see that we have some broken CSS. That's because we're not passing the size of the game board down to the grid component.

[00:04:33]
We can fix that with a CSS custom property. And we can then use that inside the grid component. If you just find the CSS declaration where we hard coded 4, get rid of that and replace it with, var(--size). All right, we can now play a medium game or we can play a hard game and everything will shrink down accordingly.

[00:05:19]
So we just need to communicate the win state and the loss state, and then our game is basically complete. If we found all of the pairs, we can dispatch a win event. And if the countdown runs out, we can dispatch a lose event. And if someone hits the countdown button, then we can set playing to false, so that the countdown timer doesn't continue.

[00:05:57]
And we can also dispatch a pause event. And then in the top component Page.svelte we can add handlers for each of those changes of state. [LAUGH] okay, it is telling us that we immediately lost the game. And I think I know why that is is because inside game.svelte we're calling the, countdown function as soon as the component is mounted, which we do not want.

[00:06:55]
Instead, we want that countdown to start when the game is resumed or when we start the game. So if we get rid of that onMount call, it should take you to the welcome screen where we can start the game. It is not counting down right now, that's backwards.

[00:07:27]
All right, unfortunately, the only way to check that this works is to actually play the game. Did we see the red bird already? No, not there. I think we saw the alligator. Man, I'm so bad at this. Okay, and it shows us that if we do in fact win the game, it'll send us the you won the game message.