From dec7c4f722f2ac766b367fa5f1442a41f5e408b6 Mon Sep 17 00:00:00 2001
From: "Richard \"EpicKitty\" Bowey" <github@epickitty.uk>
Date: Fri, 26 Nov 2021 04:39:57 +0000
Subject: [PATCH] Implemented a rotate MFM (#8016)

Co-authored-by: Richard Bowey <me@epickitty.uk>
---
 locales/en-US.yml                             |  2 ++
 packages/client/src/components/mfm.ts         |  5 +++++
 packages/client/src/pages/mfm-cheat-sheet.vue | 11 +++++++++++
 packages/client/src/scripts/mfm-tags.ts       |  2 +-
 4 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/locales/en-US.yml b/locales/en-US.yml
index 37da6fdc9..c5c8afb50 100644
--- a/locales/en-US.yml
+++ b/locales/en-US.yml
@@ -931,6 +931,8 @@ _mfm:
   rainbowDescription: "Makes the content appear in rainbow colors."
   sparkle: "Sparkle"
   sparkleDescription: "Gives content a sparkling particle effect."
+  rotate: "Rotate"
+  rotateDescription: "Rotates the content by 90 degrees"
 _reversi:
   reversi: "Reversi"
   gameSettings: "Game settings"
diff --git a/packages/client/src/components/mfm.ts b/packages/client/src/components/mfm.ts
index d41cf6fc2..d1da365d9 100644
--- a/packages/client/src/components/mfm.ts
+++ b/packages/client/src/components/mfm.ts
@@ -184,6 +184,11 @@ export default defineComponent({
 								count, speed,
 							}, genEl(token.children));
 						}
+						case 'rotate': {
+							const degrees = parseInt(token.props.args.deg) || '90';
+							style = `transform: rotate(${degrees}deg); transform-origin: center center;`;
+							break;
+						}
 					}
 					if (style == null) {
 						return h('span', {}, ['$[', token.props.name, ' ', ...genEl(token.children), ']']);
diff --git a/packages/client/src/pages/mfm-cheat-sheet.vue b/packages/client/src/pages/mfm-cheat-sheet.vue
index e9a3b6deb..ee9d807e7 100644
--- a/packages/client/src/pages/mfm-cheat-sheet.vue
+++ b/packages/client/src/pages/mfm-cheat-sheet.vue
@@ -281,6 +281,16 @@
 			</div>
 		</div>
 	</div>
+	<div class="section _block">
+		<div class="title">{{ $ts._mfm.rotate }}</div>
+		<div class="content">
+			<p>{{ $ts._mfm.rotateDescription }}</p>
+			<div class="preview">
+				<Mfm :text="preview_rotate"/>
+				<MkTextarea v-model="preview_rotate"><span>MFM</span></MkTextarea>
+			</div>
+		</div>
+	</div>
 </div>
 </template>
 
@@ -328,6 +338,7 @@ export default defineComponent({
 			preview_blur: `$[blur ${this.$ts._mfm.dummy}]`,
 			preview_rainbow: `$[rainbow 🍮]`,
 			preview_sparkle: `$[sparkle 🍮]`,
+			preview_rotate: `$[rotate 🍮]`,
 		}
 	},
 });
diff --git a/packages/client/src/scripts/mfm-tags.ts b/packages/client/src/scripts/mfm-tags.ts
index 1b18210aa..18e8d7038 100644
--- a/packages/client/src/scripts/mfm-tags.ts
+++ b/packages/client/src/scripts/mfm-tags.ts
@@ -1 +1 @@
-export const MFM_TAGS = ['tada', 'jelly', 'twitch', 'shake', 'spin', 'jump', 'bounce', 'flip', 'x2', 'x3', 'x4', 'font', 'blur', 'rainbow', 'sparkle'];
+export const MFM_TAGS = ['tada', 'jelly', 'twitch', 'shake', 'spin', 'jump', 'bounce', 'flip', 'x2', 'x3', 'x4', 'font', 'blur', 'rainbow', 'sparkle', 'rotate'];