Welcome back, Ashley here, ready to walk you through the solution for

the startGame method.

This is really exciting because once this method is complete,

our four in a row game will be completely viewable on-screen.

And this stage of game development will be complete.

As we move forward into the next stages of this course, we'll add interaction and

logic to the game, the parts that make it playable.

But completing this foundation work is a huge milestone and you should be proud.

Let's look at the start game solution and then load up the game in the browser.

Make sure you're are in the Game.js file.

Head to the start game method.

Your first step was to call the draw HTML Board method.

You were tasked with figuring out what object call this method on and

how to access this object.

How did you do?

If you recall, the board object is initialized in a games constructor method.

When a new game is created, so is a new board object, and

that board object is stored in the games board property.

So, we can access the board object inside the Game class using this.board.

From there, we can simply call the method.

Once this happens, the game's board will be drawn in the browser.

Next, we have to call the drawHTMLToken method on the activeToken.

Well, we wrote the getter method to find active token, but

how do we access that from inside the Game class?

Recall that you also wrote a getter method for the active player.

At the games beginning, you know the activePlayer is Player 1 because you set

the active property for Player 1 to true when you initialized that object.

But to access the active player in a dynamic way, we'll use the getter method.

this.activePlayer will return the player whose turn it is, and

this.activePlayer.activeToken will return the token object that's now in play.

Finally, we set the game's ready property to true, and that's it.

Take a moment to pause and make sure your startGame method matches what you see on

screen and celebrate your accomplishment.

Then comeback to see the game in its current state in the browser.

All right,

if you're ready to move forward drag your index.html file to a new browser tab.

Look at that, our game is loaded in the browser.

Let's see what happens when I click the Start game button.

Cool, our game board and token are here in our browser.

Of course, we can't interact with it yet, but that's okay.

Join me in the next stage to start building out that interactive

functionality.

Now if your game isn't loading properly, head to the Treehouse community and

reach out to your fellow students.

All of the project files for

each type of the course have been provided to you as well.

Feel free to go back and try to figure out where your code has diverged or

an error was made, or

simply start fresh with the correct code at the beginning of the next stage.

I've been having a lot of fun building this with you, and

I hope you're excited to keep going.

See you soon.