From d24f05d187916ec7cff54dada878789757851d2b Mon Sep 17 00:00:00 2001
From: S4-K1 <hardcastle.riley@gmail.com>
Date: Wed, 9 Nov 2022 16:31:10 +0000
Subject: [PATCH 1/9] First commit

---
 web/src/App.css                    | 4 +++-
 web/src/components/SnakeScreen.tsx | 8 ++++++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/web/src/App.css b/web/src/App.css
index 278c10b..4539e6c 100644
--- a/web/src/App.css
+++ b/web/src/App.css
@@ -26,6 +26,8 @@
   }
 }
 
-.card {
+.dualColumns {
   padding: 2em;
+  display: flex;
+  align-items: center;
 }
diff --git a/web/src/components/SnakeScreen.tsx b/web/src/components/SnakeScreen.tsx
index 17e9bde..cbbcead 100644
--- a/web/src/components/SnakeScreen.tsx
+++ b/web/src/components/SnakeScreen.tsx
@@ -6,10 +6,14 @@ function SnakeScreen() {
         <div className='App'>
           <div className='logo snake'>🐍</div>
           <h1>GDSC Snake</h1>
-          <div className="card">
+          <div className='dualColumns'>
+            <div>
+              <CanvasBoard height={200} width={400}/>
+            </div>
+            <div>
             <IncrementButton incrementBy={1} />
             <IncrementButton incrementBy={2} />
-            <CanvasBoard height={200} width={400}/>
+            </div>
           </div>
         </div>
       );

From 65bec5be1e7ac66c253172092bb40556a85e2ae4 Mon Sep 17 00:00:00 2001
From: S4-K1 <hardcastle.riley@gmail.com>
Date: Wed, 9 Nov 2022 16:52:23 +0000
Subject: [PATCH 2/9] Boop

---
 web/src/IncrementButton.tsx        | 10 ++++------
 web/src/components/SnakeScreen.tsx | 32 +++++++++++++++++-------------
 2 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/web/src/IncrementButton.tsx b/web/src/IncrementButton.tsx
index a1697f1..f46fbd1 100644
--- a/web/src/IncrementButton.tsx
+++ b/web/src/IncrementButton.tsx
@@ -1,16 +1,14 @@
-import { useState } from 'react';
+import { useState, Dispatch } from 'react';
 
 type ComponentProps = {
 	incrementBy: number;
 };
 
-function IncrementButton(props: ComponentProps) {
-	const [count, setCount] = useState(0);
-
+function IncrementButton(props: {countIncrease: Dispatch<number>, props: ComponentProps}) {
 	return (
 		<div>
-			<button onClick={() => setCount(() => count + props.incrementBy)}>
-				This button increments by {props.incrementBy}. count is {count}
+			<button onClick={() => props.countIncrease(props.props.incrementBy)}>
+				This button increments by {props.props.incrementBy}
 			</button>
 		</div>
 	);
diff --git a/web/src/components/SnakeScreen.tsx b/web/src/components/SnakeScreen.tsx
index cbbcead..e645582 100644
--- a/web/src/components/SnakeScreen.tsx
+++ b/web/src/components/SnakeScreen.tsx
@@ -2,21 +2,25 @@ import IncrementButton from '../IncrementButton';
 import CanvasBoard from './CanvasBoard';
 
 function SnakeScreen() {
-    return (
-        <div className='App'>
-          <div className='logo snake'>🐍</div>
-          <h1>GDSC Snake</h1>
-          <div className='dualColumns'>
-            <div>
-              <CanvasBoard height={200} width={400}/>
-            </div>
-            <div>
-            <IncrementButton incrementBy={1} />
-            <IncrementButton incrementBy={2} />
-            </div>
-          </div>
+  const [count, setCount] = useState(0);
+
+  setCount(() => count + countIncrease);
+
+  return (
+    <div className='App'>
+      <div className='logo snake'>🐍</div>
+      <h1>GDSC Snake</h1>
+      <div className='dualColumns'>
+        <div>
+          <CanvasBoard height={200} width={400}/>
+        </div>
+        <div>
+        <IncrementButton incrementBy={1} />
+        <IncrementButton incrementBy={2} />
         </div>
-      );
+      </div>
+    </div>
+  );
 }
 
 export default SnakeScreen;

From 6a7d35f18b43d2f3619d2c0fccbcf4ec414c9d80 Mon Sep 17 00:00:00 2001
From: Johnny Morrison-Howe <50030862+Dexyboiiii@users.noreply.github.com>
Date: Wed, 9 Nov 2022 16:55:49 +0000
Subject: [PATCH 3/9] Moved incrementbutton to components

---
 web/src/components/SnakeScreen.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/components/SnakeScreen.tsx b/web/src/components/SnakeScreen.tsx
index e645582..7556bb4 100644
--- a/web/src/components/SnakeScreen.tsx
+++ b/web/src/components/SnakeScreen.tsx
@@ -1,4 +1,4 @@
-import IncrementButton from '../IncrementButton';
+import IncrementButton from './IncrementButton';
 import CanvasBoard from './CanvasBoard';
 
 function SnakeScreen() {

From ece7a62ba3bbebe230167931c894e494df67f338 Mon Sep 17 00:00:00 2001
From: Johnny Morrison-Howe <50030862+Dexyboiiii@users.noreply.github.com>
Date: Wed, 9 Nov 2022 16:56:02 +0000
Subject: [PATCH 4/9] Moved incrementbutton to components

---
 web/src/{ => components}/IncrementButton.tsx | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename web/src/{ => components}/IncrementButton.tsx (100%)

diff --git a/web/src/IncrementButton.tsx b/web/src/components/IncrementButton.tsx
similarity index 100%
rename from web/src/IncrementButton.tsx
rename to web/src/components/IncrementButton.tsx

From 47e3937b083709f7a52533aa95fb00d86f558b2d Mon Sep 17 00:00:00 2001
From: Johnny Morrison-Howe <50030862+Dexyboiiii@users.noreply.github.com>
Date: Wed, 9 Nov 2022 16:58:20 +0000
Subject: [PATCH 5/9] Importing usestate

---
 web/src/components/IncrementButton.tsx | 2 +-
 web/src/components/SnakeScreen.tsx     | 7 +++----
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/web/src/components/IncrementButton.tsx b/web/src/components/IncrementButton.tsx
index f46fbd1..1271519 100644
--- a/web/src/components/IncrementButton.tsx
+++ b/web/src/components/IncrementButton.tsx
@@ -4,7 +4,7 @@ type ComponentProps = {
 	incrementBy: number;
 };
 
-function IncrementButton(props: {countIncrease: Dispatch<number>, props: ComponentProps}) {
+function IncrementButton(props: {countIncrease: Dispatch<number>, incrementBy: number}) {
 	return (
 		<div>
 			<button onClick={() => props.countIncrease(props.props.incrementBy)}>
diff --git a/web/src/components/SnakeScreen.tsx b/web/src/components/SnakeScreen.tsx
index 7556bb4..a94de0d 100644
--- a/web/src/components/SnakeScreen.tsx
+++ b/web/src/components/SnakeScreen.tsx
@@ -1,11 +1,10 @@
 import IncrementButton from './IncrementButton';
 import CanvasBoard from './CanvasBoard';
+import { useState } from 'react';
 
 function SnakeScreen() {
   const [count, setCount] = useState(0);
 
-  setCount(() => count + countIncrease);
-
   return (
     <div className='App'>
       <div className='logo snake'>🐍</div>
@@ -15,8 +14,8 @@ function SnakeScreen() {
           <CanvasBoard height={200} width={400}/>
         </div>
         <div>
-        <IncrementButton incrementBy={1} />
-        <IncrementButton incrementBy={2} />
+        <IncrementButton countIncrease={setCount} incrementBy={1} />
+        <IncrementButton countIncrease={setCount} incrementBy={2} />
         </div>
       </div>
     </div>

From 111f904529572c95a6fe55540da3d10dba2e7820 Mon Sep 17 00:00:00 2001
From: S4-K1 <hardcastle.riley@gmail.com>
Date: Wed, 9 Nov 2022 17:00:01 +0000
Subject: [PATCH 6/9] Remove excess

---
 web/src/components/IncrementButton.tsx | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/web/src/components/IncrementButton.tsx b/web/src/components/IncrementButton.tsx
index 1271519..5b48435 100644
--- a/web/src/components/IncrementButton.tsx
+++ b/web/src/components/IncrementButton.tsx
@@ -1,14 +1,11 @@
-import { useState, Dispatch } from 'react';
+import { Dispatch } from 'react';
 
-type ComponentProps = {
-	incrementBy: number;
-};
 
 function IncrementButton(props: {countIncrease: Dispatch<number>, incrementBy: number}) {
 	return (
 		<div>
-			<button onClick={() => props.countIncrease(props.props.incrementBy)}>
-				This button increments by {props.props.incrementBy}
+			<button onClick={() => props.countIncrease(props.incrementBy)}>
+				This button increments by {props.incrementBy}
 			</button>
 		</div>
 	);

From 40605e5c687cf35209168169eb4b9f2e0c79b651 Mon Sep 17 00:00:00 2001
From: Johnny Morrison-Howe <50030862+Dexyboiiii@users.noreply.github.com>
Date: Wed, 9 Nov 2022 17:00:18 +0000
Subject: [PATCH 7/9] Added global count

---
 web/src/components/IncrementButton.tsx | 10 +++-------
 web/src/components/SnakeScreen.tsx     |  4 ++--
 2 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/web/src/components/IncrementButton.tsx b/web/src/components/IncrementButton.tsx
index 1271519..5a4ec56 100644
--- a/web/src/components/IncrementButton.tsx
+++ b/web/src/components/IncrementButton.tsx
@@ -1,14 +1,10 @@
 import { useState, Dispatch } from 'react';
 
-type ComponentProps = {
-	incrementBy: number;
-};
-
-function IncrementButton(props: {countIncrease: Dispatch<number>, incrementBy: number}) {
+function IncrementButton(props: {count: number, countIncrease: Dispatch<number>, incrementBy: number}) {
 	return (
 		<div>
-			<button onClick={() => props.countIncrease(props.props.incrementBy)}>
-				This button increments by {props.props.incrementBy}
+			<button onClick={() => props.countIncrease(props.count + props.incrementBy)}>
+				This button increments by {props.incrementBy}
 			</button>
 		</div>
 	);
diff --git a/web/src/components/SnakeScreen.tsx b/web/src/components/SnakeScreen.tsx
index a94de0d..592d4a2 100644
--- a/web/src/components/SnakeScreen.tsx
+++ b/web/src/components/SnakeScreen.tsx
@@ -14,8 +14,8 @@ function SnakeScreen() {
           <CanvasBoard height={200} width={400}/>
         </div>
         <div>
-        <IncrementButton countIncrease={setCount} incrementBy={1} />
-        <IncrementButton countIncrease={setCount} incrementBy={2} />
+        <IncrementButton count={count} countIncrease={setCount} incrementBy={1} />
+        <IncrementButton count={count} countIncrease={setCount} incrementBy={2} />
         </div>
       </div>
     </div>

From a892db2bf1058847d618a703be719194a4a8e802 Mon Sep 17 00:00:00 2001
From: Johnny Morrison-Howe <50030862+Dexyboiiii@users.noreply.github.com>
Date: Wed, 9 Nov 2022 17:08:40 +0000
Subject: [PATCH 8/9] Score updates between button components

---
 web/src/components/IncrementButton.tsx | 4 ++--
 web/src/components/SnakeScreen.tsx     | 5 +++--
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/web/src/components/IncrementButton.tsx b/web/src/components/IncrementButton.tsx
index 989eddd..f099de5 100644
--- a/web/src/components/IncrementButton.tsx
+++ b/web/src/components/IncrementButton.tsx
@@ -1,9 +1,9 @@
 import { Dispatch } from 'react';
 
-function IncrementButton(props: {count: number, countIncrease: Dispatch<number>, incrementBy: number}) {
+function IncrementButton(props: {count: number, setCount: Dispatch<number>, incrementBy: number}) {
 	return (
 		<div>
-			<button onClick={() => props.countIncrease(props.count + props.incrementBy)}>
+			<button onClick={() => props.setCount(props.count + props.incrementBy)}>
 				This button increments by {props.incrementBy}
 			</button>
 		</div>
diff --git a/web/src/components/SnakeScreen.tsx b/web/src/components/SnakeScreen.tsx
index 592d4a2..a5dde8a 100644
--- a/web/src/components/SnakeScreen.tsx
+++ b/web/src/components/SnakeScreen.tsx
@@ -14,8 +14,9 @@ function SnakeScreen() {
           <CanvasBoard height={200} width={400}/>
         </div>
         <div>
-        <IncrementButton count={count} countIncrease={setCount} incrementBy={1} />
-        <IncrementButton count={count} countIncrease={setCount} incrementBy={2} />
+        <h1>{count}</h1>
+        <IncrementButton count={count} setCount={setCount} incrementBy={1} />
+        <IncrementButton count={count} setCount={setCount} incrementBy={2} />
         </div>
       </div>
     </div>

From 1df356dcc9a5ada02b14d6ea108c6370f7e63aa7 Mon Sep 17 00:00:00 2001
From: S4-K1 <hardcastle.riley@gmail.com>
Date: Wed, 9 Nov 2022 17:14:33 +0000
Subject: [PATCH 9/9] increaseCount added

---
 web/src/components/SnakeScreen.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/web/src/components/SnakeScreen.tsx b/web/src/components/SnakeScreen.tsx
index a94de0d..8db6a90 100644
--- a/web/src/components/SnakeScreen.tsx
+++ b/web/src/components/SnakeScreen.tsx
@@ -5,6 +5,10 @@ import { useState } from 'react';
 function SnakeScreen() {
   const [count, setCount] = useState(0);
 
+  function increaseCount(incrementNum: number) {
+    setCount(count + incrementNum);
+  }
+
   return (
     <div className='App'>
       <div className='logo snake'>🐍</div>
@@ -14,8 +18,9 @@ function SnakeScreen() {
           <CanvasBoard height={200} width={400}/>
         </div>
         <div>
-        <IncrementButton countIncrease={setCount} incrementBy={1} />
-        <IncrementButton countIncrease={setCount} incrementBy={2} />
+          <h2>Current score: {count}</h2>
+          <IncrementButton countIncrease={increaseCount} incrementBy={1} />
+          <IncrementButton countIncrease={increaseCount} incrementBy={2} />
         </div>
       </div>
     </div>