Update view command to use fuzzy search instead of direct card number (#340)

- Install `fuse.js` package to allow for fuzzy finding
- Update the `/view` command to use fuzzy search by name instead of the card number
- Add pagination for the command via the `View` button event

#154

Reviewed-on: #340
Reviewed-by: VylpesTester <tester@vylpes.com>
Co-authored-by: Ethan Lane <ethan@vylpes.com>
Co-committed-by: Ethan Lane <ethan@vylpes.com>

.env.example

@@ -32,6 +32,7 @@ DB_AUTH_PASS=
 DB_SYNC=
 DB_LOGGING=
 DB_DATA_LOCATION=./.temp/database
+DB_ROOT_HOST=0.0.0.0
 
 DB_CARD_FILE=:memory:
 

package.json

@@ -37,6 +37,7 @@
     "discord.js": "^14.15.3",
     "dotenv": "^16.0.0",
     "express": "^4.18.2",
+    "fuse.js": "^7.0.0",
     "glob": "^10.3.10",
     "jest": "^29.0.0",
     "jest-mock-extended": "^3.0.0",

src/buttonEvents/View.ts

@@ -0,0 +1,25 @@
+import {ButtonInteraction} from "discord.js";
+import {ButtonEvent} from "../type/buttonEvent.js";
+import CardSearchHelper from "../helpers/CardSearchHelper.js";
+
+export default class View extends ButtonEvent {
+    public override async execute(interaction: ButtonInteraction) {
+        const page = interaction.customId.split(" ")[1];
+        const query = interaction.customId.split(" ").splice(1).join(" ");
+
+        await interaction.deferUpdate();
+
+        const searchResult = await CardSearchHelper.GenerateSearchPage(query, interaction.user.id, Number(page));
+
+        if (!searchResult) {
+            await interaction.followUp("No results found");
+            return;
+        }
+
+        await interaction.editReply({
+            embeds: [ searchResult.embed ],
+            components: [ searchResult.row ],
+            files: [ searchResult.attachment ],
+        });
+    }
+}

src/commands/view.ts

@@ -1,11 +1,7 @@
-import { AttachmentBuilder, CommandInteraction, DiscordAPIError, SlashCommandBuilder } from "discord.js";
+import { CommandInteraction, SlashCommandBuilder } from "discord.js";
 import { Command } from "../type/command";
-import { CoreClient } from "../client/client";
-import { readFileSync } from "fs";
-import path from "path";
-import Inventory from "../database/entities/app/Inventory";
-import CardDropHelperMetadata from "../helpers/CardDropHelperMetadata";
 import AppLogger from "../client/appLogger";
+import CardSearchHelper from "../helpers/CardSearchHelper";
 
 export default class View extends Command {
     constructor() {
@@ -16,67 +12,29 @@ export default class View extends Command {
             .setDescription("View a specific command")
             .addStringOption(x =>
                 x
-                    .setName("cardnumber")
+                    .setName("name")
-                    .setDescription("The card number to view")
+                    .setDescription("The card name to search for")
                     .setRequired(true));
     }
 
     public override async execute(interaction: CommandInteraction) {
-        const cardNumber = interaction.options.get("cardnumber");
+        const name = interaction.options.get("name", true);
 
-        AppLogger.LogSilly("Commands/View", `Parameters: cardNumber=${cardNumber?.value}`);
+        AppLogger.LogSilly("Commands/View", `Parameters: name=${name.value}`);
-
-        if (!cardNumber || !cardNumber.value) {
-            await interaction.reply("Card number is required.");
-            return;
-        }
-
-        const card = CoreClient.Cards
-            .flatMap(x => x.cards)
-            .find(x => x.id == cardNumber.value);
-
-        if (!card) {
-            await interaction.reply("Card not found.");
-            return;
-        }
-
-        const series = CoreClient.Cards
-            .find(x => x.cards.includes(card))!;
-
-        let image: Buffer;
-        const imageFileName = card.path.split("/").pop()!;
-
-        try {
-            image = readFileSync(path.join(process.env.DATA_DIR!, "cards", card.path));
-        } catch {
-            AppLogger.LogError("Commands/View", `Unable to fetch image for card ${card.id}.`);
-
-            await interaction.reply(`Unable to fetch image for card ${card.id}.`);
-            return;
-        }
 
         await interaction.deferReply();
 
-        const attachment = new AttachmentBuilder(image, { name: imageFileName });
+        const searchResult = await CardSearchHelper.GenerateSearchPage(name.value!.toString(), interaction.user.id, 0);
 
-        const inventory = await Inventory.FetchOneByCardNumberAndUserId(interaction.user.id, card.id);
+        if (!searchResult) {
-        const quantityClaimed = inventory ? inventory.Quantity : 0;
+            await interaction.editReply("No results found");
-
+            return;
-        const embed = CardDropHelperMetadata.GenerateDropEmbed({ card, series }, quantityClaimed, imageFileName);
-
-        try {
-            await interaction.editReply({
-                embeds: [ embed ],
-                files: [ attachment ],
-            });
-        } catch (e) {
-            AppLogger.LogError("Commands/View", `Error sending view for card ${card.id}: ${e}`);
-
-            if (e instanceof DiscordAPIError) {
-                await interaction.editReply(`Unable to send next drop. Please try again, and report this if it keeps happening. Code: ${e.code}.`);
-            } else {
-                await interaction.editReply("Unable to send next drop. Please try again, and report this if it keeps happening. Code: UNKNOWN.");
-            }
         }
+
+        await interaction.editReply({
+            embeds: [ searchResult.embed ],
+            components: [ searchResult.row ],
+            files: [ searchResult.attachment ],
+        });
     }
 }

src/helpers/CardSearchHelper.ts

@@ -0,0 +1,62 @@
+import {ActionRowBuilder, AttachmentBuilder, ButtonBuilder, ButtonStyle, EmbedBuilder} from "discord.js";
+import Fuse from "fuse.js";
+import {CoreClient} from "../client/client.js";
+import CardDropHelperMetadata from "./CardDropHelperMetadata.js";
+import Inventory from "../database/entities/app/Inventory.js";
+import {readFileSync} from "fs";
+import path from "path";
+import AppLogger from "../client/appLogger.js";
+
+interface ReturnedPage {
+    embed: EmbedBuilder,
+    row: ActionRowBuilder<ButtonBuilder>,
+    attachment: AttachmentBuilder,
+}
+
+export default class CardSearchHelper {
+    public static async GenerateSearchPage(query: string, userid: string, page: number): Promise<ReturnedPage | undefined> {
+        const fzf = new Fuse(CoreClient.Cards.flatMap(x => x.cards), { keys: ["name"] });
+        const entries = fzf.search(query);
+
+        const entry = entries[page];
+
+        if (!entry) return undefined;
+
+        const card = CardDropHelperMetadata.GetCardByCardNumber(entry.item.id);
+
+        if (!card) return undefined;
+
+        let image: Buffer;
+        const imageFileName = card.card.path.split("/").pop()!;
+
+        try {
+            image = readFileSync(path.join(process.env.DATA_DIR!, "cards", card.card.path));
+        } catch {
+            AppLogger.LogError("Commands/View", `Unable to fetch image for card ${card.card.id}.`);
+            
+            return undefined;
+        }
+
+        const attachment = new AttachmentBuilder(image, { name: imageFileName });
+        
+        const inventory = await Inventory.FetchOneByCardNumberAndUserId(userid, card.card.id);
+        const quantityClaimed = inventory?.Quantity ?? 0;
+
+        const embed = CardDropHelperMetadata.GenerateDropEmbed(card, quantityClaimed, imageFileName);
+
+        const row = new ActionRowBuilder<ButtonBuilder>()
+            .addComponents(
+                new ButtonBuilder()
+                    .setCustomId(`view ${page - 1} ${query}`)
+                    .setLabel("Previous")
+                    .setStyle(ButtonStyle.Primary)
+                    .setDisabled(page == 0),
+                new ButtonBuilder()
+                    .setCustomId(`view ${page + 1} ${query}`)
+                    .setLabel("Next")
+                    .setStyle(ButtonStyle.Primary)
+                    .setDisabled(page + 1 == entries.length));
+
+        return { embed, row, attachment };
+    }
+}

src/registry.ts

@@ -27,6 +27,7 @@ import Reroll from "./buttonEvents/Reroll";
 import SacrificeButtonEvent from "./buttonEvents/Sacrifice";
 import SeriesEvent from "./buttonEvents/Series";
 import TradeButtonEvent from "./buttonEvents/Trade";
+import ViewButtonEvent from "./buttonEvents/View";
 
 export default class Registry {
     public static RegisterCommands() {
@@ -57,5 +58,6 @@ export default class Registry {
         CoreClient.RegisterButtonEvent("sacrifice", new SacrificeButtonEvent());
         CoreClient.RegisterButtonEvent("series", new SeriesEvent());
         CoreClient.RegisterButtonEvent("trade", new TradeButtonEvent());
+        CoreClient.RegisterButtonEvent("view", new ViewButtonEvent());
     }
 }

yarn.lock

@@ -3152,6 +3152,11 @@ function-bind@^1.1.2:
   resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.2.tgz#2c02d864d97f3ea6c8830c464cbd11ab6eab7a1c"
   integrity sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==
 
+fuse.js@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/fuse.js/-/fuse.js-7.0.0.tgz#6573c9fcd4c8268e403b4fc7d7131ffcf99a9eb2"
+  integrity sha512-14F4hBIxqKvD4Zz/XjDc3y94mNZN6pRv3U13Udo0lNLCWRBUsrMv2xwcF/y/Z5sV6+FQW+/ow68cHpm4sunt8Q==
+
 gauge@^3.0.0:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/gauge/-/gauge-3.0.2.tgz#03bf4441c044383908bcfa0656ad91803259b395"