update palette (need to do command still)

src/commands/bot/stats.ts

@@ -103,7 +103,7 @@ export const command: SlashCommand = {
 
 				const embed = new EmbedBuilder()
 					.setTimestamp()
-					.setTitle(interaction.strings().command.Stats.top_ten).setDescription(`
+					.setTitle(interaction.strings().command.stats.top_ten).setDescription(`
 ${data[0]
 	.slice(0, data[0].length > 10 ? 10 : data[0].length)
 	.map((key: any, index: any) => {

src/commands/images/palette.ts

@@ -1,7 +1,7 @@
 import { SlashCommand } from "@interfaces";
 import { SlashCommandBuilder } from "discord.js";
 import { EmbedBuilder, ChatInputCommandInteraction } from "@client";
-import { paletteAttachment } from "@images/palette";
+import { palette } from "@images/palette";
 
 export const command: SlashCommand = {
 	data: new SlashCommandBuilder()

src/components/buttons/image/palette.ts

@@ -1,7 +1,7 @@
 import { Component } from "@interfaces";
 import { info } from "@helpers/logger";
 import { Client, Message, ButtonInteraction, EmbedBuilder } from "@client";
-import { paletteAttachment } from "@images/palette";
+import { paletteToAttachment } from "@images/palette";
 import getImage from "@helpers/getImage";
 
 export default {
@@ -11,16 +11,7 @@ export default {
 
 		const message: Message = interaction.message as Message;
 		const url = await getImage(message);
-		const [attachment, embed] = await paletteAttachment({
-			url: url,
-			name: url.split("/").at(-1),
-		});
-
-		if (attachment == null)
-			return interaction.reply({
-				content: interaction.strings().command.images.too_big,
-				ephemeral: true,
-			});
+		const [attachment, embed] = await paletteToAttachment(url, url.split("/").at(-1));
 
 		return interaction
 			.reply({

src/events/guildCreate.ts

@@ -1,4 +1,5 @@
-import { Guild, EmbedBuilder } from "discord.js";
+import { Guild } from "discord.js";
+import { EmbedBuilder } from "@client";
 import { Event } from "@interfaces";
 import { info } from "@helpers/logger";
 

src/events/modalSubmit.ts

@@ -6,7 +6,6 @@ export default {
 	async execute(client: Client, interaction: ModalSubmitInteraction) {
 		client.storeAction("modal", interaction);
 
-		console.log(interaction.customId);
 		const modal = client.modals.get(interaction.customId);
 		if (modal) return modal.execute(client, interaction);
 	},

src/helpers/images/multiply.ts

@@ -4,7 +4,7 @@ import { AttachmentBuilder } from "discord.js";
 import ColorManager from "@images/colors";
 import getDimensions from "./getDimensions";
 
-export enum mcColors {
+export enum MCColors {
 	Foliage = "#5BAB46",
 	FoliageCold = "#60A17B",
 	FoliageHot = "#1ABF00",
@@ -31,25 +31,25 @@ export enum mcColors {
 	DyeBlack = "#1D1D21",
 }
 
-export const mcColorsOptions: { name: string; value: string }[] = Object.keys(mcColors).map(
+export const mcColorsOptions: { name: string; value: string }[] = Object.keys(MCColors).map(
 	(name) => {
 		//a cheeky regex for formatting
 		return {
 			name: name.replace(/([a-z])([A-Z])/g, "$1 $2"),
-			value: mcColors[name as keyof typeof mcColors],
+			value: MCColors[name as keyof typeof MCColors],
 		};
 	},
 );
 
-type options = {
+type MultiplyOptions = {
 	url: string;
 	embed?: EmbedBuilder;
 	name?: string;
 	color: string;
 };
 
 export async function multiplyAttachment(
-	options: options,
+	options: MultiplyOptions,
 ): Promise<[AttachmentBuilder, EmbedBuilder]> {
 	const dimension = await getDimensions(options.url);
 	const canvas = createCanvas(dimension.width, dimension.height);

src/helpers/images/palette.ts

@@ -2,7 +2,7 @@ import { EmbedBuilder } from "@client";
 import { Canvas, createCanvas, loadImage } from "@napi-rs/canvas";
 import { AttachmentBuilder } from "discord.js";
 import ColorManager from "@images/colors";
-import getDimensions from "./getDimensions";
+import { ImageSource } from "./magnify";
 
 const COOLORS_URL = "https://coolors.co/";
 
@@ -17,11 +17,6 @@ const GRADIENT_WIDTH = 700;
 const GRADIENT_BAND_WIDTH = 3;
 const GRADIENT_HEIGHT = 50;
 
-export interface options {
-	url: string;
-	name: string;
-}
-
 export interface AllColors {
 	[key: string]: {
 		hex: string;
@@ -37,28 +32,22 @@ export interface AllColors {
  * @param options image info
  * @returns slash command attachment compatible embed/attachment data
  */
-export async function paletteAttachment(
-	options: options,
-): Promise<[AttachmentBuilder, EmbedBuilder]> {
-	const { width, height } = await getDimensions(options.url);
-	if (width * height > 262144) return [null, new EmbedBuilder()];
-
-	const canvas: Canvas = createCanvas(width, height);
+export async function palette(origin: ImageSource) {
+	const imageToDraw = await loadImage(origin);
+	const canvas: Canvas = createCanvas(imageToDraw.width, imageToDraw.height);
 	const context = canvas.getContext("2d");
-	const allColors: AllColors = {};
-
-	const imageToDraw = await loadImage(options.url);
 	context.drawImage(imageToDraw, 0, 0);
 
-	const imageData = context.getImageData(0, 0, width, height).data;
+	const allColors: AllColors = {};
+	const imageData = context.getImageData(0, 0, imageToDraw.width, imageToDraw.height).data;
 
-	for (let x = 0; x < width; ++x) {
-		for (let y = 0; y < height; ++y) {
-			let index = (y * width + x) * 4;
-			let r = imageData[index];
-			let g = imageData[index + 1];
-			let b = imageData[index + 2];
-			let a = imageData[index + 3] / 255;
+	for (let x = 0; x < imageToDraw.width; ++x) {
+		for (let y = 0; y < imageToDraw.height; ++y) {
+			const index = (y * imageToDraw.width + x) * 4;
+			const r = imageData[index];
+			const g = imageData[index + 1];
+			const b = imageData[index + 2];
+			const a = imageData[index + 3] / 255;
 
 			// avoid transparent colors
 			if (!a) continue;
@@ -72,7 +61,7 @@ export async function paletteAttachment(
 	}
 
 	// convert back to array
-	let colors = Object.values(allColors)
+	const colors = Object.values(allColors)
 		.sort((a, b) => b.count - a.count)
 		.slice(0, COLORS_TOP)
 		.map((el) => el.hex);
@@ -150,10 +139,10 @@ export async function paletteAttachment(
 		.sort((a, b) => b.count - a.count)
 		.slice(0, GRADIENT_TOP)
 		.sort((a, b) => {
-			let [ha, sa, la] = Object.values(
+			const [ha, sa, la] = Object.values(
 				new ColorManager({ rgb: { r: a.rgb[0], g: a.rgb[1], b: a.rgb[2] } }).toHSL(),
 			);
-			let [hb, sb, lb] = Object.values(
+			const [hb, sb, lb] = Object.values(
 				new ColorManager({ rgb: { r: b.rgb[0], g: b.rgb[1], b: b.rgb[2] } }).toHSL(),
 			);
 
@@ -171,13 +160,17 @@ export async function paletteAttachment(
 
 	allColorsSorted.forEach((color, index) => {
 		ctx.fillStyle = `#${color.hex}`;
-		ctx.globalAlpha = color.opacity.reduce((a, v, i) => (a * i + v) / (i + 1)); // average alpha
+		ctx.globalAlpha = color.opacity.reduce((acc, val, i) => (acc * i + val) / (i + 1)); // average alpha
 		ctx.fillRect(bandWidth * index, 0, bandWidth, GRADIENT_HEIGHT);
 	});
 
-	const attachment = new AttachmentBuilder(colorCanvas.toBuffer("image/png"), {
-		name: `${options.name || "palette.png"}`,
-	});
+	return { image: colorCanvas.toBuffer("image/png"), embed };
+}
 
-	return [attachment, embed];
+export async function paletteToAttachment(
+	origin: ImageSource,
+	name = "palette.png",
+): Promise<[AttachmentBuilder, EmbedBuilder]> {
+	const { image, embed } = await palette(origin);
+	return [new AttachmentBuilder(image, { name }), embed];
 }

src/helpers/strings.ts

@@ -10,4 +10,4 @@ export const en_US = { ...commands, ...errors };
  * - [Add it to workflow file on crowdin](https://faithful.crowdin.com/u/projects/4/workflow)
  * - [Update the language list below using](https://discord.com/developers/docs/reference#locales)
  * - [Update mapping on crowdin](https://faithful.crowdin.com/u/projects/4/apps/system/github) (select the branch > edit branch configuration > edit file filter > language mapping)
- */
+ */