From cc156c9760256323c2eb821dbdb59d8d2b6411d4 Mon Sep 17 00:00:00 2001
From: pancakes <trypancakes@tutanota.com>
Date: Mon, 11 Nov 2024 11:59:27 +1000
Subject: [PATCH] [frontend/mfm] Implement spin fn node

---
 .../Components/MfmText.razor.css              | 38 +++++++++++++++++++
 .../Core/Miscellaneous/RenderMfm.cs           | 29 +++++++++++++-
 2 files changed, 66 insertions(+), 1 deletion(-)

diff --git a/Iceshrimp.Frontend/Components/MfmText.razor.css b/Iceshrimp.Frontend/Components/MfmText.razor.css
index f20e55e1..1e88f3ce 100644
--- a/Iceshrimp.Frontend/Components/MfmText.razor.css
+++ b/Iceshrimp.Frontend/Components/MfmText.razor.css
@@ -241,6 +241,44 @@
     }
 }
 
+@keyframes fn-spin {
+    0% {
+        transform: rotate(0)
+    }
+    to {
+        transform: rotate(360deg)
+    }
+}
+
+@keyframes fn-spin-x {
+    0% {
+        transform: perspective(128px) rotateX(0)
+    }
+    to {
+        transform: perspective(128px) rotateX(360deg)
+    }
+}
+
+@keyframes fn-spin-y {
+    0% {
+        transform: perspective(128px) rotateY(0)
+    }
+    to {
+        transform: perspective(128px) rotateY(360deg)
+    }
+}
+
+::deep {
+    .fn-spin {
+        display: inline-block;
+        animation-delay: 0s;
+        animation-duration: 1.5s;
+        animation-fill-mode: both;
+        animation-iteration-count: infinite;
+        animation-timing-function: linear;
+    }
+}
+
 ::deep {
     .fn-rotate {
         display: inline-block;
diff --git a/Iceshrimp.Frontend/Core/Miscellaneous/RenderMfm.cs b/Iceshrimp.Frontend/Core/Miscellaneous/RenderMfm.cs
index debdda5b..6d4568f2 100644
--- a/Iceshrimp.Frontend/Core/Miscellaneous/RenderMfm.cs
+++ b/Iceshrimp.Frontend/Core/Miscellaneous/RenderMfm.cs
@@ -264,7 +264,7 @@ public static partial class MfmRenderer
 			"tada"     => MfmFnAnimation(node.Name, args, document),
 			"jump"     => MfmFnAnimation(node.Name, args, document),
 			"bounce"   => MfmFnAnimation(node.Name, args, document),
-			"spin"     => throw new NotImplementedException($"{node.Name}"),
+			"spin"     => MfmFnSpin(args, document),
 			"shake"    => throw new NotImplementedException($"{node.Name}"),
 			"twitch"   => throw new NotImplementedException($"{node.Name}"),
 			"rainbow"  => throw new NotImplementedException($"{node.Name}"),
@@ -346,6 +346,33 @@ public static partial class MfmRenderer
 
 		return el;
 	}
+	
+	private static INode MfmFnSpin(Dictionary<string, string?> args, IDocument document)
+	{
+		var el = document.CreateElement("span");
+
+		el.ClassName = "fn-spin";
+
+		var name = args.ContainsKey("y")
+			? "fn-spin-y-mfm"
+			: args.ContainsKey("x")
+				? "fn-spin-x-mfm"
+				: "fn-spin-mfm";
+		var direction = args.ContainsKey("alternate")
+			? "alternate"
+			: args.ContainsKey("left")
+				? "reverse"
+				: "normal";
+
+		var style = $"animation-name: {name}; animation-direction: {direction};";
+		style += args.TryGetValue("speed", out var speed) ? $" animation-duration: {speed};" : "";
+		style += args.TryGetValue("delay", out var delay) ? $" animation-delay: {delay};" : "";
+		style += args.TryGetValue("loop", out var loop) ? $" animation-iteration-count: {loop};" : "";
+
+		el.SetAttribute("style", style.Trim());
+
+		return el;
+	}
 
 	private static INode MfmFnRotate(Dictionary<string, string?> args, IDocument document)
 	{