Transcript from the "Game Activity Display" Lesson
[00:00:00]
>> So in here, we're creating this result variable, or concept should say, and logging it, but we can use that in the UI. We can say that once there is a result we show either the big green check or the big red cross. Before we can do that, we're gonna need to take it out of that function.
[00:00:21] And let's call it last result. And then just change const result into last result. And then we're gonna need to show that check but you've seen that on here when this happens, it appears for a minute and then it goes away. It doesn't just immediately advance to the next round because then you wouldn't get any useful feedback.
[00:00:44] So we're gonna need to change this submit function to an asynchronous function. And then after the last result has been set, we're gonna need to wait for let's say 1500 milliseconds. There's a way that I like to do this, which is to create a sleep function. So in my utilities file down here, utils.js, I'm going to export a new function.
[00:01:10] I'm gonna call it sleep. That's going to take milliseconds as an argument. And it's gonna return a promise. Which takes a handle here, fulfill, then we do set timeout, fulfill after the set number of milliseconds. Okay? So I'm gonna import that in here. Import sleep from ../Utils. And then once we've set the result in our submit handler, I'm just gonna do a wait sleep 1500 and nothing else can happen while that's going on.
[00:01:59] So now we need to actually use that information somehow. See if we have a last result, We're gonna create an image, Give it a class, giant result. Give it an alt attribute. Feed in last result which is gonna be either right or wrong. And then that said the alt attribute is gonna be the right answer or wrong answer.
[00:02:37] And then the source of that image is gonna be one of the icons that is already in the public directory. Just take that SVG and throw it onto the screen. Obviously, we need to add some CSS for that, so let's do that down here. It's gonna be in the same position every time, so we use position fixed.
[00:03:05] And we're gonna make it a square and the way that we can do this quite easily is to use the v min length in CSS, which is the minimum of the width and the height of the screen. So 50 v min is either gonna be half of the width or half the height depending on whether you're looking at an oblong or whatever the opposite of an oblong screen is.
[00:03:31] Same for height. And then we can do 50vw minus 25vmin to get it positioned in the middle of the screen. Similarly, 50vh take 25vmin to get it vertically centered, and we're gonna fade out of it, give it a pasty of naught 0.5. Okay, move over to our game screen.
[00:04:00] And so this time if we click on one of these, the image is gonna appear in the middle of the screen, which is exactly what we want, but it's not getting cleared out. So we're going to need to do that after we're finished awaiting. Just do last result equals null and then we can get on with the game.
[00:04:23] So this time. Okay, that's what we want. And then finally, for the game UI, we need to add this row of results at the bottom of the screen. We're gonna stay working in the game.cell component. It's gonna collapse some of these things that we're not using right now.
[00:04:57] So we've got this results div already, everything is gonna go inside here. Before we can do anything, we're gonna need an array that represents the results that we've had so far. So let's just do that up here. Const results equals, and it's just gonna be an empty array with the same length as the number of rounds, selection, like that.
[00:05:24] And then in here we can iterate over that, even though it's an empty array with holes in it, we can write over it because it just uses the length property. Each results as result. Gonna give each of those a span. And if we have a result for this round, then we'll use the same image that we had before.
[00:05:56] Just chuck that in there, except this time it's not gonna have this giant result class. Okay, the last thing that we need to do then is assign to the results array. At the same as we clear out the last result. Okay. Something's not worked exactly the way that we wanted it to here.
[00:06:42] So let's take a look at that. Okay, so here, I'm using last result, but actually, I should be using this right here. That's the danger of copying and pasting your work. We're also going to need to add some CSS for this results div. Let's just go and steal it.
[00:07:44] Get some styles for each individual result. And finally for the images inside each of those spans. Now because the results div is using a CSS Grid, we need to tell it how many items it's gonna have, otherwise it's not gonna know how to lay things out. So div class results is gonna get an inline style with grid template columns.
[00:08:30] And we're just gonna repeat for however many things we have in our results array. And that's gonna be 1fr. So that's just gonna get divided up into ten blocks, each of which is gonna contain, One of the images. Okay, so that's working. It's taking the big giant image and then is replacing it with a little one that's keeping track of performance so far.
[00:09:02] Does fel support Sass or less within the single file components? And the answer is yes, it does. Not natively, Svelte itself doesn't understand anything other than HTML, CSS, and JavaScript. But you can pre-process your Svelte components using a module called Svelte Preprocess, which will take in the contents of the component, and then transform the contents of your script block and your style block and the component as a whole, in any way that you specify.
[00:09:31] So in that way you can run your script through Babel. You can use TypeScript after reflection, and you can use things like SASS and LESS as well.