chore-- reworking Neighbors evaluation for efficiency

src/controls/Controls.js

@@ -21,7 +21,7 @@ export default function Controls({
 }) {
   let rowsLen = gridSize;
   let colsLen = gridSize;
-  const [intervalState, setIntervalState] = useState(500);
+  const [intervalState, setIntervalState] = useState(1);
   const [isRunning, setisRunning] = useState(false);
   const [Box, setBox] = useState(null);
 
@@ -149,7 +149,6 @@ export default function Controls({
   /** sideeffects */
 
   function useInterval(callback, delay) {
-    let id;
     const savedCallback = useRef();
     useEffect(() => {
       savedCallback.current = callback;
@@ -158,16 +157,13 @@ export default function Controls({
       function tick() {
         savedCallback.current();
       }
-      if (delay != null) {
-        if (isRunning) {
-          id = setInterval(tick, delay);
-          return () => {
-            clearInterval(id);
-          };
-        }
+      if (isRunning) {
+        id = setInterval(tick, delay);
+        return () => {
+          clearInterval(id);
+        };
       }
-    }, [isRunning]);
-    // return [id]
+    }, [isRunning, delay]);
   }
 
   useInterval(() => updateGrid(), intervalState);

src/controls/Controls2.js

@@ -0,0 +1,126 @@
+import React, { useState, useEffect, useRef, useCallback } from "react";
+import Box from "../Box.js";
+import Row from "../Row.js";
+import "../styles.css";
+import StartButton from "./buttons/StartButton.js";
+import ClearButton from "./buttons/ClearButton.js";
+import RandomButton from "./buttons/RandomButton.js";
+import StopButton from "./buttons/StopButton.js";
+import SingleStepButton from "./buttons/SingleStepButton";
+import SizeSlider from "./sliders/SizeSlider";
+import SpeedSlider from "./sliders/SpeedSlider";
+import Presets from "./Presets.js";
+
+export default function Controls({
+  gen,
+  setGen,
+  gridSize,
+  setGridSize,
+  setPopulated2dArray,
+  populated2dArray,
+  gridType
+}) {
+  let rowsLen = gridSize;
+  let colsLen = gridSize;
+  const [intervalState, setIntervalState] = useState(1);
+  const [isRunning, setisRunning] = useState(false);
+  const [Box, setBox] = useState(null);
+
+  useEffect(() => {
+    setPopulated2dArray(populateClearGrid(createDoubleArr(rowsLen, colsLen)));
+  }, [gridSize]);
+
+  const [rows, cols] = useCallback(
+    (rowsLen) => {
+      let rs = [];
+      let cs = [];
+      for (let r = 0; r < rowsLen; r++) {
+        rs.push(0);
+        cs.push(0);
+      }
+      return [rs, cs];
+    },
+    [rowsLen]
+  );
+
+  // initial gridHash  either all empty or randomized 0s & 1s
+  // runs on 1st page load & if rows, cols, or gridType is updated
+
+  const gridHash = useCallback(
+    (rows, cols, gridType) => {
+      let newGrid = {};
+      if (gridType === "random") {
+        for (let row in rows) {
+          for (let col in cols) {
+            let randomNum = Math.floor(Math.random() * 2);
+            newGrid[`${row}_${col}`] = randomNum;
+          }
+        }
+      }
+      if (gridType === "empty") {
+        for (let row in rows) {
+          for (let col in cols) {
+            newGrid[`${row}_${col}`] = [(value: 0), (nbrs: [])];
+          }
+        }
+      }
+      return newGrid;
+    },
+    [rows, cols, gridType]
+  );
+
+  function checkNbrs(hash) {
+    let hash2 = { ...hash };
+
+    for (let box in hash) {
+      let [row, col] = box.split("_");
+      let liveNBRS;
+      let nbrs = [
+        hash[`${+row - 1}_${+col - 1}`],
+        hash[`${+row}_${+col - 1}`],
+        hash[`${+row + 1}_${+col - 1}`],
+        hash[`${+row - 1}_${+col}`],
+        hash[`${+row + 1}_${+col}`],
+        hash[`${+row - 1}_${+col + 1}`],
+        hash[`${+row}_${+col + 1}`],
+        hash[`${+row + 1}_${+col + 1}`]
+      ];
+      if (row == 0 && col == 0) {
+        liveNBRS = nbrs[4] + nbrs[6] + nbrs[7];
+      } else if (row == rowsLen - 1 && col == rowsLen - 1) {
+        liveNBRS = nbrs[0] + nbrs[1] + nbrs[3];
+      } else if (row == 0) {
+        liveNBRS = nbrs[3] + nbrs[4] + nbrs[5] + nbrs[6] + nbrs[7];
+      } else if (row == rowsLen - 1) {
+        liveNBRS = nbrs[0] + nbrs[1] + nbrs[2] + nbrs[3] + nbrs[4];
+      } else if (col == 0) {
+        liveNBRS = nbrs[1] + nbrs[2] + nbrs[4] + nbrs[6] + nbrs[7];
+      } else if (col == colsLen - 1) {
+        liveNBRS = nbrs[0] + nbrs[1] + nbrs[3] + nbrs[5] + nbrs[6];
+      } else {
+        liveNBRS =
+          nbrs[0] +
+          nbrs[1] +
+          nbrs[2] +
+          nbrs[3] +
+          nbrs[4] +
+          nbrs[5] +
+          nbrs[6] +
+          nbrs[7];
+      }
+
+      if (liveNBRS == 3 || (hash[box] == 1 && liveNBRS == 2)) {
+        hash2[box] = 1;
+      } else {
+        hash2[box] = 0;
+      }
+    }
+    hash = { ...hash2 };
+    return [hash];
+  }
+
+  const hashUpdated = checkNbrs(gridHash);
+
+  return;
+  <></>;
+}

src/controls/buttons/StopButton.js

@@ -4,7 +4,7 @@ export default function StopButton({ setisRunning, setIntervalState }) {
   // this.stopGame===
   function stopGame() {
     setisRunning(false);
-    setIntervalState(null);
+    // setIntervalState(null);
   }
   return (
     <>
@@ -20,7 +20,7 @@ export default function StopButton({ setisRunning, setIntervalState }) {
           borderRadius: "14px",
           textShadow: "-.74px .74px 2.7px darkred,-.77px -.7px .74px white",
           boxShadow:
-            "-.7px 1.7px .7px .1px black, -1.7px 1.7px 1.7px .17px darkred",
+            "-.7px 1.7px .7px .1px black, -1.7px 1.7px 1.7px .17px darkred"
         }}
         onClick={() => stopGame()}
       >

src/controls/sliders/SpeedSlider.js

@@ -7,7 +7,7 @@ export default function SpeedSlider({ intervalState, setIntervalState }) {
   }
   let min,
     stepSize = 0.25;
-  let dl = ["1/4", "1/2", 0.75, "1.0", 1.25, 1.5, 1.75, 2.0];
+  let dl = ["1/4", "1/2", "0.75", "1.0", "1.25", "1.5", "1.75", "2.0"];
   let the_real_dl = [1, 2, 3, 4, 5, 6, 7, 8];
 
   return (