Make triggered make a GIF

commands/avatar-edit/triggered.js

@@ -1,8 +1,11 @@
 const Command = require('../../structures/Command');
 const { createCanvas, loadImage } = require('canvas');
+const GIFEncoder = require('gifencoder');
 const request = require('node-superfetch');
 const path = require('path');
 const { drawImageWithTint } = require('../../util/Canvas');
+const coord1 = [-25, -33, -42, -14];
+const coord2 = [-25, -13, -34, -10];
 
 module.exports = class TriggeredCommand extends Command {
 	constructor(client) {
@@ -17,6 +20,12 @@ module.exports = class TriggeredCommand extends Command {
 				duration: 10
 			},
 			clientPermissions: ['ATTACH_FILES'],
+			credit: [
+				{
+					name: 'NotAWeebDev/Misaki',
+					url: 'https://github.com/NotAWeebDev/Misaki'
+				}
+			],
 			args: [
 				{
 					key: 'user',
@@ -34,15 +43,55 @@ module.exports = class TriggeredCommand extends Command {
 			const base = await loadImage(path.join(__dirname, '..', '..', 'assets', 'images', 'triggered.png'));
 			const { body } = await request.get(avatarURL);
 			const avatar = await loadImage(body);
-			const canvas = createCanvas(base.width, base.height);
+			const encoder = new GIFEncoder(base.width, base.width);
+			const canvas = createCanvas(base.width, base.width);
 			const ctx = canvas.getContext('2d');
 			ctx.fillStyle = 'white';
-			ctx.fillRect(0, 0, base.width, base.height);
-			drawImageWithTint(ctx, avatar, 'red', 0, 0, 320, 320);
-			ctx.drawImage(base, 0, 0);
-			return msg.say({ files: [{ attachment: canvas.toBuffer(), name: 'triggered.png' }] });
+			ctx.fillRect(0, 0, base.width, base.width);
+			const stream = encoder.createReadStream();
+			encoder.start();
+			encoder.setRepeat(0);
+			encoder.setDelay(50);
+			encoder.setQuality(200);
+			for (let i = 0; i < 4; i++) {
+				drawImageWithTint(ctx, avatar, 'red', coord1[i], coord2[i], 300, 300);
+				ctx.drawImage(base, 0, 218, 256, 38);
+				encoder.addFrame(ctx);
+			}
+			encoder.finish();
+			const buffer = await this.streamToArray(stream);
+			return msg.say({ files: [{ attachment: Buffer.concat(buffer), name: 'triggered.gif' }] });
 		} catch (err) {
 			return msg.reply(`Oh no, an error occurred: \`${err.message}\`. Try again later!`);
 		}
 	}
+
+	streamToArray(stream) {
+		if (!stream.readable) return Promise.resolve([]);
+		return new Promise((resolve, reject) => {
+			const array = [];
+			function onData(data) {
+				array.push(data);
+			}
+			function onEnd(error) {
+				if (error) reject(error);
+				else resolve(array);
+				cleanup();
+			}
+			function onClose() {
+				resolve(array);
+				cleanup();
+			}
+			function cleanup() {
+				stream.removeListener('data', onData);
+				stream.removeListener('end', onEnd);
+				stream.removeListener('error', onEnd);
+				stream.removeListener('close', onClose);
+			}
+			stream.on('data', onData);
+			stream.on('end', onEnd);
+			stream.on('error', onEnd);
+			stream.on('close', onClose);
+		});
+	}
 };

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "xiao",
-	"version": "105.2.3",
+	"version": "105.2.4",
 	"description": "Your personal server companion.",
 	"main": "Xiao.js",
 	"scripts": {
@@ -38,9 +38,10 @@
 		"discord.js": "github:discordjs/discord.js",
 		"discord.js-commando": "github:discordjs/Commando",
 		"dotenv": "^8.0.0",
+		"gifencoder": "^2.0.1",
 		"mathjs": "^5.10.3",
 		"moment": "^2.24.0",
-		"moment-duration-format": "^2.2.2",
+		"moment-duration-format": "^2.3.2",
 		"moment-timezone": "^0.5.25",
 		"neopet-image-finder": "^5.0.2",
 		"node-superfetch": "^0.1.9",