Add animation to pathfinding algorithm

* Animation makes it easier to track progress of algorithm

Author: A-Georgiou

src/components/MazeGrid.tsx

@@ -15,10 +15,11 @@ const MazeGrid: React.FC<MazeGridProps> = ({ handleMouseDown, handleMouseEnter,
     return (
         <div onMouseUp={handleMouseUp}>
             {maze.map((row, rowIndex) => (
-                <div key={rowIndex} className="pathfinding-row" id={'row-' + rowIndex}>
+                <div key={rowIndex} className="pathfinding-row wrapper" id={'row-' + rowIndex}>
                     {row.map((cell, colIndex) => (
                         <div
                             key={colIndex}
+                            className={cell.visited ? 'animate' : 'pathfinding-cell'}
                             onMouseDown={() => handleMouseDown(rowIndex, colIndex)}
                             onMouseEnter={() => handleMouseEnter(rowIndex, colIndex)}
                             style={{

src/styles/pathfinding.css

@@ -41,4 +41,20 @@
     transition: .5s;
 }
 
+@keyframes backgroundScaleIn {
+    0% {
+      transform: scale(0.2);
+    }
+    100% {
+      transform: scale(1);
+    }
+  }
+  
+  .animate {
+    position: relative;
+    animation: backgroundScaleIn .5s ease-in-out;
+  }
 
+  .wrapper{
+    background-color: white;
+  }