- Connecting with the DOM
- Connecting with the DOM Solution 3:21
- Rendering Spaces
- Render the Board
- Render the Token
- Rendering the Spaces, Board, and Tokens Solution 5:11
- `Write Getter Methods for unusedTokens, activePlayer and activeToken
- Getter Methods Solution 2:44
- Build the startGame() Method
- startGame() Method Solution 2:53
- Reviewing Rendering the Game 5 questions
Preview
Video Player
00:00
00:00
Connecting with the DOM Solution
3:21See the solution for connecting the objects to the DOM
Hi, again.
0:00
Before we get started, make sure you've
opened up your app.js and game.js files.
0:01
Let's start with app.js.
0:06
This file is where we'll listen for
user triggered events,
0:08
like if a player clicks their mouse or
presses a key.
0:11
These event handlers will prompt
responses from our objects.
0:14
Up until now, our game has existed
without a connection to the DOM.
0:18
It can't be seen on the screen or
interacted with.
0:22
Our app.js file is the bridge between
the visual aspect of the game,
0:25
the HTML and css, and
the objects we've created so far.
0:29
Inside the HTML for the game, there is
a button element with the id begin game.
0:33
The game should begin when
this button is clicked.
0:38
As outlined in this assignment
in the previous step,
0:41
this requires three different
actions on your part.
0:44
Create the game object, write a start
game method on the game class, and
0:46
call this method inside
the click event handler.
0:51
So first, let's create the new
game object in the app.js file.
0:54
Next, you are asked to create an empty
method in the game.js file called
1:04
start game.
1:08
Let's move over to game.js and
make some space to declare the method.
1:09
Let's not forget to document it.
1:19
Since this method doesn't receive
any arguments or return anything,
1:21
the only documentation that's needed
is a short description of the method.
1:24
This way,
1:28
anyone reading your code would be able to
quickly ascertain what this method does.
1:29
Okay, that's all we'll do for now.
1:42
As we move forward with
the development of this app,
1:44
a few things will happen
inside this method.
1:46
But let's not get ahead of ourselves.
1:48
For now, let's head back to app.js and
1:50
finish connecting the begin
game button to the game files.
1:52
The HTML id attribute for
the button is begin game.
1:57
Let's grab this element using the dom
object method getElementById.
2:01
Then, we'll call the dom method
addEventListener on the element,
2:09
pass in the argument click to tell it
we're listening for a click event.
2:13
And then,
pass in the callback function, or
2:17
the function that's executed
after this click event.
2:20
All we have to do inside the callback
function is call our newly created
2:23
startGame method on the game object that
we initialized at the top of this file.
2:27
Of course, if a user were to
click the begin-game button now,
2:31
nothing would happen.
2:34
The startGame method is empty.
2:35
That method will be filled out
by the end of the stage, but
2:37
we have some other work to do before then.
2:40
Inside this callback function, we also
need to add in the dom scripts to show
2:42
the board and first token after
the beginGame button is clicked.
2:46
That code was provided in
the previous instruction step.
2:50
Just double check that you've included
it inside the callback function here.
2:53
I'll copy and paste it in.
2:57
Okay, take a moment to make sure your
solution matches what you see on screen.
3:00
If you have any questions, don't hesitate
to reach out in the Tree House Community.
3:05
Once your code is squared up,
3:09
it's time to start putting together
a visual representation of the game.
3:11
So in the next three instructions steps,
3:14
you're going to be writing
what I call render methods.
3:16
Talk to you soon.
3:19