savannah game tracker and sounds

src/components/AudioCallingPage/FinishWindow/FinishWindow.tsx

@@ -1,20 +1,14 @@
 import React, { useEffect } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
-import TableEndGame from '../../commonComponents/TableEndGame/TableEndGame';
+import { TableEndGame } from '../../commonComponents';
 import {
   clickStartGame,
   resetEndGame,
   resetWordsToStartNewGame,
 } from '../../../store/actions/audioCallingActions';
 import { addWordsToUserDictionary } from '../../../store/actions/dictionaryActions';
 import { addGameStatistics } from '../../../store/actions/statisticsActions';
-import {
-  IAppState,
-  IAudioCallingWord,
-  IGameName,
-  IWord,
-  IWordWithResult,
-} from '../../../store/types';
+import { IAppState, IAudioCallingWord, IGameName, IWordWithResult } from '../../../store/types';
 import useStyles from './styles';
 
 const FinishGame: React.FC = () => {
@@ -31,7 +25,7 @@ const FinishGame: React.FC = () => {
   const toggleResetEndGame = () => dispatch(resetEndGame());
   const startGame = (isStart: boolean) => dispatch(clickStartGame(isStart));
   const reset = () => dispatch(resetWordsToStartNewGame());
-  const sendWords = (array: Array<{ word: IWord; correct: boolean }>) =>
+  const sendWords = (array: Array<IWordWithResult>) =>
     dispatch(addWordsToUserDictionary(array, userDictionary, userData));
 
   const handleExitGame = () => {

src/components/GameSavannah/SavannahGamePlay/SavannahEndGame/SavannahEndGame.tsx

@@ -40,12 +40,14 @@ const SavannahEndGame: React.FC = () => {
   }, []);
 
   useEffect(() => {
-    const arrayForUserDictionary = savannahData.wordsData.map((el) => {
-      return {
-        word: el.wordObj,
-        correct: el.isCorrect,
-      };
-    });
+    const arrayForUserDictionary = savannahData.wordsData
+      .filter((el) => el.isCorrect !== undefined)
+      .map((el) => {
+        return {
+          word: el.wordObj,
+          correct: el.isCorrect,
+        };
+      });
     if (userData.userId) sendWordsToUserDictionary(arrayForUserDictionary);
   }, []);
 

src/components/GameSavannah/SavannahGamePlay/SavannahGamePlay.tsx

@@ -3,6 +3,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { Favorite } from '@material-ui/icons';
 import SavannahEndGame from './SavannahEndGame';
 import { GameExitBtn } from '../../commonComponents';
+import GameTracker from '../../commonComponents/GameTracker';
 import { clickStartGame, onAnswer } from '../../../store/actions/savannahActions';
 import { addGameStatistics } from '../../../store/actions/statisticsActions';
 import { SAVANNAH, VOLUME_DIVIDER } from '../../../constants';
@@ -47,6 +48,7 @@ const SavannahGamePlay: React.FC = () => {
   const currentWord = savannahData.isEng
     ? savannahData?.wordsData?.[startWord]?.word
     : savannahData?.wordsData?.[startWord]?.translate;
+  const isAudioAnswer = startWord >= savannahData?.wordsData.length - 1 || health === 1;
 
   const classes = useStyles();
 
@@ -92,6 +94,12 @@ const SavannahGamePlay: React.FC = () => {
       setIsEndGame(true);
       setAnimate(true);
     }
+    if (health === 0) {
+      onAudioPlay(SAVANNAH.finishAudioFail);
+    }
+    if (health > 0 && isEndGame) {
+      onAudioPlay(SAVANNAH.finishAudioWin);
+    }
     const timeout = setTimeout(() => timeOutFunc(), SAVANNAH.timeOutDelay);
     return () => {
       clearTimeout(timeout);
@@ -113,12 +121,12 @@ const SavannahGamePlay: React.FC = () => {
   const checkAnswer = (word: string) => {
     const matchCheck = currentWord.toLocaleLowerCase() === word.toLocaleLowerCase();
     if (matchCheck) {
-      onAudioPlay(SAVANNAH.audioCorrect);
+      if (!isAudioAnswer) onAudioPlay(SAVANNAH.audioCorrect);
       setIsCorrectAnswer(true);
       answer(savannahData.wordsData, currentWord, true);
       setCurrentSuccessSeries(currentSuccessSeries + 1);
     } else {
-      onAudioPlay(SAVANNAH.audioIncorrect);
+      if (!isAudioAnswer) onAudioPlay(SAVANNAH.audioIncorrect);
       answer(savannahData.wordsData, currentWord, false);
       setIsCorrectAnswer(false);
       answer(savannahData.wordsData, currentWord, false);
@@ -214,6 +222,7 @@ const SavannahGamePlay: React.FC = () => {
         {isRenderingFallingWords && renderFallingWords()}
         {renderChooseWord()}
         <div className={classes.savannahFooter}>
+          <GameTracker index={startWord + 1} end={savannahData.wordsData.length} />
           {startWord > 0 && (
             <img
               className={`${classes.footerImg}${isFooterImgAnimation}`}

src/components/GameSavannah/SavannahStartWindow/SavannahStartWindow.tsx

@@ -76,7 +76,7 @@ const SavannahStartWindow: React.FC = () => {
       const wordsForGame =
         currentMode === 'hard'
           ? extraWords.concat(gameWords)?.slice(-wordCount)
-          : gameWords.slice(wordCount);
+          : gameWords.slice(-wordCount);
 
       setSelectRound(randomPage);
       onReduceArrayWords(wordsForGame);
@@ -91,11 +91,11 @@ const SavannahStartWindow: React.FC = () => {
 
   useEffect(() => {
     getGameWords(group, page);
-  }, [group, page]);
+  }, [group, page, savannahData.mode]);
 
   useEffect(() => {
     getExtraWords(extraWordsValue);
-  }, [extraWordsValue]);
+  }, [extraWordsValue, savannahData.mode]);
 
   useEffect(() => {
     getUserDictionary();

src/components/GameSavannah/styles.ts

@@ -109,7 +109,7 @@ const useStyles = makeStyles((theme) =>
 
     footerImg: {
       position: 'absolute',
-      left: '50%',
+      left: '45%',
       top: '-50%',
       width: '80px',
     },

src/components/commonComponents/TableEndGame/TableEndGame.tsx

@@ -9,12 +9,9 @@ import {
   Paper,
 } from '@material-ui/core';
 import { ISavannahWord, IAudioCallingWord } from '../../../store/types';
+import { ITableEndProps } from '../types';
 import { useStyles } from '../styles';
 
-interface ITableEndProps {
-  words: Array<ISavannahWord | IAudioCallingWord>;
-}
-
 const TableEndGame: React.FC<ITableEndProps> = ({ words }: ITableEndProps) => {
   const classes = useStyles();
   const chooseTableHeadStyle = (value: boolean | undefined | string) => {

src/components/commonComponents/types.ts

@@ -1,5 +1,7 @@
 import { FullScreenHandle } from 'react-full-screen';
 import { IGroup } from '../../constants';
+import { IAudioCallingWords } from '../../store/reducers/audioCallingReducer/types';
+import { ISavannahWord } from '../../store/types';
 
 export interface IGameSelectProps {
   changeSelectFc: (item: string | number) => void;
@@ -40,3 +42,7 @@ export interface ITimerProps {
 export interface IGameModeProps {
   changeModeFc: (mode: string) => void;
 }
+
+export interface ITableEndProps {
+  words: Array<ISavannahWord | IAudioCallingWords>;
+}

src/store/actions/audioCallingActions.ts

@@ -17,17 +17,17 @@ export function selectRound(value: number) {
 
 export const putIncorrectToStore = (word: IWord) => ({
   type: AudioCallingActionTypes.PUT_INCORRECT,
-  payload: { wordObj: word, isCorrect: false, translate: word.wordTranslate, word: word.word },
+  payload: { wordObj: word, isCorrect: false, word: word.word, translate: word.wordTranslate },
 });
 
 export const putCorrectToStore = (word: IWord) => ({
   type: AudioCallingActionTypes.PUT_CORRECT,
-  payload: { wordObj: word, isCorrect: true, translate: word.wordTranslate, word: word.word },
+  payload: { wordObj: word, isCorrect: true, word: word.word, translate: word.wordTranslate },
 });
 
 export const resetWordsToStartNewGame = () => ({
   type: AudioCallingActionTypes.RESET,
-  payload: { word: [] },
+  payload: { wordObj: [] },
 });
 
 export const endGame = () => ({

src/store/actions/savannahActions.ts

@@ -46,7 +46,7 @@ export function reduceArrayWords(wordsArray: Array<IWord>) {
           word: el.word,
           wordObj: el,
           translate: el.wordTranslate,
-          isCorrect: false,
+          isCorrect: undefined,
         };
       }),
   };

src/store/reducers/audioCallingReducer/types.ts

@@ -20,6 +20,13 @@ export interface IAudioCallingGameAction {
   startArray: IWord[];
 }
 
+export interface IAudioCallingWords {
+  wordObj: IWord;
+  isCorrect: boolean;
+  word: string;
+  translate: string;
+}
+
 export interface IAudioCallingState {
   startArray: IWord[];
   level: number;