From fd83fcdaa0e26afd318119a89a46ddcc9e971dc7 Mon Sep 17 00:00:00 2001
From: Sverre Nystad <sverrenystad@gmail.com>
Date: Sun, 11 Aug 2024 00:29:52 +0200
Subject: [PATCH] feat: Create and add ClearGridButton to homepage

---
 .../clearGridButton/ClearGridButton.css       | 25 ++++++++++++++++++
 .../clearGridButton/ClearGridButton.tsx       | 26 +++++++++++++++++++
 .../components/startButton/StartButton.css    |  1 -
 frontend/src/pages/homePage/HomePage.tsx      |  7 ++++-
 4 files changed, 57 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/components/clearGridButton/ClearGridButton.css
 create mode 100644 frontend/src/components/clearGridButton/ClearGridButton.tsx

diff --git a/frontend/src/components/clearGridButton/ClearGridButton.css b/frontend/src/components/clearGridButton/ClearGridButton.css
new file mode 100644
index 0000000..bc25498
--- /dev/null
+++ b/frontend/src/components/clearGridButton/ClearGridButton.css
@@ -0,0 +1,25 @@
+.clear-button-container {
+    display: flex;
+    justify-content: center;
+    margin-top: 20px; 
+    
+}
+
+.clear-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0 10px; 
+    width: 60px; 
+    height: 60px; 
+    border-radius: 50%;
+    border: none; 
+    cursor: pointer; 
+    background-color: var(--ss-blue-grotto);
+
+}
+
+.play-icon {
+    width: 100%;
+    height: 100%;
+  }
\ No newline at end of file
diff --git a/frontend/src/components/clearGridButton/ClearGridButton.tsx b/frontend/src/components/clearGridButton/ClearGridButton.tsx
new file mode 100644
index 0000000..d5365fe
--- /dev/null
+++ b/frontend/src/components/clearGridButton/ClearGridButton.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import { resetGrid } from "../../services/animationService";
+import "./ClearGridButton.css";
+
+const ClearGridButton: React.FC = () => {
+    return (
+        <div className="clear-button-container">
+            <button className="clear-button" onClick={resetGrid}>
+                <svg xmlns="http://www.w3.org/2000/svg" 
+                    width="24"
+                    height="24"
+                    viewBox="0 0 24 24" 
+                    fill="none" 
+                    strokeWidth={1.8} 
+                    stroke="currentColor" 
+                    className="size-10"
+                    >
+                    <path strokeLinecap="round" strokeLinejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
+                    
+                </svg>
+            </button>
+        </div>
+    );
+}
+
+export default ClearGridButton;
\ No newline at end of file
diff --git a/frontend/src/components/startButton/StartButton.css b/frontend/src/components/startButton/StartButton.css
index a08460e..ac5320c 100644
--- a/frontend/src/components/startButton/StartButton.css
+++ b/frontend/src/components/startButton/StartButton.css
@@ -2,7 +2,6 @@
     display: flex;
     justify-content: center;
     margin-top: 20px; 
-    width: 268px;
 }
 
 .start-button {
diff --git a/frontend/src/pages/homePage/HomePage.tsx b/frontend/src/pages/homePage/HomePage.tsx
index fc515b7..b4de4aa 100644
--- a/frontend/src/pages/homePage/HomePage.tsx
+++ b/frontend/src/pages/homePage/HomePage.tsx
@@ -14,6 +14,7 @@ import AlgorithmStepSlider from "../../components/algorithmStepSlider/AlgorithmS
 import GenerateObstacleButtons from "../../components/generateObstacleButtons/GenerateObstacleButtons";
 import AlgorithmsMenu from "../../components/algorithmsMenu/AlgorithmsMenu";
 import AnimationSpeedSlider from "../../components/animationStepSlider/AnimationSpeedSlider";
+import ClearGridButton from "../../components/clearGridButton/ClearGridButton";
 
 export const mapSizeSliderSignal = signal<number>(50);
 export const animationSpeed = signal<number>(1);
@@ -72,7 +73,11 @@ const HomePage = () => {
           <AnimationSpeedSlider />
         </div>
         <StartAndEndPointsButton />
-        <StartButton />
+        <div className="flex">
+          <StartButton />
+          <ClearGridButton />
+        </div>
+        
       </div>
     </div>
   );