Interacting with the UI: Adding Buttons

[00:00:00]
>> So we're gonna add now some interaction to our UIs. And the first thing we're to do is the buttons, make the buttons work, so that when I click the button here, let's just refresh the page. When I click the button here, it'll move between the various different states from the fish, to the poop, to the weather icon.

[00:00:16]
So let's go ahead and do that. So head back over to VS Code, make a new file and call it buttons.js. Okay, we're gonna import something called icons which we haven't created yet, but we're about to from another file called ./constants. And then we're gonna do a couple functions here.

[00:00:46]
The first one that we're gonna do is toggle highlighted. So const toggleHighlighted. And I made this an arrow function. Let's go ahead and do that cuz this is how I would write it. So it's gonna take in an icon, and it's gonna take on whether I'm gonna be showing or hiding that icon, right?

[00:01:08]
This is gonna be an arrow function. So again, this is a ligature. So if I put equal and angle bracket together, my font combines them together and it looks like an arrow. So, whenever you see that, that's two characters together. And then I'm gonna do document.querySelector. This is going to allow me to select an item from the DOM, from the HTML part of this, right?

[00:01:38]
And I'm going to be looking for, and notice I'm using backticks here, which is the one that is the tilde next to the one on your keyboard. And I'm going to be looking for icons, icon. And then outside of that I'm gonna put -icon. Okay, so what this dollar sign curly brace is saying like inside of here I have JavaScript.

[00:02:09]
So in this case, icon is gonna be a number, this right here. And this icons is going to be a list of all the various different icons that are available. So it'll be, in this case, fish, poop, and weather, right? So and then it'll toggle these particular icons as highlighted or not highlighted.

[00:02:33]
So I'm gonna do .class list.toggle. And then I'm gonna be toggling the CSS class highlighted. And whether or not that's show. So now anytime that I call, it will look like this toggleHighlighted, Fish, true. This would make the fish icon on the DOM highlighted, right? Or if I did like poop, false, this would unhighlight it, right?

[00:03:07]
So that's kinda what that function does. So again, this is an arrow function, and I could have just as well done this. So now it's actually a function body, right? But because it's just a one liner, I'm welcome to just, I can leave out those curly braces. So it's up to you what's more readable, I like this but it's up to you if you don't like that.

[00:03:37]
Notice when I save it, it reorganizes itself, that's prettier in action there. Okay, I'm gonna do export default, Function init buttons. And then it's gonna take in a function called handle user action. Okay, so this is a function that's gonna handle all of our user interactions. So we're gonna use closures again to keep track of this.

[00:04:08]
So I'm gonna say let selectedI = 0. This is the currently selected icon like the index of it. The first one that's gonna be selected is going to be the 0th one, which will be the fish one. And then I'm gonna have a function here called button click, function buttonClick and it's gonna take in an event.

[00:04:38]
And we're just gonna say if event.target. So in my notes I actually have this written differently. So event is the name of the DOM event that's gonna be coming in, right? But I can actually select, If I do this and I put curly braces inside of it, I'm gonna pull the target out of the event, which is what I've done here.

[00:05:08]
So instead of having event.target I can just say target. And target is gonna be the actual DOM node that I've clicked on, right. So for example, if I come back over here, if I click on this, it'll say this is the target, the left button will be the target.

[00:05:22]
The middle button will be the target, the right will be the target. So this is the DOM node that I've clicked on. So if I say target.classlist.contains, left-btn. So if I have clicked on the left button, is basically what this says. Then toggleHighlighted, SelectedIcon. And turn that off, false.

[00:06:02]
So the currently selected one, turn off the highlighting. And then you're gonna set a new selected icon, so (selectedIcon = 2 + selectedIcon). I'm gonna use what's called the modelo or modulo or however you want to call it, but it's the percentage sign there. ICONS.length; So let's talk about what this means.

[00:06:35]
Modulo is a really interesting operator. It's kind of like if you've ever done long division before, and you ever had to do like the remainder, so like ten divided by three was three remainder one. What modular returns here is the remainder, right? So if I did 10%3, let's put this above here, 10%3.

[00:06:58]
What's the remainder of 3 divided by 10 or 10 divided by 3? 1, right, so this would equal to 1. So this is really useful for our lists because we're gonna be looping around right. So, if I come back to the game, if I go to the right to, or if I click the left button right now, I expect weather to be highlighted.

[00:07:18]
So I want it to loop around. And that's what the modular is really used for because if I say plus 2, in this particular case, if I did plus 2, and let's say it was the last one, so I was like here, it would loop back around to this one.

[00:07:35]
Does it make sense kind of? It's a little mathy. You could also do, I believe, negative one here. And I think that should work as well. But the modulo math to me was clearer in my brain if I did two. So that's why I ended up doing that way.

[00:07:57]
When I'm doing modular in math, I try to stay positive, just in general, stay positive with life. But beyond that, it's easier for me to picture in my brains, so that's why I did the plus two. Okay, and then now that I've selected the correct one, I'm gonna call toggleHighlighted again because I've changed the selectedIcon up here.

[00:08:17]
And I just call selectedIcon and true, cuz that will be then highlighting the correct one. Then we're gonna do an else if, that's gonna be exactly the same for but for the right target.classlist.constainsright-btn. And we're gonna do the exact same sort of song and dance toggleHighlighted, selectedIcon, false, and then we're gonna do our math.

[00:08:48]
So we're gonna say selectedIcon = 1 +, cuz it's gonna go in the other direction, 1 + selectedIcon % ICONS.length. So anytime that you're thinking about looping back around in programming and since, the modulo is super useful for that. All right. And then else, We are going to do handleUserAction, and we're gonna pass back the icon that was selected.

[00:09:37]
So we're gonna take in here a function from our gameState, and any time that the user tries to do something, right, they click on the feed button or they click on the poop button, we're going to respond to that user action. But we're gonna handle that inside of gameState and not inside of the buttons.

[00:09:51]
So we're kinda separating our concerns of this is happening in the user interface, this is happening inside of the game logic. Okay, so all of that looks good. Then we just need to do, document.getElementBy, we're actually going to query selector, query selector. And we're gonna look for the .buttons, right?

[00:10:14]
The HTML buttons container that we created. And we're gonna add an event listener. Anytime that it's clicked, we're going to call buttons or buttonClick rather. So now all we have to do is initialize this, we just call this function and the buttons are gonna have this event listener tied to them.