make it small!

genius-invokation · Jan 22, 2025 · f2a15b6 · f2a15b6
1 parent e53ed7d
commit f2a15b6
Showing 1 changed file with 30 additions and 25 deletions.
diff --git a/api/v2/deck_image.js b/api/v2/deck_image.js
@@ -13,15 +13,15 @@ const shareIdMap = new Map(
  * @typedef {import("@vercel/node").VercelResponse} VercelResponse
  */
 
-const WIDTH = 800;
-const HEIGHT = 1200;
+const WIDTH = 200;
+const HEIGHT = 310;
 
-const CHARACTER_WIDTH = 150;
-const CARD_WIDTH = 100;
-const CHARACTER_HEIGHT = Math.round(150 * (11 / 7));
-const CARD_HEIGHT = Math.round(100 * (11 / 7));
+const CHARACTER_WIDTH = 40;
+const CARD_WIDTH = 28;
+const CHARACTER_HEIGHT = Math.round(CHARACTER_WIDTH * (11 / 7));
+const CARD_HEIGHT = Math.round(CARD_WIDTH * (11 / 7));
 
-const GAP = 15;
+const GAP = 4;
 
 const Y_PADDING = Math.round(
   (HEIGHT - CHARACTER_HEIGHT - CARD_HEIGHT * 5 - GAP * 4) / 3,
@@ -67,33 +67,38 @@ export default async function handler(req, res) {
         background: { r: 255, g: 255, b: 255 },
       },
     });
-    /** @type {import("sharp").OverlayOptions[]} */
+    /** @type {Promise<import("sharp").OverlayOptions>[]} */
     const composites = [];
     for (let i = 0; i < 3; i++) {
       const ch = cards[i];
-      const cardFace = await sharp(`${IMAGE_DIR}/${ch.cardFace}.webp`)
-        .resize(CHARACTER_WIDTH, CHARACTER_HEIGHT)
-        .toBuffer();
-      composites.push({
-        input: cardFace,
-        top: Y_PADDING,
-        left: X_CHARACTER_PADDING + i * (CHARACTER_WIDTH + GAP),
-      });
+      composites.push(
+        (async () => ({
+          input: await sharp(`${IMAGE_DIR}/${ch.cardFace}.webp`)
+            .resize(CHARACTER_WIDTH, CHARACTER_HEIGHT)
+            .toBuffer(),
+          top: Y_PADDING,
+          left: X_CHARACTER_PADDING + i * (CHARACTER_WIDTH + GAP),
+        }))(),
+      );
     }
     for (let i = 3; i < 33; i++) {
       const ch = cards[i];
       const xIndex = (i - 3) % 6;
       const yIndex = Math.floor((i - 3) / 6);
-      const cardFace = await sharp(`${IMAGE_DIR}/${ch.cardFace}.webp`)
-        .resize(CARD_WIDTH, CARD_HEIGHT)
-        .toBuffer();
-      composites.push({
-        input: cardFace,
-        top: 2 * Y_PADDING + CHARACTER_HEIGHT + yIndex * (CARD_HEIGHT + GAP),
-        left: X_CARD_PADDING + xIndex * (CARD_WIDTH + GAP),
-      });
+      composites.push(
+        (async () => ({
+          input: await sharp(`${IMAGE_DIR}/${ch.cardFace}.webp`)
+            .resize(CARD_WIDTH, CARD_HEIGHT)
+            .toBuffer(),
+          top: 2 * Y_PADDING + CHARACTER_HEIGHT + yIndex * (CARD_HEIGHT + GAP),
+          left: X_CARD_PADDING + xIndex * (CARD_WIDTH + GAP),
+        }))(),
+      );
     }
-    const result = await image.composite(composites).png().toBuffer();
+    const result = await image
+      .composite(await Promise.all(composites))
+      .png()
+      .toBuffer();
     res.setHeader("Content-Type", "image/png").send(result);
   } catch (e) {
     res.redirect(