From c4e22b9d5eb24d79f9da56d160d5dce3215894ff Mon Sep 17 00:00:00 2001
From: James 'Tucker' Wray <tuckerwray84@gmail.com>
Date: Mon, 7 Dec 2020 22:08:17 -0500
Subject: [PATCH 1/2] initial commit

---
 src/App.js | 34 ++++++++++++++++------------------
 1 file changed, 16 insertions(+), 18 deletions(-)

diff --git a/src/App.js b/src/App.js
index 2c4307c..fb8ae3f 100644
--- a/src/App.js
+++ b/src/App.js
@@ -44,22 +44,20 @@ export default function App() {
       <Route exact path="/rules" component={Rules} />
       <Route exact path="/about" component={About} />
 
-      <section className="about">
-        <Controls
-          className="section--Controls"
-          updateBox={updateBox}
-          gen={gen}
-          setGen={setGen}
-          gridSize={gridSize}
-          setGridSize={setGridSize}
-          populated2dArray={populated2dArray}
-          setPopulated2dArray={setPopulated2dArray}
-        />
-      </section>
-
-      <section className="section--Grid">
-        <Route exact path="/">
-          {" "}
+      <Route exact path="/">
+        <section className="about">
+          <Controls
+            className="section--Controls"
+            updateBox={updateBox}
+            gen={gen}
+            setGen={setGen}
+            gridSize={gridSize}
+            setGridSize={setGridSize}
+            populated2dArray={populated2dArray}
+            setPopulated2dArray={setPopulated2dArray}
+          />
+        </section>
+        <section className="section--Grid">
           <Grid
             updateBox={updateBox}
             gen={gen}
@@ -69,8 +67,8 @@ export default function App() {
             populated2dArray={populated2dArray}
             setPopulated2dArray={setPopulated2dArray}
           />
-        </Route>
-      </section>
+        </section>
+      </Route>
     </>
   );
 }

From f23cbe69d8a27e7ed46a06827a303d44f8eb72b3 Mon Sep 17 00:00:00 2001
From: James 'Tucker' Wray <tuckerwray84@gmail.com>
Date: Mon, 7 Dec 2020 22:12:09 -0500
Subject: [PATCH 2/2] feat-- update grid when !isRunning - pass in an isRunning
 prop to lowest level cell aka Box.js onClick a cell and be updated to
 opposite state on/off but only if isRunning is false

- will wire isRunning in from the controls panel
---
 src/Box.js | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/Box.js b/src/Box.js
index 70fcdea..ea1be4a 100644
--- a/src/Box.js
+++ b/src/Box.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect,useRef } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import "./styles.css";
 
 export default function Box({
@@ -7,21 +7,22 @@ export default function Box({
   coli,
   ri,
   populated2dArray,
-  updateBox
+  updateBox,
+  isRunning
 }) {
   let boxWidth = 100 / gridSize;
-let fontSize=`${boxWidth*20}%`;
+  let fontSize = `${boxWidth * 20}%`;
   return (
     <div
       className="box"
-      style={{fontSize,
+      style={{
+        fontSize,
         width: `${boxWidth}`,
-        ...(box===1&&{background:'black',color:'yellow'}),
-        ...(box===0&&{background:'yellow',color:'black'})
+        ...(box === 1 && { background: "black", color: "yellow" }),
+        ...(box === 0 && { background: "yellow", color: "black" })
       }}
       onClick={() => {
-        updateBox(populated2dArray, ri,coli);
-
+        !isRunning && updateBox(populated2dArray, ri, coli);
       }}
     >
       {box}