This course has been updated! We now recommend you take the Svelte Fundamentals course.
Transcript from the "Game Completion State" Lesson
[00:00:00]
>> So, we left things with this big to do on line 35 to do and the game. And we need to do better than that, we need to show the user the results and then we need to take them back to the welcome screen once they exit. So, let's add another value less done equals false.
[00:00:22] And then in here, just change that to done equals true. Done means that we've answered all 10 rounds, and we're ready to see what what happened. And then inside our game container, we need to represent that somehow. Let's add an if done block, And then add an else block.
[00:00:52] I'm just gonna put all of this await stuff inside the else And inside here, we're gonna have an element giving us our results. Leaving that blank for now because we don't have a representation of the user school. We're gonna have a message that pops up, message goes here.
[00:01:33] And we're gonna have a button that takes us back to the home screen, back to screen. Okay, let's tackle this bit first. We want to have a value that is derived from the results array, that represents how many answers you got right. And that's easy enough to do using a reactive declaration.
[00:01:55] We can do dollar colon score = results dot filter for the ones where x is right. And then just grab the length of that. That is going to be our score, and we can replace the three question marks with that. And that should be in curly braces, my bad.
[00:02:24] For the message, we're gonna wanna have a function that will pick out a message that is customized based on how the person did. So let's create a thing, pick message = P which is a value from zero to one, where zero is you didn't get any right and one is you got them, all right.
[00:02:48] And let's import our pick random function that we're using in the select module. All that's gonna do you pass in an array, and it will randomly select an item from the array by choosing a random number and multiplying it by the length of the array, flooring that, and then returning that element of the array.
[00:03:12] Sleep and pick random, and then we can implement our pick message function like this, if P is less than naught 0.5, we can return a random one of messages like, ouch that wasn't very good. Must try harder. If they do up to 8 out of 10, can give them more encouraging message?
[00:03:54] Not bad, keep practicing If they get up to the eight or nine, Then good so close. Almost there Otherwise they got the top results. So, return, Something a little bit more celebrated, you look flawless victory. Okay, and then we can use this function inside our template replace this message goes with pick message, And then school divided by results.length is gonna give us a value between 0 and 1, That is pretty much everything, except that we need to add an event handler when we click the button.
[00:05:27] We're gonna do dispatch, Oops, having some trouble with the meeting software, dispatcher restart event. It's under strain that in yellow because dispatch has not yet been defined, so we need to do the same thing once again. Import create event dispatcher from svelte. And create the dispatch function. And just to bring things full circle inside app, when we hear the restart event coming from the game component, we just set the state of the app as a whole back to welcome.
[00:06:33] Okay, and we can check that this is working by, I'm just gonna turn this down to say three rounds. And then we'll go through a three round game. Let's say Anthony Michael Hall? Yes, was it David Herman? No, voice of Siri, wow, that's gonna be worth something crazy.
[00:07:03] Okay, so it's given us our done screen. And now if we click on back to main screen and hopefully it's gonna take us back to the welcome screen and it does