1
00:00:00,060 --> 00:00:05,250
Welcome back, and we're going to be working on some HTML, as well as a little bit of JavaScript to

2
00:00:05,250 --> 00:00:10,590
connect our HMO elements to the JavaScript code, we've already got our basic setup.

3
00:00:10,590 --> 00:00:16,650
We've got the HTML file, the case and the case file, as well as we've got a window open on the left

4
00:00:16,650 --> 00:00:17,640
on the right hand side.

5
00:00:17,820 --> 00:00:20,610
So this is the live preview and this is available in brackets.

6
00:00:20,820 --> 00:00:25,500
You can also go to open up the file in your own editor and your own browser.

7
00:00:25,680 --> 00:00:29,820
And while you're working on the file, it's always good to be able to see it visually.

8
00:00:29,950 --> 00:00:32,190
And the reason I do this is for the course.

9
00:00:32,400 --> 00:00:37,860
And then as well, I'm going to open up the developer console in the bottom right hand side so that

10
00:00:37,860 --> 00:00:42,840
we can as well communicate between what's happening on our page and what's happening within our code

11
00:00:42,840 --> 00:00:43,710
and our script.

12
00:00:43,920 --> 00:00:47,190
So we're going to be able to see the HTML as we make updates.

13
00:00:47,430 --> 00:00:51,370
So we do need some basic HTML structure in order to get started.

14
00:00:51,390 --> 00:00:53,760
So I'm going to add this into the body area.

15
00:00:54,060 --> 00:01:00,810
First, let's do a quick beautify, clean up the code and save it and we're still getting that helo

16
00:01:01,500 --> 00:01:02,130
popping up.

17
00:01:02,140 --> 00:01:06,330
So let me just get rid of that because we're not going to need that anymore and we're not going to need

18
00:01:06,330 --> 00:01:07,110
it in our game.

19
00:01:07,110 --> 00:01:11,460
We're going to do some really cool things that the game and setting an alert is actually not one of

20
00:01:11,460 --> 00:01:11,580
them.

21
00:01:11,970 --> 00:01:18,850
So setting up a div and usually like to have a top bar here in this can be how we can communicate so

22
00:01:18,880 --> 00:01:23,010
we can have some information, maybe a start game button in there.

23
00:01:23,460 --> 00:01:29,730
And this is kind of at the top of the screen that we're going to be placing this so class and adding

24
00:01:29,730 --> 00:01:33,480
in start and then we're going to it as a button.

25
00:01:33,690 --> 00:01:39,600
So we'll select the element by start and then we'll do some styling and create buttons because we probably

26
00:01:39,600 --> 00:01:41,910
are going to need a few different buttons within the game.

27
00:01:42,250 --> 00:01:46,950
Also, let's create another div and class of Maine.

28
00:01:47,130 --> 00:01:50,730
So this is where all of our main game areas are going to go.

29
00:01:51,060 --> 00:01:53,880
We're going to have to side menus.

30
00:01:53,880 --> 00:01:56,070
Sidebar so left side and a right side.

31
00:01:56,340 --> 00:01:58,170
So let's create those separately.

32
00:01:58,560 --> 00:02:00,210
And these can have a class.

33
00:02:00,450 --> 00:02:04,910
They can have the same class as they can be a cell or a column.

34
00:02:05,220 --> 00:02:10,350
How about we just call it column side so that we can distinguish it from the right side because we are

35
00:02:10,350 --> 00:02:18,650
going to need to use JavaScript to place content into this element and also the class of game area.

36
00:02:18,660 --> 00:02:21,450
And this is where all of the main gameplay is going to go.

37
00:02:21,480 --> 00:02:23,480
And I'm going to float all of these to the left.

38
00:02:23,580 --> 00:02:25,560
So that's where I'm going to add in the cells.

39
00:02:25,770 --> 00:02:29,400
So all of the cells are going to just be a left float and align them.

40
00:02:29,400 --> 00:02:31,980
And you see three column output.

41
00:02:32,010 --> 00:02:33,450
So do one last one.

42
00:02:33,450 --> 00:02:36,950
And this is going to be a cell as well and the right side.

43
00:02:37,200 --> 00:02:42,540
So if we ever want to put anything on the right side, I've got auto closed setup on brackets that supports

44
00:02:42,540 --> 00:02:49,110
closing it automatically and then also for communication with the user, let's create a few models and

45
00:02:49,110 --> 00:02:53,310
these models will give us an ability to send some information.

46
00:02:53,310 --> 00:03:01,440
So we need one model for being able to communicate the next step and then another one where we're going

47
00:03:01,440 --> 00:03:03,890
to show to the user just a message.

48
00:03:04,110 --> 00:03:09,420
So this will be our message model similar to one is going to be used just for sending in messages.

49
00:03:09,540 --> 00:03:12,870
And then the other model that we're going to create is going to actually have the action.

50
00:03:13,110 --> 00:03:17,090
So where the players making the decision, whether they're going to take the deal or not.

51
00:03:17,610 --> 00:03:19,800
So call this one model content.

52
00:03:19,800 --> 00:03:25,200
And I usually like to add in the close button because this one, the user's going to need to close it

53
00:03:25,200 --> 00:03:27,000
or they can click off of it to close it.

54
00:03:27,330 --> 00:03:30,570
So, of course, we're going to set all of that in the upcoming lessons.

55
00:03:30,930 --> 00:03:35,130
And I'm going to just add in the little times X there so we can close that.

56
00:03:35,130 --> 00:03:38,850
You can see it being showing up here within the display area.

57
00:03:39,540 --> 00:03:41,310
So that's our first model.

58
00:03:41,310 --> 00:03:43,890
And then, of course, we also need an area for some content.

59
00:03:44,220 --> 00:03:48,780
So div class and this can be the model body.

60
00:03:48,780 --> 00:03:54,390
And for now we'll just put test content and we're going to update all of this with our JavaScript.

61
00:03:54,600 --> 00:04:00,000
Let's duplicate this and we'll use some reuse some of this HTML code for our model too.

62
00:04:00,330 --> 00:04:06,510
So we've got model two and we can have model content so that the structure of the popup can be the same.

63
00:04:06,720 --> 00:04:11,070
We're not we don't want to have a close button because we don't want users to be able to close it.

64
00:04:11,490 --> 00:04:15,990
We want to be able to pass in the message and we want the users to be able to make a decision in the

65
00:04:16,000 --> 00:04:16,560
screen.

66
00:04:17,070 --> 00:04:20,280
So we're going to add in the model body in here.

67
00:04:20,610 --> 00:04:24,780
So we call this model body to that so we can distinguish between the two.

68
00:04:24,990 --> 00:04:28,200
And I need to also to move this one down.

69
00:04:28,230 --> 00:04:32,880
I do the same here because I want the model content to wrap around the model body.

70
00:04:33,120 --> 00:04:36,300
And then so the model body is going to be the content that we're updating.

71
00:04:36,510 --> 00:04:39,600
And then we also want to have another div at the bottom.

72
00:04:39,600 --> 00:04:45,210
And then this is going to contain the various options that we have for the user because we're providing

73
00:04:45,210 --> 00:04:46,380
the user an option.

74
00:04:46,380 --> 00:04:53,060
So this is going to be a deal offer and we'll give another class so that we can style them the same.

75
00:04:53,400 --> 00:04:56,660
So there's going to be a difference between a deal and a no deal.

76
00:04:57,120 --> 00:04:59,850
So usually if the user presses deal.

77
00:05:00,030 --> 00:05:04,500
And they're accepting the offer, and if they press no deal, then they're not accepting the offer.

78
00:05:04,510 --> 00:05:08,340
So just and I just realized that so it's a little bit easier to read.

79
00:05:08,340 --> 00:05:13,370
And I'll move up the screen and paste this and I'll move this over as well.

80
00:05:13,770 --> 00:05:14,610
And then this one.

81
00:05:14,610 --> 00:05:17,010
The only difference here is going to be this will be no deal.

82
00:05:17,060 --> 00:05:19,980
We want to be able to distinguish between them and this one.

83
00:05:19,980 --> 00:05:22,560
This is the user declining the offer.

84
00:05:22,860 --> 00:05:25,290
So we're going to place the offer in mortal body, too.

85
00:05:25,560 --> 00:05:28,080
And then the users are going to have two options.

86
00:05:28,080 --> 00:05:31,300
Either they accept the offer or they declined the offer.

87
00:05:31,320 --> 00:05:35,790
So that's our basic HTML structure and we shouldn't actually need more than that.

88
00:05:36,120 --> 00:05:37,650
So let me just clean this up.

89
00:05:37,650 --> 00:05:40,620
And of course, right now it doesn't look like a whole lot.

90
00:05:40,890 --> 00:05:45,870
And we need to apply some styling and also we need to hook up some of the JavaScript.

91
00:05:46,350 --> 00:05:50,360
So let's create our basic JavaScript structure as well.

92
00:05:50,760 --> 00:05:53,850
So we're going to wrap it all within one object.

93
00:05:53,850 --> 00:05:58,950
And this will be an object that we're going to invoke and all of the gameplay is going to sit within

94
00:05:58,950 --> 00:05:59,750
this object.

95
00:06:00,030 --> 00:06:04,620
So usually the way I like to do this is just to kind of have a separation from it.

96
00:06:04,620 --> 00:06:11,760
And it's going to invoke this particular function to return and it's going to return the Init object

97
00:06:11,760 --> 00:06:15,750
as the init function that, of course, we're going to still create.

98
00:06:15,900 --> 00:06:23,640
So in it so it's returning back an object and then using the document add event listener for the DOM

99
00:06:23,880 --> 00:06:25,760
content loaded.

100
00:06:25,890 --> 00:06:31,740
So this is the same thing that if you've got if you've worked with a query that you see that we've got

101
00:06:31,740 --> 00:06:36,360
Dom content loaded and it's waiting for all of the DOM content to load.

102
00:06:36,480 --> 00:06:41,970
And then what we're going to do is we're going to initiate the API and IT function whenever the DOM

103
00:06:41,970 --> 00:06:46,980
content is loaded, when the page loads and init function.

104
00:06:47,000 --> 00:06:49,670
So it's all wrapped within that app object.

105
00:06:49,680 --> 00:06:50,010
Sure.

106
00:06:50,010 --> 00:06:52,530
That everything is working properly.

107
00:06:52,770 --> 00:06:55,330
We're going to have the ready console log ready.

108
00:06:55,680 --> 00:07:02,040
So what's happening here is that when the page loads in the document at event listener and listening

109
00:07:02,040 --> 00:07:03,590
for Dom content loaded.

110
00:07:03,810 --> 00:07:09,390
So this is the same thing that you do with G query to make sure that the DOM has loaded before you try

111
00:07:09,390 --> 00:07:10,560
to interact with the elements.

112
00:07:10,740 --> 00:07:15,990
And because this is a DOM based game, we've got to make sure that the page content has loaded that.

113
00:07:16,000 --> 00:07:22,440
So we've got Dom content loaded and then we're running the app in it and the API in it is referring

114
00:07:22,440 --> 00:07:28,110
to the app object that has a function inside of it, which is in it, and it's returning the iron.

115
00:07:28,110 --> 00:07:30,740
It is just going to be a self invoking function.

116
00:07:31,050 --> 00:07:36,300
So of course this is just one way to structure application and it's going to be a self enclosed object

117
00:07:36,300 --> 00:07:37,190
the whole entire game.

118
00:07:37,250 --> 00:07:42,090
It's going to make it a lot more flexible and easy to bring into other JavaScript projects so that we

119
00:07:42,090 --> 00:07:45,480
don't have any overlapping values and variable names.

120
00:07:45,690 --> 00:07:47,340
So go ahead and set it up.

121
00:07:47,340 --> 00:07:52,890
And you should be at the point where when your page loads, you should load some of that HTML as well

122
00:07:52,890 --> 00:07:59,040
as see already within the console of your Web browser, and you could be ready to move on to the next

123
00:07:59,040 --> 00:07:59,460
lesson.