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

Token Properties Solution

2:33 with Ashley Boucher

See the solution for the properties that will be used in the Token Class.

Code Correction

The project files for this stage are correct, but what you see on screen is missing something! Can you tell what it is?

I forgot to add in the parameters in the constructor method for index and owner.

The correct code for the constructor method is:

class Token {
    constructor(index, owner){
        this.owner = owner;
        this.id = `token-${index}-${owner.id}`;
        this.dropped = false;
    }
}
  • 0:00

    Let's talk about the token object.

  • 0:01

    If you haven't yet, go ahead and open up the token.js file that you created.

  • 0:07

    Check the syntax of your token class declaration against mine here.

  • 0:11

    Okay, now, let's go ahead and add in our empty constructor method.

  • 0:16

    Okay, so after developing the properties for the player object,

  • 0:20

    you might have found it easier to think about how to organize the token object.

  • 0:25

    That's because a lot of the properties of a token are dependent on the player

  • 0:30

    that owns it.

  • 0:31

    With that in mind, the first property of the token object should be owner.

  • 0:35

    This property will hold a reference to the player object that owns the token.

  • 0:39

    This is useful because now each token will have access to the ID and

  • 0:43

    the color of the player that owns it.

  • 0:45

    Setting it up this way means fewer properties for us to manage later.

  • 0:49

    The reference to the player object is passed in when the player token object

  • 0:53

    is created.

  • 0:54

    Don’t worry about that too much now.

  • 0:56

    You'll be writing that method in the next step.

  • 0:58

    Next, the token object needs an ID property.

  • 1:02

    The main reason a token needs an ID property is because eventually

  • 1:07

    there will be many token objects represented in our HTML.

  • 1:11

    And we'll need to be able to reference each HTML representation

  • 1:15

    individually with an ID for CSS and DOM manipulation purposes.

  • 1:20

    For now, I'll set the ID to token.

  • 1:22

    But this won't work in the long run because each token ID needs to be unique.

  • 1:27

    So how can we do that?

  • 1:28

    When we write the method to create the token objects inside the player class,

  • 1:33

    you'll see that the token objects are all going to be created inside the for loop.

  • 1:39

    On each iteration, a new token will be created.

  • 1:41

    And one way to give each token a unique ID is to pass in the loop index.

  • 1:46

    I can concatenate this index with the string token and

  • 1:50

    then each token object of a given player will now have a unique ID.

  • 1:54

    I'm using template literals to do this.

  • 1:57

    For a refresher on how to use template literals,

  • 2:00

    check the teacher's notes on this video.

  • 2:02

    Now I'm also going to concat the value of the owning player's ID property so

  • 2:08

    we can tell the tokens of each player apart.

  • 2:11

    The final property will be dropped.

  • 2:12

    This will hold a true or false, or Boolean value,

  • 2:16

    that indicates whether or not that token has been played.

  • 2:20

    To start, it will be set to false because none of the tokens have been dropped yet.

  • 2:24

    Okay, now that the token constructor method has been created,

  • 2:28

    move to the next step, where we'll write the method to create all of the tokens.

You need to sign up for Treehouse in order to download course files.

Sign up