Vote Button Update Logic

Hey,

I'm working on a bot that implements mafia game mechanics, and I'm facing a challenge with updating the dynamic count emojis on voting buttons during the mafia vote phase.

In the mafiaVote function, I dynamically create buttons for each non-mafia player, where the emoji on each button represents the current vote count. The logic works well for individual votes, but I'm struggling with updating the interaction for all mafia players after each mafia vote.

Currently when a mafia player votes for a certain player, the vote counter changes only for the player who voted, but does not change for the rest of the players, except when the other player's votes

The code:

async function mafiaVote(interactionCollector, interaction) {
  const mafiaPlayers = players.filter((p) => roles[p] === ROLE_TYPES.MAFIA);
  let voteCounts = {};

  await interaction.channel.send("Mafia are selecting a player to eliminate.");

  for (const player of players) {
    voteCounts[player] = 0;
  }

  async function createButton(player) {
    const voteCount = voteCounts[player];
    const emoji = emojiMap[voteCount] || "🔟";
    return new ButtonBuilder()
      .setCustomId(player)
      .setLabel(await getUsernameById(interaction, player))
      .setStyle(ButtonStyle.Primary)
      .setDisabled(false)
      .setEmoji(emoji);
  }

  let row = new ActionRowBuilder();

  for (const player of players) {
    if (!mafiaPlayers.includes(player)) {
      const button = await createButton(player);
      row.addComponents(button);
    }
  }

  for (const [id, interaction] of interactionCollector) {
    if (interaction && interaction.user) {
      const playerRole = roles[interaction.user.id];
      if (playerRole === ROLE_TYPES.MAFIA) {
        await interaction.followUp({
          content: `Mafia, who do you want to eliminate?`,
          components: [row],
          ephemeral: true,
        });
      }
    }
  }

  const voteCollector = interaction.channel.createMessageComponentCollector({
    filter: (i) => mafiaPlayers.includes(i.user.id),
    time: 10000,
  });

  voteCollector.on("collect", async (i) => {
    const targetId = i.customId;
    voteCounts[targetId] += 1;

    let updatedRow = new ActionRowBuilder();
    for (const player of players) {
      if (!mafiaPlayers.includes(player)) {
        const button = await createButton(player);
        updatedRow.addComponents(button);
      }
    }

    // Problem: Update the interaction with the new button state to all the mafia players using for-of loop
    try {
      await i.update({ components: [updatedRow] });
    } catch (error) {
      console.error("Failed to edit message:", error);
    }
  });
}

async function mafiaVote(interactionCollector, interaction) {
  const mafiaPlayers = players.filter((p) => roles[p] === ROLE_TYPES.MAFIA);
  let voteCounts = {};

  await interaction.channel.send("Mafia are selecting a player to eliminate.");

  for (const player of players) {
    voteCounts[player] = 0;
  }

  async function createButton(player) {
    const voteCount = voteCounts[player];
    const emoji = emojiMap[voteCount] || "🔟";
    return new ButtonBuilder()
      .setCustomId(player)
      .setLabel(await getUsernameById(interaction, player))
      .setStyle(ButtonStyle.Primary)
      .setDisabled(false)
      .setEmoji(emoji);
  }

  let row = new ActionRowBuilder();

  for (const player of players) {
    if (!mafiaPlayers.includes(player)) {
      const button = await createButton(player);
      row.addComponents(button);
    }
  }

  for (const [id, interaction] of interactionCollector) {
    if (interaction && interaction.user) {
      const playerRole = roles[interaction.user.id];
      if (playerRole === ROLE_TYPES.MAFIA) {
        await interaction.followUp({
          content: `Mafia, who do you want to eliminate?`,
          components: [row],
          ephemeral: true,
        });
      }
    }
  }

  const voteCollector = interaction.channel.createMessageComponentCollector({
    filter: (i) => mafiaPlayers.includes(i.user.id),
    time: 10000,
  });

  voteCollector.on("collect", async (i) => {
    const targetId = i.customId;
    voteCounts[targetId] += 1;

    let updatedRow = new ActionRowBuilder();
    for (const player of players) {
      if (!mafiaPlayers.includes(player)) {
        const button = await createButton(player);
        updatedRow.addComponents(button);
      }
    }

    // Problem: Update the interaction with the new button state to all the mafia players using for-of loop
    try {
      await i.update({ components: [updatedRow] });
    } catch (error) {
      console.error("Failed to edit message:", error);
    }
  });
}

async function mafiaVote(interactionCollector, interaction) {
  const mafiaPlayers = players.filter((p) => roles[p] === ROLE_TYPES.MAFIA);
  let voteCounts = {};

  await interaction.channel.send("Mafia are selecting a player to eliminate.");

  for (const player of players) {
    voteCounts[player] = 0;
  }

  async function createButton(player) {
    const voteCount = voteCounts[player];
    const emoji = emojiMap[voteCount] || "🔟";
    return new ButtonBuilder()
      .setCustomId(player)
      .setLabel(await getUsernameById(interaction, player))
      .setStyle(ButtonStyle.Primary)
      .setDisabled(false)
      .setEmoji(emoji);
  }

  let row = new ActionRowBuilder();

  for (const player of players) {
    if (!mafiaPlayers.includes(player)) {
      const button = await createButton(player);
      row.addComponents(button);
    }
  }

  for (const [id, interaction] of interactionCollector) {
    if (interaction && interaction.user) {
      const playerRole = roles[interaction.user.id];
      if (playerRole === ROLE_TYPES.MAFIA) {
        await interaction.followUp({
          content: `Mafia, who do you want to eliminate?`,
          components: [row],
          ephemeral: true,
        });
      }
    }
  }

  const voteCollector = interaction.channel.createMessageComponentCollector({
    filter: (i) => mafiaPlayers.includes(i.user.id),
    time: 10000,
  });

  voteCollector.on("collect", async (i) => {
    const targetId = i.customId;
    voteCounts[targetId] += 1;

    let updatedRow = new ActionRowBuilder();
    for (const player of players) {
      if (!mafiaPlayers.includes(player)) {
        const button = await createButton(player);
        updatedRow.addComponents(button);
      }
    }

    // Problem: Update the interaction with the new button state to all the mafia players using for-of loop
    try {
      await i.update({ components: [updatedRow] });
    } catch (error) {
      console.error("Failed to edit message:", error);
    }
  });
}

async function mafiaVote(interactionCollector, interaction) {
  const mafiaPlayers = players.filter((p) => roles[p] === ROLE_TYPES.MAFIA);
  let voteCounts = {};

  await interaction.channel.send("Mafia are selecting a player to eliminate.");

  for (const player of players) {
    voteCounts[player] = 0;
  }

  async function createButton(player) {
    const voteCount = voteCounts[player];
    const emoji = emojiMap[voteCount] || "🔟";
    return new ButtonBuilder()
      .setCustomId(player)
      .setLabel(await getUsernameById(interaction, player))
      .setStyle(ButtonStyle.Primary)
      .setDisabled(false)
      .setEmoji(emoji);
  }

  let row = new ActionRowBuilder();

  for (const player of players) {
    if (!mafiaPlayers.includes(player)) {
      const button = await createButton(player);
      row.addComponents(button);
    }
  }

  for (const [id, interaction] of interactionCollector) {
    if (interaction && interaction.user) {
      const playerRole = roles[interaction.user.id];
      if (playerRole === ROLE_TYPES.MAFIA) {
        await interaction.followUp({
          content: `Mafia, who do you want to eliminate?`,
          components: [row],
          ephemeral: true,
        });
      }
    }
  }

  const voteCollector = interaction.channel.createMessageComponentCollector({
    filter: (i) => mafiaPlayers.includes(i.user.id),
    time: 10000,
  });

  voteCollector.on("collect", async (i) => {
    const targetId = i.customId;
    voteCounts[targetId] += 1;

    let updatedRow = new ActionRowBuilder();
    for (const player of players) {
      if (!mafiaPlayers.includes(player)) {
        const button = await createButton(player);
        updatedRow.addComponents(button);
      }
    }

    // Problem: Update the interaction with the new button state to all the mafia players using for-of loop
    try {
      await i.update({ components: [updatedRow] });
    } catch (error) {
      console.error("Failed to edit message:", error);
    }
  });
}