Dispatching Found Event

[00:00:00]
>> Okay, so the one case that we haven't handled yet is the case where the user guessed correctly and now has a pair. And so from within this grid component, we need to communicate that up to the game component so that we can update the game state. And to do that, this component grid.svelte needs to become an event dispatcher.

[00:00:22]
So, as we've seen in the workshop so far, we'll create dispatch as create EventDispatcher parentheses, and it's automatically imported that for us from svelte. And then inside here, we're gonna dispatch a found event, and we're gonna give it some information. We're gonna pass the emoji that was found in that event.

[00:00:51]
And then in our game.svelte component, I'm gonna move that over to the left so that I can see it. We can now add a found event listener on the grid component. Like so, tab to accept that completion. [SOUND] All right, so this event data is gonna tell us which emoji is found.

[00:01:19]
You remember that we declared this array up here of the emojis that have been found, I'm just gonna push data into that array. [SOUND] Right, this e.detail object is something that you get on a custom event. This isn't a Svelte thing. It's a DOM thing. The e.detail can be just an arbitrary object of data.

[00:01:49]
It's basically whatever you pass in to your dispatch function. Save, so that prettier makes it look nice. And now we need to do something with the array of found emojis. First of all, we need to remove it from the grid because you can't find a pair twice [SOUND].

[00:02:13]
All right, same drill, and then scroll by now, we need to create this prop on the grid. I'm just gonna duplicate that line with command Shift D. Okay, now we need to represent that inside the square component. So we're gonna pass a found property into here, but it's not gonna be the entire array.

[00:02:37]
It's just gonna be a Boolean of whether or not found includes the emoji that we're currently dealing with. So inside square, just like selected is a Boolean we're gonna add a found Boolean. And that's gonna be if the array includes the current emoji. And we can use this to remove the span from the grid altogether [SOUND] once the emoji has been found So now if I pick two pairs from the grid, like these two fish, they get removed from the grid.

[00:03:37]
You'll notice of course that there is a repeating pattern here. The pairs at the top, sorry, the emojis at the top are duplicated in the bottom half of the grid. So this game isn't gonna be a whole lot of fun. So we need to shuffle the emojis. And to do that, we're gonna create a new module called utils.ts.

[00:03:56]
And inside that module, we're gonna create a shuffle function. Do export function shuffle. And the input to this function is gonna be an array of strings. But the fact that it's an array of strings actually isn't material. The shuffle function doesn't care what it's shuffling. So we're gonna turn this into a generic function.

[00:04:34]
We do that by adding a generic argument like this, and then we can replace the string here with T. This is nice because now when something calls shuffle and passes in an array of whatever values, then TypeScript will know what kind of array is getting back. Okay, so we're gonna implement something called the Fisher-Yates shuffle algorithm, which modifies an array in place.

[00:05:03]
We begin by getting the current array length, and then we're just gonna work backwards [SOUND]. At each point, we're gonna get a random value between zero and the current index. [SOUND] So that's math.floor of math.random x i + 1 because we just decremented it. And we wanna get a temporary variable that contains an array[i] I think.

[00:05:48]
And then we do array i equals array j, array j equals temp. If I get this right first time, I'm gonna be super happy with myself. And then we just return the array at the end. So now inside the game where we create this grid, we can take these pairs where we're just duplicating everything and we can shuffle that before we return it.

[00:06:22]
Okay, we need to import it and do that from utils. If I hit Save, hopefully we're gonna get a randomized array. All right, it doesn't look that random because we've got the caterpillars next to each other and the dinosaurs on top of each other, but it is. This is a shuffled array.

[00:06:41]
Okay, so things are starting to take shape. One thing we're not doing right now is we're not storing the emojis that we've found outside the grid, and we have a space to do that in this info block below the game grid. So we would like to include all of the emogis that have been found so far down here.

[00:07:04]
We're gonna create a new component for this, call it found.svelte. Just do div class equals found. That's gonna take the found array, export, let found string array. And we'll just render, I need to add the lang equals ts, that's why it's giving me the red squigglies, and it's just gonna render an array of all of the found emojis [SOUND].

[00:07:43]
And I'm gonna add a key there so that we can do some funky animation stuff later on in the when we build the app [SOUND]. All right, back in my game.svelte. We can create that component and pass the found array into it. And now if I find a pair like these turtles here then, hopefully it's gonna appear down here.

[00:08:18]
It's a little hard to see though, so gonna go back to found.svelte and add some styles [SOUND]. Maybe, on that a little bit further. We want that to be centered. So, we're gonna add some display flex goodness to div class="found" [SOUND]. Justify content center line items center.

[00:09:04]
We'll put a little gap between the things that we find. Now find some more of these pairs, they'll also get added to that array at the bottom.