Levels

[00:00:00]
>> About time we started adding a little bit of game logic. And the first thing we want to do is define the levels of our game. Because we have three different levels, we've got easy, medium and hard, and those are gonna have different grid sizes, different durations, different sets of emojis, and so on.

[00:00:20]
And so it's a good thing to get that roughed out before we go any further. So I'm gonna create a new module called levels.ts. And I'm gonna start by defining an interface for my level. So this is some TypeScript. If you're not familiar with TypeScript, then this might seem a little alien, but this is just basically saying what the shape of a level should be.

[00:00:46]
Export interface level, we're gonna have a few different properties here. We're gonna have a label, that's where we're going to put easy, medium, hard, and so on. We're gonna have a size, which is the horizontal or vertical size of the grid. So the easy mode, we're going to have a 4x4.

[00:01:13]
For it to be matching pairs, it needs to be even numbers, so we can't have a 5x5 grid, so medium will be 6x6, and then hard is gonna be 8 by 8. So that's the number. We'll give each level a duration, the number of milliseconds that you have to complete the level.

[00:01:34]
And each level is gonna get its own set of emojis. All right, this syntax right here means an array of strings. It's a shorthand way of doing this, those two things are equivalent. Okay, so we'll create our first level, and then we can come back later and do the others, export const levels.

[00:02:07]
And this is going to be an array of these level objects that we just defined. The first one is gonna be easy, It's gonna have a size of four. It's going to have a duration of, let's say, one minute. We can dial this down later by doing some play testing.

[00:02:28]
If it's too easy or too hard, we can change it. And then the tricky bit is getting the emojis in here. There's a bunch of places where you could get a list of images or you could like manually type them all out. But for the sake of this workshop, we actually have a list of emojis available here.

[00:02:50]
If you go to ematchi.vercel.app/gist, it will redirect you to something I made earlier. You can just copy and paste these into your levels.ts file. If you take the easy one, just copy that and then put it inside that string, and then put .split on the space character there.

[00:03:14]
All right, that's gonna give us an array of emojis that we can use.