feat: Implement graphical lootdrop cards for lootdrop and claimed messages.

src/modules/economy/lootdrop.interaction.ts

@@ -17,17 +17,19 @@ export async function handleLootdropInteraction(interaction: ButtonInteraction)
             content: `🎉 You successfully claimed **${result.amount} ${result.currency}**!`
         });
 
-        // Update original message to show claimed state
-        const originalEmbed = interaction.message.embeds[0];
-        if (!originalEmbed) return;
-
-        const { embeds, components } = getLootdropClaimedMessage(
-            originalEmbed.title || "💰 LOOTDROP!",
+        const { content, files, components } = await getLootdropClaimedMessage(
             interaction.user.id,
+            interaction.user.username,
+            interaction.user.displayAvatarURL({ extension: "png" }),
             result.amount || 0,
             result.currency || "Coins"
         );
 
-        await interaction.message.edit({ embeds, components });
+        await interaction.message.edit({
+            content,
+            embeds: [],
+            files,
+            components
+        });
     }
 }

src/modules/economy/lootdrop.service.ts

@@ -94,10 +94,10 @@ class LootdropService {
         const reward = Math.floor(Math.random() * (max - min + 1)) + min;
         const currency = config.lootdrop.reward.currency;
 
-        const { embeds, components } = getLootdropMessage(reward, currency);
+        const { content, files, components } = await getLootdropMessage(reward, currency);
 
         try {
-            const message = await channel.send({ embeds, components });
+            const message = await channel.send({ content, files, components });
 
             // Persist to DB
             await DrizzleClient.insert(lootdrops).values({

src/modules/economy/lootdrop.view.ts

@@ -1,31 +1,29 @@
-import { ActionRowBuilder, ButtonBuilder, ButtonStyle, EmbedBuilder } from "discord.js";
-import { createBaseEmbed } from "@lib/embeds";
+import { ActionRowBuilder, AttachmentBuilder, ButtonBuilder, ButtonStyle } from "discord.js";
+import { generateLootdropCard, generateClaimedLootdropCard } from "@/graphics/lootdrop";
 
-export function getLootdropMessage(reward: number, currency: string) {
-    const embed = createBaseEmbed(
-        "💰 LOOTDROP!",
-        `A lootdrop has appeared! Click the button below to claim **${reward} ${currency}**!`,
-        "#FFD700"
-    );
+export async function getLootdropMessage(reward: number, currency: string) {
+    const cardBuffer = await generateLootdropCard(reward, currency);
+    const attachment = new AttachmentBuilder(cardBuffer, { name: "lootdrop.png" });
 
     const claimButton = new ButtonBuilder()
         .setCustomId("lootdrop_claim")
         .setLabel("CLAIM REWARD")
-        .setStyle(ButtonStyle.Success)
-        .setEmoji("💸");
+        .setStyle(ButtonStyle.Secondary) // Changed to Secondary to fit the darker theme better? Or keep Success? Let's try Secondary with custom emoji
+        .setEmoji("🌠");
 
     const row = new ActionRowBuilder<ButtonBuilder>()
         .addComponents(claimButton);
 
-    return { embeds: [embed], components: [row] };
+    return {
+        content: "",
+        files: [attachment],
+        components: [row]
+    };
 }
 
-export function getLootdropClaimedMessage(originalTitle: string, userId: string, amount: number, currency: string) {
-    const newEmbed = createBaseEmbed(
-        originalTitle || "💰 LOOTDROP!",
-        `✅ Claimed by <@${userId}> for **${amount} ${currency}**!`,
-        "#00FF00"
-    );
+export async function getLootdropClaimedMessage(userId: string, username: string, avatarUrl: string, amount: number, currency: string) {
+    const cardBuffer = await generateClaimedLootdropCard(amount, currency, username, avatarUrl);
+    const attachment = new AttachmentBuilder(cardBuffer, { name: "lootdrop_claimed.png" });
 
     const newRow = new ActionRowBuilder<ButtonBuilder>()
         .addComponents(
@@ -37,5 +35,9 @@ export function getLootdropClaimedMessage(originalTitle: string, userId: string,
                 .setDisabled(true)
         );
 
-    return { embeds: [newEmbed], components: [newRow] };
+    return {
+        content: ``, // Remove content as the image says it all
+        files: [attachment],
+        components: [newRow]
+    };
 }