DEV Community

loading...
Somos Devs

Primeros pasos en Discord.js: Reacciones del bot

doulovera profile image Douglas Lovera Updated on ・3 min read

Este post es muy interesante porque descubriremos cómo usar reacciones de los bots y en qué puede ser útil.

Crearemos un comando que, según cuál reacción ejecute el usuario, el bot responderá "Qué bien" ó "Qué mal".

¿Para qué sirven las reacciones?

Para muchas cosas. Entre ellas puede ser detectar la reacción de un usuario para ejecutar una acción, o simplemente marcar como "ejecutado" el comando del usuario.

Ejemplo:
react

¿Cómo funciona?

Usamos el método .react(emoji), donde emoji es un emoji en unicode.

message.react('👎');
Enter fullscreen mode Exit fullscreen mode

Eso hará que reaccione al último mensaje del chat con un thumbs up (👍). En el siguiente código es el del gif de arriba, donde reacciona a su mismo mensaje con dos emojis.

message.channel.send('¿Estás bien?')
    .then(msg => {
        msg.react("👍")
        msg.react("👎")
    });
Enter fullscreen mode Exit fullscreen mode

Discord también tiene un método para esperar reacciones, llamado .awaitReactions(filter, [options]). Lo explicaré mejor más abajo.

Ya con esto tenemos la base para hacer nuestro comando que, con este ejemplo práctico, puedes hacer volar tu imaginación para crear un comando más funcional.

Filtro

let thumbsup = 👍;
let thumbsdown = 👎;

message.channel.send("¿Estás bien?").then(msg => {
    msg.react(thumbsup);
    msg.react(thumbsdown);

    // Creamos el filtro
    const filter = (reaction, user) => {
      return [thumbsup, thumbsdown].includes(reaction.emoji.name) && user.id == message.author.id;
    };

    // awaitReactions
  });
Enter fullscreen mode Exit fullscreen mode

En la función filter creamos "reaction" y "user", que nos sirven para saber la información de las reacciones y del usuario respectivamente.

Creamos un arreglo con los emojis adentro, y luego usamos .include() de Javascript para determinar si está usando uno de los dos emojis, y luego con el operador lógico && validamos que solo funcione con el autor del mensaje según su ID.

awaitReactions()

Después de la función, usamos:

msg.awaitReactions(filter, { max: 1, time: 20000 })
// Collections
Enter fullscreen mode Exit fullscreen mode

En este método, estamos usando la función filter que creamos y unas opciones:

  • max: 1: Solo acepta una reacción.
  • time: 20000: Está esperando a la reacción del usuario por 20 000 milisegundos (20 segundos).

Collections

.then(collections => {
    // Obtenemos todos los datos que nos retorna discord
    const reaction = collection.first();

    // Creamos un condicional para ejecutar
    // una acción u otra según la reacción
    if(reaction.emoji.name === thumbsup) {

        // Eliminamos las reacciones
        msg.reactions.removeAll();
        // Editamos el mensaje
        msg.edit('Qué bien');

    } else if(reaction.emoji.name === thumbsdown) {

        // Eliminamos las reacciones
        msg.reactions.removeAll();
        // Editamos el mensaje
        msg.edit('Qué mal');

    }
})
Enter fullscreen mode Exit fullscreen mode

Código final

let thumbsup = '👍';
let thumbsdown = '👎';

message.channel.send("¿Estás bien?").then(msg => {
    msg.react(thumbsup);
    msg.react(thumbsdown);

    // Creamos el filtro
    const filter = (reaction, user) => {
      return [thumbsup, thumbsdown].includes(reaction.emoji.name) 
                && user.id == message.author.id;
    };

    msg.awaitReactions(filter, { max: 1, time: 20000 })
        .then(collection => {
        // Obtenemos todos los datos que nos retorna discord
        const reaction = collection.first();

        // Creamos un condicional para ejecutar
        // una acción u otra según la reacción
        if(reaction.emoji.name === thumbsup) {

            // Eliminamos las reacciones
            msg.reactions.removeAll();
            // Editamos el mensaje
            msg.edit('Qué bien');

        } else if(reaction.emoji.name === thumbsdown) {

            // Eliminamos las reacciones
            msg.reactions.removeAll();
            // Editamos el mensaje
            msg.edit('Qué mal');

        }
    })
  });
Enter fullscreen mode Exit fullscreen mode

Final final

¡Listo, Hemos completado el comando!

Como dije arriba, obviamente le vas a dar un mejor uso a esto que acá, pero mi objetivo aquí es que entiendas cómo crear este comando parte por parte.

Discussion (0)

pic
Editor guide