Merge pull request #25 from Mohdsaifulla/feat/about-algorithm-modals

feat: added about Algorithm modals

src/apps/path-finder/components/controller/maze-controls.tsx

@@ -11,6 +11,8 @@ import {
 } from '@pathFinder/store/path-finder.slice';
 import { mazeGenerators } from '@pathFinder/algorithms';
 import { speeds } from '@pathFinder/config';
+import Modals from '../modal-icon/modals';
+import { modelContent1 } from '../modal-icon/modal-content';
 
 interface Props {
   defaultSpeed: Speed;
@@ -46,6 +48,7 @@ function MazeControls({ defaultSpeed }: Props) {
   }
   return (
     <div className={classes.operation + ' select-maze'}>
+      <Modals content={modelContent1} />
       <select
         name="maze"
         id="maze"

src/apps/path-finder/components/controller/path-controls.tsx

@@ -16,6 +16,8 @@ import { Speed, Status } from '@pathFinder/models';
 import { highlightPath } from '@pathFinder/store/path.thunk';
 import { searchPath } from '@pathFinder/store/search.thunk';
 import { useDebounce } from 'react-use';
+import Modals from '../modal-icon/modals';
+import { modelContent2 } from '../modal-icon/modal-content';
 
 interface Props {
   defaultSpeed: Speed;
@@ -82,6 +84,7 @@ function PathControls({ defaultSpeed }: Props) {
 
   return (
     <div className={classes.execution + ' execution'}>
+      <Modals content={modelContent2} />
       <select
         className={classes.pathFinder}
         name="path-finder"

src/apps/path-finder/components/modal-icon/modal-content.tsx

@@ -0,0 +1,94 @@
+export const modelContent1 = [
+  {
+    id: 1,
+    heading: "Prim's Algorithm",
+    content: `
+    Prim's algorithm is a greedy algorithm that finds a minimum spanning tree for a weighted undirected graph.
+    The algorithm starts from an arbitrary vertex and grows the minimum spanning tree one edge at a time, always choosing the cheapest edge that connects a vertex in the tree to a vertex outside the tree.
+    It continues this process until all vertices are included in the minimum spanning tree.
+  `,
+  },
+  {
+    id: 2,
+    heading: "Kruskal's Algorithm",
+    content: `
+          Kruskal's algorithm is another greedy algorithm for finding a minimum spanning tree in a connected weighted graph.
+          It operates by sorting all the edges in increasing order of their weights and then repeatedly adding the smallest edge to the spanning tree, provided that adding the edge does not create a cycle.
+          It continues this process until all vertices are connected, forming a minimum spanning tree.
+        `,
+  },
+  {
+    id: 3,
+    heading: 'Recursive backtracking',
+    content: `        
+Recursive backtracking is a powerful algorithmic technique commonly used to solve problems involving exploring all possible combinations or configurations of a problem space. It is particularly well-suited for solving problems such as maze generation, Sudoku puzzles, N-queens problems, and more.
+        `,
+  },
+  {
+    id: 4,
+    heading: 'Wilson algorithm',
+    content: `
+    Wilson's algorithm typically refers to a maze generation algorithm named after David Wilson, a mathematician known for his work in probability theory and combinatorics. Wilson's algorithm is a randomized algorithm used to generate a maze, and it's particularly interesting because it doesn't rely on recursive techniques like the recursive division method.
+        `,
+  },
+  {
+    id: 5,
+    heading: 'Recursive division',
+    content: `       
+Recursive division is a technique commonly used to generate mazes. It works by recursively dividing a region into smaller subregions until certain criteria are met. This technique often results in mazes with long, winding corridors and a single path from the start to the finish.
+        `,
+  },
+  {
+    id: 6,
+    heading: ' Eller',
+    content: `      
+    Eller's algorithm, also known as Eller's maze generation algorithm, is a method for generating mazes, named after its creator, J.A. Eller. Unlike some other maze generation algorithms such as recursive division or Prim's algorithm, Eller's algorithm works by iteratively generating one row of the maze at a time, which makes it particularly efficient in terms of memory usage. It's also notable for its ability to generate mazes with horizontal passages that span the entire width of the maze
+        `,
+  },
+  {
+    id: 7,
+    heading: 'Sidewindern',
+    content: `
+    The Sidewinder algorithm is another method for generating mazes, which is relatively simple and efficient. It is named after the sidewinder snake due to the pattern it creates in the maze. The algorithm primarily works by carving passages either horizontally or vertically, resulting in a maze with a strong bias towards corridors that are mostly horizontal or mostly vertic
+        `,
+  },
+];
+
+export const modelContent2 = [
+  {
+    id: 1,
+    heading: 'Breadth-First Search (BFS)',
+    content: `
+        Breadth-first search (BFS) is an algorithm for traversing or searching tree or graph data structures.
+        It starts at the root node and explores all the neighbor nodes at the present depth prior to moving on to the nodes at the next depth level.
+        This algorithm uses a queue data structure to keep track of nodes to be explored.
+      `,
+  },
+  {
+    id: 2,
+    heading: 'Depth-First Search (DFS)',
+    content: `
+        Depth-first search (DFS) is an algorithm for traversing or searching tree or graph data structures.
+        It starts at the root node and explores as far as possible along each branch before backtracking.
+        This algorithm uses a stack data structure to keep track of nodes to be explored.
+      `,
+  },
+  {
+    id: 3,
+    heading: 'A* Search',
+    content: `
+        A* search is an informed search algorithm that finds the shortest path between nodes in a graph.
+        It evaluates nodes by combining the cost to reach the node with the estimated cost to reach the goal.
+        A* uses a heuristic function to estimate the cost to reach the goal from a given node.
+      `,
+  },
+  {
+    id: 4,
+    heading: 'Greedy Best-First Search',
+    content: `
+        Greedy best-first search is an informed search algorithm that selects the node to expand based on an evaluation function.
+        It prioritizes nodes based solely on the estimated cost to reach the goal from the current node.
+        Unlike A*, greedy best-first search does not consider the actual cost to reach the current node.
+      `,
+  },
+];

src/apps/path-finder/components/modal-icon/modals.module.scss

@@ -0,0 +1,80 @@
+@use '/src/host/styles/theme';
+.mainModal {
+  display: none;
+}
+::backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-image: linear-gradient(
+    45deg,
+    rgba(255, 255, 255, 0.5),
+    rgba(0, 0, 0, 0.5)
+  );
+  backdrop-filter: blur(7px);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1;
+}
+.infoButton {
+  display: flex;
+}
+.dialog {
+  background-color: rgb(185, 46, 46);
+  height: 80%;
+  padding: 20px;
+  border-radius: 8px;
+  position: relative;
+  margin-top: 40px;
+  margin-left: 20px;
+  margin-right: 20px;
+  overflow-y: scroll;
+  cursor: pointer;
+
+  &::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: rgba(0, 0, 0, 0.2);
+    border-radius: 10px;
+  }
+}
+.closeButton {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  font: bold;
+  &:hover {
+    transform: scale(1.2);
+  }
+}
+.contentDiv {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  color: white;
+}
+.contentHeading {
+  font-size: 20px;
+  line-height: 28px;
+  font-weight: 700;
+  padding-bottom: 5px;
+  padding-top: 6px;
+}
+.contentPara {
+  padding-left: 20px;
+  padding-right: 20px;
+}
+@media (width >= 1024px) {
+  .mainModal {
+    display: flex;
+  }
+}

src/apps/path-finder/components/modal-icon/modals.tsx

@@ -0,0 +1,43 @@
+import { useCallback, useRef } from 'react';
+import classes from './modals.module.scss';
+import { Info, X } from 'lucide-react';
+
+interface ModalItem {
+  id: number;
+  heading: string;
+  content: string;
+}
+const Modals = ({ content }: { content: ModalItem[] }) => {
+  const dialogRef = useRef<HTMLDialogElement>(null);
+
+  const handleShowModal = useCallback(() => {
+    if (dialogRef.current) {
+      dialogRef.current.showModal();
+    }
+  }, []);
+  const handleCloseModal = useCallback(() => {
+    if (dialogRef.current) {
+      dialogRef.current.close();
+    }
+  }, []);
+  return (
+    <div className={classes.mainModal}>
+      <dialog ref={dialogRef} className={classes.dialog}>
+        <button onClick={handleCloseModal} className={classes.closeButton}>
+          <X />
+        </button>
+        {content.map((item: ModalItem) => (
+          <div key={item.id} className={classes.contentDiv}>
+            <h1 className={classes.contentHeading}>{item.heading}</h1>
+            <p className={classes.contentPara}>{item.content}</p>
+          </div>
+        ))}
+      </dialog>
+      <button onClick={handleShowModal} className={classes.infoButton}>
+        <Info />
+      </button>
+    </div>
+  );
+};
+
+export default Modals;