From 02badcde68c56a85ea05df39010fbe63867ac220 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 31 Dec 2020 02:51:51 +0900
Subject: [PATCH] Add MFM syntax

---
 locales/ja-JP.yml                    |  8 ++++++-
 src/client/components/mfm.ts         | 16 ++++++++++++++
 src/client/pages/mfm-cheat-sheet.vue | 33 ++++++++++++++++++++++++++++
 3 files changed, 56 insertions(+), 1 deletion(-)

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 131ac933a..819207689 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -736,11 +736,17 @@ _mfm:
   bounce: "アニメーション(バウンド)"
   bounceDescription: "ぽよんぽよん弾むようなアニメーションを与えます。"
   shake: "アニメーション(ぶるぶる)"
-  shakeDescription: "ぶるぶるするアニメーションを与えます。"
+  shakeDescription: "ぶるぶる震えるアニメーションを与えます。"
   twitch: "アニメーション(ブレ)"
   twitchDescription: "激しくブレるアニメーションを与えます。"
   spin: "アニメーション(回転)"
   spinDescription: "回転するアニメーションを与えます。"
+  x2: "大きく"
+  x2Description: "内容を大きく表示します。"
+  x3: "とても大きく"
+  x3Description: "内容をとても大きく表示します。"
+  x4: "究極に大きく"
+  x4Description: "内容を究極に大きく表示します。"
 
 _reversi:
   reversi: "リバーシ"
diff --git a/src/client/components/mfm.ts b/src/client/components/mfm.ts
index c977c4f09..f7064ee16 100644
--- a/src/client/components/mfm.ts
+++ b/src/client/components/mfm.ts
@@ -129,6 +129,22 @@ export default defineComponent({
 							style = `transform: ${transform};`;
 							break;
 						}
+						case 'x2': {
+							style = `font-size: 200%;`;
+							break;
+						}
+						case 'x3': {
+							style = `font-size: 400%;`;
+							break;
+						}
+						case 'x4': {
+							style = `font-size: 600%;`;
+							break;
+						}
+						case 'blur': {
+							// TODO
+							break;
+						}
 					}
 					if (style == null) {
 						return h('span', {}, ['[', token.node.props.name, ...genEl(token.children), ']']);
diff --git a/src/client/pages/mfm-cheat-sheet.vue b/src/client/pages/mfm-cheat-sheet.vue
index 5bae1cb93..47a191f52 100644
--- a/src/client/pages/mfm-cheat-sheet.vue
+++ b/src/client/pages/mfm-cheat-sheet.vue
@@ -145,6 +145,36 @@
 			</div>
 		</div>
 	</div>
+	<div class="_section">
+		<div class="_title">{{ $ts._mfm.x2 }}</div>
+		<div class="_content">
+			<p>{{ $ts._mfm.x2Description }}</p>
+			<div class="preview _panel">
+				<Mfm :text="preview_x2"/>
+				<MkTextarea v-model:value="preview_x2"><span>MFM</span></MkTextarea>
+			</div>
+		</div>
+	</div>
+	<div class="_section">
+		<div class="_title">{{ $ts._mfm.x3 }}</div>
+		<div class="_content">
+			<p>{{ $ts._mfm.x3Description }}</p>
+			<div class="preview _panel">
+				<Mfm :text="preview_x3"/>
+				<MkTextarea v-model:value="preview_x3"><span>MFM</span></MkTextarea>
+			</div>
+		</div>
+	</div>
+	<div class="_section">
+		<div class="_title">{{ $ts._mfm.x4 }}</div>
+		<div class="_content">
+			<p>{{ $ts._mfm.x4Description }}</p>
+			<div class="preview _panel">
+				<Mfm :text="preview_x4"/>
+				<MkTextarea v-model:value="preview_x4"><span>MFM</span></MkTextarea>
+			</div>
+		</div>
+	</div>
 	<div class="_section">
 		<div class="_title">{{ $ts._mfm.jelly }}</div>
 		<div class="_content">
@@ -255,6 +285,9 @@ export default defineComponent({
 			preview_twitch: `[twitch 🍮]`,
 			preview_spin: `[spin 🍮] [spin.left 🍮] [spin.alternate 🍮]\n[spin.x 🍮] [spin.x,left 🍮] [spin.x,alternate 🍮]\n[spin.y 🍮] [spin.y,left 🍮] [spin.y,alternate 🍮]`,
 			preview_flip: `[flip ${this.$ts._mfm.dummy}]\n[flip.v ${this.$ts._mfm.dummy}]\n[flip.h,v ${this.$ts._mfm.dummy}]`,
+			preview_x2: `[x2 🍮]`,
+			preview_x3: `[x3 🍮]`,
+			preview_x4: `[x4 🍮]`,
 		}
 	},
 });