Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 34x 17x 17x 17x 17x 17x 17x 17x 1x 17x 1x 17x 1x | import {FC, useRef} from 'react';
import styles from './Interface.module.scss';
import cn from 'clsx';
import Button from '../../ui/Button/Button';
import RadioButton from '../../ui/RadioButton/RadioButton';
import {
gameToggleGrid, gameToggleTheme
} from '../../../redux/gameSlice';
import {useDispatch, useSelector} from 'react-redux';
import {RootState} from '../../../redux/store';
import ButtonSize from '../ButtonSize/ButtonSize';
import usePauseEvolve from '../../../hooks/usePauseEvolve';
import useStartEvolve from '../../../hooks/useStartEvolve';
import useEvolve from '../../../hooks/useEvolve';
import useResetGame from '../../../hooks/useResetGame';
import SpeedInputControl from '../SpeedInputControl/SpeedInputControl';
import Tooltip from "../../ui/Tooltip/Tooltip";
interface Props {
onCreate: () => void,
toggleHelp: () => void
}
const GameInterface: FC<Props> = ({onCreate, toggleHelp}) => {
const {
evolve,
theme,
start,
shape,
color,
activeShape,
grid
} = useSelector((state: RootState) => state.gameSlice);
const evolveTimeId = useRef<any>(null);
const dispatch = useDispatch();
const pauseEvolve = usePauseEvolve(evolveTimeId);
const startEvolve = useStartEvolve(evolveTimeId);
const onEvolve = useEvolve(pauseEvolve, startEvolve);
const onReset = useResetGame(pauseEvolve);
const onToggleTheme = (): void => {
dispatch(gameToggleTheme(!theme));
};
const onChangeGrid = (): void => {
dispatch(gameToggleGrid());
};
return (
<div className={styles['game-interface']}>
<div className={styles.giSizes}>
<div className={styles.giRow}>
<div className={styles.giCol}>
<ButtonSize id={'1x'} size={'10_20'} title={'Размер поля 10 на 20'} color={color} onCreate={onCreate} evolveTimeId={evolveTimeId}>1x</ButtonSize>
</div>
<div className={styles.giCol}>
<ButtonSize id={'2x'} size={'15_30'} title={'Размер поля 15 на 30'} color={color} onCreate={onCreate} evolveTimeId={evolveTimeId}>2x</ButtonSize>
</div>
<div className={styles.giCol}>
<ButtonSize id={'3x'} size={'30_60'} title={'Размер поля 30 на 60'} color={color} onCreate={onCreate} evolveTimeId={evolveTimeId}>3x</ButtonSize>
</div>
</div>
</div>
<div className={styles.giRow}>
<div className={styles.giCol}>
<Tooltip placement={'top'} content={<>Создать клетки</>}>
<Button id={'create'} color={color} onClick={onCreate} disabled={evolve}>Create</Button>
</Tooltip>
</div>
<div className={styles.giCol}>
<Tooltip placement={'top'} content={<>Запустить движение</>}>
<Button id={'evolve'} color={color} onClick={onEvolve} disabled={!start && !activeShape}>{evolve ? 'Stop' : 'Evolve'}</Button>
</Tooltip>
</div>
<div className={styles.giCol}>
<Tooltip placement={'top'} content={<>Очистить поле</>}>
<Button id={'reset'} color={color} onClick={onReset} disabled={!start && !activeShape}>Reset</Button>
</Tooltip>
</div>
<div className={styles.giCol}>
<Tooltip placement={'top'} content={<>Регулировать скорость клеток</>}>
<SpeedInputControl id={'speedInput'} evolveTimeId={evolveTimeId} min={50} max={350} step={1} title={''} />
</Tooltip>
</div>
<div className={styles.giCol}>
<ul className={styles.giList}>
<li className={styles.giListItem}>
<RadioButton id={'square'} type={'square'} color={color} title={'Квадратные клетки'} name={'grid_type'} />
</li>
<li className={styles.giListItem}>
<RadioButton id={'circle'} type={'circle'} color={color} title={'Круглые клетки'} name={'grid_type'} />
</li>
<li className={styles.giListItem}>
<RadioButton id={'triangle'} type={'triangle'} color={color} title={'Треугольные клетки'} name={'grid_type'} />
</li>
</ul>
</div>
<div className={styles.giCol}>
<Tooltip placement={'top'} content={<>Убрать сетку</>}>
<Button id={'btnGrid'} color={color} onClick={onChangeGrid} >Grid {grid ? 'on' : 'off'}</Button>
</Tooltip>
</div>
<div className={styles.giCol}>
<Tooltip placement={'top'} content={<>Переключить тему</>}>
<Button id={'btnMode'} color={color} onClick={onToggleTheme}>{theme ? 'Dark' : 'Light'} mode</Button>
</Tooltip>
</div>
<div className={styles.giCol}>
<ul className={cn(styles.giList, styles.giListColors)}>
<li className={styles.giListItem}>
<RadioButton type={shape} id={'purple'} color={'purple'} title={'Purple cells'} name={'color_type'} />
</li>
<li className={styles.giListItem}>
<RadioButton type={shape} id={'pink'} color={'pink'} title={'Pink cells'} name={'color_type'}/>
</li>
<li className={styles.giListItem}>
<RadioButton type={shape} id={'blue'} color={'blue'} title={'Blue cells'} name={'color_type'} />
</li>
<li className={styles.giListItem}>
<RadioButton type={shape} id={'green'} color={'green'} title={'Green cells'} name={'color_type'} />
</li>
<li className={styles.giListItem}>
<RadioButton type={shape} id={'yellow'} color={'yellow'} title={'Yellow cells'} name={'color_type'} />
</li>
<li className={styles.giListItem}>
<RadioButton type={shape} id={'white'} color={'white'} title={'White cells'} name={'color_type'} />
</li>
<li className={styles.giListItem}>
<RadioButton id={'emoji'} color={'emoji'} title={'Type emoji or character for cells'} name={'color_type'} />
</li>
</ul>
</div>
</div>
<div className={styles.giRow}>
<div className={styles.giCol}>
<Tooltip placement={'top'} content={<>Легенда</>}>
<Button id={'btnHelp'} color={color} onClick={toggleHelp}>Help</Button>
</Tooltip>
</div>
</div>
</div>
);
};
export default GameInterface;
|