readd magnification and more ephemeral translations

lang/en-US/commands.json

@@ -9,8 +9,9 @@
             "title": "You cannot run slash commands in a submission channel!",
             "description": "Please use the appropriate bot command channel instead."
         },
-        "images": {
-            "too_big": "Output exceeds the maximum of 512px²!"
+        "tile": {
+            "too_big": "This image is too big to be tiled!",
+            "suggestion": "Try scaling your image down or using another program."
         },
         "stats": {
             "footer": "Made with love",

src/commands/images/animate.ts

@@ -37,7 +37,7 @@ export const command: SlashCommand = {
 		const mcmeta: MCMETA = mcmetaList[style];
 
 		// magnify beforehand since you can't magnify a gif currently
-		const { magnified } = await magnify(image, true);
+		const { magnified } = await magnify(image, { isAnimation: true });
 		const file = await animateToAttachment(await loadImage(magnified), mcmeta, `${style}.gif`);
 		await interaction
 			.editReply({ files: [file] })

src/commands/images/magnify.ts

@@ -1,7 +1,9 @@
 import { SlashCommand } from "@interfaces";
-import { SlashCommandBuilder } from "discord.js";
-import { ChatInputCommandInteraction, EmbedBuilder } from "@client";
+import { ActionRowBuilder, ButtonBuilder, SlashCommandBuilder } from "discord.js";
+import { ChatInputCommandInteraction, Message } from "@client";
 import { magnifyToAttachment } from "@images/magnify";
+import getImage from "@helpers/getImage";
+import { tile, palette } from "@helpers/buttons";
 
 export const command: SlashCommand = {
 	data: new SlashCommandBuilder()
@@ -25,5 +27,20 @@ export const command: SlashCommand = {
 				.setDescription("The scale factor the image should be enlarged by.")
 				.setRequired(false);
 		}),
-	async execute(interaction: ChatInputCommandInteraction) {},
+	async execute(interaction: ChatInputCommandInteraction) {
+		await interaction.deferReply();
+		const image =
+			interaction.options.getAttachment("image", false)?.url ?? (await getImage(interaction));
+
+		const file = await magnifyToAttachment(image, {
+			factor: interaction.options.getNumber("factor", false),
+		});
+
+		await interaction
+			.editReply({
+				files: [file],
+				components: [new ActionRowBuilder<ButtonBuilder>().addComponents(palette)],
+			})
+			.then((message: Message) => message.deleteButton());
+	},
 };

src/commands/images/tile.ts

@@ -1,9 +1,10 @@
 import { SlashCommand } from "@interfaces";
 import { SlashCommandBuilder } from "discord.js";
-import { ChatInputCommandInteraction, Message } from "@client";
+import { ChatInputCommandInteraction, EmbedBuilder, Message } from "@client";
 import { tileToAttachment, TileShape, TileRandom } from "@images/tile";
 import getImage from "@helpers/getImage";
 import { imageButtons } from "@helpers/buttons";
+import { colors } from "@helpers/colors";
 
 export const command: SlashCommand = {
 	data: new SlashCommandBuilder()
@@ -36,18 +37,30 @@ export const command: SlashCommand = {
 			o.setName("image").setDescription("The image to tile").setRequired(false),
 		),
 	async execute(interaction: ChatInputCommandInteraction) {
-		await interaction.deferReply();
 		const random = interaction.options.getString("random") as TileRandom;
 		const shape = interaction.options.getString("type") as TileShape;
 
 		const image =
 			interaction.options.getAttachment("image", false)?.url ?? (await getImage(interaction));
 
 		const file = await tileToAttachment(image, { random, shape });
+
+		if (!file) {
+			return await interaction.reply({
+				embeds: [
+					new EmbedBuilder()
+						.setTitle(interaction.strings().command.tile.too_big)
+						.setDescription(interaction.strings().command.tile.suggestion)
+						.setColor(colors.red),
+				],
+				ephemeral: true
+			});
+		}
 		await interaction
-			.editReply({
+			.reply({
 				files: [file],
 				components: [imageButtons],
+				fetchReply: true,
 			})
 			.then((message: Message) => message.deleteButton());
 	},

src/components/buttons/image/magnify.ts

@@ -14,13 +14,7 @@ export default {
 
 		const message: Message = interaction.message as Message;
 		const url = await getImage(message);
-		const attachment = await magnifyToAttachment(url, url.split("/").at(-1));
-
-		if (attachment == null)
-			return interaction.reply({
-				content: interaction.strings().command.images.too_big,
-				ephemeral: true,
-			});
+		const attachment = await magnifyToAttachment(url);
 
 		return interaction
 			.reply({

src/components/buttons/image/palette.ts

@@ -11,7 +11,7 @@ export default {
 
 		const message: Message = interaction.message as Message;
 		const url = await getImage(message);
-		const [attachment, embed] = await paletteToAttachment(url, url.split("/").at(-1));
+		const [attachment, embed] = await paletteToAttachment(url);
 
 		return interaction
 			.reply({

src/components/buttons/image/tile.ts

@@ -6,6 +6,7 @@ import { magnify, palette } from "@helpers/buttons";
 import { ActionRowBuilder } from "discord.js";
 import { ButtonBuilder } from "discord.js";
 import getImage from "@helpers/getImage";
+import { colors } from "@helpers/colors";
 
 export default {
 	id: "tile",
@@ -14,12 +15,17 @@ export default {
 
 		const message: Message = interaction.message as Message;
 		const url = await getImage(message);
-		const attachment = await tileToAttachment(url, {}, url.split("/").at(-1));
+		const attachment = await tileToAttachment(url);
 
-		if (attachment == null)
-			return interaction.reply({
-				content: interaction.strings().command.images.too_big,
-				ephemeral: true,
+		if (!attachment)
+			return await interaction.reply({
+				embeds: [
+					new EmbedBuilder()
+						.setTitle(interaction.strings().command.tile.too_big)
+						.setDescription(interaction.strings().command.tile.suggestion)
+						.setColor(colors.red),
+				],
+				ephemeral: true
 			});
 
 		return interaction

src/helpers/images/magnify.ts

@@ -11,19 +11,25 @@ export type ImageSource =
 	| Image
 	| import("stream").Readable;
 
+export interface MagnifyOptions {
+	isAnimation?: boolean;
+	factor?: number;
+}
+
 /**
  * The actual magnification function
  * @author Juknum, Evorp
  * @param origin url, image, or buffer to magnify
- * @param isAnimation whether to magnify the image as a tilesheet
+ * @param options
  * @returns buffer for magnified image
  */
-export async function magnify(origin: ImageSource, isAnimation = false) {
+export async function magnify(origin: ImageSource, options: MagnifyOptions = {}) {
 	const input = await loadImage(origin).catch((err) => Promise.reject(err));
 
 	// ignore height if tilesheet, otherwise it's not scaled as much
-	const surface = isAnimation ? input.width * 16 : input.width * input.height;
+	const surface = options.isAnimation ? input.width * 16 : input.width * input.height;
 
+	// no custom factor provided
 	let factor = 64;
 	if (surface <= 256) factor = 32;
 	if (surface > 256) factor = 16;
@@ -32,6 +38,9 @@ export async function magnify(origin: ImageSource, isAnimation = false) {
 	if (surface > 65536) factor = 2;
 	if (surface > 262144) factor = 1;
 
+	// custom factor provided
+	if (options.factor) factor = options.factor;
+
 	const width = input.width * factor;
 	const height = input.height * factor;
 	const output = createCanvas(width, height);
@@ -49,7 +58,11 @@ export async function magnify(origin: ImageSource, isAnimation = false) {
  * @param name name, defaults to "magnified.png"
  * @returns magnified file
  */
-export async function magnifyToAttachment(origin: ImageSource, name = "magnified.png") {
-	const { magnified } = await magnify(origin);
+export async function magnifyToAttachment(
+	origin: ImageSource,
+	options?: MagnifyOptions,
+	name = "magnified.png",
+) {
+	const { magnified } = await magnify(origin, options);
 	return new AttachmentBuilder(magnified, { name });
 }

src/helpers/images/tile.ts

@@ -9,6 +9,12 @@ interface TileOptions {
 	random?: TileRandom;
 }
 
+/**
+ * @author Juknum
+ * @param origin what to tile
+ * @param options what shape and randomness
+ * @returns tiled image as buffer
+ */
 export async function tile(origin: ImageSource, options: TileOptions = {}): Promise<Buffer> {
 	const input = await loadImage(origin).catch((err) => Promise.reject(err));
 

src/helpers/prefixCommandHandler.ts

@@ -3,6 +3,8 @@ import { magnifyToAttachment } from "./images/magnify";
 import getImage from "./getImage";
 import { tileToAttachment } from "./images/tile";
 import { paletteToAttachment } from "./images/palette";
+import { ActionRowBuilder, ButtonBuilder } from "discord.js";
+import { imageButtons, palette } from "./buttons";
 
 export default async function prefixCommandHandler(message: Message) {
 	const args = message.content.split(" ");
@@ -15,11 +17,14 @@ export default async function prefixCommandHandler(message: Message) {
 		case "m":
 		case "z":
 			return await message
-				.reply({ files: [await magnifyToAttachment(url)] })
+				.reply({
+					files: [await magnifyToAttachment(url)],
+					components: [new ActionRowBuilder<ButtonBuilder>().addComponents(palette)]
+				})
 				.then((message: Message) => message.deleteButton());
 		case "t":
 			return await message
-				.reply({ files: [await tileToAttachment(url)] })
+				.reply({ files: [await tileToAttachment(url)], components: [imageButtons] })
 				.then((message: Message) => message.deleteButton());
 		case "p":
 			const [attachment, embed] = await paletteToAttachment(url);