diff --git a/src/components/GameSprint/SprintGamePlay/SprintGamePlay.tsx b/src/components/GameSprint/SprintGamePlay/SprintGamePlay.tsx index 148a95a..f1aab50 100644 --- a/src/components/GameSprint/SprintGamePlay/SprintGamePlay.tsx +++ b/src/components/GameSprint/SprintGamePlay/SprintGamePlay.tsx @@ -5,7 +5,7 @@ import SprintGameEnd from './SprintGameEnd'; import Timer from '../../commonComponents/Timer'; import { GameExitBtn } from '../../commonComponents'; import { clickStartGame, onAnswer } from '../../../store/actions/sprintAction'; -import { modalTimeout, SPRINT } from '../../../constants'; +import { modalTimeout, SPRINT, VOLUME_DIVIDER } from '../../../constants'; import { TIME_OUT_DELAY } from '../constants'; import { IAppState, ISprintWords } from '../../../store/types'; import useStyles from '../style'; @@ -17,8 +17,11 @@ const SprintGamePlay: React.FC = () => { const answer = (wordsArray: ISprintWords[], word: string, isAnswer: boolean) => dispatch(onAnswer(wordsArray, word, isAnswer)); const startGame = (isStart: boolean) => dispatch(clickStartGame(isStart)); + const sprintInfo = useSelector((state: IAppState) => state?.sprint); const { changeTimer } = useSelector((state: IAppState) => state.sprint); + const soundsVolume = useSelector((state: IAppState) => state.settings.soundsVolume); + const [randomWord, setRandomWord] = useState(''); const [classAnswer, setClassAnswer] = useState(classes.answerDefault); const [currentWord, setCurrentWord] = useState(''); @@ -42,10 +45,7 @@ const SprintGamePlay: React.FC = () => { const getRandomTranslate: string = sprintInfo.isEng ? sprintInfo?.wordsData?.[randomIndex]?.word.wordTranslate : sprintInfo?.wordsData?.[randomIndex]?.word.word; - const getCurrentWordTranslate: string = sprintInfo.isEng - ? sprintInfo?.wordsData?.[selectWord]?.word.wordTranslate - : sprintInfo?.wordsData?.[randomIndex]?.word.word; - const getRandomArray: Array = [getRandomTranslate, getCurrentWordTranslate]; + const getRandomArray: Array = [getRandomTranslate, currentTranslateDependingOnLang]; const getRandomWord = getRandomArray[Math.floor(Math.random() * getRandomArray.length)]; setRandomWord(getRandomWord); setIsDisabled(false); @@ -60,25 +60,34 @@ const SprintGamePlay: React.FC = () => { }, [selectWord]); useEffect(() => { + // eslint-disable-next-line no-undef + let timeout: NodeJS.Timeout; if (timer === 0) { setIsEndGame(true); + } else { + timeout = setTimeout(() => { + setTimer(timer - 1); + }, modalTimeout); } + return () => { + if (timeout) clearTimeout(timeout); + }; }, [timer]); useEffect(() => { - const timeout = setTimeout(() => setTimer(timer - 1), modalTimeout); return () => { startGame(false); - clearTimeout(timeout); }; }, []); const onAudioPlay = (url: string): void => { const audio = new Audio(url); + audio.volume = soundsVolume / VOLUME_DIVIDER; audio.play(); }; const onCheckAnswer = (word: string): void => { + if (!randomWord || !translateWord) return; const isCorrectAnswer: boolean = (word === 'false' && translateWord !== randomWord) || (word === 'true' && translateWord === randomWord); @@ -127,7 +136,7 @@ const SprintGamePlay: React.FC = () => { return () => { window.removeEventListener('keydown', handleKeyboardAnswer); }; - }, [timer]); + }, [timer, isDisabled]); const btnComponent = (selectName: string) => { return ( @@ -138,34 +147,33 @@ const SprintGamePlay: React.FC = () => { }; return ( - <> -
-
- - -
- {!isEndGame ? ( - <> - - - - {currentWord} - - - {randomWord} - - - -
- {btnComponent('true')} - {btnComponent('false')} -
- - ) : ( - - )} -
- +
+ {!isEndGame ? ( + <> +
+ + +
+ + + + + {currentWord} + + + {randomWord} + + + +
+ {btnComponent('true')} + {btnComponent('false')} +
+ + ) : ( + + )} +
); }; diff --git a/src/components/WordCard/WordCard.tsx b/src/components/WordCard/WordCard.tsx index dbad80c..161b01e 100644 --- a/src/components/WordCard/WordCard.tsx +++ b/src/components/WordCard/WordCard.tsx @@ -36,9 +36,15 @@ const WordCard: React.FC = ({ const userDifficultWords = useSelector((state: IAppState) => state.userDictionary.difficultWords.map((el) => el.word) ); + const wordInDifficult = useSelector((state: IAppState) => + state.userDictionary.difficultWords.findIndex((el) => el.id === word.id) + ); const userDeletedWords = useSelector((state: IAppState) => state.userDictionary.deletedWords.map((el) => el.word) ); + const wordInDeleted = useSelector((state: IAppState) => + state.userDictionary.deletedWords.findIndex((el) => el.id === word.id) + ); const userWords = useSelector((state: IAppState) => state.userDictionary.learningWords?.reduce((acc, el) => { @@ -215,6 +221,22 @@ const WordCard: React.FC = ({ }; }, []); + useEffect(() => { + if (userDifficultWords.includes(word.word)) { + setIsDifficult(true); + } else { + setIsDifficult(false); + } + }, [wordInDifficult]); + + useEffect(() => { + if (userDifficultWords.includes(word.word)) { + setIsDifficult(true); + } else { + setIsDifficult(false); + } + }, [wordInDeleted]); + return ( {(state: TransitionStatus) => ( diff --git a/src/store/actions/dictionaryActions.ts b/src/store/actions/dictionaryActions.ts index a27e27c..ed94a88 100644 --- a/src/store/actions/dictionaryActions.ts +++ b/src/store/actions/dictionaryActions.ts @@ -167,6 +167,7 @@ export const setUserWordEasy = (word: IWord, userData: IUserData) => async (disp } else { await setUserWordData(word, userData, 'easy', false, 0, 0)(dispatch); } + fetchDictionary(userData)(dispatch); }; export const setUserWordHard = (word: IWord, userData: IUserData) => async (dispatch: Dispatch) => {