moveLeft() and moveRight() Methods Solution

Hi again. How was that challenge. 0:00 In this video we're going to cover the solutions for 0:01 the offset left getter method and the move left and move right method. 0:04 Let's start with the getter method. 0:08 Make sure you viewing your token by JS file. 0:11 I like to keep all my getter methods together inside a class, so 0:14 I added this method below the HTML token getter method. 0:17 This is pretty simple one line method. 0:21 The HTML token itself is accessed via the HTML token 0:24 getter method using this.htmlToken. 0:28 That returns the HTML element. 0:30 Then we can access the value of the elements offset left 0:33 property with this.htmltoken.offsetleft. 0:37 The entire expression is then returned. 0:41 Let's move on. As part of your assignment you 0:44 added a property to the token class called columnLocation. 0:46 This tells us which column of the board a token is in at any given time. 0:51 Initially it's set to 0 because all tokens first appear in the left 0:55 most column of the board. 1:00 The move left and move right methods update this column location value. 1:02 So let's start with moveLeft. 1:05 This method doesn't receive any arguments and it doesn't return anything. 1:09 Obviously, if the token is in the first column, 1:14 which is the left most column we don't want it to be able to move any more left. 1:16 If we didn't check for this any time a player hit the left arrow key, 1:20 the token would just keep moving left in the browser, 1:24 floating randomly away from the game board, not ideal. 1:27 So to fix this, 1:30 we write a simple if statement checking if the column location is greater than 0. 1:31 As the token moves left and right across the board, this value is updated so 1:35 we always know where the token is located. 1:39 Now if this condition passes and the token is able to move to the left, 1:42 our next step is to update the left position of the htmlToken element. 1:47 this.htmlToken.style.left is how we access that value. 1:52 Then we set it equal to the offsetleft value, 1:56 which we can get easily with our getter method minus 76 pixels. 1:59 76 pixels is the entire width of a column. 2:04 This value is not derived from anything in particular, it is a value that I pick so 2:08 that the board resized well and visually appealing on a laptop sized browser. 2:13 Our next step is to update the column location property. 2:18 Whatever its current value subtract 1 from it to signify that the token has moved 2:23 one column to the left. 2:27 Okay, great job. 2:30 Take a moment to make sure the code matches what you see on screen. 2:31 If your approach was different share with others how you 2:35 tackled this is the Treehouse Community. 2:38 Okay, now let's move on the the move right method. 2:40 This method is basically an inverse of the moveLeft method. 2:43 One significant difference is that this method receives an argument columns. 2:46 When the move right method is called from inside the game class, the value for 2:52 the number of columns will be passed in. 2:56 We'll use this value to determine if the token is in the last or right-most column. 2:59 If the token is in the last column, 3:05 we don't want it to move any further to the right. 3:06 Our columnLocation counter starts at 0 instead of 1, which is why we're checking 3:09 that the column location is less than the total number of columns minus 1. 3:14 Now just like in the moveLeft method, 3:21 we update the value of the left position of the htmlToken. 3:23 But in this case we want to add 76 pixels, not subtract them. 3:26 This moves the htmlToken farther to the right on the board. 3:31 Then finally, we update the column location property so 3:35 that it's increased by 1 to signify that the token has moved 1 column to the right. 3:39 Okay, great work. 3:44 Pause here to match up your code and then let's head back to game.js for 3:45 a moment to add in the method calls to moveLeft and moveRight. 3:50 Inside the handleKeydown method in the game class, you added an if statement. 3:54 We used comments as a placeholder for future code inside the if statement. 3:58 Now we're ready to fill in some of that code. 4:04 If the key pressed was the left arrow, 4:07 we'd like to call the moveLeft method on the activeToken. 4:09 The activeToken is accessed as a property on the activePlayer object, 4:14 which thanks to our getter method is accessed as a property of the game object. 4:19 Don't forget that when we call the moveRight method, 4:24 we have to pass in the number of columns. 4:27 The rationale for passing in this value rather than using a static value 4:30 inside the method was that in the future, the game could be refactored so 4:33 that the players could set the number of columns and rows of the board. 4:37 Passing the value makes the game a little more adaptable to that kind of change and 4:42 a little more modular. 4:46 The value for the total number of columns can be accessed by this.board.column. 4:47 Remember, the board object is held in a property of the game object. 4:54 The board object has a property called columns, 4:58 where the number of columns is set. 5:00 Okay, awesome job. 5:02 In the next step, you're going to write the method for 5:03 dropping the token object into a column. 5:06 I'm really excited. 5:09 This game is really starting to come together. 5:10 I can't wait for us to demo the token movement at the end of this stage. 5:13 See you soon. 5:16