From 3cc8f60ee9466dac45b7f21dc7870001154ac264 Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Fri, 9 Jun 2023 11:46:55 -0700
Subject: [PATCH] feat: :sparkles: delay function in animated MFM

---
 packages/client/src/components/mfm.ts         | 33 ++++++++++++++-----
 packages/client/src/pages/mfm-cheat-sheet.vue | 16 ++++-----
 2 files changed, 32 insertions(+), 17 deletions(-)

diff --git a/packages/client/src/components/mfm.ts b/packages/client/src/components/mfm.ts
index 50a566d33..5282bffde 100644
--- a/packages/client/src/components/mfm.ts
+++ b/packages/client/src/components/mfm.ts
@@ -57,6 +57,12 @@ export default defineComponent({
 			if (t == null) return null;
 			return t.match(/^[0-9.]+s$/) ? t : null;
 		};
+
+		const validNumber = (n: string | null | undefined) => {
+			if (n == null) return null;
+			const parsed = parseFloat(n);
+			return !isNaN(parsed) && isFinite(parsed) && parsed > 0;
+		};
 		// const validEase = (e: string | null | undefined) => {
 		// 	if (e == null) return null;
 		// 	return e.match(/(steps)?\(-?[0-9.]+,-?[0-9.]+,-?[0-9.]+,-?[0-9.]+\)/) 
@@ -109,26 +115,30 @@ export default defineComponent({
 								case "tada": {
 									const speed = validTime(token.props.args.speed) || "1s";
 									const delay = validTime(token.props.args.delay) || "0s";
+									const loop = validNumber(token.props.args.loop) || "infinite";
 									// const ease = validEase(token.props.args.ease) || "linear";
-									style = `font-size: 150%; animation: tada ${speed} ${delay} linear infinite both;`;
+									style = `font-size: 150%; animation: tada ${speed} ${delay} linear ${loop} both;`;
 									break;
 								}
 								case "jelly": {
 									const speed = validTime(token.props.args.speed) || "1s";
 									const delay = validTime(token.props.args.delay) || "0s";
-									style = `animation: mfm-rubberBand ${speed} ${delay} linear infinite both;`;
+									const loop = validNumber(token.props.args.loop) || "infinite";
+									style = `animation: mfm-rubberBand ${speed} ${delay} linear ${loop} both;`;
 									break;
 								}
 								case "twitch": {
 									const speed = validTime(token.props.args.speed) || "0.5s";
 									const delay = validTime(token.props.args.delay) || "0s";
-									style = `animation: mfm-twitch ${speed} ${delay} ease infinite;`;
+									const loop = validNumber(token.props.args.loop) || "infinite";
+									style = `animation: mfm-twitch ${speed} ${delay} ease ${loop};`;
 									break;
 								}
 								case "shake": {
 									const speed = validTime(token.props.args.speed) || "0.5s";
 									const delay = validTime(token.props.args.delay) || "0s";
-									style = `animation: mfm-shake ${speed} ${delay} ease infinite;`;
+									const loop = validNumber(token.props.args.loop) || "infinite";
+									style = `animation: mfm-shake ${speed} ${delay} ease ${loop};`;
 									break;
 								}
 								case "spin": {
@@ -144,25 +154,29 @@ export default defineComponent({
 										: "mfm-spin";
 									const speed = validTime(token.props.args.speed) || "1.5s";
 									const delay = validTime(token.props.args.delay) || "0s";
-									style = `animation: ${anime} ${speed} ${delay} linear infinite; animation-direction: ${direction};`;
+									const loop = validNumber(token.props.args.loop) || "infinite";
+									style = `animation: ${anime} ${speed} ${delay} linear ${loop}; animation-direction: ${direction};`;
 									break;
 								}
 								case "jump": {
 									const speed = validTime(token.props.args.speed) || "0.75s";
 									const delay = validTime(token.props.args.delay) || "0s";
-									style = `animation: mfm-jump ${speed} ${delay} linear infinite;`;
+									const loop = validNumber(token.props.args.loop) || "infinite";
+									style = `animation: mfm-jump ${speed} ${delay} linear ${loop};`;
 									break;
 								}
 								case "bounce": {
 									const speed = validTime(token.props.args.speed) || "0.75s";
 									const delay = validTime(token.props.args.delay) || "0s";
-									style = `animation: mfm-bounce ${speed} ${delay} linear infinite; transform-origin: center bottom;`;
+									const loop = validNumber(token.props.args.loop) || "infinite";
+									style = `animation: mfm-bounce ${speed} ${delay} linear ${loop}; transform-origin: center bottom;`;
 									break;
 								}
 								case "rainbow": {
 									const speed = validTime(token.props.args.speed) || "1s";
 									const delay = validTime(token.props.args.delay) || "0s";
-									style = `animation: mfm-rainbow ${speed} ${delay} linear infinite;`;
+									const loop = validNumber(token.props.args.loop) || "infinite";
+									style = `animation: mfm-rainbow ${speed} ${delay} linear ${loop};`;
 									break;
 								}
 								case "sparkle": {
@@ -177,7 +191,8 @@ export default defineComponent({
 										: "alternate";
 									const speed = validTime(token.props.args.speed) || "1.5s";
 									const delay = validTime(token.props.args.delay) || "0s";
-									style = `animation: mfm-fade ${speed} ${delay} linear infinite; animation-direction: ${direction};`;
+									const loop = validNumber(token.props.args.loop) || "infinite";
+									style = `animation: mfm-fade ${speed} ${delay} linear ${loop}; animation-direction: ${direction};`;
 									break;
 								}
 								case "flip": {
diff --git a/packages/client/src/pages/mfm-cheat-sheet.vue b/packages/client/src/pages/mfm-cheat-sheet.vue
index 046231dbc..dd01ec852 100644
--- a/packages/client/src/pages/mfm-cheat-sheet.vue
+++ b/packages/client/src/pages/mfm-cheat-sheet.vue
@@ -472,14 +472,14 @@ let preview_quote = $ref(`> ${i18n.ts._mfm.dummy}`);
 let preview_search = $ref(
 	`${i18n.ts._mfm.dummy} [search]\n${i18n.ts._mfm.dummy} [検索]\n${i18n.ts._mfm.dummy} 検索`
 );
-let preview_jelly = $ref("$[jelly 🍮] $[jelly.speed=3s 🍮] $[jelly.delay=3s 🍮]");
-let preview_tada = $ref("$[tada 🍮] $[tada.speed=3s 🍮] $[tada.delay=3s 🍮]");
-let preview_jump = $ref("$[jump 🍮] $[jump.speed=3s 🍮] $[jump.delay=3s 🍮]");
-let preview_bounce = $ref("$[bounce 🍮] $[bounce.speed=3s 🍮] $[bounce.delay=3s 🍮]");
-let preview_shake = $ref("$[shake 🍮] $[shake.speed=3s 🍮] $[shake.delay=3s 🍮]");
-let preview_twitch = $ref("$[twitch 🍮] $[twitch.speed=3s 🍮] $[twitch.delay=3s 🍮]");
+let preview_jelly = $ref("$[jelly 🍮] $[jelly.speed=3s 🍮] $[jelly.delay=3s 🍮] $[jelly.loop=3 🍮]");
+let preview_tada = $ref("$[tada 🍮] $[tada.speed=3s 🍮] $[tada.delay=3s 🍮] $[tada.loop=3 🍮]");
+let preview_jump = $ref("$[jump 🍮] $[jump.speed=3s 🍮] $[jump.delay=3s 🍮] $[jump.loop=3 🍮]");
+let preview_bounce = $ref("$[bounce 🍮] $[bounce.speed=3s 🍮] $[bounce.delay=3s 🍮] $[bounce.loop=3 🍮]");
+let preview_shake = $ref("$[shake 🍮] $[shake.speed=3s 🍮] $[shake.delay=3s 🍮] $[shake.loop=3 🍮]");
+let preview_twitch = $ref("$[twitch 🍮] $[twitch.speed=3s 🍮] $[twitch.delay=3s 🍮] $[twitch.loop=3 🍮]");
 let preview_spin = $ref(
-	"$[spin 🍮] $[spin.left 🍮] $[spin.alternate 🍮]\n$[spin.x 🍮] $[spin.x,left 🍮] $[spin.x,alternate 🍮]\n$[spin.y 🍮] $[spin.y,left 🍮] $[spin.y,alternate 🍮]\n\n$[spin.speed=3s 🍮] $[spin.delay=3s 🍮]"
+	"$[spin 🍮] $[spin.left 🍮] $[spin.alternate 🍮]\n$[spin.x 🍮] $[spin.x,left 🍮] $[spin.x,alternate 🍮]\n$[spin.y 🍮] $[spin.y,left 🍮] $[spin.y,alternate 🍮]\n\n$[spin.speed=3s 🍮] $[spin.delay=3s 🍮] $[spin.loop=3 🍮]"
 );
 let preview_flip = $ref(
 	`$[flip ${i18n.ts._mfm.dummy}]\n$[flip.v ${i18n.ts._mfm.dummy}]\n$[flip.h,v ${i18n.ts._mfm.dummy}]`
@@ -491,7 +491,7 @@ let preview_x2 = $ref("$[x2 🍮]");
 let preview_x3 = $ref("$[x3 🍮]");
 let preview_x4 = $ref("$[x4 🍮]");
 let preview_blur = $ref(`$[blur ${i18n.ts._mfm.dummy}]`);
-let preview_rainbow = $ref("$[rainbow 🍮] $[rainbow.speed=3s 🍮] $[rainbow.delay=3s 🍮]");
+let preview_rainbow = $ref("$[rainbow 🍮] $[rainbow.speed=3s 🍮] $[rainbow.delay=3s 🍮] $[rainbow.loop=3 🍮]");
 let preview_sparkle = $ref("$[sparkle 🍮]");
 let preview_rotate = $ref(
 	"$[rotate 🍮]\n$[rotate.deg=45 🍮]\n$[rotate.x,deg=45 Hello, world!]"