- 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
Rendering the Spaces, Board, and Tokens Solution
5:11See the solution for rendering the Space, Board, and Token objects.
Hey again, Ashley here.
0:00
Great job tackling the last three steps.
0:02
My guess is that the idea of render
methods was probably new to you.
0:04
But don't worry, we'll go over
the solution for these methods now.
0:08
If you have any questions, hopefully
I'll address them throughout this video.
0:11
But if not,
reach out to the Treehouse community.
0:15
Working together with your fellow
students not only gives you access to new
0:18
perspectives, approaches and ideas, but
0:21
when you help someone else you're
reinforcing what you already know.
0:23
Okay, you ready?
0:26
For the next part of this video,
0:29
we'll be going over
the drawSVGSpace method solution.
0:31
If you'd like to know a little more about
SVGs before we dive into the solution,
0:35
check the teacher's notes.
0:39
Go ahead and open up the board.js file.
0:40
Remember, when the board
object gets created,
0:44
its spaces property is initialized
by calling the createSpaces method
0:46
which generates an array of space objects.
0:51
Each object in this array needs
an associated space that we can see
0:54
on screen.
0:58
That's what the drawSVGSpace
method is for.
0:59
Let's switch now to the space.js file.
1:03
Your first task was to add two properties
to space classes constructor method,
1:08
diameter and radius.
1:13
Double check that your constructer
method matches what you see on screen.
1:16
The diameter property should be set to 76,
and
1:20
the radius property set equal
to the diameter divided by 2.
1:23
Doing it this way makes your code a little
more dynamic and leaves less room for
1:27
error, if you ever want to change
the size of the board or spaces.
1:31
Okay, now let's look at the method.
1:36
This method doesn't receive any
arguments nor does it return anything.
1:38
The code was provided for you, so we'll
move through this part pretty quickly.
1:42
To be successful in this course,
1:46
it's not important that you
understand how the SVGs work.
1:47
On the first line inside the method,
a new SVG element is created and
1:51
saved to a variable called svgSpace.
1:55
On the seven subsequent lines,
1:58
we set various attributes on
the newly created svgSpace.
1:59
First, the id attribute, set to
the space object's id property value.
2:04
Each of the following attributes
is specific to SVG and
2:08
deals with placement, size and
color of the svgSpace.
2:11
On the last line of the method we append
the new svgSpace to the document,
2:16
thereby showing it on screen.
2:21
Pause here to double check that your
code matches what's on screen and
2:24
what was provided in the previous step,
then we'll move on.
2:27
Okay, let's look at
the drawHTMLBoard method next.
2:32
Head back to board.js.
2:36
If you recall,
2:38
the board objects spaces property is
holding the 2D array of space objects.
2:39
Your objective for this step was
to loop through this array and
2:44
call the drawSVGSpace method we
just reviewed on each space object.
2:47
How did you tackle this loop?
2:53
There's a few ways you
could approach this, but
2:56
I chose to use the for of method.
2:57
In this context you can think of for
of loop syntax as saying for
3:00
each element of an array.
3:04
To learn more about the syntax and how for
of loops work, check the teacher's notes.
3:06
If it helps,
visualize the array as the game board.
3:11
Each element of the array
is a column on the board
3:15
holding an array of space objects.
3:17
The outer for
of loop iterates over each column.
3:20
The inner for off loop iterates over
each space object inside the column.
3:23
Inside the inner loop we have
access to the space object and
3:28
can call the method on it.
3:31
Go ahead and
match your code to what you see on screen.
3:34
If you used a different array
iteration method, that's totally fine,
3:36
no need to change it.
3:39
Just make sure the outcome
of your method is the same.
3:40
If you're unsure, don't hesitate to
discuss your solution with other
3:43
students taking the course and
circle back.
3:46
Okay, on to the final render method.
3:50
Navigate to your token.js file to look at
your solution to the drawHTMLToken method.
3:52
How does it compare to
what you see on screen?
4:02
If you aren't very familiar
with dom scripting or
4:04
had to look up some solutions here,
that's totally okay.
4:07
We'll walk through the solution now.
4:09
On the first line inside the method,
we create a new div element and
4:12
save it to a variable token.
4:15
The second line of this method appends our
new token element to the existing HTML
4:18
element game-board-underlay,
found in index.html.
4:22
The third and fourth lines set class and
id attributes on the new element.
4:27
Note that I'm using this.id to access the
value of the token object's id property,
4:32
and pass it as the value for the id
attribute of the element we're creating.
4:38
Finally, the color of the token
is set using the token owner's
4:43
color property value.
4:47
Notice the double dot notation here.
4:49
This is how you access properties or
4:51
methods of objects that are stored
inside properties of other objects.
4:53
The token object has a property called
owner that's holding a player object.
4:57
Any of that player object's properties or
methods can be accessed
5:02
inside the token class by using
this.owner.property or method name.
5:05