Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
See the solution for the Board and Space class constructor methods.
Template Literals
Template literals are an easier way to create a string that has embedded expressions, like a variable, for example.
Previously, you'd have to concatenate a string to a variable like this:
const name = "Ashley"
const newString = "Hello my name is " + name;
With template literals, you can do the same in an easier fashion. Template literals are enclosed in backticks instead of single or double quotes like a regular string. The embedded expression is wrapped in curly braces, and preceded with a dollar sign, right inside the string.
const name = "Ashley"
const newString = `Hello my name is ${name}`;
Solution Code
Board Class Constructor Method
constructor() {
this.rows = 6;
this.columns = 7;
this.spaces = [];
}
Space Class Constructor Method
constructor(x, y) {
this.x = x;
this.y = y;
this.id = `space-${x}-${y}`;
this.token = null;
}
Welcome back, let's talk about the Board
and Space constructor methods.
0:00
Jump over to the Board.js file.
0:03
You should feel pretty confident with
class declarations at this point in
0:06
this course.
0:09
But just in case,
double-check your syntax against mine.
0:10
The constructor method for the Board.js
file is pretty simple, so as you can see,
0:14
I've preloaded the solution.
0:18
You might have noticed that no arguments
are passed to the constructor method.
0:20
This is because each game will
only have one Board object, and
0:23
we're statically setting
the number of rows and columns.
0:26
In future more advanced versions of
this game, we could design it so
0:29
that the user could set the board size
to any number of rows and columns.
0:33
And all aspects of the game
would be adjusted as needed.
0:36
A feature like that would add many
layers of complication to the game.
0:39
But if you're feeling
adventurous after this course,
0:43
I really recommend that you give it a try.
0:46
In the meantime, we're going to
stick with 6 rows and 7 columns, and
0:48
set those figures in
the Board constructor method.
0:52
Now I've set the spaces
property to an empty array.
0:55
This should seem really similar to how
you define the tokens property inside
0:59
the Player class constructor method.
1:03
In the next step, you're going to build
the method that generates the spaces to
1:05
populate this array, and set this property
to the return value from that method call.
1:09
But for now, just keep the property
value set to the empty array.
1:13
Once your constructor method for the Board
class matches what you see on screen,
1:18
head over to the Space.js file.
1:22
And keep watching to see the solution for
the Space class constructor method.
1:24
This constructor method is a bit more
complicated than the Board class
1:30
constructor, so we'll code it together.
1:33
Hopefully your class declaration matches
mine, but if not, pause here and
1:35
take a moment to sync up.
1:40
So inside the Space class declaration, I'm
going to write in an empty constructor.
1:41
The first two properties we will define
in the construction method are x and y.
1:49
These are the coordinate values
of the Space on the board,
1:53
this way we know what Space
object is located where.
1:57
This is really important to know when
it comes time to dropping tokens into
2:00
the board.
2:04
When we create the Space objects in
the creator method in the next step,
2:04
we'll be passing these values in.
2:08
So for now, I'll set the constructor
method up to receive the x and
2:10
y values and set the properties
2:13
Let's talk about the id property now.
2:21
If you recall, the token objects we built
previously have HTML representations that
2:24
needed unique identifiers, so
they could be styled with CSS or
2:28
manipulated with JavaScript.
2:32
The Space objects are no different.
2:34
So the id property for the Space objects
will be set to a template literal that is
2:36
a concatenation of the word space and
the Space's x and y property values.
2:41
Template literals make it easy to create
string values that use variables inside
2:46
the string.
2:50
For a template literal to work,
it needs to be enclose in back ticks.
2:51
Note the difference between a back tick
and a regular single quotation mark.
2:54
The final property to set right
now is the token property.
2:58
The token property is way
to represent whether or
3:02
not a given Space is holding a token.
3:05
In other words,
3:07
it's a way to tell if a token has been
dropped in to that particular Space.
3:08
Since the board is empty of
tokens when the game begins,
3:12
each Space will have a null value for
the token property.
3:16
Eventually, when a token is dropped
into a Space, the value for
3:19
that Space's token property will be set
to the token object the space contains.
3:23
Okay, great job.
3:28
By now, you've declared all five of the
classes that we'll use to run the game.
3:29
You've also built the constructor
methods for four of these classes.
3:34
The building blocks of this game
are quickly coming together.
3:37
I encourage you to take a moment and check
out the Treehouse Community to chat with
3:40
other students about the game's design.
3:44
Things you would've done differently,
or things you're not sure about.
3:46
If you're able to help answer
any fellow students questions,
3:49
I really encourage that too.
3:52
When you're ready, head to the next
step to build the create spaces method.
3:54
You need to sign up for Treehouse in order to download course files.
Sign up