We've now got our simple little aged female game put together.
If a user clicks on the button more than five times then we consider them to have one.
Otherwise they lost.
So the game definitely works as it stands right now.
But I started to make that case at the end of the last section that perhaps the way in which we wrote
this game wasn't the best in the world.
I threw out the case in which we might want to let some other developer run this game.
Right well like we might want to publish this thing as a function or like as a standalone package.
So another developer could run the game and then we would need to allow them to specify what to do whenever
the user successfully completed or failed the game.
So thinking about this in kind of from a diagram standpoint this is what I'm kind of suggesting.
I'm saying that I want to have the exact same game experience but I want to wrap up all that game logic
into a single function which is represented by this kind of blue or cyan background.
I then want to allow another developer to come in start the game up and specify exactly what should
happen if the user succeeds in the game or they fail in the game.
So in other words I want to refactor our current code base everything that represents this game into
a single function that can be called where another developer can specify what to do after the game is
played.
So let's do this refactor.
And then as we go we're going to introduce the topic of promises and figure out how they work.
So I kind of flip back over to my code and just to start we're going to do a little bit of refactor
to first put our entire game into a standalone function.
So at the very top underneath the script tag I'm going to declare a function called start's game.
I'm going to place an opening curly brace.
I'm going to take all of my game logic.
I'm going to indent at one time and I'm going to close off that curly brace.
Down here at the bottom it's now my entire game is wrapped up inside of this start.
Game function.
So now have kind of succeeded in putting all of my game logic into a standalone function but that standalone
function still encapsulates what to do in the success and fail case just to make sure that everything
still works appropriately.
I'm going to add in a call to start game underneath the function declaration.
So down here I'll call start game like so.
And now back inside of chrome we're going to refresh the document and make sure everything still works.
So here we are all refresh is going to wait the two seconds and OK everything for the game still works
as I would expect.
So our code as it stands right now you know again still works but we're not providing a nice interface
to any other developer who wants to call start game.
That's the whole goal here.
I want to somehow specify what to do when the user wins.
Whenever I call start game so to do so we're going to introduce the idea of promises now promises.
I have explained to developers many many times and through every single time that I've explained exactly
how processes behave.
I have discovered exactly one thing telling you how they work does not does not impart knowledge about
promises.
In other words I can sit here and lecture all day about what a promise does but it doesn't quite translate.
You really got to see these things in action.
So here's what we're going to do.
Rather than have me sit here and spout off about promises nonstop we're just going to refactor our code
to make use of a promise and then once we do once we've got it in place we'll make some observations
about exactly how it works.
OK.
So we're going to do the reactor first.
It's going to be a little bit mysterious but then we'll talk about exactly how it's working.
So to refactor our code to use promises I'm going to start off by deleting the entire inner set time
out statement and the only reason I'm deleting it is because I want to write this thing from scratch
to make sure it's really clear to you exactly what's going on.
So in places that set time out I'm going to write return new promise and note that I'm using a capital
P here.
I'm then going to pass this promise function or this promise thing whatever it is right here a fat arrow
function.
OK.
So I just passed a fat or a function like so.
Whenever I declare a new promise this inner function that I pass to it is called with two arguments
resolve and reject.
Now inside if you're going to place the exact same or nearly exact same logic we had before with the
set time out I'll say set.
Time out.
I'm going to pass it a of function as a second argument.
I'll say 2000 milliseconds.
Then inside of the set time out we can say if counter is greater than 5 and here's where things get
interesting instead of saying anything about alerting or anything like that I'm going to look at this
argument.
This resolve argument I'm going to call it again.
I know I'm throwing up a ton of code that's looking all that mysterious but bear with me.
We're going to finish the implementation here and then talk about exactly what's happening now on the
L statements as is the case in which a user fails.
I meant to add on a call to reject Now one last little bit.
One last little bit down here at the bottom where I call start game again or move the semicolon at the
end and instead I'm going to replace it with on a new line dot.
Then I'm going to pass then a function inside of which I will alert you when and then one last thing.
One less thing there with me.
The very bottom.
After that I'm going to add on a catch and alert you lost.
OK so a lot of changes we just made lot of changes and chances are a lot of it looks a little bit weird.
Totally fine.
Totally what I expect.
Let's first run this inside of our browser and verify that everything works and we'll talk about exactly
what's happening here.
So we're going to make sure that I first save the document so everything's saved.
Going to flip back over to Chrome or refresh the document or click the button.
Well I guess I didn't cookand enough because I saw you last.
Let's get a winning case in here.
Click click click and you win.
Remember that to restart the game you need to refresh the browser refresh.
Click click click and I win.
OK.
So clearly something's working here right.
Clearly something's working still but what the heck is this promise thing.
What's this resolved and reject what's this van and not catch at the bottom.
Let's take a quick break.
We're going to come back talk about exactly how promises work and then we'll be all done with the refresher
on promises.
Just one more section will be all wrapped up with our refresh.
OK.
See you in one second.