Hi again. How was that challenge.

In this video we're going to cover the solutions for

the offset left getter method and the move left and move right method.

Let's start with the getter method.

Make sure you viewing your token by JS file.

I like to keep all my getter methods together inside a class, so

I added this method below the HTML token getter method.

This is pretty simple one line method.

The HTML token itself is accessed via the HTML token

getter method using this.htmlToken.

That returns the HTML element.

Then we can access the value of the elements offset left

property with this.htmltoken.offsetleft.

The entire expression is then returned.

Let's move on. As part of your assignment you

added a property to the token class called columnLocation.

This tells us which column of the board a token is in at any given time.

Initially it's set to 0 because all tokens first appear in the left

most column of the board.

The move left and move right methods update this column location value.

So let's start with moveLeft.

This method doesn't receive any arguments and it doesn't return anything.

Obviously, if the token is in the first column,

which is the left most column we don't want it to be able to move any more left.

If we didn't check for this any time a player hit the left arrow key,

the token would just keep moving left in the browser,

floating randomly away from the game board, not ideal.

So to fix this,

we write a simple if statement checking if the column location is greater than 0.

As the token moves left and right across the board, this value is updated so

we always know where the token is located.

Now if this condition passes and the token is able to move to the left,

our next step is to update the left position of the htmlToken element.

this.htmlToken.style.left is how we access that value.

Then we set it equal to the offsetleft value,

which we can get easily with our getter method minus 76 pixels.

76 pixels is the entire width of a column.

This value is not derived from anything in particular, it is a value that I pick so

that the board resized well and visually appealing on a laptop sized browser.

Our next step is to update the column location property.

Whatever its current value subtract 1 from it to signify that the token has moved

one column to the left.

Okay, great job.

Take a moment to make sure the code matches what you see on screen.

If your approach was different share with others how you

tackled this is the Treehouse Community.

Okay, now let's move on the the move right method.

This method is basically an inverse of the moveLeft method.

One significant difference is that this method receives an argument columns.

When the move right method is called from inside the game class, the value for

the number of columns will be passed in.

We'll use this value to determine if the token is in the last or right-most column.

If the token is in the last column,

we don't want it to move any further to the right.

Our columnLocation counter starts at 0 instead of 1, which is why we're checking

that the column location is less than the total number of columns minus 1.

Now just like in the moveLeft method,

we update the value of the left position of the htmlToken.

But in this case we want to add 76 pixels, not subtract them.

This moves the htmlToken farther to the right on the board.

Then finally, we update the column location property so

that it's increased by 1 to signify that the token has moved 1 column to the right.

Okay, great work.

Pause here to match up your code and then let's head back to game.js for

a moment to add in the method calls to moveLeft and moveRight.

Inside the handleKeydown method in the game class, you added an if statement.

We used comments as a placeholder for future code inside the if statement.

Now we're ready to fill in some of that code.

If the key pressed was the left arrow,

we'd like to call the moveLeft method on the activeToken.

The activeToken is accessed as a property on the activePlayer object,

which thanks to our getter method is accessed as a property of the game object.

Don't forget that when we call the moveRight method,

we have to pass in the number of columns.

The rationale for passing in this value rather than using a static value

inside the method was that in the future, the game could be refactored so

that the players could set the number of columns and rows of the board.

Passing the value makes the game a little more adaptable to that kind of change and

a little more modular.

The value for the total number of columns can be accessed by this.board.column.

Remember, the board object is held in a property of the game object.

The board object has a property called columns,

where the number of columns is set.

Okay, awesome job.

In the next step, you're going to write the method for

dropping the token object into a column.

I'm really excited.

This game is really starting to come together.

I can't wait for us to demo the token movement at the end of this stage.

See you soon.