Allow changing speed

src/Board.tsx

@@ -12,6 +12,7 @@ interface Props {
 interface State {
   grid: boolean[][];
   running: boolean;
+  speed: number;
 }
 
 class Board extends React.Component<Props, State> {
@@ -19,11 +20,12 @@ class Board extends React.Component<Props, State> {
 
   constructor(props: Props) {
     super(props);
-    const height = props.height ?? 5;
-    const width = props.height ?? 5;
+    const height = props.height ?? 10;
+    const width = props.height ?? 20;
     this.state = {
       grid: Array(height).fill(Array(width).fill(false)),
       running: false,
+      speed: 500,
     };
     this.timer = null;
   }
@@ -56,7 +58,7 @@ class Board extends React.Component<Props, State> {
       });
 
       this.setState({ grid: newGrid });
-    }, 500);
+    }, this.state.speed);
   };
 
   stop = () => {
@@ -77,12 +79,25 @@ class Board extends React.Component<Props, State> {
     this.setState({ running: !this.state.running });
   };
 
+  updateSpeed = (speed: number) => {
+    this.setState({ speed });
+    if (this.state.running) {
+      this.stop();
+      this.start();
+    }
+  };
+
   render() {
-    const { grid, running } = this.state;
+    const { grid, running, speed } = this.state;
 
     return (
       <div className="board">
-        <Controls running={running} toggle={this.toggleRunning} />
+        <Controls
+          running={running}
+          speed={speed}
+          toggle={this.toggleRunning}
+          updateSpeed={this.updateSpeed}
+        />
         {grid.map((row, y) => (
           <div className="row" key={y}>
             {row.map((cell, x) => (

src/Controls.tsx

@@ -2,15 +2,34 @@ import React from 'react';
 
 interface Props {
   running: boolean;
+  speed: number;
   toggle: () => void;
+  updateSpeed: (speed: number) => void;
 }
 
 const Controls = (props: Props) => {
-  const { running, toggle } = props;
+  const { running, speed, toggle, updateSpeed } = props;
+
+  const goSlower = () => {
+    updateSpeed(speed + 100);
+  };
+
+  const goFaster = () => {
+    if (speed > 100) {
+      updateSpeed(speed - 100);
+    }
+  };
 
   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>
     </div>
   );
 };

src/index.css

@@ -63,13 +63,41 @@ code {
 .controls button {
   background: transparent;
   border: 1px solid black;
+  border-right: none;
   cursor: pointer;
   flex: 1;
   font-size: 18px;
   padding: 0.25em 0;
 }
 
-.controls button:hover {
+.controls button:last-child,
+.controls .speed button:last-of-type {
+  border-right: 1px solid black;
+}
+
+.controls button:not([disabled]):hover {
   background: black;
   color: white;
 }
+
+.controls .speed {
+  align-items: center;
+  display: flex;
+  flex: 1;
+  justify-content: center;
+}
+
+.controls .speed button,
+.controls .speed span {
+  flex: 1;
+}
+
+.controls .speed span {
+  font-weight: bold;
+  text-align: center;
+}
+
+.controls .speed button[disabled] {
+  cursor: not-allowed;
+  opacity: 0.6;
+}