1
00:00:00,180 --> 00:00:05,460
Hello and welcome to our set up lesson in this lesson, we're going to set up the HTML structure for

2
00:00:05,490 --> 00:00:11,550
the application we're building as well as connecting our JavaScript has JavaScript objects to the elements

3
00:00:11,550 --> 00:00:14,180
in order to utilize them within the coding.

4
00:00:14,220 --> 00:00:16,300
That's coming up in the upcoming lessons.

5
00:00:16,530 --> 00:00:20,420
So, first of all, let's set up a div, give it a class of message.

6
00:00:20,640 --> 00:00:26,280
This is going to be our main communication element where we can send messages to the player.

7
00:00:26,700 --> 00:00:33,480
Also another div where we've got our main play area so we can call this user play.

8
00:00:33,930 --> 00:00:38,690
And this is going to be our main container class where all of the gameplay is going to take place.

9
00:00:39,150 --> 00:00:47,490
We have to have an input where we are going to ask the user how many numbers of players they want to

10
00:00:47,490 --> 00:00:50,260
be dealt in setting up a default values.

11
00:00:50,260 --> 00:00:57,390
So set up a default value of three next, adding in a button and this button is going to be the one

12
00:00:57,390 --> 00:00:58,890
that's going to start the game.

13
00:00:58,920 --> 00:00:59,700
So give it.

14
00:01:01,110 --> 00:01:06,890
Some content that says start we need to have another button and this button are going to attach a class,

15
00:01:07,230 --> 00:01:09,510
so this class is going to be just hide.

16
00:01:09,660 --> 00:01:15,780
And for the high class, this is going to give us the ability to add some styling in order to highlight

17
00:01:15,780 --> 00:01:21,490
elements, display and then create another diff, give it a class of gameplay.

18
00:01:21,930 --> 00:01:28,290
This is where the game play action is going to take place and we're going to attach all the other elements

19
00:01:28,290 --> 00:01:33,630
and all the functionality via JavaScript trying to do as much as possible with JavaScript.

20
00:01:33,960 --> 00:01:38,450
Another element that we can use, and this can be some response data.

21
00:01:38,730 --> 00:01:40,420
So I'll leave that right at the bottom.

22
00:01:40,980 --> 00:01:45,750
So the next thing that we want to do, once we've set up our basic structure for the game and the way

23
00:01:45,750 --> 00:01:51,930
that I usually try to look at this is when I come into the game, what information do I need from the

24
00:01:51,930 --> 00:01:54,050
player in order to begin playing?

25
00:01:54,060 --> 00:01:58,560
So we obviously need a start button and we also need to have a number of.

26
00:01:59,690 --> 00:02:07,430
Players that we want the player to select, so let's add that message in there, so select number of

27
00:02:07,730 --> 00:02:08,480
players.

28
00:02:09,500 --> 00:02:12,320
So refresh and then we've got the message to the user.

29
00:02:12,560 --> 00:02:18,170
We also need to hide that attack button because we don't need to use that quite yet.

30
00:02:18,440 --> 00:02:23,310
So ad in a class and this one can just say display none.

31
00:02:23,330 --> 00:02:29,210
So that will hide it from the visible area and using JavaScript will show that to the player when the

32
00:02:29,210 --> 00:02:32,870
time is right and we want them to use it and interact with it.

33
00:02:33,170 --> 00:02:35,600
So right now we have the player coming in.

34
00:02:35,600 --> 00:02:40,640
It's a select number of players and then there's an input here where they can adjust the value.

35
00:02:40,670 --> 00:02:43,930
So by default, it's three so they can move it up or down.

36
00:02:44,090 --> 00:02:47,090
And then we've got a button that will start the game.

37
00:02:47,390 --> 00:02:50,690
So now we need to connect these elements using JavaScript.

38
00:02:50,960 --> 00:02:54,400
So I'm going to use CONSE because these are objects and they're not going to be changing.

39
00:02:54,620 --> 00:03:02,300
So the main one is our message area that we're selecting first using query selector, select the element

40
00:03:02,300 --> 00:03:04,200
with a class of message.

41
00:03:04,880 --> 00:03:10,700
Also, we need to select that mean button and we're going to select all of the buttons because we've

42
00:03:10,700 --> 00:03:17,390
got a couple buttons so we can use query selector all to select all the elements that have a tag of

43
00:03:17,390 --> 00:03:17,780
button.

44
00:03:18,960 --> 00:03:24,780
And try to make it as dynamic as possible, so this gives you the ability to add more buttons and also

45
00:03:25,140 --> 00:03:33,870
select them and bring them all into the buttons, object also our game play area so we can just call

46
00:03:33,870 --> 00:03:34,740
that game play.

47
00:03:36,130 --> 00:03:41,830
Using documents and we only have one element with a class of gameplay, so we're using Querrey selector

48
00:03:42,010 --> 00:03:47,050
selecting the element with a class of gameplay and bringing it to the gameplay object.

49
00:03:47,800 --> 00:03:50,080
We also have one called user place.

50
00:03:50,080 --> 00:03:53,680
So that's our main object screen area that we're going to use.

51
00:03:53,680 --> 00:03:55,060
And there's only one of those as well.

52
00:03:55,330 --> 00:03:57,580
So once again, it's query selector.

53
00:03:58,870 --> 00:04:04,750
And if you do use query selector all, then it's going to create a node list.

54
00:04:05,110 --> 00:04:09,340
If you only have one element they're trying to use, but you have more than one with the same class,

55
00:04:09,550 --> 00:04:11,630
then it's still going to only select the first one.

56
00:04:12,070 --> 00:04:15,010
And this is where we can add response information.

57
00:04:15,790 --> 00:04:17,170
So it'll give you more insight.

58
00:04:17,170 --> 00:04:20,410
It'll give the player more insight on what's happening within the gameplay.

59
00:04:20,410 --> 00:04:22,250
And that's what we can put down here.

60
00:04:22,270 --> 00:04:25,000
So this will output some data for the player.

61
00:04:25,360 --> 00:04:26,620
So let's refresh.

62
00:04:27,070 --> 00:04:31,750
And usually I like to go into the console just to make sure that I've got the elements properly.

63
00:04:31,960 --> 00:04:38,440
And you can see that once you enter in the JavaScript object, it's going to connect it to the appropriate

64
00:04:38,440 --> 00:04:38,890
element.

65
00:04:39,010 --> 00:04:43,570
And using Chrome, whenever you hover over the element and the console, it's going to highlight it

66
00:04:43,570 --> 00:04:49,150
in blue, within the visible area, within the display area, the buttons, we've got a node list as

67
00:04:49,150 --> 00:04:52,170
we've got two buttons, we've got one and two buttons.

68
00:04:53,020 --> 00:04:54,610
We also have gameplay.

69
00:04:55,270 --> 00:04:56,210
So that element.

70
00:04:56,230 --> 00:05:00,580
So this is our main gameplay area and we don't have any contents in there yet.

71
00:05:00,790 --> 00:05:04,930
The user play, of course, that's that whole element where we were having our gameplay object.

72
00:05:05,380 --> 00:05:07,840
And then lastly, we've got our RSS.

73
00:05:07,870 --> 00:05:09,280
So this is our response data.

74
00:05:09,300 --> 00:05:10,420
So this is where that can go.

75
00:05:10,600 --> 00:05:15,250
No content yet in there, but we do have it connected now as JavaScript objects.

76
00:05:15,430 --> 00:05:17,280
So we're ready to go on to the next step.

77
00:05:17,440 --> 00:05:21,670
So go ahead and build out the structure of your game and always think of it.

78
00:05:21,670 --> 00:05:27,340
The way that you build it out is you come in as the player and what do you want the player to do?

79
00:05:27,460 --> 00:05:29,950
What's the first step you want the player to take?

80
00:05:30,100 --> 00:05:34,660
And in this case, we want the player to select the number of players because it's going to determine

81
00:05:34,660 --> 00:05:39,730
everything, how the cards are dealt out, how many hands get cards dealt to them.

82
00:05:39,910 --> 00:05:45,640
So there's quite a this we need this information right in the beginning and we want to make this information

83
00:05:45,640 --> 00:05:46,390
dynamic.

84
00:05:46,570 --> 00:05:50,410
So that's why we're asking it from the user in order to start the game.

85
00:05:51,100 --> 00:05:57,190
So coming up next, we're going to create the deck of cards, as well as create some interaction for

86
00:05:57,190 --> 00:05:58,690
the user to start the game.

87
00:05:58,690 --> 00:05:59,800
So that's all still to come.