Interacting with the UI: Creating Constants

[00:00:00]
>> Let's go make their constants. So go and make constants.js inside of your source directory, and we're gonna put two things in here, export, const TICK_RATE. So we're gonna move our TICK_RATE into here, make that 3000. And export const ICONS fish, poop, and weather. So why are we putting this in a separate file?

[00:00:32]
One, it just makes it easier to keep track of. And let's say later that we add a new feature that, I don't know, you can give them a bath, or something like that, right? It would be really easy to come in here and modify the entire game state, and if I just put bath in here.

[00:00:46]
Now it would be expecting another thing, right. It would be expecting another button to be there. And that's all we would have to do, we wouldn't have to change it multiple places. But for now, we're just gonna have these three. So go to init.js. We're gonna delete the TICK_RATE here and we're gonna import TICK_RATE.

[00:01:11]
So we're gonna import TICK_RATE from ./constants. And then here in the first line of init, I'm gonna say, InitButtons. And actually I need to import that as well. So yeah, up here at the top as well. Import InitButtons from ./buttons. Okay, and then we're gonna call initButtons and we're going to pass in Game.handleUserAction.

[00:01:57]
The next thing that we're gonna do, is we're gonna head over to game state. And we're gonna create a function called handleUserAction. And we're gonna say console.log icon, and we'll also take an icon here. So this is the actual function that's gonna be called any time someone clicks on the button.

[00:02:22]
But now, because it's inside of gameState, I know it's kinda gone through this kinda circumlocutious way of making it there. But now we have the ability to handle these actions inside of our game state. And we've kind of divorced that from the interface. So now we can handle the interface one place that can be independently testable.

[00:02:44]
The interface concerns are all in buttons. And all the business logic action is all happening inside of game state, which is where we want it to happen. So I believe now if we go over to our console, So looks like query selectors. We have a problem here. So let's go figure out what's going on with that.

[00:03:10]
Document.queryselector is null. So where is that happening? It's happening in buttons on line five, you know what we didn't do maybe? So it's complaining that this is null, right here.
>> Someone in chat said, I think Brian missed, toggled, highlighted selected icon true in the else if section, if that's helpful at all.

[00:03:38]
>> I did, that's also true, not the current problem, but one of the problems. So thank you to the person who pointed it out in chat. We actually do need a second toggle highlighted here, inside of button click, which is actually gonna look exactly like this one. The problem right now is ICONS icon.

[00:04:04]
>> You're missing the dot at the beginning of it.
>> The dot at the beginning.
>> Dot.
>> You're right, thank you. So Ken pointed out, you need a period here, right, because this is going to be a class selector, right? So this will end up being .fish icon.

[00:04:26]
That's what this part is going to evaluate to. So now if we save that and come back over here, now hopefully, you can see here it's looping around, okay. We can go the other way, and yeah, now we can select something on here. So if we look at our console, if I click here on the middle button, it'll tell me I selected fish.

[00:04:49]
If I go over to the poop and selected that, it'll give me poop. And if I go over here, it should select weather, which is great. That's all happening inside of gameState. So now inside of gameState, I can handle all of this user interactivity. We have reached the UI interaction milestone.

[00:05:05]
So if you've fallen behind or need help or just wanna see where I'm at, you can hop over to the UI interaction milestone. There's a link in the course notes as well to that part of the repo.