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.