1
00:00:00,000 --> 00:00:01,943
Hi again.
How was that challenge.

2
00:00:01,943 --> 00:00:04,950
In this video we're going
to cover the solutions for

3
00:00:04,950 --> 00:00:08,994
the offset left getter method and
the move left and move right method.

4
00:00:08,994 --> 00:00:11,345
Let's start with the getter method.

5
00:00:11,345 --> 00:00:14,354
Make sure you viewing
your token by JS file.

6
00:00:14,354 --> 00:00:17,910
I like to keep all my getter
methods together inside a class, so

7
00:00:17,910 --> 00:00:21,078
I added this method below
the HTML token getter method.

8
00:00:21,078 --> 00:00:24,474
This is pretty simple one line method.

9
00:00:24,474 --> 00:00:28,029
The HTML token itself is
accessed via the HTML token

10
00:00:28,029 --> 00:00:30,848
getter method using this.htmlToken.

11
00:00:30,848 --> 00:00:33,592
That returns the HTML element.

12
00:00:33,592 --> 00:00:37,561
Then we can access the value
of the elements offset left

13
00:00:37,561 --> 00:00:41,107
property with this.htmltoken.offsetleft.

14
00:00:41,107 --> 00:00:44,261
The entire expression is then returned.

15
00:00:44,261 --> 00:00:46,853
Let's move on.
As part of your assignment you

16
00:00:46,853 --> 00:00:51,193
added a property to the token
class called columnLocation.

17
00:00:51,193 --> 00:00:55,205
This tells us which column of the board
a token is in at any given time.

18
00:00:55,205 --> 00:01:00,172
Initially it's set to 0 because all
tokens first appear in the left

19
00:01:00,172 --> 00:01:02,100
most column of the board.

20
00:01:02,100 --> 00:01:05,895
The move left and move right methods
update this column location value.

21
00:01:05,895 --> 00:01:09,203
So let's start with moveLeft.

22
00:01:09,203 --> 00:01:14,041
This method doesn't receive any arguments
and it doesn't return anything.

23
00:01:14,041 --> 00:01:16,674
Obviously, if the token
is in the first column,

24
00:01:16,674 --> 00:01:20,861
which is the left most column we don't
want it to be able to move any more left.

25
00:01:20,861 --> 00:01:24,607
If we didn't check for this any time
a player hit the left arrow key,

26
00:01:24,607 --> 00:01:27,566
the token would just keep
moving left in the browser,

27
00:01:27,566 --> 00:01:30,747
floating randomly away from
the game board, not ideal.

28
00:01:30,747 --> 00:01:31,503
So to fix this,

29
00:01:31,503 --> 00:01:35,541
we write a simple if statement checking
if the column location is greater than 0.

30
00:01:35,541 --> 00:01:39,673
As the token moves left and right across
the board, this value is updated so

31
00:01:39,673 --> 00:01:42,045
we always know where the token is located.

32
00:01:42,045 --> 00:01:47,249
Now if this condition passes and
the token is able to move to the left,

33
00:01:47,249 --> 00:01:52,571
our next step is to update the left
position of the htmlToken element.

34
00:01:52,571 --> 00:01:56,588
this.htmlToken.style.left is
how we access that value.

35
00:01:56,588 --> 00:01:59,845
Then we set it equal to
the offsetleft value,

36
00:01:59,845 --> 00:02:04,572
which we can get easily with our
getter method minus 76 pixels.

37
00:02:04,572 --> 00:02:08,038
76 pixels is the entire width of a column.

38
00:02:08,038 --> 00:02:13,373
This value is not derived from anything in
particular, it is a value that I pick so

39
00:02:13,373 --> 00:02:18,558
that the board resized well and visually
appealing on a laptop sized browser.

40
00:02:18,558 --> 00:02:23,008
Our next step is to update
the column location property.

41
00:02:23,008 --> 00:02:27,808
Whatever its current value subtract 1 from
it to signify that the token has moved

42
00:02:27,808 --> 00:02:29,230
one column to the left.

43
00:02:30,680 --> 00:02:31,330
Okay, great job.

44
00:02:31,330 --> 00:02:35,450
Take a moment to make sure the code
matches what you see on screen.

45
00:02:35,450 --> 00:02:38,270
If your approach was different
share with others how you

46
00:02:38,270 --> 00:02:40,435
tackled this is the Treehouse Community.

47
00:02:40,435 --> 00:02:43,290
Okay, now let's move on
the the move right method.

48
00:02:43,290 --> 00:02:46,613
This method is basically
an inverse of the moveLeft method.

49
00:02:46,613 --> 00:02:52,187
One significant difference is that this
method receives an argument columns.

50
00:02:52,187 --> 00:02:56,715
When the move right method is called from
inside the game class, the value for

51
00:02:56,715 --> 00:02:59,097
the number of columns will be passed in.

52
00:02:59,097 --> 00:03:05,010
We'll use this value to determine if the
token is in the last or right-most column.

53
00:03:05,010 --> 00:03:06,857
If the token is in the last column,

54
00:03:06,857 --> 00:03:09,543
we don't want it to move
any further to the right.

55
00:03:09,543 --> 00:03:14,990
Our columnLocation counter starts at 0
instead of 1, which is why we're checking

56
00:03:14,990 --> 00:03:19,839
that the column location is less than
the total number of columns minus 1.

57
00:03:21,470 --> 00:03:23,456
Now just like in the moveLeft method,

58
00:03:23,456 --> 00:03:26,510
we update the value of the left
position of the htmlToken.

59
00:03:26,510 --> 00:03:31,750
But in this case we want to add 76 pixels,
not subtract them.

60
00:03:31,750 --> 00:03:35,911
This moves the htmlToken farther
to the right on the board.

61
00:03:35,911 --> 00:03:39,375
Then finally,
we update the column location property so

62
00:03:39,375 --> 00:03:44,590
that it's increased by 1 to signify that
the token has moved 1 column to the right.

63
00:03:44,590 --> 00:03:45,290
Okay, great work.

64
00:03:45,290 --> 00:03:50,184
Pause here to match up your code and
then let's head back to game.js for

65
00:03:50,184 --> 00:03:54,439
a moment to add in the method
calls to moveLeft and moveRight.

66
00:03:54,439 --> 00:03:58,986
Inside the handleKeydown method in
the game class, you added an if statement.

67
00:03:58,986 --> 00:04:04,373
We used comments as a placeholder for
future code inside the if statement.

68
00:04:04,373 --> 00:04:07,663
Now we're ready to fill
in some of that code.

69
00:04:07,663 --> 00:04:09,775
If the key pressed was the left arrow,

70
00:04:09,775 --> 00:04:13,085
we'd like to call the moveLeft
method on the activeToken.

71
00:04:14,442 --> 00:04:19,170
The activeToken is accessed as
a property on the activePlayer object,

72
00:04:19,170 --> 00:04:24,390
which thanks to our getter method is
accessed as a property of the game object.

73
00:04:24,390 --> 00:04:27,748
Don't forget that when we
call the moveRight method,

74
00:04:27,748 --> 00:04:30,230
we have to pass in the number of columns.

75
00:04:30,230 --> 00:04:33,906
The rationale for passing in this
value rather than using a static value

76
00:04:33,906 --> 00:04:37,643
inside the method was that in the future,
the game could be refactored so

77
00:04:37,643 --> 00:04:42,050
that the players could set the number
of columns and rows of the board.

78
00:04:42,050 --> 00:04:46,287
Passing the value makes the game a little
more adaptable to that kind of change and

79
00:04:46,287 --> 00:04:47,545
a little more modular.

80
00:04:47,545 --> 00:04:54,445
The value for the total number of columns
can be accessed by this.board.column.

81
00:04:54,445 --> 00:04:58,237
Remember, the board object is held
in a property of the game object.

82
00:04:58,237 --> 00:05:00,798
The board object has
a property called columns,

83
00:05:00,798 --> 00:05:02,780
where the number of columns is set.

84
00:05:02,780 --> 00:05:03,295
Okay, awesome job.

85
00:05:03,295 --> 00:05:06,745
In the next step,
you're going to write the method for

86
00:05:06,745 --> 00:05:09,377
dropping the token object into a column.

87
00:05:09,377 --> 00:05:10,110
I'm really excited.

88
00:05:10,110 --> 00:05:13,365
This game is really
starting to come together.

89
00:05:13,365 --> 00:05:16,996
I can't wait for us to demo the token
movement at the end of this stage.

90
00:05:16,996 --> 00:05:18,249
See you soon.