1 00:00:02,160 --> 00:00:04,330 So let's not add a functionality 2 00:00:04,330 --> 00:00:07,300 for showing this game-over article here, 3 00:00:07,300 --> 00:00:10,540 which then also prompts players to start a new game 4 00:00:10,540 --> 00:00:11,753 if they want to. 5 00:00:12,751 --> 00:00:15,830 Now, for this, we already have this article, 6 00:00:15,830 --> 00:00:18,720 but at the moment, thanks to our styling, 7 00:00:18,720 --> 00:00:23,000 since it has the id game-over it's hidden. 8 00:00:23,000 --> 00:00:25,440 If we look forward the game-over id selector, 9 00:00:25,440 --> 00:00:26,623 we have display: none. 10 00:00:27,920 --> 00:00:30,730 As soon as we changed this to display: block, 11 00:00:30,730 --> 00:00:33,610 this will show up and then we just need to make sure 12 00:00:33,610 --> 00:00:37,790 that we set the player name correctly here. 13 00:00:37,790 --> 00:00:41,300 Alternatively, we simply replace the entire text content 14 00:00:41,300 --> 00:00:42,933 off this h2 element. 15 00:00:44,200 --> 00:00:47,620 To achieve all of that, I'll go back into game.js, 16 00:00:47,620 --> 00:00:49,110 and then maybe at the bottom, 17 00:00:49,110 --> 00:00:53,110 I'll add another new function endGame 18 00:00:53,990 --> 00:00:58,990 where I expect to get the winnerId as a parameter value. 19 00:01:00,090 --> 00:01:02,610 So that should be passed in by the place 20 00:01:02,610 --> 00:01:05,403 where we determined that the game is over. 21 00:01:06,290 --> 00:01:07,620 And then in here, 22 00:01:07,620 --> 00:01:10,967 I wanna show this gameOverElement. 23 00:01:11,860 --> 00:01:12,910 For this, I'll, first of all, 24 00:01:12,910 --> 00:01:15,414 get access to that element here in app.js. 25 00:01:15,414 --> 00:01:18,430 There where I also get access to other elements, 26 00:01:18,430 --> 00:01:21,400 I'll get access to the gameOverElement 27 00:01:21,400 --> 00:01:25,272 by using document.getElementById game-over 28 00:01:25,272 --> 00:01:30,272 because game-over, this id here, is the id 29 00:01:30,430 --> 00:01:32,603 I assign here to this article. 30 00:01:34,461 --> 00:01:37,510 So with that, we have to gameOverElement here. 31 00:01:37,510 --> 00:01:41,060 And in game.js, we can now use this gameOverElement 32 00:01:41,060 --> 00:01:42,590 to change its style 33 00:01:42,590 --> 00:01:46,763 and their display style to block, like this. 34 00:01:47,720 --> 00:01:52,371 This will now show the gameOverElement if the game is over. 35 00:01:52,371 --> 00:01:54,650 Now, that's not all of course though. 36 00:01:54,650 --> 00:01:59,650 I also instead want to output the player name. 37 00:02:00,750 --> 00:02:04,640 And for this, I wanna use this span 38 00:02:04,640 --> 00:02:08,620 which I have here in my h2 element. 39 00:02:08,620 --> 00:02:10,586 And there are various ways of getting access. 40 00:02:10,586 --> 00:02:13,990 We could of course get it by id, 41 00:02:13,990 --> 00:02:17,949 but I actually will use gameOverElement. 42 00:02:17,949 --> 00:02:20,542 And then the firstElementChild, 43 00:02:20,542 --> 00:02:23,590 which will be this h2 element 44 00:02:23,590 --> 00:02:24,881 since that's the first element 45 00:02:24,881 --> 00:02:28,066 inside of the gameOverElement. 46 00:02:28,066 --> 00:02:30,778 And then I'm interested in the firstElementChild 47 00:02:30,778 --> 00:02:35,350 inside of that h2 element, which will be this span. 48 00:02:35,350 --> 00:02:38,000 So I will now access firstElementChild here 49 00:02:38,000 --> 00:02:41,340 on this firstElementChild to get access to the span 50 00:02:41,340 --> 00:02:44,830 in the h2 element in the gameOverElement. 51 00:02:44,830 --> 00:02:46,840 And then I'll set the text content of that 52 00:02:46,840 --> 00:02:48,983 to the name of the player who won. 53 00:02:49,954 --> 00:02:51,030 Now, for that, of course, 54 00:02:51,030 --> 00:02:53,260 we need to find out which name that is. 55 00:02:53,260 --> 00:02:55,593 And for this, we can utilize this winnerId. 56 00:02:56,500 --> 00:03:00,760 This will be one or two based on which player it is. 57 00:03:00,760 --> 00:03:03,520 And now it's important to keep in mind that in app.js, 58 00:03:03,520 --> 00:03:06,002 we had this players array where the first item 59 00:03:06,002 --> 00:03:09,380 is player one and the second item is player two. 60 00:03:09,380 --> 00:03:10,861 So we can use that winnerId, 61 00:03:10,861 --> 00:03:14,520 which is one or two and deduct one, 62 00:03:14,520 --> 00:03:17,920 so that we get zero or one to access the data 63 00:03:17,920 --> 00:03:19,743 for the player who won. 64 00:03:21,140 --> 00:03:22,820 And that's what I'll do here. 65 00:03:22,820 --> 00:03:27,790 I'll get my winnerName by accessing players 66 00:03:27,790 --> 00:03:30,920 and then winnerId minus one, 67 00:03:30,920 --> 00:03:33,120 since winnerId is one or two. 68 00:03:33,120 --> 00:03:36,903 And we need zero or one to access the items in array. 69 00:03:38,040 --> 00:03:40,160 And then .name. 70 00:03:40,160 --> 00:03:41,690 And then it's this winnerName, 71 00:03:41,690 --> 00:03:44,763 which I wanna insert here in this span. 72 00:03:46,420 --> 00:03:49,610 Now, of course, we could also have a draw though. 73 00:03:49,610 --> 00:03:53,248 And in that case, we won't have a winnerName. 74 00:03:53,248 --> 00:03:55,040 For this scenario, 75 00:03:55,040 --> 00:04:00,040 I'll check if winnerId is greater than zero, 76 00:04:00,440 --> 00:04:02,370 which means we won't have a draw 77 00:04:02,370 --> 00:04:06,780 because a draw is signaled by returning minus one. 78 00:04:06,780 --> 00:04:09,150 And I'll then only I'll put the winnerName 79 00:04:09,150 --> 00:04:11,600 if we are having a winner. 80 00:04:11,600 --> 00:04:14,680 So if winnerId is greater than zero, 81 00:04:14,680 --> 00:04:18,300 else if it effectively is minus one, 82 00:04:18,300 --> 00:04:20,887 since this is the only option we'll have in this place. 83 00:04:20,887 --> 00:04:25,500 I instead wanna basically output it's a draw. 84 00:04:25,500 --> 00:04:28,128 And for this I'll then use the firstElementChild 85 00:04:28,128 --> 00:04:29,893 of the gameOverElement, which is this h2 element 86 00:04:33,430 --> 00:04:36,300 and replace the entire text content in there, 87 00:04:36,300 --> 00:04:39,720 including that span with another text 88 00:04:39,720 --> 00:04:41,890 where I say it's a draw. 89 00:04:41,890 --> 00:04:46,890 So I'll say textContent equals It\'s a draw. 90 00:04:50,250 --> 00:04:53,440 This backward slash single quote here, by the way, 91 00:04:53,440 --> 00:04:57,381 is required to escape that single quote in that string, 92 00:04:57,381 --> 00:05:00,300 which is needed to output the single quote 93 00:05:00,300 --> 00:05:03,200 as a character here, instead of telling JavaScript 94 00:05:03,200 --> 00:05:06,670 that the string should end here, because it shouldn't. 95 00:05:06,670 --> 00:05:08,210 Without the backward slash, 96 00:05:08,210 --> 00:05:10,890 this single quote would be interpreted 97 00:05:10,890 --> 00:05:12,360 as the end of the string, 98 00:05:12,360 --> 00:05:14,346 and hence this here would be invalid code, 99 00:05:14,346 --> 00:05:16,100 and that's not what I want. 100 00:05:16,100 --> 00:05:18,426 Hence, with the backward slash in front of it, 101 00:05:18,426 --> 00:05:21,511 that's a special syntax that signals JavaScript 102 00:05:21,511 --> 00:05:25,200 that this single quote is not there to end the string, 103 00:05:25,200 --> 00:05:28,440 but instead we just wanna have the single quote character 104 00:05:28,440 --> 00:05:29,573 in that string. 105 00:05:30,520 --> 00:05:32,973 With that I'm outputting, it's a draw here. 106 00:05:34,440 --> 00:05:35,697 And now with that, 107 00:05:35,697 --> 00:05:39,460 the endGame function should work correctly. 108 00:05:39,460 --> 00:05:42,050 Now, we wanna execute this function 109 00:05:42,050 --> 00:05:44,220 whenever we do have a winner. 110 00:05:44,220 --> 00:05:48,559 So in selectGameField where we are executing 111 00:05:48,559 --> 00:05:52,927 checkForGameOver, I now wanna execute endGame 112 00:05:52,927 --> 00:05:55,530 if we do have a winner. 113 00:05:55,530 --> 00:05:57,480 Now, when do we have a winner? 114 00:05:57,480 --> 00:06:01,900 Whenever winnerId is anything but zero. 115 00:06:01,900 --> 00:06:05,660 Because in checkForGameOver, we are returning zero 116 00:06:05,660 --> 00:06:08,827 if we have neither a draw nor a winner. 117 00:06:08,827 --> 00:06:12,820 So in all our cases, where this does not return zero, 118 00:06:12,820 --> 00:06:15,780 we have a winner or a draw. 119 00:06:15,780 --> 00:06:18,800 So here, after calling checkForGameOver, 120 00:06:18,800 --> 00:06:22,760 we can check if winnerId is not equal to zero. 121 00:06:22,760 --> 00:06:25,550 So it's different from zero, and in that case, 122 00:06:25,550 --> 00:06:29,265 I then wanna call endGame and simply forward winnerId 123 00:06:29,265 --> 00:06:31,473 as a value to endGame. 124 00:06:32,490 --> 00:06:37,490 Because the endGame function wants a winnerId parameter. 125 00:06:37,700 --> 00:06:42,700 And hence, I forward the winnerId value that I got here. 126 00:06:43,120 --> 00:06:45,150 Of course, that it's called winnerId 127 00:06:45,150 --> 00:06:49,320 in both places as a parameter in endGame 128 00:06:49,320 --> 00:06:53,236 and in the place where we call endGame is a coincidence, 129 00:06:53,236 --> 00:06:56,970 you don't have to use winnerId inside and outside 130 00:06:56,970 --> 00:06:57,870 of the function. 131 00:06:57,870 --> 00:06:59,860 These are two independent names, 132 00:06:59,860 --> 00:07:02,330 but of course it's the same value that we use. 133 00:07:02,330 --> 00:07:03,720 And hence, using the same name, 134 00:07:03,720 --> 00:07:07,683 kind of makes sense to describe that value correctly. 135 00:07:09,120 --> 00:07:10,860 So with that, we're calling endGame 136 00:07:10,860 --> 00:07:12,760 if we have a winner or draw, 137 00:07:12,760 --> 00:07:14,563 and hence, I now wanna test this. 138 00:07:15,480 --> 00:07:18,250 For that, I will actually assign player names here 139 00:07:18,250 --> 00:07:21,210 so that I can verify whether the correct player name 140 00:07:21,210 --> 00:07:23,423 is being output in the game over screen. 141 00:07:24,340 --> 00:07:27,410 And then here I'll click on Start New Game. 142 00:07:27,410 --> 00:07:29,610 So that it's my turn, Max. 143 00:07:29,610 --> 00:07:32,420 And now I simply start winning here. 144 00:07:32,420 --> 00:07:33,930 And let's say, as Max, 145 00:07:33,930 --> 00:07:37,870 I now win by occupying the entire first column. 146 00:07:37,870 --> 00:07:40,993 Indeed, I get You won, Max, thereafter. 147 00:07:42,540 --> 00:07:46,160 Now, if I reload and I quickly try this again, 148 00:07:46,160 --> 00:07:49,770 and this time I let Manu win 149 00:07:49,770 --> 00:07:54,770 by, let's say, giving him this diagonal here, 150 00:07:56,230 --> 00:07:57,873 we get You won, Manu. 151 00:07:59,080 --> 00:08:02,800 Now, let's also check for a draw real quick here. 152 00:08:02,800 --> 00:08:06,943 Again, I'll do my best to not win here. 153 00:08:11,200 --> 00:08:13,093 Yeah, then we get It's a draw! 154 00:08:14,002 --> 00:08:17,850 So that's not all the working as expected. 155 00:08:17,850 --> 00:08:20,097 And with that, I now just wanna make sure 156 00:08:20,097 --> 00:08:22,720 that this Start New Game button 157 00:08:22,720 --> 00:08:25,200 then also does start a new game 158 00:08:25,200 --> 00:08:28,363 and does reset that field, appropriately. 159 00:08:29,310 --> 00:08:31,401 Now, for that, to reset that field, 160 00:08:31,401 --> 00:08:33,610 I'll add a new function 161 00:08:33,610 --> 00:08:35,820 and I could add it here at the very bottom, 162 00:08:35,820 --> 00:08:38,390 but I'll actually add it here at the very top, 163 00:08:38,390 --> 00:08:41,669 since this logically belongs to startNewGame. 164 00:08:41,669 --> 00:08:44,210 For me, and hence, it makes more sense to place it 165 00:08:44,210 --> 00:08:47,610 close to startNewGame, not because it's required. 166 00:08:47,610 --> 00:08:49,910 Technically, but because that can make it easier 167 00:08:49,910 --> 00:08:52,121 to find those related functions. 168 00:08:52,121 --> 00:08:55,167 And I'll name this function resetGameStatus. 169 00:08:56,508 --> 00:08:58,930 Because we'll have to do some resetting, 170 00:08:58,930 --> 00:09:00,850 if we had a game in the past 171 00:09:00,850 --> 00:09:03,346 and we now wanna start a new game. 172 00:09:03,346 --> 00:09:05,940 It's not required when we start a new game 173 00:09:05,940 --> 00:09:08,960 for the first time, but if we had a game already, 174 00:09:08,960 --> 00:09:11,500 we, of course, wanna remove that game over box, 175 00:09:11,500 --> 00:09:13,570 we wanna clear that field here, 176 00:09:13,570 --> 00:09:15,930 and we also wanna reset all the data 177 00:09:15,930 --> 00:09:19,770 like the currentRound, and this internal game field, 178 00:09:19,770 --> 00:09:21,023 which we are managing. 179 00:09:22,290 --> 00:09:25,640 And they offer indeed, that's what I'll do here. 180 00:09:25,640 --> 00:09:29,310 I will, for example, sets the activePlayer, 181 00:09:29,310 --> 00:09:31,940 which initially is zero here, 182 00:09:31,940 --> 00:09:35,190 but which changes whenever we switched to player 183 00:09:35,190 --> 00:09:37,883 back to the initial value of zero. 184 00:09:39,160 --> 00:09:41,950 I will also set the currentRound back to one 185 00:09:41,950 --> 00:09:43,793 if we reset the game. 186 00:09:44,990 --> 00:09:48,410 I will also go to the gameOverElement. 187 00:09:48,410 --> 00:09:52,608 And there, I wanna set the firstElementChild. 188 00:09:52,608 --> 00:09:57,608 So this h2 element, back to the starting content here, 189 00:09:59,180 --> 00:10:02,080 which includes a HTML element. 190 00:10:02,080 --> 00:10:03,710 And therefor, I will actually do this 191 00:10:03,710 --> 00:10:06,270 by using the innerHTML property 192 00:10:06,270 --> 00:10:09,763 you learned about before in this course, like this. 193 00:10:10,997 --> 00:10:14,530 By doing that, we don't just set some text content, 194 00:10:14,530 --> 00:10:17,080 but instead we can set some rich content 195 00:10:17,080 --> 00:10:20,300 that also may include HTML elements 196 00:10:20,300 --> 00:10:23,020 that will be treated as such. 197 00:10:23,020 --> 00:10:26,240 And I need that, I need that span here again, 198 00:10:26,240 --> 00:10:29,953 so that later, if a second game is over and it ends, 199 00:10:29,953 --> 00:10:34,530 we can find this span here with this code, 200 00:10:34,530 --> 00:10:38,310 where we rely on that span in that h2 element 201 00:10:38,310 --> 00:10:39,980 to set the winnerName. 202 00:10:42,046 --> 00:10:44,790 So that's why I reset it like this. 203 00:10:44,790 --> 00:10:47,960 And of course, then I also wanna hide the overall 204 00:10:47,960 --> 00:10:52,430 gameOverElement by setting style.displayed back to none. 205 00:10:54,350 --> 00:10:57,050 Of course, I also wanna reset this game field 206 00:10:57,050 --> 00:11:00,950 and get rid of all the symbols and selections here. 207 00:11:00,950 --> 00:11:03,689 And I also wanna reset my gameData here, 208 00:11:03,689 --> 00:11:05,440 and we can combine that. 209 00:11:05,440 --> 00:11:08,200 And for this, we can write a nested for loop here 210 00:11:08,200 --> 00:11:10,610 where we loop through all the rows and columns 211 00:11:10,610 --> 00:11:12,651 of our gameData. 212 00:11:12,651 --> 00:11:16,170 And we have a regular for loop here as we had it before, 213 00:11:16,170 --> 00:11:19,610 but now a for loop with a for loop inside of it, 214 00:11:19,610 --> 00:11:21,910 which can be very useful if you have arrays 215 00:11:21,910 --> 00:11:24,648 inside of an array and you wanna go through all the items 216 00:11:24,648 --> 00:11:29,106 in all the arrays inside off that outer array. 217 00:11:29,106 --> 00:11:31,990 For that, we'll need two helper variables. 218 00:11:31,990 --> 00:11:35,580 And you typically name your first helper variable i, 219 00:11:35,580 --> 00:11:38,850 and then the second helper variable j. 220 00:11:38,850 --> 00:11:40,920 It's not a must do, it's just a convention 221 00:11:40,920 --> 00:11:42,020 which you'll often see. 222 00:11:42,020 --> 00:11:44,113 And hence, I'll use it here as well. 223 00:11:45,240 --> 00:11:48,400 And now with that, we're looping through all the items 224 00:11:48,400 --> 00:11:50,083 here in gameData. 225 00:11:52,144 --> 00:11:56,608 And now that, we can reset gameData, which is useful. 226 00:11:56,608 --> 00:12:00,690 And we can then also reset what we see on the screen. 227 00:12:00,690 --> 00:12:03,373 So the real gameData that is shown here. 228 00:12:04,240 --> 00:12:06,850 Now, let me start with the virtual gameData. 229 00:12:06,850 --> 00:12:08,540 For that, here we can then access 230 00:12:08,540 --> 00:12:11,140 the different fields with i and j 231 00:12:11,140 --> 00:12:13,710 so that we access all the elements in there, 232 00:12:13,710 --> 00:12:16,010 in all the nested arrays. 233 00:12:16,010 --> 00:12:20,020 And I set it back to zero, so that the overall field 234 00:12:20,020 --> 00:12:22,653 is set back to the initial state we had here. 235 00:12:23,560 --> 00:12:28,030 And then of course, I also wanna reset that real field 236 00:12:28,030 --> 00:12:29,173 that we have here. 237 00:12:30,954 --> 00:12:33,920 And we have access to that real game board 238 00:12:33,920 --> 00:12:37,862 through that gameBoardElement here in app.js, 239 00:12:37,862 --> 00:12:41,270 where we select the element with id game-board, 240 00:12:41,270 --> 00:12:43,033 which is this ordered list here. 241 00:12:43,990 --> 00:12:46,820 And in there, we have all those list items. 242 00:12:46,820 --> 00:12:50,679 And we can utilize this and use that gameBoardElement 243 00:12:50,679 --> 00:12:53,238 to get access to all its children, 244 00:12:53,238 --> 00:12:56,400 whoops, children, which will also be an array. 245 00:12:56,400 --> 00:12:59,240 And it will be an array full of all those list items 246 00:12:59,240 --> 00:13:01,072 in that order list. 247 00:13:01,072 --> 00:13:04,110 However, that's not an array of arrays, 248 00:13:04,110 --> 00:13:07,290 but only a single array with nine items. 249 00:13:07,290 --> 00:13:10,150 So i and j don't help us here. 250 00:13:10,150 --> 00:13:13,170 Instead, what I'll do is I'll add a helper variable 251 00:13:13,170 --> 00:13:18,170 gameBoardIndex, which starts at zero. 252 00:13:18,300 --> 00:13:21,520 And I'll use that to access the different list items here 253 00:13:21,520 --> 00:13:24,121 with that gameBoardIndex, 254 00:13:24,121 --> 00:13:26,650 and we'll change these items then see one. 255 00:13:26,650 --> 00:13:30,269 And I'll then increment gameboardIndex by one 256 00:13:30,269 --> 00:13:33,770 after every iteration of that inner loop. 257 00:13:33,770 --> 00:13:35,780 And it is worth pointing out by the way, 258 00:13:35,780 --> 00:13:39,880 that we first will execute the inner loop entirely, 259 00:13:39,880 --> 00:13:43,620 before we move on to the second iteration of the outer loop. 260 00:13:43,620 --> 00:13:46,600 And then we'll again, execute the inner loop three times 261 00:13:46,600 --> 00:13:50,130 before we move on to the last iteration of the outer loop. 262 00:13:50,130 --> 00:13:52,223 So that's how nested loops work. 263 00:13:53,173 --> 00:13:55,713 Now, we get access to all these list items 264 00:13:55,713 --> 00:13:57,780 of the order list as well. 265 00:13:57,780 --> 00:14:00,780 And there, I wanna change my text content 266 00:14:00,780 --> 00:14:03,000 and set it to an empty string. 267 00:14:03,000 --> 00:14:06,500 And I wanna get rid of that disabled CSS class, 268 00:14:06,500 --> 00:14:09,670 which we also add to all of these selected fields 269 00:14:09,670 --> 00:14:11,810 when we select the field. 270 00:14:11,810 --> 00:14:16,810 So here, I will actually store that gameBoardItem, 271 00:14:18,712 --> 00:14:19,920 gameBoardItemElement in a separate constant, 272 00:14:23,870 --> 00:14:27,260 since I'll use it for both setting the text content. 273 00:14:27,260 --> 00:14:29,740 And then for getting access to the class list 274 00:14:29,740 --> 00:14:33,703 and for removing the disabled class like this. 275 00:14:35,160 --> 00:14:35,993 And now with that, 276 00:14:35,993 --> 00:14:39,523 we should also clear what's visible on the screen. 277 00:14:40,720 --> 00:14:43,433 And now with that, I'm resetting that gameBoard. 278 00:14:44,560 --> 00:14:48,450 Now, I also wanna go back to game.css now 279 00:14:48,450 --> 00:14:50,410 and set the display to none here 280 00:14:50,410 --> 00:14:52,700 for this active-game selector. 281 00:14:52,700 --> 00:14:54,555 So that initially, this gameBoard 282 00:14:54,555 --> 00:14:57,350 is now not showing up anymore. 283 00:14:57,350 --> 00:14:58,781 That is the default behavior 284 00:14:58,781 --> 00:15:00,726 I wanna have at the start anyways, 285 00:15:00,726 --> 00:15:04,800 I just changed this so that testing was a bit easier. 286 00:15:04,800 --> 00:15:06,512 But now that we're finishing up everything, 287 00:15:06,512 --> 00:15:08,970 I'll change this as well. 288 00:15:08,970 --> 00:15:12,750 And the resetting logic should now also be done. 289 00:15:12,750 --> 00:15:17,270 Let's quickly check app.js and our helper variables. 290 00:15:17,270 --> 00:15:19,373 That's all looking good though. 291 00:15:20,320 --> 00:15:23,000 Now, one side note, the editedPlayer, 292 00:15:23,000 --> 00:15:26,660 and also our overall players with the names that were chosen 293 00:15:26,660 --> 00:15:29,520 are simply not reset because we can continue 294 00:15:29,520 --> 00:15:32,090 with the player names that were chosen before. 295 00:15:32,090 --> 00:15:34,100 Hence, I'm not resetting those player names 296 00:15:34,100 --> 00:15:35,444 or anything like that. 297 00:15:35,444 --> 00:15:38,133 I really just wanna reset the gameBoard. 298 00:15:39,250 --> 00:15:41,840 And therefor, now with all that implemented, 299 00:15:41,840 --> 00:15:45,347 the last step is to call resetGameStatus. 300 00:15:46,320 --> 00:15:50,410 And when I called that, whenever we start a new game. 301 00:15:50,410 --> 00:15:53,860 So here, before I changed the activePlayer name 302 00:15:53,860 --> 00:15:57,367 that's displayed, I wanna call resetGameStatus. 303 00:15:58,920 --> 00:16:01,743 And this should hopefully do the trick. 304 00:16:03,710 --> 00:16:06,520 If we now save all of that and go back here, 305 00:16:06,520 --> 00:16:08,740 if I reload and try starting a new game 306 00:16:08,740 --> 00:16:12,690 without picking player names, I get a warning as expected. 307 00:16:12,690 --> 00:16:17,690 Now, I will pick my names here, Max and Manu, let's say. 308 00:16:18,490 --> 00:16:21,350 And if I now start a new game this works, 309 00:16:21,350 --> 00:16:25,720 and I can now play this game just as before 310 00:16:25,720 --> 00:16:27,150 and now I got a winner. 311 00:16:27,150 --> 00:16:29,538 And if I now click on Start New Game again, 312 00:16:29,538 --> 00:16:30,990 that's looking good. 313 00:16:30,990 --> 00:16:35,085 It's now my turn, Max, still have my symbol here. 314 00:16:35,085 --> 00:16:38,323 And now I wanna make sure that Manu wins, 315 00:16:38,323 --> 00:16:40,053 and hence, I get You won, Manu. 316 00:16:41,040 --> 00:16:43,868 And if I start a new game, that's all looking good. 317 00:16:43,868 --> 00:16:46,293 And therefor, this is working. 318 00:16:47,530 --> 00:16:49,720 As a side note, what is possible 319 00:16:49,720 --> 00:16:51,749 is that you change your player name 320 00:16:51,749 --> 00:16:55,182 whilst you are playing, but that's no problem. 321 00:16:55,182 --> 00:16:58,091 You could, of course, prevent this behavior somehow. 322 00:16:58,091 --> 00:17:01,010 You could add logic that locks editing 323 00:17:01,010 --> 00:17:02,940 whilst you are playing a game, 324 00:17:02,940 --> 00:17:05,530 but I'm fine with this behavior. 325 00:17:05,530 --> 00:17:07,453 Why wouldn't you change your name? 326 00:17:08,490 --> 00:17:11,560 Now, let's also check whether resetting after a draw 327 00:17:11,560 --> 00:17:12,859 works correctly. 328 00:17:12,859 --> 00:17:14,810 And for this, I'll do my very best 329 00:17:14,810 --> 00:17:17,252 to force another draw here. 330 00:17:18,240 --> 00:17:20,910 Yeah, if I now start a new game, 331 00:17:20,910 --> 00:17:23,400 still looks like everything is working. 332 00:17:23,400 --> 00:17:26,220 And if we now have a winner again, that also works. 333 00:17:26,220 --> 00:17:28,182 And we've got no errors here in the console, 334 00:17:28,182 --> 00:17:31,151 and I didn't find any errors, any bugs 335 00:17:31,151 --> 00:17:33,920 while playing here either. 336 00:17:33,920 --> 00:17:35,700 Now, one thing I just noticed here 337 00:17:35,700 --> 00:17:39,020 is that there is actually a little bug or issue. 338 00:17:39,020 --> 00:17:42,261 We can still select fields after the game is over. 339 00:17:42,261 --> 00:17:44,040 That's something I wanna change 340 00:17:44,040 --> 00:17:45,860 and we can't easily make sure 341 00:17:45,860 --> 00:17:47,720 that this is not possible anymore 342 00:17:47,720 --> 00:17:50,105 by going to selectGameField. 343 00:17:50,105 --> 00:17:53,070 And here, we return if we did click on anything 344 00:17:53,070 --> 00:17:54,509 that's not a list item. 345 00:17:54,509 --> 00:17:58,040 I also wanna return and not select a field 346 00:17:58,040 --> 00:17:59,910 if the game is over. 347 00:17:59,910 --> 00:18:01,837 Now, when is our game over? 348 00:18:01,837 --> 00:18:04,320 Well, as soon as we have a winner. 349 00:18:04,320 --> 00:18:07,480 And to find out whether we have a winner or not 350 00:18:07,480 --> 00:18:09,310 in this place here, 351 00:18:09,310 --> 00:18:12,200 I'll add another little helper variable here, 352 00:18:12,200 --> 00:18:16,403 gameIsOver and set this to false initially. 353 00:18:17,590 --> 00:18:20,650 And I'll set this to true if the game is over. 354 00:18:20,650 --> 00:18:25,650 So if we did end the game, so in that endGame function, 355 00:18:25,740 --> 00:18:30,740 which we have here, there, I will set gameIsOver to true. 356 00:18:32,340 --> 00:18:35,810 And I'll set it back to false if we reset the game. 357 00:18:35,810 --> 00:18:37,400 So here in resetGameStatus, 358 00:18:37,400 --> 00:18:39,770 I'll set gameIsOver back to false 359 00:18:39,770 --> 00:18:42,200 because we're starting a new game. 360 00:18:42,200 --> 00:18:45,880 And now with that gameIsOver a helper variable added 361 00:18:45,880 --> 00:18:49,140 in selectGameField, I can now check 362 00:18:49,140 --> 00:18:52,564 if we are either not clicking on the list item 363 00:18:52,564 --> 00:18:56,170 or if game is over as true. 364 00:18:56,170 --> 00:18:58,192 And for that, we could check if it's equal to true, 365 00:18:58,192 --> 00:19:02,080 but since gameIsOver already stores true or false 366 00:19:02,080 --> 00:19:04,950 as a value, just checking for game is over like this 367 00:19:04,950 --> 00:19:08,260 is enough since that already is true or false. 368 00:19:08,260 --> 00:19:10,730 And if this is true, we'll also make it in there 369 00:19:10,730 --> 00:19:13,525 and we'll not be able to select another field. 370 00:19:13,525 --> 00:19:16,490 That would be one way of solving this little issue, 371 00:19:16,490 --> 00:19:17,940 this little bug here. 372 00:19:17,940 --> 00:19:21,560 And with that, if I quickly give this another try, 373 00:19:21,560 --> 00:19:24,800 if I add my two players here, 374 00:19:24,800 --> 00:19:27,900 and I then quickly make sure we have a winner, 375 00:19:27,900 --> 00:19:29,570 indeed, thereafter clicking 376 00:19:29,570 --> 00:19:31,750 doesn't do anything anymore. 377 00:19:31,750 --> 00:19:35,960 If I start a new game, I can, of course, click again. 378 00:19:35,960 --> 00:19:38,660 So now this bug is also fixed. 379 00:19:38,660 --> 00:19:41,720 And therefor, that should now be the finished game 380 00:19:41,720 --> 00:19:45,643 with all that logic that we need to implement that game.