1 00:00:02,170 --> 00:00:04,260 So let's now move on to the game logic, 2 00:00:04,260 --> 00:00:07,970 and for that let's start with that start new game button. 3 00:00:07,970 --> 00:00:10,130 Because keep in mind, by default, 4 00:00:10,130 --> 00:00:12,640 this game board shouldn't be visible. 5 00:00:12,640 --> 00:00:14,040 And of course by default, 6 00:00:14,040 --> 00:00:17,310 we also shouldn't have any selected fields in there. 7 00:00:17,310 --> 00:00:19,490 So therefore first of all, in the index HTML, 8 00:00:19,490 --> 00:00:23,930 I'll get rid of these dummy values here, 9 00:00:23,930 --> 00:00:26,460 and also the disabled classes 10 00:00:26,460 --> 00:00:29,000 that we have on all these list items. 11 00:00:29,000 --> 00:00:32,900 Let's delete all of that to really clean this up 12 00:00:32,900 --> 00:00:35,313 and start with an empty game board. 13 00:00:36,600 --> 00:00:41,080 And in my CSS files, in game CSS, 14 00:00:41,080 --> 00:00:43,360 this button which we have here, 15 00:00:43,360 --> 00:00:46,260 or actually this entire game area I mean, 16 00:00:46,260 --> 00:00:48,470 this should be set to display none. 17 00:00:48,470 --> 00:00:51,853 So this should be commented in here on the active game, 18 00:00:52,720 --> 00:00:54,630 so that we don't see anything. 19 00:00:54,630 --> 00:00:56,640 Instead it's now the start new game button 20 00:00:56,640 --> 00:00:58,660 that should show this game field, 21 00:00:58,660 --> 00:01:03,660 but of course only if we did enter some valid player data. 22 00:01:03,800 --> 00:01:06,700 Now for that, first of all, back to app JS, 23 00:01:06,700 --> 00:01:08,433 let's get access to this button. 24 00:01:10,323 --> 00:01:13,823 This button here that says start a new game. 25 00:01:14,830 --> 00:01:18,010 And to get access to it, it again might be easiest 26 00:01:18,010 --> 00:01:20,660 to just add an ID to it, 27 00:01:20,660 --> 00:01:25,283 and give it the ID of start game BTN, maybe, 28 00:01:26,360 --> 00:01:30,560 and then select this button by that ID in app JS. 29 00:01:30,560 --> 00:01:33,280 Here, where I also select my other buttons, 30 00:01:33,280 --> 00:01:37,910 I'll have the start new game BTN element constant, 31 00:01:37,910 --> 00:01:40,640 which stores a pointer at this button, 32 00:01:40,640 --> 00:01:42,940 which I get with get element by ID, 33 00:01:42,940 --> 00:01:45,923 and then that ID which we just chose. 34 00:01:46,830 --> 00:01:49,780 Now this start game button should be connected 35 00:01:49,780 --> 00:01:53,600 with our function that then actually displays 36 00:01:53,600 --> 00:01:56,590 that game board and therefore here, 37 00:01:56,590 --> 00:01:59,760 I'll connect this start game button element 38 00:01:59,760 --> 00:02:01,590 with an event listener, 39 00:02:01,590 --> 00:02:06,590 I'll listen to a click event to be precise, and in game JS, 40 00:02:06,740 --> 00:02:09,740 where we haven't added anything up to this point, 41 00:02:09,740 --> 00:02:11,610 I will now add a new function, 42 00:02:11,610 --> 00:02:15,863 for which the name, start new game should be quite fitting. 43 00:02:17,760 --> 00:02:20,220 And we'll add logic to this function soon, 44 00:02:20,220 --> 00:02:22,160 for the moment here in app JS, 45 00:02:22,160 --> 00:02:27,160 we can now target this start new game function. 46 00:02:27,290 --> 00:02:30,990 Whoops, start new game. 47 00:02:30,990 --> 00:02:32,550 This function which we just added, 48 00:02:32,550 --> 00:02:35,280 again by just pointing at it. 49 00:02:35,280 --> 00:02:37,213 For the reasons mentioned before. 50 00:02:38,520 --> 00:02:42,270 And then here in game JS, in start new game, 51 00:02:42,270 --> 00:02:45,810 I wanna make the game field visible. 52 00:02:45,810 --> 00:02:48,440 I also later wanna do a couple of other things, 53 00:02:48,440 --> 00:02:52,090 in case we had a running game before and I wanna reset it, 54 00:02:52,090 --> 00:02:54,120 but for the first time that we start a game, 55 00:02:54,120 --> 00:02:56,731 I just wanna show the game board. 56 00:02:56,731 --> 00:03:00,800 Now keep in mind that we have this active game element here, 57 00:03:00,800 --> 00:03:05,080 which already is an ID, hence we use the ID selector here, 58 00:03:05,080 --> 00:03:07,880 and of course therefore we can again select the same element 59 00:03:07,880 --> 00:03:11,360 in JavaScript, so that we have access to the element, 60 00:03:11,360 --> 00:03:13,830 where we need to change display none, 61 00:03:13,830 --> 00:03:15,923 to a different display style. 62 00:03:16,990 --> 00:03:21,260 So back in app JS we can get access to our overall, 63 00:03:21,260 --> 00:03:24,633 active game section, that it is here. 64 00:03:26,830 --> 00:03:30,270 By adding a brand new constant, maybe here, 65 00:03:30,270 --> 00:03:33,970 where I also have the other none button elements, 66 00:03:33,970 --> 00:03:37,770 and I'll name this game area element, 67 00:03:37,770 --> 00:03:39,380 and then get access to document, 68 00:03:39,380 --> 00:03:42,000 get element by ID, active dash game, 69 00:03:42,000 --> 00:03:45,803 that's the ID that was added to this HTML element. 70 00:03:47,390 --> 00:03:49,830 And now that we store this constant here, 71 00:03:49,830 --> 00:03:52,210 in game JS we can use it, 72 00:03:52,210 --> 00:03:55,830 and here we can then use that game area element, 73 00:03:55,830 --> 00:03:59,840 which we just created, to get access to the style property, 74 00:03:59,840 --> 00:04:03,160 and then the display property and set this to block, 75 00:04:03,160 --> 00:04:04,900 and this will display this game field 76 00:04:04,900 --> 00:04:07,270 when that button is clicked. 77 00:04:07,270 --> 00:04:09,320 So with that, if I click start new game, 78 00:04:09,320 --> 00:04:10,663 this field shows up. 79 00:04:11,670 --> 00:04:13,970 But I actually don't wanna show it 80 00:04:13,970 --> 00:04:17,529 if we haven't entered valid usernames yet. 81 00:04:17,529 --> 00:04:21,610 So just setting it to block like this is not correct. 82 00:04:21,610 --> 00:04:24,730 Instead I wanna check whether we have valid usernames, 83 00:04:24,730 --> 00:04:27,220 and how can we check this? 84 00:04:27,220 --> 00:04:30,940 Well keep in mind that in app JS we have this players array, 85 00:04:30,940 --> 00:04:33,560 where we store our player data. 86 00:04:33,560 --> 00:04:37,310 That's also why it's useful to store some data in JavaScript 87 00:04:37,310 --> 00:04:40,070 and not only in HTML. 88 00:04:40,070 --> 00:04:43,370 Because now I can just use this JavaScript data structure, 89 00:04:43,370 --> 00:04:46,650 which I have here, this array, and look into that 90 00:04:46,650 --> 00:04:49,640 to find out if valid names have been entered. 91 00:04:49,640 --> 00:04:51,790 Because we update the names in there 92 00:04:51,790 --> 00:04:55,040 in our save player config function. 93 00:04:55,040 --> 00:04:57,623 That's what we implemented over the last minutes. 94 00:04:58,800 --> 00:05:03,800 So in game JS here, before I set the display to block, 95 00:05:04,130 --> 00:05:09,130 I wanna add a if statement, and check if players, 96 00:05:10,360 --> 00:05:15,360 for the first player, the name is equal to an empty string, 97 00:05:16,360 --> 00:05:20,530 or, that's this or operator we also learned about, 98 00:05:20,530 --> 00:05:25,530 if for the second player with index one, the name is empty. 99 00:05:25,730 --> 00:05:29,210 If either of the two players has an empty string, 100 00:05:29,210 --> 00:05:32,010 which has our initial default value, 101 00:05:32,010 --> 00:05:34,500 which is not the value we want, 102 00:05:34,500 --> 00:05:38,713 then we can show an error to the user and not continue. 103 00:05:40,040 --> 00:05:43,490 To prevent further execution of this function, 104 00:05:43,490 --> 00:05:46,090 we learned that we can use the return keyword, 105 00:05:46,090 --> 00:05:47,730 the return statement. 106 00:05:47,730 --> 00:05:50,310 Once this executed, any code thereafter, 107 00:05:50,310 --> 00:05:52,473 like this code, won't execute. 108 00:05:53,480 --> 00:05:55,420 And I don't wanna execute this code 109 00:05:55,420 --> 00:05:57,280 if we have invalid input, 110 00:05:57,280 --> 00:05:59,750 which is the case if either of these two players 111 00:05:59,750 --> 00:06:01,983 doesn't have a user chosen name. 112 00:06:03,660 --> 00:06:07,240 We can also show an error and here I'll do it with an alert, 113 00:06:07,240 --> 00:06:11,290 where I just say, please set custom player names 114 00:06:11,290 --> 00:06:14,410 for both players. 115 00:06:14,410 --> 00:06:16,440 You could also output this somewhere else, 116 00:06:16,440 --> 00:06:20,070 you could add a brand new modal with that message in there. 117 00:06:20,070 --> 00:06:22,730 That might be a nice extra practice, 118 00:06:22,730 --> 00:06:25,480 but here I'll use the good old built in alert, 119 00:06:25,480 --> 00:06:27,483 which we can use here in the browser. 120 00:06:29,580 --> 00:06:31,260 Now with that, if I save this, 121 00:06:31,260 --> 00:06:33,680 if I don't set my own player names, 122 00:06:33,680 --> 00:06:37,230 if I click start new game, I get this warning, 123 00:06:37,230 --> 00:06:39,630 and the game board doesn't show up. 124 00:06:39,630 --> 00:06:40,660 If on the other hand, 125 00:06:40,660 --> 00:06:44,130 I do set my own player names for both players, 126 00:06:44,130 --> 00:06:46,700 then we don't get the warning, 127 00:06:46,700 --> 00:06:48,623 and instead we get the player board. 128 00:06:49,850 --> 00:06:54,520 If I reload and I only set this for one of the two players, 129 00:06:54,520 --> 00:06:56,580 then I still get the warning, 130 00:06:56,580 --> 00:06:59,623 because we are checking both player names here. 131 00:07:00,460 --> 00:07:04,920 And we have the or operator here, and not the and operator, 132 00:07:04,920 --> 00:07:08,260 because we wanna ensure that if either of the two names 133 00:07:08,260 --> 00:07:11,000 hasn't been set, we show this. 134 00:07:11,000 --> 00:07:13,380 If we use the end operator instead, 135 00:07:13,380 --> 00:07:15,350 then we would only show this warning 136 00:07:15,350 --> 00:07:18,270 if both players haven't been set, 137 00:07:18,270 --> 00:07:21,850 but we would be fine if just one of them was set. 138 00:07:21,850 --> 00:07:23,320 That's not what we want here, 139 00:07:23,320 --> 00:07:25,950 we wanna ensure that both players were set, 140 00:07:25,950 --> 00:07:29,040 and therefore we check if either of the two hasn't been set, 141 00:07:29,040 --> 00:07:31,330 because only one player not being set 142 00:07:31,330 --> 00:07:33,603 is enough for us to show this warning. 143 00:07:34,600 --> 00:07:37,910 And now we have the correct logic here for starting a game, 144 00:07:37,910 --> 00:07:40,940 and for showing this game board then. 145 00:07:40,940 --> 00:07:44,750 So for this, let me enter this again, 146 00:07:44,750 --> 00:07:48,310 test this one last time, and now that's here. 147 00:07:48,310 --> 00:07:50,770 And now we can continue with that, 148 00:07:50,770 --> 00:07:53,040 and we can now work on the actual logic 149 00:07:53,040 --> 00:07:55,430 for making these fields clickable, 150 00:07:55,430 --> 00:07:58,960 because at the moment they only look like they're clickable, 151 00:07:58,960 --> 00:08:01,290 nothing happens if you do click them. 152 00:08:01,290 --> 00:08:04,070 And then thereafter, we also add the logic 153 00:08:04,070 --> 00:08:06,153 for checking whether we have a winner.