1
00:00:01,770 --> 00:00:06,900
Welcome back to the first lecture of this DICE game so well, we are going to do is we're going to check

2
00:00:06,900 --> 00:00:08,250
that we have two folders.

3
00:00:08,490 --> 00:00:15,210
The first folder that you need to you can go and download, he's actually the the start player.

4
00:00:15,420 --> 00:00:18,930
And the other folder is actually the finished version that you don't need.

5
00:00:18,930 --> 00:00:25,440
But if you want, you can download, because my goal is you to work with me, not just to download all

6
00:00:25,440 --> 00:00:29,250
of the things and after that to to not work.

7
00:00:29,430 --> 00:00:33,810
That is what I don't want to do, but what I don't want you to do.

8
00:00:33,810 --> 00:00:35,220
But that's your option.

9
00:00:35,520 --> 00:00:37,800
That's your that's your choice.

10
00:00:37,800 --> 00:00:40,290
And you can download or whatever you want.

11
00:00:40,320 --> 00:00:44,190
Now I'm going to work with this one with the starting files.

12
00:00:44,190 --> 00:00:50,430
So if you go and I'm going to put it in the desktop, if you go open the folder and start, you're going

13
00:00:50,430 --> 00:00:51,090
to select it.

14
00:00:51,620 --> 00:00:53,320
This is what you can get here.

15
00:00:53,320 --> 00:00:55,560
Are you going to have Cyesis folder?

16
00:00:55,590 --> 00:00:59,640
Imja folder, JavaScript folder says it index.

17
00:00:59,820 --> 00:01:04,530
So the mostly you need this index to learn what's happening inside.

18
00:01:05,290 --> 00:01:10,440
Now, this is something that I designed in here in the wrapper.

19
00:01:10,440 --> 00:01:20,950
I put a lot of not a lot like 300 or 400 lines of code and this is actually going to produce me in to

20
00:01:20,980 --> 00:01:22,780
see us as wrapper does.

21
00:01:23,490 --> 00:01:28,830
So that's why in the main file, I do have to see us as files.

22
00:01:29,070 --> 00:01:36,030
So I have the originals files, the cases, and I have these rhapsodies, rapper nauseousness in the

23
00:01:36,030 --> 00:01:36,600
styles.

24
00:01:37,510 --> 00:01:39,660
Let me just check in the styles.

25
00:01:39,660 --> 00:01:44,120
I do have just basic reset and everything else is in the wrapper.

26
00:01:44,130 --> 00:01:49,770
No, I want to explain everything about this structure.

27
00:01:50,190 --> 00:01:53,790
So here I do link my so you can go to font.

28
00:01:53,790 --> 00:01:54,420
Awesome.

29
00:01:54,660 --> 00:02:00,690
You can create with your username kit, you can download it and put it here.

30
00:02:00,870 --> 00:02:07,200
Maybe it's not going to work with mine or whatever you can do, you can grep for an awesome CDN.

31
00:02:07,590 --> 00:02:08,460
We're going to need phone.

32
00:02:08,460 --> 00:02:12,590
Awesome because we're going to just use some things right.

33
00:02:12,780 --> 00:02:17,290
Just wait here it is f a fair circle, right.

34
00:02:17,310 --> 00:02:21,780
So make sure that you use your own because it might not work.

35
00:02:22,590 --> 00:02:25,140
So that is pretty much what I want to try to explain.

36
00:02:25,320 --> 00:02:29,610
I also load Google phone API, these balsamic sense.

37
00:02:29,610 --> 00:02:31,740
This way you can change it.

38
00:02:31,740 --> 00:02:37,350
That's why that was the display of the phone was like that when I just showed you.

39
00:02:37,360 --> 00:02:40,920
So I have that two plus in the juice.

40
00:02:40,920 --> 00:02:46,230
I have dice that which is empty at the moment, but that needs to be loaded here.

41
00:02:47,310 --> 00:02:47,760
All right.

42
00:02:48,900 --> 00:02:50,820
So I'm grabbing it.

43
00:02:50,820 --> 00:02:51,840
I'm loading it here.

44
00:02:52,140 --> 00:02:52,860
Source.

45
00:02:52,860 --> 00:02:54,480
I'm putting the source here.

46
00:02:54,480 --> 00:02:57,240
So if you want to change it, just change it and change it here.

47
00:02:57,510 --> 00:02:59,190
Change the name and change it here.

48
00:02:59,200 --> 00:02:59,510
Right.

49
00:02:59,910 --> 00:03:04,440
So you don't need to worry about the success unless you do some little bit stylings here.

50
00:03:04,440 --> 00:03:04,830
Right.

51
00:03:05,820 --> 00:03:07,470
What it's in the IMG folder.

52
00:03:07,470 --> 00:03:10,800
In the image folder, I have the winner for picture.

53
00:03:10,800 --> 00:03:14,130
We just from a splash and thank you, Chris Kendall.

54
00:03:14,220 --> 00:03:14,610
Right.

55
00:03:15,330 --> 00:03:18,360
Then the other one is again from a splash.

56
00:03:18,360 --> 00:03:19,380
He's going to play our cards.

57
00:03:19,380 --> 00:03:23,220
We're going to use this one for the player one or for the player team.

58
00:03:23,340 --> 00:03:27,390
This is from Eric McLean from a splash again.

59
00:03:27,660 --> 00:03:32,550
Now, these dice one dice, two days, three days, four days, five days.

60
00:03:32,550 --> 00:03:38,920
Six are actually the diocese we're going to see and dash one dash to the.

61
00:03:38,950 --> 00:03:46,590
They're like that because you will see that we're going to modify some things based on those we can

62
00:03:46,800 --> 00:03:52,200
we can just exclude this one and we can replace with something else.

63
00:03:52,200 --> 00:03:55,590
And you will see why I chose to do this way.

64
00:03:55,890 --> 00:04:00,390
Now, going back here, we've got to start from the top.

65
00:04:01,350 --> 00:04:06,330
So in the body, I have this wrapper class and I also have rapaciousness.

66
00:04:06,340 --> 00:04:10,910
Everything that is stored there, it's coming from those those foushee.

67
00:04:10,920 --> 00:04:11,280
Right.

68
00:04:11,580 --> 00:04:15,240
So I have flour, one and a half player two.

69
00:04:15,660 --> 00:04:16,830
So I have two panels.

70
00:04:16,830 --> 00:04:23,130
I have this player where the diocese alone at the moment there is a dice six.

71
00:04:23,130 --> 00:04:25,830
I'm going to show it to you and I have two buttons.

72
00:04:25,830 --> 00:04:27,900
Roll the dice and the restart button.

73
00:04:28,470 --> 00:04:29,270
That's pretty much it.

74
00:04:29,310 --> 00:04:30,330
The body's ending.

75
00:04:30,600 --> 00:04:34,350
So there there's a lot of things here in the players.

76
00:04:34,350 --> 00:04:41,310
But before that, I want if you using this code, which I'm going to use at this stage, I want you

77
00:04:41,310 --> 00:04:44,610
to go to and install this extension.

78
00:04:45,480 --> 00:04:49,680
It's going to be a live server by week day.

79
00:04:49,800 --> 00:04:50,190
Right.

80
00:04:50,670 --> 00:04:53,040
So I use that one, install it, find it.

81
00:04:53,040 --> 00:04:54,240
You need to search it here.

82
00:04:54,450 --> 00:04:59,800
It's going to say live server and it's going to give you that one money.

83
00:04:59,950 --> 00:05:05,010
Installed, that's why it's like this button, so you need to install it in after the installation,

84
00:05:05,020 --> 00:05:07,860
you will have something like just going to close it.

85
00:05:08,350 --> 00:05:12,520
They will have option to go here.

86
00:05:12,880 --> 00:05:16,810
And where was it just to show you?

87
00:05:17,590 --> 00:05:23,530
Because it's now it's active in my case, but you can just open right click and you can open with live

88
00:05:23,530 --> 00:05:25,840
server in there.

89
00:05:25,840 --> 00:05:27,790
You're going to have it everything that you're going to do.

90
00:05:27,790 --> 00:05:33,100
Some changes here in the HTML player 13, for example.

91
00:05:33,110 --> 00:05:35,100
If I save it, I don't need to refresh.

92
00:05:35,110 --> 00:05:36,430
It's going to be already there.

93
00:05:36,640 --> 00:05:37,040
Right.

94
00:05:37,390 --> 00:05:40,870
That's what the Purpose and job of Life server is.

95
00:05:41,500 --> 00:05:45,090
So you can install it is using the port.

96
00:05:45,100 --> 00:05:50,500
This one and this was the thing that I was talking is going to show you go live.

97
00:05:50,510 --> 00:05:53,440
You can click it from here and it will show it again.

98
00:05:53,590 --> 00:05:55,060
But you need to close the second part.

99
00:05:55,870 --> 00:05:57,630
That was pretty much it.

100
00:05:58,030 --> 00:06:01,600
No, everything here, it's not working.

101
00:06:01,720 --> 00:06:04,000
It's not working because we don't use it.

102
00:06:04,390 --> 00:06:09,070
The JavaScript now, first things first console log

103
00:06:11,740 --> 00:06:18,580
from the JavaScript and say, let's start, save it.

104
00:06:19,150 --> 00:06:20,590
Let's see if it's going to work.

105
00:06:20,650 --> 00:06:24,400
You don't need to refresh, by the way, but that's a bad habit.

106
00:06:24,460 --> 00:06:25,000
Here it is.

107
00:06:25,090 --> 00:06:25,830
Mine is working.

108
00:06:25,840 --> 00:06:28,480
So if you don't see this one, don't worry about this.

109
00:06:28,770 --> 00:06:33,520
You don't see this is coming from I'm going to show you this coming from this kid here.

110
00:06:34,300 --> 00:06:38,380
If I remove it and there's some of the things will be missing.

111
00:06:38,710 --> 00:06:40,280
But, yeah, you're not going to have that error.

112
00:06:40,300 --> 00:06:40,630
Right.

113
00:06:42,220 --> 00:06:44,860
OK, so.

114
00:06:47,080 --> 00:06:53,230
Means it's working, so if it's not working, just maybe if you don't use the same path, you can just

115
00:06:53,350 --> 00:06:58,410
use this dots forward slash and go into just the right.

116
00:06:59,050 --> 00:07:01,550
But should work like this?

117
00:07:01,630 --> 00:07:09,100
No, let's continue working here and remember that I didn't explain the panels.

118
00:07:09,700 --> 00:07:11,560
So I have a panel for the player one.

119
00:07:12,220 --> 00:07:13,630
And actually this is the panel.

120
00:07:13,630 --> 00:07:14,740
I'm just going to expect it.

121
00:07:15,700 --> 00:07:18,460
Here is panel one panel for the player.

122
00:07:18,460 --> 00:07:20,080
One is actually player zero.

123
00:07:20,350 --> 00:07:22,140
Player one is actually player two.

124
00:07:22,150 --> 00:07:28,330
So I have right and left panel right in the left panel or the for the player one.

125
00:07:28,600 --> 00:07:33,040
We do have the IMG, we do have the panel live circle.

126
00:07:33,040 --> 00:07:34,570
Which one, which is this one.

127
00:07:35,470 --> 00:07:35,880
Right.

128
00:07:36,310 --> 00:07:40,270
We also do have these blocks here.

129
00:07:40,960 --> 00:07:42,760
These are coming from this scoreboard.

130
00:07:42,760 --> 00:07:45,750
I'm just going to close this one because it looks ugly.

131
00:07:46,840 --> 00:07:52,300
So if I remove some of them, if I cut these three because they are identical, it's going to be only

132
00:07:52,300 --> 00:07:52,690
one.

133
00:07:52,690 --> 00:07:53,010
Right.

134
00:07:53,200 --> 00:07:55,430
So that is how we're going to build the blocks.

135
00:07:56,110 --> 00:08:01,220
Now, I do have this 50 here, the score, and I do have this winner here.

136
00:08:01,340 --> 00:08:07,720
Now, the first things first, I have just put you there that you need to do what you need to add the

137
00:08:07,720 --> 00:08:11,960
class invisible because I don't want to see this lady here.

138
00:08:11,970 --> 00:08:12,310
Right.

139
00:08:12,760 --> 00:08:13,780
Same goes.

140
00:08:13,990 --> 00:08:15,580
So it's exactly the player.

141
00:08:15,580 --> 00:08:21,430
One in player two is panel is exactly the same copy, but it's shifted on the right.

142
00:08:21,580 --> 00:08:23,900
And we have a little bit styling with the great color.

143
00:08:24,190 --> 00:08:34,600
Now this invisible girl will be invisible and we're going to make it visible when we when we are when

144
00:08:34,600 --> 00:08:36,010
we actually the player wins.

145
00:08:36,250 --> 00:08:39,070
So we've managed to clean up a little bit the code.

146
00:08:39,070 --> 00:08:39,490
Right.

147
00:08:40,180 --> 00:08:41,440
So we haven't started yet.

148
00:08:42,610 --> 00:08:44,530
So we managed to clean up the code.

149
00:08:44,800 --> 00:08:45,870
What else we need here.

150
00:08:45,880 --> 00:08:50,110
So we need to come up here and I need to set up a couple of things.

151
00:08:50,380 --> 00:08:57,130
First, I'm going to create two variables called live player in.

152
00:08:57,130 --> 00:09:00,970
The second one will be player scores.

153
00:09:01,150 --> 00:09:09,370
In this, by the way, player scores will be will be honoring in this area, will hold the values for

154
00:09:09,730 --> 00:09:10,480
the.

155
00:09:11,320 --> 00:09:17,470
So he's going to be zero zero at the beginning, is going to hold the values or the scores for the both

156
00:09:17,470 --> 00:09:19,960
of the players right and left player.

157
00:09:21,550 --> 00:09:23,020
I'm going to set it to zero.

158
00:09:24,190 --> 00:09:25,900
And actually that will be the first player.

159
00:09:25,900 --> 00:09:28,000
It's going to be this player here, actually.

160
00:09:28,210 --> 00:09:28,590
Right.

161
00:09:28,750 --> 00:09:35,110
So when it's left player, we're going to change it to be one and that will go for this player.

162
00:09:35,110 --> 00:09:38,160
So we're going to play zero one zero one with this one.

163
00:09:38,410 --> 00:09:43,480
So the first one, I always want to start the game with the player one.

164
00:09:43,480 --> 00:09:44,680
That's why I just put it here.

165
00:09:44,980 --> 00:09:50,080
Sometimes it's very easy to put it so if this confusing just player zero in player one here.

166
00:09:50,080 --> 00:09:50,460
Right.

167
00:09:50,620 --> 00:09:51,930
But you don't have to.

168
00:09:52,540 --> 00:09:55,810
So it's going to be super, super simple.

169
00:09:56,230 --> 00:10:04,960
No, we can see that this dice is here and in our final let me open the final one.

170
00:10:06,040 --> 00:10:06,940
Which one was the final?

171
00:10:06,940 --> 00:10:09,100
This one in the final one.

172
00:10:09,100 --> 00:10:12,040
We don't have the dice right when we start.

173
00:10:12,040 --> 00:10:12,510
We do.

174
00:10:12,760 --> 00:10:14,950
This is empty, right semi's here.

175
00:10:15,070 --> 00:10:16,480
So we have a lot of things to do.

176
00:10:16,480 --> 00:10:17,350
This is fifty.

177
00:10:17,350 --> 00:10:21,880
We need to remove we need to remove this one and the same.

178
00:10:21,880 --> 00:10:23,980
We need to remove the active.

179
00:10:24,100 --> 00:10:25,090
OK, now.

180
00:10:26,140 --> 00:10:31,330
So what we need to do, I'm just going to use the query selector and I'm going to see darkman dot query

181
00:10:31,330 --> 00:10:38,050
selector and I'm going to use the dice right now because we don't know.

182
00:10:38,050 --> 00:10:39,700
I mean, I know, but you don't know.

183
00:10:40,840 --> 00:10:42,160
Where is this dice.

184
00:10:42,760 --> 00:10:43,360
Here it is.

185
00:10:44,710 --> 00:10:47,860
So I want to target this you here.

186
00:10:47,860 --> 00:10:49,450
I don't want to target the whole panel.

187
00:10:49,600 --> 00:10:53,080
So if I cut the whole panel, look what will happen here.

188
00:10:53,110 --> 00:10:55,090
Actually, I'm going to cut it the whole panel.

189
00:10:55,090 --> 00:10:57,970
So I just want I don't that's why I'm not going to target this class.

190
00:10:58,180 --> 00:11:03,610
But I'm going to target only this class here in the name of the class is Dice.

191
00:11:03,790 --> 00:11:09,790
So we know when we use Querrey selector, we can target by their ID or by the class with the class we

192
00:11:09,790 --> 00:11:10,000
use.

193
00:11:10,000 --> 00:11:11,110
Always that.

194
00:11:11,680 --> 00:11:14,050
So OK, now I do have dice.

195
00:11:14,410 --> 00:11:20,530
I'm not going to store it in a variable here because simply remember that we can just play with the

196
00:11:20,530 --> 00:11:26,320
style of these dice here and we can just make it style display.

197
00:11:28,750 --> 00:11:33,040
This play and we're going to set it to none.

198
00:11:34,450 --> 00:11:39,340
OK, I'm going to save it now and let's see what's happening.

199
00:11:39,370 --> 00:11:40,230
Nothing is happening.

200
00:11:40,240 --> 00:11:40,680
Why?

201
00:11:40,930 --> 00:11:43,750
Because we might have some error.

202
00:11:44,020 --> 00:11:50,350
So Querrey Selecter Die's style display, none should work.

203
00:11:52,120 --> 00:11:54,050
Let me check why it's not working.

204
00:11:54,070 --> 00:11:54,970
Maybe we are just.

205
00:11:58,160 --> 00:12:03,410
OK, it's what I was looking at, some of the hours I was looking in this room, but this year wasn't

206
00:12:03,680 --> 00:12:04,310
looking here.

207
00:12:04,310 --> 00:12:05,540
So it's working, right?

208
00:12:06,020 --> 00:12:07,240
Oh, absolutely I am.

209
00:12:07,250 --> 00:12:08,520
So if I comment this one.

210
00:12:09,270 --> 00:12:09,750
Sorry, guys.

211
00:12:10,400 --> 00:12:11,210
There you go.

212
00:12:11,240 --> 00:12:11,890
Here it is.

213
00:12:11,900 --> 00:12:15,170
But if I can comment that one, I don't know where was my mind?

214
00:12:15,170 --> 00:12:17,560
I was looking into this one, so that's pretty much it.

215
00:12:17,570 --> 00:12:25,730
We had one of the things also remember that we can add text content to some of the fields here.

216
00:12:26,120 --> 00:12:32,680
And I have these final score, 50 and 50 here.

217
00:12:32,690 --> 00:12:35,530
I just want them to be zero.

218
00:12:35,540 --> 00:12:48,020
Now, if I go here and say final score here is so I have final score of one for the player to have final

219
00:12:48,020 --> 00:12:52,820
score of zero for the player, 50, but they're IDRs.

220
00:12:52,970 --> 00:12:54,650
So I'm just going to copy one of them.

221
00:12:55,820 --> 00:12:59,990
I'm just going to paste it like this because I don't want to mess it up.

222
00:12:59,990 --> 00:13:08,800
So now I'm just going to say document don't get girlyman by the why is not giving me the option.

223
00:13:09,150 --> 00:13:15,110
OK, here's the go get element by and I'm going to say, OK, final hash.

224
00:13:16,010 --> 00:13:20,720
We don't need to actually use hash because this is not query selector.

225
00:13:20,720 --> 00:13:23,390
We can we can achieve same thing with query selector.

226
00:13:23,660 --> 00:13:29,270
But I want to refresh your memory that we can get the elements by Derrida and I'm going to say, OK,

227
00:13:29,580 --> 00:13:33,860
final score, let's copy this one.

228
00:13:34,040 --> 00:13:36,590
I don't want to make I want to be smart here.

229
00:13:36,980 --> 00:13:40,490
And what we can do, we can set the text content.

230
00:13:41,360 --> 00:13:46,370
Yeah, we can set it to zero now I'm not going to save it now.

231
00:13:46,370 --> 00:13:54,350
It's fifty on both sides so I'm going to save it here is going to be zero because this we just set for

232
00:13:54,350 --> 00:13:54,980
this player.

233
00:13:55,280 --> 00:13:56,870
I'm going to do it for the other player.

234
00:13:59,320 --> 00:14:04,360
And that was clear, number one, man, I need to be zero as well.

235
00:14:04,720 --> 00:14:07,870
OK, set, clear.

236
00:14:07,870 --> 00:14:10,120
Score to zero,

237
00:14:13,090 --> 00:14:22,130
disappear or set display none for the dice in the middle.

238
00:14:22,940 --> 00:14:23,350
Right.

239
00:14:24,280 --> 00:14:26,200
That is pretty much it.

240
00:14:26,200 --> 00:14:29,650
What we have done with this two parts and we are done for today.

241
00:14:29,650 --> 00:14:31,360
So we achieved a couple of things.

242
00:14:32,200 --> 00:14:34,020
So we just disappeared this.

243
00:14:34,030 --> 00:14:39,500
But these dice here and we just said the text content to these notes here.

244
00:14:39,820 --> 00:14:41,980
So that's pretty much what we have done.

245
00:14:42,220 --> 00:14:45,280
I've explained the whole structure of this index.

246
00:14:46,000 --> 00:14:52,510
Also, I'm just explaining that you can grab your own kid for an awesome four year user and this will

247
00:14:52,510 --> 00:14:54,310
be generated a Newquay for you.

248
00:14:54,410 --> 00:14:54,790
Right.

249
00:14:55,210 --> 00:15:01,270
So if not working, please do that or just grab a CD and link to it to find out something.

250
00:15:01,300 --> 00:15:03,070
You're done right.

251
00:15:03,250 --> 00:15:06,950
You're done with that and make sure that you're putting here.

252
00:15:07,030 --> 00:15:09,420
So that's it for this lecture.

253
00:15:09,430 --> 00:15:10,320
I hope you enjoy it.

254
00:15:10,720 --> 00:15:18,580
We just have a walk walk through to the entire structure of our project.

255
00:15:19,090 --> 00:15:20,020
So thank you very much.

256
00:15:20,170 --> 00:15:21,760
And I will see you in the next one.