Make width and height adjustable

src/Board.tsx

@@ -3,29 +3,29 @@ import Cell from './Cell';
 import Controls from './Controls';
 import { generateNewGrid } from './lib';
 
-interface Props {
-  width?: number;
-  height?: number;
-  speed?: number;
-}
+const DEFAULT_WIDTH = 20;
+const DEFAULT_HEIGHT = 10;
+const DEFAULT_SPEED = 500;
 
 interface State {
   grid: boolean[][];
   running: boolean;
   speed: number;
+  width: number;
+  height: number;
 }
 
-class Board extends React.Component<Props, State> {
+class Board extends React.Component<{}, State> {
   timer: NodeJS.Timeout | null;
 
-  constructor(props: Props) {
+  constructor(props: {}) {
     super(props);
-    const height = props.height ?? 10;
-    const width = props.height ?? 20;
     this.state = {
-      grid: Array(height).fill(Array(width).fill(false)),
+      grid: Array(DEFAULT_HEIGHT).fill(Array(DEFAULT_WIDTH).fill(false)),
       running: false,
-      speed: 500,
+      speed: DEFAULT_SPEED,
+      width: DEFAULT_WIDTH,
+      height: DEFAULT_HEIGHT,
     };
     this.timer = null;
   }
@@ -63,8 +63,36 @@ class Board extends React.Component<Props, State> {
     }
   };
 
+  updateDimensions = (dimensions: { width?: number; height?: number }) => {
+    if (dimensions.width) {
+      this.setState({ width: dimensions.width });
+    }
+
+    if (dimensions.height) {
+      this.setState({ height: dimensions.height });
+    }
+
+    const width = dimensions.width ?? this.state.width;
+    const height = dimensions.height ?? this.state.height;
+
+    const grid = [...this.state.grid];
+    while (grid.length < height) {
+      grid.push(Array(width).fill(false));
+    }
+
+    const newGrid = grid.map((row) => {
+      while (row.length < width) {
+        row.push(false);
+      }
+
+      return row;
+    });
+
+    this.setState({ grid: newGrid });
+  };
+
   render() {
-    const { grid, running, speed } = this.state;
+    const { grid, running, speed, width, height } = this.state;
 
     return (
       <div className="board">
@@ -72,6 +100,9 @@ class Board extends React.Component<Props, State> {
           running={running}
           speed={speed}
           toggle={this.toggleRunning}
+          width={width}
+          height={height}
+          updateDimensions={this.updateDimensions}
           updateSpeed={this.updateSpeed}
         />
         {grid.map((row, y) => (

src/Controls.tsx

@@ -3,12 +3,23 @@ import React from 'react';
 interface Props {
   running: boolean;
   speed: number;
+  width: number;
+  height: number;
   toggle: () => void;
   updateSpeed: (speed: number) => void;
+  updateDimensions: (dimensions: { width?: number; height?: number }) => void;
 }
 
 const Controls = (props: Props) => {
-  const { running, speed, toggle, updateSpeed } = props;
+  const {
+    running,
+    speed,
+    toggle,
+    updateSpeed,
+    width,
+    height,
+    updateDimensions,
+  } = props;
 
   const goSlower = () => {
     updateSpeed(speed + 100);
@@ -22,13 +33,37 @@ const Controls = (props: Props) => {
 
   return (
     <div className="controls">
-      <button onClick={toggle}>{running ? 'Pause' : 'Play'}</button>
-      <div className="speed">
-        <button onClick={goSlower}>Slower</button>
-        <button disabled={speed <= 100} onClick={goFaster}>
-          Faster
-        </button>
-        <span>{speed}ms</span>
+      <div className="controls__row --width">
+        <label>
+          Width{' '}
+          <input
+            type="number"
+            value={width}
+            onChange={(e) =>
+              updateDimensions({ width: parseInt(e.currentTarget.value, 10) })
+            }
+          />
+        </label>
+        <label>
+          Height{' '}
+          <input
+            type="number"
+            value={height}
+            onChange={(e) =>
+              updateDimensions({ height: parseInt(e.currentTarget.value, 10) })
+            }
+          />
+        </label>
+      </div>
+      <div className="controls__row">
+        <button onClick={toggle}>{running ? 'Pause' : 'Play'}</button>
+        <div className="speed">
+          <button onClick={goSlower}>Slower</button>
+          <button disabled={speed <= 100} onClick={goFaster}>
+            Faster
+          </button>
+          <span>{speed}ms</span>
+        </div>
       </div>
     </div>
   );

src/index.css

@@ -56,7 +56,7 @@ code {
 
 .controls {
   display: flex;
-  margin-bottom: 1em;
+  flex-direction: column;
   width: 100%;
 }
 
@@ -80,6 +80,11 @@ code {
   color: white;
 }
 
+.controls .controls__row {
+  display: flex;
+  margin: 1em 0;
+}
+
 .controls .speed {
   align-items: center;
   display: flex;
@@ -101,3 +106,12 @@ code {
   cursor: not-allowed;
   opacity: 0.6;
 }
+
+.--width label {
+  flex: 1;
+}
+
+.--width input {
+  border: 1px solid black;
+  font-size: 16px;
+}