If you have a code that you potentially could be reusing or might need to rewrite in upcoming functions
and upcoming gameplay, especially when you're extending the gameplay, the best practice is to build
out a function for that.
And that's why in this case, we're going to build out a function or call it a messenger, and it's
going to take in one value and that's going to be the message value and taking the message object that
we set up earlier, we're going to update the inner HTML to whatever the value of message is.
So that gives us a quick and easy way to use and update our content within message.
So now I could go Messager and Passan, whatever value we want to send in.
And in this case we're going to do player selection and we can do A versus there.
And then this can be the computer selection.
So whatever the computer selected so that we don't have to look into the console, we can see it being
output for the player as they're playing a green will do a line break and then we can have whatever
the result is.
So this is where that result value.
And that's why I was adding the win in there so we can simply output the result and we could have simply
output the result.
But the problem is, when it comes to a draw, that the result is actually a tie.
So let's add that last one in.
And we know that if it's not the player that wins, we know that it's not the computer that wins, then
result is going to actually equal a draw.
So draw and then we can say it results in a tie.
So this way, no matter what happens, the player can see it.
They don't have to look inside the console.
And before we try that, we need to still add in and close this off because this is passing in a string
into the function.
So refresh, try it out.
We see rock versus paper, computer wins.
So the player has rock, the computer had paper.
So the computer won that round.
They scored one there.
We've got rock versus scissors.
So player wins this time.
So now both have a score of one.
And we also have what is being output there.
You can also update this as well to be a little bit nicer so we can change this to small so that that
stands out a little bit more.
I'm going to copy this over.
And so player two can be consistent as we got player one, player two, or we could just have it player
and then we could have computer.
So we've got player computer player as a score of one rock versus scissors player wins.
So player got one, player has two to one, three to one.
And that was the draw.
So that was the message that gets out, put it in the draw.
So draw results in a tight match.
So let's do a quick overview and review of what we did in order to wrap up this mini application.
So first we built our HTML structure.
So all of the different components within our e-mail that we're going to need for the gameplay in order
to present the player so that they can actually play the game next.
We selected all of the elements and put them into JavaScript objects so that it's a lot simpler to select
those and make use of them within our code.
And of course, you don't have to we could do document, query selector every time we want to update
that message element.
But if we are reusing it, then the best practice is usually to select them into objects and then we
can only only need to reference the objects.
We set up a global variable global array called winner so that we can attach score into it again.
Get rid of all of the console messages.
We've got our buttons, we're attaching event listeners to the buttons and then depending on what was
clicked on the button.
So that's actually going to be the player selection.
We needed to have computer selection.
So what we did over here, selecting third for each one as an option to be returned back.
So either rock, paper, scissors, I get rid of that console message again.
We needed to check to see who won.
And that's where we created a quick little function that checks winners.
So this is a combination of passing in who selected what.
So the first selection is the player.
Second is computer.
We first we check to see if they're the same.
And if it is, then we know that we have a draw.
Next, we check to see the wind conditions for player.
So if the player and if the computer wins, then we know that the computer was the winner here if the
player had selected rock.
Alternatively, if the computer didn't select paper, then we know that the player wins and it's always
a good idea to double check these and also play through it just to make sure that things are working
as intended.
So we did the same thing for paper and scissors and then finally we wrapped it up by seeing whatever
result was returned back.
So in this case, we got player and if the player wins, then we update the result with wins.
And then we update winner to plus one, so it's that tree that we're using globally in order to keep
score and then we check to see if the computer wins and we do the same thing for computer.
And if none of them won that we know that this is a tie game.
So we just know that it's a draw.
We output the score value there.
And then we use set up a separate function that we can easily add messages to the entire HTML of the
message element within our page.
So go ahead and try this out for yourself, play through it several times, make sure it's working,
have some fun with it while practicing JavaScript.