1
00:00:02,330 --> 00:00:03,920
Now that we do manage

2
00:00:03,920 --> 00:00:05,920
field selection correctly,

3
00:00:05,920 --> 00:00:08,150
we should finally implement our logic

4
00:00:08,150 --> 00:00:09,950
for determining a winner.

5
00:00:09,950 --> 00:00:12,100
And for this, let's quickly clarify

6
00:00:12,100 --> 00:00:14,123
when you win this game.

7
00:00:15,420 --> 00:00:19,720
Player one, if he or she has three items,

8
00:00:19,720 --> 00:00:23,890
so three times his or her symbol next to each other,

9
00:00:23,890 --> 00:00:26,350
for example, in a row,

10
00:00:26,350 --> 00:00:28,090
in this pattern here,

11
00:00:28,090 --> 00:00:30,800
player one would have won

12
00:00:30,800 --> 00:00:33,093
because we have three Xs in a row.

13
00:00:33,950 --> 00:00:35,610
The same would be true if you have

14
00:00:35,610 --> 00:00:37,233
three items in a column.

15
00:00:38,350 --> 00:00:40,520
But you also win if you have

16
00:00:40,520 --> 00:00:42,953
three items next to each other diagonally.

17
00:00:44,510 --> 00:00:47,323
And of course also from bottom left to top right.

18
00:00:48,320 --> 00:00:51,020
So therefore we'll have to check for all these conditions.

19
00:00:51,020 --> 00:00:53,420
And of course, we'll do that with help

20
00:00:53,420 --> 00:00:57,640
of our little gameData array full of arrays,

21
00:00:57,640 --> 00:01:01,223
which replicates the game field in JavaScript.

22
00:01:02,170 --> 00:01:06,783
Now in game.js, I want to add a brand new function.

23
00:01:07,760 --> 00:01:10,800
Let's say here, after startNewGame,

24
00:01:10,800 --> 00:01:13,760
before I have switchPlayer and selectGameField,

25
00:01:14,650 --> 00:01:17,690
which I will name checkForGameOver.

26
00:01:19,410 --> 00:01:21,050
The exact function position

27
00:01:21,050 --> 00:01:22,340
doesn't matter, by the way.

28
00:01:22,340 --> 00:01:24,860
You could also move it to the end.

29
00:01:24,860 --> 00:01:26,540
And actually, I will move it here

30
00:01:26,540 --> 00:01:28,483
so that we have a logical flow.

31
00:01:29,550 --> 00:01:33,290
So checkForGameOver should do what its name implies.

32
00:01:33,290 --> 00:01:35,180
Whenever we call this function,

33
00:01:35,180 --> 00:01:38,600
I want to check if one of our two players won.

34
00:01:38,600 --> 00:01:40,490
And for this, we can now simply have a look

35
00:01:40,490 --> 00:01:44,150
at the different combinations in our gameData array

36
00:01:44,150 --> 00:01:47,070
that will make a winner.

37
00:01:47,070 --> 00:01:50,130
And for that, we can start quite simple here.

38
00:01:50,130 --> 00:01:55,130
We could check if gameData zero zero,

39
00:01:55,770 --> 00:01:58,603
so the top left field,

40
00:01:59,460 --> 00:02:01,180
is equal to one,

41
00:02:01,180 --> 00:02:04,883
so player one owns the top left field.

42
00:02:06,020 --> 00:02:11,020
And if gameData zero one,

43
00:02:11,450 --> 00:02:14,400
which is the second item in the first row,

44
00:02:14,400 --> 00:02:17,603
this here, that is zero, one,

45
00:02:18,680 --> 00:02:21,513
if that is equal to one.

46
00:02:22,520 --> 00:02:26,840
And if gameData zero two,

47
00:02:26,840 --> 00:02:29,440
which is the last item here,

48
00:02:29,440 --> 00:02:32,570
so this item, that's zero, two

49
00:02:32,570 --> 00:02:34,510
because we access the first array

50
00:02:34,510 --> 00:02:36,890
and then the third item,

51
00:02:36,890 --> 00:02:38,843
if that is equal to one.

52
00:02:39,940 --> 00:02:42,890
And with this if-check, we would know

53
00:02:42,890 --> 00:02:47,890
that player one owns the entire first row.

54
00:02:47,960 --> 00:02:49,450
So the entire first row

55
00:02:49,450 --> 00:02:51,610
was selected by player one.

56
00:02:51,610 --> 00:02:53,710
And therefore, we know that player one

57
00:02:53,710 --> 00:02:56,210
did win in this case because player one

58
00:02:56,210 --> 00:02:58,273
has three items in a row.

59
00:03:00,890 --> 00:03:02,380
And in that case, we could say

60
00:03:02,380 --> 00:03:06,250
that checkForGameOver should maybe return

61
00:03:06,250 --> 00:03:11,150
either a string that says "Player one won"

62
00:03:11,150 --> 00:03:15,920
or we just return the ID of the player who won,

63
00:03:15,920 --> 00:03:18,290
in this case one.

64
00:03:18,290 --> 00:03:20,140
And player two would have the ID two.

65
00:03:21,570 --> 00:03:23,210
But if we do it like this,

66
00:03:23,210 --> 00:03:25,830
if we try to write if-conditions

67
00:03:25,830 --> 00:03:28,240
for all the possible combinations

68
00:03:28,240 --> 00:03:29,640
that we could have,

69
00:03:29,640 --> 00:03:33,200
then we are going to write a lot of code.

70
00:03:33,200 --> 00:03:36,770
And we especially have a lot of unnecessary complexity here,

71
00:03:36,770 --> 00:03:37,823
which we don't need.

72
00:03:38,710 --> 00:03:41,140
For that, let me show you how we would write

73
00:03:41,140 --> 00:03:44,680
the same condition for player two.

74
00:03:44,680 --> 00:03:47,030
Now I'm checking whether player two

75
00:03:47,030 --> 00:03:48,773
owns that first row.

76
00:03:49,690 --> 00:03:53,010
So it's the same logic as here just with player two.

77
00:03:53,010 --> 00:03:55,673
And then I return player two therefore.

78
00:03:56,532 --> 00:03:58,790
Now that is some duplicate code here,

79
00:03:58,790 --> 00:04:02,910
and it's only one of many chunks of code

80
00:04:02,910 --> 00:04:05,920
that we have to write if we follow this pattern.

81
00:04:05,920 --> 00:04:08,500
And it's also particularly unnecessary

82
00:04:08,500 --> 00:04:09,630
to write it like this,

83
00:04:09,630 --> 00:04:11,370
because the ID of the winner

84
00:04:11,370 --> 00:04:13,890
is already stored in gameData.

85
00:04:13,890 --> 00:04:16,060
So checking for the different IDs

86
00:04:16,060 --> 00:04:17,620
in these two code blocks,

87
00:04:17,620 --> 00:04:20,089
just to return the ID here like this then,

88
00:04:20,089 --> 00:04:21,423
is unnecessary.

89
00:04:22,350 --> 00:04:24,490
Instead, our first improvement here

90
00:04:24,490 --> 00:04:26,900
would be that we don't check

91
00:04:26,900 --> 00:04:29,620
whether this first field belongs to player one

92
00:04:29,620 --> 00:04:31,970
and the second field belongs to player one,

93
00:04:31,970 --> 00:04:34,530
to then return player one's ID.

94
00:04:34,530 --> 00:04:36,860
But if we instead simply check

95
00:04:36,860 --> 00:04:39,980
if the first field is owned by the same player

96
00:04:39,980 --> 00:04:41,970
as the second field,

97
00:04:41,970 --> 00:04:45,360
by saying gameData zero zero

98
00:04:45,360 --> 00:04:48,640
is equal to gameData zero one.

99
00:04:48,640 --> 00:04:51,680
And then I want to check if gameData zero one,

100
00:04:51,680 --> 00:04:54,080
so that second field in the first row,

101
00:04:54,080 --> 00:04:56,080
is equal to gameData zero two,

102
00:04:56,080 --> 00:04:58,493
so the last field in the first row.

103
00:05:00,160 --> 00:05:01,440
If I check it like this,

104
00:05:01,440 --> 00:05:04,620
I don't know whether it belongs to player one or two,

105
00:05:04,620 --> 00:05:07,690
but I know that all the fields in the first row

106
00:05:07,690 --> 00:05:10,230
are owned by the same player

107
00:05:10,230 --> 00:05:13,000
because they all have the same ID in it.

108
00:05:13,000 --> 00:05:14,060
That's what I'm checking

109
00:05:14,060 --> 00:05:16,740
by checking for equality here.

110
00:05:16,740 --> 00:05:20,880
And then, since I'm interested in the ID of the winner,

111
00:05:20,880 --> 00:05:24,700
I can simply return gameData zero zero,

112
00:05:24,700 --> 00:05:28,500
because in gameData, in this array full of arrays,

113
00:05:28,500 --> 00:05:31,030
we are storing player IDs.

114
00:05:31,030 --> 00:05:32,270
Keep that in mind.

115
00:05:32,270 --> 00:05:34,550
That's what we do in selectField.

116
00:05:34,550 --> 00:05:37,183
I insert my player IDs into gameData.

117
00:05:38,750 --> 00:05:41,130
So if I know that the entire first row

118
00:05:41,130 --> 00:05:43,430
is owned by the same player,

119
00:05:43,430 --> 00:05:47,060
I can return either field's data in that first row,

120
00:05:47,060 --> 00:05:50,060
and I do return that player ID.

121
00:05:50,060 --> 00:05:52,550
And that's a smarter way for checking

122
00:05:52,550 --> 00:05:55,870
whether the entire row is owned by the same player,

123
00:05:55,870 --> 00:05:58,080
to then return the ID of that player,

124
00:05:58,080 --> 00:06:00,163
since that player will be the winner.

125
00:06:01,040 --> 00:06:03,090
So this is an improvement.

126
00:06:03,090 --> 00:06:06,390
But still this logic has a flaw here.

127
00:06:06,390 --> 00:06:08,620
By just checking whether all the fields

128
00:06:08,620 --> 00:06:11,330
in the first row are equal or not,

129
00:06:11,330 --> 00:06:13,850
I am actually returning zero

130
00:06:13,850 --> 00:06:14,970
as a winner here

131
00:06:14,970 --> 00:06:17,380
because initially they are all equal,

132
00:06:17,380 --> 00:06:19,103
they are all zero.

133
00:06:19,960 --> 00:06:21,860
But zero should mean that the field

134
00:06:21,860 --> 00:06:24,330
is not occupied at all.

135
00:06:24,330 --> 00:06:26,490
So I don't just want to check for equality

136
00:06:26,490 --> 00:06:28,040
in all these fields here.

137
00:06:28,040 --> 00:06:30,430
I also want to make sure that the field values

138
00:06:30,430 --> 00:06:32,500
are greater than zero

139
00:06:32,500 --> 00:06:34,990
so that they are one or two

140
00:06:34,990 --> 00:06:36,683
for our two different players.

141
00:06:37,600 --> 00:06:40,250
And this can be achieved by, for example,

142
00:06:40,250 --> 00:06:43,500
checking whether gameData zero zero

143
00:06:43,500 --> 00:06:45,220
is greater than zero,

144
00:06:45,220 --> 00:06:47,883
and then checking for all these equalities.

145
00:06:49,100 --> 00:06:52,530
With that, we ensure that the overall condition here

146
00:06:52,530 --> 00:06:55,740
is only true if all fields are equal

147
00:06:55,740 --> 00:06:58,220
and they are not zero,

148
00:06:58,220 --> 00:06:59,820
so they are one or two

149
00:06:59,820 --> 00:07:02,370
or any other value higher than zero.

150
00:07:02,370 --> 00:07:04,820
But in this application, in this game here,

151
00:07:04,820 --> 00:07:08,723
we, of course, will only have one or two as our values.

152
00:07:10,360 --> 00:07:12,420
But with this, if I reformat this

153
00:07:12,420 --> 00:07:14,260
to make it a bit easier to read,

154
00:07:14,260 --> 00:07:15,690
we now have a check here

155
00:07:15,690 --> 00:07:17,470
that will ensure that we find out

156
00:07:17,470 --> 00:07:19,290
whether the entire first row

157
00:07:19,290 --> 00:07:21,870
is occupied by the same player.

158
00:07:21,870 --> 00:07:24,583
And then we return the ID of that player.

159
00:07:26,090 --> 00:07:27,930
So now with this logic,

160
00:07:27,930 --> 00:07:32,440
we are checking our first row for equality.

161
00:07:32,440 --> 00:07:34,010
So we check whether the first row

162
00:07:34,010 --> 00:07:36,123
is owned by player one or two.

163
00:07:37,320 --> 00:07:41,330
Now of course we have three rows, right,

164
00:07:41,330 --> 00:07:43,470
here in our gameData in our code.

165
00:07:43,470 --> 00:07:45,690
And of course also on the real game board,

166
00:07:45,690 --> 00:07:47,633
we have three rows.

167
00:07:48,710 --> 00:07:50,760
So of course we want to check all those rows.

168
00:07:50,760 --> 00:07:52,680
And what we could do for this

169
00:07:52,680 --> 00:07:55,410
is we could copy this if-statement

170
00:07:55,410 --> 00:07:57,610
and now just increment

171
00:07:57,610 --> 00:08:00,670
the first index that we access here

172
00:08:00,670 --> 00:08:04,260
for the row by one to one.

173
00:08:04,260 --> 00:08:06,603
And also do that here.

174
00:08:08,330 --> 00:08:11,310
With that, we are accessing the second item

175
00:08:11,310 --> 00:08:13,080
inside of gameData,

176
00:08:13,080 --> 00:08:16,780
which simply is this second array in gameData.

177
00:08:16,780 --> 00:08:19,660
And then we still go through all the values

178
00:08:19,660 --> 00:08:21,470
in that second array.

179
00:08:21,470 --> 00:08:22,830
That doesn't change.

180
00:08:22,830 --> 00:08:26,240
So this logic here stays the same.

181
00:08:26,240 --> 00:08:28,180
We still access the different fields

182
00:08:28,180 --> 00:08:30,540
in that inner array,

183
00:08:30,540 --> 00:08:34,440
but instead of checking the first inner array,

184
00:08:34,440 --> 00:08:35,640
as we did up there,

185
00:08:35,640 --> 00:08:38,490
we now check the second inner array,

186
00:08:38,490 --> 00:08:40,023
which is our second row.

187
00:08:41,820 --> 00:08:45,060
And then of course, if that is true,

188
00:08:45,060 --> 00:08:46,520
if we make it into this if-block,

189
00:08:46,520 --> 00:08:48,520
we want to return the player ID

190
00:08:48,520 --> 00:08:51,393
stored in the first item in the second row.

191
00:08:52,760 --> 00:08:54,030
Now that's how we could do it.

192
00:08:54,030 --> 00:08:56,270
And of course, should not be a surprise,

193
00:08:56,270 --> 00:08:59,640
we can repeat this for the last row

194
00:08:59,640 --> 00:09:02,913
as well, like that.

195
00:09:05,300 --> 00:09:07,995
But, if I zoom out here,

196
00:09:07,995 --> 00:09:12,873
do you notice something in this code here?

197
00:09:14,470 --> 00:09:16,810
In the end it's always the same code.

198
00:09:16,810 --> 00:09:19,430
The only thing that differs

199
00:09:19,430 --> 00:09:23,820
is the index that we access here at the beginning.

200
00:09:23,820 --> 00:09:26,410
So the inner array that we access.

201
00:09:26,410 --> 00:09:27,743
That differs.

202
00:09:29,010 --> 00:09:30,340
Since that's the case,

203
00:09:30,340 --> 00:09:33,390
this is a perfect scenario for a loop,

204
00:09:33,390 --> 00:09:36,600
for a regular for-loop, to be precise,

205
00:09:37,960 --> 00:09:40,800
because we can simply loop through the values

206
00:09:40,800 --> 00:09:42,250
zero, one and two,

207
00:09:42,250 --> 00:09:44,050
and then repeat this code

208
00:09:44,050 --> 00:09:47,230
with dynamic access to different indexes

209
00:09:47,230 --> 00:09:49,193
based on the current iteration.

210
00:09:50,430 --> 00:09:53,660
Hence, I will actually remove these two code blocks

211
00:09:53,660 --> 00:09:57,230
now that I showed you how we could do that.

212
00:09:57,230 --> 00:09:59,423
And instead write a for-loop.

213
00:10:00,260 --> 00:10:02,850
But now not a loop where I loop

214
00:10:02,850 --> 00:10:05,450
through multiple items in an array,

215
00:10:05,450 --> 00:10:07,720
but instead a regular for-loop

216
00:10:07,720 --> 00:10:10,070
where I create a helper variable,

217
00:10:10,070 --> 00:10:11,630
typically named i,

218
00:10:11,630 --> 00:10:13,993
which starts at a value of zero.

219
00:10:15,010 --> 00:10:19,590
Where I then loop as long as i is smaller than three

220
00:10:19,590 --> 00:10:22,660
or is smaller and equal than two.

221
00:10:22,660 --> 00:10:24,853
But here I'll go for a smaller three.

222
00:10:25,890 --> 00:10:29,190
And then I want to increment i by one

223
00:10:29,190 --> 00:10:30,553
after every iteration.

224
00:10:31,890 --> 00:10:34,370
And you learned about this kind of for-loop

225
00:10:34,370 --> 00:10:36,773
in one of the previous sections as well.

226
00:10:38,070 --> 00:10:40,450
And then we can move this if-check

227
00:10:40,450 --> 00:10:44,500
into our loop here and reformat,

228
00:10:44,500 --> 00:10:47,720
and now just change the hard-coded zero here

229
00:10:47,720 --> 00:10:52,720
in all these places for the i variable,

230
00:10:53,490 --> 00:10:56,050
which will be different for every iteration

231
00:10:56,920 --> 00:10:59,010
so that we dynamically access

232
00:10:59,010 --> 00:11:02,550
different rows in our gameData.

233
00:11:02,550 --> 00:11:05,933
That is what we can do here, like that.

234
00:11:08,690 --> 00:11:11,350
And with that, we're still checking all rows

235
00:11:11,350 --> 00:11:13,730
and we still determine whether one of these rows

236
00:11:13,730 --> 00:11:16,270
then belongs to one and the same player,

237
00:11:16,270 --> 00:11:19,063
but we do this with less code.

238
00:11:19,980 --> 00:11:22,080
And that's our finished logic

239
00:11:22,080 --> 00:11:25,740
for checking the rows

240
00:11:26,580 --> 00:11:28,070
for equality.

241
00:11:28,070 --> 00:11:30,010
So whether one of our three rows

242
00:11:30,010 --> 00:11:31,663
belongs to the same player.

243
00:11:33,520 --> 00:11:36,483
Now we also have to check the columns.

244
00:11:37,350 --> 00:11:41,000
And for this, we can simply grab this for-loop,

245
00:11:41,000 --> 00:11:42,750
copy and paste it,

246
00:11:42,750 --> 00:11:44,820
and just adjust it a little bit

247
00:11:44,820 --> 00:11:47,640
in our if-check condition here,

248
00:11:47,640 --> 00:11:50,430
because generally it's the same logic.

249
00:11:50,430 --> 00:11:53,000
Now we just want to check our three columns

250
00:11:53,000 --> 00:11:54,870
instead of our three rows,

251
00:11:54,870 --> 00:11:58,120
but still we have to loop through three items,

252
00:11:58,120 --> 00:12:01,230
but we now access different values in here,

253
00:12:01,230 --> 00:12:02,610
to be precise.

254
00:12:02,610 --> 00:12:04,410
Now, with that,

255
00:12:04,410 --> 00:12:07,970
I don't want to change my first index here.

256
00:12:07,970 --> 00:12:11,143
Instead, that should always be zero,

257
00:12:18,480 --> 00:12:20,070
like that.

258
00:12:20,070 --> 00:12:23,480
But it's the second index that should change now.

259
00:12:23,480 --> 00:12:24,860
So it's the second index,

260
00:12:24,860 --> 00:12:27,623
which I'll now turn into a dynamic index here.

261
00:12:28,880 --> 00:12:29,863
Like this.

262
00:12:30,860 --> 00:12:33,440
And here we now should use gameData one,

263
00:12:33,440 --> 00:12:34,733
gameData two.

264
00:12:36,210 --> 00:12:38,200
Now what's the idea behind this logic?

265
00:12:38,200 --> 00:12:39,540
What's happening here?

266
00:12:39,540 --> 00:12:43,010
Well, here, in this place,

267
00:12:43,010 --> 00:12:45,770
I'm always diving into the first row

268
00:12:45,770 --> 00:12:48,070
because with gameData zero

269
00:12:48,070 --> 00:12:50,650
I simply access the first item here

270
00:12:50,650 --> 00:12:52,560
in my gameData array.

271
00:12:52,560 --> 00:12:54,903
So I access this first inner array.

272
00:12:56,220 --> 00:13:00,940
Then, because I have i here as a dynamic index,

273
00:13:00,940 --> 00:13:04,230
this will be a value of zero, one or two,

274
00:13:04,230 --> 00:13:06,390
depending on the iteration.

275
00:13:06,390 --> 00:13:10,840
And hence, for this first row, which we access here,

276
00:13:10,840 --> 00:13:14,403
I will access the different items in that row.

277
00:13:16,980 --> 00:13:18,780
Now with that, I go through all the items

278
00:13:18,780 --> 00:13:19,890
in the first row,

279
00:13:19,890 --> 00:13:22,660
and then I compare that

280
00:13:22,660 --> 00:13:25,560
with this code to all the items

281
00:13:25,560 --> 00:13:28,420
in the second and third row,

282
00:13:28,420 --> 00:13:31,530
because here we dive into the second row,

283
00:13:31,530 --> 00:13:34,410
and here we dive into the third row.

284
00:13:34,410 --> 00:13:35,700
And then we still access

285
00:13:35,700 --> 00:13:37,420
all the different columns in there

286
00:13:37,420 --> 00:13:40,343
since we still use the dynamic i index here.

287
00:13:41,580 --> 00:13:43,000
And with that logic,

288
00:13:43,000 --> 00:13:44,940
we basically just have the opposite

289
00:13:44,940 --> 00:13:47,110
of what we're doing here.

290
00:13:47,110 --> 00:13:50,840
Here, we are going through all the rows

291
00:13:50,840 --> 00:13:53,580
and we keep the columns fixed.

292
00:13:53,580 --> 00:13:56,900
Here, we instead go for all the columns

293
00:13:56,900 --> 00:13:59,350
and we keep the rows fixed

294
00:13:59,350 --> 00:14:01,420
because the row data here

295
00:14:01,420 --> 00:14:03,940
is hard-coded and not dynamic.

296
00:14:03,940 --> 00:14:07,330
The column data is, that's our i here,

297
00:14:07,330 --> 00:14:09,343
the second index that we access.

298
00:14:10,930 --> 00:14:13,750
And therefore with this logic here

299
00:14:13,750 --> 00:14:18,750
we are checking the columns for equality.

300
00:14:19,920 --> 00:14:21,570
Now, with that, we should be able

301
00:14:21,570 --> 00:14:24,140
to determine whether we have a winner or not,

302
00:14:24,140 --> 00:14:27,730
if a row or a column

303
00:14:27,730 --> 00:14:30,380
is owned by the same player.

304
00:14:30,380 --> 00:14:32,070
So if you have a row or a column

305
00:14:32,070 --> 00:14:34,430
full of the same symbol.

306
00:14:34,430 --> 00:14:37,690
But we also need to check our two diagonals,

307
00:14:37,690 --> 00:14:39,260
top left to bottom right,

308
00:14:39,260 --> 00:14:41,113
and bottom left to top right.

309
00:14:42,610 --> 00:14:46,490
And for this, I'll add two additional if-checks,

310
00:14:46,490 --> 00:14:48,290
where in the first if-check,

311
00:14:48,290 --> 00:14:49,860
I use my gameData

312
00:14:49,860 --> 00:14:52,970
and I simply check the top left field,

313
00:14:52,970 --> 00:14:55,680
which has the indexes zero and zero,

314
00:14:55,680 --> 00:14:57,200
and I check if it's equal

315
00:14:57,200 --> 00:14:59,990
to the field in the middle,

316
00:14:59,990 --> 00:15:01,873
which has the indexes one, one.

317
00:15:02,990 --> 00:15:06,170
With one, one we access this second row,

318
00:15:06,170 --> 00:15:08,850
so the second element in our main array,

319
00:15:08,850 --> 00:15:10,860
and then with the second one,

320
00:15:10,860 --> 00:15:13,560
we access the second item in that inner array,

321
00:15:13,560 --> 00:15:15,810
and therefore the overall middle item

322
00:15:15,810 --> 00:15:17,700
in our matrix here,

323
00:15:17,700 --> 00:15:18,950
which we have in the end.

324
00:15:20,600 --> 00:15:23,330
And therefore, I check if the top left field

325
00:15:23,330 --> 00:15:24,973
is equal to the middle field,

326
00:15:25,920 --> 00:15:28,900
and I then want to check if that middle field

327
00:15:28,900 --> 00:15:31,660
is also equal to the bottom right field,

328
00:15:31,660 --> 00:15:33,640
which is our first diagonal.

329
00:15:33,640 --> 00:15:35,610
So here that is two, two,

330
00:15:35,610 --> 00:15:38,560
because of course with indexes two and two,

331
00:15:38,560 --> 00:15:42,430
I am going into the third row here,

332
00:15:42,430 --> 00:15:44,400
and then there the third element,

333
00:15:44,400 --> 00:15:46,473
so the bottom right element.

334
00:15:47,540 --> 00:15:50,400
With that, I am checking this diagonal.

335
00:15:50,400 --> 00:15:53,300
And of course, I also still want to check

336
00:15:53,300 --> 00:15:55,830
that the value is not just equal,

337
00:15:55,830 --> 00:15:58,620
but also greater than zero.

338
00:15:58,620 --> 00:16:00,100
That's still important.

339
00:16:00,100 --> 00:16:02,820
And therefore, this is now our check

340
00:16:02,820 --> 00:16:07,523
for diagonal top left to bottom right.

341
00:16:09,960 --> 00:16:12,665
And here, I then also want to return

342
00:16:12,665 --> 00:16:14,930
the winner ID, which for example,

343
00:16:14,930 --> 00:16:17,893
would be stored in gameData zero zero.

344
00:16:20,200 --> 00:16:22,480
And now we can repeat that logic

345
00:16:22,480 --> 00:16:25,200
and just adjust our indexes a little bit

346
00:16:25,200 --> 00:16:27,230
by copying this,

347
00:16:27,230 --> 00:16:28,700
to check for the diagonal

348
00:16:28,700 --> 00:16:32,940
from the bottom left to top right.

349
00:16:32,940 --> 00:16:34,910
So the other diagonal.

350
00:16:34,910 --> 00:16:38,470
Here, bottom left is the third row

351
00:16:38,470 --> 00:16:40,973
with index two, and then the first item,

352
00:16:42,400 --> 00:16:44,630
and we need that here as well.

353
00:16:44,630 --> 00:16:48,100
Then we still want to check the middle item, of course.

354
00:16:48,100 --> 00:16:50,220
And then I want to check if the middle item

355
00:16:50,220 --> 00:16:52,720
is equal to the top right item,

356
00:16:52,720 --> 00:16:55,700
which is in the first row, hence index zero,

357
00:16:55,700 --> 00:16:58,063
and then the last item there.

358
00:16:59,600 --> 00:17:00,930
And then we can, for example,

359
00:17:00,930 --> 00:17:03,380
return gameData two zero.

360
00:17:03,380 --> 00:17:06,343
With that, we're checking the bottom left to top right.

361
00:17:07,470 --> 00:17:09,839
And now we're checking all the different cases

362
00:17:09,839 --> 00:17:14,420
that we need here to determine who won this game.

363
00:17:14,420 --> 00:17:16,520
Now to verify whether that works,

364
00:17:16,520 --> 00:17:18,319
and if we need to add more to it,

365
00:17:18,319 --> 00:17:20,329
or if we have an error in there,

366
00:17:20,329 --> 00:17:22,890
we should now call checkForGameOver,

367
00:17:22,890 --> 00:17:25,940
and hence we'll then get back the ID of the winner,

368
00:17:25,940 --> 00:17:28,210
or we don't get back anything

369
00:17:28,210 --> 00:17:30,360
in case we have no winner.

370
00:17:30,360 --> 00:17:33,150
If we make it into neither of these if-checks,

371
00:17:33,150 --> 00:17:34,640
then we never return.

372
00:17:34,640 --> 00:17:37,290
So in that case, we don't have a winner.

373
00:17:37,290 --> 00:17:40,560
We could return zero in this case here

374
00:17:40,560 --> 00:17:42,410
as a default value at the end,

375
00:17:42,410 --> 00:17:44,633
to signal that we don't have a winner yet.

376
00:17:45,500 --> 00:17:47,800
And we can then use this winner ID

377
00:17:47,800 --> 00:17:50,090
to show a message to the user

378
00:17:50,090 --> 00:17:51,640
or anything like that.

379
00:17:51,640 --> 00:17:55,630
Actually, we do have our game over part here,

380
00:17:55,630 --> 00:17:57,543
which we eventually want to show.

381
00:17:58,550 --> 00:18:01,020
But before we show that, let's quickly verify

382
00:18:01,020 --> 00:18:03,790
whether it works by just logging the result

383
00:18:03,790 --> 00:18:05,143
to the console for now.

384
00:18:06,174 --> 00:18:10,147
For this here in selectGameField,

385
00:18:11,160 --> 00:18:13,600
I want to call checkForGameOver

386
00:18:13,600 --> 00:18:16,300
because whenever a field was selected,

387
00:18:16,300 --> 00:18:18,600
I want to check if we now have a winner,

388
00:18:18,600 --> 00:18:21,270
because whenever we have a new field selected,

389
00:18:21,270 --> 00:18:23,363
we could potentially have a winner.

390
00:18:24,540 --> 00:18:27,450
So therefore here, before I switch my player,

391
00:18:27,450 --> 00:18:30,090
I will call checkForGameOver

392
00:18:30,090 --> 00:18:33,853
and I will get back my winner ID here.

393
00:18:34,820 --> 00:18:36,370
Zero if we have no winner,

394
00:18:36,370 --> 00:18:38,120
one if player one won,

395
00:18:38,120 --> 00:18:40,430
and two if player two won.

396
00:18:40,430 --> 00:18:43,540
And I will just console log the winner ID here.

397
00:18:43,540 --> 00:18:46,093
Soon we will do more, but for the moment that's it.

398
00:18:48,570 --> 00:18:51,520
With all of that, if we go back and reload,

399
00:18:51,520 --> 00:18:54,150
open the console, let's test this.

400
00:18:54,150 --> 00:18:58,020
If I make player one with the X

401
00:18:58,910 --> 00:19:00,810
own the entire first row,

402
00:19:00,810 --> 00:19:03,110
indeed here I get one.

403
00:19:03,110 --> 00:19:04,990
Before I always got zero

404
00:19:04,990 --> 00:19:06,730
as long as we didn't have a winner.

405
00:19:06,730 --> 00:19:08,720
Now that the first row is occupied,

406
00:19:08,720 --> 00:19:09,553
I get one.

407
00:19:10,660 --> 00:19:12,010
Let's reload and also check

408
00:19:12,010 --> 00:19:14,250
for the first column here.

409
00:19:14,250 --> 00:19:15,500
And we also get one

410
00:19:15,500 --> 00:19:17,960
as soon as the first column is occupied

411
00:19:17,960 --> 00:19:19,720
by winner one.

412
00:19:19,720 --> 00:19:21,660
Now I also want to be super safe

413
00:19:21,660 --> 00:19:24,010
and check the other combinations.

414
00:19:24,010 --> 00:19:25,823
Middle column works.

415
00:19:26,690 --> 00:19:29,300
And let's now check the last column here.

416
00:19:29,300 --> 00:19:30,210
That also works.

417
00:19:30,210 --> 00:19:32,940
We get one as soon as it's selected.

418
00:19:32,940 --> 00:19:35,830
Let's also check the other rows.

419
00:19:35,830 --> 00:19:37,223
Middle row works.

420
00:19:38,530 --> 00:19:40,460
Last row works.

421
00:19:40,460 --> 00:19:43,000
And let's check the diagonals.

422
00:19:43,000 --> 00:19:46,360
So here I'm going for top left to bottom right.

423
00:19:46,360 --> 00:19:47,250
Seems to work.

424
00:19:47,250 --> 00:19:50,040
I get one as soon as it's selected.

425
00:19:50,040 --> 00:19:53,750
And bottom left to top right also works.

426
00:19:53,750 --> 00:19:56,560
Now of course it will also work if player two wins.

427
00:19:56,560 --> 00:20:00,470
Let's say we make player two own the middle column,

428
00:20:00,470 --> 00:20:02,890
then we get two as a result

429
00:20:02,890 --> 00:20:04,380
as soon as that's the case,

430
00:20:04,380 --> 00:20:07,500
since the ID of the winner then is two.

431
00:20:07,500 --> 00:20:11,250
And that should also work for the diagonal, of course.

432
00:20:11,250 --> 00:20:12,240
Yeah.

433
00:20:12,240 --> 00:20:13,453
So that's looking good.

434
00:20:14,320 --> 00:20:17,190
But there is one case that we're not handling

435
00:20:17,190 --> 00:20:18,483
and that's a draw.

436
00:20:19,460 --> 00:20:22,710
Let's say we actually

437
00:20:22,710 --> 00:20:24,820
do end up in a draw here.

438
00:20:24,820 --> 00:20:26,450
And for that, let me just make sure

439
00:20:26,450 --> 00:20:28,053
that I don't mess up here.

440
00:20:30,450 --> 00:20:31,960
Yeah, like this.

441
00:20:31,960 --> 00:20:34,250
In this case we have no winner.

442
00:20:34,250 --> 00:20:36,970
And hence we only get zeros here.

443
00:20:36,970 --> 00:20:38,960
We never get any our winner ID

444
00:20:38,960 --> 00:20:40,513
because we don't have a winner.

445
00:20:41,500 --> 00:20:44,910
Now, of course, we also want to handle this case

446
00:20:44,910 --> 00:20:46,410
that the game is over

447
00:20:46,410 --> 00:20:48,900
because no more fields can be selected,

448
00:20:48,900 --> 00:20:51,220
but we don't have a winner.

449
00:20:51,220 --> 00:20:54,060
And there are various ways of handling this case.

450
00:20:54,060 --> 00:20:56,960
The easiest approach probably

451
00:20:56,960 --> 00:21:00,310
is to keep track of the current round.

452
00:21:00,310 --> 00:21:02,050
And whenever we select a field,

453
00:21:02,050 --> 00:21:04,770
we increment this round by one.

454
00:21:04,770 --> 00:21:07,880
And as soon as we reached round nine,

455
00:21:07,880 --> 00:21:09,470
and that round is over

456
00:21:09,470 --> 00:21:11,620
because we have nine fields in total,

457
00:21:11,620 --> 00:21:14,730
then we know if no winner was detected

458
00:21:14,730 --> 00:21:17,043
up to this point, we have a draw.

459
00:21:18,620 --> 00:21:21,010
For this in our code, back in app.js,

460
00:21:21,010 --> 00:21:23,320
we can add a new variable,

461
00:21:23,320 --> 00:21:25,880
which we could name currentRound.

462
00:21:25,880 --> 00:21:27,680
And initially that's one, of course,

463
00:21:27,680 --> 00:21:29,823
because we start in round one.

464
00:21:30,900 --> 00:21:35,540
In game.js, we can now use this currentRound variable,

465
00:21:35,540 --> 00:21:37,490
which we just added.

466
00:21:37,490 --> 00:21:39,350
In checkForGameOver,

467
00:21:39,350 --> 00:21:42,550
here, after going through all the other if-checks,

468
00:21:42,550 --> 00:21:46,150
I also want to check if currentRound

469
00:21:46,150 --> 00:21:48,710
is equal to nine,

470
00:21:48,710 --> 00:21:52,480
which means we exhausted all our rounds.

471
00:21:52,480 --> 00:21:53,960
And in this case,

472
00:21:53,960 --> 00:21:57,100
if we are here at the end of checkForGameOver,

473
00:21:57,100 --> 00:22:00,460
which we only are if we have no other winner,

474
00:22:00,460 --> 00:22:03,040
we know since we are in round nine,

475
00:22:03,040 --> 00:22:04,460
there won't be a winner.

476
00:22:04,460 --> 00:22:06,220
There is a draw.

477
00:22:06,220 --> 00:22:08,870
And in that case, we could return minus one

478
00:22:08,870 --> 00:22:10,903
as a value for a draw.

479
00:22:11,870 --> 00:22:15,410
So we return zero if we still have rounds left,

480
00:22:15,410 --> 00:22:17,450
and we simply don't have a winner yet,

481
00:22:17,450 --> 00:22:19,760
but the game is also not over yet.

482
00:22:19,760 --> 00:22:22,920
And we return minus one, if we have no winner,

483
00:22:22,920 --> 00:22:25,890
but the game is over because we exhausted all rounds,

484
00:22:25,890 --> 00:22:28,763
and then minus one signals that we'll have a draw.

485
00:22:30,280 --> 00:22:32,133
So that's one way of handling this.

486
00:22:34,240 --> 00:22:35,870
Now, of course, for this to work,

487
00:22:35,870 --> 00:22:37,990
we also need to change currentRound

488
00:22:37,990 --> 00:22:39,180
because it's one initially,

489
00:22:39,180 --> 00:22:41,200
but it never changes at the moment.

490
00:22:41,200 --> 00:22:43,960
And that means that whenever we switched a player

491
00:22:43,960 --> 00:22:46,740
right before we do that, or after we did that,

492
00:22:46,740 --> 00:22:48,950
we also want to set currentRound equal

493
00:22:48,950 --> 00:22:50,870
to currentRound plus one.

494
00:22:50,870 --> 00:22:52,520
And of course we can also shorten this

495
00:22:52,520 --> 00:22:54,570
to just currentRound plus plus,

496
00:22:54,570 --> 00:22:56,110
as you learned.

497
00:22:56,110 --> 00:22:58,060
Both works.

498
00:22:58,060 --> 00:23:00,370
And with that, we're changing the currentRound

499
00:23:00,370 --> 00:23:01,710
after every iteration.

500
00:23:01,710 --> 00:23:04,653
And now we should also handle that draw case.

501
00:23:05,620 --> 00:23:07,840
So now with that, if I, again, check this

502
00:23:07,840 --> 00:23:11,323
and I'll try not to win here,

503
00:23:12,240 --> 00:23:15,810
so let me quickly do that.

504
00:23:15,810 --> 00:23:16,643
Yeah.

505
00:23:16,643 --> 00:23:19,490
Then I get minus one in the draw case.

506
00:23:19,490 --> 00:23:21,550
So now we're also handling this

507
00:23:21,550 --> 00:23:23,140
and therefore now with that,

508
00:23:23,140 --> 00:23:25,780
we are now checking whether the game is over

509
00:23:25,780 --> 00:23:27,300
or not successfully,

510
00:23:27,300 --> 00:23:29,710
and we are determining the correct winner

511
00:23:29,710 --> 00:23:30,943
or a draw.

512
00:23:32,000 --> 00:23:34,140
And hence we got this logic in place

513
00:23:34,140 --> 00:23:36,940
and therefore we are now almost done

514
00:23:36,940 --> 00:23:39,060
with this demo website

515
00:23:39,060 --> 00:23:40,860
and with this game here.

516
00:23:40,860 --> 00:23:43,400
Now that we have a way of finding a winner,

517
00:23:43,400 --> 00:23:45,760
we now just also want to make sure

518
00:23:45,760 --> 00:23:47,760
that we output some information

519
00:23:47,760 --> 00:23:50,090
about this winner on this screen

520
00:23:50,090 --> 00:23:53,330
so that we show this game over article here,

521
00:23:53,330 --> 00:23:58,190
and then tell the user who won here,

522
00:23:58,190 --> 00:23:59,960
and that we then also handle

523
00:23:59,960 --> 00:24:01,800
this Start New Game button

524
00:24:01,800 --> 00:24:04,010
in case we had a game before

525
00:24:04,010 --> 00:24:07,710
so that we then reset the game appropriately.

526
00:24:07,710 --> 00:24:09,563
That's what we'll need to do next.