1 00:00:00,034 --> 00:00:03,841 Welcome back, Ashley here, ready to walk you through the solution for 2 00:00:03,841 --> 00:00:05,117 the startGame method. 3 00:00:05,117 --> 00:00:07,990 This is really exciting because once this method is complete, 4 00:00:07,990 --> 00:00:10,874 our four in a row game will be completely viewable on-screen. 5 00:00:10,874 --> 00:00:13,530 And this stage of game development will be complete. 6 00:00:13,530 --> 00:00:17,583 As we move forward into the next stages of this course, we'll add interaction and 7 00:00:17,583 --> 00:00:20,180 logic to the game, the parts that make it playable. 8 00:00:20,180 --> 00:00:25,072 But completing this foundation work is a huge milestone and you should be proud. 9 00:00:25,072 --> 00:00:30,012 Let's look at the start game solution and then load up the game in the browser. 10 00:00:30,012 --> 00:00:31,956 Make sure you're are in the Game.js file. 11 00:00:31,956 --> 00:00:34,572 Head to the start game method. 12 00:00:34,572 --> 00:00:38,374 Your first step was to call the draw HTML Board method. 13 00:00:38,374 --> 00:00:42,267 You were tasked with figuring out what object call this method on and 14 00:00:42,267 --> 00:00:43,847 how to access this object. 15 00:00:43,847 --> 00:00:44,511 How did you do? 16 00:00:44,511 --> 00:00:50,022 If you recall, the board object is initialized in a games constructor method. 17 00:00:50,022 --> 00:00:54,158 When a new game is created, so is a new board object, and 18 00:00:54,158 --> 00:00:58,395 that board object is stored in the games board property. 19 00:00:58,395 --> 00:01:03,501 So, we can access the board object inside the Game class using this.board. 20 00:01:03,501 --> 00:01:05,769 From there, we can simply call the method. 21 00:01:05,769 --> 00:01:09,889 Once this happens, the game's board will be drawn in the browser. 22 00:01:09,889 --> 00:01:15,008 Next, we have to call the drawHTMLToken method on the activeToken. 23 00:01:15,008 --> 00:01:18,258 Well, we wrote the getter method to find active token, but 24 00:01:18,258 --> 00:01:20,930 how do we access that from inside the Game class? 25 00:01:20,930 --> 00:01:24,999 Recall that you also wrote a getter method for the active player. 26 00:01:24,999 --> 00:01:29,903 At the games beginning, you know the activePlayer is Player 1 because you set 27 00:01:29,903 --> 00:01:34,674 the active property for Player 1 to true when you initialized that object. 28 00:01:34,674 --> 00:01:39,852 But to access the active player in a dynamic way, we'll use the getter method. 29 00:01:39,852 --> 00:01:44,261 this.activePlayer will return the player whose turn it is, and 30 00:01:44,261 --> 00:01:50,126 this.activePlayer.activeToken will return the token object that's now in play. 31 00:01:50,126 --> 00:01:54,669 Finally, we set the game's ready property to true, and that's it. 32 00:01:54,669 --> 00:01:58,587 Take a moment to pause and make sure your startGame method matches what you see on 33 00:01:58,587 --> 00:02:00,820 screen and celebrate your accomplishment. 34 00:02:00,820 --> 00:02:04,358 Then comeback to see the game in its current state in the browser. 35 00:02:06,929 --> 00:02:07,619 All right, 36 00:02:07,619 --> 00:02:12,323 if you're ready to move forward drag your index.html file to a new browser tab. 37 00:02:12,323 --> 00:02:14,735 Look at that, our game is loaded in the browser. 38 00:02:14,735 --> 00:02:17,428 Let's see what happens when I click the Start game button. 39 00:02:18,959 --> 00:02:22,020 Cool, our game board and token are here in our browser. 40 00:02:22,020 --> 00:02:25,003 Of course, we can't interact with it yet, but that's okay. 41 00:02:25,003 --> 00:02:28,780 Join me in the next stage to start building out that interactive 42 00:02:28,780 --> 00:02:29,858 functionality. 43 00:02:29,858 --> 00:02:33,799 Now if your game isn't loading properly, head to the Treehouse community and 44 00:02:33,799 --> 00:02:35,599 reach out to your fellow students. 45 00:02:35,599 --> 00:02:36,834 All of the project files for 46 00:02:36,834 --> 00:02:39,420 each type of the course have been provided to you as well. 47 00:02:39,420 --> 00:02:42,944 Feel free to go back and try to figure out where your code has diverged or 48 00:02:42,944 --> 00:02:44,018 an error was made, or 49 00:02:44,018 --> 00:02:47,875 simply start fresh with the correct code at the beginning of the next stage. 50 00:02:47,875 --> 00:02:50,019 I've been having a lot of fun building this with you, and 51 00:02:50,019 --> 00:02:51,455 I hope you're excited to keep going. 52 00:02:51,455 --> 00:02:53,033 See you soon.