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

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]
+    };
 }