1
00:00:00,069 --> 00:00:01,136
Hi, again.

2
00:00:01,136 --> 00:00:06,458
Before we get started, make sure you've
opened up your app.js and game.js files.

3
00:00:06,458 --> 00:00:08,608
Let's start with app.js.

4
00:00:08,608 --> 00:00:11,703
This file is where we'll listen for
user triggered events,

5
00:00:11,703 --> 00:00:14,383
like if a player clicks their mouse or
presses a key.

6
00:00:14,383 --> 00:00:18,209
These event handlers will prompt
responses from our objects.

7
00:00:18,209 --> 00:00:22,020
Up until now, our game has existed
without a connection to the DOM.

8
00:00:22,020 --> 00:00:25,148
It can't be seen on the screen or
interacted with.

9
00:00:25,148 --> 00:00:29,793
Our app.js file is the bridge between
the visual aspect of the game,

10
00:00:29,793 --> 00:00:33,650
the HTML and css, and
the objects we've created so far.

11
00:00:33,650 --> 00:00:38,627
Inside the HTML for the game, there is
a button element with the id begin game.

12
00:00:38,627 --> 00:00:41,302
The game should begin when
this button is clicked.

13
00:00:41,302 --> 00:00:44,102
As outlined in this assignment
in the previous step,

14
00:00:44,102 --> 00:00:46,913
this requires three different
actions on your part.

15
00:00:46,913 --> 00:00:51,466
Create the game object, write a start
game method on the game class, and

16
00:00:51,466 --> 00:00:54,616
call this method inside
the click event handler.

17
00:00:54,616 --> 00:00:58,677
So first, let's create the new
game object in the app.js file.

18
00:01:04,132 --> 00:01:08,552
Next, you are asked to create an empty
method in the game.js file called

19
00:01:08,552 --> 00:01:09,352
start game.

20
00:01:09,352 --> 00:01:13,029
Let's move over to game.js and
make some space to declare the method.

21
00:01:19,653 --> 00:01:21,317
Let's not forget to document it.

22
00:01:21,317 --> 00:01:24,888
Since this method doesn't receive
any arguments or return anything,

23
00:01:24,888 --> 00:01:28,767
the only documentation that's needed
is a short description of the method.

24
00:01:28,767 --> 00:01:29,286
This way,

25
00:01:29,286 --> 00:01:33,345
anyone reading your code would be able to
quickly ascertain what this method does.

26
00:01:42,502 --> 00:01:44,115
Okay, that's all we'll do for now.

27
00:01:44,115 --> 00:01:46,384
As we move forward with
the development of this app,

28
00:01:46,384 --> 00:01:48,353
a few things will happen
inside this method.

29
00:01:48,353 --> 00:01:50,108
But let's not get ahead of ourselves.

30
00:01:50,108 --> 00:01:52,377
For now, let's head back to app.js and

31
00:01:52,377 --> 00:01:55,726
finish connecting the begin
game button to the game files.

32
00:01:57,003 --> 00:02:01,050
The HTML id attribute for
the button is begin game.

33
00:02:01,050 --> 00:02:05,516
Let's grab this element using the dom
object method getElementById.

34
00:02:09,899 --> 00:02:13,588
Then, we'll call the dom method
addEventListener on the element,

35
00:02:13,588 --> 00:02:17,477
pass in the argument click to tell it
we're listening for a click event.

36
00:02:17,477 --> 00:02:20,045
And then,
pass in the callback function, or

37
00:02:20,045 --> 00:02:23,232
the function that's executed
after this click event.

38
00:02:23,232 --> 00:02:27,142
All we have to do inside the callback
function is call our newly created

39
00:02:27,142 --> 00:02:31,596
startGame method on the game object that
we initialized at the top of this file.

40
00:02:31,596 --> 00:02:34,542
Of course, if a user were to
click the begin-game button now,

41
00:02:34,542 --> 00:02:35,661
nothing would happen.

42
00:02:35,661 --> 00:02:37,522
The startGame method is empty.

43
00:02:37,522 --> 00:02:40,471
That method will be filled out
by the end of the stage, but

44
00:02:40,471 --> 00:02:42,630
we have some other work to do before then.

45
00:02:42,630 --> 00:02:46,710
Inside this callback function, we also
need to add in the dom scripts to show

46
00:02:46,710 --> 00:02:50,238
the board and first token after
the beginGame button is clicked.

47
00:02:50,238 --> 00:02:53,589
That code was provided in
the previous instruction step.

48
00:02:53,589 --> 00:02:57,072
Just double check that you've included
it inside the callback function here.

49
00:02:57,072 --> 00:03:00,705
I'll copy and paste it in.

50
00:03:00,705 --> 00:03:05,061
Okay, take a moment to make sure your
solution matches what you see on screen.

51
00:03:05,061 --> 00:03:09,610
If you have any questions, don't hesitate
to reach out in the Tree House Community.

52
00:03:09,610 --> 00:03:11,103
Once your code is squared up,

53
00:03:11,103 --> 00:03:14,885
it's time to start putting together
a visual representation of the game.

54
00:03:14,885 --> 00:03:16,776
So in the next three instructions steps,

55
00:03:16,776 --> 00:03:19,324
you're going to be writing
what I call render methods.

56
00:03:19,324 --> 00:03:21,023
Talk to you soon.