From 202137d99b2566f61fdb77e268ae9d4d632cbcdc Mon Sep 17 00:00:00 2001
From: Evorp <3vorpgaming@gmail.com>
Date: Sun, 15 Oct 2023 21:31:24 -0700
Subject: [PATCH] image command consistency fixes

---
 src/helpers/images/animate.ts  | 30 +++++++++++++++---------------
 src/helpers/images/multiply.ts | 16 ++++++++--------
 src/helpers/images/palette.ts  | 21 ++++++++++-----------
 src/helpers/images/tile.ts     |  6 +++---
 4 files changed, 36 insertions(+), 37 deletions(-)

diff --git a/src/helpers/images/animate.ts b/src/helpers/images/animate.ts
index a18fd39db..c9eaf03a2 100644
--- a/src/helpers/images/animate.ts
+++ b/src/helpers/images/animate.ts
@@ -59,22 +59,22 @@ export async function animate(origin: ImageSource, mcmeta: MCMETA): Promise<Buff
 
 	// initialize gif encoder and final canvas
 	const canvas = createCanvas(mcmeta.animation.width, mcmeta.animation.height);
-	const context = canvas.getContext("2d");
-	context.imageSmoothingEnabled = false;
+	const ctx = canvas.getContext("2d");
+	ctx.imageSmoothingEnabled = false;
 	const encoder = new GIFEncoder(mcmeta.animation.width, mcmeta.animation.height);
 	encoder.start();
 	encoder.setTransparent(true);
-	context.globalCompositeOperation = "copy";
+	ctx.globalCompositeOperation = "copy";
 
 	if (mcmeta.animation.interpolate) {
 		for (let i = 0; i < frames.length; ++i) {
 			for (let y = 1; y <= frametime; ++y) {
-				context.clearRect(0, 0, mcmeta.animation.width, mcmeta.animation.height);
-				context.globalAlpha = 1;
-				context.globalCompositeOperation = "copy";
+				ctx.clearRect(0, 0, mcmeta.animation.width, mcmeta.animation.height);
+				ctx.globalAlpha = 1;
+				ctx.globalCompositeOperation = "copy";
 
 				// frame i (always 100% opacity)
-				context.drawImage(
+				ctx.drawImage(
 					baseCanvas, // image
 					0,
 					mcmeta.animation.height * frames[i].index, // sx, sy
@@ -86,11 +86,11 @@ export async function animate(origin: ImageSource, mcmeta: MCMETA): Promise<Buff
 					mcmeta.animation.height, // dWidth, dHeight
 				);
 
-				context.globalAlpha = ((100 / frametime) * y) / 100;
-				context.globalCompositeOperation = "source-atop";
+				ctx.globalAlpha = ((100 / frametime) * y) / 100;
+				ctx.globalCompositeOperation = "source-atop";
 
 				// frame i + 1 (transition)
-				context.drawImage(
+				ctx.drawImage(
 					baseCanvas, // image
 					0,
 					mcmeta.animation.height * frames[(i + 1) % frames.length].index, // sx, sy
@@ -101,16 +101,16 @@ export async function animate(origin: ImageSource, mcmeta: MCMETA): Promise<Buff
 					mcmeta.animation.width,
 					mcmeta.animation.height, // dWidth, dHeight
 				);
-				encoder.addFrame(context);
+				encoder.addFrame(ctx);
 			}
 		}
 	} else {
 		for (let i = 0; i < frames.length; ++i) {
-			context.clearRect(0, 0, mcmeta.animation.width, mcmeta.animation.height);
-			context.globalAlpha = 1;
+			ctx.clearRect(0, 0, mcmeta.animation.width, mcmeta.animation.height);
+			ctx.globalAlpha = 1;
 
 			// see: https://mdn.dev/archives/media/attachments/2012/07/09/225/46ffb06174df7c077c89ff3055e6e524/Canvas_drawimage.jpg
-			context.drawImage(
+			ctx.drawImage(
 				baseCanvas, // image
 				0,
 				mcmeta.animation.height * frames[i].index, // sx, sy
@@ -123,7 +123,7 @@ export async function animate(origin: ImageSource, mcmeta: MCMETA): Promise<Buff
 			);
 
 			encoder.setDelay(50 * frames[i].duration);
-			encoder.addFrame(context);
+			encoder.addFrame(ctx);
 		}
 	}
 
diff --git a/src/helpers/images/multiply.ts b/src/helpers/images/multiply.ts
index d4f746516..1a660ffa3 100644
--- a/src/helpers/images/multiply.ts
+++ b/src/helpers/images/multiply.ts
@@ -50,17 +50,17 @@ export const mcColorsOptions: { name: string; value: string }[] = Object.keys(mc
 export async function multiply(origin: ImageSource, color: string) {
 	const imageToDraw = await loadImage(origin);
 	const canvas = createCanvas(imageToDraw.width, imageToDraw.height);
-	const context = canvas.getContext("2d");
+	const ctx = canvas.getContext("2d");
 
-	context.imageSmoothingEnabled = false;
+	ctx.imageSmoothingEnabled = false;
 
-	context.drawImage(imageToDraw, 0, 0, imageToDraw.width, imageToDraw.height);
-	context.globalCompositeOperation = "multiply";
+	ctx.drawImage(imageToDraw, 0, 0, imageToDraw.width, imageToDraw.height);
+	ctx.globalCompositeOperation = "multiply";
 
-	context.fillStyle = color;
-	context.fillRect(0, 0, imageToDraw.width, imageToDraw.height);
+	ctx.fillStyle = color;
+	ctx.fillRect(0, 0, imageToDraw.width, imageToDraw.height);
 
-	const data = context.getImageData(0, 0, imageToDraw.width, imageToDraw.height);
+	const data = ctx.getImageData(0, 0, imageToDraw.width, imageToDraw.height);
 
 	for (let i = 0; i < data.data.length; i += 4) {
 		const r = data.data[i];
@@ -73,7 +73,7 @@ export async function multiply(origin: ImageSource, color: string) {
 		}
 	}
 
-	context.putImageData(data, 0, 0);
+	ctx.putImageData(data, 0, 0);
 
 	return canvas.toBuffer("image/png");
 }
diff --git a/src/helpers/images/palette.ts b/src/helpers/images/palette.ts
index f08379b0e..e8934475e 100644
--- a/src/helpers/images/palette.ts
+++ b/src/helpers/images/palette.ts
@@ -5,11 +5,10 @@ import {
 	StringSelectMenuInteraction,
 	Message,
 } from "@client";
-import { Canvas, createCanvas, loadImage } from "@napi-rs/canvas";
+import { createCanvas, loadImage } from "@napi-rs/canvas";
 import { AttachmentBuilder } from "discord.js";
 import ColorManager from "@images/colors";
 import { ImageSource } from "@helpers/getImage";
-import { colors } from "@utility/colors";
 import warnUser from "@helpers/warnUser";
 
 const COOLORS_URL = "https://coolors.co/";
@@ -44,12 +43,12 @@ export async function palette(origin: ImageSource) {
 	const imageToDraw = await loadImage(origin);
 	// 1048576px is the same size as a magnified image
 	if (imageToDraw.width * imageToDraw.height > 1048576) return { image: null, embed: null };
-	const canvas: Canvas = createCanvas(imageToDraw.width, imageToDraw.height);
-	const context = canvas.getContext("2d");
-	context.drawImage(imageToDraw, 0, 0);
+	const canvas = createCanvas(imageToDraw.width, imageToDraw.height);
+	const ctx = canvas.getContext("2d");
+	ctx.drawImage(imageToDraw, 0, 0);
 
 	const allColors: AllColors = {};
-	const imageData = context.getImageData(0, 0, imageToDraw.width, imageToDraw.height).data;
+	const imageData = ctx.getImageData(0, 0, imageToDraw.width, imageToDraw.height).data;
 
 	for (let x = 0; x < imageToDraw.width; ++x) {
 		for (let y = 0; y < imageToDraw.height; ++y) {
@@ -63,7 +62,7 @@ export async function palette(origin: ImageSource) {
 			if (!a) continue;
 			let hex = new ColorManager({ rgb: { r, g, b } }).toHEX().value;
 
-			if (!(hex in allColors)) allColors[hex] = { hex: hex, opacity: [], rgb: [r, g, b], count: 0 };
+			if (!(hex in allColors)) allColors[hex] = { hex, opacity: [], rgb: [r, g, b], count: 0 };
 
 			++allColors[hex].count;
 			allColors[hex].opacity.push(a);
@@ -166,12 +165,12 @@ export async function palette(origin: ImageSource) {
 		});
 
 	const colorCanvas = createCanvas(bandWidth * allColorsSorted.length, GRADIENT_HEIGHT);
-	const ctx = colorCanvas.getContext("2d");
+	const colorCtx = colorCanvas.getContext("2d");
 
 	allColorsSorted.forEach((color, index) => {
-		ctx.fillStyle = `#${color.hex}`;
-		ctx.globalAlpha = color.opacity.reduce((acc, val, i) => (acc * i + val) / (i + 1)); // average alpha
-		ctx.fillRect(bandWidth * index, 0, bandWidth, GRADIENT_HEIGHT);
+		colorCtx.fillStyle = `#${color.hex}`;
+		colorCtx.globalAlpha = color.opacity.reduce((acc, val, i) => (acc * i + val) / (i + 1)); // average alpha
+		colorCtx.fillRect(bandWidth * index, 0, bandWidth, GRADIENT_HEIGHT);
 	});
 
 	return { image: colorCanvas.toBuffer("image/png"), embed };
diff --git a/src/helpers/images/tile.ts b/src/helpers/images/tile.ts
index d98c912a8..5ed1da58e 100644
--- a/src/helpers/images/tile.ts
+++ b/src/helpers/images/tile.ts
@@ -63,9 +63,9 @@ export async function tile(origin: ImageSource, options: TileOptions = {}): Prom
 
 	/**
 	 * Follows this pattern:
-	 *  x x x	     x x x      . x .     . x .     . . .
-	 *  x x x  ->    x . x  ->  x x x  -> . x .  OR x x x
-	 *  x x x	     x x x      . x .     . x .     . . .
+	 *  x x x	   x x x      . x .      . x .      . . .
+	 *  x x x  ->  x . x  ->  x x x  ->  . x .  OR  x x x
+	 *  x x x	   x x x      . x .      . x .      . . .
 	 */
 
 	if (options?.random == "rotation") {