From c747594b74252935ed85ba2624abc8177b27aba4 Mon Sep 17 00:00:00 2001 From: KaiyiWing Date: Sun, 7 Feb 2021 16:12:01 +0800 Subject: [PATCH] =?UTF-8?q?fix(Word):=20=E7=A7=BB=E9=99=A4=20replaceAll=20?= =?UTF-8?q?=E6=96=B9=E6=B3=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + src/components/Word/index.module.css | 26 +++++++++++++ src/components/Word/index.tsx | 12 ++++-- yarn.lock | 55 +++++++++++++++++++++++++++- 4 files changed, 89 insertions(+), 5 deletions(-) create mode 100644 src/components/Word/index.module.css diff --git a/package.json b/package.json index ecfa6bcd..d981e7f5 100644 --- a/package.json +++ b/package.json @@ -25,6 +25,7 @@ "eslint-plugin-prettier": "^3.3.1", "eslint-plugin-react": "^7.22.0", "eslint-plugin-react-hooks": "^4.2.0", + "framer-motion": "^3.3.0", "husky": "^4.3.8", "lint-staged": "^10.5.3", "lodash": "^4.17.20", diff --git a/src/components/Word/index.module.css b/src/components/Word/index.module.css new file mode 100644 index 00000000..61d176c8 --- /dev/null +++ b/src/components/Word/index.module.css @@ -0,0 +1,26 @@ +.wrong { + animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; +} + +@keyframes shake { + 10%, + 90% { + transform: translate3d(-1px, 0, 0); + } + + 20%, + 80% { + transform: translate3d(2px, 0, 0); + } + + 30%, + 50%, + 70% { + transform: translate3d(-4px, 0, 0); + } + + 40%, + 60% { + transform: translate3d(4px, 0, 0); + } +} diff --git a/src/components/Word/index.tsx b/src/components/Word/index.tsx index f40e13c3..4a9e1f18 100644 --- a/src/components/Word/index.tsx +++ b/src/components/Word/index.tsx @@ -2,9 +2,11 @@ import React, { useEffect, useState, useCallback, useLayoutEffect } from 'react' import Letter, { LetterState } from './Letter' import { isLegal, isChineseSymbol } from '../../utils/utils' import useSounds from 'hooks/useSounds' +import { motion } from 'framer-motion' +import style from './index.module.css' const Word: React.FC = ({ word = 'defaultWord', onFinish, isStart, wordVisible = true }) => { - word = word.replaceAll(' ', '_') + word = word.replace(new RegExp(' ', 'g'), '_') const [inputWord, setInputWord] = useState('') const [statesList, setStatesList] = useState([]) const [isFinish, setIsFinish] = useState(false) @@ -48,7 +50,10 @@ const Word: React.FC = ({ word = 'defaultWord', onFinish, isStart, wo useEffect(() => { if (hasWrong) { playBeepSound() - setHasWrong(false) + setTimeout(() => { + setInputWord('') + setHasWrong(false) + }, 300) } }, [hasWrong, playBeepSound]) @@ -64,7 +69,6 @@ const Word: React.FC = ({ word = 'defaultWord', onFinish, isStart, wo } else { hasWrong = true statesList.push('wrong') - setInputWord('') setHasWrong(true) break } @@ -77,7 +81,7 @@ const Word: React.FC = ({ word = 'defaultWord', onFinish, isStart, wo }, [inputWord, word]) return ( -
+
{word.split('').map((t, index) => { return (