Allow decreasing grid dimensions

src/Board.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import Cell from './Cell';
 import Controls from './Controls';
-import { generateNewGrid } from './lib';
+import { generateNewGrid, updateGridDimensions } from './lib';
 
 const DEFAULT_WIDTH = 20;
 const DEFAULT_HEIGHT = 10;
@@ -80,23 +80,13 @@ class Board extends React.Component<{}, State> {
       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;
-    });
+    const grid = updateGridDimensions(
+      { width: this.state.width, height: this.state.height },
+      dimensions,
+      this.state.grid,
+    );
 
-    this.setState({ grid: newGrid });
+    this.setState({ grid });
   };
 
   render() {

src/lib.ts

@@ -62,3 +62,49 @@ export const getNeighbors = (
 
   return neighbors;
 };
+
+export const updateGridDimensions = (
+  oldDimensions: {
+    width: number;
+    height: number;
+  },
+  newDimensions: { width?: number; height?: number },
+  grid: boolean[][],
+): boolean[][] => {
+  const width = newDimensions.width ?? oldDimensions.width;
+  const height = newDimensions.height ?? oldDimensions.height;
+
+  grid = [...grid];
+
+  if (height > oldDimensions.height) {
+    while (grid.length < height) {
+      grid.push(Array(width).fill(false));
+    }
+  } else if (height < oldDimensions.height) {
+    while (grid.length > height) {
+      if (grid.length <= 1) break;
+      grid.pop();
+    }
+  }
+
+  if (width > oldDimensions.width) {
+    grid = grid.map((row) => {
+      while (row.length < width) {
+        row.push(false);
+      }
+
+      return row;
+    });
+  } else if (width < oldDimensions.width) {
+    grid = grid.map((row) => {
+      while (row.length > width) {
+        if (row.length <= 1) break;
+        row.pop();
+      }
+
+      return row;
+    });
+  }
+
+  return grid;
+};