add reset button

stevenluongo · Feb 3, 2022 · 0de28c2 · 0de28c2
1 parent 22d9796
commit 0de28c2
Show file tree

Hide file tree

Showing 5 changed files with 96 additions and 32 deletions.
diff --git a/components/board.js b/components/board.js
@@ -9,12 +9,9 @@ import AutoFixHighIcon from '@mui/icons-material/AutoFixHigh';
 import RestartAltIcon from '@mui/icons-material/RestartAlt';
 
 function Board() {
-  const [dimensions, setDimensions] = useState({});
   const [mouseDown, setMouseDown] = useState(false);
-  const [success, setSuccess] = useState(false);
-  const [isResetting, setIsResetting] = useState(false);
 
-  const {setIsProcessingMode, board, setBoard, speed, setIsAnimating, isAnimating, colors, mode, setMode, setPreviousNode, startNode, setStartNode, finishNode, setFinishNode} = useGlobalContext();
+  const {resetBoard, success, setSuccess, dimensions, setDimensions, setIsResetting, isResetting, setIsProcessingMode, board, setBoard, speed, setIsAnimating, isAnimating, colors, mode, setMode, setPreviousNode, startNode, setStartNode, finishNode, setFinishNode} = useGlobalContext();
 
   useEffect(() => {
     const {rows, cols} = fetchDimensions();
@@ -113,30 +110,6 @@ function Board() {
 
   }
 
-  const resetBoard = () => {
-    if(isResetting) {
-      return;
-    }
-    setIsResetting(true);
-    const visitedNodes = Array.from(document.getElementsByClassName("node-visited"));
-    visitedNodes.forEach((node, idx) => {
-      setTimeout(() => {
-          node.classList.contains("node-path") && node.classList.remove('node-path');
-          node.classList.remove("node-visited")
-      }, 1 * idx);
-    });
-    setTimeout(() => {
-      const tempStartNode = {col : randomIntFromInterval(1, dimensions.cols - 1), row : randomIntFromInterval(1, dimensions.rows - 1)};
-      const tempFinishNode = {col : randomIntFromInterval(1, dimensions.cols - 1), row : randomIntFromInterval(1, dimensions.rows - 1)};
-      const board = generateBoard(dimensions.cols, dimensions.rows, tempStartNode, tempFinishNode);
-      setStartNode(tempStartNode);
-      setFinishNode(tempFinishNode)
-      setBoard(board)
-      setSuccess(false);
-      setIsResetting(false);
-    }, 1 * visitedNodes.length);
-  }
-
   const updateNode = (target) => {
     if(isAnimating) {
       return;

diff --git a/components/layout.js b/components/layout.js
@@ -1,5 +1,4 @@
-import React, { useEffect, useState } from 'react';
-import { useGlobalContext } from '../context/global-context';
+import React from 'react';
 import Board from './board';
 import SideNav from './sidenav';
 import TopNav from './topnav';

diff --git a/components/topnav.js b/components/topnav.js
@@ -4,9 +4,13 @@ import { useState } from 'react';
 import { styled } from '@mui/material/styles';
 import InputBase from '@mui/material/InputBase';
 import AutoAwesomeIcon from '@mui/icons-material/AutoAwesome';
+import { useGlobalContext } from '../context/global-context';
+import LoadingButton from '@mui/lab/LoadingButton';
+import RestartAltIcon from '@mui/icons-material/RestartAlt';
 
 export default function TopNav() {
     const [algorithm, setAlgorithm] = useState(10);
+    const {isResetting, resetBoard, isAnimating} = useGlobalContext();
 
     const handleChange = (event) => {
         setAlgorithm(event.target.value);
@@ -23,6 +27,17 @@ export default function TopNav() {
         >
           <MenuItem style={{display: 'flex', alignItems: 'center'}} value={10}><AutoAwesomeIcon style={{marginRight: '.5rem', fontSize: '1.3em'}}/>Dijkstra</MenuItem>
         </Select>
+        <VisualizeButton
+          onClick={resetBoard}
+          className="reset_button"
+          endIcon={<RestartAltIcon/> }
+          loading={isResetting}
+          loadingPosition="end"
+          variant="contained"
+          disabled={isAnimating}
+      >
+        {isResetting ? 'resetting ...' : 'Reset'}
+      </VisualizeButton>
         </div>
     );
 }
@@ -32,9 +47,11 @@ const BootstrapInput = styled(InputBase)(({ theme }) => ({
       marginTop: theme.spacing(3),
     },
     '& .MuiInputBase-input': {
+      boxShadow: '0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%)',
       borderRadius: 4,
       position: 'relative',
       display: 'flex',
+      height: 24,
       alignItems: 'center',
       backgroundColor: '#292929',
       border: '1px solid #292929',
@@ -61,4 +78,18 @@ const BootstrapInput = styled(InputBase)(({ theme }) => ({
         boxShadow: '0 0 0 0.2rem rgba(149, 110, 221, 0.1)',
       },
     },
-  }));
+  }));
+
+  const VisualizeButton = styled(LoadingButton)({
+    color: '#fff',
+    backgroundColor: '#3f22c0',
+    '&:hover': {
+      backgroundColor: '#414141',
+      borderColor: '#0062cc',
+      boxShadow: 'none',
+    },
+    '&:disabled': {
+      borderColor: '#005cbf',
+      color: '#6048ca'
+    },
+  })
diff --git a/context/global-context.js b/context/global-context.js
@@ -1,4 +1,5 @@
 import React, { useContext, useState, useEffect } from "react";
+import { generateBoard } from "../lib/board";
 
 const GlobalContext = React.createContext();
 
@@ -10,6 +11,11 @@ const DEFAULT_COLORS = {start: '#956edd', finish: '#73f2b0', wall: "#003549"};
 const DEFAULT_START_NODE = {col: 30, row: 12}
 const DEFAULT_FINISH_NODE = {col: 10, row: 8}
 
+
+function randomIntFromInterval(min, max) { // min and max included 
+    return Math.floor(Math.random() * (max - min + 1) + min)
+  }
+
 export function GlobalContextProvider({children}) {
     const [colors, setColors] = useState(DEFAULT_COLORS);
     const [loaded, setLoaded] = useState(false);
@@ -23,6 +29,34 @@ export function GlobalContextProvider({children}) {
     const [previousFinishNode, setPreviousFinishNode] = useState(null);
     const [board, setBoard] = useState([]);
     const [isProcessingMode, setIsProcessingMode] = useState(false);
+    const [isResetting, setIsResetting] = useState(false);
+    const [dimensions, setDimensions] = useState({});
+    const [success, setSuccess] = useState(false);
+
+
+    const resetBoard = () => {
+        if(isResetting) {
+            return;
+        }
+        setIsResetting(true);
+        const visitedNodes = Array.from(document.getElementsByClassName("node-visited"));
+        visitedNodes.forEach((node, idx) => {
+            setTimeout(() => {
+                node.classList.contains("node-path") && node.classList.remove('node-path');
+                node.classList.remove("node-visited")
+            }, 1 * idx);
+        });
+        setTimeout(() => {
+            const tempStartNode = {col : randomIntFromInterval(1, dimensions.cols - 1), row : randomIntFromInterval(1, dimensions.rows - 1)};
+            const tempFinishNode = {col : randomIntFromInterval(1, dimensions.cols - 1), row : randomIntFromInterval(1, dimensions.rows - 1)};
+            const board = generateBoard(dimensions.cols, dimensions.rows, tempStartNode, tempFinishNode);
+            setStartNode(tempStartNode);
+            setFinishNode(tempFinishNode)
+            setBoard(board)
+            setSuccess(false);
+            setIsResetting(false);
+        }, 1 * visitedNodes.length);
+        }
 
     const fetchSpeed = async() => {
         const local_data = await JSON.parse(localStorage.getItem('speed'));
@@ -74,7 +108,14 @@ export function GlobalContextProvider({children}) {
         previousFinishNode,
         setPreviousFinishNode,
         isProcessingMode,
-        setIsProcessingMode
+        setIsProcessingMode,
+        isResetting,
+        setIsResetting,
+        dimensions,
+        setDimensions,
+        success,
+        setSuccess,
+        resetBoard
     }
     return (
         <GlobalContext.Provider value={value}>

diff --git a/styles/_app.scss b/styles/_app.scss
@@ -170,4 +170,24 @@
         font-weight: 500;
         cursor: pointer;
     }
+}
+
+.reset_button {
+    border: 0 !important;
+    border-radius: 3px !important;
+    font-weight: 600 !important;
+    color: #fff !important;
+    cursor: pointer !important;
+    transition: background-color 0.5s ease !important;
+    text-transform: inherit !important;
+    font-family: "Inter" !important;
+    color: #cfcfcf !important;
+    height: 24 !important;
+    padding-top: 8px !important;
+    padding-bottom: 8px !important;
+    margin-left: 1rem !important;
+    background-color: #292929;
+    svg {
+        color: #cfcfcf !important;
+    }
 }