diff --git a/.gitignore b/.gitignore index 604627a..5721203 100644 --- a/.gitignore +++ b/.gitignore @@ -1,6 +1,9 @@ # Build build/ +# IntellijIdea files +.idea/ + # Dependency directories node_modules/ diff --git a/src/assets/SprintAudio/sprint_false.mp3 b/src/assets/SprintAudio/sprint_false.mp3 deleted file mode 100644 index e3029fe..0000000 Binary files a/src/assets/SprintAudio/sprint_false.mp3 and /dev/null differ diff --git a/src/assets/SprintAudio/sprint_true.mp3 b/src/assets/SprintAudio/sprint_true.mp3 deleted file mode 100644 index 00cd038..0000000 Binary files a/src/assets/SprintAudio/sprint_true.mp3 and /dev/null differ diff --git a/src/components/GameSprint/GameSprint.tsx b/src/components/GameSprint/GameSprint.tsx index 8db280f..fd6a7d6 100644 --- a/src/components/GameSprint/GameSprint.tsx +++ b/src/components/GameSprint/GameSprint.tsx @@ -1,7 +1,7 @@ import React, { useEffect, useState } from 'react'; import { useSelector } from 'react-redux'; import { useFullScreenHandle } from 'react-full-screen'; -import { FullScreenBtn, FullScreenWrapper } from '../commonComponents'; +import { Countdown, FullScreenBtn, FullScreenWrapper } from '../commonComponents'; import Header from '../Header'; import SprintGamePlay from './SprintGamePlay'; import StartGameSprint from './StartGameSprint'; @@ -12,6 +12,7 @@ import useStyles from './style'; const GameSprint: React.FC = () => { const classes = useStyles(); const sprintInfo = useSelector((state: IAppState) => state.sprint); + const { isCountDown } = useSelector((state: IAppState) => state.games); const [fullSize, setFullSize] = useState(false); const [style, setStyle] = useState({}); const handleFullScreenMode = useFullScreenHandle(); @@ -27,15 +28,22 @@ const GameSprint: React.FC = () => { bg.src = SPRINT.background; }, []); + const renderComponent = () => { + if (!isCountDown) { + return !sprintInfo.isStartGame ? : ; + } + return ; + }; + const fullScreenClass = fullSize ? ` ${classes.wrapperFull}` : ` ${classes.wrapperNotFull}`; const startComponent = ( - <> +
- {!sprintInfo.isStartGame ? : } + {renderComponent()}
- +
); return ( diff --git a/src/components/GameSprint/SprintGamePlay/SprintGameEnd/SprintGameEnd.tsx b/src/components/GameSprint/SprintGamePlay/SprintGameEnd/SprintGameEnd.tsx index 7a190a8..796d2a5 100644 --- a/src/components/GameSprint/SprintGamePlay/SprintGameEnd/SprintGameEnd.tsx +++ b/src/components/GameSprint/SprintGamePlay/SprintGameEnd/SprintGameEnd.tsx @@ -80,9 +80,9 @@ const SprintGameEnd: React.FC = () => { const checkCorrectArray = springInfo.wordsData.filter((el: ISprintWords) => !el.isCorrect); setTimeout(() => { if (checkCorrectArray.length) { - onAudioPlay(SPRINT.audioFalse); + onAudioPlay(SPRINT.audioFail); } else { - onAudioPlay(SPRINT.audioTrue); + onAudioPlay(SPRINT.audioWin); } }, timeout); }, []); diff --git a/src/components/GameSprint/SprintGamePlay/SprintGamePlay.tsx b/src/components/GameSprint/SprintGamePlay/SprintGamePlay.tsx index e6e20c9..148a95a 100644 --- a/src/components/GameSprint/SprintGamePlay/SprintGamePlay.tsx +++ b/src/components/GameSprint/SprintGamePlay/SprintGamePlay.tsx @@ -29,12 +29,22 @@ const SprintGamePlay: React.FC = () => { const [isDisabled, setIsDisabled] = useState(false); const timeDaleyWord = (): void => { - setCurrentWord(sprintInfo?.wordsData?.[selectWord]?.word.word); - setTranslateWord(sprintInfo?.wordsData?.[selectWord]?.word.wordTranslate); + const currentWordDependingOnLang = sprintInfo.isEng + ? sprintInfo?.wordsData?.[selectWord]?.word.word + : sprintInfo?.wordsData?.[selectWord]?.word.wordTranslate; + const currentTranslateDependingOnLang = sprintInfo.isEng + ? sprintInfo?.wordsData?.[selectWord]?.word.wordTranslate + : sprintInfo?.wordsData?.[selectWord]?.word.word; + setCurrentWord(currentWordDependingOnLang); + setTranslateWord(currentTranslateDependingOnLang); setClassAnswer(classes.answerDefault); const randomIndex: number = Math.floor(Math.random() * sprintInfo.wordsData.length); - const getRandomTranslate: string = sprintInfo?.wordsData?.[randomIndex]?.word.wordTranslate; - const getCurrentWordTranslate: string = sprintInfo?.wordsData?.[selectWord]?.word.wordTranslate; + 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 getRandomWord = getRandomArray[Math.floor(Math.random() * getRandomArray.length)]; setRandomWord(getRandomWord); @@ -117,7 +127,7 @@ const SprintGamePlay: React.FC = () => { return () => { window.removeEventListener('keydown', handleKeyboardAnswer); }; - }, [isDisabled]); + }, [timer]); const btnComponent = (selectName: string) => { return ( diff --git a/src/components/GameSprint/constants.ts b/src/components/GameSprint/constants.ts index 86ce447..1d92d95 100644 --- a/src/components/GameSprint/constants.ts +++ b/src/components/GameSprint/constants.ts @@ -8,5 +8,5 @@ export const SELECT_ROUNDS: any = { amount: 30, }; -export const TIME_OUT_DELAY: number = 500; +export const TIME_OUT_DELAY: number = 800; export const MAX_LENGTH_GAME_ARR: number = 20; diff --git a/src/components/GameSprint/style.ts b/src/components/GameSprint/style.ts index af376e3..92b9462 100644 --- a/src/components/GameSprint/style.ts +++ b/src/components/GameSprint/style.ts @@ -102,14 +102,12 @@ const useStyles = makeStyles(() => margin: '3rem auto', background: 'scroll', '&::-webkit-scrollbar': { - width: '24px', + width: '8px', height: '8px', - backgroundColor: '#143861', }, '&::-webkit-scrollbar-thumb': { - backgroundColor: '#843465', + backgroundColor: '#000', borderRadius: '9em', - boxShadow: 'inset 1px 1px 10px #f3faf7', }, }, tableSpanCorrectly: { diff --git a/src/constants.ts b/src/constants.ts index f5161c8..bd27db0 100644 --- a/src/constants.ts +++ b/src/constants.ts @@ -143,8 +143,10 @@ export const SPRINT = { background: '../../../assets/sprint-bg.jpg', sadImg: '../../../assets/sad.svg', winkImg: '../../../assets/wink.svg', - audioTrue: '../../../assets/SprintAudio/sprint_true.mp3', - audioFalse: '../../../assets/SprintAudio/sprint_false.mp3', + audioTrue: '../../../assets/audio/savannah-true.mp3', + audioFalse: '../../../assets/audio/savannah-false.mp3', + audioWin: '../../../assets/audio/win-sound.mp3', + audioFail: '../../../assets/audio/fail-sound.mp3', }; export const modalTimeout = 1000;