1
00:00:02,250 --> 00:00:07,260
Welcome back, my friends, to another lecture today where we are going to do is we going to deal with

2
00:00:07,260 --> 00:00:14,450
how we can fix those blocks when we have like a result here, how we can just make those blocks here.

3
00:00:14,460 --> 00:00:17,250
So six I should have six blocks on this side.

4
00:00:17,790 --> 00:00:20,690
And when I have six on the other side, six here, I will have.

5
00:00:20,910 --> 00:00:21,720
So that's strange.

6
00:00:21,930 --> 00:00:23,890
Now, how are we going to do that?

7
00:00:24,300 --> 00:00:28,260
So there are different ways, different approaches.

8
00:00:28,650 --> 00:00:35,010
But actually we want to mimic this one here just to be dynamic from the Jaspan.

9
00:00:35,040 --> 00:00:44,640
Now, what I would suggest to do is to create a function and that function will name square block in

10
00:00:44,640 --> 00:00:53,430
inside the function that will have a for loop and that for bloop bloop based on these dice result or

11
00:00:53,430 --> 00:00:55,220
based on the player score area.

12
00:00:55,470 --> 00:00:59,370
How much does values there, how much is holding the value.

13
00:00:59,640 --> 00:01:01,490
Oh sorry I didn't say correctly.

14
00:01:01,890 --> 00:01:14,520
So based on the array value, we need to loop it as many times and we need to put here this HTML content.

15
00:01:14,520 --> 00:01:14,850
Right.

16
00:01:15,840 --> 00:01:17,740
So create a score block.

17
00:01:17,760 --> 00:01:24,930
So the reason why I'm not going to put some parsing, some arguments or the arguments that I would ideally

18
00:01:24,930 --> 00:01:30,160
best will be this player scores my area in the live player.

19
00:01:31,410 --> 00:01:38,280
So two arguments, but because they're defined up here, I don't need to use them so I can use them

20
00:01:38,280 --> 00:01:39,090
right here.

21
00:01:39,180 --> 00:01:40,090
Score block.

22
00:01:41,010 --> 00:01:44,580
So I hope you understand what this score.

23
00:01:46,860 --> 00:01:54,210
So what I'm trying to say, for example, everything that is defined here, this variable dies.

24
00:01:54,210 --> 00:01:58,840
For example, if I want to get out from the condo lock and put it dies.

25
00:01:59,010 --> 00:02:04,260
So if we want to get out from this event, listener these days is a local variable.

26
00:02:04,260 --> 00:02:05,730
So it's only visible.

27
00:02:06,030 --> 00:02:11,520
Its scope is visible here in this in this square selecter.

28
00:02:11,650 --> 00:02:11,970
Right.

29
00:02:12,240 --> 00:02:14,240
Just going to close that one.

30
00:02:14,580 --> 00:02:20,370
And it should give me undefined error or reference error.

31
00:02:20,680 --> 00:02:21,660
That is not defined.

32
00:02:22,020 --> 00:02:27,810
Now, if I tried to use Livescribe flair, I would be able to access it.

33
00:02:27,820 --> 00:02:28,890
And that is zero.

34
00:02:30,440 --> 00:02:39,770
So because this livelier the area, they are declared outside globally right now.

35
00:02:41,240 --> 00:02:43,930
Now, I'm glad you understand all of these things.

36
00:02:44,540 --> 00:02:49,370
So what we need to do is actually call this function.

37
00:02:50,690 --> 00:02:52,190
Call the function.

38
00:02:54,590 --> 00:03:06,470
Score block, so score, block, function, score, block, and here what I will say is let's just grab

39
00:03:06,470 --> 00:03:16,640
the size of the players area of life later and what I'm trying to do here, I'm going to create a switch

40
00:03:16,640 --> 00:03:17,050
statement.

41
00:03:17,060 --> 00:03:22,610
So in this lecture, we are going to repeat what we have learned we got to do for loop switch statement

42
00:03:23,360 --> 00:03:28,910
and we got to do some inner HTML probably right now switch statement.

43
00:03:29,150 --> 00:03:34,870
Remember that a switch statement requires here to have a parameter.

44
00:03:34,970 --> 00:03:38,810
So based on that parameter, the case, we will have different cases.

45
00:03:38,960 --> 00:03:41,060
In my situation.

46
00:03:41,060 --> 00:03:42,200
I'm going to say break here.

47
00:03:42,200 --> 00:03:43,670
I'm going to have two cases, right.

48
00:03:43,910 --> 00:03:49,670
Case one and case zero one, because I only have two players, zero and one.

49
00:03:49,910 --> 00:03:51,730
So they cannot be something else.

50
00:03:52,220 --> 00:03:58,850
So in the first case, I'm going to do for loop with the variable I that will be equal to zero.

51
00:04:00,230 --> 00:04:05,840
I will be smaller than the size of the array that I'm passing for the current player.

52
00:04:06,410 --> 00:04:15,110
And I will say I plus plus no above here in this one, I would like to do something.

53
00:04:15,350 --> 00:04:18,280
So what I want to do is actually to reset.

54
00:04:18,560 --> 00:04:23,270
So first to grab this to show you, I want to grab this div here.

55
00:04:23,660 --> 00:04:30,530
And if anything, that's because the div every look, what we're going to have is going to contain some

56
00:04:30,530 --> 00:04:31,070
blocks.

57
00:04:31,400 --> 00:04:36,620
So I just want to do a basic reset there and you will see why.

58
00:04:38,180 --> 00:04:43,640
So far I'm going to say I'm not going to store it in a variable.

59
00:04:43,760 --> 00:04:48,860
So document dot get element by the key and I'm going to paste is here.

60
00:04:48,860 --> 00:04:52,610
I'm going to say in HTML to empty.

61
00:04:52,700 --> 00:04:53,090
Right.

62
00:04:55,240 --> 00:05:00,250
Otherwise, we will have a problem and you will see I will just comment on that one later.

63
00:05:00,940 --> 00:05:10,320
Now here I will say document that she's going to copy the entire thing and that will be equal to code

64
00:05:10,490 --> 00:05:10,870
black.

65
00:05:14,090 --> 00:05:14,500
Yeah.

66
00:05:14,680 --> 00:05:17,310
Now, this code black, it's a little bit strange for you.

67
00:05:17,500 --> 00:05:21,750
So I'm going to miss one step here and probably I'm going to do this.

68
00:05:21,760 --> 00:05:23,420
I'm going to comment it like this.

69
00:05:24,550 --> 00:05:29,080
Now, these enraged yellow code black should be a variable.

70
00:05:29,080 --> 00:05:30,840
Declared it in the beginning.

71
00:05:31,240 --> 00:05:31,720
Right.

72
00:05:31,720 --> 00:05:34,420
This code black.

73
00:05:35,410 --> 00:05:37,160
I want to contain something.

74
00:05:37,210 --> 00:05:46,690
Code black will contain this HTML structure here, this entire div.

75
00:05:46,960 --> 00:05:54,990
But in order to work here, you need to put it in quotes like that so I now can do whatever I want.

76
00:05:55,900 --> 00:05:57,140
So let's test it out.

77
00:05:57,160 --> 00:05:59,250
So it's going to go for the player zero.

78
00:05:59,410 --> 00:06:00,910
It's going to go in this case.

79
00:06:01,180 --> 00:06:08,950
It's going to look through the size and we are going to have this code block attached.

80
00:06:09,130 --> 00:06:11,470
OK, let's see now.

81
00:06:11,500 --> 00:06:14,530
I'm just going to close it here because we're not cancelling anything.

82
00:06:14,830 --> 00:06:19,220
It is one and it's giving me one there.

83
00:06:19,810 --> 00:06:25,540
So when I go five, six, it's not working, although the size is working.

84
00:06:25,570 --> 00:06:30,880
So if we print out the size, you will see that it's working on the log.

85
00:06:30,880 --> 00:06:31,780
The size is good.

86
00:06:31,990 --> 00:06:33,940
So this loop should be OK, right?

87
00:06:33,940 --> 00:06:36,970
This size should loop as many times as we have.

88
00:06:37,360 --> 00:06:40,660
I am just going to inspect the element console.

89
00:06:40,810 --> 00:06:42,400
So the size is zero at the beginning.

90
00:06:42,400 --> 00:06:44,050
Three nine.

91
00:06:44,080 --> 00:06:44,640
Here it is.

92
00:06:45,100 --> 00:06:48,040
But we don't see this console, these blocks here.

93
00:06:48,370 --> 00:06:49,360
The reason is why.

94
00:06:49,370 --> 00:06:56,110
Because we didn't we we just put only one right now with this.

95
00:06:56,110 --> 00:06:59,130
Plus everything was stored inside.

96
00:06:59,410 --> 00:07:01,210
We're going to append again.

97
00:07:01,480 --> 00:07:01,880
Right.

98
00:07:02,290 --> 00:07:04,470
Same simple logic.

99
00:07:04,870 --> 00:07:06,970
OK, now we're going to have another problem.

100
00:07:06,970 --> 00:07:10,480
So one OK, now I have three.

101
00:07:10,780 --> 00:07:13,120
OK, now I have six.

102
00:07:14,080 --> 00:07:14,470
Good.

103
00:07:15,340 --> 00:07:16,150
Let's count them.

104
00:07:16,150 --> 00:07:20,550
One, two, three, four, five, six, seven, eight, nine, ten.

105
00:07:20,770 --> 00:07:22,890
How come this happened?

106
00:07:23,950 --> 00:07:29,530
Well, this happened because we don't restore every time the size.

107
00:07:29,530 --> 00:07:34,210
I want to start from zero and I want to go to that particular size.

108
00:07:34,210 --> 00:07:38,350
For example, if there are ten elements, I want to look ten times and I want to create ten here because

109
00:07:38,350 --> 00:07:41,530
I do have six at the moment, because I do have six here.

110
00:07:41,650 --> 00:07:45,940
I want to loop six times not to store the previous value.

111
00:07:46,210 --> 00:07:54,850
So by doing this, I'm going to reset reset the inner HTML of this one here to zero every time I loop

112
00:07:55,120 --> 00:07:55,930
before I loop.

113
00:07:56,830 --> 00:08:01,300
So now I'm going to have the exact number of blocks.

114
00:08:01,330 --> 00:08:01,690
Right.

115
00:08:01,870 --> 00:08:05,830
Let's check it out for I've got four then I got ten.

116
00:08:05,830 --> 00:08:06,550
So ten.

117
00:08:07,150 --> 00:08:11,230
One, two, three, four, five, six, seven, eight, nine, ten.

118
00:08:12,250 --> 00:08:13,300
That is good.

119
00:08:13,300 --> 00:08:15,010
But we have one problem.

120
00:08:15,610 --> 00:08:17,980
It's late for one step.

121
00:08:19,390 --> 00:08:22,210
OK, let's fix this up for the other one.

122
00:08:24,820 --> 00:08:26,410
And we need to change the player.

123
00:08:26,410 --> 00:08:28,960
Score this one in order to work.

124
00:08:30,490 --> 00:08:30,820
Why?

125
00:08:30,820 --> 00:08:32,110
Because we do have this.

126
00:08:33,730 --> 00:08:37,840
This is for Player zero score block and we do have another score block for the other guy.

127
00:08:38,410 --> 00:08:40,390
So I'm just going to roll the dice, OK, too.

128
00:08:40,990 --> 00:08:43,680
But I didn't see that change immediately there.

129
00:08:43,690 --> 00:08:44,050
Right.

130
00:08:44,620 --> 00:08:47,680
So now somehow it's working, but it's not working as we want.

131
00:08:47,770 --> 00:08:50,230
So it stop because this guy reached twenty one.

132
00:08:50,800 --> 00:08:52,240
It's even this one here.

133
00:08:52,240 --> 00:08:52,930
It's not filled.

134
00:08:53,080 --> 00:08:58,630
Should be at least twenty one twenty and plus should overflow a little bit here.

135
00:08:59,020 --> 00:09:01,810
And I will tell you how are we going to fix that overflowing issue.

136
00:09:02,260 --> 00:09:07,960
Now the way this is working, it's because we didn't put the function in the right place.

137
00:09:08,320 --> 00:09:11,770
We just put a function after we switch the player.

138
00:09:11,770 --> 00:09:18,460
And I should when we store it in this one, the the area we want to call the function.

139
00:09:18,740 --> 00:09:24,820
OK, so now I expect when I hit the dice, I want the result that I'm going to have here.

140
00:09:24,820 --> 00:09:26,350
I want to be the same one here.

141
00:09:26,620 --> 00:09:27,310
So three.

142
00:09:27,460 --> 00:09:29,320
Yeah I see three there.

143
00:09:29,620 --> 00:09:30,400
On the other hand.

144
00:09:30,400 --> 00:09:34,690
One I see one so eight five plus three was eight.

145
00:09:35,260 --> 00:09:44,460
This reset it before and after that loop eight times now for one plus three was four.

146
00:09:44,710 --> 00:09:46,360
Now the other guy is twelve.

147
00:09:46,780 --> 00:09:51,070
We it first set to empty and loop it twelve times.

148
00:09:51,310 --> 00:09:52,690
He can create deadlock.

149
00:09:53,920 --> 00:10:00,790
Now 18 and we have 23, here he is now, it's overflowing, you can't see it here.

150
00:10:01,380 --> 00:10:06,640
Here is if I if I zoom in, that's why I always told you, make sure that you watch this one on one

151
00:10:06,640 --> 00:10:11,350
hundred so you can see that there are cubes here overflowing.

152
00:10:11,350 --> 00:10:11,680
Right.

153
00:10:13,360 --> 00:10:18,400
And if I don't have this, I'm going to tell you here something.

154
00:10:20,650 --> 00:10:28,480
If style overflow hidden is uncommented from the both of the blocks, you will see what will happen

155
00:10:28,480 --> 00:10:28,770
now.

156
00:10:33,780 --> 00:10:37,840
Yeah, it's overflowing again, but you can't see it doesn't matter, just return back to normal.

157
00:10:37,860 --> 00:10:39,090
I just want to show you something else.

158
00:10:39,570 --> 00:10:41,370
So how are we going to fix this?

159
00:10:42,600 --> 00:10:44,360
It's a very easy fix here.

160
00:10:44,790 --> 00:10:51,690
I'm just going to remove this council size and I'm going to check if size is greater than 20.

161
00:10:52,650 --> 00:10:53,070
Right.

162
00:10:53,520 --> 00:10:59,010
So, for example, if I have 20, let's 20.

163
00:10:59,020 --> 00:10:59,300
Right.

164
00:10:59,310 --> 00:11:01,980
So if it's greater than 20, it's going to be 22.

165
00:11:02,280 --> 00:11:03,930
I want to make the size.

166
00:11:03,930 --> 00:11:04,920
So that will be true.

167
00:11:06,510 --> 00:11:09,020
And I want to reset the size to 20.

168
00:11:09,330 --> 00:11:13,560
Now, this size will always if it's go above 20.

169
00:11:13,590 --> 00:11:21,090
So we'll check in before the switch statement and that size will reset back to 20.

170
00:11:21,450 --> 00:11:25,560
So now I will not be able to see that overflowing.

171
00:11:25,560 --> 00:11:26,450
Doesn't matter what.

172
00:11:26,580 --> 00:11:27,660
So I have 20.

173
00:11:28,920 --> 00:11:30,420
That was my luck today.

174
00:11:30,420 --> 00:11:30,690
Right.

175
00:11:30,720 --> 00:11:31,960
So I'm just going to refresh.

176
00:11:33,900 --> 00:11:39,910
I want to have more than here is so I have 22, but I don't see this overflowing box blocks here.

177
00:11:40,030 --> 00:11:40,790
Two more.

178
00:11:40,800 --> 00:11:41,060
Right.

179
00:11:41,190 --> 00:11:48,360
I should have two more, but I don't have two more because I just with this one, I just shrink the

180
00:11:48,360 --> 00:11:54,140
size of the array for that particular player to 20 in a loop 20 times.

181
00:11:54,150 --> 00:11:54,630
That's it.

182
00:11:54,900 --> 00:11:55,960
Easy, easy fix.

183
00:11:56,550 --> 00:11:58,250
So that is working.

184
00:11:58,770 --> 00:12:02,230
So yeah, that is pretty much for this class.

185
00:12:02,750 --> 00:12:05,400
Now we need to announce the winner.

186
00:12:05,790 --> 00:12:06,200
Right.

187
00:12:07,410 --> 00:12:10,650
And the winner should have pop up here image.

188
00:12:10,840 --> 00:12:12,690
So this guy should have an image.

189
00:12:12,900 --> 00:12:17,290
If this is if this guy wins, the image should be on the other side.

190
00:12:17,310 --> 00:12:18,260
So thank you very much.

191
00:12:18,270 --> 00:12:19,440
I hope you enjoy this one.

192
00:12:20,430 --> 00:12:22,080
We achieved something great.

193
00:12:22,410 --> 00:12:23,690
I'm just going to recap it.

194
00:12:24,630 --> 00:12:31,800
If we create a scoreboard function and that scoreboard function is actually having a switch statement

195
00:12:32,460 --> 00:12:38,430
with a live player and based on the live player, because left player can be zero and one, we have

196
00:12:38,430 --> 00:12:39,600
two cases zero.

197
00:12:39,600 --> 00:12:44,040
And one, we have not going to be able to have any other case there.

198
00:12:44,070 --> 00:12:50,580
Now, if that is the case of zero one, first we set the block what we want to build the blocks and

199
00:12:50,580 --> 00:12:53,800
after that, a loop through the size of this one.

200
00:12:54,300 --> 00:13:03,030
Now, in order to stop overflowing, if the size is 22 in a hat and I want to have 20 blocks exact before

201
00:13:03,030 --> 00:13:08,790
that with this, if I just check it or even here, you can just check it here locally.

202
00:13:08,790 --> 00:13:15,180
I mean, inside this if but I'm going to do it here so you can check it even inside here.

203
00:13:15,180 --> 00:13:18,380
And we reset the sides back to twenty and we looked 20 times.

204
00:13:18,510 --> 00:13:19,790
So that is pretty much it.

205
00:13:20,280 --> 00:13:22,410
And what else we call the function.

206
00:13:22,410 --> 00:13:30,030
And also we create another variable called code block and that variable is actually holding the entire

207
00:13:30,270 --> 00:13:33,300
def def block here.

208
00:13:33,440 --> 00:13:33,790
All right.

209
00:13:34,260 --> 00:13:41,730
So entire def, that is with the so we attach every time and we're looping as many times as we have

210
00:13:41,730 --> 00:13:46,290
the array, as many times as the size of yeary.

211
00:13:46,560 --> 00:13:46,940
Right.

212
00:13:47,790 --> 00:13:51,740
So make sure that you change this one to one because it's not going to work.

213
00:13:52,170 --> 00:13:54,030
It's going to put for the other player.

214
00:13:54,060 --> 00:13:54,390
Right.

215
00:13:54,540 --> 00:13:56,590
So that is pretty much it for this lecture.

216
00:13:56,590 --> 00:13:57,380
I hope you enjoy it.

217
00:13:57,570 --> 00:13:58,500
I hope you like it.

218
00:13:58,500 --> 00:13:59,070
Please.

219
00:14:00,900 --> 00:14:06,390
If you don't understand, just watch it or try to figure out a little bit harder.

220
00:14:06,660 --> 00:14:07,770
Try to think a little bit harder.

221
00:14:07,800 --> 00:14:08,670
Why is this happening?

222
00:14:08,670 --> 00:14:10,500
And you will find the answer.

223
00:14:10,500 --> 00:14:10,830
Right.

224
00:14:11,130 --> 00:14:12,210
So thank you very much.

225
00:14:12,360 --> 00:14:13,860
And I will see you in the next one.