conway-react/src/Controls.tsx

import React, { useEffect } from 'react';

interface Props {
  running: boolean;
  speed: number;
  width: number;
  height: number;
  reset: () => void;
  toggle: () => void;
  updateCellSize: (f: (size: number) => number) => void;
  updateDimensions: (dimensions: { width?: number; height?: number }) => void;
  updateSpeed: (speed: number) => void;
}

const Controls = (props: Props) => {
  const {
    running,
    speed,
    toggle,
    updateSpeed,
    width,
    height,
    reset,
    updateCellSize,
    updateDimensions,
  } = 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 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;