Reset button stops the game

src/Board.tsx

@@ -3,9 +3,10 @@ import Cell from './Cell';
 import Controls from './Controls';
 import { generateNewGrid, updateGridDimensions } from './lib';
 
-const DEFAULT_WIDTH = 20;
-const DEFAULT_HEIGHT = 10;
-const DEFAULT_SPEED = 500;
+const DEFAULT_WIDTH = 30;
+const DEFAULT_HEIGHT = 20;
+const DEFAULT_SPEED = 100;
+const DEFAULT_CELL_SIZE = 30;
 
 const INITIAL_GRID = Array(DEFAULT_HEIGHT).fill(
   Array(DEFAULT_WIDTH).fill(false),
@@ -14,6 +15,7 @@ const INITIAL_GRID = Array(DEFAULT_HEIGHT).fill(
 interface State {
   grid: boolean[][];
   running: boolean;
+  cellSize: number;
   speed: number;
   width: number;
   height: number;
@@ -27,6 +29,7 @@ class Board extends React.Component<{}, State> {
     this.state = {
       grid: [...INITIAL_GRID],
       running: false,
+      cellSize: DEFAULT_CELL_SIZE,
       speed: DEFAULT_SPEED,
       width: DEFAULT_WIDTH,
       height: DEFAULT_HEIGHT,
@@ -47,6 +50,10 @@ class Board extends React.Component<{}, State> {
 
   reset = () => {
     this.setState({ grid: [...INITIAL_GRID] });
+    this.stop();
+    this.setState({ running: false });
+    this.setState({ cellSize: DEFAULT_CELL_SIZE });
+    this.setState({ width: DEFAULT_WIDTH, height: DEFAULT_HEIGHT });
   };
 
   toggleCell = (x: number, y: number) => {
@@ -71,6 +78,10 @@ class Board extends React.Component<{}, State> {
     }
   };
 
+  updateCellSize = (f: (size: number) => number) => {
+    this.setState({ cellSize: f(this.state.cellSize) });
+  };
+
   updateDimensions = (dimensions: { width?: number; height?: number }) => {
     if (dimensions.width) {
       this.setState({ width: dimensions.width });
@@ -90,16 +101,17 @@ class Board extends React.Component<{}, State> {
   };
 
   render() {
-    const { grid, running, speed, width, height } = this.state;
+    const { grid, running, speed, width, height, cellSize } = this.state;
 
     return (
       <div className="container">
         <Controls
           running={running}
           speed={speed}
-          toggle={this.toggleRunning}
           width={width}
           height={height}
+          toggle={this.toggleRunning}
+          updateCellSize={this.updateCellSize}
           updateDimensions={this.updateDimensions}
           updateSpeed={this.updateSpeed}
           reset={this.reset}
@@ -107,12 +119,13 @@ class Board extends React.Component<{}, State> {
         <div className="board-container">
           <div className="board">
             {grid.map((row, y) => (
-              <div className="row" key={y}>
+              <div className="row" key={y} style={{ height: cellSize }}>
                 {row.map((cell, x) => (
                   <Cell
                     disabled={running}
                     x={x}
                     y={y}
+                    cellSize={cellSize}
                     alive={cell}
                     toggle={this.toggleCell}
                     key={x}

src/Cell.tsx

@@ -6,16 +6,18 @@ interface Props {
   alive: boolean;
   disabled: boolean;
   toggle: (x: number, y: number) => void;
+  cellSize: number;
 }
 
 const Cell = (props: Props) => {
-  const { alive, toggle, x, y, disabled } = props;
+  const { alive, toggle, x, y, disabled, cellSize } = props;
   return (
     <span
       onClick={() => (disabled ? null : toggle(x, y))}
       className={`cell ${alive ? 'alive' : 'dead'} ${
         disabled ? 'nonclickable' : 'clickable'
       }`}
+      style={{ width: `${cellSize}px`, height: `${cellSize}px` }}
     ></span>
   );
 };

src/Controls.tsx

@@ -7,8 +7,9 @@ interface Props {
   height: number;
   reset: () => void;
   toggle: () => void;
-  updateSpeed: (speed: number) => void;
+  updateCellSize: (f: (size: number) => number) => void;
   updateDimensions: (dimensions: { width?: number; height?: number }) => void;
+  updateSpeed: (speed: number) => void;
 }
 
 const Controls = (props: Props) => {
@@ -20,6 +21,7 @@ const Controls = (props: Props) => {
     width,
     height,
     reset,
+    updateCellSize,
     updateDimensions,
   } = props;
 
@@ -33,6 +35,14 @@ const Controls = (props: Props) => {
     }
   };
 
+  const getSmaller = () => {
+    updateCellSize((size) => size - 1);
+  };
+
+  const getBigger = () => {
+    updateCellSize((size) => size + 1);
+  };
+
   useEffect(() => {
     document.addEventListener('keyup', (e) => {
       if (e.key === ' ') {
@@ -75,6 +85,14 @@ const Controls = (props: Props) => {
           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}>

src/index.css

@@ -91,11 +91,12 @@ code {
   margin: 0.5em 0;
 }
 
+.size,
 .speed {
   align-items: center;
   display: flex;
   flex: 1;
-  justify-content: flex-end;
+  justify-content: center;
 }
 
 .button[disabled] {