feat: Ai-chan widget (close #55)

This reverts commit 7095abf728ab584221a2268d4c66c9bfc2be284e.

README.md

@@ -17,6 +17,7 @@
 
 ## 細かい変更点
 
+- 藍ちゃんウィジェットの復活
 - インスタンスティッカーのツールチップにソフトウェアのバージョン番号も表示する
   - 気になるから
 - いいねボタン（リアクションピッカーの左にある、⭐とか👍のリアクションをワンクリックで押せるやつ）で空のリアクション（Mastodon がふぁぼで送ってくるものと同じ）ではなく本当にその絵文字リアクション（⭐とか👍とか）を送るようにする

cypress/e2e/widgets.cy.js

@@ -60,4 +60,5 @@ describe("After user signed in", () => {
 	buildWidgetTest("jobQueue");
 	buildWidgetTest("button");
 	buildWidgetTest("aiscript");
+	buildWidgetTest('aichan');
 });

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:

locales/ja-JP.yml

@@ -1436,6 +1436,7 @@ _widgets:
   jobQueue: "ジョブキュー"
   serverMetric: "サーバーメトリクス"
   aiscript: "AiScriptコンソール"
+  aichan: "藍"
   userList: "ユーザーリスト"
   _userList:
     chooseList: "リストを選択"

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>

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",
 ];