Make it go

src/Board.tsx

@@ -1,46 +1,105 @@
-import React, { useState } from 'react';
+import React from 'react';
 import Cell from './Cell';
 import Controls from './Controls';
+import { countLivingNeighbors } from './lib';
 
 interface Props {
   width?: number;
   height?: number;
+  speed?: number;
 }
 
-const Board = (props: Props) => {
-  const width = props.width ?? 5;
-  const height = props.height ?? 5;
+interface State {
+  grid: boolean[][];
+  running: boolean;
+}
+
+class Board extends React.Component<Props, State> {
+  timer: NodeJS.Timeout | null;
+
+  constructor(props: Props) {
+    super(props);
+    const height = props.height ?? 5;
+    const width = props.height ?? 5;
+    this.state = {
+      grid: Array(height).fill(Array(width).fill(false)),
+      running: false,
+    };
+    this.timer = null;
+  }
+
+  start = () => {
+    this.timer = setInterval(() => {
+      console.log('Iterating');
+      const { grid } = this.state;
+      const newGrid = [...grid].map((row, y) => {
+        const newRow = [...row].map((cell, x) => {
+          const isAlive = cell;
+          const livingNeighbors = countLivingNeighbors(grid, x, y);
+
+          if (isAlive) {
+            if (livingNeighbors === 2 || livingNeighbors === 3) {
+              return true;
+            } else {
+              return false;
+            }
+          } else {
+            if (livingNeighbors === 3) {
+              return true;
+            }
+          }
 
-  const initialGrid: boolean[][] = Array(height).fill(Array(width).fill(false));
+          return isAlive;
+        });
 
-  const [grid, setGrid] = useState<boolean[][]>(initialGrid);
+        return newRow;
+      });
 
-  const [running, setRunning] = useState<boolean>(false);
+      this.setState({ grid: newGrid });
+    }, 500);
+  };
+
+  stop = () => {
+    if (this.timer) clearInterval(this.timer);
+  };
 
-  const toggleCell = (x: number, y: number) => {
-    const newGrid = [...grid];
+  toggleCell = (x: number, y: number) => {
+    const newGrid = [...this.state.grid];
     const newRow = [...newGrid[y]];
     newRow[x] = !newGrid[y][x];
     newGrid[y] = newRow;
-    setGrid(newGrid);
+    this.setState({ grid: newGrid });
   };
 
-  const toggleRunning = () => {
-    setRunning(!running);
+  toggleRunning = () => {
+    if (this.state.running) this.stop();
+    if (!this.state.running) this.start();
+    this.setState({ running: !this.state.running });
   };
 
-  return (
-    <div className="board">
-      <Controls running={running} toggle={toggleRunning} />
-      {grid.map((row, y) => (
-        <div className="row" key={y}>
-          {row.map((cell, x) => (
-            <Cell x={x} y={y} alive={cell} toggle={toggleCell} key={x} />
-          ))}
-        </div>
-      ))}
-    </div>
-  );
-};
+  render() {
+    const { grid, running } = this.state;
+
+    return (
+      <div className="board">
+        <Controls running={running} toggle={this.toggleRunning} />
+        {grid.map((row, y) => (
+          <div className="row" key={y}>
+            {row.map((cell, x) => (
+              <Cell
+                disabled={running}
+                x={x}
+                y={y}
+                alive={cell}
+                toggle={this.toggleCell}
+                key={x}
+              />
+            ))}
+          </div>
+        ))}
+      </div>
+    );
+  }
+}
 
 export default Board;

src/Cell.tsx

@@ -3,16 +3,19 @@ import React from 'react';
 interface Props {
   x: number;
   y: number;
-  alive?: boolean;
+  alive: boolean;
+  disabled: boolean;
   toggle: (x: number, y: number) => void;
 }
 
 const Cell = (props: Props) => {
-  const { alive, toggle, x, y } = props;
+  const { alive, toggle, x, y, disabled } = props;
   return (
     <span
-      onClick={() => toggle(x, y)}
-      className={`cell ${alive ? 'alive' : 'dead'}`}
+      onClick={() => (disabled ? null : toggle(x, y))}
+      className={`cell ${alive ? 'alive' : 'dead'} ${
+        disabled ? 'nonclickable' : 'clickable'
+      }`}
     ></span>
   );
 };

src/index.css

@@ -50,6 +50,10 @@ code {
   background: black;
 }
 
+.cell.clickable {
+  cursor: pointer;
+}
+
 .controls {
   display: flex;
   margin-bottom: 1em;

src/lib.ts

@@ -0,0 +1,39 @@
+export const countLivingNeighbors = (
+  grid: boolean[][],
+  x: number,
+  y: number,
+): number => {
+  return getNeighbors(grid, x, y).filter((el) => el).length;
+};
+
+export const getNeighbors = (
+  grid: boolean[][],
+  x: number,
+  y: number,
+): boolean[] => {
+  const neighbors = [];
+  const height = grid.length;
+  const width = grid[0].length;
+
+  const isNotOnTopRow = y > 0;
+  const isNotOnFarLeftRow = x > 0;
+  const isNotOnBottomRow = y < height - 1;
+  const isNotOnFarRightRow = x < width - 1;
+
+  if (isNotOnTopRow) {
+    neighbors.push(grid[y - 1][x]); // N
+    if (isNotOnFarLeftRow) neighbors.push(grid[y - 1][x - 1]); // NW
+    if (isNotOnFarRightRow) neighbors.push(grid[y - 1][x + 1]); // NE
+  }
+
+  if (isNotOnFarLeftRow) neighbors.push(grid[y][x - 1]); // W
+  if (isNotOnFarRightRow) neighbors.push(grid[y][x + 1]); // E
+
+  if (isNotOnBottomRow) {
+    neighbors.push(grid[y + 1][x]); // S
+    if (isNotOnTopRow) neighbors.push(grid[y + 1][x - 1]); // SW
+    if (isNotOnFarRightRow) neighbors.push(grid[y + 1][x + 1]); // SE
+  }
+
+  return neighbors;
+};