Adding a Result Modal Exercise

[00:00:00]
>> The last thing we wanna do is let the user know about a final result. So I'm gonna go into VS code and I'm gonna give you in the components gamestate. Go back into source components. In here, we're gonna say gamestatefinish.vu. I'm gonna save this. I'm gonna say V base.

[00:00:29]
And this div is gonna have a class of modal we saw that we use that class of modal for the first one. We're gonna use it for the second one. This is gonna be your exercise. You already know if it won or lost. Right now, in that app dot view, if I collapse these we have VF UI state is start in a V else.

[00:00:51]
But we have one more condition, don't we? We have if the UI state is start if the character is chosen, and if the UI state has finished. .And we have another UI state that's inside of here. We wanna show them slightly different things based on whether they won or lost.

[00:01:09]
In our game sources repo, If we go look at that, let's go in the game resources. You have a, if we go look into the game resources, that is the food app resources. That is not the game resources. If we go into the game resources, you have a little goofy face dot SVG, and it looks like this.

[00:01:35]
It is a little ridiculous. What you wanna do is you wanna show it. If you're winning, then it's showing a smile and if you lost it rotates the whole thing and shows the smile upside down. Or alternately, if you want to practice working with SVG DME, you could turn the just the smile and the frown upside down.

[00:01:56]
But you wanna report to them if they won or lost and you want them to be able to restart the game. So you want them to be able to set that UI state back to start. So if we have the alien zombie netlify app and you want to see what that end state could look like, I'm gonna go to baker.

[00:02:14]
I'm gonna pick a bunch of random stuff. You can't be serial. What's the most imaginative insult I like you eat buttons off the remote Lagoon, which I'm still proud of, and it says I won. So this is what the modal should look like you won. Let's play again.

[00:02:29]
And when I select this button, it starts me from the beginning with a score of zero again, so I'm able to start that over again. Okay. So, exercise in the repo, go to game problem. So you want to reset the game at the end. I gave you the final result modal.

[00:02:51]
Let people know if they won or if they lost, put in the face. Make it do things if you won or lost. Put in a restart button and put the conditional logic into the app that shows the right thing at the right time. I know that sounds like a lot, but really, you're adding a directive or two.

[00:03:07]
It's not it's not going to be too bad. I promise.