fix: add change lang fix scroll

lbratkovskaya · Apr 14, 2021 · 92f35ac · 92f35ac
1 parent f05d645
commit 92f35ac
Show file tree

Hide file tree

Showing 9 changed files with 39 additions and 18 deletions.
diff --git 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
diff --git a/src/assets/SprintAudio/sprint_true.mp3 b/src/assets/SprintAudio/sprint_true.mp3
diff --git 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 ? <StartGameSprint /> : <SprintGamePlay />;
+    }
+    return <Countdown />;
+  };
+
   const fullScreenClass = fullSize ? ` ${classes.wrapperFull}` : ` ${classes.wrapperNotFull}`;
 
   const startComponent = (
-    <>
+    <div>
       <div className={`${classes.sprintWrapper}${fullScreenClass}`} style={style}>
-        {!sprintInfo.isStartGame ? <StartGameSprint /> : <SprintGamePlay />}
+        {renderComponent()}
       </div>
       <FullScreenBtn changeScreen={handleFullSize} />
-    </>
+    </div>
   );
 
   return (

diff --git 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
@@ -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<string> = [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
@@ -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
@@ -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
@@ -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;