123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128 |
- import React, { useEffect } from 'react';
-
- interface Props {
- running: boolean;
- speed: number;
- width: number;
- height: number;
- reset: () => void;
- toggle: () => void;
- download: () => void;
- updateCellSize: (f: (size: number) => number) => void;
- updateDimensions: (dimensions: { width?: number; height?: number }) => void;
- updateSpeed: (speed: number) => void;
- upload: () => void;
- }
-
- const Controls = (props: Props) => {
- const {
- running,
- speed,
- toggle,
- updateSpeed,
- width,
- height,
- reset,
- updateCellSize,
- updateDimensions,
- download,
- upload,
- } = props;
-
- const goSlower = () => {
- updateSpeed(speed + 100);
- };
-
- const goFaster = () => {
- if (speed > 100) {
- updateSpeed(speed - 100);
- }
- };
-
- const getSmaller = () => {
- updateCellSize((size) => size - 1);
- };
-
- const getBigger = () => {
- updateCellSize((size) => size + 1);
- };
-
- useEffect(() => {
- document.addEventListener('keyup', (e) => {
- if (e.key === ' ') {
- toggle();
- }
- });
- }, [toggle]);
-
- return (
- <div className="controls">
- <div className="controls__section dimensions">
- <label>
- Width{' '}
- <input
- className="number-field"
- type="number"
- value={width}
- onChange={(e) =>
- updateDimensions({ width: parseInt(e.currentTarget.value, 10) })
- }
- />
- </label>
- <label>
- Height{' '}
- <input
- className="number-field"
- type="number"
- value={height}
- onChange={(e) =>
- updateDimensions({ height: parseInt(e.currentTarget.value, 10) })
- }
- />
- </label>
- </div>
- <div className="controls__section speed">
- <button className="button" onClick={goSlower}>
- Slower
- </button>
- <button className="button" disabled={speed <= 100} onClick={goFaster}>
- Faster
- </button>
- </div>
- <div className="controls__section size">
- <button className="button" onClick={getSmaller}>
- Smaller
- </button>
- <button className="button" onClick={getBigger}>
- Bigger
- </button>
- </div>
- <div className="controls__section import-export">
- <div className="upload">
- <button className="button" onClick={upload}>
- Import
- </button>
- </div>
- <div className="download">
- <button className="button" onClick={download}>
- Export
- </button>
- </div>
- </div>
- <div className="controls__section play-reset">
- <div className="reset">
- <button className="button" onClick={reset}>
- Reset
- </button>
- </div>
- <div className="play">
- <button className="button" onClick={toggle}>
- {running ? 'Pause' : 'Play'}
- </button>
- </div>
- </div>
- </div>
- );
- };
-
- export default Controls;
|