Transitioning Between States

[00:00:00]
>> So let's head back to gameStates. And let's go ahead and make a transition between day and night. So inside of constants.js, we're gonna put some sort of DAY_LENGTH, so export const DAY_LENGTH. This is how many ticks you want before day and night. I typically leave it at 60 for how long a day is otherwise it's kinda too short for the game to be any sort of fun.

[00:00:35]
But for testing purposes, let's just go ahead and make it 10 for right now, and then we'll come back later and change it. And then export const NIGHT_LENGTH, for how long your fox sleeps, we can make it like three right now, maybe make it like five later, Okay, so let's go back to gameState now.

[00:00:59]
And we're gonna import DAY_LENGTH, NIGHT_LENGTH from constants. We're gonna add in a new thing called sleepTime. And we're gonna add an else if here. So else if (this.time === this.sleepTime) Then we're gonna say this.sleep. No not sleeptime, just sleep. And we're gonna make a new function down here called sleep.

[00:01:50]
So, whenever the fox wakes up, we need the fox to set a new timer when it's gonna go back to sleep. So we're gonna say this.sleepTime=this.clock + DAY_LENGTH, right? So that's gonna be how long before it goes back to sleep. And then when it goes to sleep, we're gonna say this.state = sleep.

[00:02:19]
That's the new state it's in. We're gonna modFox to be asleep. We're gonna modScene to be night. And we're gonna say this.wake time = this.clock + NIGHT_LENGTH. And that's it. Now what's really cool about this is with sleep, we're just reusing wake, right? That's the same function we programmed to start the game here, wake.

[00:02:56]
But we can actually double its use to make it also work for awakening after night. So we got a nice bit of code reusability here. And I need a comma there on line 40. Let's go take a look at the game. So now if I refresh, it shouldn't have to refresh on its own.

[00:03:22]
But now if I wait, it should be about 30 seconds of being awake. So our little friend here should stand for about 30 seconds. And then eventually it's gonna go to sleep. It should be asleep for about 9 seconds and then should wake back up. sleepTime, startGame. sleepTime = this.clock + DAY_LENGTH.

[00:03:47]
If this.time, that's what I did here on line 15. I put this.time so this.clock. And just for brevity's sake, let's put this at 3, so we can test really quick if this works or not. So about 5, it should go to sleep. Right, I suppose. And there we go.

[00:04:21]
Now the fox is sleeping. Then it should sleep for about 3, and then it should wake back up. And there we go. And what's cool is every time the day rolls back around, we still have that chance of rain, right? We already built that into wake and so every day it might rain.

[00:04:40]
Okay, cool. So let's go ahead and set that day length back to maybe 60. And let's set the NIGHT_LENGTH to 4, something like that. So, let's go ahead and do. We're gonna go back to constants.js, constants.js, and we're gonna write a couple of functions in here. These aren't quite constants, but this felt like the right place to put these.

[00:05:12]
I made three or two functions called getNextHungerTime. And it's how long it takes for the fox to get hungry. But I made them functions because there's some randomness and we want it to be random every single time that we call it. So, getNextHungerTime, = an arrow function clock.

[00:05:38]
And that's gonna return math.floor cuz it needs to be in a whole number. So it's math.floor always rounds down. I'm gonna say math.random. * 3. So math.random *3 inside of math.floor. This entire equation is gonna give you a number between 0 on the lowest end and 2 on the high end, right?

[00:06:03]
And then we're gonna add 5, so this is saying, give me a number between 0 and 2, + add 5, so 5 is the floor, 7 is the ceiling, so you can either 5, 6 or 7. And then, we're gonna add clock. So we're gonna pass in this.clock and we'll get back the correct time for the fox to become hungry.

[00:06:28]
And we're gonna duplicate that line. So I just hit Ctrl + C, Ctrl + V, and that'll duplicate the line that I'm on as long as I haven't highlighted anything. Or you can just copy and paste. That works too. I'm gonna do getNextDieTime, for how long it takes the fox to die.

[00:06:50]
And for now, let's make that fairly short. So, *2 + 3. So it's really similar, just I changed the numbers here, and I'm leaving these formulas like on the outside. So here you can go and play with the timings to make your game more fun. I don't know if I've made the most fun version of this, I entrust you to make the game more fun.

[00:07:12]
All right so, you have getNextHungerTime, and getNextDieTime. And then what we're gonna do is, we're gonna come back over to our gameState. And we're gonna grab out of here, getNextDieTime, and getNextHungerTime and that'll rearrange that so it's a little bit easier to read. It's when you say that thanks prettier.

[00:07:35]
Add to the state here we're gonna have a hungryTime -1, and we're gonna have 1 dieTime, for how long it takes your Fox to die. Okay then we're gonna add in here to our tic else if this.clock === this.hungryTime this.getHungry. Else if this.clock === this.dieTime then dieTime, you guessed it this.die.

[00:08:27]
Okay, now in the last lines of wake here, we're gonna add this.HungryTime = getNextHungerTime. And we're just gonna pass in this.clock, and now we'll have a appropriately set time for the fox to get hungry. And underneath sleep here we're gonna add, getHungry. And here we're gonna do this.current = Hungry.

[00:09:15]
This.dieTime = getNextDieTime and I'm gonna pass on this.clock. And, We're gonna set this.hungryTime, cuz it became hungry already. So we're gonna reset that back to -1, right because it doesn't make sense for it to continue getting hungry. And then down here we're gonna say modFox hungry, right? Because now it's gonna be doing the word points at its mouth, animation.

[00:10:01]
And then one more function here. We'll do die last. But for now we'll just have a function. We're just gonna say console.log, log dead or something like that. Or you can just be more appropriate than I am and say die, okay. And I need a comma there on line 63.

[00:10:34]
Okay, so now I should be able to start my Fox game. Fox will hatch. And after 5 to 7 seconds of being awake, the Fox should start pointing out smells. And there you go, so now, the fox is hungry. And if we wait a bit of time, like 5, or 10 to 15 seconds, right?

[00:11:08]
Should wait, eventually it'll say die, right? So at that point the fox would have died and we would have gone through that animation process as well. So the question is, which is a valid question in this particular case, why do I prefer here like we have a lot of else if.

[00:11:29]
Honestly if I was writing this code from myself, I probably would have use switch. But I was reading the code, and it felt a little too opaque. So I just felt really obvious for anyone reading the code that this.clock === this.wakeTime, that's readable in a bite. And so I kinda just went with that.

[00:11:52]
I have no better reason than that. Either one of them would have worked in this particular case. I use switch down here because the strings felt very obvious to me that, I guess string and number matching felt different to me. And I don't really have a good reason other than that.

[00:12:09]
But that's a valid question. Okay. Let's go ahead, and we're gonna implement how to feed our poorFox, which you can see here in the background is just tormenting me. Let's just cover up our problem there, perfect. And we're gonna now implement the feeding part of this. So, we have our feed function already ready, it's here.

[00:12:40]
So what we're gonna do now, is we're gonna say if this.current is not equal to hungry, then this button doesn't do anything, right? So we're just gonna return, but if the fox is hungry, then you're gonna say this.current = ''feeding''. This.dieTime cuz it's no longer gonna be on the verge of death = -1.

[00:13:13]
this.poopTime, Is gonna be = getNext, PoopTime we'll have to go write that function here in just a second with passing this.clock and then we're gonna mod the fox to be eating. Okay and then the Fox likes to celebrate whenever it's finished eating. So we have to set a timer in the future for the fox to finish eating and then begin celebrating.

[00:13:48]
So this time to start celebrating, timeToStartCelebrating = this.clock + and I put 2, that's how long it'll finish eating and then begin celebrating. [BLANK AUDIO]