Add generation counter

src/Board.tsx

@@ -12,6 +12,16 @@ const INITIAL_GRID = Array(DEFAULT_HEIGHT).fill(
   Array(DEFAULT_WIDTH).fill(false),
 );
 
+const INITIAL_STATE: State = {
+  grid: [...INITIAL_GRID],
+  running: false,
+  generations: 0,
+  cellSize: DEFAULT_CELL_SIZE,
+  speed: DEFAULT_SPEED,
+  width: DEFAULT_WIDTH,
+  height: DEFAULT_HEIGHT,
+};
+
 interface State {
   grid: boolean[][];
   running: boolean;
@@ -19,6 +29,7 @@ interface State {
   speed: number;
   width: number;
   height: number;
+  generations: number;
 }
 
 class Board extends React.Component<{}, State> {
@@ -26,21 +37,14 @@ class Board extends React.Component<{}, State> {
 
   constructor(props: {}) {
     super(props);
-    this.state = {
-      grid: [...INITIAL_GRID],
-      running: false,
-      cellSize: DEFAULT_CELL_SIZE,
-      speed: DEFAULT_SPEED,
-      width: DEFAULT_WIDTH,
-      height: DEFAULT_HEIGHT,
-    };
+    this.state = INITIAL_STATE;
     this.timer = null;
   }
 
   start = () => {
     this.timer = setInterval(() => {
       const grid = generateNewGrid(this.state.grid);
-      this.setState({ grid });
+      this.setState({ grid, generations: this.state.generations + 1 });
     }, this.state.speed);
   };
 
@@ -50,11 +54,8 @@ class Board extends React.Component<{}, State> {
 
   reset = () => {
     if (window.confirm('Are you sure?')) {
-      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 });
+      this.setState(INITIAL_STATE);
     }
   };
 
@@ -133,7 +134,15 @@ class Board extends React.Component<{}, State> {
   };
 
   render() {
-    const { grid, running, speed, width, height, cellSize } = this.state;
+    const {
+      cellSize,
+      generations,
+      grid,
+      height,
+      running,
+      speed,
+      width,
+    } = this.state;
 
     return (
       <div className="container">
@@ -169,6 +178,11 @@ class Board extends React.Component<{}, State> {
             ))}
           </div>
         </div>
+        <div className="counter">
+          <span>
+            {generations} generation{generations === 1 ? '' : 's'}
+          </span>
+        </div>
       </div>
     );
   }

src/index.css

@@ -142,3 +142,7 @@ code {
 .play-reset {
   justify-content: flex-end;
 }
+
+.counter {
+  padding: 1em;
+}