add option to not use canvas (#280)

Co-authored-by: pufferfish101007 <pufferfish101007@users.noreply.github.com> Co-authored-by: RedGuy12 <61329810+RedGuy12@users.noreply.github.com>
scratchaddons-community · Jul 24, 2023 · 0f7d528 · 0f7d528
1 parent 026bb1c
commit 0f7d528
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 36 deletions.
diff --git a/common/constants.ts b/common/constants.ts
@@ -58,4 +58,6 @@ export default {
 		robotop: "323630372531470346",
 		disboard: "302050872383242240",
 	},
+
+	canvasEnabled: process.env.CANVAS !== "false",
 };
diff --git a/common/types/global.d.ts b/common/types/global.d.ts
@@ -51,6 +51,8 @@ declare global {
 			NODE_ENV?: "development" | "production";
 			PORT?: `${number}`;
 			CDBL_AUTH?: string;
+			/** Defaults to `true` */
+			CANVAS?: `${boolean}`;
 		}
 	}
 }

diff --git a/index.ts b/index.ts
@@ -4,17 +4,21 @@ import dns from "node:dns";
 import { ActivityType, GatewayIntentBits } from "discord.js";
 import "dotenv/config";
 import pkg from "./package.json" assert { type: "json" };
-import { GlobalFonts } from "@napi-rs/canvas";
 import { login, client } from "strife.js";
-import { Chart } from "chart.js";
 import constants from "./common/constants.js";
 
 dns.setDefaultResultOrder("ipv4first");
-GlobalFonts.registerFromPath(
-	path.resolve(path.dirname(url.fileURLToPath(import.meta.url)), `../common/sora/font.ttf`),
-	"Sora",
-);
-Chart.defaults.font.family = "Sora";
+
+if (constants.canvasEnabled) {
+	const GlobalFonts = (await import("@napi-rs/canvas")).GlobalFonts;
+	const Chart = (await import("chart.js")).Chart;
+
+	GlobalFonts.registerFromPath(
+		path.resolve(path.dirname(url.fileURLToPath(import.meta.url)), `../common/sora/font.ttf`),
+		"Sora",
+	);
+	Chart.defaults.font.family = "Sora";
+}
 
 await login({
 	modulesDir: path.resolve(path.dirname(url.fileURLToPath(import.meta.url)), "./modules"),

diff --git a/modules/xp/index.ts b/modules/xp/index.ts
@@ -7,7 +7,6 @@ import { getSettings } from "../settings.js";
 import { client, defineCommand, defineEvent, defineButton, defineSelect } from "strife.js";
 import getUserRank from "./rank.js";
 import { giveXpForMessage } from "./giveXp.js";
-import graph from "./graph.js";
 
 defineEvent("messageCreate", async (message) => {
 	if (message.guild?.id !== config.guild.id) return;
@@ -42,8 +41,10 @@ defineCommand(
 					},
 				},
 			},
-			graph: { description: "Graph users’ XP over the last week" },
 		},
+		...(constants.canvasEnabled
+			? { graph: { description: "Graph users’ XP over the last week" } }
+			: {}),
 	},
 
 	async (interaction) => {
@@ -129,4 +130,6 @@ defineButton("xp", async (interaction, userId = "") => {
 	await getUserRank(interaction, await client.users.fetch(userId));
 });
 
-defineSelect("weeklyXpGraph", graph);
+if (constants.canvasEnabled) {
+	defineSelect("weeklyXpGraph", (await import("./graph.js")).default);
+}
diff --git a/modules/xp/rank.ts b/modules/xp/rank.ts
@@ -1,4 +1,3 @@
-import { createCanvas } from "@napi-rs/canvas";
 import type { ButtonInteraction, ChatInputCommandInteraction, User } from "discord.js";
 import config from "../../common/config.js";
 import constants from "../../common/constants.js";
@@ -25,30 +24,42 @@ export default async function getUserRank(
 	const weeklyRank = getFullWeeklyData().findIndex((entry) => entry.user === user.id) + 1;
 	const approximateWeeklyRank = Math.ceil(weeklyRank / 10) * 10;
 
-	const canvas = createCanvas(1000, 50);
-	const context = canvas.getContext("2d");
-	context.fillStyle = "#0003";
-	context.fillRect(0, 0, canvas.width, canvas.height);
-	context.fillStyle = `#${convertBase(String(constants.themeColor), 10, 16)}`;
-	const rectangleSize = canvas.width * progress;
-	const paddingPixels = 0.18 * canvas.height;
-	context.fillRect(0, 0, rectangleSize, canvas.height);
-	context.font = `${canvas.height * 0.9}px Sora`;
-	if (progress < 0.145) {
-		context.fillStyle = "#666";
-		context.textAlign = "end";
-		context.fillText(
-			progress.toLocaleString("en-us", { maximumFractionDigits: 1, style: "percent" }),
-			canvas.width - paddingPixels,
-			canvas.height - paddingPixels,
-		);
-	} else {
-		context.fillStyle = "#0009";
-		context.fillText(
-			progress.toLocaleString("en-us", { maximumFractionDigits: 1, style: "percent" }),
-			paddingPixels,
-			canvas.height - paddingPixels,
-		);
+	async function makeCanvasFiles() {
+		if (!constants.canvasEnabled) return [];
+
+			const createCanvas = (await import("@napi-rs/canvas")).createCanvas;
+			const canvas = createCanvas(1000, 50);
+			const context = canvas.getContext("2d");
+			context.fillStyle = "#0003";
+			context.fillRect(0, 0, canvas.width, canvas.height);
+			context.fillStyle = `#${convertBase(String(constants.themeColor), 10, 16)}`;
+			const rectangleSize = canvas.width * progress;
+			const paddingPixels = 0.18 * canvas.height;
+			context.fillRect(0, 0, rectangleSize, canvas.height);
+			context.font = `${canvas.height * 0.9}px Sora`;
+			if (progress < 0.145) {
+				context.fillStyle = "#666";
+				context.textAlign = "end";
+				context.fillText(
+					progress.toLocaleString("en-us", {
+						maximumFractionDigits: 1,
+						style: "percent",
+					}),
+					canvas.width - paddingPixels,
+					canvas.height - paddingPixels,
+				);
+			} else {
+				context.fillStyle = "#0009";
+				context.fillText(
+					progress.toLocaleString("en-us", {
+						maximumFractionDigits: 1,
+						style: "percent",
+					}),
+					paddingPixels,
+					canvas.height - paddingPixels,
+				);
+			}
+			return [{ attachment: canvas.toBuffer("image/png"), name: "progress.png" }];
 	}
 
 	await interaction.reply({
@@ -106,6 +117,6 @@ export default async function getUserRank(
 			},
 		],
 
-		files: [{ attachment: canvas.toBuffer("image/png"), name: "progress.png" }],
+		files: await makeCanvasFiles(),
 	});
 }