We've now got our simple little game put together.
If a user clicks on the button more than five times, then we consider them to have won.
Otherwise they lost.
So the game definitely works as it stands right now.
But I started to make the 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?
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 a 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 as we go, we're going to introduce the topic of promises and figure out
how they work.
So I'm going to flip back over to my code.
And just to start, we're going to do a little bit of a 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 game.
I'm going to place an opening curly brace.
Then I'm going to take all of my game logic.
I'm going to indent it one time and I'm going to close off that curly brace down here at the bottom.
So now my entire game is wrapped up inside of this start game function.
So now I've 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.
I'll refresh.
I'm just going to wait for two seconds and.
Okay.
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 have explained
exactly how promises 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.
Okay, so we're going to do the refactor 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 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 place of 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.
Okay, so I just passed it a fat arrow 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 of here, I'm 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 an arrow 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 five 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.
Okay.
Again, I know I'm throwing up a ton of code that's looking a little bit mysterious, but bear with
me.
We're going to finish the implementation here and then talk about exactly what's happening.
So now on the else statement, so this is the case in which a user fails.
I'm going 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, I'm
going to remove 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 dot, then a function inside of which I will alert you win.
And then one last thing.
One last thing.
Bear with me The very bottom.
After that, I'm going to add on a catch and I'll alert you lost.
Okay.
So a lot of changes.
We just made a 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 then we'll talk about
exactly what's happening here.
So I'm going to make sure that I first save the document so everything's saved.
Then I'm going to flip back over to Chrome.
I'll refresh the document, I'll click the button.
Well, I guess I didn't click it enough because I saw you lost.
Let's get a winning case in here.
I'll click, click, click and you win.
Remember that to restart the game, you need to refresh the browser.
So I'm going to refresh, click, click, click, click.
And I win.
Okay, So clearly something's working here, right?
Clearly something's working still, but what the heck is this promise thing?
What's this Resolve and reject.
What's this dot then, and dot catch at the bottom.
Let's take a quick break.
We're going to come back and talk about exactly how promises work and then we'll be all done with a
refresher on promises.
So just one more section and we'll be all wrapped up with our refresh.
Okay.
See you in one second.