From 1efb167f8ffa5159adc80122d6395c57354c46aa Mon Sep 17 00:00:00 2001
From: Freeplay <freeplay@duck.com>
Date: Fri, 2 Jun 2023 14:44:41 -0400
Subject: [PATCH] Add delay & start adding cubic-bezier to mfm

---
 packages/client/src/components/mfm.ts | 32 +++++++++++++++++++--------
 1 file changed, 23 insertions(+), 9 deletions(-)

diff --git a/packages/client/src/components/mfm.ts b/packages/client/src/components/mfm.ts
index 23a9333485..331fd3c123 100644
--- a/packages/client/src/components/mfm.ts
+++ b/packages/client/src/components/mfm.ts
@@ -57,6 +57,10 @@ export default defineComponent({
 			if (t == null) return null;
 			return t.match(/^[0-9.]+s$/) ? t : null;
 		};
+		const validEase = (e: string | null | undefined) => {
+			if (e == null) return null;
+			return e.match(/\(-?[0-9.]+,-?[0-9.]+,-?[0-9.]+,-?[0-9.]+\)/) ? e : null;
+		}
 
 		const genEl = (ast: mfm.MfmNode[]) =>
 			concat(
@@ -102,22 +106,27 @@ export default defineComponent({
 							switch (token.props.name) {
 								case "tada": {
 									const speed = validTime(token.props.args.speed) || "1s";
-									style = `font-size: 150%; animation: tada ${speed} linear infinite both;`;
+									const delay = validTime(token.props.args.delay) || "0s";
+									const ease = validEase(token.props.args.ease) ?? "(0,0,1,1)";
+									style = `font-size: 150%; animation: tada ${speed} ${delay} cubic-bezier${ease} infinite both;`;
 									break;
 								}
 								case "jelly": {
 									const speed = validTime(token.props.args.speed) || "1s";
-									style = `animation: mfm-rubberBand ${speed} linear infinite both;`;
+									const delay = validTime(token.props.args.delay) || "0s";
+									style = `animation: mfm-rubberBand ${speed} ${delay} linear infinite both;`;
 									break;
 								}
 								case "twitch": {
 									const speed = validTime(token.props.args.speed) || "0.5s";
-									style = `animation: mfm-twitch ${speed} ease infinite;`;
+									const delay = validTime(token.props.args.delay) || "0s";
+									style = `animation: mfm-twitch ${speed} ${delay} ease infinite;`;
 									break;
 								}
 								case "shake": {
 									const speed = validTime(token.props.args.speed) || "0.5s";
-									style = `animation: mfm-shake ${speed} ease infinite;`;
+									const delay = validTime(token.props.args.delay) || "0s";
+									style = `animation: mfm-shake ${speed} ${delay} ease infinite;`;
 									break;
 								}
 								case "spin": {
@@ -132,22 +141,26 @@ export default defineComponent({
 										? "mfm-spinY"
 										: "mfm-spin";
 									const speed = validTime(token.props.args.speed) || "1.5s";
-									style = `animation: ${anime} ${speed} linear infinite; animation-direction: ${direction};`;
+									const delay = validTime(token.props.args.delay) || "0s";
+									style = `animation: ${anime} ${speed} ${delay} linear infinite; animation-direction: ${direction};`;
 									break;
 								}
 								case "jump": {
 									const speed = validTime(token.props.args.speed) || "0.75s";
-									style = `animation: mfm-jump ${speed} linear infinite;`;
+									const delay = validTime(token.props.args.delay) || "0s";
+									style = `animation: mfm-jump ${speed} ${delay} linear infinite;`;
 									break;
 								}
 								case "bounce": {
 									const speed = validTime(token.props.args.speed) || "0.75s";
-									style = `animation: mfm-bounce ${speed} linear infinite; transform-origin: center bottom;`;
+									const delay = validTime(token.props.args.delay) || "0s";
+									style = `animation: mfm-bounce ${speed} ${delay} linear infinite; transform-origin: center bottom;`;
 									break;
 								}
 								case "rainbow": {
 									const speed = validTime(token.props.args.speed) || "1s";
-									style = `animation: mfm-rainbow ${speed} linear infinite;`;
+									const delay = validTime(token.props.args.delay) || "0s";
+									style = `animation: mfm-rainbow ${speed} ${delay} linear infinite;`;
 									break;
 								}
 								case "sparkle": {
@@ -161,7 +174,8 @@ export default defineComponent({
 										? "alternate-reverse"
 										: "alternate";
 									const speed = validTime(token.props.args.speed) || "1.5s";
-									style = `animation: mfm-fade ${speed} linear infinite; animation-direction: ${direction};`;
+									const delay = validTime(token.props.args.delay) || "0s";
+									style = `animation: mfm-fade ${speed} ${delay} linear infinite; animation-direction: ${direction};`;
 									break;
 								}
 								case "flip": {