fix: sound control in memory game

lbratkovskaya · Apr 14, 2021 · 03f08a7 · 03f08a7
1 parent 47b2143
commit 03f08a7
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 10 deletions.
diff --git a/src/components/MemoryGame/ControlPanel.tsx b/src/components/MemoryGame/ControlPanel.tsx
@@ -23,7 +23,7 @@ const ControlPanel: React.FC = () => {
   const gameWords = useSelector((state: IAppState) => state.memoryGame.words);
   const isLoggedIn = useSelector((state: IAppState) => state.user.isLoggedIn);
   const userData = useSelector((state: IAppState) => state.user.data);
-  const volume = useSelector((state: IAppState) => state.settings.soundsVolume);
+  const { soundsVolume } = useSelector((state: IAppState) => state.settings);
   const userDictionary = useSelector((state: IAppState) => state.userDictionary);
   const userWords = [...userDictionary.learningWords, ...userDictionary.deletedWords];
   const userWordsWords = userWords.map((uw) => uw.word);
@@ -68,7 +68,7 @@ const ControlPanel: React.FC = () => {
 
   function playSound(audio: string) {
     const player = new Audio(audio);
-    player.volume = volume / 100;
+    player.volume = soundsVolume / 100;
     player.play();
   }
 

diff --git a/src/components/MemoryGame/GameCard.tsx b/src/components/MemoryGame/GameCard.tsx
@@ -3,7 +3,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { get } from 'lodash';
 import { Card, Typography } from '@material-ui/core';
 import { showGameCard } from '../../store/actions/memoryGameActions';
-import backendUrl, { GAMES, MEMORY } from '../../constants';
+import backendUrl, { GAMES } from '../../constants';
 import { ICardProps } from './types';
 import { IAppState } from '../../store/types';
 import { IMemoryGameCard } from '../../store/reducers/memoryGameReducer/types';
@@ -13,7 +13,7 @@ const GameCard: React.FC<ICardProps> = (props: ICardProps) => {
   const classes = useStyles();
   const dispatch = useDispatch();
   const isGameStared = useSelector((state: IAppState) => state.memoryGame.isStarted);
-  const volume = useSelector((state: IAppState) => state.memoryGame.wordsVolume);
+  const soundsVolume = useSelector((state: IAppState) => state.settings.soundsVolume);
 
   const handleGameMove = (event: React.SyntheticEvent) => {
     if (!props.disabled && isGameStared) {
@@ -35,7 +35,7 @@ const GameCard: React.FC<ICardProps> = (props: ICardProps) => {
 
   function handleAutoplay(audio: string) {
     const player = new Audio(audio);
-    player.volume = volume / MEMORY.gameWordsMaxVolumeLevel;
+    player.volume = soundsVolume / 100;
     player.play();
   }
 

diff --git a/src/components/MemoryGame/SideMenu.tsx b/src/components/MemoryGame/SideMenu.tsx
@@ -15,11 +15,12 @@ import {
   Typography,
 } from '@material-ui/core';
 import { VolumeUp, Settings } from '@material-ui/icons';
-import { initiateGameField, setWordsVolumeLevel } from '../../store/actions/memoryGameActions';
+import { initiateGameField } from '../../store/actions/memoryGameActions';
 import { WORDBOOK_GROUPS, GAMES, MEMORY } from '../../constants';
 import { SELECT_ROUNDS } from '../GameSavannah/constants';
 import { IAppState } from '../../store/types';
 import useStyles from './styles';
+import { changeVolumeSounds } from '../../store/actions/settingsActions';
 
 type Anchor = 'left';
 
@@ -51,7 +52,7 @@ const SideMenu: React.FC = () => {
     GAMES.memory.difficulty[gameLevelFromSettings].label
   );
 
-  const wordsVolumeLevel = useSelector((state: IAppState) => state.memoryGame.wordsVolume);
+  const { soundsVolume } = useSelector((state: IAppState) => state.settings);
 
   const handleChangeGameMode = (event: React.ChangeEvent<HTMLInputElement>) => {
     setMode(event.target.checked ? 'image' : 'translation');
@@ -95,11 +96,11 @@ const SideMenu: React.FC = () => {
   };
 
   const handleVolumeLevelChange = (event: React.ChangeEvent<{}>, value: Number | Array<Number>) => {
-    dispatch(setWordsVolumeLevel(Number(value)));
+    dispatch(changeVolumeSounds(Number(value)));
   };
 
   const handleMaxVolume = () => {
-    dispatch(setWordsVolumeLevel(MEMORY.gameWordsMaxVolumeLevel));
+    dispatch(changeVolumeSounds(MEMORY.gameWordsMaxVolumeLevel));
   };
 
   useEffect(() => {
@@ -152,7 +153,7 @@ const SideMenu: React.FC = () => {
                 <Slider
                   min={MEMORY.gameWordsMinimalVolumeLevel}
                   max={MEMORY.gameWordsMaxVolumeLevel}
-                  value={wordsVolumeLevel}
+                  value={soundsVolume}
                   onChange={handleVolumeLevelChange}
                   aria-labelledby="continuous-slider"
                 />