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 1/4] 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": {

From c722cee10182bbcec5711fc8daef79947c05b3a6 Mon Sep 17 00:00:00 2001
From: Freeplay <freeplay@duck.com>
Date: Fri, 2 Jun 2023 15:06:57 -0400
Subject: [PATCH 2/4] Idk why I used ?? there

---
 packages/client/src/components/mfm.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/src/components/mfm.ts b/packages/client/src/components/mfm.ts
index 331fd3c123..74a92ee488 100644
--- a/packages/client/src/components/mfm.ts
+++ b/packages/client/src/components/mfm.ts
@@ -107,7 +107,7 @@ export default defineComponent({
 								case "tada": {
 									const speed = validTime(token.props.args.speed) || "1s";
 									const delay = validTime(token.props.args.delay) || "0s";
-									const ease = validEase(token.props.args.ease) ?? "(0,0,1,1)";
+									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;
 								}

From d8d2ee266eb20cafc4b2915d4ac84e3656e98475 Mon Sep 17 00:00:00 2001
From: Freeplay <freeplay@duck.com>
Date: Fri, 2 Jun 2023 15:39:33 -0400
Subject: [PATCH 3/4] Setup to also support steps

---
 packages/client/src/components/mfm.ts | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/client/src/components/mfm.ts b/packages/client/src/components/mfm.ts
index 74a92ee488..86a9aba2ed 100644
--- a/packages/client/src/components/mfm.ts
+++ b/packages/client/src/components/mfm.ts
@@ -59,7 +59,9 @@ export default defineComponent({
 		};
 		const validEase = (e: string | null | undefined) => {
 			if (e == null) return null;
-			return e.match(/\(-?[0-9.]+,-?[0-9.]+,-?[0-9.]+,-?[0-9.]+\)/) ? e : null;
+			return e.match(/(steps)?\(-?[0-9.]+,-?[0-9.]+,-?[0-9.]+,-?[0-9.]+\)/) 
+				? (e.startsWith("steps") ? e : "cubic-bezier" + e)
+				: null
 		}
 
 		const genEl = (ast: mfm.MfmNode[]) =>
@@ -107,8 +109,8 @@ export default defineComponent({
 								case "tada": {
 									const speed = validTime(token.props.args.speed) || "1s";
 									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;`;
+									const ease = validEase(token.props.args.ease) || "linear";
+									style = `font-size: 150%; animation: tada ${speed} ${delay} ${ease} infinite both;`;
 									break;
 								}
 								case "jelly": {

From 9382afeb5ebf25804510b327114c20be8cd768d6 Mon Sep 17 00:00:00 2001
From: Freeplay <freeplay@duck.com>
Date: Mon, 5 Jun 2023 15:28:42 -0400
Subject: [PATCH 4/4] comment out easing part for now

---
 packages/client/src/components/mfm.ts | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/client/src/components/mfm.ts b/packages/client/src/components/mfm.ts
index 86a9aba2ed..50a566d331 100644
--- a/packages/client/src/components/mfm.ts
+++ b/packages/client/src/components/mfm.ts
@@ -57,12 +57,12 @@ 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(/(steps)?\(-?[0-9.]+,-?[0-9.]+,-?[0-9.]+,-?[0-9.]+\)/) 
-				? (e.startsWith("steps") ? e : "cubic-bezier" + e)
-				: null
-		}
+		// const validEase = (e: string | null | undefined) => {
+		// 	if (e == null) return null;
+		// 	return e.match(/(steps)?\(-?[0-9.]+,-?[0-9.]+,-?[0-9.]+,-?[0-9.]+\)/) 
+		// 		? (e.startsWith("steps") ? e : "cubic-bezier" + e)
+		// 		: null
+		// }
 
 		const genEl = (ast: mfm.MfmNode[]) =>
 			concat(
@@ -109,8 +109,8 @@ export default defineComponent({
 								case "tada": {
 									const speed = validTime(token.props.args.speed) || "1s";
 									const delay = validTime(token.props.args.delay) || "0s";
-									const ease = validEase(token.props.args.ease) || "linear";
-									style = `font-size: 150%; animation: tada ${speed} ${delay} ${ease} infinite both;`;
+									// const ease = validEase(token.props.args.ease) || "linear";
+									style = `font-size: 150%; animation: tada ${speed} ${delay} linear infinite both;`;
 									break;
 								}
 								case "jelly": {