NOTE: This code isn't available yet in the public release, only in the beta.

You can also send buttons in your messages via SupaBotBase and do something when they get clicked. The sending, including the different restriction options, is done via the ButtonHandler. Creating the buttons is done via the Button and ButtonRow classes. Aside from that, you can also find colors in the export.

const { ButtonHandler,
  ButtonHandler: { Button, ButtonRow, colors: buttonColors }
} = require("supabotbase");

ButtonHandler

With the button handler, you can setup the message, add button rows containing buttons and restricting the use to one user. This class is chainable.

Constructor

The constructor has one parameter, SupaBotBase. In commands, events and functions it's found on this.main.

new ButtonHandler(this.main)

setRows

With this method, you can set the rows for the buttons. When adding buttons to a message, you have to add the buttons in rows and the rows in the message. Each new parameter is a new row. For more information about the rows, look at the ButtonRow class.

new ButtonHandler(this.main)
  .setRows(...rows)

restrictTo

With this method, you can restrict the use of the buttons in a message to one user. The parameter needs to be a discord.js user, for example message.author.

new ButtonHandler(this.main)
  // ...
  .restrictTo(message.author)

setMessage

You can set the content of the message with this method. You have to specify the content or the embed. The parameter is just a string.

new ButtonHandler(this.main)
  // ...
  .setMessage("Test!")

setEmbed

You can set the embed of the method with this method. The parameter is a discord.js RichEmbed.

new ButtonHandler(this.main)
  // ...
  .setEmbed(new Discord.RichEmbed()
    .setDescription("Test!")
  )

send

The last method, send, is for sending the message. It requires a Discord.js message. When using this in a command, the ButtonHandler will automatically detect if it's a slash command and send the message the proper way.

new ButtonHandler(this.main)
  // ...
  .send(message).then(() => {
    // Message is sent!
  });

Events

Aside from the main methods, the ButtonHandler class extends the EventEmitter class from Node.JS. Because of this, you can add listeners for the event click to capture clicks and doing something with that.

The click event gives two parameters: The ID (From the button) and an object with two possible actions: update or delete.

new ButtonHandler(this.main)
  // ...
  .send(message).then((handler) => {
  
    handler.on("click", (buttonId, { update, delete }) => {
      // Do something with the click!
    });

  });

With update, you can update the message. Before calling update, you can change the embed by calling ButtonHandler#setEmbed or ButtonHandler#setMessage.

handler.on("click", (buttonId, { update: updateMessage }) => {
  handler.setContent(`Last button click: **${buttonId}**`);
  updateMessage();
});

If you want to delete the message, you can call the delete function.

handler.on("click", (buttonId, { delete: deleteMessage }) => {
  if (buttonId === "delete") deleteMessage();
});

ButtonRow

With the ButtonRow class, you can create rows containing your Buttons. You can't have more than 5 buttonrows per message.

Constructor

The only public "method" for the ButtonRow class is the constructor itself. Each new parameter is a new Button.

new ButtonRow(
  new Button() /* You'll need a lot more here 😄 */,
  new Button() /* You'll need a lot more here 😄 */
)

Button

Buttons, where some of the magic happens. Before looking at the methods, there are a couple important points.

• When sending a link, you can't change the style.
• When you're not sending a link, you have to specify the ID.
• You always have to specify the button text.

Constructor

The button class doesn't have a parameter for the constructor.

setText

First, to set the label/content/text of the button, use setTest.

new Button()
  .setText("Hello, world!")

setId

Setting the ID can be done via setId.

new Button()
  // ...
  .setId("someId")

## setColor
You can have a couple different colors for your buttons. Set that via this method. See [Colors](#colors) for the different colors.
```js
new Button()
  // ...
  .setColor(colors.green)

setLink

When making a link button, use setLink with the URL.

new Button()
  // ...
  .setLink("https://www.youtube.com/watch?v=xvFZjo5PgG0")

setDisabled

If you want to disable a button, use this method.

new Button()
  // ...
  .setDisabled(true)

setEmoji

You can also add an emoji to the start of a message. The value needs to be an emoji in a string. It can be.

• A unicode emoji (Put \ before the emoji to get it in Discord, like \:joy:)
• A guild emoji by specifying the emoji ID

new Button()
  // ...
  .setEmoji("😂")

Colors

There are a couple different colors you can add to your buttons.

• Blue (default)
• Grey
• Green
• Red

Example

For an example, look at commands/Calculator.js!