#Components v2 and collectors

27 messages · Page 1 of 1 (latest)

rugged egretBOT
#
  • What's your exact discord.js npm list discord.js and node node -v version?
  • Not a discord.js issue? Check out #1081585952654360687.
  • Consider reading #how-to-get-help to improve your question!
  • Explain what exactly your issue is.
  • Post the full error stack trace, not just the top part!
  • Show your code!
  • Issue solved? Press the button!
quick siren
#

Ill post code one sec

#

14.9.3 is the version

#

initial interaction reply


const attackComponent = createCombatEmbed(session, planetInfo);



    await interaction.reply({ components: [attackComponent], flags: MessageFlags.IsComponentsV2, withResponse: true });

collector


async function handleCombatAction(btn, session, interaction, collector) {
  let extraDetails = [];
  let dmg = 0;
  const weapon = weapondb[session.weapon?.name?.toLowerCase()];

  // Handle different button actions
  switch (btn.customId) {
    case 'attack_weapon':
      if (session.weaponAmmo <= 0) {
        // Create a temporary container with error message
        const errorContainer = new ContainerBuilder()
          .addTextDisplayComponents([
            new TextDisplayBuilder().setContent(':warning: You are out of ammo! Please reload.')
          ])
          .setId(1);
        
        return btn.update({ 
          components: [errorContainer], 
          flags: MessageFlags.IsComponentsV2 
        });
      }
#

lmk if i need to post more code

#

the create embed function is just creating the initial container itself

vivid smelt
#

may share your [attackComponent] container?

#

i guess you put sectioncomponents in your attackcomponents

low tapir
#

afaik you need to "build" them by using toJson()

in components: [errorContainer]

quick siren
# 
  const row = createActionButtons(session);


  container.addTextDisplayComponents([
    new TextDisplayBuilder()
      .setContent(`**Encountered: ${session.rawEnemy.Emoji} ${session.rawEnemy.Name}**`)
  ]);

  const enemyImage = {
  media: {
    url: session.rawEnemy.Image,
    type: 'image',
    width: 100,
    height: 100
  }
};

const planetImage = {
  media: {
    url: planetdb[session.planet]?.Image || planetInfo?.Image,
    type: 'image',
    width: 100,
    height: 100
  }
};

part 1 since i cant send the full thing in 1 message

# 

  let enemyText = new TextDisplayBuilder()
    .setContent(`**${session.rawEnemy.Emoji} ${session.rawEnemy.Name}**\n` +
      `${displayHealth(session.enemy.ScaledHealth, session.enemy.Health)} HP: ${session.enemy.ScaledHealth}\n` +
      `💥 Attack: ${session.enemy.ScaledDamage}`);

    let playerText = new TextDisplayBuilder()
    .setContent(`**${session.helmet?.emoji || ''} Player**\n` +
      `${displayHealth(session.playerHealth, 100)} HP: ${session.playerHealth}\n` +
      `🛡️ Defense: ${session.playerDefense}\n` +
      `${weapon?.Emoji || '🔫'} ${weapon?.Name || 'Unknown Weapon'}`);

    const section = new SectionBuilder()
      .addTextDisplayComponents(playerText)
      .setThumbnailAccessory(new ThumbnailComponent(planetImage))

    const sectionEnemy = new SectionBuilder()
      .addTextDisplayComponents(enemyText)
      .setThumbnailAccessory(new ThumbnailComponent(enemyImage));
      

      let seperator = new SeparatorBuilder()
      .setSpacing(SeparatorSpacingSize.Small)
      .setDivider(true)
      
    
      container.addSectionComponents(section);
      container.addActionRowComponents(row);

      container.addSeparatorComponents(seperator);
      container.addSectionComponents(sectionEnemy);

    const mediaGallery = new MediaGalleryBuilder({
      items:[
        {
          media: {
            url: session.rawEnemy.Image,
            type: 'image',
            width: 100,
            height: 100

          }
        },
        {
          media: {
            url: planetdb[session.planet]?.Image || planetInfo?.Image,
            type: 'image',
            width: 100,
            height: 100

          }
        },
        
      ]
    })


// container.addMediaGalleryComponents(mediaGallery)
    

const colorInt = parseInt(planetColor.replace('#', ''), 16);

  container.setAccentColor(colorInt)

  container.setId(1);

  return container;```
#

part 2

quick siren
quick siren
#

it seems to still be throwing the error but its expecting different objects this time

#

let me send the error

# 
ExpectedValidationError: Expected
      given: undefined,
      expected: [class ButtonBuilder extends ComponentBuilder]
    },```
#

has another one with that same message but its

[class ThumbnailBuilder extends ComponentBuilder]

vivid smelt
compact basin
delicate delta
#

Are you trying to edit container using interaction?

quick siren
# compact basin Can you show the full error please? Because the error doesn't really match your ... 

return Result.err(new CombinedError(errors, this.validatorOptions));
                      ^

CombinedError: Received one or more errors
    at async InteractionCollector.<anonymous> (file:///F:/Atlas%20Testing/commands/explore.js:50:7) {
  errors: [
    ExpectedValidationError: Expected
       
        at Array.map (<anonymous>)
        at ContainerBuilder.toJSON (F:\Atlas Testing\node_modules\@discordjs\builders\dist\index.js:1870:35)
        at updateCombatDisplay (file:///F:/Atlas%20Testing/commands/explore.js:557:35)
        at handleCombatAction (file:///F:/Atlas%20Testing/commands/explore.js:366:13) {
      validator: 's.instance(V)',
      given: undefined,
      expected: [class ButtonBuilder extends ComponentBuilder]
    },
    ExpectedValidationError: Expected
        at Array.map (<anonymous>)
        at ContainerBuilder.toJSON (F:\Atlas Testing\node_modules\@discordjs\builders\dist\index.js:1870:35)
        at updateCombatDisplay (file:///F:/Atlas%20Testing/commands/explore.js:557:35)
        at handleCombatAction (file:///F:/Atlas%20Testing/commands/explore.js:366:13) {
      validator: 's.instance(V)',
      given: undefined,
      expected: [class ThumbnailBuilder extends ComponentBuilder]
    }
  ]
}
#

line 50 is the function where it calls the component, 557 is

return btn.update({
    components: [updatedContainer.toJSON()],
    flags: MessageFlags.IsComponentsV2
  });
quick siren
#

the error also happens here

switch (btn.customId) {
    case 'attack_weapon':
      if (session.weaponAmmo <= 0) {
        // Create a temporary container with error message
        const errorContainer = new ContainerBuilder()
          .addTextDisplayComponents([
            new TextDisplayBuilder().setContent('⚠️ You are out of ammo! Please reload.')
          ])
          .setId(1);
        
        return btn.update({ 
          components: [errorContainer.toJSON()], 
          flags: MessageFlags.IsComponentsV2 
        });
      }
quick siren
#

Nvm i found the issue, apparently sections need thumbnails or buttons hah

compact basin