1 00:00:02,270 --> 00:00:04,510 So now that we can start a game, 2 00:00:04,510 --> 00:00:07,260 let's work on the actual game logic. 3 00:00:07,260 --> 00:00:11,870 And that starts with making these fields here, clickable. 4 00:00:11,870 --> 00:00:14,060 Now they look like they are clickable, 5 00:00:14,060 --> 00:00:16,910 but of course at the moment nothing happens 6 00:00:16,910 --> 00:00:21,910 also because these fields of course are regular list items 7 00:00:22,190 --> 00:00:24,750 and they should stay list items here. 8 00:00:24,750 --> 00:00:27,290 But we wanna add click listeners 9 00:00:28,752 --> 00:00:31,020 for that of course, we need to get access 10 00:00:31,020 --> 00:00:35,380 to all these list items and then add a click listener 11 00:00:35,380 --> 00:00:37,273 to every single item here. 12 00:00:38,190 --> 00:00:41,870 There also are other patterns in JavaScript 13 00:00:41,870 --> 00:00:43,030 that you could use. 14 00:00:43,030 --> 00:00:45,960 You could add a click listener to the ordered list 15 00:00:45,960 --> 00:00:50,210 and that would actually also then react to any click inside 16 00:00:50,210 --> 00:00:51,270 of the ordered list. 17 00:00:51,270 --> 00:00:53,590 So any click on the list item, 18 00:00:53,590 --> 00:00:56,760 but I'll start with adding individual listeners 19 00:00:56,760 --> 00:00:58,390 to all these list items 20 00:00:58,390 --> 00:01:01,890 so that we can see how we can also process multiple items 21 00:01:01,890 --> 00:01:05,420 at once and add an event listener to multiple items 22 00:01:05,420 --> 00:01:07,300 without repeating a lot of code 23 00:01:08,450 --> 00:01:09,580 and therefore for that, 24 00:01:09,580 --> 00:01:12,220 I wanna select all those lists items 25 00:01:12,220 --> 00:01:15,860 inside my game board here in this ordered list 26 00:01:15,860 --> 00:01:20,110 with ID game board and add click listeners 27 00:01:20,110 --> 00:01:22,170 for this App.js let's get access 28 00:01:22,170 --> 00:01:24,550 to all those list items. 29 00:01:24,550 --> 00:01:28,010 And for it is here where I get access to all the other 30 00:01:28,010 --> 00:01:32,330 non button elements as well, or actually, maybe even here, 31 00:01:32,330 --> 00:01:34,710 when we get access to the buttons 32 00:01:34,710 --> 00:01:38,140 since these list items should act like buttons, 33 00:01:38,140 --> 00:01:41,230 though the exact position doesn't matter here, 34 00:01:41,230 --> 00:01:45,450 we can get access by getting access to the game, 35 00:01:45,450 --> 00:01:50,090 field elements, plural with an S at the end, 36 00:01:50,090 --> 00:01:54,040 by using document query selector all. 37 00:01:54,040 --> 00:01:57,110 And it's important that you use query selector all 38 00:01:57,110 --> 00:02:00,130 because that will select more than one element. 39 00:02:00,130 --> 00:02:04,320 It will select all fitting elements and return you an array 40 00:02:04,320 --> 00:02:07,550 full of all these fitting elements, 41 00:02:07,550 --> 00:02:09,240 query selector without all, 42 00:02:09,240 --> 00:02:11,720 we'll just select the first fitting element 43 00:02:11,720 --> 00:02:13,653 and that's not what we want here. 44 00:02:14,670 --> 00:02:17,130 And the query selector, which I wanna use here. 45 00:02:17,130 --> 00:02:21,510 The CSS selector, which I wanna provide here as a string 46 00:02:21,510 --> 00:02:25,120 should use this ID game board. 47 00:02:25,120 --> 00:02:29,300 So an ID selector to that ID hash game word, 48 00:02:29,300 --> 00:02:31,940 and then all the list items in there 49 00:02:31,940 --> 00:02:34,110 and keep in mind for a query selector 50 00:02:34,110 --> 00:02:38,420 and query selector all you do pass a CSS selector 51 00:02:38,420 --> 00:02:40,720 as a parameter value. 52 00:02:40,720 --> 00:02:43,440 That's why the hash symbol is needed here 53 00:02:44,360 --> 00:02:45,750 for get element by ID, 54 00:02:45,750 --> 00:02:47,700 you just pass the ID itself, 55 00:02:47,700 --> 00:02:50,840 but here we're using query selector all. 56 00:02:50,840 --> 00:02:52,070 And now as mentioned, 57 00:02:52,070 --> 00:02:56,010 this will return an array full of elements in the end. 58 00:02:56,010 --> 00:03:00,000 And we now wanna add click listeners to all those elements 59 00:03:01,200 --> 00:03:04,570 and to do this maybe down here, we can, of course, 60 00:03:04,570 --> 00:03:08,680 simply loop through all these elements as we learned it 61 00:03:08,680 --> 00:03:10,400 in the previous sections 62 00:03:10,400 --> 00:03:14,240 and then performed the same code for every element. 63 00:03:14,240 --> 00:03:17,770 And if we wanna loop through an array of elements, 64 00:03:17,770 --> 00:03:20,820 what we can use as the for of loop 65 00:03:22,010 --> 00:03:26,440 like this, for and then any constant of our choice, 66 00:03:26,440 --> 00:03:31,160 like game field element, singular not plural 67 00:03:32,259 --> 00:03:34,320 of game field elements. 68 00:03:34,320 --> 00:03:37,520 So of the array for which you wanna loop. 69 00:03:37,520 --> 00:03:41,340 And this here of course, is this array, 70 00:03:41,340 --> 00:03:43,020 which we selected up here. 71 00:03:43,020 --> 00:03:45,363 So that's the connection here. 72 00:03:48,200 --> 00:03:50,790 But now with that we can perform code, 73 00:03:50,790 --> 00:03:54,310 we can execute code for every single item in that array 74 00:03:54,310 --> 00:03:58,150 and we get access to these different items in that constant, 75 00:03:58,150 --> 00:04:01,593 which will be different for every iteration off this loop. 76 00:04:02,550 --> 00:04:05,810 And therefore, it's this game field element. 77 00:04:05,810 --> 00:04:09,930 So this constant here, it's this constant, 78 00:04:09,930 --> 00:04:13,070 which will hold a single element, 79 00:04:13,070 --> 00:04:15,380 a different element for every iteration 80 00:04:15,380 --> 00:04:18,800 and we can add our listener to that element 81 00:04:18,800 --> 00:04:20,110 in every iteration 82 00:04:20,110 --> 00:04:22,760 so that ultimately listeners have been added 83 00:04:22,760 --> 00:04:25,133 to all the elements in the end. 84 00:04:26,190 --> 00:04:28,900 And here we can then add a click listener 85 00:04:28,900 --> 00:04:32,850 and then here, we wanna execute a certain function 86 00:04:32,850 --> 00:04:36,100 and this function that should be executed here, 87 00:04:36,100 --> 00:04:39,780 can be added to game jazz and we can name it 88 00:04:39,780 --> 00:04:43,980 select game field, that sounds like a fitting name 89 00:04:46,080 --> 00:04:48,500 because that's what we wanna do. 90 00:04:48,500 --> 00:04:52,410 So I added this function to game.js and back in App.js. 91 00:04:52,410 --> 00:04:54,670 I now pass a pointer at this function 92 00:04:54,670 --> 00:04:59,123 as a second argument here, select game field like this. 93 00:05:00,870 --> 00:05:03,930 Now, what do we wanna do in this function here though? 94 00:05:03,930 --> 00:05:05,990 What's the goal here? 95 00:05:05,990 --> 00:05:08,940 Well, we've got a couple of things to do. 96 00:05:08,940 --> 00:05:11,860 We have to find out which field was clicked. 97 00:05:11,860 --> 00:05:13,930 So which list item was clicked. 98 00:05:13,930 --> 00:05:17,870 And then we wanna add the symbol of the active player 99 00:05:17,870 --> 00:05:22,330 in that list item, so that it's displayed on the screen. 100 00:05:22,330 --> 00:05:26,720 That of course also means that after a field was selected, 101 00:05:26,720 --> 00:05:29,540 we have to switch to the other player. 102 00:05:29,540 --> 00:05:32,720 So that for the next field that is selected, 103 00:05:32,720 --> 00:05:36,150 we place a different symbol. 104 00:05:36,150 --> 00:05:39,840 We also wanna check that we don't select a field 105 00:05:39,840 --> 00:05:42,930 that already does have a symbol inside of it. 106 00:05:42,930 --> 00:05:46,310 We don't wanna do anything if that's the case. 107 00:05:46,310 --> 00:05:47,860 And last but not least, 108 00:05:47,860 --> 00:05:51,840 we also wanna keep track of all the selected fields 109 00:05:51,840 --> 00:05:54,830 and to which player, which field belongs 110 00:05:54,830 --> 00:05:57,040 in our JavaScript code. 111 00:05:57,040 --> 00:05:59,020 So not just here in HTML. 112 00:05:59,020 --> 00:06:01,410 So what did we show it to the end user, 113 00:06:01,410 --> 00:06:03,110 but also in JavaScript code 114 00:06:03,110 --> 00:06:06,410 so that we later can also add another function 115 00:06:06,410 --> 00:06:10,743 or some more logic that allows us to check for a winner. 116 00:06:11,620 --> 00:06:14,820 So really a couple of things that we got to do here, 117 00:06:14,820 --> 00:06:17,670 but let's start simple here and let's get access 118 00:06:17,670 --> 00:06:19,590 to the field on which we clicked 119 00:06:19,590 --> 00:06:23,170 and then output the player symbol there. 120 00:06:23,170 --> 00:06:25,050 For this we can, of course, again, 121 00:06:25,050 --> 00:06:28,430 use this event object, which we get automatically, 122 00:06:28,430 --> 00:06:30,540 and then we get access to the field on which 123 00:06:30,540 --> 00:06:32,973 the click occurred with event target. 124 00:06:33,920 --> 00:06:35,030 Now we can, of course, 125 00:06:35,030 --> 00:06:39,560 manipulate that field and inject the players symbol there 126 00:06:39,560 --> 00:06:43,630 by setting event target text content 127 00:06:43,630 --> 00:06:46,130 equal to the symbol of the player 128 00:06:46,130 --> 00:06:47,593 that clicked on that field. 129 00:06:48,530 --> 00:06:51,310 Now, how do we get that symbol? 130 00:06:51,310 --> 00:06:53,210 Well, keep in mind that an App.js, 131 00:06:53,210 --> 00:06:57,702 I have this players array and there I have the two player 132 00:06:57,702 --> 00:07:01,003 objects where the symbol is stored in the symbol properties. 133 00:07:01,850 --> 00:07:04,140 Hence, we now just also need to keep track 134 00:07:04,140 --> 00:07:06,360 of the active player 135 00:07:06,360 --> 00:07:09,880 and simply assign an index to this active player. 136 00:07:09,880 --> 00:07:12,950 And then say that player one has an index of zero 137 00:07:12,950 --> 00:07:16,070 because player one is the first item in this array 138 00:07:16,070 --> 00:07:18,233 and player two as an index of one. 139 00:07:19,080 --> 00:07:22,180 So I'll add another variable here in App.js 140 00:07:22,180 --> 00:07:26,420 the active player and set this to zero initially 141 00:07:27,290 --> 00:07:31,060 so that we can access the first element initially. 142 00:07:31,060 --> 00:07:34,000 And we'll change this after every turn 143 00:07:34,000 --> 00:07:36,450 to one and back and zero 144 00:07:36,450 --> 00:07:39,220 now initially at zero and therefore in game.js 145 00:07:39,220 --> 00:07:42,030 we can now set the text content of the field 146 00:07:42,030 --> 00:07:46,390 on which we clicked equal to players. 147 00:07:46,390 --> 00:07:48,340 So this players array 148 00:07:48,340 --> 00:07:53,340 and then we dynamically access the active player index. 149 00:07:54,900 --> 00:07:57,840 So active player is that index, that's the variable, 150 00:07:57,840 --> 00:07:59,280 we just add it. 151 00:07:59,280 --> 00:08:02,830 And initially it's zero and therefore for the first round, 152 00:08:02,830 --> 00:08:06,510 we basically access players zero, 153 00:08:06,510 --> 00:08:09,400 but I'm using this dynamic access pattern here 154 00:08:09,400 --> 00:08:11,860 so that we can always run this code 155 00:08:11,860 --> 00:08:14,190 and we just have to change active player 156 00:08:14,190 --> 00:08:18,170 These variable value to access different players 157 00:08:18,170 --> 00:08:19,830 in this array. 158 00:08:19,830 --> 00:08:23,220 And then we just need to access the symbol property, 159 00:08:23,220 --> 00:08:24,803 which is X or O. 160 00:08:26,380 --> 00:08:28,050 So I hope it's clear how that works here 161 00:08:28,050 --> 00:08:31,230 and that we simply use the fact that the number 162 00:08:31,230 --> 00:08:34,200 which we passed here can be dynamic. 163 00:08:34,200 --> 00:08:37,350 You'll learn about that when I introduced you to loops 164 00:08:37,350 --> 00:08:38,183 as well. 165 00:08:40,000 --> 00:08:40,980 Now with that, 166 00:08:40,980 --> 00:08:45,520 if we save everything and we quickly give this a try 167 00:08:46,560 --> 00:08:51,350 by setting up two players, if I click on this field, 168 00:08:51,350 --> 00:08:53,710 the X is added here. 169 00:08:53,710 --> 00:08:55,523 So that is working. 170 00:08:56,680 --> 00:09:00,580 Now, we also wanna add that disabled clause to that field 171 00:09:00,580 --> 00:09:03,460 then once the symbol was placed in there 172 00:09:03,460 --> 00:09:05,950 so that we no longer get the hover effect 173 00:09:05,950 --> 00:09:07,450 after it has been selected. 174 00:09:07,450 --> 00:09:10,623 And then we wanna switch to the different player of course. 175 00:09:12,040 --> 00:09:14,430 So let's start by adding this class. 176 00:09:14,430 --> 00:09:18,680 And for this, we can also access event target here, 177 00:09:18,680 --> 00:09:23,680 class list, and simply add to this disabled class, 178 00:09:25,480 --> 00:09:29,000 which we added in game CSS earlier. 179 00:09:29,000 --> 00:09:30,850 If you have a look at that file, 180 00:09:30,850 --> 00:09:33,870 we did add this disabled class and now I'm adding it 181 00:09:33,870 --> 00:09:35,053 to the list item. 182 00:09:36,060 --> 00:09:40,810 And if we do this here and again give is a try 183 00:09:40,810 --> 00:09:43,290 and since it's annoying that I always have 184 00:09:43,290 --> 00:09:47,820 to enter these players I will temporarily comment out, 185 00:09:47,820 --> 00:09:51,090 display non on active game again, 186 00:09:51,090 --> 00:09:54,410 so that we always see that game field. 187 00:09:54,410 --> 00:09:57,670 And now you'll see this has to disabled class 188 00:09:57,670 --> 00:09:59,250 because now it just looks different 189 00:09:59,250 --> 00:10:02,170 and we no longer get this hover effect. 190 00:10:02,170 --> 00:10:04,690 And we don't have that cursor that implies 191 00:10:04,690 --> 00:10:05,840 that we can click this. 192 00:10:06,920 --> 00:10:08,970 So this is now working. 193 00:10:08,970 --> 00:10:12,600 Of course at the moment we add access to all the fields 194 00:10:12,600 --> 00:10:15,700 on which we click and that is not the goal. 195 00:10:15,700 --> 00:10:18,230 Instead, we wanna switch to player 196 00:10:18,230 --> 00:10:19,683 after we selected a field. 197 00:10:20,560 --> 00:10:23,690 And for that I will simply add a number of function here 198 00:10:23,690 --> 00:10:26,000 in game CSS. 199 00:10:26,000 --> 00:10:30,970 So which player and in here, 200 00:10:30,970 --> 00:10:35,970 I simply wanna check if the active player is zero 201 00:10:36,260 --> 00:10:37,620 at the moment, 202 00:10:37,620 --> 00:10:41,190 and if that's the case, I'll set it to one. 203 00:10:41,190 --> 00:10:44,140 So I switched to the next player with index one, 204 00:10:44,140 --> 00:10:46,253 the second player in our array, 205 00:10:47,630 --> 00:10:50,390 else if active player is not zero, 206 00:10:50,390 --> 00:10:54,910 then it is one and therefore then I'll set it back to zero 207 00:10:55,920 --> 00:10:58,773 and that's all the logic we actually need here. 208 00:11:00,420 --> 00:11:03,800 So therefore now once a game field was selected, 209 00:11:03,800 --> 00:11:06,290 we can just execute, switch player, 210 00:11:06,290 --> 00:11:08,620 execute this function ourselves, 211 00:11:08,620 --> 00:11:11,150 and therefore switched the player. 212 00:11:11,150 --> 00:11:12,580 Of course, we could have all to put 213 00:11:12,580 --> 00:11:15,430 that code right here into select game field, 214 00:11:15,430 --> 00:11:18,500 but this function will grow quite a bit anyways 215 00:11:18,500 --> 00:11:22,173 therefore I did not want to move this logic into this field. 216 00:11:23,530 --> 00:11:27,750 And then with that, you'll see if we save that and go back, 217 00:11:27,750 --> 00:11:32,750 we now place a cross then an O then a cross, O and so on. 218 00:11:33,000 --> 00:11:35,173 So this is not working the way it should. 219 00:11:37,050 --> 00:11:40,220 Now, before we continue with adding logic that we need, 220 00:11:40,220 --> 00:11:42,560 I also wanna show you a different pattern 221 00:11:42,560 --> 00:11:45,093 we can use for listening to clicks. 222 00:11:46,090 --> 00:11:48,500 I showed you how we can add a click listener 223 00:11:48,500 --> 00:11:51,340 to every single game field element. 224 00:11:51,340 --> 00:11:53,420 And this works absolutely fine 225 00:11:53,420 --> 00:11:55,540 and you can leave it like this. 226 00:11:55,540 --> 00:11:57,560 However, I'll comment it out here 227 00:11:57,560 --> 00:12:00,060 and show you an alternative. 228 00:12:00,060 --> 00:12:04,240 Instead of selecting all the game field elements like this, 229 00:12:04,240 --> 00:12:06,960 I'll also comment out this constant 230 00:12:06,960 --> 00:12:11,850 and instead get access to the game board element let's say 231 00:12:11,850 --> 00:12:15,583 so to the ordered list that holds all the list items, 232 00:12:16,490 --> 00:12:18,520 and we can get access to that ordered list 233 00:12:18,520 --> 00:12:21,183 by using the ID that is assigned to it. 234 00:12:22,550 --> 00:12:26,180 So with document, get element by ID, 235 00:12:26,180 --> 00:12:28,053 we get access to the ordered list. 236 00:12:29,610 --> 00:12:31,720 And now that we got access to that list, 237 00:12:31,720 --> 00:12:36,720 I will instead add this listener to this click listener, 238 00:12:37,040 --> 00:12:38,090 to the ordered list, 239 00:12:38,090 --> 00:12:40,309 so to the game board element as a whole, 240 00:12:40,309 --> 00:12:42,930 and then execute select game field 241 00:12:42,930 --> 00:12:44,883 whenever this list is clicked, 242 00:12:45,770 --> 00:12:49,400 notice might sound like it shouldn't work, 243 00:12:49,400 --> 00:12:53,200 but actually it does work because if you think about it, 244 00:12:53,200 --> 00:12:56,173 what does clicking on the ordered list mean in the end? 245 00:12:57,070 --> 00:12:59,410 Well, you will click on one of its items, right? 246 00:12:59,410 --> 00:13:02,020 Because that's the content of the ordered list. 247 00:13:02,020 --> 00:13:04,193 So this still works. 248 00:13:05,180 --> 00:13:08,440 The only problem we face here is if we click in the gap 249 00:13:08,440 --> 00:13:10,150 between two items, 250 00:13:10,150 --> 00:13:13,000 then we replace the overall content with an X, 251 00:13:13,000 --> 00:13:18,000 because our logic is to set an X as content 252 00:13:18,030 --> 00:13:20,210 or a player symbol as content 253 00:13:20,210 --> 00:13:22,340 for the element on which we clicked. 254 00:13:22,340 --> 00:13:24,360 And if we click on a gap then 255 00:13:24,360 --> 00:13:26,360 we didn't click on a list item, 256 00:13:26,360 --> 00:13:29,970 but indeed only the empty space in the ordered list. 257 00:13:29,970 --> 00:13:33,550 So we replaced the entire content of the ordered list 258 00:13:33,550 --> 00:13:35,323 with that player symbol then. 259 00:13:36,450 --> 00:13:39,560 So if we wanna use this pattern here, 260 00:13:39,560 --> 00:13:42,760 where we add the listener to the ordered list, 261 00:13:42,760 --> 00:13:46,010 we would have to indeed validate that we did click 262 00:13:46,010 --> 00:13:47,150 on a list item 263 00:13:48,395 --> 00:13:50,250 and we can do this by for example, 264 00:13:50,250 --> 00:13:53,950 checking for the opposite here with that if case, 265 00:13:53,950 --> 00:13:57,840 we could check if event target dot tag name 266 00:13:57,840 --> 00:13:59,523 is not equal to LI, 267 00:14:01,520 --> 00:14:06,520 because if you do log this event target here. 268 00:14:06,700 --> 00:14:10,100 If we start with that if we log events target, 269 00:14:10,100 --> 00:14:13,833 or to be precise, if we log events target tag name, 270 00:14:15,200 --> 00:14:18,090 then you will see that if you open the developer tools 271 00:14:18,090 --> 00:14:20,993 and you click on a list item, it prints LI, 272 00:14:21,890 --> 00:14:24,170 and if you click on the gap, it prints OL 273 00:14:24,170 --> 00:14:27,350 because then we did indeed click on the ordered list itself 274 00:14:27,350 --> 00:14:29,423 because we didn't hit a list item. 275 00:14:30,510 --> 00:14:31,343 But if we check, 276 00:14:31,343 --> 00:14:35,670 if the element on which we clicked is not a list item, 277 00:14:35,670 --> 00:14:38,830 and we then simply return, then we avoid 278 00:14:38,830 --> 00:14:42,870 that we replace the overall ordered list content 279 00:14:42,870 --> 00:14:46,050 because now by executing return here, 280 00:14:46,050 --> 00:14:49,713 as you'll learn all the other code here won't execute. 281 00:14:50,690 --> 00:14:53,720 So if the element on which we clicked is not a list item, 282 00:14:53,720 --> 00:14:55,020 we don't do anything. 283 00:14:55,020 --> 00:14:58,610 And with that, we avoid the problem from before. 284 00:14:58,610 --> 00:15:01,930 So with this code added, if you save everything, 285 00:15:01,930 --> 00:15:04,670 if you click on a gap nothing happens 286 00:15:04,670 --> 00:15:07,163 and you can continue without issues. 287 00:15:08,710 --> 00:15:11,260 Now, if you're wondering why it works like this, 288 00:15:11,260 --> 00:15:14,470 why events target can be either a list item 289 00:15:14,470 --> 00:15:15,910 or an ordered list. 290 00:15:15,910 --> 00:15:19,360 Then it's important to understand that indeed event target 291 00:15:19,360 --> 00:15:22,920 is not necessarily the element to which you added 292 00:15:22,920 --> 00:15:24,890 your event listener. 293 00:15:24,890 --> 00:15:27,830 If that element to which you added your event listener 294 00:15:27,830 --> 00:15:31,340 doesn't have any average child elements like the buttons, 295 00:15:31,340 --> 00:15:32,870 which only have text inside, 296 00:15:32,870 --> 00:15:36,070 but no other elements then clicking on a button 297 00:15:36,070 --> 00:15:39,420 will always give you that button as an event target 298 00:15:40,320 --> 00:15:42,120 for the submit event on a form, 299 00:15:42,120 --> 00:15:43,823 you will always get the form, 300 00:15:44,690 --> 00:15:46,930 but for a click event on an ordered list, 301 00:15:46,930 --> 00:15:48,570 which has list items, indeed, 302 00:15:48,570 --> 00:15:52,340 if you clicked on the list item, you'll really get the last, 303 00:15:52,340 --> 00:15:55,120 the most specific item on which you clicked 304 00:15:55,120 --> 00:15:57,140 as a value for events target 305 00:15:57,140 --> 00:15:58,853 and that would be the list item. 306 00:15:59,770 --> 00:16:01,860 And it's simply an alternative pattern 307 00:16:01,860 --> 00:16:06,440 for listening to these clicks here and handling them. 308 00:16:06,440 --> 00:16:08,900 You can use either of the two approaches here, 309 00:16:08,900 --> 00:16:11,840 I just also wanted to show this alternative, 310 00:16:11,840 --> 00:16:13,750 which I'll keep for now here, 311 00:16:13,750 --> 00:16:16,763 but you can also go back to the for loop we had before. 312 00:16:17,980 --> 00:16:19,690 Most importantly, with that, 313 00:16:19,690 --> 00:16:23,010 we are now able to display this player symbol, 314 00:16:23,010 --> 00:16:26,340 and we're able to switch players there after. 315 00:16:26,340 --> 00:16:28,450 But of course we're not there yet. 316 00:16:28,450 --> 00:16:30,160 Now that this is implemented, 317 00:16:30,160 --> 00:16:32,900 we also wanna make sure as mentioned before 318 00:16:32,900 --> 00:16:36,250 that we don't just show these symbols here, 319 00:16:36,250 --> 00:16:39,340 but that we also store them internally. 320 00:16:39,340 --> 00:16:41,800 And I also wanna output the player name here. 321 00:16:41,800 --> 00:16:45,280 When we say, it's your turn player name, 322 00:16:45,280 --> 00:16:48,380 now I'll start without putting that player name 323 00:16:48,380 --> 00:16:50,060 for this in index HTML, 324 00:16:50,060 --> 00:16:53,140 we see that here this player name is in a span 325 00:16:53,140 --> 00:16:56,150 that has the active player name ID. 326 00:16:56,150 --> 00:16:58,950 So of course we can simply select that span 327 00:16:58,950 --> 00:17:01,890 as we selected multiple other elements already. 328 00:17:01,890 --> 00:17:05,093 And then just update that whenever we switched around, 329 00:17:06,160 --> 00:17:09,280 hence here in App.js, 330 00:17:09,280 --> 00:17:13,073 where I also select all my other elements, actually here, 331 00:17:15,210 --> 00:17:20,210 I will now select my active player name element, 332 00:17:20,990 --> 00:17:24,050 will store it in a constant of this name 333 00:17:24,050 --> 00:17:25,990 with get element by ID 334 00:17:25,990 --> 00:17:28,873 using that ID that was added to that span. 335 00:17:30,240 --> 00:17:34,930 And with that in game.js, whenever we switched a player, 336 00:17:34,930 --> 00:17:38,380 I wanna update the text shown in that span. 337 00:17:38,380 --> 00:17:41,080 And I wanna set the text content here equal 338 00:17:41,080 --> 00:17:46,080 to players accessing the active player, 339 00:17:46,480 --> 00:17:48,290 which we switched here. 340 00:17:48,290 --> 00:17:51,570 And it's important that we execute this after we switched. 341 00:17:51,570 --> 00:17:55,320 So that we showed a correct new player name here. 342 00:17:55,320 --> 00:17:57,270 And then here we accessed the name property, 343 00:17:57,270 --> 00:17:59,070 which stores the name of the player. 344 00:18:00,330 --> 00:18:02,990 Now very important I also wanna do that 345 00:18:02,990 --> 00:18:05,350 if we just started the game 346 00:18:05,350 --> 00:18:08,580 so copy does line of code and execute the same line 347 00:18:08,580 --> 00:18:12,060 of code here before we showed that game area as a whole, 348 00:18:12,060 --> 00:18:13,600 whenever we start a game 349 00:18:14,530 --> 00:18:17,150 here, I don't always wanna set the text content 350 00:18:17,150 --> 00:18:19,623 to the then active player. 351 00:18:20,890 --> 00:18:25,880 And though with that, if I do enter my player names here, 352 00:18:25,880 --> 00:18:30,880 Max and Manu, and I click start new game, I see max 353 00:18:31,910 --> 00:18:34,120 if I now click here, it switches to Manu 354 00:18:34,120 --> 00:18:37,377 so now it's Manu turn to place his symbol 355 00:18:37,377 --> 00:18:40,350 and then again, it's mine and so on. 356 00:18:40,350 --> 00:18:43,140 So that's how we can now update this. 357 00:18:43,140 --> 00:18:43,973 Now, as I mentioned, 358 00:18:43,973 --> 00:18:47,870 I also wanna store to game state in some variable 359 00:18:47,870 --> 00:18:50,110 or a constant though. 360 00:18:50,110 --> 00:18:51,820 And that will be a bit more tricky 361 00:18:51,820 --> 00:18:54,400 because for this we'll also have to think 362 00:18:54,400 --> 00:18:56,533 about how we determine a winner.