From 31aa00856647433c3d4d2f2eb5840d2322e9ffa0 Mon Sep 17 00:00:00 2001 From: syuilo Date: Sat, 7 Nov 2020 23:41:21 +0900 Subject: [PATCH] Improve MFM MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit MFMの構文を調整 + 新しいアニメーション追加 Resolve #6816 --- src/client/components/mfm.ts | 102 +++++------ .../components/misskey-flavored-markdown.vue | 114 +++++++++++- src/client/pages/reversi/game.board.vue | 2 +- src/client/style.scss | 99 +---------- src/mfm/language.ts | 61 +++---- src/mfm/to-html.ts | 44 +---- src/mfm/to-string.ts | 37 +--- test/mfm.ts | 167 ------------------ 8 files changed, 193 insertions(+), 433 deletions(-) diff --git a/src/client/components/mfm.ts b/src/client/components/mfm.ts index e1216614a..aa9ff0952 100644 --- a/src/client/components/mfm.ts +++ b/src/client/components/mfm.ts @@ -77,9 +77,57 @@ export default defineComponent({ }, genEl(token.children)); } - case 'big': { - return h('strong', { - style: `display: inline-block; font-size: 150%;` + (this.$store.state.device.animatedMfm ? 'animation: anime-tada 1s linear infinite both;' : ''), + case 'fn': { + // TODO: CSSを文字列で組み立てていくと token.node.props.args.~~~ 経由でCSSインジェクションできるのでよしなにやる + let style; + switch (token.node.props.name) { + case 'tada': { + style = `font-size: 150%;` + (this.$store.state.device.animatedMfm ? 'animation: tada 1s linear infinite both;' : ''); + break; + } + case 'jelly': { + const speed = token.node.props.args.speed || '1s'; + style = (this.$store.state.device.animatedMfm ? `animation: mfm-rubberBand ${speed} linear infinite both;` : ''); + break; + } + case 'twitch': { + const speed = token.node.props.args.speed || '0.5s'; + style = this.$store.state.device.animatedMfm ? `animation: mfm-twitch ${speed} ease infinite;` : ''; + break; + } + case 'shake': { + const speed = token.node.props.args.speed || '0.5s'; + style = this.$store.state.device.animatedMfm ? `animation: mfm-shake ${speed} ease infinite;` : ''; + break; + } + case 'spin': { + const direction = + token.node.props.args.left ? 'reverse' : + token.node.props.args.alternate ? 'alternate' : + 'normal'; + const anime = + token.node.props.args.x ? 'mfm-spinX' : + token.node.props.args.y ? 'mfm-spinY' : + 'mfm-spin'; + const speed = token.node.props.args.speed || '1.5s'; + style = this.$store.state.device.animatedMfm ? `animation: ${anime} ${speed} linear infinite; animation-direction: ${direction};` : ''; + break; + } + case 'jump': { + style = this.$store.state.device.animatedMfm ? 'animation: mfm-jump 0.75s linear infinite;' : ''; + break; + } + case 'flip': { + const transform = + (token.node.props.args.h && token.node.props.args.v) ? 'scale(-1, -1)' : + token.node.props.args.v ? 'scaleY(-1)' : + 'scaleX(-1)'; + style = `transform: ${transform};`; + break; + } + } + return h('span', { + style: 'display: inline-block;' + style, }, genEl(token.children)); } @@ -95,48 +143,6 @@ export default defineComponent({ }, genEl(token.children))]; } - case 'motion': { - return h('span', { - style: 'display: inline-block;' + (this.$store.state.device.animatedMfm ? 'animation: anime-rubberBand 1s linear infinite both;' : ''), - }, genEl(token.children)); - } - - case 'spin': { - const direction = - token.node.props.attr == 'left' ? 'reverse' : - token.node.props.attr == 'alternate' ? 'alternate' : - 'normal'; - const style = this.$store.state.device.animatedMfm - ? `animation: anime-spin 1.5s linear infinite; animation-direction: ${direction};` : ''; - return h('span', { - style: 'display: inline-block;' + style - }, genEl(token.children)); - } - - case 'jump': { - return h('span', { - style: this.$store.state.device.animatedMfm ? 'display: inline-block; animation: anime-jump 0.75s linear infinite;' : 'display: inline-block;' - }, genEl(token.children)); - } - - case 'flip': { - return h('span', { - style: 'display: inline-block; transform: scaleX(-1);' - }, genEl(token.children)); - } - - case 'twitch': { - return h('span', { - style: this.$store.state.device.animatedMfm ? 'display: inline-block; animation: anime-twitch 0.5s ease infinite;' : 'display: inline-block;' - }, genEl(token.children)); - } - - case 'shake': { - return h('span', { - style: this.$store.state.device.animatedMfm ? 'display: inline-block; animation: anime-shake 0.5s ease infinite;' : 'display: inline-block;' - }, genEl(token.children)); - } - case 'url': { return [h(MkUrl, { key: Math.random(), @@ -198,12 +204,6 @@ export default defineComponent({ } } - case 'title': { - return [h('div', { - class: 'title' - }, genEl(token.children))]; - } - case 'emoji': { return [h(MkEmoji, { key: Math.random(), diff --git a/src/client/components/misskey-flavored-markdown.vue b/src/client/components/misskey-flavored-markdown.vue index a7ef718f6..c922eb167 100644 --- a/src/client/components/misskey-flavored-markdown.vue +++ b/src/client/components/misskey-flavored-markdown.vue @@ -13,6 +13,115 @@ export default defineComponent({ }); + + diff --git a/src/client/pages/reversi/game.board.vue b/src/client/pages/reversi/game.board.vue index 96ea86547..6559396ac 100644 --- a/src/client/pages/reversi/game.board.vue +++ b/src/client/pages/reversi/game.board.vue @@ -11,7 +11,7 @@

{{ $t('_reversi.opponentTurn') }}

-

{{ $t('_reversi.myTurn') }}

+

{{ $t('_reversi.myTurn') }}