From df04351b3fc84feb946c0df95deef5d987b9765d Mon Sep 17 00:00:00 2001 From: Evorp <3vorpgaming@gmail.com> Date: Fri, 6 Oct 2023 16:29:52 -0700 Subject: [PATCH] update palette (need to do command still) --- src/commands/bot/stats.ts | 2 +- src/commands/images/palette.ts | 2 +- src/components/buttons/image/palette.ts | 13 +----- src/events/guildCreate.ts | 3 +- src/events/modalSubmit.ts | 1 - src/helpers/images/multiply.ts | 10 ++--- src/helpers/images/palette.ts | 57 +++++++++++-------------- src/helpers/strings.ts | 2 +- 8 files changed, 37 insertions(+), 53 deletions(-) diff --git a/src/commands/bot/stats.ts b/src/commands/bot/stats.ts index 55e60a5c0..d154716e9 100644 --- a/src/commands/bot/stats.ts +++ b/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) => { diff --git a/src/commands/images/palette.ts b/src/commands/images/palette.ts index 8c90252ad..888d18cb7 100644 --- a/src/commands/images/palette.ts +++ b/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() diff --git a/src/components/buttons/image/palette.ts b/src/components/buttons/image/palette.ts index 88a44c054..58e3b95c8 100644 --- a/src/components/buttons/image/palette.ts +++ b/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({ diff --git a/src/events/guildCreate.ts b/src/events/guildCreate.ts index b4c3382ca..fac49b13b 100644 --- a/src/events/guildCreate.ts +++ b/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"; diff --git a/src/events/modalSubmit.ts b/src/events/modalSubmit.ts index 0465970d6..9ed728e44 100644 --- a/src/events/modalSubmit.ts +++ b/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); }, diff --git a/src/helpers/images/multiply.ts b/src/helpers/images/multiply.ts index 2521135ce..58137636b 100644 --- a/src/helpers/images/multiply.ts +++ b/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,17 +31,17 @@ 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; @@ -49,7 +49,7 @@ type options = { }; export async function multiplyAttachment( - options: options, + options: MultiplyOptions, ): Promise<[AttachmentBuilder, EmbedBuilder]> { const dimension = await getDimensions(options.url); const canvas = createCanvas(dimension.width, dimension.height); diff --git a/src/helpers/images/palette.ts b/src/helpers/images/palette.ts index 9b03104af..da58e9b22 100644 --- a/src/helpers/images/palette.ts +++ b/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]; } diff --git a/src/helpers/strings.ts b/src/helpers/strings.ts index f960c8cbf..722b048e3 100644 --- a/src/helpers/strings.ts +++ b/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) - */ \ No newline at end of file + */