startGame() Method Solution

Welcome back, Ashley here, ready to walk you through the solution for 0:00 the startGame method. 0:03 This is really exciting because once this method is complete, 0:05 our four in a row game will be completely viewable on-screen. 0:07 And this stage of game development will be complete. 0:10 As we move forward into the next stages of this course, we'll add interaction and 0:13 logic to the game, the parts that make it playable. 0:17 But completing this foundation work is a huge milestone and you should be proud. 0:20 Let's look at the start game solution and then load up the game in the browser. 0:25 Make sure you're are in the Game.js file. 0:30 Head to the start game method. 0:31 Your first step was to call the draw HTML Board method. 0:34 You were tasked with figuring out what object call this method on and 0:38 how to access this object. 0:42 How did you do? 0:43 If you recall, the board object is initialized in a games constructor method. 0:44 When a new game is created, so is a new board object, and 0:50 that board object is stored in the games board property. 0:54 So, we can access the board object inside the Game class using this.board. 0:58 From there, we can simply call the method. 1:03 Once this happens, the game's board will be drawn in the browser. 1:05 Next, we have to call the drawHTMLToken method on the activeToken. 1:09 Well, we wrote the getter method to find active token, but 1:15 how do we access that from inside the Game class? 1:18 Recall that you also wrote a getter method for the active player. 1:20 At the games beginning, you know the activePlayer is Player 1 because you set 1:24 the active property for Player 1 to true when you initialized that object. 1:29 But to access the active player in a dynamic way, we'll use the getter method. 1:34 this.activePlayer will return the player whose turn it is, and 1:39 this.activePlayer.activeToken will return the token object that's now in play. 1:44 Finally, we set the game's ready property to true, and that's it. 1:50 Take a moment to pause and make sure your startGame method matches what you see on 1:54 screen and celebrate your accomplishment. 1:58 Then comeback to see the game in its current state in the browser. 2:00 All right, 2:06 if you're ready to move forward drag your index.html file to a new browser tab. 2:07 Look at that, our game is loaded in the browser. 2:12 Let's see what happens when I click the Start game button. 2:14 Cool, our game board and token are here in our browser. 2:18 Of course, we can't interact with it yet, but that's okay. 2:22 Join me in the next stage to start building out that interactive 2:25 functionality. 2:28 Now if your game isn't loading properly, head to the Treehouse community and 2:29 reach out to your fellow students. 2:33 All of the project files for 2:35 each type of the course have been provided to you as well. 2:36 Feel free to go back and try to figure out where your code has diverged or 2:39 an error was made, or 2:42 simply start fresh with the correct code at the beginning of the next stage. 2:44 I've been having a lot of fun building this with you, and 2:47 I hope you're excited to keep going. 2:50 See you soon. 2:51