diff --git a/assets/client/sparkle-spritesheet.png b/assets/client/sparkle-spritesheet.png new file mode 100644 index 000000000..0defccaf0 Binary files /dev/null and b/assets/client/sparkle-spritesheet.png differ 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 🍮]`, } }, });