1
00:00:00,240 --> 00:00:07,000
This lesson, we are going to be updating our dice game and we built out a dice scheme earlier on,

2
00:00:07,140 --> 00:00:13,290
so now we're adding in those visible dice that we're creating and generating using JavaScript.

3
00:00:13,650 --> 00:00:19,050
You can pause the video and take what you've learned in the earlier lessons and apply it in this lesson.

4
00:00:19,380 --> 00:00:25,950
And in this in your you can take what you've learned in the earlier lessons and apply it within the

5
00:00:25,950 --> 00:00:27,300
game that you're building out.

6
00:00:27,300 --> 00:00:32,880
You can pause the video, try it out for yourself, and I'll walk you through how to update and how

7
00:00:32,880 --> 00:00:36,330
to add in that functionality that we had in the earlier lessons.

8
00:00:36,600 --> 00:00:43,580
So now what we want to happen is we want to have, again, that check to see which player wins.

9
00:00:43,860 --> 00:00:49,460
So the roll of the dice, which dice wins and then the player that is actually scoring and winning.

10
00:00:49,740 --> 00:00:52,280
So we want to add all of that functionality back in.

11
00:00:52,590 --> 00:00:58,460
So opening up our ED, we can keep this selection part and we need to add in.

12
00:00:58,830 --> 00:01:03,560
So we need to add in back in the ability to update these elements.

13
00:01:03,870 --> 00:01:06,120
So we need to make a selection of those elements.

14
00:01:06,870 --> 00:01:14,700
And we'll do the same thing that we had earlier where we had query selector and using the hash and then

15
00:01:14,850 --> 00:01:16,010
player one.

16
00:01:16,350 --> 00:01:23,250
So this will select a player one element and we can update this as well to say player one and copy it.

17
00:01:24,980 --> 00:01:27,680
And paste it and we'll just update it to be player two.

18
00:01:28,040 --> 00:01:33,490
So now we have the containers elements that we can drop our new function functioning.

19
00:01:33,890 --> 00:01:35,830
We've got our dice roll.

20
00:01:36,110 --> 00:01:39,380
So we're going to update this instead of roll dice.

21
00:01:40,160 --> 00:01:45,040
We've got rolls and this is where we're using that roll variable.

22
00:01:45,440 --> 00:01:47,270
So setting up brandnew.

23
00:01:48,540 --> 00:01:56,730
Larry, that's going to now contain the role and notice that we moved it off of the root level, so

24
00:01:56,730 --> 00:02:03,900
it's no longer a global variable as we can keep roles in here setting up our temp, and we use that

25
00:02:03,900 --> 00:02:06,330
in order to send a message to the user.

26
00:02:06,750 --> 00:02:08,580
So now we've got the two dice rolls.

27
00:02:08,820 --> 00:02:12,780
We need to issue the conditions to see which role wins.

28
00:02:13,080 --> 00:02:21,840
So we've got it within an array where we can check to see if roles one equals roles to or index value

29
00:02:21,840 --> 00:02:23,190
one zero and one.

30
00:02:23,190 --> 00:02:27,870
And if it is, then what we have is a drop so there's no winner.

31
00:02:27,960 --> 00:02:33,530
And then adding in else if and I got a copy this part out and then this will just be else.

32
00:02:33,570 --> 00:02:42,960
So else if and this time we're checking to see if roles index value zero is greater than roles one.

33
00:02:42,960 --> 00:02:49,230
And if it's true then that means that player one wins and else.

34
00:02:49,230 --> 00:02:54,300
And we don't need a condition for this one because there's only one other option and that means that

35
00:02:54,300 --> 00:02:55,890
player two wins.

36
00:02:56,430 --> 00:03:00,780
So now we've got the win conditions and we can check to see who wins.

37
00:03:01,230 --> 00:03:07,560
I'm going to actually remove some of this and create it within a function where we can do an update

38
00:03:07,560 --> 00:03:11,310
output player one and then the value of the roles.

39
00:03:11,310 --> 00:03:18,180
So passing that in and then we're simply going to update the inner HTML so we can copy this out and

40
00:03:18,180 --> 00:03:22,170
I'll update output player to add the value of roles.

41
00:03:22,200 --> 00:03:27,420
And then we're taking that output element and we're updating the entire HTML with whatever the value

42
00:03:27,420 --> 00:03:27,780
of ten.

43
00:03:28,260 --> 00:03:34,110
Now what's happening here is that I'm using the player one, so that's the object that I'm selecting

44
00:03:34,110 --> 00:03:34,380
there.

45
00:03:34,590 --> 00:03:37,200
So that allows me to select the element.

46
00:03:37,320 --> 00:03:43,080
And I'll show you how you can use that dynamically now and we can pass that into the same function where

47
00:03:43,080 --> 00:03:51,090
we can get an update on that element dynamically just by simply passing in that element object as well

48
00:03:51,090 --> 00:03:52,360
as the value of the rules.

49
00:03:52,470 --> 00:03:54,160
So those are the two parameters that we need.

50
00:03:54,570 --> 00:04:02,430
So this is update output and we've got the element as well as the number that was rolled and this is

51
00:04:02,430 --> 00:04:04,730
where we can use the builder.

52
00:04:04,740 --> 00:04:06,150
So let's paste that in.

53
00:04:06,180 --> 00:04:08,210
So this was just the code that I had earlier.

54
00:04:08,580 --> 00:04:15,050
So we've got Holder and we're using the builder method that we had before and using the roll dice.

55
00:04:15,060 --> 00:04:19,800
And in this case, we need to pass in the number because we only have that one number to add in and

56
00:04:19,800 --> 00:04:22,050
it's not going to be attending it to output.

57
00:04:22,230 --> 00:04:24,400
It's going to be appending it to whatever the element.

58
00:04:24,600 --> 00:04:25,950
So this is dynamic now.

59
00:04:25,950 --> 00:04:29,280
It could be element with player one or element with player two.

60
00:04:29,580 --> 00:04:30,260
So we don't know.

61
00:04:30,270 --> 00:04:31,580
So we're going to be adding it in.

62
00:04:31,860 --> 00:04:38,400
And this also needs to be updated that we're updating with Element and we're seeing if it's got any

63
00:04:38,400 --> 00:04:38,910
children.

64
00:04:39,030 --> 00:04:42,030
And if it does, then we're going to remove it out.

65
00:04:42,030 --> 00:04:43,040
And the same thing here.

66
00:04:43,080 --> 00:04:50,340
So element children and then going down to our builder area, we're still building out those dice so

67
00:04:50,340 --> 00:04:52,130
that all is working the same way.

68
00:04:52,620 --> 00:04:55,350
So let's try that out and refresh.

69
00:04:55,710 --> 00:04:56,550
Roll the dice.

70
00:04:56,790 --> 00:05:01,680
And now we've got the actual numbers showing up as a dice within our game.

71
00:05:01,680 --> 00:05:02,820
We've got a draw.

72
00:05:02,850 --> 00:05:07,740
We've got player one wins, player one wins, draw, player one wins and so on.

73
00:05:08,160 --> 00:05:09,480
So you can have some fun with this.

74
00:05:09,480 --> 00:05:15,840
And this was the last part of the dice game challenge where we were challenging you to put everything

75
00:05:15,840 --> 00:05:21,600
together that we've learned in the earlier lessons and build out this fully functional dice game.

76
00:05:21,600 --> 00:05:24,570
Try it out for yourself, build out your own version of the dice game.