1
00:00:02,180 --> 00:00:05,220
So thus far we haven't progressed too much into our game,

2
00:00:05,240 --> 00:00:06,720
so let's work on that.

3
00:00:06,770 --> 00:00:12,290
I'll get rid of that old code up there, of the commented out code, so that we just have our event listener

4
00:00:12,350 --> 00:00:17,360
and so on and now in between, we need a couple of other functions which we can kick off when our game started.

5
00:00:17,720 --> 00:00:18,770
When the game started,

6
00:00:18,770 --> 00:00:25,820
we want to let the user choose whether he wants to use rock, paper or scissors,

7
00:00:25,820 --> 00:00:28,080
that's the game, right? Now

8
00:00:28,130 --> 00:00:34,370
for that, we can add a new function and I'll use that approach where I store it in a constant, again totally

9
00:00:34,370 --> 00:00:35,840
optional,

10
00:00:35,840 --> 00:00:40,670
though for now I would recommend that you also use that because we'll tweak this a little bit in a second.

11
00:00:40,820 --> 00:00:46,360
So I'll create a constant and name it get player choice because this effectively is now my function name,

12
00:00:46,370 --> 00:00:52,190
so it should also be named like you would name functions and I'll store an anonymous function in there.

13
00:00:52,200 --> 00:00:58,910
Now get player choice should show a prompt to the user asking for rock, paper or scissors.

14
00:00:59,370 --> 00:01:07,750
So we can get a selection stored in a constant by using the prompt function which is built into Javascript

15
00:01:08,110 --> 00:01:14,260
and ask for rock, paper or scissors

16
00:01:17,410 --> 00:01:21,040
and provide a default value of an empty string.

17
00:01:21,090 --> 00:01:26,110
So now that will open a prompt to the user when we call that function and store the result in selection.

18
00:01:26,120 --> 00:01:29,150
Now obviously, the user could enter anything in there,

19
00:01:29,160 --> 00:01:41,490
so I want to check if selection is not equal to rock and selection also is not equal to paper and selection

20
00:01:41,550 --> 00:01:45,130
also is not equal to scissors.

21
00:01:45,300 --> 00:01:51,480
If that's the case and we can structure this across multiple lines and avoid typos here,

22
00:01:51,720 --> 00:01:57,690
so if we add this if check and we make it into this if block here, I know that something invalid was

23
00:01:57,690 --> 00:02:03,150
entered because the user obviously neither entered rock nor paper nor scissors.

24
00:02:03,150 --> 00:02:11,760
So in that case, I want to let the user know that he or she made an invalid choice and that we'll use

25
00:02:11,760 --> 00:02:13,820
some default for him or her.

26
00:02:13,830 --> 00:02:18,120
Of course we could let the user choose again but I want to use a default in that case,

27
00:02:18,120 --> 00:02:23,190
we chose rock for you, let's say rock is our default here.

28
00:02:23,490 --> 00:02:24,990
Now a little adjustment right away,

29
00:02:25,110 --> 00:02:31,980
I want to work with some constants, some global constants here so that when I use rock, paper and scissors

30
00:02:32,100 --> 00:02:35,820
as words in my if statements, I can't introduce typos,

31
00:02:35,820 --> 00:02:39,420
that's a pattern I showed you in the control structures module.

32
00:02:39,510 --> 00:02:48,580
So here I just will introduce some global constants, selection rock which is rock

33
00:02:48,830 --> 00:02:54,290
or maybe just rock actually, we can shorten this and duplicate this

34
00:02:54,290 --> 00:02:57,410
and then also here have paper

35
00:02:57,410 --> 00:03:03,790
and also here have scissors and the advantage of this is that

36
00:03:03,850 --> 00:03:11,790
now here I can use rock, here I can use paper

37
00:03:12,050 --> 00:03:22,180
and here I can use scissors and I can't mistype and we can even use that here in our template literal

38
00:03:22,660 --> 00:03:25,370
and ask for rock,

39
00:03:25,380 --> 00:03:29,450
now of course the user has to enter this all in capital cases,

40
00:03:29,710 --> 00:03:38,130
paper or scissors. Now to make sure that we don't dismiss a choice as invalid just because the user may

41
00:03:38,130 --> 00:03:41,660
be entered rock instead of ROCK,

42
00:03:41,780 --> 00:03:49,580
we can actually also convert the entire string the user entered to all capital case and we can do so by

43
00:03:49,580 --> 00:03:57,800
calling to uppercase on the return value of prompt. Now the return value of prompt is a string as you

44
00:03:57,800 --> 00:04:04,070
learned and as you learned, objects can have functions, can have methods.

45
00:04:04,280 --> 00:04:09,830
Now you also learned that strings are primitive values and not really objects but in that same video

46
00:04:09,830 --> 00:04:16,490
where you learned this, I mentioned that you can still access certain properties and functions on these

47
00:04:16,490 --> 00:04:23,350
primitive values and they're kind of temporarily used as objects you could say. It's a bit more complex,

48
00:04:23,360 --> 00:04:28,760
Javascript does this behind the scenes for us so we can use them like objects but they're not really

49
00:04:28,970 --> 00:04:29,590
objects,

50
00:04:29,600 --> 00:04:31,290
that's how you can think about it.

51
00:04:31,370 --> 00:04:38,060
So a string is a primitive value but it still has this to uppercase method which it exposes to us. So

52
00:04:38,060 --> 00:04:43,280
it exposes this method to us and what this method does is it returns a new string where all characters

53
00:04:43,280 --> 00:04:45,860
have been converted to uppercase characters.

54
00:04:45,860 --> 00:04:50,240
So what we store in selection will be a string with only uppercase characters and then we can use

55
00:04:50,240 --> 00:04:57,690
that here in that if check. So in here, we now check for a valid selection and if selection is invalid, we

56
00:04:57,690 --> 00:05:01,520
let the user know that we chose rock for him or her,

57
00:05:01,890 --> 00:05:09,480
so actually we can use a template literal here as well and output rock here as well, maybe even create

58
00:05:09,480 --> 00:05:15,320
a new constant, default user choice and set this equal to rock,

59
00:05:15,330 --> 00:05:20,640
so that here I refer to that and if we ever would want to change that default choice, we only have to

60
00:05:20,640 --> 00:05:24,270
do it up here and with that, we validated this,

61
00:05:24,270 --> 00:05:27,880
of course I now want to return here. 

62
00:05:27,900 --> 00:05:33,870
So here I can return rock or to be precise, default user choice,

63
00:05:33,870 --> 00:05:40,420
otherwise if we don't make it in here, I want to return selection which should be rock, paper or scissors.

64
00:05:40,440 --> 00:05:46,530
So now here in this anonymous function, we can call get player choice and this will return us whatever

65
00:05:46,530 --> 00:05:52,920
the user chose or that default selection and hence I'll store this in a new constant named player

66
00:05:52,920 --> 00:05:58,560
selection which is now a local constant of this anonymous function.

67
00:05:58,560 --> 00:06:03,660
So for now let's just log this here and see whether it works, so let's log the player selection here

68
00:06:04,320 --> 00:06:05,440
and have a look at that.

69
00:06:05,580 --> 00:06:12,600
If we save this and we go back and we reload this page here, click on start game and we get this prompt and

70
00:06:12,600 --> 00:06:16,650
if I enter something here and click ok, I get invalid choice,

71
00:06:16,650 --> 00:06:20,210
we chose rock for you and hence rock is being printed here.

72
00:06:20,310 --> 00:06:29,730
If we reload this and I click again and I enter rock here, I get rock and just to prove that also

73
00:06:29,730 --> 00:06:33,160
something else works, if I enter paper here, I get paper

74
00:06:33,180 --> 00:06:34,380
so that works.

75
00:06:34,380 --> 00:06:39,540
Now before we continue, I also want to make sure that once we started a game, we can't start another game.

76
00:06:39,950 --> 00:06:49,110
For this, I'll add a global variable, game is running and set this to false initially but set it to true

77
00:06:49,350 --> 00:06:50,790
in this anonymous function,

78
00:06:50,790 --> 00:06:58,770
game is running, set it to true but also here before I set it to true, check if game is running and if

79
00:06:58,770 --> 00:07:04,950
the game is running and we don't need to add equal equal true here because there already is a boolean

80
00:07:04,950 --> 00:07:10,910
in game is running or something which can be coerced to a boolean value but it already is a boolean.

81
00:07:11,100 --> 00:07:15,630
So we'll make it in here if game is running is true and then I just want to return so that when we

82
00:07:15,630 --> 00:07:18,800
click the button again and again, we don't start new games.

83
00:07:19,050 --> 00:07:22,530
Of course right now we're not doing too much in our game though, so that's something we'll have to change

84
00:07:22,560 --> 00:07:24,360
but we'll get there.

85
00:07:24,360 --> 00:07:31,800
So we started the game, we allowed the user to make a selection, the next step of course is that the computer

86
00:07:32,010 --> 00:07:35,500
also is able to make a selection. Before we do that

87
00:07:35,500 --> 00:07:41,200
however, let's see how else we can create functions because it turns out there is yet another way of

88
00:07:41,200 --> 00:07:42,160
creating a function.