1
00:00:00,480 --> 00:00:02,430
Hey again, Ashley here.

2
00:00:02,430 --> 00:00:04,630
Great job tackling the last three steps.

3
00:00:04,630 --> 00:00:08,320
My guess is that the idea of render
methods was probably new to you.

4
00:00:08,320 --> 00:00:11,820
But don't worry, we'll go over
the solution for these methods now.

5
00:00:11,820 --> 00:00:15,020
If you have any questions, hopefully
I'll address them throughout this video.

6
00:00:15,020 --> 00:00:18,000
But if not,
reach out to the Treehouse community.

7
00:00:18,000 --> 00:00:21,465
Working together with your fellow
students not only gives you access to new

8
00:00:21,465 --> 00:00:23,500
perspectives, approaches and ideas, but

9
00:00:23,500 --> 00:00:26,810
when you help someone else you're
reinforcing what you already know.

10
00:00:26,810 --> 00:00:29,097
Okay, you ready?

11
00:00:29,097 --> 00:00:31,026
For the next part of this video,

12
00:00:31,026 --> 00:00:35,080
we'll be going over
the drawSVGSpace method solution.

13
00:00:35,080 --> 00:00:39,000
If you'd like to know a little more about
SVGs before we dive into the solution,

14
00:00:39,000 --> 00:00:39,850
check the teacher's notes.

15
00:00:40,910 --> 00:00:44,200
Go ahead and open up the board.js file.

16
00:00:44,200 --> 00:00:46,650
Remember, when the board
object gets created,

17
00:00:46,650 --> 00:00:51,180
its spaces property is initialized
by calling the createSpaces method

18
00:00:51,180 --> 00:00:54,430
which generates an array of space objects.

19
00:00:54,430 --> 00:00:58,030
Each object in this array needs
an associated space that we can see

20
00:00:58,030 --> 00:00:59,300
on screen.

21
00:00:59,300 --> 00:01:02,180
That's what the drawSVGSpace
method is for.

22
00:01:03,770 --> 00:01:05,930
Let's switch now to the space.js file.

23
00:01:08,500 --> 00:01:13,220
Your first task was to add two properties
to space classes constructor method,

24
00:01:13,220 --> 00:01:15,060
diameter and radius.

25
00:01:16,140 --> 00:01:20,120
Double check that your constructer
method matches what you see on screen.

26
00:01:20,120 --> 00:01:23,250
The diameter property should be set to 76,
and

27
00:01:23,250 --> 00:01:27,800
the radius property set equal
to the diameter divided by 2.

28
00:01:27,800 --> 00:01:31,740
Doing it this way makes your code a little
more dynamic and leaves less room for

29
00:01:31,740 --> 00:01:35,640
error, if you ever want to change
the size of the board or spaces.

30
00:01:36,680 --> 00:01:38,800
Okay, now let's look at the method.

31
00:01:38,800 --> 00:01:42,620
This method doesn't receive any
arguments nor does it return anything.

32
00:01:42,620 --> 00:01:46,120
The code was provided for you, so we'll
move through this part pretty quickly.

33
00:01:46,120 --> 00:01:47,570
To be successful in this course,

34
00:01:47,570 --> 00:01:51,190
it's not important that you
understand how the SVGs work.

35
00:01:51,190 --> 00:01:55,270
On the first line inside the method,
a new SVG element is created and

36
00:01:55,270 --> 00:01:58,400
saved to a variable called svgSpace.

37
00:01:58,400 --> 00:01:59,910
On the seven subsequent lines,

38
00:01:59,910 --> 00:02:04,040
we set various attributes on
the newly created svgSpace.

39
00:02:04,040 --> 00:02:08,970
First, the id attribute, set to
the space object's id property value.

40
00:02:08,970 --> 00:02:11,980
Each of the following attributes
is specific to SVG and

41
00:02:11,980 --> 00:02:15,235
deals with placement, size and
color of the svgSpace.

42
00:02:16,800 --> 00:02:21,540
On the last line of the method we append
the new svgSpace to the document,

43
00:02:21,540 --> 00:02:22,980
thereby showing it on screen.

44
00:02:24,040 --> 00:02:27,375
Pause here to double check that your
code matches what's on screen and

45
00:02:27,375 --> 00:02:30,323
what was provided in the previous step,
then we'll move on.

46
00:02:32,911 --> 00:02:36,810
Okay, let's look at
the drawHTMLBoard method next.

47
00:02:36,810 --> 00:02:38,830
Head back to board.js.

48
00:02:38,830 --> 00:02:39,700
If you recall,

49
00:02:39,700 --> 00:02:44,410
the board objects spaces property is
holding the 2D array of space objects.

50
00:02:44,410 --> 00:02:47,540
Your objective for this step was
to loop through this array and

51
00:02:47,540 --> 00:02:51,890
call the drawSVGSpace method we
just reviewed on each space object.

52
00:02:53,760 --> 00:02:54,780
How did you tackle this loop?

53
00:02:56,160 --> 00:02:57,900
There's a few ways you
could approach this, but

54
00:02:57,900 --> 00:03:00,210
I chose to use the for of method.

55
00:03:00,210 --> 00:03:04,082
In this context you can think of for
of loop syntax as saying for

56
00:03:04,082 --> 00:03:06,350
each element of an array.

57
00:03:06,350 --> 00:03:10,460
To learn more about the syntax and how for
of loops work, check the teacher's notes.

58
00:03:11,580 --> 00:03:15,000
If it helps,
visualize the array as the game board.

59
00:03:15,000 --> 00:03:17,850
Each element of the array
is a column on the board

60
00:03:17,850 --> 00:03:20,170
holding an array of space objects.

61
00:03:20,170 --> 00:03:23,438
The outer for
of loop iterates over each column.

62
00:03:23,438 --> 00:03:28,350
The inner for off loop iterates over
each space object inside the column.

63
00:03:28,350 --> 00:03:31,460
Inside the inner loop we have
access to the space object and

64
00:03:31,460 --> 00:03:32,708
can call the method on it.

65
00:03:34,010 --> 00:03:36,610
Go ahead and
match your code to what you see on screen.

66
00:03:36,610 --> 00:03:39,748
If you used a different array
iteration method, that's totally fine,

67
00:03:39,748 --> 00:03:40,970
no need to change it.

68
00:03:40,970 --> 00:03:43,750
Just make sure the outcome
of your method is the same.

69
00:03:43,750 --> 00:03:46,900
If you're unsure, don't hesitate to
discuss your solution with other

70
00:03:46,900 --> 00:03:49,000
students taking the course and
circle back.

71
00:03:50,490 --> 00:03:52,930
Okay, on to the final render method.

72
00:03:52,930 --> 00:03:58,107
Navigate to your token.js file to look at
your solution to the drawHTMLToken method.

73
00:04:02,040 --> 00:04:04,920
How does it compare to
what you see on screen?

74
00:04:04,920 --> 00:04:07,050
If you aren't very familiar
with dom scripting or

75
00:04:07,050 --> 00:04:09,596
had to look up some solutions here,
that's totally okay.

76
00:04:09,596 --> 00:04:12,020
We'll walk through the solution now.

77
00:04:12,020 --> 00:04:15,310
On the first line inside the method,
we create a new div element and

78
00:04:15,310 --> 00:04:16,890
save it to a variable token.

79
00:04:18,260 --> 00:04:22,980
The second line of this method appends our
new token element to the existing HTML

80
00:04:22,980 --> 00:04:27,690
element game-board-underlay,
found in index.html.

81
00:04:27,690 --> 00:04:32,580
The third and fourth lines set class and
id attributes on the new element.

82
00:04:32,580 --> 00:04:38,060
Note that I'm using this.id to access the
value of the token object's id property,

83
00:04:38,060 --> 00:04:42,007
and pass it as the value for the id
attribute of the element we're creating.

84
00:04:43,850 --> 00:04:47,206
Finally, the color of the token
is set using the token owner's

85
00:04:47,206 --> 00:04:49,190
color property value.

86
00:04:49,190 --> 00:04:51,550
Notice the double dot notation here.

87
00:04:51,550 --> 00:04:53,310
This is how you access properties or

88
00:04:53,310 --> 00:04:57,760
methods of objects that are stored
inside properties of other objects.

89
00:04:57,760 --> 00:05:02,230
The token object has a property called
owner that's holding a player object.

90
00:05:02,230 --> 00:05:05,920
Any of that player object's properties or
methods can be accessed

91
00:05:05,920 --> 00:05:10,660
inside the token class by using
this.owner.property or method name.