Update steam-now-playing to modern Steam layout

README.md

@@ -45,7 +45,7 @@ Xiao is a Discord bot coded in JavaScript with
 6. Run `npm i -g pm2` to install PM2.
 7. Run `pm2 start Xiao.js --name xiao` to run the bot.
 
-## Commands (342)
+## Commands (343)
 ### Utility:
 
 * **eval:** Executes JavaScript code.
@@ -338,7 +338,8 @@ Xiao is a Discord bot coded in JavaScript with
 * **rip:** Draws a user's avatar over a gravestone.
 * **sip:** Draws a user's avatar sipping tea.
 * **steam-card:** Draws a user's avatar on a Steam Trading Card.
-* **steam-now-playing:** Draws a user's avatar and the game of your choice over a Steam "now playing" notification.
+* **steam-now-playing-classic:** Draws a user's avatar over a Steam "now playing" notification (old skin).
+* **steam-now-playing:** Draws a user's avatar over a Steam "now playing" notification.
 * **triggered:** Draws a user's avatar over the "Triggered" meme.
 * **ultimate-tattoo:** Draws a user's avatar as "The Ultimate Tattoo".
 * **wanted:** Draws a user's avatar over a wanted poster.

commands/avatar-edit/steam-now-playing-classic.js

@@ -0,0 +1,70 @@
+const Command = require('../../structures/Command');
+const { createCanvas, loadImage, registerFont } = require('canvas');
+const request = require('node-superfetch');
+const path = require('path');
+const { shortenText } = require('../../util/Canvas');
+registerFont(path.join(__dirname, '..', '..', 'assets', 'fonts', 'Noto-Regular.ttf'), { family: 'Noto' });
+registerFont(path.join(__dirname, '..', '..', 'assets', 'fonts', 'Noto-CJK.otf'), { family: 'Noto' });
+registerFont(path.join(__dirname, '..', '..', 'assets', 'fonts', 'Noto-Emoji.ttf'), { family: 'Noto' });
+
+module.exports = class SteamNowPlayingClassicCommand extends Command {
+	constructor(client) {
+		super(client, {
+			name: 'steam-now-playing-classic',
+			aliases: ['now-playing-classic'],
+			group: 'avatar-edit',
+			memberName: 'steam-now-playing-classic',
+			description: 'Draws a user\'s avatar over a Steam "now playing" notification (old skin).',
+			throttling: {
+				usages: 1,
+				duration: 10
+			},
+			clientPermissions: ['ATTACH_FILES'],
+			credit: [
+				{
+					name: 'Steam',
+					url: 'https://store.steampowered.com/'
+				},
+				{
+					name: 'Google Noto Fonts',
+					url: 'https://www.google.com/get/noto/'
+				}
+			],
+			args: [
+				{
+					key: 'game',
+					prompt: 'Which game would you like the user to be playing?',
+					type: 'string'
+				},
+				{
+					key: 'user',
+					prompt: 'Which user would you like to be playing the game?',
+					type: 'user',
+					default: msg => msg.author
+				}
+			]
+		});
+	}
+
+	async run(msg, { game, user }) {
+		const avatarURL = user.displayAvatarURL({ format: 'png', size: 64 });
+		try {
+			const base = await loadImage(
+				path.join(__dirname, '..', '..', 'assets', 'images', 'steam-now-playing-classic.png')
+			);
+			const { body } = await request.get(avatarURL);
+			const avatar = await loadImage(body);
+			const canvas = createCanvas(base.width, base.height);
+			const ctx = canvas.getContext('2d');
+			ctx.drawImage(base, 0, 0);
+			ctx.drawImage(avatar, 21, 21, 32, 32);
+			ctx.fillStyle = '#90ba3c';
+			ctx.font = '10px Noto';
+			ctx.fillText(user.username, 63, 26);
+			ctx.fillText(shortenText(ctx, game, 160), 63, 54);
+			return msg.say({ files: [{ attachment: canvas.toBuffer(), name: 'steam-now-playing-classic.png' }] });
+		} catch (err) {
+			return msg.reply(`Oh no, an error occurred: \`${err.message}\`. Try again later!`);
+		}
+	}
+};

commands/avatar-edit/steam-now-playing.js

@@ -14,7 +14,7 @@ module.exports = class SteamNowPlayingCommand extends Command {
 			aliases: ['now-playing'],
 			group: 'avatar-edit',
 			memberName: 'steam-now-playing',
-			description: 'Draws a user\'s avatar and the game of your choice over a Steam "now playing" notification.',
+			description: 'Draws a user\'s avatar over a Steam "now playing" notification.',
 			throttling: {
 				usages: 1,
 				duration: 10
@@ -55,11 +55,12 @@ module.exports = class SteamNowPlayingCommand extends Command {
 			const canvas = createCanvas(base.width, base.height);
 			const ctx = canvas.getContext('2d');
 			ctx.drawImage(base, 0, 0);
-			ctx.drawImage(avatar, 21, 21, 32, 32);
-			ctx.fillStyle = '#90ba3c';
-			ctx.font = '10px Noto';
-			ctx.fillText(user.username, 63, 26);
-			ctx.fillText(shortenText(ctx, game, 160), 63, 54);
+			ctx.drawImage(avatar, 26, 26, 41, 42);
+			ctx.fillStyle = '#90b93c';
+			ctx.font = '15px Noto';
+			ctx.textBaseline = 'bottom';
+			ctx.fillText(user.username, 80, 38);
+			ctx.fillText(shortenText(ctx, game, 200), 80, 72);
 			return msg.say({ files: [{ attachment: canvas.toBuffer(), name: 'steam-now-playing.png' }] });
 		} catch (err) {
 			return msg.reply(`Oh no, an error occurred: \`${err.message}\`. Try again later!`);

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "xiao",
-	"version": "105.2.4",
+	"version": "105.3.0",
 	"description": "Your personal server companion.",
 	"main": "Xiao.js",
 	"scripts": {