adjust animation speed

shanoysinc · Jul 27, 2021 · 60572a1 · 60572a1
1 parent 8725cb8
commit 60572a1
Show file tree

Hide file tree

Showing 6 changed files with 194 additions and 171 deletions.
diff --git a/src/App.css b/src/App.css
@@ -63,8 +63,7 @@
   border-top: 1px solid hsla(0, 0%, 84%, 0.1);
   border-bottom: 1px solid hsla(0, 0%, 84%, 0.544);
   border-right: 1px solid hsla(0, 0%, 84%, 0.1);
-  animation: circle-to-square 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94)
-    forwards;
+  animation: circle-to-square 700ms forwards;
 }
 
 .arrow-right {

diff --git a/src/algorithms/graph/dijkstra.ts b/src/algorithms/graph/dijkstra.ts
@@ -1,7 +1,7 @@
 interface Distance {
   [props: string]: GridNode;
 }
-interface Path {
+export interface Path {
   [props: string]: string;
 }
 

diff --git a/src/components/grid/Grid.tsx b/src/components/grid/Grid.tsx
@@ -1,12 +1,9 @@
-import React, { memo, useState } from "react";
+import React from "react";
 import { Node } from "./components";
 import { Grid as ChakraUIGrid } from "@chakra-ui/react";
 import { grid } from "./hooks/useInitialGrid";
-import { SelectedType } from "../../state/types";
 
-export const Grid = memo(() => {
-  const [isMouseDown, setIsMouseDown] = useState(false);
-  const [selectedNode, setSelectedNode] = useState<null | SelectedType>(null);
+export const Grid = () => {
   return (
     <>
       {grid.map((row, rowIndex) => (
@@ -16,14 +13,10 @@ export const Grid = memo(() => {
               key={`${rowIndex}-${colIndex}`}
               row={rowIndex}
               col={colIndex}
-              isMouseDown={isMouseDown}
-              setIsMouseDown={setIsMouseDown}
-              selectedNode={selectedNode}
-              setSelectedNode={setSelectedNode}
             />
           ))}
         </ChakraUIGrid>
       ))}
     </>
   );
-});
+};
diff --git a/src/components/grid/components/node/Node.tsx b/src/components/grid/components/node/Node.tsx
@@ -1,129 +1,141 @@
 import React, { memo } from "react";
 import { useRecoilState, useSetRecoilState } from "recoil";
 import { NodeAtom, RoutePosAtom } from "../../../../state/pathFinder/atoms";
+import {
+  GridFuncProps,
+  useGridFunc,
+} from "../../../../state/pathFinder/useGridFunc";
+// import {
+//   useRoutePos,
+//   useRoutePosProps,
+// } from "../../../../state/pathFinder/useRoutePos";
+import {
+  useSelectedNode,
+  useSelectedNodeProps,
+} from "../../../../state/pathFinder/useSelectedNode";
 import { SelectedType } from "../../../../state/types";
 
 interface Props {
   row: number;
   col: number;
-  isMouseDown: boolean;
-  setIsMouseDown: (val: boolean) => void;
-  selectedNode: null | SelectedType;
-  setSelectedNode: (val: null | SelectedType) => void;
 }
 
-export const Node = memo(
-  ({
-    col,
-    row,
-    isMouseDown,
-    setIsMouseDown,
-    selectedNode,
-    setSelectedNode,
-  }: Props) => {
-    const [currentNode, setCurrentNode] = useRecoilState(
-      NodeAtom({ row, col })
-    );
-    const setRoutePos = useSetRecoilState(RoutePosAtom);
+const gridFuncSelector = (state: GridFuncProps) => ({
+  isMouseDown: state.isMouseDown,
+  gridFunc: state.updateFunc,
+});
+const selectedNodeSelector = (state: useSelectedNodeProps) => ({
+  selectedNode: state.selectedNode,
+  setSelectedNode: state.setSelectedNode,
+});
+// const routePosSelector = (state: useRoutePosProps) => ({
+//   setRoutePos: state.setRoutePos,
+// });
 
-    const nodeIndex = `${row}-${col}`;
+export const Node = memo(({ col, row }: Props) => {
+  const [currentNode, setCurrentNode] = useRecoilState(NodeAtom({ row, col }));
+  const setRoutePos = useSetRecoilState(RoutePosAtom);
+  const { isMouseDown, gridFunc } = useGridFunc(gridFuncSelector);
+  // const { setRoutePos } = useRoutePos(routePosSelector);
+  const { selectedNode, setSelectedNode } =
+    useSelectedNode(selectedNodeSelector);
 
-    const notStartNodeOrEndNode =
-      !currentNode.startNode && !currentNode.endNode;
-    const isSelectedNodeStartNode = selectedNode === SelectedType.startNode;
-    const isSelectedNodeEndNode = selectedNode === SelectedType.endNode;
+  const nodeIndex = `${row}-${col}`;
 
-    const handleCurrentNode = () => {
-      if (notStartNodeOrEndNode) {
-        if (currentNode.isWall) {
-          setCurrentNode((node) => ({ ...node, isWall: false }));
-        } else {
-          setCurrentNode((node) => ({ ...node, isWall: true }));
-        }
-      }
-    };
+  const notStartNodeOrEndNode = !currentNode.startNode && !currentNode.endNode;
+  const isSelectedNodeStartNode = selectedNode === SelectedType.startNode;
+  const isSelectedNodeEndNode = selectedNode === SelectedType.endNode;
 
-    const mouseDownHandler = () => {
-      if (notStartNodeOrEndNode) {
-        return setIsMouseDown(true);
+  const handleCurrentNode = () => {
+    if (notStartNodeOrEndNode) {
+      if (currentNode.isWall) {
+        setCurrentNode((node) => ({ ...node, isWall: false }));
+      } else {
+        setCurrentNode((node) => ({ ...node, isWall: true }));
       }
-      if (isSelectedNodeStartNode && currentNode.endNode) return;
-      if (isSelectedNodeEndNode && currentNode.startNode) return;
+    }
+  };
 
-      if (currentNode.startNode) {
-        setSelectedNode(SelectedType.startNode);
-      }
-      if (currentNode.endNode) {
-        setSelectedNode(SelectedType.endNode);
-      }
-    };
+  const mouseDownHandler = () => {
+    if (notStartNodeOrEndNode) {
+      return gridFunc({ isMouseDown: true });
+    }
+    if (isSelectedNodeStartNode && currentNode.endNode) return;
+    if (isSelectedNodeEndNode && currentNode.startNode) return;
 
-    const mouseUpHandler = () => {
-      if (isMouseDown) {
-        setIsMouseDown(false);
-        return;
-      }
-      if (isSelectedNodeStartNode && currentNode.endNode) return;
-      if (isSelectedNodeEndNode && currentNode.startNode) return;
+    if (currentNode.startNode) {
+      setSelectedNode(SelectedType.startNode);
+    }
+    if (currentNode.endNode) {
+      setSelectedNode(SelectedType.endNode);
+    }
+  };
 
-      if (isSelectedNodeStartNode) {
-        setRoutePos((state) => ({ ...state, sourceIndex: nodeIndex }));
-      }
-      if (isSelectedNodeEndNode) {
-        setRoutePos((state) => ({ ...state, destinationIndex: nodeIndex }));
-      }
+  const mouseUpHandler = () => {
+    if (isMouseDown) {
+      gridFunc({ isMouseDown: false });
+      return;
+    }
+    if (isSelectedNodeStartNode && currentNode.endNode) return;
+    if (isSelectedNodeEndNode && currentNode.startNode) return;
 
-      setSelectedNode(null);
-    };
+    if (isSelectedNodeStartNode) {
+      setRoutePos((pos) => ({ ...pos, sourceIndex: nodeIndex }));
+    }
+    if (isSelectedNodeEndNode) {
+      setRoutePos((pos) => ({ ...pos, destinationIndex: nodeIndex }));
+    }
 
-    const onMouseEnter = () => {
-      if (isMouseDown && notStartNodeOrEndNode) {
-        if (currentNode.isWall) {
-          setCurrentNode((node) => ({ ...node, isWall: false }));
-        }
-        if (!currentNode.isWall && notStartNodeOrEndNode) {
-          setCurrentNode((node) => ({ ...node, isWall: true }));
-        }
-        return;
-      }
-      if (isSelectedNodeStartNode && !currentNode.endNode) {
-        setCurrentNode((node) => ({ ...node, startNode: true, isWall: false }));
-      }
-      if (isSelectedNodeEndNode && !currentNode.startNode) {
-        setCurrentNode((node) => ({ ...node, endNode: true, isWall: false }));
-      }
-    };
+    setSelectedNode(null);
+  };
 
-    const onMouseOut = () => {
-      if (isSelectedNodeStartNode) {
-        setCurrentNode((node) => ({
-          ...node,
-          startNode: false,
-          isWall: false,
-        }));
+  const onMouseEnter = () => {
+    if (isMouseDown && notStartNodeOrEndNode) {
+      if (currentNode.isWall) {
+        setCurrentNode((node) => ({ ...node, isWall: false }));
       }
-      if (isSelectedNodeEndNode) {
-        setCurrentNode((node) => ({ ...node, endNode: false, isWall: false }));
+      if (!currentNode.isWall && notStartNodeOrEndNode) {
+        setCurrentNode((node) => ({ ...node, isWall: true }));
       }
-    };
+      return;
+    }
+    if (isSelectedNodeStartNode && !currentNode.endNode) {
+      setCurrentNode((node) => ({ ...node, startNode: true, isWall: false }));
+    }
+    if (isSelectedNodeEndNode && !currentNode.startNode) {
+      setCurrentNode((node) => ({ ...node, endNode: true, isWall: false }));
+    }
+  };
+
+  const onMouseOut = () => {
+    if (isSelectedNodeStartNode) {
+      setCurrentNode((node) => ({
+        ...node,
+        startNode: false,
+        isWall: false,
+      }));
+    }
+    if (isSelectedNodeEndNode) {
+      setCurrentNode((node) => ({ ...node, endNode: false, isWall: false }));
+    }
+  };
 
-    const isStartNode = currentNode.startNode ? "startNode" : "";
-    const isEndNode = currentNode.endNode ? "endNode" : "";
-    const wall = currentNode.isWall ? "wall" : "";
-    return (
-      <div
-        id={nodeIndex}
-        onClick={handleCurrentNode}
-        onMouseDown={mouseDownHandler}
-        onMouseUp={mouseUpHandler}
-        onMouseLeave={onMouseOut}
-        onMouseEnter={onMouseEnter}
-        draggable={false}
-        className={`grid__node ${isStartNode} ${isEndNode} ${wall}`}
-      >
-        {isStartNode && <div className="arrow-right"></div>}
-        {isEndNode && <div className="star">⭐</div>}
-      </div>
-    );
-  }
-);
+  const isStartNode = currentNode.startNode ? "startNode" : "";
+  const isEndNode = currentNode.endNode ? "endNode" : "";
+  const wall = currentNode.isWall ? "wall" : "";
+  return (
+    <div
+      id={nodeIndex}
+      onClick={handleCurrentNode}
+      onMouseDown={mouseDownHandler}
+      onMouseUp={mouseUpHandler}
+      onMouseLeave={onMouseOut}
+      onMouseEnter={onMouseEnter}
+      draggable={false}
+      className={`grid__node ${isStartNode} ${isEndNode} ${wall}`}
+    >
+      {isStartNode && <div className="arrow-right"></div>}
+      {isEndNode && <div className="star">⭐</div>}
+    </div>
+  );
+});
diff --git a/src/components/grid/hooks/useInitialGrid.tsx b/src/components/grid/hooks/useInitialGrid.tsx
@@ -21,13 +21,6 @@ const NUMBER_OF_COLS = 38;
 export const START_INDEX = `${START_ROW}-${START_COL}`;
 export const END_INDEX = `${END_ROW}-${END_COL}`;
 
-const initGrid = createGrid(NUMBER_OF_ROWS, NUMBER_OF_COLS);
-
-initGrid[START_ROW][START_COL].startNode = true;
-initGrid[END_ROW][END_COL].endNode = true;
-
-export const grid = initGrid;
-
 function createGrid(rows: number, cols: number) {
   const arr: GridNode[][] = [];
   for (let row = 0; row < rows; row++) {
@@ -40,6 +33,13 @@ function createGrid(rows: number, cols: number) {
   return arr;
 }
 
+const initGrid = createGrid(NUMBER_OF_ROWS, NUMBER_OF_COLS);
+
+initGrid[START_ROW][START_COL].startNode = true;
+initGrid[END_ROW][END_COL].endNode = true;
+
+export const grid = initGrid;
+
 export function useResetGrid() {
   return useRecoilCallback(({ set }) => () => {
     for (let row = 0; row < grid.length; row++) {