1 00:00:00,060 --> 00:00:06,060 This lesson, we're going to start working through how to play the game, so so far in our game, we've 2 00:00:06,060 --> 00:00:11,070 got some content, some HTML elements here and we've got interactive buttons. 3 00:00:11,310 --> 00:00:13,190 So there's a few things that are missing. 4 00:00:13,410 --> 00:00:17,790 So logically, what we're doing is we're starting the game, pressing the start button. 5 00:00:17,940 --> 00:00:22,400 So we want to make sure something is happening here right off the bat starting. 6 00:00:23,340 --> 00:00:25,380 So we're setting up a temporary variable. 7 00:00:25,860 --> 00:00:33,750 We're selecting the information from the target element and getting that inner text that was contained 8 00:00:33,750 --> 00:00:35,090 within that target element. 9 00:00:35,430 --> 00:00:42,210 And if I console logout that information and before we try that out, we need to make sure we're passing 10 00:00:42,210 --> 00:00:44,340 over that event content. 11 00:00:44,730 --> 00:00:51,150 And I'm going to instead of clicked, I'll pass on that event object as E so let's refresh hit start. 12 00:00:51,360 --> 00:00:59,220 And you can see that we've got a mouse event and we are also we know which element triggered the event 13 00:00:59,580 --> 00:01:02,340 and we're selecting that using E target. 14 00:01:02,490 --> 00:01:05,670 So that's the target element that triggered off the event. 15 00:01:05,880 --> 00:01:12,060 And then within each one of these target elements, we can see we can select that inner text there. 16 00:01:12,360 --> 00:01:15,720 So that inner text is what's appearing under temp. 17 00:01:16,090 --> 00:01:23,520 Now that we have our inner text, we can use that in a condition, checking to see what the value of 18 00:01:23,520 --> 00:01:24,630 the inner text is. 19 00:01:24,810 --> 00:01:26,880 We know that we've got a start button. 20 00:01:27,090 --> 00:01:32,340 And if we want something to happen, when someone presses the start button, this is how we can do that, 21 00:01:32,610 --> 00:01:41,100 where we can say, you clicked start and we can run a block of code here associated with starting the 22 00:01:41,100 --> 00:01:41,370 game. 23 00:01:41,640 --> 00:01:42,510 So we hit start. 24 00:01:42,750 --> 00:01:44,550 You see, we clicked start. 25 00:01:44,760 --> 00:01:47,820 So we're ready to continue to build out some of the gameplay. 26 00:01:48,000 --> 00:01:49,650 We want to toggle these buttons. 27 00:01:49,830 --> 00:01:54,270 So we want to hide the higher and lower and we want to show the start button. 28 00:01:54,510 --> 00:02:01,380 So let's start by doing that where we'll set up a function and we'll just call this toggle buttons, 29 00:02:01,620 --> 00:02:07,650 create our function, toggle buttons, the different buttons to take a look at the classes that they 30 00:02:07,650 --> 00:02:09,000 have available within the buttons. 31 00:02:09,270 --> 00:02:15,250 So for now, we can console logout, we can select the select the button object because we've got all 32 00:02:15,250 --> 00:02:21,840 of the buttons within the constant variable button will select the second one because we know that this 33 00:02:21,840 --> 00:02:23,610 is going to have a class of hide button. 34 00:02:23,850 --> 00:02:25,890 So we do want to see that class list. 35 00:02:26,130 --> 00:02:33,030 So selecting out the class list from that second button, when we refresh the page hit start, you can 36 00:02:33,030 --> 00:02:40,230 see that now we've got a value of hide button is what's available within the class list and we can toggle 37 00:02:40,230 --> 00:02:41,490 that class list. 38 00:02:41,640 --> 00:02:49,260 So this is another method that's available in JavaScript and allows us to toggle a particular value 39 00:02:49,470 --> 00:02:51,270 that's available within the classes. 40 00:02:51,390 --> 00:02:54,660 And the value that we want to toggle is hide button. 41 00:02:55,950 --> 00:03:01,530 And what toggle is going to do is if it's available there, then we're going to remove it. 42 00:03:01,650 --> 00:03:03,970 And if it's not there, then we're going to add it in. 43 00:03:04,170 --> 00:03:11,460 So basically, if we once we apply some styling to hide button where we can set it to display none, 44 00:03:11,610 --> 00:03:13,710 you're going to see that buttons are going to hide. 45 00:03:13,710 --> 00:03:20,820 And so as we toggle them so I do a quick refresh and we see that right now it's returning back false 46 00:03:21,060 --> 00:03:24,480 because this value is present and now we've removed it. 47 00:03:25,050 --> 00:03:28,950 And if we hit it again this time, it's true because it's added in there. 48 00:03:29,100 --> 00:03:36,360 And if you go into the TEMEL, if we do inspect on the HTML, you can see that that particular element, 49 00:03:36,540 --> 00:03:43,020 the one that's got the text of higher when we click start, it's removing that from the class list, 50 00:03:43,020 --> 00:03:47,520 the class hide button, and it's adding it in and that's what toggle is doing. 51 00:03:47,860 --> 00:03:51,630 So what we want to do is ultimately we want to toggle all of the buttons. 52 00:03:51,960 --> 00:03:53,760 There's a number of ways that we can do that. 53 00:03:53,760 --> 00:03:59,100 We can list out all three or we could list them out within a loop. 54 00:03:59,340 --> 00:04:02,850 So for now, what I'll do is I'll list all three of them out. 55 00:04:03,210 --> 00:04:09,390 And what's going to happen now when I hit start is the hide button is going to be added to the start 56 00:04:09,600 --> 00:04:12,600 and it's going to be removed from higher and lower. 57 00:04:12,810 --> 00:04:17,850 And that means that we need to go into our style and apply display none. 58 00:04:18,090 --> 00:04:25,920 So selecting our style file, using display properties and we'll just do a display. 59 00:04:25,920 --> 00:04:26,280 None. 60 00:04:26,700 --> 00:04:30,690 So now when I refresh it, by default, the higher and lower is gone. 61 00:04:30,840 --> 00:04:34,890 When I hit start, the higher lower appears and the start disappears. 62 00:04:35,040 --> 00:04:40,470 And that's exactly what we want for our gameplay because that means the game has started and we're going 63 00:04:40,470 --> 00:04:44,730 to show a card here that is going to be displayed to the player. 64 00:04:44,880 --> 00:04:48,810 We also have to provide some more additional instructions to the player. 65 00:04:48,840 --> 00:04:54,090 So let's update that update our message object in our HTML. 66 00:04:54,480 --> 00:04:58,050 We can set that to higher or lower. 67 00:05:00,250 --> 00:05:08,450 And that's going to be displayed to the player also take our game play, select our entire team. 68 00:05:08,710 --> 00:05:13,000 We're going to clear out anything that's available within our inner turmoil because we're starting a 69 00:05:13,000 --> 00:05:14,440 fresh brand new game. 70 00:05:14,440 --> 00:05:16,660 And this will give us the ability to replay the game. 71 00:05:18,150 --> 00:05:24,000 And we'll also set up a function here, because this is where we want to make a card and we want to 72 00:05:24,000 --> 00:05:26,740 make whatever the value of my card is. 73 00:05:27,510 --> 00:05:34,020 So we need to set up a function to house make a card, which for now, it's not going to do a whole 74 00:05:34,020 --> 00:05:39,630 lot because that would be a blank, empty function as a placeholder, because we need to know what the 75 00:05:39,630 --> 00:05:40,350 card is. 76 00:05:40,350 --> 00:05:44,430 So before we make a card, we need to draw a card. 77 00:05:45,460 --> 00:05:52,780 So we can set a value of my card is equal to whatever gets returned back from, draw a card and we'll 78 00:05:52,780 --> 00:05:56,500 set up a function that's going to allow us to draw new cards. 79 00:05:57,100 --> 00:05:59,740 So set that one that function up as well. 80 00:06:01,630 --> 00:06:02,590 So draw a card. 81 00:06:03,640 --> 00:06:05,770 So now we've got our basic structure. 82 00:06:05,950 --> 00:06:12,030 When the player comes in to the game, they see a start button, they click the start button. 83 00:06:12,370 --> 00:06:18,070 We set up all of the event listeners here for the buttons and we're sending them all over to a function 84 00:06:18,070 --> 00:06:19,300 called Play Game. 85 00:06:19,810 --> 00:06:26,870 Within Play Game, we select our target element and we get our inner text from the target. 86 00:06:27,130 --> 00:06:31,690 So basically we're getting the content of the button that triggered the event. 87 00:06:31,690 --> 00:06:32,140 Click. 88 00:06:32,650 --> 00:06:36,820 We need to draw a card because we need to have a card within play. 89 00:06:37,000 --> 00:06:40,930 And if we don't have a card within play, then we're not going to be able to show anything to the player. 90 00:06:41,230 --> 00:06:46,330 So that's the first thing that we need to do, is draw a card, will set up a function, a blank function 91 00:06:46,330 --> 00:06:47,410 in order to handle that. 92 00:06:47,590 --> 00:06:49,660 And we'll set that up in the upcoming lessons. 93 00:06:50,080 --> 00:06:55,390 And we also are selecting the temp and we're checking to see if it's equal to start. 94 00:06:55,510 --> 00:06:58,720 And we know that if it's equal to start, then we're starting the game. 95 00:06:58,720 --> 00:07:00,430 We update the message to the player. 96 00:07:00,430 --> 00:07:01,980 We see either higher or lower. 97 00:07:02,200 --> 00:07:06,970 We also update the gameplay area to clear out any of that inner HTML. 98 00:07:07,210 --> 00:07:11,140 We make a card and we also toggle the buttons. 99 00:07:11,290 --> 00:07:17,260 So the buttons are something that we can toggle between the different views where by default we start 100 00:07:17,260 --> 00:07:21,610 out with seeing the start button and then we toggle them to see the higher and lower. 101 00:07:21,700 --> 00:07:27,340 And once we want to start the game again, that we're going to toggle this function once again, hiding 102 00:07:27,340 --> 00:07:29,660 the higher and lower buttons and showing the start button. 103 00:07:29,860 --> 00:07:36,310 So this is our quick and easy way to toggle those buttons and add in and remove all those classes from 104 00:07:36,310 --> 00:07:37,170 those buttons. 105 00:07:37,510 --> 00:07:40,960 So coming up next, we need to still build out a deck of cards. 106 00:07:41,080 --> 00:07:43,210 We need to be able to draw a card. 107 00:07:43,360 --> 00:07:47,380 And we also need to be able to visually make a card for the player. 108 00:07:47,590 --> 00:07:49,060 So quite a bit to come. 109 00:07:49,060 --> 00:07:51,070 And that's coming up in the upcoming lessons. 110 00:07:51,280 --> 00:07:53,260 So go ahead and build this out now. 111 00:07:53,440 --> 00:08:01,780 Have your buttons working, toggle buttons, practice, working with class list and update classes that 112 00:08:01,780 --> 00:08:04,030 are available within the active elements.