Transcript from the "Creating the Game Screen" Lesson
[00:00:00]
>> All right, so the first order of business is gonna be to create a game screen component similar to the welcome screen component. We'll just put that in here in source slash screens slash new file game dot spelt. And then we'll import that. Inside app dot felt the same way that we imported our welcome component.
[00:00:27] And then down here, we've got the game screen goes head placeholder. We're gonna instantiate the game component. But we're gonna pass through the selection, because that's what the game is gonna use to actually render the quiz. So the first thing we need to do in our game component is make that selection prop available export lead selection, and we're gonna verify that it's getting passed through correctly by logging it.
[00:01:09] And then once again, we're just gonna rip off some markup from the one that we made earlier. The rest is just gonna be placeholder stuff. We're gonna make an element that is gonna contain the game. And then finally, we're gonna create that little row of results down here.
[00:02:22] So right now everything is getting smashed into the middle of the screen, we want the game container to fill as much space as possible. And then for the header and the results to just occupy the top and bottom. So, we're gonna add a rule game container has a flex value of one and that will make it stretch to occupy as much space as it can.
[00:02:45] Okay, so the game container you can see is occupying most of the screen Now if you look at the selection object that's being passed in as a prop, we can see the data structure that we're gonna work with. And most of the stuff that we need is that, we got names, we got prices, got all of that.
[00:03:28] But we don't have the image that belongs to each of the celebrity. So for that we're gonna need to go back to the API. And we're gonna need to load some more data for each of these. And that essentially means that we're gonna need to create a bunch of promises representing the result of loading that data.
[00:03:51] So let's do const promises equals selection dot map. And then for each of those objects that we just looked at, We're gonna load some details. Round at each round has an A property and a B property. Right, so now we just need to implement like details. I'm just want to grab that URL again.
[00:04:38] So each of these has Jason can inspect, which contains all of the same information as before plus description and plus the image is grabbed that URL, comes res equals await fetch. And then just replace the real mirror with the ID of the slab that we care about. And then just gonna return the Jason for that response.
[00:05:11] So that's gonna give us a bunch of different promises that represent the full details of the celebrities. Who spaces we are gonna include in our game. Now, dealing with asynchronous objects in, in templating languages has historically been a little bit awkward. But spelt has a first class way of showing promises in your component that we looked at earlier and it's called the await block.
[00:05:40] So we're gonna use one of those here. Gonna do a weight something, we'll figure that out later. Then we're gonna have an array of A and B, because that's what's getting returned from here, an array. And by the way, I'm actually using a shorthand here. So before we had a waive something and then you would have a pending block.
[00:06:15] And then you would have a then closed. In cases like this one where we actually don't want to show anything while while pending is still the case, we can shortcut this to a weight, something Ben value. [NOISE] And so once again, that's gonna be an array with A and B and we can use destructuring.
[00:06:50] And inside there, we're gonna create the game element itself. Class equals game. I'm gonna have a card for the two celebrities faces. You don't name and then just like here, so someone just pointed out that I am not loading B, I'm only loading A twice which is no help at all.
[00:07:33] Thank you for spotting that. Okay so on the final version of the game you can see the, as well as having celebrity A, they were having in this case since celebrity B, Maurice LaMarche. We have a button in the middle that you are supposed to press when you see that charging exactly the same price, so were gonna add that to mark up as well.
[00:07:56] Just put a little div in there and then inside there, we can have a button, give it a class equals same. And then just put the word same price. And in some cases, like as we've seen, it's possible that would be an error. So we're gonna have a little error message class equals error.
[00:08:25] And we'll just print the Print a message that says we failed to load, data and then [INAUDIBLE] Okay, so all we got to do now is figure out what this something should be, so we have, an array of promises. And we're gonna step through them one at a time and the easiest way to do that would be to just have a value that represents the current index into those promises.
[00:09:01] So let's create a new value let I equals zero. I'm just gonna take that up as we go through the rounds. Replace something with promises. I like so and then now if we go over to our application and pick around. And we can see that it is indeed picking out two celebrities Gillian Harris and Kevin Chamberlin and rendering some game UI for those.
[00:09:32] And now, I guess we need to start building out the rest of that UI.