Transcript from the "Displaying Game Data" Lesson
[00:00:00]
>> And I realized that, we forgot to add some CSS for our dome screen, so let's just go back into game.svelte.
>> Also there's APU lock, even though you had 1 out of 3.
>> Yeah, that's a very good point. I must have messed up some logics somewhere.
[00:00:19] So, Mark just pointed out that, [LAUGH] the pick message function, is giving me a slightly more encouraging message than I deserved with that dismal performance. And it's not totally clear to me why that happened [CROSSTALK]
>> [CROSSTALK] Return the results of your pick item.
>> Yes. This is why you don't live code without people who have better attention to detail than you do.
[00:00:56] Okay, let's get our CSS in there. Let's go back down to the CSS block. And this component started to get a little bit large, at this point, I will probably factor out into multiple components. But just for the sake of simplicity, I'm just gonna keep everything in here for now.
[00:01:15] So, dome is gonna have position absolute, width 100%, Height, 100%, left, 0, top, 0, display flex, so that we can get everything nicely, vertically and horizontally centered. Flex direction, column, justify content, center, and some more styles. Inside the dome, we're gonna have a strong tag, which is gonna contain the actual score, the one that'd be nice and big.
[00:01:58] So we're gonna give that a font size of 6ems and we're gonna make it nice and bold as well. Font weight 700. Okay, there's just one little piece of UI that we're missing, which is this. When you click on a celebrity's face, you wanna see what that price is, so that you can see how big the gap between the two celebrities is.
[00:02:27] So we're gonna add some more stuff to our core component. We're gonna explore a couple more props. We're gonna explore, prop called Show Price, and one called Winner. So, when show price is true, we're gonna show the price logically enough. I'm gonna add that below our details element.
[00:02:55] If show price, Div class= price. And we're gonna use the class Directive, to apply the large class if they are the winner. You see this sort of thing all the time where you have some boolean value, and you wanna toggle the class based on that. And inside that element, we'll have the the value itself $ and then the celebrity's price.
[00:03:34] And we're gonna chuck some CSS in there. Position, absolute, because we wanted to fill the the button, width 100%, height 100%. I should probably create a class to this, because I've done this a few times, this is width height, left top, combination. We're gonna give it a slightly dark background, with RGBA, make it white.
[00:04:12] Use Display Flex for the vertical and horizontal alignment, centering, rather. Justify content, center. Font size, 4ems, font weights 700 nice and bold, and then for the Winner, with that large class, is gonna make the font size attach bigger 6ems. All right, hopefully now when we go through around, I forgot to pass the props through to the core components.
[00:04:52] So let's go back to game.svelte, correct style, I don't need it, here, okay, so this component, and this component, we wanna show the price when we have a last result. So showprice=, there's no underscore there, equals, I'm gonna coerce it to a boolean, doesn't really matter. But, I just like to show that it's supposed to be a boolean.
[00:05:22] And they are the winner if a's price is greater than or equal to, because if they have the same price then they're both winner. b.price and then the reverse on the other one, b, a swap those positions. Okay. Okay, so now we can see the, that was close, 67 versus 65.
[00:05:55] Now we can see the prices being displayed. These icons are really big, because I've only got three rounds happening here. So let's just go back to select and revert that to 10 rounds per game. All right, we have a functionally complete game, and we're now at checkpoint 3 and the get repo.
[00:06:21] So once again, if you've fallen behind, and you wanna catch up before the final push to a complete game, then you can stash what you've worked on, and then do get check out, checkpoint 3.