feat: add support for mod sets

README.md

@@ -11,6 +11,8 @@ Generate mod images using warframe-items
 ![Vitality](/assets/readme/Vitality.png)
 ![Archgun Riven Mod](/assets/readme/Archgun_Riven_Mod.png)
 ![Primed Flow](/assets/readme/Primed_Flow.png)
+![Auger Message](/assets/readme/Augur_Message_empty.png)
+![Auger Message Full](/assets/readme/Augur_Message_filled.png)
 
 ## Documentation
 

package.json

@@ -58,7 +58,7 @@
     ]
   },
   "mocha": {
-    "timeout": 22000,
+    "timeout": 15000,
     "exit": true,
     "node-option": [
       "import=tsx"

src/drawers.ts

@@ -1,20 +1,22 @@
-import { type Canvas, createCanvas, type Image, loadImage } from '@napi-rs/canvas';
-import type { Mod } from 'warframe-items';
+import { type Canvas, createCanvas, type Image, ImageData, loadImage } from '@napi-rs/canvas';
+import type { Mod, ModSet } from 'warframe-items';
+import { find } from 'warframe-items/utilities';
 
+import { descriptionFont, modRarityMap, titleFont } from './styling.js';
 import {
   fetchModPiece,
   fetchPolarity,
   flip,
   getTier,
+  hexToRGB,
   modDescription,
-  modRarityMap,
   textColor,
   textHeight,
   wrapText,
 } from './utils.js';
 
 export const verticalPad = 70;
-export const horizantalPad = 8;
+export const horizontalPad = 8;
 
 const drawPolarity = async (tier: string, polarity: string): Promise<Canvas> => {
   const image = await fetchPolarity(polarity);
@@ -33,6 +35,36 @@ const drawPolarity = async (tier: string, polarity: string): Promise<Canvas> =>
   return canvas;
 };
 
+export const drawHeader = async (image: Image, tier: string): Promise<Image> => {
+  const maxColors = 255;
+  const canvas = createCanvas(image.width, image.height);
+  const context = canvas.getContext('2d');
+
+  context.drawImage(image, 0, 0);
+
+  const { data } = context.getImageData(0, 0, image.width, image.height);
+  const color = hexToRGB(textColor(tier));
+
+  for (let i = 0; i < data.length; i += 4) {
+    const alpha = data[i + 3];
+    if (alpha > 0) {
+      const brightness = (data[i] + data[i + 1] + data[i + 2]) / 3 / maxColors;
+
+      // Adjust these values to control darkness
+      const originalWeight = 0.2;
+      const tintWeight = 0.8; // lower values for darker tint
+
+      data[i] = Math.min(maxColors, data[i] * originalWeight + color.r * brightness * tintWeight);
+      data[i + 1] = Math.min(maxColors, data[i + 1] * originalWeight + color.g * brightness * tintWeight);
+      data[i + 2] = Math.min(maxColors, data[i + 2] * originalWeight + color.b * brightness * tintWeight);
+    }
+  }
+
+  context.putImageData(new ImageData(data, image.width, image.height), 0, 0);
+
+  return loadImage(await canvas.encode('png'));
+};
+
 /**
  * Props used in creating the image of a backer
  */
@@ -132,6 +164,8 @@ interface BackgroundProps {
   bottom: { width: number; height: number };
   mod: Mod;
   rank?: number;
+  modSetRank?: number;
+  setBonus?: number;
   image?: string;
 }
 
@@ -141,45 +175,53 @@ interface BackgroundProps {
  * @returns {Promise<Image>}
  */
 export const backgroundImage = async (props: BackgroundProps): Promise<Canvas> => {
-  const { background, sideLights, backer, lowerTab, bottom, mod, rank, image } = props;
+  const { background, sideLights, backer, lowerTab, bottom, mod, rank, image, setBonus } = props;
   const tier = getTier(mod);
   const canvas = createCanvas(background.width, background.height);
   const context = canvas.getContext('2d');
 
   context.drawImage(background, 0, 0);
 
   const maxWidth = background.width * 0.8;
-  const description = modDescription(mod.description, mod.levelStats, rank ?? 0);
+  const description = modDescription(rank ?? 0, mod.description, mod.levelStats);
   const lines = description?.split('\n');
 
-  context.font = '12px "Roboto"';
-  const modTextHeight = textHeight(context, maxWidth, mod.name, lines);
+  const modSetProgressHeight = 12;
+  let modSet: ModSet | undefined;
+  let modTextHeight = textHeight(context, maxWidth, mod.name, lines);
+
+  if (mod.modSet) {
+    modSet = find.findItem(mod.modSet) as ModSet;
+    modTextHeight =
+      modTextHeight + textHeight(context, maxWidth, undefined, modSet?.stats[0].split('\n')) + modSetProgressHeight;
+  }
 
   // Track Y after image is drawn to know where to start drawing the text
   let position = canvas.height * 0.17;
   if (mod.imageName || image) {
     const thumb = await loadImage(image ?? `https://cdn.warframestat.us/img/${mod.imageName}`);
-    const thumbWidth = canvas.width - horizantalPad * 2;
+    const thumbWidth = canvas.width - horizontalPad * 2;
     const thumbHeight = thumb.height - modTextHeight;
 
-    context.drawImage(thumb, horizantalPad, position, thumbWidth, thumbHeight);
+    context.drawImage(thumb, horizontalPad, position, thumbWidth, thumbHeight);
 
     position += thumbHeight;
   }
 
+  const lineSpacing = 15;
   context.fillStyle = textColor(tier);
   context.textAlign = 'center';
   context.textBaseline = 'middle';
-  context.font = '400 16px "Roboto"';
-  context.fillText(mod.name, canvas.width * 0.5, position + horizantalPad * 2);
+  context.font = titleFont;
+
+  context.fillText(mod.name, canvas.width * 0.5, position + horizontalPad * 2);
 
-  position += horizantalPad * 2;
+  position += horizontalPad + lineSpacing;
   if (description && description.length > 0) {
     const x = canvas.width * 0.5;
+    context.font = descriptionFont;
 
-    context.font = '12px "Roboto"';
-    const lineSpacing = 15;
-    let start = position + horizantalPad * 2;
+    let start = position + horizontalPad * 2;
 
     lines?.forEach((line) => {
       const texts = wrapText(context, line, maxWidth);
@@ -188,6 +230,33 @@ export const backgroundImage = async (props: BackgroundProps): Promise<Canvas> =
         start += lineSpacing;
       });
     });
+
+    if (modSet) {
+      const stats = Math.min(setBonus ?? 0, modSet.stats.length - 1);
+      const modSetPosition = start - lineSpacing;
+      const segment = { width: canvas.width * 0.12, height: modSetProgressHeight };
+      context.strokeStyle = context.fillStyle;
+
+      let startPosition = canvas.width / modSet.stats.length;
+      for (let i = 0; i < modSet.stats.length; i++) {
+        // default to negative to imply disabled
+        const bonus = (setBonus ?? 0) - 1;
+        if (bonus < i) {
+          context.strokeRect(startPosition, modSetPosition, segment.width, segment.height);
+        } else {
+          context.fillRect(startPosition, modSetPosition, segment.width, segment.height);
+        }
+
+        startPosition += segment.width - 1;
+      }
+
+      context.font = descriptionFont;
+      start = start + segment.height;
+      wrapText(context, modSet.stats[stats], maxWidth).forEach((text) => {
+        context.fillText(text, x, start, maxWidth);
+        start += lineSpacing;
+      });
+    }
   }
 
   const sideLightsY = background.height * 0.21;

src/generator.ts

@@ -1,17 +1,17 @@
 import { createCanvas } from '@napi-rs/canvas';
 import type { Mod } from 'warframe-items';
 
-import { backgroundImage, bottomImage, horizantalPad } from './drawers.js';
-import {
-  type CanvasOutput,
-  exportCanvas,
-  getBackground,
-  getFrame,
-  getTier,
-  modRarityMap,
-  registerFonts,
-} from './utils.js';
+import { backgroundImage, bottomImage, drawHeader, horizontalPad } from './drawers';
+import { modRarityMap } from './styling';
+import { type CanvasOutput, exportCanvas, fetchHeader, getBackground, getFrame, getTier, registerFonts } from './utils';
 
+export interface GenerateModProps {
+  mod: Mod;
+  rank?: number;
+  setBonus?: number;
+  image?: string;
+  output?: CanvasOutput;
+}
 /**
  * Generates a complete mod image
  *
@@ -21,26 +21,20 @@ import {
  *  - gold
  *  - primed
  *  - rivens
+ *  - mod sets
  *
  * None supported mod types will default to using common as it's frame
  *
  * Notes:
  *  - Archon mods will use the gold mod frame
- * @param {Mod} mod The Mod to build the image on
- * @param {CanvasOutput} output The image format to export as (png, webp, avif, jpeg)
- * @param {number | undefined} rank The rank the mod would be at. Can be empty to show unranked
- * @param {string | undefined} image Optional thumbnail to show instead of the mod default thumbnail (Good for memes)
+ * @param {GenerateModProps} props Properties to use when creating mod image
  * @returns {Promise<Buffer<ArrayBufferLike> | undefined>}
  */
-const generate = async (
-  mod: Mod,
-  output: CanvasOutput = { format: 'png' },
-  rank?: number,
-  image?: string
-): Promise<Buffer<ArrayBufferLike> | undefined> => {
+const generate = async (props: GenerateModProps): Promise<Buffer<ArrayBufferLike> | undefined> => {
   // All values here should be percentages based on the background size and NOT on the canvas size.
   // The reason for this is that special mod pieces have a bigger width then the base 256 width of the background,
   // so the canvas has to be big enough to keep those parts in view.
+  const { mod, output, rank, setBonus, image } = props;
   const tier = getTier(mod);
   const isRiven = tier === modRarityMap.riven;
 
@@ -63,20 +57,34 @@ const generate = async (
     bottom: { width: bottom.width, height: bottom.height },
     mod,
     rank,
+    setBonus,
     image,
   });
   context.drawImage(backgroundGen, centerX, centerY);
 
+  const topFrameHeight = background.height * 0.14;
   if (top.width > background.width) {
-    const newXPadding = horizantalPad * 6;
+    const newXPadding = horizontalPad * 6;
     const widthDiff = top.width - background.width - newXPadding;
-    context.drawImage(top, -widthDiff / 2, background.height * 0.14);
+    context.drawImage(top, -widthDiff / 2, topFrameHeight);
   } else {
-    context.drawImage(top, centerX, background.height * 0.14);
+    context.drawImage(top, centerX, topFrameHeight);
+  }
+
+  if (mod.modSet) {
+    const header = await fetchHeader(mod.modSet);
+
+    context.drawImage(
+      await drawHeader(header, tier),
+      background.width * 0.3,
+      background.height * 0.13,
+      header.width * 0.8,
+      header.height * 0.8
+    );
   }
 
   if (bottom.width > background.width) {
-    const newXPadding = horizantalPad * 5;
+    const newXPadding = horizontalPad * 5;
     const widthDiff = bottom.width - background.width - newXPadding;
     context.drawImage(
       await bottomImage({
@@ -108,7 +116,7 @@ const generate = async (
 
   outterContext.drawImage(canvas, (outterCanvas.width - canvas.width) / 2, (outterCanvas.height - canvas.height) / 2);
 
-  return exportCanvas(outterCanvas, output);
+  return exportCanvas(outterCanvas, output ?? { format: 'png' });
 };
 
 export default generate;

src/styling.ts

@@ -0,0 +1,21 @@
+export const titleFont = '400 20px "Roboto"';
+export const descriptionFont = '12px "Roboto"';
+
+type UniquenameType = {
+  [key: string]: string;
+};
+
+export const modRarityMap: UniquenameType = {
+  common: 'Bronze',
+  uncommon: 'Silver',
+  rare: 'Gold',
+  legendary: 'Legendary',
+  riven: 'Omega',
+};
+
+export const tierColor: UniquenameType = {
+  Bronze: '#CA9A87',
+  Silver: '#FFFFFF',
+  Gold: '#FAE7BE',
+  Omega: '#AC83D5',
+};