Skip to content

Commit

Permalink
Dialog info details update
Browse files Browse the repository at this point in the history
  • Loading branch information
sadanandpai committed Mar 31, 2024
1 parent ca7ed6a commit 80100fd
Show file tree
Hide file tree
Showing 8 changed files with 146 additions and 101 deletions.
2 changes: 1 addition & 1 deletion .deepsource.toml
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
version = 1

exclude_patterns = ["docs/**", "cypress/**", "__tests__/**"]
exclude_patterns = ["docs/**", "cypress/**", "**/__tests__/**"]

[[analyzers]]
name = "javascript"
Expand Down
2 changes: 1 addition & 1 deletion cypress/utils/path.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@ export const mazes = [
'Recursive Backtracking',
'Recursive Division',
'Wilson',
'Binary',
'Ellers',
'Side Winder',
'Binary Tree',
'Labyrinth',
];

Expand Down
2 changes: 1 addition & 1 deletion src/apps/path-finder/algorithms/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -35,9 +35,9 @@ export const mazeGenerators = new Map([
{ name: 'Recursive Division', fn: generateRecursiveDivisionMaze },
],
['wilson', { name: 'Wilson', fn: generateWilsonMaze }],
['binary', { name: 'Binary', fn: generateBinaryMaze }],
['ellers', { name: 'Ellers', fn: generateEllersMaze }],
['sideWinder', { name: 'Side Winder', fn: generateSideWinderMaze }],
['binary', { name: 'Binary Tree', fn: generateBinaryMaze }],
['labyrinth', { name: 'Labyrinth', fn: generateLabyrinth }],
['random', { name: 'Random', fn: generateRandomMaze }],
]);
17 changes: 9 additions & 8 deletions src/apps/path-finder/components/controller/maze-controls.tsx
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
import { useAppDispatch, useAppSelector } from '@/host/store/hooks';
import { useState } from 'react';
import { useAppDispatch, useAppSelector } from '@/host/store/hooks';
import { Play, Trash } from 'lucide-react';
import { mazeGenerators } from '@pathFinder/algorithms';
import { mazeAlgoInfo } from '@pathFinder/components/modal-icon/modal-content';
import Modals from '@pathFinder/components/modal-icon/modals';
import { speeds } from '@pathFinder/config';
import { Speed, Status } from '@pathFinder/models';
import classes from './controller.module.scss';
import { generateMaze } from '@pathFinder/store/maze.thunk';
import { Play, Trash } from 'lucide-react';
import {
resetGrid,
setPathLength,
setVisitedCellCount,
} 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';
import classes from './controller.module.scss';

interface Props {
defaultSpeed: Speed;
Expand Down Expand Up @@ -48,7 +48,8 @@ function MazeControls({ defaultSpeed }: Props) {
}
return (
<div className={classes.operation + ' select-maze'}>
<Modals content={modelContent1} />
<Modals content={mazeAlgoInfo} />

<select
name="maze"
id="maze"
Expand Down
8 changes: 4 additions & 4 deletions src/apps/path-finder/components/controller/path-controls.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { useAppDispatch, useAppSelector } from '@/host/store/hooks';
import { useDebounce } from 'react-use';
import {
clearGrid,
setGrid,
Expand All @@ -11,13 +12,12 @@ import { useState } from 'react';
import classes from './controller.module.scss';

import { pathFinders } from '@pathFinder/algorithms';
import { pathSearchAlgoInfo } from '@pathFinder/components/modal-icon/modal-content';
import { speeds } from '@pathFinder/config';
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';
import Modals from '@pathFinder/components/modal-icon/modals';

interface Props {
defaultSpeed: Speed;
Expand Down Expand Up @@ -84,7 +84,7 @@ function PathControls({ defaultSpeed }: Props) {

return (
<div className={classes.execution + ' execution'}>
<Modals content={modelContent2} />
<Modals content={pathSearchAlgoInfo} />
<select
className={classes.pathFinder}
name="path-finder"
Expand Down
88 changes: 59 additions & 29 deletions src/apps/path-finder/components/modal-icon/modal-content.tsx
Original file line number Diff line number Diff line change
@@ -1,94 +1,124 @@
export const modelContent1 = [
export const mazeAlgoInfo = [
{
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.
Prim's algorithm is a greedy algorithm & works on spanning tree generation technique.
It creates the maze by starting with a random cell and adding the nearest cell to the current set of cells.
`,
},
{
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.
Kruskal's algorithm is a greedy algorithm & works on spanning tree generation technique.
It creates the maze by choosing random edges to connect in the entire grid provided that adding the edge does not create a cycle.
`,
},
{
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.
Recursive backtracking is a technique commonly used to generate mazes.
It works by recursively exploring the grid and backtracking when a dead end is reached.
This technique often results in mazes with long, winding corridors and a single path from the start to the finish.
`,
},
{
id: 4,
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 method results in mazes with long straight walls crossing their space, making it easier to see which areas to avoid.',
`,
},
{
id: 5,
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.
Wilson's algorithm is a random maze generation algorithm.
It creates the maze by performing a random walk until it reaches a cell that has already been visited.
Then, it backtracks and adds the path to the visited cells.
`,
},
{
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.
heading: 'Binary tree algorithm',
content: `
The binary tree algorithm is a simple method for generating mazes.
It works by dividing the grid into two halves and connecting cells in each half to create a maze.
This method results in mazes with corridors that are either vertical or horizontal, depending on the orientation of the grid.
`,
},
{
id: 6,
heading: ' Eller',
heading: ' Ellers Algorithm',
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
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',
heading: 'Sidewinder Algorithm',
content: `
The Sidewinder algorithm is a relatively simple and efficient for generating mazes.
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`,
},
{
id: 8,
heading: 'Labyrinth Algorithm',
content: `
The Labyrinth algorithm is a maze generation algorithm that works by creating a grid of cells and carving passages between them.
It is a simple and efficient algorithm that can generate mazes of varying complexity.
`,
},
{
id: 9,
heading: 'Random Algorithm',
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
The Random algorithm is a simple maze generation algorithm that works by randomly placing the walls in the grid.
It is a quick and easy way to generate mazes of varying complexity. It does not guarantee that the maze will be solvable.
`,
},
];

export const modelContent2 = [
export const pathSearchAlgoInfo = [
{
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.
Breadth-first search (BFS) algorithm that finds the shortest path between cells in a grid.
It is an uninformed search algorithm that explores all the neighbor cells at the present depth prior to moving on to the cells at the next depth level.
This algorithm uses a queue data structure to keep track of cells 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.
Depth-first search (DFS) algorithm that finds a path between cells in a grid but does not gaurantee the shortest path.
It is an uninformed search algorithm that explores as far as possible along each branch before backtracking.
It uses a stack data structure to keep track of cells 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.
A* search is an informed search algorithm that finds the shortest path between cells in a graph.
It evaluates cells by combining the cost to reach the cell with the estimated cost to reach the goal.
A* uses a heuristic function to estimate the cost to reach the goal from a given cell.
`,
},
{
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.
Greedy best-first search is an informed search algorithm that finds a path between cells in a grid but does not gaurantee the shortest path.
It prioritizes cells based solely on the estimated cost to reach the goal from the current cell.
`,
},
];
81 changes: 47 additions & 34 deletions src/apps/path-finder/components/modal-icon/modals.module.scss
Original file line number Diff line number Diff line change
@@ -1,48 +1,44 @@
@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);
backdrop-filter: blur(10px);
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;
background-color: theme.$background;
width: max(800px, 50%);
max-height: 80%;
padding: 40px 20px 20px;
border-radius: 8px;
position: relative;
margin-top: 40px;
margin-left: 20px;
margin-right: 20px;
left: 50%;
transform: translateX(-50%);
overflow-y: scroll;
cursor: pointer;
box-shadow: 0 0 10px 0 theme.$shadow2;

&::-webkit-scrollbar {
width: 8px;
}

&::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.2);
background-color: theme.$shadow1;
border-radius: 10px;
}
}

.closeButton {
position: absolute;
top: 20px;
Expand All @@ -51,30 +47,47 @@
border: none;
cursor: pointer;
font: bold;

&:hover {
transform: scale(1.2);
}
}
.contentDiv {

.body {
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;
gap: 40px;
color: theme.$base;

.contentHeading {
font-size: 20px;
line-height: 28px;
font-weight: 700;
padding-bottom: 5px;
padding-top: 6px;
}

.content {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}

.contentPara {
padding-left: 20px;
padding-right: 20px;
}
}
@media (width >= 1024px) {

@media (width >= 1200px) {
.mainModal {
display: flex;
display: block;
}
}

[data-theme='dark'] {
.closeButton {
filter: invert(1);
}
}
Loading

0 comments on commit 80100fd

Please sign in to comment.