I'm trying to make a game ban appeal, using the Discord-Modals package, and it seems to work good so far, however, the modal looks odd on phones, which will be a problem.
There are no errors, Here is what it looks like:
As you can see, On PC there was the Do you think the ban was fair? select drop down, but on both phones, it wasn't there.
I'm not sure of this is fixable, but I sure hope it is.
Code:~
// Main requirements
const { CHANNEL_SSU, CHANNEL_ROLESEL, BOT_PREFIX, ROLE_DEV } = require('../../config.json')
const commandName = '2gba'
// Optional Requirements
const { MessageEmbed, MessageActionRow, MessageButton, MessageCollector, InteractionType } = require('discord.js')
const { Modal, TextInputComponent, showModal, SelectMenuComponent } = require(`discord-modals`)
// Main Code
module.exports = client => {
client.on('messageCreate', async message => {
if (message.author.bot) return;
if (!message.content.toLowerCase().startsWith(BOT_PREFIX)) return;
const command = message.content.split(' ')
const args = message.content.substring(1).split(' ')
if (command.toString().toLowerCase().replace(BOT_PREFIX, '').startsWith(commandName)) {
if (!message.member.roles.cache.has(ROLE_DEV)) return message.reply("Only Developers can use this command!")
const buttonsRow1 = new MessageActionRow().addComponents(
new MessageButton()
.setCustomId('GBAempty5')
.setLabel(' ')
.setStyle('SECONDARY')
.setDisabled(true),
new MessageButton()
.setCustomId('GBA2')
.setLabel('Appeal')
.setStyle('DANGER')
.setDisabled(false),
new MessageButton()
.setCustomId('GBAempty6')
.setLabel(' ')
.setStyle('SECONDARY')
.setDisabled(true)
)
const GBAEmbed = new MessageEmbed()
.setTitle('Appeal Your Game Ban! 222')
.setColor('DARK_BLUE')
.setFooter({ text: 'ASRP | System Bot' })
.setThumbnail(message.guild.iconURL({ dynamic: true, size: 512 }))
message.delete()
message.channel.send({ embeds: [GBAEmbed], components: [buttonsRow1] })
}
})
client.on(`interactionCreate`, async (interaction) => {
if (!interaction.isButton) return
if (interaction.customId == 'GBA2') {
const modal = new Modal()
.setCustomId(`gbamodal`)
.setTitle(`ASRP | Game Ban Appeal`)
.addComponents(
new TextInputComponent()
.setCustomId("RobloxUsername-gba")
.setLabel("Roblox Username")
.setStyle("SHORT")
.setMinLength(1)
.setPlaceholder('Please check for any typos.')
.setRequired(true),
new TextInputComponent()
.setCustomId("Moderator-gba")
.setLabel("Who banned you?")
.setStyle("SHORT")
.setMinLength(1)
.setPlaceholder('This field is optional.')
.setRequired(false),
new TextInputComponent()
.setCustomId("unbanreason-gba")
.setLabel("Why should we unban you?")
.setStyle("LONG")
.setMinLength(1)
.setPlaceholder('Give us a reason to unban you.')
.setRequired(true),
new TextInputComponent()
.setCustomId("banreason-gba")
.setLabel("Why were you banned from asrp?")
.setStyle("LONG")
.setMinLength(1)
.setPlaceholder('Give us the reason you were banned for.')
.setRequired(true),
new SelectMenuComponent()
.setCustomId('fair-gba')
.setPlaceholder('Do you think your punishment was fair?')
.addOptions(
{
label: "Yes",
description: "You think the punishment was fair.",
value: "Yes",
emoji: "✅"
},
{
label: "No",
description: "You think the punishment was unfair.",
value: "No, I think it's unfair.",
emoji: "❌"
}
)
);
showModal(modal, {
client: client,
interaction: interaction
})
}
});
client.on('modalSubmit', async modal => {
if (modal.customId === 'gbamodal') {
const RBXuser = modal.getTextInputValue('RobloxUsername-gba');
let BanMod = modal.getTextInputValue('Moderator-gba');
if (!BanMod) BanMod = 'None Stated';
const ReasonUnban = modal.getTextInputValue('unbanreason-gba');
const ReasonBan = modal.getTextInputValue('banreason-gba');
const Fairness = modal.getSelectMenuValues('fair-gba');
const user = modal.user
const appealEmbed = new MessageEmbed()
.setTitle(`New Game Ban Appeal`)
.setAuthor({ name: `User: ${user.tag} (${user.id})` })
.addFields(
{name: `Q: Roblox Username`, value: `A: ${RBXuser}`},
{name: `Q: Who banned you?`, value: `A: ${BanMod}`},
{name: `Q: Why should we unban you?`, value: `A: ${ReasonUnban}`},
{name: `Q: Why were you banned?`, value: `A: ${ReasonBan}`},
{name: `Q: Do you think the ban was fair?`, value: `A: ${Fairness}`}
)
.setFooter({ text: `This is beta, please report any errors.` })
.setThumbnail(user.displayAvatarURL({ dynamic: true, size: 512 }))
await modal.reply({ content: 'Your submission was recieved successfully!', ephemeral: true }).then(() => {
client.guilds.cache.get(`954881682429853726`).channels.cache.get('998833987810246666').send({ embeds: [appealEmbed] });
})
console.log(modal.getTextInputValue('RobloxUsername-gba'))
console.log(modal.getTextInputValue('Moderator-gba'))
console.log(modal.getTextInputValue('unbanreason-gba'))
console.log(modal.getTextInputValue('banreason-gba'))
console.log(modal.getSelectMenuValues('fair-gba'))
}
});
}
Extra Information:
Node Version: 'v16.14.2'
NPM Version: '8.5.0'
Discord.js Version: '^13.7.0'
Thank you in advance.
Select Menu's within Modals are unsupported and not documented by Discord - this is not a user issue nor an issue with the code.
Select Menu's just don't show up on mobile and only partially work within Modals (as of August 2022).