1
00:00:00,450 --> 00:00:05,880
The next step in the build process is to start the game in the previous lesson, we set up the HTML.

2
00:00:06,060 --> 00:00:09,380
We've got select number of players and a start button.

3
00:00:09,600 --> 00:00:14,760
So this is where the player is going to start all of the interaction with their game when they hit start.

4
00:00:14,970 --> 00:00:20,930
And that's where we need to handle picking up that event, adding an event listener to the start button.

5
00:00:21,180 --> 00:00:26,310
So selecting the button, we're going to add an event listener to all of the buttons.

6
00:00:26,700 --> 00:00:28,700
We can do this in a number of ways.

7
00:00:28,710 --> 00:00:34,890
So we've got buttons and we can use for each in order to loop through each one of the buttons and then

8
00:00:34,890 --> 00:00:36,120
setting up a function.

9
00:00:36,270 --> 00:00:37,740
We can pick up the item.

10
00:00:37,920 --> 00:00:43,680
And then as we iterate through, you can see in the console log we've got all of the items are going

11
00:00:43,680 --> 00:00:44,400
to be listed.

12
00:00:44,730 --> 00:00:50,820
So when we refresh, we see that we've got the start button as well as the attack button.

13
00:00:50,830 --> 00:00:55,140
So both of them get listed and that means that they're being represented as objects.

14
00:00:55,320 --> 00:00:57,370
So we can add event listener.

15
00:00:57,390 --> 00:00:59,010
So selecting the item.

16
00:01:00,000 --> 00:01:07,500
And using JavaScript add event listener method, we can listen for a click on that event and send it

17
00:01:07,500 --> 00:01:13,950
over into the play game function, and that's where we can handle any of those events on the button.

18
00:01:14,640 --> 00:01:21,060
So next thing that we need to do is set up the play game function where we're going to initiate the

19
00:01:21,060 --> 00:01:21,930
game play.

20
00:01:22,110 --> 00:01:25,410
And this is also where we're going to detect which button got clicked.

21
00:01:25,650 --> 00:01:29,730
So we've got play game we're passing in that event object.

22
00:01:29,850 --> 00:01:31,860
So it doesn't matter which button gets clicked.

23
00:01:31,860 --> 00:01:34,800
And of course, we only do have the one when we're starting.

24
00:01:34,990 --> 00:01:41,760
So let's take that information from the button and figure out what button got clicked so we can use

25
00:01:41,760 --> 00:01:50,850
E target so that target and getting that inner text or we can do text content and all console log out

26
00:01:51,420 --> 00:01:58,350
the contents of temp so that now you can see that when we hit start, we get start output into the console

27
00:01:58,680 --> 00:02:05,840
so we can use that information by applying a condition and checking to see if temp is equal to start.

28
00:02:05,850 --> 00:02:11,160
Make sure that if you've got a capital there that you're keeping it capitalized because it's getting

29
00:02:11,160 --> 00:02:15,540
all of the text content from the button exactly as we're expecting it to be.

30
00:02:16,110 --> 00:02:21,310
So once we've got that start, we need to kick off the start game function.

31
00:02:21,340 --> 00:02:25,190
So this is our start game function and we'll kick that one off.

32
00:02:25,200 --> 00:02:27,000
So that's the main one that we're going to do.

33
00:02:27,210 --> 00:02:31,280
And this is where we're going to handle the start game functionality.

34
00:02:31,620 --> 00:02:37,210
So everything we need to do in order to start game is going to be contained within this function.

35
00:02:37,230 --> 00:02:44,010
So in a hide the start option, as we're starting a brand new game function in order to toggle the buttons,

36
00:02:44,340 --> 00:02:50,790
so create a function and button toggle, which will make it really easy to hide and show because we're

37
00:02:50,790 --> 00:02:54,180
not going to have the start button in the top button on at the same time.

38
00:02:54,180 --> 00:03:01,980
So we're taking button number one or buttons number one from the buttons object and applying updating

39
00:03:01,980 --> 00:03:07,140
the class list and all we're going to do is toggle the class of hide.

40
00:03:07,590 --> 00:03:12,390
So if it has it, it's going to remove it and if it doesn't have it, it's going to add it.

41
00:03:12,390 --> 00:03:13,500
So taking buttons.

42
00:03:14,040 --> 00:03:17,880
So whenever a start gets clicked and this will hide the start button.

43
00:03:18,540 --> 00:03:21,720
So maybe that's the first thing that we're going to do after we start the game.

44
00:03:21,930 --> 00:03:26,670
We're going to do a quick button toggle because we don't want the user to be able to press start again.

45
00:03:26,760 --> 00:03:27,880
So we see that attack.

46
00:03:27,900 --> 00:03:28,680
It's now shown.

47
00:03:28,920 --> 00:03:34,620
And if we hit attack, then we could also do something to handle the attack button and that could also

48
00:03:34,620 --> 00:03:35,880
be toggling the buttons.

49
00:03:36,000 --> 00:03:41,580
But in this case, we want the TAC to show and we want the user to constantly be able to hit attack.

50
00:03:41,820 --> 00:03:43,500
So we'll keep that one in place.

51
00:03:43,890 --> 00:03:49,830
So going back to the start game function, so this is where all of the start of the game takes place

52
00:03:50,160 --> 00:03:54,150
and we need to first pick up the number players.

53
00:03:54,750 --> 00:04:00,360
So using documents, query selector or selecting the input element.

54
00:04:00,360 --> 00:04:01,830
And we only do have the one input.

55
00:04:02,100 --> 00:04:04,920
So we're selecting the value from that input element.

56
00:04:05,310 --> 00:04:10,590
And we're still going to be using this input under attack because it's going to give us a number of

57
00:04:10,590 --> 00:04:14,970
how many attacks we want to launch so we can reset that default value.

58
00:04:14,970 --> 00:04:17,490
If we want, we can reset it to one.

59
00:04:17,490 --> 00:04:24,490
Once we start the game taking that element object, we're going to reset that value back to one.

60
00:04:24,510 --> 00:04:28,920
So this is just going to say one right now, and that's how many attacks we're going to launch at each

61
00:04:28,920 --> 00:04:29,640
iteration.

62
00:04:29,910 --> 00:04:33,780
So next to that we need to do is we need to make the deck of cards.

63
00:04:34,080 --> 00:04:35,650
So that's coming up in the next lesson.

64
00:04:35,970 --> 00:04:38,340
So for now, we have the game starting.

65
00:04:38,520 --> 00:04:41,700
We get the player to select the number of players they want.

66
00:04:41,880 --> 00:04:47,640
We hit start update that input to be one, and then we've got the option to attack.

67
00:04:47,670 --> 00:04:49,690
So this is the number of attacks that we're going to launch.

68
00:04:50,070 --> 00:04:51,360
So that's all still to come.

69
00:04:51,360 --> 00:04:53,090
And we're going to work that into the gameplay.

70
00:04:53,640 --> 00:04:58,860
So go ahead and add the option to toggle the buttons, updating the class list.

71
00:04:59,010 --> 00:05:04,980
And you can also see that when you go to inspect on that element, this one has the class of hide and

72
00:05:04,980 --> 00:05:06,480
this one doesn't have any.

73
00:05:06,690 --> 00:05:09,900
And when we start out initially, the attack has.

74
00:05:10,250 --> 00:05:16,650
So when I click start, that hide goes to the start button and it gets removed from the attack.

75
00:05:16,650 --> 00:05:18,240
So that's where we're targeting the button.

76
00:05:18,420 --> 00:05:23,130
And if we're to do this function again, we can launch that into the console.

77
00:05:23,280 --> 00:05:29,340
And you can see that every time I toggle the button, we're not returning anything, but those button

78
00:05:29,580 --> 00:05:32,100
classes are being removed and added.

79
00:05:32,490 --> 00:05:34,440
So that's the one thing that we did within the start.

80
00:05:34,440 --> 00:05:35,760
So we changed the view.

81
00:05:36,030 --> 00:05:41,010
We also picked up the start button content and we have a function that's going to start the game.

82
00:05:41,010 --> 00:05:45,750
So we've got the number of players and this will dictate how many players we have to deal cards, so

83
00:05:45,750 --> 00:05:46,020
to.

84
00:05:46,230 --> 00:05:49,170
So next we need to make that deck of cards so that we can deal it out.