1 00:00:02,060 --> 00:00:03,920 So we reflect 2 00:00:03,920 --> 00:00:06,060 the selection of fields here 3 00:00:06,060 --> 00:00:07,820 to the user on the screen. 4 00:00:07,820 --> 00:00:10,230 But as mentioned, I also want to store my data 5 00:00:10,230 --> 00:00:12,430 in my code so that we can run 6 00:00:12,430 --> 00:00:16,000 some check for winner logic there. 7 00:00:16,000 --> 00:00:18,150 And that brings up one question. 8 00:00:18,150 --> 00:00:19,480 How should we store the data? 9 00:00:19,480 --> 00:00:21,343 How should we check for a winner? 10 00:00:22,190 --> 00:00:24,510 Well, there will be multiple ways 11 00:00:24,510 --> 00:00:26,670 of storing this, but in the end, 12 00:00:26,670 --> 00:00:29,130 the best approach probably 13 00:00:29,130 --> 00:00:32,770 is to use a two dimensional array. 14 00:00:32,770 --> 00:00:35,210 And that's actually also a new concept, 15 00:00:35,210 --> 00:00:37,080 though it's not really new. 16 00:00:37,080 --> 00:00:42,080 It's just an array with other arrays as values. 17 00:00:42,110 --> 00:00:45,630 And I'll show you what I mean here in app.js. 18 00:00:45,630 --> 00:00:47,040 Here, we already store data 19 00:00:47,040 --> 00:00:49,710 about our active players and so on. 20 00:00:49,710 --> 00:00:52,770 I now also want to add a brand new constant here, 21 00:00:52,770 --> 00:00:54,940 which I'll name gameData. 22 00:00:54,940 --> 00:00:56,763 And this will be an array. 23 00:00:57,670 --> 00:00:59,680 Now in this array, I want to have 24 00:00:59,680 --> 00:01:01,630 three other arrays 25 00:01:01,630 --> 00:01:04,190 and every child array in there, 26 00:01:04,190 --> 00:01:05,870 so every array in that array, 27 00:01:05,870 --> 00:01:08,370 should have three values 28 00:01:08,370 --> 00:01:10,450 so that they kind of replicate 29 00:01:10,450 --> 00:01:13,370 the three columns and three rows 30 00:01:13,370 --> 00:01:15,143 here in this array. 31 00:01:16,090 --> 00:01:19,740 And initially I'll set these three values, 32 00:01:19,740 --> 00:01:22,933 which I want to have in every child array, to zero. 33 00:01:23,790 --> 00:01:25,810 This should signal that this field 34 00:01:25,810 --> 00:01:28,800 has not been selected by any player. 35 00:01:28,800 --> 00:01:30,920 So now you see this kind of replicates 36 00:01:30,920 --> 00:01:32,370 what we see on the screen here. 37 00:01:32,370 --> 00:01:34,510 We have nine fields here, 38 00:01:34,510 --> 00:01:36,550 initially all empty, 39 00:01:36,550 --> 00:01:38,043 without any selection. 40 00:01:39,640 --> 00:01:42,920 Now I want to set the different field values 41 00:01:42,920 --> 00:01:45,203 whenever a field was selected. 42 00:01:46,360 --> 00:01:48,870 And for this, in game.js here, 43 00:01:48,870 --> 00:01:50,560 in selectGameField, 44 00:01:50,560 --> 00:01:53,260 besides updating what we see on the screen, 45 00:01:53,260 --> 00:01:55,460 before we switch the player, 46 00:01:55,460 --> 00:01:57,714 I now want to update the field 47 00:01:57,714 --> 00:01:59,447 that was selected 48 00:01:59,447 --> 00:02:02,163 in my gameData array of arrays. 49 00:02:03,280 --> 00:02:05,760 Now how could we make this work? 50 00:02:05,760 --> 00:02:09,690 Well, for this, we can again use this data- attribute, 51 00:02:09,690 --> 00:02:11,890 which we learned about before. 52 00:02:11,890 --> 00:02:15,200 We can attach extra data to all these list items 53 00:02:15,200 --> 00:02:17,090 so that once we clicked on a list item, 54 00:02:17,090 --> 00:02:18,793 we can use this extra data. 55 00:02:19,760 --> 00:02:24,250 And here I'll add a data field ID, 56 00:02:24,250 --> 00:02:26,870 and set the first field to one, let's say, 57 00:02:26,870 --> 00:02:29,710 and then simply add that to all the list items, 58 00:02:29,710 --> 00:02:32,360 but increment the number by one 59 00:02:32,360 --> 00:02:33,833 for every list item. 60 00:02:35,640 --> 00:02:36,673 Like this. 61 00:02:38,800 --> 00:02:40,710 That's what we could do. 62 00:02:40,710 --> 00:02:43,111 Or we take it a step further 63 00:02:43,111 --> 00:02:45,200 and we actually set this to data col 64 00:02:45,200 --> 00:02:46,800 for a column, 65 00:02:46,800 --> 00:02:49,340 and say this is the first column, 66 00:02:49,340 --> 00:02:51,980 and add a data row, 67 00:02:51,980 --> 00:02:53,290 and set this also to one 68 00:02:53,290 --> 00:02:54,920 because the first list item 69 00:02:54,920 --> 00:02:56,070 is in the top left corner 70 00:02:56,070 --> 00:02:58,533 is the first row and the first column. 71 00:03:00,400 --> 00:03:04,360 The next list item, this one here, 72 00:03:04,360 --> 00:03:06,960 so with a two here is in the first row 73 00:03:06,960 --> 00:03:08,253 and second column. 74 00:03:09,200 --> 00:03:10,750 Let me remove this two here, 75 00:03:10,750 --> 00:03:12,500 which I just added so that you can see 76 00:03:12,500 --> 00:03:15,050 where this list item is positioned. 77 00:03:15,050 --> 00:03:17,350 And therefore here I set this to data col, 78 00:03:17,350 --> 00:03:20,170 set this equal to two because it's the second column, 79 00:03:20,170 --> 00:03:23,193 but again, data row equal to one. 80 00:03:25,020 --> 00:03:27,040 And the next list item here, 81 00:03:27,040 --> 00:03:28,910 that's the top right one, 82 00:03:28,910 --> 00:03:30,200 is in the third column, 83 00:03:30,200 --> 00:03:31,763 but still first row. 84 00:03:32,900 --> 00:03:35,710 So we just change col to three. 85 00:03:35,710 --> 00:03:39,060 And now we repeat this for the next set of list items. 86 00:03:39,060 --> 00:03:42,310 Here we start in the first column again, 87 00:03:42,310 --> 00:03:44,570 but now we're in the second row, 88 00:03:44,570 --> 00:03:45,870 and we're in the second row 89 00:03:45,870 --> 00:03:48,040 for all these list items. 90 00:03:48,040 --> 00:03:49,270 So for all the list items 91 00:03:49,270 --> 00:03:51,623 I now just change the column. 92 00:03:52,470 --> 00:03:54,470 And we then do that for the third set 93 00:03:54,470 --> 00:03:55,880 of list items as well. 94 00:03:55,880 --> 00:03:58,220 Here we set data row to three 95 00:03:58,220 --> 00:04:00,220 because these are the three list items 96 00:04:00,220 --> 00:04:02,400 in the bottom row here. 97 00:04:02,400 --> 00:04:04,370 And we just then switch 98 00:04:04,370 --> 00:04:07,363 through all the different column values. 99 00:04:08,430 --> 00:04:11,950 Now the use of that is that we can now extract that data 100 00:04:11,950 --> 00:04:14,890 whenever we click on one of these list items, 101 00:04:14,890 --> 00:04:16,800 and we can then use that data 102 00:04:16,800 --> 00:04:19,420 to dynamically access the different arrays 103 00:04:19,420 --> 00:04:21,320 inside of our array here, 104 00:04:21,320 --> 00:04:24,160 and then set these different values in there 105 00:04:24,160 --> 00:04:27,800 to either one, if it was selected by player one, 106 00:04:27,800 --> 00:04:31,000 or two, if it was selected by player two. 107 00:04:31,000 --> 00:04:32,630 And if we then later check for 108 00:04:32,630 --> 00:04:34,620 whether we have a winner or not, 109 00:04:34,620 --> 00:04:36,530 we just have to look into this array 110 00:04:36,530 --> 00:04:38,950 and find if we have adjacent ones 111 00:04:38,950 --> 00:04:41,560 or twos also diagonally, 112 00:04:41,560 --> 00:04:43,270 which I'll show you how to do, 113 00:04:43,270 --> 00:04:45,710 to find out whether we have a winner. 114 00:04:45,710 --> 00:04:47,533 That's why I'm using this approach. 115 00:04:49,030 --> 00:04:51,160 So therefore now with data col 116 00:04:51,160 --> 00:04:54,644 and data row added in game.js here, 117 00:04:54,644 --> 00:04:58,890 we can get the selected column 118 00:05:00,010 --> 00:05:02,640 by accessing event.target. 119 00:05:02,640 --> 00:05:05,480 And since I'm using this over and over again, 120 00:05:05,480 --> 00:05:09,140 I'll actually store it in a little helper constant 121 00:05:09,140 --> 00:05:14,140 selectedField, which I now use here and here, 122 00:05:15,400 --> 00:05:17,970 and then also here. 123 00:05:17,970 --> 00:05:20,120 And now on that selectedField, 124 00:05:20,120 --> 00:05:22,370 I will access data set 125 00:05:23,220 --> 00:05:25,763 and then col to get the column, 126 00:05:26,980 --> 00:05:31,563 col here because I chose col after the dash, 127 00:05:33,090 --> 00:05:34,500 and then row for the row. 128 00:05:34,500 --> 00:05:37,970 So I'll repeat that and get my selectedRow 129 00:05:39,800 --> 00:05:41,853 by accessing dataset.row. 130 00:05:43,870 --> 00:05:47,730 Now to update the gameData. 131 00:05:47,730 --> 00:05:51,970 So there's array defined here in app.js. 132 00:05:51,970 --> 00:05:54,470 We just want to dive into that. 133 00:05:54,470 --> 00:05:57,580 And here we actually use two square brackets 134 00:05:57,580 --> 00:05:58,900 after each other. 135 00:05:58,900 --> 00:06:00,400 The reason for this is that 136 00:06:00,400 --> 00:06:02,330 with the first set of square brackets, 137 00:06:02,330 --> 00:06:04,733 we dive into the main array, 138 00:06:06,070 --> 00:06:07,880 and then we select either the first 139 00:06:07,880 --> 00:06:11,263 or second or third array in that array. 140 00:06:12,230 --> 00:06:15,540 And with that second pair of square brackets here, 141 00:06:15,540 --> 00:06:18,990 we then select an item in that inner array, 142 00:06:18,990 --> 00:06:22,410 the first, second or third item in there. 143 00:06:22,410 --> 00:06:23,573 That's what we do. 144 00:06:25,670 --> 00:06:28,540 And therefore, with the first pair of square brackets, 145 00:06:28,540 --> 00:06:32,030 we actually decide which row we want to dive in 146 00:06:32,980 --> 00:06:37,520 because the rows are the main items here in this array. 147 00:06:37,520 --> 00:06:39,670 And then with the second pair of square brackets, 148 00:06:39,670 --> 00:06:42,520 we decide which column we want to use. 149 00:06:42,520 --> 00:06:45,070 So here we could use selectedRow 150 00:06:45,070 --> 00:06:46,863 and selectedColumn. 151 00:06:49,010 --> 00:06:52,210 But that would be wrong since our data there 152 00:06:52,210 --> 00:06:54,980 is actually not a number, but a string 153 00:06:54,980 --> 00:06:58,160 and starts at one and not at zero. 154 00:06:58,160 --> 00:07:00,230 And of course, for array indexes 155 00:07:00,230 --> 00:07:01,823 we should start at zero. 156 00:07:03,110 --> 00:07:06,800 Therefore, to update this correctly, 157 00:07:06,800 --> 00:07:09,360 I'll actually deduct one 158 00:07:09,360 --> 00:07:11,603 from both the column and the row. 159 00:07:12,570 --> 00:07:14,550 And if we deduct one here, 160 00:07:14,550 --> 00:07:16,760 we perform a mathematical operation 161 00:07:16,760 --> 00:07:18,610 and that will automatically convert 162 00:07:18,610 --> 00:07:20,650 the result to a number. 163 00:07:20,650 --> 00:07:22,720 So we don't have to add the plus here 164 00:07:22,720 --> 00:07:24,810 though we could do that. 165 00:07:24,810 --> 00:07:27,670 But it's not required because of the mathematical operation, 166 00:07:27,670 --> 00:07:29,633 which we are performing anyways. 167 00:07:31,090 --> 00:07:33,010 And with that, selected column and row 168 00:07:33,010 --> 00:07:35,980 will be numbers from zero to two each. 169 00:07:35,980 --> 00:07:39,220 And with that, we access our game data field. 170 00:07:39,220 --> 00:07:40,820 And now I just want to set this equal 171 00:07:40,820 --> 00:07:44,433 to activePlayer plus one. 172 00:07:45,890 --> 00:07:48,310 Plus one because activePlayer 173 00:07:48,310 --> 00:07:50,320 by default is zero 174 00:07:50,320 --> 00:07:51,600 for the first player 175 00:07:51,600 --> 00:07:54,090 and one for the second player. 176 00:07:54,090 --> 00:07:55,860 But in here, in this array, 177 00:07:55,860 --> 00:07:58,460 I actually want to store one for the first player 178 00:07:58,460 --> 00:08:00,690 and two for the second player 179 00:08:00,690 --> 00:08:04,483 because zero is used for no player here. 180 00:08:05,560 --> 00:08:07,340 Therefore I add plus one 181 00:08:07,340 --> 00:08:08,940 to set the first player to one 182 00:08:08,940 --> 00:08:11,513 and the second player to two as a value. 183 00:08:13,090 --> 00:08:15,870 And now, so that we see whether that works or not, 184 00:08:15,870 --> 00:08:18,100 I'll console log gameData. 185 00:08:18,100 --> 00:08:19,850 I will log that array 186 00:08:19,850 --> 00:08:21,383 to see what's inside there. 187 00:08:22,630 --> 00:08:24,600 So if we now save everything 188 00:08:24,600 --> 00:08:27,600 and open the developer tools in the console there, 189 00:08:27,600 --> 00:08:30,940 if I click on the first item, 190 00:08:30,940 --> 00:08:34,230 I get an array where the top left item is a one, 191 00:08:34,230 --> 00:08:38,130 because player one clicked on the top left item. 192 00:08:38,130 --> 00:08:40,330 If I click on the bottom right item 193 00:08:40,330 --> 00:08:41,700 with player two, 194 00:08:41,700 --> 00:08:44,260 then the updated array 195 00:08:44,260 --> 00:08:47,480 should have the bottom right field filled out, 196 00:08:47,480 --> 00:08:49,570 but instead it's the one in the middle row, 197 00:08:49,570 --> 00:08:51,630 which is not correct. 198 00:08:51,630 --> 00:08:55,010 So let me see why this is not working 199 00:08:55,010 --> 00:08:57,910 because I forgot to update my rows here. 200 00:08:57,910 --> 00:09:00,833 This should be data row three here, not two. 201 00:09:02,340 --> 00:09:05,560 So once this is fixed, if we try this again, 202 00:09:05,560 --> 00:09:08,030 click on the top left item with player one 203 00:09:08,030 --> 00:09:10,530 and the bottom right item with player two, 204 00:09:10,530 --> 00:09:14,133 then we have the behavior we want. 205 00:09:15,160 --> 00:09:17,590 Now, if I click in the middle one with player one again, 206 00:09:17,590 --> 00:09:20,203 we see a one here in the middle, indeed. 207 00:09:21,970 --> 00:09:23,210 So that's working. 208 00:09:23,210 --> 00:09:25,250 And with that, we're keeping track 209 00:09:25,250 --> 00:09:27,710 of which field is selected by which player 210 00:09:27,710 --> 00:09:31,390 here in the background, in our JavaScript code. 211 00:09:31,390 --> 00:09:34,670 And we'll then need that for determining a winner. 212 00:09:34,670 --> 00:09:38,580 Now before we move on to determining a winner, though, 213 00:09:38,580 --> 00:09:41,950 let's handle one scenario that could also occur. 214 00:09:41,950 --> 00:09:45,040 What if player one clicks on this field 215 00:09:45,040 --> 00:09:47,680 and then player two clicks on it as well? 216 00:09:47,680 --> 00:09:50,610 Even though we don't signal that it's clickable, 217 00:09:50,610 --> 00:09:53,403 we can, of course, technically still click on it. 218 00:09:54,380 --> 00:09:55,840 If that happens, you see, 219 00:09:55,840 --> 00:09:57,830 indeed, that click was registered, 220 00:09:57,830 --> 00:09:59,200 a new array is returned, 221 00:09:59,200 --> 00:10:02,610 and indeed now player two owns this field. 222 00:10:02,610 --> 00:10:04,190 I also did update it here. 223 00:10:04,190 --> 00:10:07,340 We can switch on that field. 224 00:10:07,340 --> 00:10:09,170 And that's not the goal. 225 00:10:09,170 --> 00:10:11,610 Once a field has been selected by a player, 226 00:10:11,610 --> 00:10:14,010 the other player should, of course, not be able 227 00:10:14,010 --> 00:10:15,573 to select it as well. 228 00:10:16,430 --> 00:10:17,770 And to achieve this, 229 00:10:17,770 --> 00:10:19,810 we want to check whether the field 230 00:10:19,810 --> 00:10:23,200 on which we clicked was clicked already, 231 00:10:23,200 --> 00:10:26,660 if it already is assigned to a player. 232 00:10:26,660 --> 00:10:29,650 Now how can we find out whether that's the case? 233 00:10:29,650 --> 00:10:31,713 Well, it is quite straightforward. 234 00:10:32,650 --> 00:10:35,640 Let's actually get the selected column and row 235 00:10:35,640 --> 00:10:40,640 a little bit earlier before we update the screen 236 00:10:40,810 --> 00:10:43,700 and place the players symbol there. 237 00:10:43,700 --> 00:10:46,130 And then before we well, update that screen, 238 00:10:46,130 --> 00:10:48,150 let's check if gameData 239 00:10:49,820 --> 00:10:52,360 for that selected row and column, 240 00:10:52,360 --> 00:10:55,960 so using the same access pattern as down there, 241 00:10:55,960 --> 00:10:59,100 if that is greater than zero, 242 00:10:59,100 --> 00:11:01,230 because it will be greater than zero 243 00:11:01,230 --> 00:11:03,740 if this field has already been assigned 244 00:11:03,740 --> 00:11:05,440 to a player. 245 00:11:05,440 --> 00:11:09,210 Because we start with zero for every field here, 246 00:11:09,210 --> 00:11:11,500 and then once a player clicked on it, 247 00:11:11,500 --> 00:11:14,010 we place one for player one 248 00:11:14,010 --> 00:11:17,580 and two for player two in that field. 249 00:11:17,580 --> 00:11:18,910 So if it's greater than zero, 250 00:11:18,910 --> 00:11:20,200 we know that this field 251 00:11:21,069 --> 00:11:23,020 has already been assigned to a player. 252 00:11:23,020 --> 00:11:25,630 And that's another example of why it's important 253 00:11:25,630 --> 00:11:28,190 to keep track of our game data in code 254 00:11:28,190 --> 00:11:30,093 and not just update the UI. 255 00:11:31,910 --> 00:11:34,950 Because now here, in this if-block, 256 00:11:34,950 --> 00:11:37,170 we can then return, again, 257 00:11:37,170 --> 00:11:39,130 to stop function execution 258 00:11:39,130 --> 00:11:42,680 and to avoid that this code executes, 259 00:11:42,680 --> 00:11:45,020 and then maybe show an alert 260 00:11:45,020 --> 00:11:49,887 where we say "Please select an empty field." 261 00:11:51,130 --> 00:11:52,033 Like this. 262 00:11:53,830 --> 00:11:55,340 And if we do that, 263 00:11:55,340 --> 00:11:58,130 then if I click on the first field 264 00:11:58,130 --> 00:12:00,720 and I click on the same field again thereafter, 265 00:12:00,720 --> 00:12:04,000 I get the warning and the player is not switched. 266 00:12:04,000 --> 00:12:06,110 I can select a different field instead. 267 00:12:06,110 --> 00:12:08,600 And I can't reassign fields, 268 00:12:08,600 --> 00:12:11,380 which is of course not something we'd want. 269 00:12:11,380 --> 00:12:13,060 So this is now another adjustment 270 00:12:13,060 --> 00:12:14,323 we should implement here.