Passing Data to Game Components

[00:00:00]
>> Let's start adding some logic for this game. We'll do it in the Game.svelte component. First, we're gonna import the levels from the module that we just created. And we're gonna have a few different values here, we're gonna have a size value, we're gonna have a grid of emojis.

[00:00:32]
Initialize that to an empty array, and we're gonna keep track of the pairs that we've found as we're playing the game. So the first task is to create a grid from the set of emojis that we got in levels.ts. So let's create a function, call it create_grid. And that's gonna take a level as its input.

[00:01:02]
Now, right now, we don't know what kind of object that is because we haven't declared it, and this is where TypeScript becomes really useful. At the top here, I'm gonna add a lang = ts attribute. And that now allows us to start using TypeScript inside this component. Our grid is gonna be an array of strings.

[00:01:21]
found is also gonna be an array of strings, size is gonna be a number, and the thing that gets passed into create_grid is gonna be a level. And we need to import that as well from our levels module. We need to have that in a separate type declaration, import type Level from levels.

[00:01:53]
So ultimately, what we want to have is a user interface that allows us to select a different level and create all of these values on that basis. But for now, we're just gonna hard-code easy mode into our app. So const level = levels 0 cuz that's the only one that we got.

[00:02:11]
size is gonna be level.size, then grid is gonna be created from the level. And you can see that it's throwing an error because we're not currently returning an array of strings from create_grid. The first thing we wanna do is create a clone of the emojis array so that we can start plucking emojis out of it at random.

[00:02:37]
We don't want to mutate the original data. So create const copy = level.emoji, and you can see that TypeScript is giving us all of the properties to autocomplete that. level.emojis.slice. And our task is to create a set of pairs. So const pairs = another array, that's gonna be an array of strings.

[00:03:11]
And if we have a four by four grid, that means we need eight pairs, four times four divided by two. So in a loop for let i = 0, i < level.size times level.size / 2, or if you wanna be fancy, you can use the times times operator, i += 1.

[00:03:43]
Inside here, we need to pick an emoji at random. Do that with const index = Math.floor of Math.random times the length of our copy. And we wanna get the value at that index, and then we wanna splice it out of that copy so that we can't accidentally pick it again.

[00:04:17]
Copy.splice index, we'll take that one element out of the array, And we'll push the emoji into our pairs array. All right, so at this point, we should have eight emojis in an array. So the first thing we need to do, obviously, is duplicate that list. And at that point, we've got enough to fill a grid, so we can return that.

[00:04:54]
And we'll see that that red squiggly up there that was there a second ago. Right now that we're returning the string, that disappears. All right, we need to pass that data into the grid component so that we can render it. We'll do that down here. And it's gonna yell at us because grid is not a prop on the grid component.

[00:05:19]
Let's change that, let's go over to Grid.svelte. I'm gonna press Cmd+P, type grid to open that. And in our script block, we know how to declare props, we do export let grid. Because we're in TypeScript land, we're gonna use string so that we know what type of property it is.

[00:05:40]
But we need to tell Svelte that this is a TypeScript component. So you had the lang = ts there. And it's got a yellow squiggly because we're not actually using it anywhere in the component. So let's replace this hard-coded Array 16 with the grid. And then we can pass the emoji down into the square component.

[00:06:10]
And it's the same deal, the square component is not expecting an emoji prop at this point. So we need to go over to Square.svelte and define that prop First, we've gotta create our script, we'll add the lang = ts, And declare the emoji prop as a string. Now, inside the square, We'll add a span and render that emoji.

[00:06:50]
Right, and you can see it's pretty subtle, but in the top left of each of those squares, you can now see some content. Make it a little bit bigger by adding a span selector and adding, let's say, 5 ems, like so. All right, so far so good, although obviously, we would like that to be centered.

[00:07:09]
So by this point, you know the drill, display flex, justify-content center, align-items center. And now, our emojis are nicely centered.