Game Board Grid

[00:00:00]
>> So it's time to start adding the UI for the game board itself. Gonna add another component, we'll call it Grid.svelte. And we'll begin with div class=grid. And then inside there, we're gonna have a bunch of different elements, but for now, we just wanna create the styles for the grid itself.

[00:00:29]
This time, we're gonna use display grid, obviously, cuz that's what we're making. And we're gonna give grid-template-columns of, for now, we'll just hardcode 4 times 1fr. Fr, I think, stands for fraction. So this is saying that we'll just divide it into four equal columns. Gonna copy that row with Cmd+Shift+D, and do the same with rows.

[00:01:04]
Right, and I think that if we inspect that now, I forgot to add the components to the page. So let's do that. Inside game, we'll open up this grid-container element. Just tap to auto-import that. All right, so our grid is now being rendered inside there, but it's not visible because it has a height of zero.

[00:01:39]
We could fix that like that to see the grid start to take shape. Obviously, we need to put it in the actual styles. And then we need to put something inside the grid, we need to put the squares of the grid in the markup. So we'll create a new file, call it square, div class=square.

[00:02:16]
And again, we're gonna give it some gaudy styles just so that we can see everything. You got background of yellow. And then inside the grid, if we just loop over an array of 16 items, we can place the squares. Do each Array(16) as _ cuz we don't care about the value at this point.

[00:02:46]
Import the square component. And we can see that the yellow square is, in fact, appearing in our grid. We wanna make it a little bit more grid-like. So in order to be able to see the grid lines, I'm gonna add a grid-gap, Of let's say half an. Okay, so this is starting to take shape, but one thing that I don't love is that as this gets bigger, eventually, it takes up the whole screen, and it just looks kinda silly.

[00:03:21]
We would like to have a maximum size for the game so that it doesn't look outrageous. And there's a little trick that I like to use for this, and that trick is font size. The way that we're gonna do this is inside the game component, we're gonna set a font size on the main container element that is based on that vmin value that we talked about earlier with an upper limit.

[00:03:52]
So down here, we'll do font-size the minimum of 1vmin. And we don't yet know what the value is gonna be. So we'll just do like 0.1rems as an example. And then if we replace all of these vmin declarations with ems, it will use that container element's font size as the guide.

[00:04:20]
So we can see that 0.1 is probably a little bit too small. So let's pump that up, maybe 0.5. Okay, so now it will shrink to accommodate smaller screens, but when we get to much larger screens, It will stay at a reasonable size. So that's just a little CSS trick that I find very handy when I'm building this sort of user interface.