Adding Helper Functions

[00:00:00]
>> So the next thing I wanna do, I want you to go back into here. And inside of gameState, Inside of tick(), We're gonna put just one if statement in here. So if (this.clock === this.wakeTime), then we're gonna call this.wake();. All right, I think that makes sense, right?

[00:00:34]
As soon as I hit the proper time to wake, call the wake() function. So now if we go over here and I click the middle button, you'll see hatching. It should go through 3, 4. And I think on 5, it should call awoken, right? So that's our finite-state machine, transitioning to the next state, which is what we wanted to do.

[00:01:04]
Now it doesn't do anything else, because we haven't programmed it to do anything else, but eventually it will. So let's head over to UI.js. We're gonna make a new file here and we're gonna call it ui.js. These are gonna be some helper functions for modifying the DOM. And we're gonna make three named functions here, export const modFox = function modFox().

[00:01:34]
And it's gonna take in some sort of state right there. And we're gonna say document.querySelector(.fox). So we're gonna grab fox and we're gonna say .className = fox. And then fox- something. So now, we can call modFox. And we can pass in sleeping, it'll make the fox sleep. We can pass in celebrating, it'll make the fox celebrate.

[00:02:08]
And we'll do the same thing for scene, export const modScene. This will change it from night to day to rain. ModScene, someone might ask me, why do I type modFox twice or modScene? This second one actually is optional. But if you have a crash and it crashes because of this function, this name will show up in the stack trace.

[00:02:35]
You can see there is a problem with modScene, instead of they'll say, there was a problem with a function. So this is for debuggability purposes. And this is gonna look really similar, document.querySelector, I wanna grab (.game). And .className = game, and then ${state}, like that. And that'll allow us to change the scene.

[00:03:09]
Yeah, Ken.
>> I'm just curious, what's the difference between exporting the constant, that is a function and just exporting the function directly?
>> So Ken's asked me, what's the difference between exporting like const modScene = something versus just exporting the function directly? In this case, not a lot [LAUGH].

[00:03:28]
So I could've done export function modScene (). I think I always get confused with, Yeah, well, let's do modScene2. This would be totally equivalent and it would work exactly the same. I think my brain was just in this capacity at the moment. This is the same thing, what's the difference between function lol, like this, and const lol = function(), blah.

[00:04:02]
Same diff, export const togglePoopBag. Yep, we wanna be able to turn that poop bag on and off. So this one's just gonna be = function togglePoopBag(show), And I wanna say document.querySelector, why did you do that? Don't do that. querySelector, (.poop-bag).classList.toggle, And we're gonna turn (hidden) on and off.

[00:04:48]
And so this show is a positive and hidden is kind of a negative. So we're gonna actually do the opposite of show. So if you are showing it, remove the hidden class. If you aren't showing it, then add the hidden class. Which is why that exclamation point is there.

[00:05:10]
Okay, and then now it makes changing the scene and changing the fox trivial. So we can go ahead and reincorporate that into our gameState. So let's go back to gameState, And I want you to head back to startGame(). We can get rid of the hatching there. And then here, we're gonna say modFox.

[00:05:35]
And actually it can auto import, it sees like, I know you have a named expert called modFox. So if I just hit Enter right now, you'll see here it's actually automatically import to that. But if not, just go ahead and make sure you have this line up here, line 1.

[00:05:50]
So modFox, and we're gonna make it (fox-egg), right? And modScene, (day), if the scene is not currently day, definitely set it to day. If it's already day, then it does nothing to just set the scene to day no matter what. Okay, same token, let's go down the wake(), we can get rid of this console log as well.

[00:06:17]
And we're gonna modFox to idling. And we're gonna say this.scene = Math.random(), > RAIN_CHANCE. So we're gonna create a new variable here called RAIN_CHANCE. And the first scene that we're gonna deal with is day. So if it's greater than RAIN_CHANCE, then we'll make the scene day. And if it's not, then we'll make the scene rain.

[00:06:59]
And then RAIN_CHANCE will be some number between 0 and 1. So let's say, I know, if RAIN_CHANCE is 0.2, Math.random() gives you a random number between 0 and 1, so it'll be like 0.65. So if it came back as 6.5, this will be set to day, right? If it came back as 0.1, then it'll be set as rain.

[00:07:22]
And so this will give a little bit of randomness to the game that sometimes it'll rain and sometimes it won't. So let's go see what that actually looks like inside of our constants. So I'm gonna open constants here. I'm just gonna export const RAIN_CHANCE. And I set mine at 0.2, so it rains 20% of the time.

[00:07:47]
I mean, I'm in Seattle, so I should probably actually make this to 0.9. And if we go back to our gameState.js up at the top, we will import, { RAIN_CHANCE } from ./constants;. Now we have this.scene set to something, so we have to do something about it. So what we're gonna do underneath here in wake() is say modScene, SCENES, which we need to go program as well, [this.scene];.

[00:08:24]
And now we will actually set the scene to be either day or rain, depending on what this scene came back as. So again, let's go back to constants. And we need to export const SCENES = [day, or rain]. That should work and mine actually probably come up rain, cuz I left it at 0.9.

[00:08:53]
It should hatch, so now the the fox is hatching. And then it might change to rain. So SCENES is not defined. So let's go figure out why that was. So I made SCENES here, and in gameState, I probably didn't import at the top, I didn't. So here at ./constants, { RAIN_CHANCE, SCENES }.

[00:09:16]
All right, so let's try that again. So there's a 10% chance it'll be day, there's a 90% chance that it will be raining. So you can see there, it's raining. So you can play around with that. Let's go back, and I'm gonna change it back to 0.2. So it'll rain 20% of the time.

[00:09:49]
So this is not totally complete for rain, because if you remember in my version of the game. This is the complete version here that we're looking at that's online. Our foxy friend. You can see there, it's raining this time. He's facing away when it's raining. And we'll go program that here in just a second, but it's still cool that we added rain to our game and it wasn't that hard, right?