fix: fixes for keyboard & dictionary

lbratkovskaya · Apr 14, 2021 · ddbf9cb · ddbf9cb
1 parent 9c9857f
commit ddbf9cb
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 36 deletions.
diff --git 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<string> = [getRandomTranslate, getCurrentWordTranslate];
+    const getRandomArray: Array<string> = [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 (
-    <>
-      <div>
-        <div className={classes.sprintHeader}>
-          <Timer gameTime={timer} handleOnComplite={handleEndGame} size={60} />
-          <GameExitBtn clickBtn={handleExitGame} />
-        </div>
-        {!isEndGame ? (
-          <>
-            <Card className={classAnswer}>
-              <CardContent>
-                <Typography color="textSecondary" gutterBottom className={classes.sprintSpan}>
-                  {currentWord}
-                </Typography>
-                <Typography color="textSecondary" className={classes.sprintSpan}>
-                  {randomWord}
-                </Typography>
-              </CardContent>
-            </Card>
-            <div className={classes.sprintChooseWrapper}>
-              {btnComponent('true')}
-              {btnComponent('false')}
-            </div>
-          </>
-        ) : (
-          <SprintGameEnd />
-        )}
-      </div>
-    </>
+    <div>
+      {!isEndGame ? (
+        <>
+          <div className={classes.sprintHeader}>
+            <Timer gameTime={changeTimer} handleOnComplite={handleEndGame} size={60} />
+            <GameExitBtn clickBtn={handleExitGame} />
+          </div>
+
+          <Card className={classAnswer}>
+            <CardContent>
+              <Typography color="textSecondary" gutterBottom className={classes.sprintSpan}>
+                {currentWord}
+              </Typography>
+              <Typography color="textSecondary" className={classes.sprintSpan}>
+                {randomWord}
+              </Typography>
+            </CardContent>
+          </Card>
+          <div className={classes.sprintChooseWrapper}>
+            {btnComponent('true')}
+            {btnComponent('false')}
+          </div>
+        </>
+      ) : (
+        <SprintGameEnd />
+      )}
+    </div>
   );
 };
 

diff --git a/src/components/WordCard/WordCard.tsx b/src/components/WordCard/WordCard.tsx
@@ -36,9 +36,15 @@ const WordCard: React.FC<IWordCardProps> = ({
   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<IWordCardProps> = ({
     };
   }, []);
 
+  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 (
     <Transition in={isMounted && !isLoading} timeout={APPEAR_DURATION} unmountOnExit>
       {(state: TransitionStatus) => (

diff --git 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) => {