1
00:00:00,000 --> 00:00:03,976
Welcome back, let's talk about the Board
and Space constructor methods.

2
00:00:03,976 --> 00:00:06,830
Jump over to the Board.js file.

3
00:00:06,830 --> 00:00:09,711
You should feel pretty confident with
class declarations at this point in

4
00:00:09,711 --> 00:00:10,274
this course.

5
00:00:10,274 --> 00:00:14,060
But just in case,
double-check your syntax against mine.

6
00:00:14,060 --> 00:00:18,432
The constructor method for the Board.js
file is pretty simple, so as you can see,

7
00:00:18,432 --> 00:00:20,127
I've preloaded the solution.

8
00:00:20,127 --> 00:00:23,628
You might have noticed that no arguments
are passed to the constructor method.

9
00:00:23,628 --> 00:00:26,786
This is because each game will
only have one Board object, and

10
00:00:26,786 --> 00:00:29,834
we're statically setting
the number of rows and columns.

11
00:00:29,834 --> 00:00:33,313
In future more advanced versions of
this game, we could design it so

12
00:00:33,313 --> 00:00:36,986
that the user could set the board size
to any number of rows and columns.

13
00:00:36,986 --> 00:00:39,880
And all aspects of the game
would be adjusted as needed.

14
00:00:39,880 --> 00:00:43,845
A feature like that would add many
layers of complication to the game.

15
00:00:43,845 --> 00:00:46,456
But if you're feeling
adventurous after this course,

16
00:00:46,456 --> 00:00:48,408
I really recommend that you give it a try.

17
00:00:48,408 --> 00:00:52,635
In the meantime, we're going to
stick with 6 rows and 7 columns, and

18
00:00:52,635 --> 00:00:55,745
set those figures in
the Board constructor method.

19
00:00:55,745 --> 00:00:59,752
Now I've set the spaces
property to an empty array.

20
00:00:59,752 --> 00:01:03,612
This should seem really similar to how
you define the tokens property inside

21
00:01:03,612 --> 00:01:05,609
the Player class constructor method.

22
00:01:05,609 --> 00:01:09,525
In the next step, you're going to build
the method that generates the spaces to

23
00:01:09,525 --> 00:01:13,799
populate this array, and set this property
to the return value from that method call.

24
00:01:13,799 --> 00:01:18,390
But for now, just keep the property
value set to the empty array.

25
00:01:18,390 --> 00:01:22,522
Once your constructor method for the Board
class matches what you see on screen,

26
00:01:22,522 --> 00:01:24,236
head over to the Space.js file.

27
00:01:24,236 --> 00:01:27,953
And keep watching to see the solution for
the Space class constructor method.

28
00:01:30,110 --> 00:01:33,426
This constructor method is a bit more
complicated than the Board class

29
00:01:33,426 --> 00:01:35,514
constructor, so we'll code it together.

30
00:01:35,514 --> 00:01:40,108
Hopefully your class declaration matches
mine, but if not, pause here and

31
00:01:40,108 --> 00:01:41,627
take a moment to sync up.

32
00:01:41,627 --> 00:01:46,085
So inside the Space class declaration, I'm
going to write in an empty constructor.

33
00:01:49,322 --> 00:01:53,965
The first two properties we will define
in the construction method are x and y.

34
00:01:53,965 --> 00:01:57,352
These are the coordinate values
of the Space on the board,

35
00:01:57,352 --> 00:02:00,409
this way we know what Space
object is located where.

36
00:02:00,409 --> 00:02:04,268
This is really important to know when
it comes time to dropping tokens into

37
00:02:04,268 --> 00:02:04,897
the board.

38
00:02:04,897 --> 00:02:08,442
When we create the Space objects in
the creator method in the next step,

39
00:02:08,442 --> 00:02:10,229
we'll be passing these values in.

40
00:02:10,229 --> 00:02:13,518
So for now, I'll set the constructor
method up to receive the x and

41
00:02:13,518 --> 00:02:15,065
y values and set the properties

42
00:02:21,784 --> 00:02:24,123
Let's talk about the id property now.

43
00:02:24,123 --> 00:02:28,931
If you recall, the token objects we built
previously have HTML representations that

44
00:02:28,931 --> 00:02:32,469
needed unique identifiers, so
they could be styled with CSS or

45
00:02:32,469 --> 00:02:34,291
manipulated with JavaScript.

46
00:02:34,291 --> 00:02:36,483
The Space objects are no different.

47
00:02:36,483 --> 00:02:41,433
So the id property for the Space objects
will be set to a template literal that is

48
00:02:41,433 --> 00:02:46,161
a concatenation of the word space and
the Space's x and y property values.

49
00:02:46,161 --> 00:02:50,534
Template literals make it easy to create
string values that use variables inside

50
00:02:50,534 --> 00:02:51,252
the string.

51
00:02:51,252 --> 00:02:54,437
For a template literal to work,
it needs to be enclose in back ticks.

52
00:02:54,437 --> 00:02:58,938
Note the difference between a back tick
and a regular single quotation mark.

53
00:02:58,938 --> 00:03:02,295
The final property to set right
now is the token property.

54
00:03:02,295 --> 00:03:05,462
The token property is way
to represent whether or

55
00:03:05,462 --> 00:03:07,864
not a given Space is holding a token.

56
00:03:07,864 --> 00:03:08,672
In other words,

57
00:03:08,672 --> 00:03:12,260
it's a way to tell if a token has been
dropped in to that particular Space.

58
00:03:12,260 --> 00:03:16,020
Since the board is empty of
tokens when the game begins,

59
00:03:16,020 --> 00:03:19,868
each Space will have a null value for
the token property.

60
00:03:19,868 --> 00:03:23,617
Eventually, when a token is dropped
into a Space, the value for

61
00:03:23,617 --> 00:03:28,352
that Space's token property will be set
to the token object the space contains.

62
00:03:28,352 --> 00:03:29,933
Okay, great job.

63
00:03:29,933 --> 00:03:34,051
By now, you've declared all five of the
classes that we'll use to run the game.

64
00:03:34,051 --> 00:03:37,795
You've also built the constructor
methods for four of these classes.

65
00:03:37,795 --> 00:03:40,861
The building blocks of this game
are quickly coming together.

66
00:03:40,861 --> 00:03:44,234
I encourage you to take a moment and check
out the Treehouse Community to chat with

67
00:03:44,234 --> 00:03:46,030
other students about the game's design.

68
00:03:46,030 --> 00:03:49,521
Things you would've done differently,
or things you're not sure about.

69
00:03:49,521 --> 00:03:52,703
If you're able to help answer
any fellow students questions,

70
00:03:52,703 --> 00:03:54,211
I really encourage that too.

71
00:03:54,211 --> 00:03:58,719
When you're ready, head to the next
step to build the create spaces method.