Resetting States

[00:00:00]
>> So, we needed to do one more thing in UI.js. We're gonna make another function here, called writeModal. And, here in function writeModal, it's gonna take in some sort of text, and we're gonna default to blank text. That's what this text = blah, this is a default. So if I don't call with anything, it's just gonna give me an empty string.

[00:00:32]
And I wanna say, document.querySelector. And, I'm going to ask for .modal. And. We're gonna do a .innerHTML, cuz we want this to be interpreted as HTML, because we wanna be able to write HTML to it. =div className="modal-Inner". And actually, we probably could have just left this, in fact, let's just do this.

[00:01:19]
So I'm gonna do modal-Inner. That's why we did that. Okay, this makes sense to me now. So we're gonna say, div className, or class="modal-Inner"></div. And we're gonna put the text in there, that we put in. Now, why are we rewriting the modal-Inner every single time? It's because we want to hide the modal when there's no text in there.

[00:01:55]
And we did that with that CSS Selector. And so, that's why, that's why we're rewriting the modal-Inner every single time. So now that we've rewritten that, we can go back to gameState.js. And we can import the top here, from UI. WriteModal. And the first thing we're gonna do is, whenever we start the game, we're just gonna write modal with no text, and that should drop our little button thing here.

[00:02:30]
So if I press this. That's still showing up, which is curious, it shouldn't. And, here install that CSS. Cuz all these CSS classes should have gone at modal-Inner probably Yep, okay, cool, here we go. So, this was a mistake on my part. Go back to your style.CSS. And I had here, on my line 86, with the modal class, here.

[00:03:40]
This is actually supposed to be the style for modal-Inner. And now if I refresh, and I press the button, it'll actually remove that modal. So again, style.CSS. Down here at the bottom was where I had modal. Just make this the style class for modal-Inner. And now when we start the game, it'll remove that modal at the top.

[00:04:17]
Okay? So let's go ahead and go back to gameState.js. And we're gonna write a function really quick that's called clearTimes, so. ClearTimes. And this is something we can call when the fox dies as well as when it goes to sleep, it just clears out all the existing timers.

[00:04:43]
So we're gonna say, this.wakeTime = -1. This.sleepTime = -1. This.hungryTime = -1. This.dieTime = -1. This.poopTime = -1. And this.timeToEndCelebrating = -1. This.timeTo, we need begin here as well. I called start, this.startCelebrating. I can't remember what I called it. TimeToStartCelebrating, that one, = -1. Okay, so this is just gonna clear all the different timers, so that when we call it we can be guaranteed that nothing is happening.

[00:05:50]
So, let's go to sleep, first of all. So I'm gonna call, and make sure you call it before you set wakeTime, because you don't wanna clear out wakeTime. So I'm gonna do it here, above this.wakeTime, this.clearTimes, and then it resets wakeTime. So this way we can guarantee that the fox is not gonna get hungry in the night, it's not gonna get, it's not gonna poop in the night, all that kinda stuff.

[00:06:19]
Okay, and then here, we're gonna go down to, die. And here we're gonna say, this.current = "DEAD". ModScene('dead'). ModFox('dead'). This.sleepTime. Well, actually, we can just say here, we can just say, this.clearTime. And then we're gonna write to the modal. The fox died, frowny face. I'm gonna put a line break there.

[00:07:10]
So the <br/> Press the middle button to start. So that the user knows that they can press the button to restart the game. So now let's start the game. And if we just let it go on washed after this, eventually it should hit that die code. And we'll see a different scene, we'll see the tombstone, and we'll see a modal at the top that says, the fox has died, frowny face, press the middle button to start.

[00:07:52]
So, fox is hungry. And eventually, there you go. And then we hit the death scene. And then you should be able to press the middle button, again, cuz we kinda coded this up at the beginning, we don't have to do anything additional now. It'll restart the game with a new fox.

[00:08:18]
Again, just leveraging all the code that we wrote together.