[frontend/mfm] Implement spin fn node

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;

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}"),
@@ -347,6 +347,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)
 	{
 		var el = document.CreateElement("span");