Add cancel button event

src/buttonEvents/Effects.ts

@@ -1,7 +1,9 @@
-import {ButtonInteraction,EmbedBuilder} from "discord.js";
+import {ActionRowBuilder, ButtonBuilder, ButtonInteraction,ButtonStyle,Embed,EmbedBuilder} from "discord.js";
 import {ButtonEvent} from "../type/buttonEvent";
 import EffectHelper from "../helpers/EffectHelper";
 import { EffectDetails } from "../constants/EffectDetails";
+import TimeLengthInput from "../helpers/TimeLengthInput";
+import EmbedColours from "../constants/EmbedColours";
 
 export default class Effects extends ButtonEvent {
     public override async execute(interaction: ButtonInteraction) {
@@ -28,7 +30,7 @@ export default class Effects extends ButtonEvent {
         }
 
         const result = await EffectHelper.GenerateEffectEmbed(interaction.user.id, page);
-        
+
         await interaction.update({
             embeds: [ result.embed ],
             components: [ result.row ],
@@ -42,6 +44,9 @@ export default class Effects extends ButtonEvent {
             case "confirm":
                 await this.UseConfirm(interaction);
                 break;
+            case "cancel":
+                await this.UseCancel(interaction);
+                break;
         }
     }
 
@@ -64,6 +69,7 @@ export default class Effects extends ButtonEvent {
             const embed = new EmbedBuilder()
                 .setTitle("Effect Used")
                 .setDescription("You now have an active effect!")
+                .setColor(EmbedColours.Green)
                 .addFields([
                     {
                         name: "Effect",
@@ -77,10 +83,76 @@ export default class Effects extends ButtonEvent {
                     },
                 ]);
 
-            await interaction.update({ embeds: [ embed ] });
+            const row = new ActionRowBuilder<ButtonBuilder>()
+                .addComponents([
+                    new ButtonBuilder()
+                        .setLabel("Confirm")
+                        .setCustomId(`effects use confirm ${effectDetail.id}`)
+                        .setStyle(ButtonStyle.Primary)
+                        .setDisabled(true),
+                    new ButtonBuilder()
+                        .setLabel("Cancel")
+                        .setCustomId(`effects use cancel ${effectDetail.id}`)
+                        .setStyle(ButtonStyle.Danger)
+                        .setDisabled(true),
+                ]);
+
+            await interaction.update({
+                embeds: [ embed ],
+                components: [ row ],
+            });
             return;
         }
 
         await interaction.reply("Unable to use effect! Please make sure you have it in your inventory and is not on cooldown");
     }
+
+    private async UseCancel(interaction: ButtonInteraction) {
+        const id = interaction.customId.split(" ")[3];
+
+        const effectDetail = EffectDetails.get(id);
+
+        if (!effectDetail) {
+            await interaction.reply("Unable to find effect!");
+            return;
+        }
+
+        const timeLengthInput = TimeLengthInput.ConvertFromMilliseconds(effectDetail.duration);
+
+        const embed = new EmbedBuilder()
+            .setTitle("Effect Use Cancelled")
+            .setDescription("The effect from your inventory has not been used")
+            .setColor(EmbedColours.Grey)
+            .addFields([
+                {
+                    name: "Effect",
+                    value: effectDetail.friendlyName,
+                    inline: true,
+                },
+                {
+                    name: "Expires",
+                    value: timeLengthInput.GetLengthShort(),
+                    inline: true,
+                },
+            ]);
+
+        const row = new ActionRowBuilder<ButtonBuilder>()
+            .addComponents([
+                new ButtonBuilder()
+                    .setLabel("Confirm")
+                    .setCustomId(`effects use confirm ${effectDetail.id}`)
+                    .setStyle(ButtonStyle.Primary)
+                    .setDisabled(true),
+                new ButtonBuilder()
+                    .setLabel("Cancel")
+                    .setCustomId(`effects use cancel ${effectDetail.id}`)
+                    .setStyle(ButtonStyle.Danger)
+                    .setDisabled(true),
+            ]);
+
+        await interaction.update({
+            embeds: [ embed ],
+            components: [ row ],
+        });
+    }
 }

src/commands/effects.ts

@@ -1,8 +1,10 @@
-import {CommandInteraction, EmbedBuilder, SlashCommandBuilder} from "discord.js";
+import {ActionRowBuilder, ButtonBuilder, ButtonStyle, CommandInteraction, EmbedBuilder, SlashCommandBuilder} from "discord.js";
 import {Command} from "../type/command";
 import EffectHelper from "../helpers/EffectHelper";
 import {EffectDetails} from "../constants/EffectDetails";
 import UserEffect from "../database/entities/app/UserEffect";
+import TimeLengthInput from "../helpers/TimeLengthInput";
+import EmbedColours from "../constants/EmbedColours";
 
 export default class Effects extends Command {
     constructor() {
@@ -68,16 +70,19 @@ export default class Effects extends Command {
             return;
         }
 
-        const canUseEffect = await EffectHelper.CanUseEffect(interaction.user.id, id)
+        const canUseEffect = await EffectHelper.CanUseEffect(interaction.user.id, id);
 
         if (!canUseEffect) {
             await interaction.reply("Unable to use effect! Please make sure you have it in your inventory and is not on cooldown");
             return;
         }
 
+        const timeLengthInput = TimeLengthInput.ConvertFromMilliseconds(effectDetail.duration);
+
         const embed = new EmbedBuilder()
             .setTitle("Effect Confirmation")
             .setDescription("Would you like to use this effect?")
+            .setColor(EmbedColours.Ok)
             .addFields([
                 {
                     name: "Effect",
@@ -86,11 +91,26 @@ export default class Effects extends Command {
                 },
                 {
                     name: "Length",
-                    value: "",
+                    value: timeLengthInput.GetLengthShort(),
                     inline: true,
                 },
             ]);
 
-        await interaction.reply({ embeds: [ embed ] });
+        const row = new ActionRowBuilder<ButtonBuilder>()
+            .addComponents([
+                new ButtonBuilder()
+                    .setLabel("Confirm")
+                    .setCustomId(`effects use confirm ${effectDetail.id}`)
+                    .setStyle(ButtonStyle.Primary),
+                new ButtonBuilder()
+                    .setLabel("Cancel")
+                    .setCustomId(`effects use cancel ${effectDetail.id}`)
+                    .setStyle(ButtonStyle.Danger),
+            ]);
+
+        await interaction.reply({
+            embeds: [ embed ],
+            components: [ row ],
+        });
     }
 }

src/helpers/TimeLengthInput.ts

@@ -120,5 +120,17 @@ export default class TimeLengthInput {
     }
 
     public static ConvertFromMilliseconds(ms: number): TimeLengthInput {
+        const seconds = Math.floor(ms / 1000);
+        const minutes = Math.floor(seconds / 60);
+        const hours = Math.floor(minutes / 60);
+        const days = Math.floor(hours / 24);
+
+        const remainingSeconds = seconds % 60;
+        const remainingMinutes = minutes % 60;
+        const remainingHours = hours % 24;
+
+        const timeString = `${days}d ${remainingHours}h ${remainingMinutes}m ${remainingSeconds}s`;
+
+        return new TimeLengthInput(timeString);
     }
 }