From d23ffe197c3d49e06d97df28ae78c18660fe8fe0 Mon Sep 17 00:00:00 2001
From: na2na <49822810+na2na-p@users.noreply.github.com>
Date: Thu, 17 Feb 2022 01:03:16 +0900
Subject: [PATCH] =?UTF-8?q?=E5=8D=98=E8=89=B2=E3=81=AE=E7=94=BB=E5=83=8F?=
 =?UTF-8?q?=E3=82=92=E7=94=9F=E6=88=90=E3=81=97=E3=81=A6=E3=83=AA=E3=83=97?=
 =?UTF-8?q?=E3=83=A9=E3=82=A4=E3=81=A7=E8=BF=94=E3=81=99=E3=82=88=E3=81=86?=
 =?UTF-8?q?=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/color/index.ts  | 29 ++++++++++++++++++++++++-----
 src/modules/color/render.ts | 17 +++++++++++++++++
 2 files changed, 41 insertions(+), 5 deletions(-)
 create mode 100644 src/modules/color/render.ts

diff --git a/src/modules/color/index.ts b/src/modules/color/index.ts
index ecd8904..a7e13be 100644
--- a/src/modules/color/index.ts
+++ b/src/modules/color/index.ts
@@ -1,6 +1,7 @@
 import autobind from 'autobind-decorator';
 import Module from '@/module';
 import Message from '@/message';
+import { generateColorSample } from './render';
 
 export default class extends Module {
 	public readonly name = 'color';
@@ -21,13 +22,31 @@ export default class extends Module {
             const b = Math.floor(Math.random() * 256);
             // rgbをhexに変換する
             const hex = `${r.toString(16)}${g.toString(16)}${b.toString(16)}`;
-            const message = `RGB: ${r}, ${g}, ${b} (#${hex})とかどう？ [参考](https://www.colorhexa.com/${hex})`
-			msg.reply(message, {
-				immediate: true
-			});
-			return true;
+            const message = `RGB: ${r}, ${g}, ${b} (# ${hex})とかどう？`
+
+			setTimeout(async () => {
+				const file = await this.getColorSampleFile(r,g,b);
+				this.log('Replying...');
+				msg.reply(message, { file });
+			}, 500);
+			return {
+				reaction: 'like'
+			};
 		} else {
 			return false;
 		}
 	}
+
+	@autobind
+	private async getColorSampleFile(r,g,b): Promise<any> {
+		const colorSample = generateColorSample(r,g,b);
+
+		this.log('Image uploading...');
+		const file = await this.ai.upload(colorSample, {
+			filename: 'color.png',
+			contentType: 'image/png'
+		});
+
+		return file;
+	}
 }
diff --git a/src/modules/color/render.ts b/src/modules/color/render.ts
new file mode 100644
index 0000000..05aa6ca
--- /dev/null
+++ b/src/modules/color/render.ts
@@ -0,0 +1,17 @@
+import { createCanvas } from 'canvas';
+
+const imageSize = 512; //px
+
+export function generateColorSample(r: string, g: string, b: string) {
+    const canvas = createCanvas(imageSize, imageSize);
+    const ctx = canvas.getContext('2d');
+    ctx.antialias = 'none';
+
+    // 引数で渡されたrgb値を基準に、色を塗りつぶす
+    ctx.fillStyle = `rgb(${r},${g},${b})`;
+    ctx.beginPath();
+    ctx.fillRect(0, 0, imageSize, imageSize);
+
+    // canvas.toBuffer()をreturn
+    return canvas.toBuffer();
+}
\ No newline at end of file