Svelte Game Layout & Buttons

[00:00:00]
>> Okay, so it's time to start building the UI a little bit further. We're gonna create some cards for the celebrities, and then use those in the game component. And that means we're gonna create a new component. There's no a screen but is a, A separate component. So I'm gonna create a new directory inside source/components.

[00:00:30] And I'm gonna create a component called card.svelte. And then inside the game screen, I'm gonna import that component. And there's really no sorta conventions about how you organize your components. I've put this in a separate components folder, but you could also put it next to the game thoughts component.

[00:01:00] It's really up to your personal preference, and then we're just gonna replace these with card celeb = a, and then the same thing down here. Except with b. I've got an error here. What's happening? I did that wrong. It should be components/card per cell, thank you, hold up.

[00:01:39] And then the card component is obviously gonna need to export a celeb prop. And let's just do celeb.name again. So we can see that something is happening. Okay, that's working. So let's flesh out the layout a little bit of our main game component. Sorry, yes the main game component.

[00:02:14] CSS is not my forte, so don't mind me if I just copy what I figured out earlier this week. Game is gonna use display grid and we're gonna have three rows. We're gonna have a row for the celebrity on top, and then a little row, and then a big row.

[00:02:37] And the way that that works with grid is we do 1 fr for fraction, and then a set height is two ends, and then another one fr. And so those files are just gonna fill as much space as left after you've subtracted the two M's out of the middle.

[00:02:56] And we're gonna give that a little gap of 0.5, and make it all the way big and all the way tall. But also give it a max width, just as a way of preventing the layout from getting crazy. I'm gonna give it a minimum of 100% or 40 Vh and margin 0 auto just so that it stays in the middle of the screen instead of wandering off.

[00:03:33] Okay, so inside the gang component, we have these three divs here, and they all need to have some styles in common. So we're just gonna do game, and then div is a descendant, they're gonna use display flex, With a line items center. That's gonna give us nice vertical centering when we're in desktop mode.

[00:04:01] So that's the mobile layout taken care of. But we also wanna have a separate desktop layout, which is gonna kick in above 640 pixels wide. So on mobile, we've got celebrity, same celebrity on desktop, one celebrity, same celebrity, because we wanna use the space available to us. And we're gonna get rid of the template rows because it's all gonna be columnar at this point, and had grid template columns.

[00:04:51] And similarly we're gonna have 1fr, 8m's and then 1fr. Now I found a really weird Safari bug when I was building this earlier, so, I'm just gonna add some extra styles, max height: calc 100vh- 6m. And one day I will build a project that doesn't have weird Safari bugs, but today is not that day.

[00:05:25] And in desktop mode, then we want to take that button. This button class equals same and we're gonna give that a height of 8m's. All right, so that is more or less what we want. Obviously it looks a little bit wonky at the moment, because we haven't put the celebrity cards in yet.

[00:05:52] But that's the layout that we're after. So let's go over to the card style component and start implementing that. I'm gonna create an element to contain everything called likecar.outer. And then inside that, we're gonna create a button. And the reason that we're using a button is because these are interactive elements.

[00:06:20] They're things that the user supposed to click on. And a nice thing about using buttons is we get a lot of accessibility properties for free. So right now on the diploid site, if I'm someone who uses the keyboard instead of the mouse for whatever accessibility reasons I might have.

[00:06:36] I can press the Tab key, and it will take me between the elements on the page. So if I think that David Herman is the better paid, then I can tap to his face and then hit the spacebar. And I'm wrong, but I'm gonna get this one right.

[00:06:56] Definitely, Eric Roberts, let's get back on this, okay. So we're gonna use buttons in all three cases for both the celebrities and the same price thing in the middle. Button class = card inner. And the button is gonna have the background image that corresponds to the celebrity image.

[00:07:26] style = background- image. And that's what that is gonna look like. And then inside there, we're gonna have these details elements. I'm just gonna grab one of those from the existing site. Copy outer HTML. And just tidy it up a little bit. Get rid of the scoping classes.

[00:08:17] And what we're left with is some static markup, that is specific to Jess Walton. It's gonna replace that with the properties of our celebrity objects at celeb.id celeb.name and celeb.type. Then we need to add some styles. So right now, this is unstyle. So it's rendering all the correct marker but it looks like garbage, so we need to fix that.

[00:09:02] First up, cut outs that needs to fill the space available to it. And then the button needs to fill that space. Okay, that works okay on mobile but not on desktop yet. Fix the background so that it's centered in the middle of the element and doesn't repeat. And far that should be this.

[00:09:59] Background size cover just means that the background image is gonna scale to fill the entire element, regardless of the relative aspect ratio. So if you have a square image and you have a slightly oblong button, then the image will expand outwards. Did you see everything? The position here is 50% 0, that defines the position within the image about which it gets scaled.

[00:10:24] So 50% zero means, if you have an image like this, it's gonna take this point right here, and it's gonna expand from that point outwards to fill the element. Hide everything else inside of the element, take the default button styles off. We don't want any padding and we don't want the text to be central lined too.

[00:10:48] We want it to be left lined. I'm gonna go ahead and steal some styles from the site. Details, I'm just gonna grab all of this stuff here. Similarly, for the h2 element, which is just his name here. Out Loud that's the anchor tag. Let's go up on, select that h2 just needs some margin, my sneezy.

[00:11:50] And then the spirit which is the type of celebrity as reported by the celebrities themselves, just grab all of that. Add a new type selector. And finally, we need to add a media query. Again 640px cuz that's the breakpoint that we've chosen. And that is gonna change the shape of the card.

[00:12:19] So that on desktop it becomes a square that always sits in the middle of its container as opposed to trying to fill the container. And we do that with a little trick, we set the height of the element to zero, but then we use padding to expand it back out.

[00:12:37] There is an aspect ratio property come in to CSS but it's not supported everywhere just yet. So for now, we're gonna do the padding aspect ratio trick. Hopefully, okay, that is giving us perfectly square celebrity's on desktop, and then on mobile. Well, it looks a bit terrible on mobile.

[00:13:03] I think I might have missed something somewhere. But let's not worry about that just yet.