Game Interface & Styles

[00:00:00]
>> All right, so the first thing that we're gonna do is just gonna get rid of this placeholder markup. You don't need that anymore. Now looking at a blank page. And we wanna create a game component, which is where the bulk of our logic is going to live.

[00:00:16]
So in the file explorer, I'm gonna create a component alongside here. Just call it Game.svelte, And then inside the page.svelte component, I'm gonna start, typing the word game and it's gonna auto import that for me. Just hit Enter. You can see that it has added the input declaration and everything.

[00:00:44]
And so now we can start building the game insight, our game.svelte component. Now, there's a lot of ways that you can go about building something like this. The way that I tend to like to do things is build out a very rough user interface so that I have a sense of what things are gonna look like and then we can start adding the game logic once we have the basic UI in place.

[00:01:14]
And then finally, we'll add some polish. So I'm gonna create div class = game. And inside there, let me bring up the game so that we can see it. We have a grid in the center of the screen, and we have two blocks either side. So we have a block of content at the bottom where with the pairs that we've found go, we have a block of content at the top where the countdown timer goes.

[00:01:49]
And then the big chunk in the middle is the game grid. So I'm gonna begin by roughing that out. We'll call the bits at the top of the bottom. Class =info. Duplicate that, and then in the middle, we're gonna have our grid container. And then in the same component, we'll have some styles that control the placement of all of these elements.

[00:02:29]
So to get that layout where everything is centered and aligned it's very convenient to use a flex layout. You can use display flex. And we're gonna give it a flex-direction of column, which means that the first element will be at the top followed by the container below it as opposed to on the right-hand side, followed by the final info block.

[00:03:00]
We'll give it a justify content of center and align items of center. Something that I'll often do when I'm roughing out a UI is I'll give the elements that I'm working with an ugly background color so that I can see what space they're taking up on the screen.

[00:03:26]
So for the info elements, we're gonna give it a I'd say a width of 80vmin. If you haven't seen vmin before, it is the minimum of either Vw, which is the width of the screen divided by 100, or Vh, which is the height of the screen divided by 100.

[00:03:46]
And it's what allows us to have a user interface that will scale down and always fit inside the screen, whether it's on a desktop in a landscape aspect ratio, or if someone's using it on their phone. Give it height of say 10 vmin like so, and then a background of say purple.

[00:04:09]
And then, the grid container that's gonna have again, a width of 80 vmin. And the same height because it's a square. And we'll give that a background of, let's say, teal. Okay, so far so good, but it's not centered vertically. And that's because we haven't added the right height to the game element so we'll stick a 100% on there.

[00:04:37]
Still not working and that's because we need to have the 100% applied to the elements that contain this. So at this point I'm gonna pause and come out of spell and add a global style sheet. Inside my source directory, I'm gonna add styles.css. And you could do all these with component styles using the global modifier or whatever.

[00:05:10]
But find that in just about every project I would typically have a bunch of styles related to things like typography and colors, CSS custom properties, things like that, that are shared by everything on the page. And so it's convenient to have a place to put all of that stuff.

[00:05:27]
So often have a source/styles.CSS or something like that. In here, I'm gonna add the piece of CSS that has saved me the most time. And all the time that I've been writing CSS, which is every element by default, has a position of relative and a box-sizing of border-box.

[00:05:48]
And then the thing that we came here to do is to add on the html element and on the body, we want a height of 100%. And we also wanna get rid of the margin, because otherwise that's gonna mess with our height measurements. Last thing we need to do of course is import these styles into our app, otherwise it'll have no effect.

[00:06:14]
So inside page.svelte, I'm gonna do, import ../styles.CSS. Obviously, you can't normally do this in a JavaScript module we are using a Vite feature here. The fact that you can import CSS is something that Vite brings to the table. During development, it will extract all of the imported CSS, minify it, optimize it, and then spit it out into a separate bundle of CSS that can be cached immutably, so that it's really good for performance and so on.

[00:06:46]
And just authoring-wise, it's very simple to be able to add an import like this. So even though it's kinda non-standard, very cool. All right, now our global CSS is being applied to the page, and we can see that the grid is now centered, nice.