From a499ad687939c423f266e0404d5c753c9f47c0a7 Mon Sep 17 00:00:00 2001 From: Skehmatics Date: Wed, 22 Sep 2021 06:09:23 -0700 Subject: [PATCH] feat: MFM Sparkle animation (#7813) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Add sparkle mfm animation ✨ * Cleanup sparkle effect + spaces -> tabs and other codestyle + use proper image + listen for resizes + use font-size to determine particle size (for fun with x2/3/4 stacking) --- assets/client/sparkle-spritesheet.png | Bin 0 -> 185 bytes locales/en-US.yml | 2 + src/client/components/mfm.ts | 14 ++ src/client/components/sparkle.vue | 180 ++++++++++++++++++++++++++ src/client/pages/mfm-cheat-sheet.vue | 13 +- 5 files changed, 208 insertions(+), 1 deletion(-) create mode 100644 assets/client/sparkle-spritesheet.png create mode 100644 src/client/components/sparkle.vue diff --git a/assets/client/sparkle-spritesheet.png b/assets/client/sparkle-spritesheet.png new file mode 100644 index 0000000000000000000000000000000000000000..0defccaf07530ac1793dbbe9bb2153dd6cd1b90f GIT binary patch literal 185 zcmeAS@N?(olHy`uVBq!ia0vp^(m>44!2%?MPyVw5QVpIijv*44=T6wm#bhYZ!Y(cE zP_wzVKyhoV6619>rRT0Y&Oa)W`nbGcd4%1xnT?{q);_RReYW?~ZI!B9c~%>?rcAmL zRQ7XXhG5RZGbidI^!%Q3w9R^XAg71tj)kz}L1SfM;h7IQ4^2JQ>h#F@_RH+(g^$i} l3wNzLWjk}b$KUTKtqWeCpW7hfy$R?R22WQ%mvv4FO#s6LOeO#T literal 0 HcmV?d00001 diff --git a/locales/en-US.yml b/locales/en-US.yml index 5d33e35f5..4d11ac1f4 100644 --- a/locales/en-US.yml +++ b/locales/en-US.yml @@ -899,6 +899,8 @@ _mfm: fontDescription: "Sets the font to display contents in." rainbow: "Rainbow" rainbowDescription: "Makes the content appear in rainbow colors." + sparkle: "Sparkle" + sparkleDescription: "Infuses a sparkling animation" _reversi: reversi: "Reversi" gameSettings: "Game settings" diff --git a/src/client/components/mfm.ts b/src/client/components/mfm.ts index c248f934d..a228ca4b8 100644 --- a/src/client/components/mfm.ts +++ b/src/client/components/mfm.ts @@ -8,6 +8,7 @@ import { concat } from '@client/../prelude/array'; import MkFormula from '@client/components/formula.vue'; import MkCode from '@client/components/code.vue'; import MkGoogle from '@client/components/google.vue'; +import MkSparkle from '@client/components/sparkle.vue'; import MkA from '@client/components/global/a.vue'; import { host } from '@client/config'; @@ -169,6 +170,19 @@ export default defineComponent({ style = this.$store.state.animatedMfm ? 'animation: mfm-rainbow 1s linear infinite;' : ''; break; } + case 'sparkle': { + if (!this.$store.state.animatedMfm) { + return genEl(token.children); + } + let count = token.props.args.count ? parseInt(token.props.args.count) : 10; + if (count > 100) { + count = 100; + } + const speed = token.props.args.speed ? parseFloat(token.props.args.speed) : 1; + return h(MkSparkle, { + count, speed, + }, genEl(token.children)); + } } if (style == null) { return h('span', {}, ['[', token.props.name, ...genEl(token.children), ']']); diff --git a/src/client/components/sparkle.vue b/src/client/components/sparkle.vue new file mode 100644 index 000000000..942412b44 --- /dev/null +++ b/src/client/components/sparkle.vue @@ -0,0 +1,180 @@ + + + + + diff --git a/src/client/pages/mfm-cheat-sheet.vue b/src/client/pages/mfm-cheat-sheet.vue index 95ddc1cbd..314b5e2a5 100644 --- a/src/client/pages/mfm-cheat-sheet.vue +++ b/src/client/pages/mfm-cheat-sheet.vue @@ -271,6 +271,16 @@ +
+
{{ $ts._mfm.sparkle }}
+
+

{{ $ts._mfm.sparkleDescription }}

+
+ + MFM +
+
+
@@ -294,7 +304,7 @@ export default defineComponent({ preview_hashtag: '#test', preview_url: `https://example.com`, preview_link: `[${this.$ts._mfm.dummy}](https://example.com)`, - preview_emoji: `:${this.$instance.emojis[0].name}:`, + preview_emoji: this.$instance.emojis.length ? `:${this.$instance.emojis[0].name}:` : `:emojiname:`, preview_bold: `**${this.$ts._mfm.dummy}**`, preview_small: `${this.$ts._mfm.dummy}`, preview_center: `
${this.$ts._mfm.dummy}
`, @@ -317,6 +327,7 @@ export default defineComponent({ preview_x4: `$[x4 🍮]`, preview_blur: `$[blur ${this.$ts._mfm.dummy}]`, preview_rainbow: `$[rainbow 🍮]`, + preview_sparkle: `$[sparkle 🍮]`, } }, });