Update the series view command to be in greyscale if the user has not claimed the card (#297)

- Install `Jimp` package so we can manipulate images
- Update the `ImageHelper` class to accept the user id so we can check if a user has claimed the card
- Update the `/series view` command to pass the user id into the ImageHelper

#279

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

src/helpers/ImageHelper.ts

@@ -2,11 +2,18 @@ import {createCanvas, loadImage} from "canvas";
 import path from "path";
 import AppLogger from "../client/appLogger";
 import {existsSync} from "fs";
+import Inventory from "../database/entities/app/Inventory";
+import Jimp from "jimp";
+
+interface CardInput {
+    id: string;
+    path: string;
+}
 
 export default class ImageHelper {
-    public static async GenerateCardImageGrid(paths: string[]): Promise<Buffer> {
+    public static async GenerateCardImageGrid(cards: CardInput[], userId?: string): Promise<Buffer> {
         const gridWidth = 3;
-        const gridHeight = Math.ceil(paths.length / gridWidth);
+        const gridHeight = Math.ceil(cards.length / gridWidth);
 
         const imageWidth = 526;
         const imageHeight = 712;
@@ -17,17 +24,29 @@ export default class ImageHelper {
         const canvas = createCanvas(canvasWidth, canvasHeight);
         const ctx = canvas.getContext("2d");
 
-        for (let i = 0; i < paths.length; i++) {
-            const filePath = path.join(process.env.DATA_DIR!, "cards", paths[i]);
+        for (let i = 0; i < cards.length; i++) {
+            const card = cards[i];
+
+            const filePath = path.join(process.env.DATA_DIR!, "cards", card.path);
 
             const exists = existsSync(filePath);
 
             if (!exists) {
-                AppLogger.LogError("ImageHelper/GenerateCardImageGrid", `Failed to load image from path ${paths[i]}`);
+                AppLogger.LogError("ImageHelper/GenerateCardImageGrid", `Failed to load image from path ${card.path}`);
                 continue;
             }
 
-            const image = await loadImage(filePath);
+            const imageData = await Jimp.read(filePath);
+
+            if (userId != null) {
+                const claimed = await Inventory.FetchOneByCardNumberAndUserId(userId, card.id);
+
+                if (!claimed || claimed.Quantity == 0) {
+                    imageData.greyscale();
+                }
+            }
+
+            const image = await loadImage(await imageData.getBufferAsync("image/jpeg"));
 
             const x = i % gridWidth;
             const y = Math.floor(i / gridWidth);

src/helpers/InventoryHelper.ts

@@ -112,7 +112,7 @@ export default class InventoryHelper {
                     .setStyle(ButtonStyle.Primary)
                     .setDisabled(page + 1 == pages.length));
 
-        const buffer = await ImageHelper.GenerateCardImageGrid(currentPage.cards.map(x => x.path));
+        const buffer = await ImageHelper.GenerateCardImageGrid(currentPage.cards.map(x => ({ id: x.id, path: x.path })));
         const image = new AttachmentBuilder(buffer, { name: "page.png" });
 
         return { embed, row, image };

src/helpers/SeriesHelper.ts

@@ -7,7 +7,7 @@ import { CardRarityToString } from "../constants/CardRarity";
 import ImageHelper from "./ImageHelper";
 
 export default class SeriesHelper {
-    public static async GenerateSeriesViewPage(seriesId: number, page: number): Promise<{ embed: EmbedBuilder, row: ActionRowBuilder<ButtonBuilder>, image: AttachmentBuilder } | null> {
+    public static async GenerateSeriesViewPage(seriesId: number, page: number, userId: string): Promise<{ embed: EmbedBuilder, row: ActionRowBuilder<ButtonBuilder>, image: AttachmentBuilder } | null> {
         AppLogger.LogSilly("Helpers/SeriesHelper", `Parameters: seriesId=${seriesId}, page=${page}`);
 
         const itemsPerPage = 9;
@@ -54,7 +54,7 @@ export default class SeriesHelper {
                     .setStyle(ButtonStyle.Primary)
                     .setDisabled(page + 1 > totalPages));
 
-        const buffer = await ImageHelper.GenerateCardImageGrid(cardsOnPage.map(x => x.path));
+        const buffer = await ImageHelper.GenerateCardImageGrid(cardsOnPage.map(x => ({id: x.id, path: x.path})), userId);
         const image = new AttachmentBuilder(buffer, { name: "page.png" });
 
         return { embed, row, image };