Claim + Drop Roles with Buttons (Discord.js v14)

what's going on everyone in this video we're going to be creating some button roles using discord.js so if you're not familiar with what button roles are basically we have a message that looks something like this and it has a bunch of buttons for each specific role in our case we have a button for the red roll button for the green roll button for the blue roll now I already have the blue roll so I'm going to get rid of it and now let's try to click on one of the roles and our bot is going to first think and then it's going to give us the row now the good thing about this is it's going to first check your role and it's gonna see if you have the role that you're trying to add if you already have the role it's going to remove it so in this case I have the green roll if I click on it it's going to go ahead and remove the roll so inside our code I've gone ahead and deleted all the previous event listeners including the interaction create and message create event listener what I have here is just the ready event listener and it's console logging whenever over our bot comes online now I'm gonna try and split the logic into a different file so inside our source folder let's create a new file called send message.js this file is going to be responsible for sending the initial message with all the buttons so what we can do is we can come here and copy this entire thing and paste it in this file now let's define all the roles that we want added in our button so we can say const roles and we can open an array it's going to take an array of objects each object is going to have the ID which is going to be the ID of the role that you're trying to add so I can go to my server settings go to roles and whatever roles that you guys want to add just right click and copy ID and I'm going to paste it here as a string and the next thing that we want to add is a label so we can say label and basically what the label is going to be is the text on your button in this case this ID belongs to the red role so inside the label I'll just call this red now what we can do is duplicate this and do the same for green so copy the ID and change the label to Green we can copy this again and do the same for blue once that's done what we want to do is send the message once our bot comes online so I'm going to remove this console.log and what I'm going to do is I'm going to add a try catch block and if there is an error let's just console log that so the first thing that we want to do is we want to get the channel where we want to send the message so let's say const Channel equals a weight and since we're using a weight we're going to have to add a sink over here and what we're going to say is client dot channels.cash dot get and inside we're going to paste the ID of the channel where we want to send a message in our case it's going to be our testing so I'm just going to right click and copy the ID once that's done let's check if the channel actually exists so we can say if not Channel then we can return basically the code won't run any further if this channel does not exist the next thing that we can do is Define the row of buttons that is going to go into our message so we can say const row equals new and action row Builder and this is going to be imported from discord.js for now we don't really have anything inside the row so let's go ahead and add it what we're going to do is we're going to Loop through all the roles inside this array and we're going to push it to this row Builder so let's say roles for each and each role is going to be called roll and what we'll do is we'll push a component inside this Row for every single role that we have so we can say row dot components dot push and what this will take is a new button Builder which again will be imported from discord.js now let's chain on a few methods so the first one is going to be the custom ID so we can say dot set custom ID and this custom ID is going to be the ID that we have inside here so we can say row dot ID we can chain another method which will be dot set label and as I said the label is the text that is going to go on the button so we can say row dot label and the next thing is the style of your button so we can say dot set style and in this case we're going to import something from discord.js again this is going to be called button style then we can say dot and you have access to all of these Styles in my case I'm just going to go with primary I believe danger is red success is green and I'm not sure about the rest so I'm just going to go for primary which is blue the next thing that we want to do is we want to send this message into a channel so let's say Channel which is this channel right here Channel dot send and we're going to pass an object where the content is going to be claim or remove or roll below and then we're going to also pass in components which is going to be an array of of all the different rows that you're adding if you're not familiar basically each row can have a maximum of five buttons so what you can do is you can just add your row over here if you have more than five roles then I suggest you create a new row for every five rolls that you have once that is done let's just save the file matter of fact what I'm gonna do is I'm gonna say await Channel dot send and once the message is sent we're going to exit out of this file so we can say process dot exit so let's run this file by saying node Source slash send message.js once it is done it's going to close out of the file and if we go to Discord we're going to see a new message with all the buttons now of course the buttons don't really do anything because we haven't added any logic so let's go to index.js and let's start adding our logic over here now because a button click is an interaction we're gonna have to listen for the interaction create event listener so let's say client dot on interaction create and this will give us access to interaction basically what we're going to do is we're going to check if the interaction was a button so we can say if interaction dot is button and if you have other slash commands then I recommend you open curly brackets and write all your code in here however since I don't have any slash commands I can just return early and I can negate the value of this now the next thing that we want to do is we want to get the role that was associated with that button so let's say const row equals interaction dot guild.rolls.cash dot get and what we're going to do is we're going to get the custom ID from our interaction so let's say interaction dot custom ID now let's check if the role actually exists in the server because it is possible that the owner might have deleted the role so we can say if not roll then we can reply to the interaction by saying interaction dot reply content and inside the content you can say I couldn't find that role we can also set ephemeral to true so only the person who ran the interaction can see the message now one thing I'm thinking of doing is actually just removing this and deferring a reply so we can say a weight interaction dot defer reply and this will give our users the message that the bot is thinking and because we're doing a bunch of things I recommend you do this because we're using a weight we're also going to have to put async over here and inside over here what we can do is we can edit reply instead of reply and we can get rid of ephemeral because we're going to be adding it in defer reply so inside this just pass an object that says ephemeral is true now if the role was not found we don't want the code to continue any further so we can just say return over here and the code won't go any further now let's check if the person running the interaction has the role or not because based on that we can either give the person the role or remove the role so let's say const has Rule and this is going to check if the person has the role so we can say interaction dot member dot roles dot cash dot has and what we're going to do is we're going to pass in this role but we have to pass in the ID now we can say if has row now we can run some code if the person has the role so let's say a weight interaction dot member dot roles dot remove and we're going to remove the role because the person already has the role and what we'll do is we'll reply with interaction.editreply and we're going to say the role has been removed and of course we can return because that's really all we have to do if the person has the role however the code below this is only going to run if the person does not have the role which means we have to add it so let's say a weight interaction dot member dot rules dot add and we're going to add the role this time we can also do the same thing that we did here and we can change this to edit now this should work but what I'm going to do is I'm actually going to cut this entire thing and I'm gonna put this inside a try block so if there's an error we can just console log the error and we can paste all our code inside the try block and save our file now let's go ahead and try running our main file and let's test our robot when our bot comes online we can go back to the server and try clicking let's say red our bot starts thinking and it will add the red row if we click on it again you'll notice that the rule is going to be removed and it says the role red has been removed basically this will work with all the other buttons as well so I hope this video has been helpful if it has then make sure to give it a like if you guys need help or have any sort of questions I have a Discord server which I'll have the link to down below so make sure to join and yeah if you guys are enjoying my content make sure to subscribe thank you and I'll see you in the next one

Channel: Under Ctrl

Views: 21,628

Keywords: discord.js, discord bot, discord js v14, discord.js v14, discord bot tutorial, discord js tutorial, button roles

Id: f5DWy0B-y6Q

Length: 9min 49sec (589 seconds)

Published: Fri Dec 30 2022