WEBVTT

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.