Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.

Preview

Start a free Basic trial
to watch this video

Sign up for Treehouse

Board and Space Class Constructor Methods Solution

3:58 with Ashley Boucher

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}`;

MDN Docs - Template Literals

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