From 0a8cf9b51c893efc6e9e6c6eb75a651e366a8d84 Mon Sep 17 00:00:00 2001
From: naskya <m@naskya.net>
Date: Fri, 21 Jul 2023 13:10:15 +0000
Subject: [PATCH] feat: Ai-chan widget (close #55)

This reverts commit 7095abf728ab584221a2268d4c66c9bfc2be284e.
---
 README.md                              |  1 +
 cypress/e2e/widgets.cy.js              |  1 +
 locales/en-US.yml                      |  1 +
 locales/ja-JP.yml                      |  1 +
 packages/client/src/widgets/aichan.vue | 93 ++++++++++++++++++++++++++
 packages/client/src/widgets/index.ts   |  5 ++
 6 files changed, 102 insertions(+)
 create mode 100644 packages/client/src/widgets/aichan.vue

diff --git a/README.md b/README.md
index fec88e87..af2799c6 100644
--- a/README.md
+++ b/README.md
@@ -17,6 +17,7 @@
 
 ## 細かい変更点
 
+- 藍ちゃんウィジェットの復活
 - インスタンスティッカーのツールチップにソフトウェアのバージョン番号も表示する
   - 気になるから
 - いいねボタン（リアクションピッカーの左にある、⭐とか👍のリアクションをワンクリックで押せるやつ）で空のリアクション（Mastodon がふぁぼで送ってくるものと同じ）ではなく本当にその絵文字リアクション（⭐とか👍とか）を送るようにする
diff --git a/cypress/e2e/widgets.cy.js b/cypress/e2e/widgets.cy.js
index e3c9326d..cf2af147 100644
--- a/cypress/e2e/widgets.cy.js
+++ b/cypress/e2e/widgets.cy.js
@@ -60,4 +60,5 @@ describe("After user signed in", () => {
 	buildWidgetTest("jobQueue");
 	buildWidgetTest("button");
 	buildWidgetTest("aiscript");
+	buildWidgetTest('aichan');
 });
diff --git a/locales/en-US.yml b/locales/en-US.yml
index 93549b8e..676f94df 100644
--- a/locales/en-US.yml
+++ b/locales/en-US.yml
@@ -1621,6 +1621,7 @@ _widgets:
   jobQueue: "Job Queue"
   serverMetric: "Server Metrics"
   aiscript: "AiScript Console"
+  aichan: "Ai"
   userList: "User List"
   serverInfo: "Server Info"
   _userList:
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 3dfa84f1..e9a49e1e 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -1436,6 +1436,7 @@ _widgets:
   jobQueue: "ジョブキュー"
   serverMetric: "サーバーメトリクス"
   aiscript: "AiScriptコンソール"
+  aichan: "藍"
   userList: "ユーザーリスト"
   _userList:
     chooseList: "リストを選択"
diff --git a/packages/client/src/widgets/aichan.vue b/packages/client/src/widgets/aichan.vue
new file mode 100644
index 00000000..c82119a5
--- /dev/null
+++ b/packages/client/src/widgets/aichan.vue
@@ -0,0 +1,93 @@
+<template>
+	<MkContainer
+		:naked="widgetProps.transparent"
+		:show-header="false"
+		class="mkw-aichan"
+	>
+		<iframe
+			ref="live2d"
+			class="dedjhjmo"
+			src="https://misskey-dev.github.io/mascot-web/?scale=1.5&y=1.1&eyeY=100"
+			@click="touched"
+		></iframe>
+	</MkContainer>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, onUnmounted, reactive, ref } from "vue";
+import {
+	useWidgetPropsManager,
+	Widget,
+	WidgetComponentEmits,
+	WidgetComponentExpose,
+	WidgetComponentProps,
+} from "./widget";
+import { GetFormResultType } from "@/scripts/form";
+
+const name = "ai";
+
+const widgetPropsDef = {
+	transparent: {
+		type: "boolean" as const,
+		default: false,
+	},
+};
+
+type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
+
+// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
+//const props = defineProps<WidgetComponentProps<WidgetProps>>();
+//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
+const props = defineProps<{ widget?: Widget<WidgetProps> }>();
+const emit = defineEmits<{ (ev: "updateProps", props: WidgetProps) }>();
+
+const { widgetProps, configure } = useWidgetPropsManager(
+	name,
+	widgetPropsDef,
+	props,
+	emit,
+);
+
+const live2d = ref<HTMLIFrameElement>();
+
+const touched = () => {
+	//if (this.live2d) this.live2d.changeExpression('gurugurume');
+};
+
+const onMousemove = (ev: MouseEvent) => {
+	const iframeRect = live2d.value.getBoundingClientRect();
+	live2d.value.contentWindow.postMessage(
+		{
+			type: "moveCursor",
+			body: {
+				x: ev.clientX - iframeRect.left,
+				y: ev.clientY - iframeRect.top,
+			},
+		},
+		"*",
+	);
+};
+
+onMounted(() => {
+	window.addEventListener("mousemove", onMousemove, { passive: true });
+});
+
+onUnmounted(() => {
+	window.removeEventListener("mousemove", onMousemove);
+});
+
+defineExpose<WidgetComponentExpose>({
+	name,
+	configure,
+	id: props.widget ? props.widget.id : null,
+});
+</script>
+
+<style lang="scss" scoped>
+.dedjhjmo {
+	width: 100%;
+	height: 350px;
+	border: none;
+	pointer-events: none;
+}
+</style>
diff --git a/packages/client/src/widgets/index.ts b/packages/client/src/widgets/index.ts
index 4c48811a..08667c15 100644
--- a/packages/client/src/widgets/index.ts
+++ b/packages/client/src/widgets/index.ts
@@ -93,6 +93,10 @@ export default function (app: App) {
 		"MkwServerInfo",
 		defineAsyncComponent(() => import("./server-info.vue")),
 	);
+	app.component(
+		"MkwAichan",
+		defineAsyncComponent(() => import("./aichan.vue")),
+	);
 }
 
 export const widgets = [
@@ -119,4 +123,5 @@ export const widgets = [
 	"jobQueue",
 	"button",
 	"aiscript",
+	"aichan",
 ];