1
00:00:00,240 --> 00:00:07,080
If you have a code that you potentially could be reusing or might need to rewrite in upcoming functions

2
00:00:07,080 --> 00:00:11,670
and upcoming gameplay, especially when you're extending the gameplay, the best practice is to build

3
00:00:11,670 --> 00:00:13,080
out a function for that.

4
00:00:13,410 --> 00:00:18,810
And that's why in this case, we're going to build out a function or call it a messenger, and it's

5
00:00:18,810 --> 00:00:24,420
going to take in one value and that's going to be the message value and taking the message object that

6
00:00:24,420 --> 00:00:30,540
we set up earlier, we're going to update the inner HTML to whatever the value of message is.

7
00:00:30,840 --> 00:00:37,990
So that gives us a quick and easy way to use and update our content within message.

8
00:00:38,250 --> 00:00:44,060
So now I could go Messager and Passan, whatever value we want to send in.

9
00:00:44,670 --> 00:00:49,670
And in this case we're going to do player selection and we can do A versus there.

10
00:00:49,710 --> 00:00:51,960
And then this can be the computer selection.

11
00:00:52,050 --> 00:00:57,240
So whatever the computer selected so that we don't have to look into the console, we can see it being

12
00:00:57,240 --> 00:01:03,480
output for the player as they're playing a green will do a line break and then we can have whatever

13
00:01:03,480 --> 00:01:04,510
the result is.

14
00:01:04,950 --> 00:01:06,780
So this is where that result value.

15
00:01:06,780 --> 00:01:13,380
And that's why I was adding the win in there so we can simply output the result and we could have simply

16
00:01:13,380 --> 00:01:14,880
output the result.

17
00:01:15,070 --> 00:01:20,270
But the problem is, when it comes to a draw, that the result is actually a tie.

18
00:01:20,280 --> 00:01:22,290
So let's add that last one in.

19
00:01:22,500 --> 00:01:28,140
And we know that if it's not the player that wins, we know that it's not the computer that wins, then

20
00:01:28,140 --> 00:01:31,260
result is going to actually equal a draw.

21
00:01:31,620 --> 00:01:36,540
So draw and then we can say it results in a tie.

22
00:01:36,600 --> 00:01:40,670
So this way, no matter what happens, the player can see it.

23
00:01:40,680 --> 00:01:42,310
They don't have to look inside the console.

24
00:01:42,330 --> 00:01:48,030
And before we try that, we need to still add in and close this off because this is passing in a string

25
00:01:48,180 --> 00:01:49,070
into the function.

26
00:01:49,560 --> 00:01:51,540
So refresh, try it out.

27
00:01:51,810 --> 00:01:55,550
We see rock versus paper, computer wins.

28
00:01:55,830 --> 00:01:59,790
So the player has rock, the computer had paper.

29
00:02:00,000 --> 00:02:01,830
So the computer won that round.

30
00:02:01,860 --> 00:02:02,910
They scored one there.

31
00:02:03,120 --> 00:02:04,950
We've got rock versus scissors.

32
00:02:04,950 --> 00:02:06,360
So player wins this time.

33
00:02:06,540 --> 00:02:08,610
So now both have a score of one.

34
00:02:08,850 --> 00:02:11,730
And we also have what is being output there.

35
00:02:11,910 --> 00:02:18,330
You can also update this as well to be a little bit nicer so we can change this to small so that that

36
00:02:18,330 --> 00:02:19,740
stands out a little bit more.

37
00:02:19,770 --> 00:02:21,270
I'm going to copy this over.

38
00:02:21,270 --> 00:02:27,720
And so player two can be consistent as we got player one, player two, or we could just have it player

39
00:02:27,720 --> 00:02:29,160
and then we could have computer.

40
00:02:29,710 --> 00:02:35,790
So we've got player computer player as a score of one rock versus scissors player wins.

41
00:02:35,800 --> 00:02:39,930
So player got one, player has two to one, three to one.

42
00:02:40,590 --> 00:02:41,790
And that was the draw.

43
00:02:41,790 --> 00:02:44,490
So that was the message that gets out, put it in the draw.

44
00:02:44,760 --> 00:02:47,100
So draw results in a tight match.

45
00:02:47,520 --> 00:02:54,270
So let's do a quick overview and review of what we did in order to wrap up this mini application.

46
00:02:54,510 --> 00:02:57,060
So first we built our HTML structure.

47
00:02:57,240 --> 00:03:01,980
So all of the different components within our e-mail that we're going to need for the gameplay in order

48
00:03:01,980 --> 00:03:05,580
to present the player so that they can actually play the game next.

49
00:03:05,580 --> 00:03:13,260
We selected all of the elements and put them into JavaScript objects so that it's a lot simpler to select

50
00:03:13,260 --> 00:03:15,720
those and make use of them within our code.

51
00:03:15,870 --> 00:03:21,030
And of course, you don't have to we could do document, query selector every time we want to update

52
00:03:21,030 --> 00:03:22,200
that message element.

53
00:03:22,530 --> 00:03:28,530
But if we are reusing it, then the best practice is usually to select them into objects and then we

54
00:03:28,530 --> 00:03:30,660
can only only need to reference the objects.

55
00:03:30,990 --> 00:03:37,620
We set up a global variable global array called winner so that we can attach score into it again.

56
00:03:37,620 --> 00:03:39,720
Get rid of all of the console messages.

57
00:03:40,110 --> 00:03:45,420
We've got our buttons, we're attaching event listeners to the buttons and then depending on what was

58
00:03:45,420 --> 00:03:46,320
clicked on the button.

59
00:03:46,320 --> 00:03:48,270
So that's actually going to be the player selection.

60
00:03:48,480 --> 00:03:51,150
We needed to have computer selection.

61
00:03:51,300 --> 00:03:58,440
So what we did over here, selecting third for each one as an option to be returned back.

62
00:03:58,590 --> 00:04:03,240
So either rock, paper, scissors, I get rid of that console message again.

63
00:04:03,630 --> 00:04:06,120
We needed to check to see who won.

64
00:04:06,540 --> 00:04:10,260
And that's where we created a quick little function that checks winners.

65
00:04:10,650 --> 00:04:15,150
So this is a combination of passing in who selected what.

66
00:04:15,150 --> 00:04:16,920
So the first selection is the player.

67
00:04:17,130 --> 00:04:18,300
Second is computer.

68
00:04:18,540 --> 00:04:20,790
We first we check to see if they're the same.

69
00:04:20,790 --> 00:04:22,770
And if it is, then we know that we have a draw.

70
00:04:22,950 --> 00:04:25,980
Next, we check to see the wind conditions for player.

71
00:04:26,220 --> 00:04:32,010
So if the player and if the computer wins, then we know that the computer was the winner here if the

72
00:04:32,010 --> 00:04:33,210
player had selected rock.

73
00:04:33,510 --> 00:04:40,120
Alternatively, if the computer didn't select paper, then we know that the player wins and it's always

74
00:04:40,120 --> 00:04:44,910
a good idea to double check these and also play through it just to make sure that things are working

75
00:04:44,910 --> 00:04:45,780
as intended.

76
00:04:46,020 --> 00:04:52,710
So we did the same thing for paper and scissors and then finally we wrapped it up by seeing whatever

77
00:04:52,740 --> 00:04:54,210
result was returned back.

78
00:04:54,540 --> 00:04:59,520
So in this case, we got player and if the player wins, then we update the result with wins.

79
00:04:59,890 --> 00:05:05,470
And then we update winner to plus one, so it's that tree that we're using globally in order to keep

80
00:05:05,470 --> 00:05:10,060
score and then we check to see if the computer wins and we do the same thing for computer.

81
00:05:10,240 --> 00:05:13,540
And if none of them won that we know that this is a tie game.

82
00:05:13,690 --> 00:05:15,810
So we just know that it's a draw.

83
00:05:16,030 --> 00:05:18,430
We output the score value there.

84
00:05:18,670 --> 00:05:24,880
And then we use set up a separate function that we can easily add messages to the entire HTML of the

85
00:05:24,880 --> 00:05:26,740
message element within our page.

86
00:05:26,950 --> 00:05:31,740
So go ahead and try this out for yourself, play through it several times, make sure it's working,

87
00:05:31,990 --> 00:05:34,750
have some fun with it while practicing JavaScript.