1
00:00:00,414 --> 00:00:02,088
Hey, there.
Welcome back.

2
00:00:02,088 --> 00:00:05,266
The playToken method is
the final step in this stage.

3
00:00:05,266 --> 00:00:07,616
The amount you've accomplished so
far is huge.

4
00:00:07,616 --> 00:00:10,843
I'm really excited to walk through
the playToken method with you, and

5
00:00:10,843 --> 00:00:13,553
then load up a demo of what we've done so
far in the browser.

6
00:00:13,553 --> 00:00:15,355
Let's get started.

7
00:00:15,355 --> 00:00:17,801
Navigate to the game.js file.

8
00:00:17,801 --> 00:00:21,834
The playToken method can be written
immediately below the handleKeyDown

9
00:00:21,834 --> 00:00:22,360
method.

10
00:00:22,360 --> 00:00:25,765
So the first thing I did in this
method was store some things

11
00:00:25,765 --> 00:00:28,420
we'll be using throughout it in variables.

12
00:00:28,420 --> 00:00:29,555
You don't have to do this, of course.

13
00:00:29,555 --> 00:00:32,851
But in this case,
it made my code a lot easier to read and

14
00:00:32,851 --> 00:00:34,580
a lot easier to write, too.

15
00:00:34,580 --> 00:00:37,355
First, I declared
a variable called spaces.

16
00:00:37,355 --> 00:00:43,081
This was set to this.board.spaces,
meaning the spaces variable now holds

17
00:00:43,081 --> 00:00:49,172
a reference to the entire 2D array of
space objects representing the game board.

18
00:00:49,172 --> 00:00:54,107
Next, I stored the active token in
the variable called activeToken.

19
00:00:54,107 --> 00:00:57,697
Then, I declared a variable
called targetColumn.

20
00:00:57,697 --> 00:01:00,164
We know what column
the active token is over.

21
00:01:00,164 --> 00:01:01,080
If you recall,

22
00:01:01,080 --> 00:01:05,456
this value is stored in the column
location property on the active token.

23
00:01:05,456 --> 00:01:08,314
The column location value is an integer,

24
00:01:08,314 --> 00:01:12,408
anywhere from zero to the total
number of columns minus 1.

25
00:01:12,408 --> 00:01:17,168
By using the column location value
as an index of the spaces array,

26
00:01:17,168 --> 00:01:20,065
we now have access to the target column.

27
00:01:20,065 --> 00:01:24,877
Finally, I declared a variable called
targetSpace, which is set to null.

28
00:01:24,877 --> 00:01:28,392
It's assigned to null because at
the beginning of this method we do

29
00:01:28,392 --> 00:01:29,722
not have a target space.

30
00:01:29,722 --> 00:01:33,820
It's in the next few lines that
we identify this target space.

31
00:01:33,820 --> 00:01:35,809
So to do that, I've used the for

32
00:01:35,809 --> 00:01:41,071
of loop to iterate through the individual
space objects in the target column array.

33
00:01:41,071 --> 00:01:45,784
If the spaces token property is equal
to null, it means the space is empty.

34
00:01:45,784 --> 00:01:48,309
Thus, it's a potential target.

35
00:01:48,309 --> 00:01:52,054
We set our target space equal
to that potential space, and

36
00:01:52,054 --> 00:01:54,814
then move on to the next
space in the array.

37
00:01:54,814 --> 00:01:59,707
At the end of the for loop, the target
space variable will hold the lowest empty

38
00:01:59,707 --> 00:02:03,060
space in that column,
which is now our target space.

39
00:02:04,932 --> 00:02:09,566
Now, if at the end of the loop the target
space variable is still equal to null,

40
00:02:09,566 --> 00:02:11,403
that means the column is full.

41
00:02:12,966 --> 00:02:16,211
The for loop never found an empty
space in the target column.

42
00:02:16,211 --> 00:02:18,919
If that's the case,
then nothing else should happen.

43
00:02:18,919 --> 00:02:23,477
But if it's not the case, and we've
found a target space, then we simply set

44
00:02:23,477 --> 00:02:28,176
the game's ready state to false, and
call the drop method on the active token,

45
00:02:28,176 --> 00:02:30,796
passing in the target
space as a parameter.

46
00:02:30,796 --> 00:02:33,363
We'll get back to
the callback function that we

47
00:02:33,363 --> 00:02:35,422
talked about before in a future step.

48
00:02:35,422 --> 00:02:37,289
Okay, that's all there is to it.

49
00:02:37,289 --> 00:02:39,686
Our playToken method is complete.

50
00:02:39,686 --> 00:02:42,815
Save all your files and
make sure your code matches up.

51
00:02:42,815 --> 00:02:45,717
Now, it's time to see the demo.

52
00:02:45,717 --> 00:02:48,374
I've got the game loaded
up in the browser here.

53
00:02:48,374 --> 00:02:51,796
I'll hit the Begin button to register
that we're starting the game.

54
00:02:51,796 --> 00:02:56,328
Now, we can see the board and
the first player's active token here.

55
00:02:56,328 --> 00:03:00,771
I'm gonna use the right-arrow key to
move the active token across the board.

56
00:03:00,771 --> 00:03:03,986
I'll use the left-arrow
key to move it back.

57
00:03:03,986 --> 00:03:08,196
I'll pick this column here and
hit the down-arrow key to drop the token.

58
00:03:08,196 --> 00:03:10,882
And there's our cool
bouncy animation effect.

59
00:03:10,882 --> 00:03:11,799
Awesome.

60
00:03:11,799 --> 00:03:12,732
But now what?

61
00:03:12,732 --> 00:03:14,159
Where is the next token?

62
00:03:14,159 --> 00:03:16,997
Shouldn't the other player
be able to take a turn?

63
00:03:16,997 --> 00:03:21,507
We'll work out all that game logic that
comes after a token is dropped in the next

64
00:03:21,507 --> 00:03:22,530
and final stage.

65
00:03:22,530 --> 00:03:25,517
You should feel really proud
of how far this game has come.

66
00:03:25,517 --> 00:03:27,630
We're almost to the finish line.

67
00:03:27,630 --> 00:03:31,460
If you tried to demo your own game and
got an error, or something wasn't working,

68
00:03:31,460 --> 00:03:34,137
you should take a break here,
and match up all your code.

69
00:03:34,137 --> 00:03:38,170
If you like, it might be a good time to
open the project files for stage five so

70
00:03:38,170 --> 00:03:41,464
you know you're working with
the right code moving forward.

71
00:03:41,464 --> 00:03:43,303
Great work, and I'll see you soon.