All files / components/container/SpeedInputControl SpeedInputControl.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
1x
1x
1x
 
 
1x
1x
 
 
 
 
 
1x
34x
17x
17x
17x
 
17x
 
 
 
 
 
 
 
 
 
 
17x
 
 
 
 
1x
 
import {FC, useRef} from 'react';
import RangeInput from '../../ui/RangeInput/RangeInput';
import {useDispatch, useSelector} from 'react-redux';
import {RootState} from '../../../redux/store';
import {RangeInputProps} from '../../../types/types';
import useStartEvolve from '../../../hooks/useStartEvolve';
import {gameToggleSpeed} from '../../../redux/gameSlice';
 
interface Props extends RangeInputProps {
    evolveTimeId: any,
}
 
const SpeedInputControl: FC<Props> = ({ evolveTimeId, ...props }) => {
    const {evolve, timeSpeed} = useSelector((state: RootState) => state.gameSlice);
    const dispatch = useDispatch();
    const ref = useRef<HTMLInputElement>(null);
    const startEvolve = useStartEvolve(evolveTimeId);
 
    const onChangeSpeed = (): void => {
        const range = ref.current as HTMLInputElement;
 
        dispatch(gameToggleSpeed(+range.value));
        clearTimeout(evolveTimeId.current);
 
        Iif (evolve) {
            evolveTimeId.current = setTimeout(() => startEvolve(), timeSpeed);
        }
    };
 
    return (
        <RangeInput ref={ref} {...props} onChange={onChangeSpeed} />
    );
};
 
export default SpeedInputControl;