Minor config changes

src/apps/path-finder/__tests__/algorithms/maze-generator/recursive-division.spec.ts

@@ -0,0 +1,28 @@
+import {
+  getRandomEvenNumber,
+  getRandomOddNumber,
+} from '@/apps/path-finder/algorithms/maze-generator/recursive-division';
+
+describe('Recursive Division', () => {
+  it('getRandomEvenNumber', () => {
+    for (let i = 0; i < 100; i++) {
+      const min = Math.floor(Math.random() * 20);
+      const max = min + Math.floor(Math.random() * 20) + 1;
+      const number = getRandomEvenNumber(min, max);
+      expect(number).toBeGreaterThanOrEqual(min);
+      expect(number).toBeLessThanOrEqual(max);
+      expect(number % 2).toBe(0);
+    }
+  });
+
+  it('getRadomOddNumber', () => {
+    for (let i = 0; i < 100; i++) {
+      const min = Math.floor(Math.random() * 20);
+      const max = min + Math.floor(Math.random() * 20) + 1;
+      const number = getRandomOddNumber(min, max);
+      expect(number).toBeGreaterThanOrEqual(min);
+      expect(number).toBeLessThanOrEqual(max);
+      expect(number % 2).toBe(1);
+    }
+  });
+});

src/apps/path-finder/algorithms/path-finder/a-star.tsx

@@ -128,7 +128,7 @@ export async function aStar({
 
     open.splice(idx, 1);
     closed.add(minCostCell);
-    await updateCells(grid, minCostCell, CellType.fill);
+    await updateCells(grid, minCostCell, CellType.visited);
     exploreNeighbors(grid, costGrid, open, closed, parents, minCostCell, exit);
   }
 

src/apps/path-finder/algorithms/path-finder/bfs.tsx

@@ -83,7 +83,7 @@ export async function breadthFirstSearch({
       }
 
       if (grid[value.row][value.col] === CellType.clear) {
-        await updateCells(grid, value, CellType.fill);
+        await updateCells(grid, value, CellType.visited);
       }
     }
   }

src/apps/path-finder/algorithms/path-finder/dfs.tsx

@@ -30,7 +30,7 @@ export async function depthFirstSearch({
     }
 
     if (parentCol !== -1 && parentRow !== -1) {
-      await updateCells(grid, { row, col }, CellType.fill);
+      await updateCells(grid, { row, col }, CellType.visited);
     }
 
     return (

src/apps/path-finder/algorithms/path-finder/greedy.tsx

@@ -101,7 +101,7 @@ export async function greedy({
 
     open.splice(idx, 1);
     closed.add(minCostCell);
-    await updateCells(grid, minCostCell, CellType.fill);
+    await updateCells(grid, minCostCell, CellType.visited);
     exploreNeighbors(grid, costGrid, open, closed, parents, minCostCell, exit);
   }
 

src/apps/path-finder/algorithms/path-finder/index.ts

@@ -4,8 +4,14 @@ import { depthFirstSearch } from './dfs';
 import { greedy } from './greedy';
 
 export const pathFinders = new Map([
-  ['bfs', { name: 'BFS', fn: breadthFirstSearch }],
-  ['dfs', { name: 'DFS', fn: depthFirstSearch }],
-  ['a-star', { name: 'A*', fn: aStar }],
-  ['greedy', { name: 'Greedy', fn: greedy }],
+  [
+    'bfs',
+    { name: 'BFS', fullName: 'Breadth First Search', fn: breadthFirstSearch },
+  ],
+  [
+    'dfs',
+    { name: 'DFS', fullName: 'Depth First Search', fn: depthFirstSearch },
+  ],
+  ['a-star', { name: 'A*', fullName: 'A* Search', fn: aStar }],
+  ['greedy', { name: 'Greedy', fullName: 'Greedy Best First', fn: greedy }],
 ]);

src/apps/path-finder/components/controller/controller.module.scss

@@ -11,6 +11,42 @@
     gap: 10px;
   }
 
+  .info {
+    display: none;
+    gap: 20px;
+
+    & > div {
+      display: flex;
+      align-items: center;
+      gap: 5px;
+    }
+
+    .info__item {
+      height: 20px;
+      width: 20px;
+    }
+
+    .info__start {
+      background-color: var(--pf-cell-entry);
+    }
+
+    .info__end {
+      background-color: var(--pf-cell-exit);
+    }
+
+    .info__wall {
+      background-color: var(--pf-cell-wall);
+    }
+
+    .info__visited {
+      background-color: var(--pf-cell-visited);
+    }
+
+    .info__path {
+      background-color: var(--pf-cell-path);
+    }
+  }
+
   .execution {
     display: flex;
     gap: 10px;
@@ -30,8 +66,18 @@
 }
 
 @media (width >= 768px) {
-  .controller .speed {
-    display: block;
+  .controller {
+    .speed {
+      display: block;
+    }
+  }
+}
+
+@media (width >= 1024px) {
+  .controller {
+    .info {
+      display: flex;
+    }
   }
 }
 

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

@@ -6,6 +6,7 @@ import Execution from './execution';
 import Operations from './operations';
 import classes from './controller.module.scss';
 import { getDimensionsFromScreenSize } from '../../helpers/grid';
+import Info from './info';
 
 function Controller() {
   const dispatch = useAppDispatch();
@@ -32,6 +33,7 @@ function Controller() {
   return (
     <section className={classes.controller}>
       <Operations />
+      <Info />
       <Execution />
     </section>
   );

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

@@ -6,7 +6,7 @@ import { pathFinders } from '../../algorithms/path-finder';
 import classes from './controller.module.scss';
 
 import { useState } from 'react';
-import { useDebounce } from 'react-use';
+import { useDebounce, useWindowSize } from 'react-use';
 import { Status } from '../../models/interfaces';
 import { searchPath } from '../../store/search-thunk';
 
@@ -27,6 +27,7 @@ function Execution() {
   const exit = useAppSelector((state) => state.pathFinder.exit);
   const status = useAppSelector((state) => state.pathFinder.status);
   const pathFinderAlgo = pathFinders.get(pathFinder)!;
+  const { width } = useWindowSize();
 
   useDebounce(
     () => {
@@ -54,9 +55,9 @@ function Execution() {
         value={pathFinder}
         onChange={(e) => setPathFinder(e.target.value)}
       >
-        {[...pathFinders.entries()].map(([key, { name }]) => (
+        {[...pathFinders.entries()].map(([key, { name, fullName }]) => (
           <option key={key} value={key}>
-            {name}
+            {width > 1024 ? fullName : name}
           </option>
         ))}
       </select>

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

@@ -0,0 +1,30 @@
+import classes from './controller.module.scss';
+
+function Info() {
+  return (
+    <div className={classes.info}>
+      <div>
+        <div className={`${classes.info__item} ${classes.info__start}`}></div>
+        <span>Start</span>
+      </div>
+      <div>
+        <div className={`${classes.info__item} ${classes.info__end}`}></div>
+        <span>End</span>
+      </div>
+      <div>
+        <div className={`${classes.info__item} ${classes.info__wall}`}></div>
+        <span>Wall</span>
+      </div>
+      <div>
+        <div className={`${classes.info__item} ${classes.info__visited}`}></div>
+        <span>Visited</span>
+      </div>
+      <div>
+        <div className={`${classes.info__item} ${classes.info__path}`}></div>
+        <span>Path</span>
+      </div>
+    </div>
+  );
+}
+
+export default Info;

src/apps/path-finder/components/grid/grid.module.scss

@@ -24,14 +24,14 @@
   }
 
   .type4 {
-    background-color: var(--pf-cell-fill);
-    border-color: var(--pf-cell-fill);
+    background-color: var(--pf-cell-visited);
+    border-color: var(--pf-cell-visited);
     animation: visitedAnimation 1s;
   }
 
   .type5 {
     background-color: var(--pf-cell-path);
-    border-color: var(--pf-cell-fill);
+    border-color: var(--pf-cell-path-border);
     border-width: 8px;
   }
 
@@ -52,13 +52,13 @@
   0% {
     transform: scale(0.3);
     border-radius: 50%;
-    background-color: var(--pf-cell-fill-start);
+    background-color: var(--pf-cell-visited-start);
   }
 
   30% {
     transform: scale(0.6);
     border-radius: 65%;
-    background-color: var(--pf-cell-fill-mid);
+    background-color: var(--pf-cell-visited-mid);
   }
 
   60% {
@@ -68,7 +68,7 @@
 
   100% {
     transform: scale(1);
-    background-color: var(--pf-cell-fill);
+    background-color: var(--pf-cell-visited);
   }
 }
 

src/apps/path-finder/config.ts

@@ -5,10 +5,11 @@ export const cellColors = {
   entry: 'deepskyblue',
   exit: 'lawngreen',
   wall: 'darkred',
-  fillStart: 'blue',
-  fillMid: 'deepskyblue',
-  fill: 'rgb(225 208 254)',
+  visitedStart: 'blue',
+  visitedMid: 'deepskyblue',
+  visited: 'rgb(225 208 254)',
   path: 'blue',
+  pathBorder: 'yellow',
 };
 
 const root = document.querySelector(':root') as HTMLElement;
@@ -17,7 +18,8 @@ root.style.setProperty('--pf-cell-clear', cellColors.clear);
 root.style.setProperty('--pf-cell-entry', cellColors.entry);
 root.style.setProperty('--pf-cell-exit', cellColors.exit);
 root.style.setProperty('--pf-cell-wall', cellColors.wall);
-root.style.setProperty('--pf-cell-fill', cellColors.fill);
-root.style.setProperty('--pf-cell-fill-start', cellColors.fillStart);
-root.style.setProperty('--pf-cell-fill-mid', cellColors.fillMid);
+root.style.setProperty('--pf-cell-visited', cellColors.visited);
+root.style.setProperty('--pf-cell-visited-start', cellColors.visitedStart);
+root.style.setProperty('--pf-cell-visited-mid', cellColors.visitedMid);
 root.style.setProperty('--pf-cell-path', cellColors.path);
+root.style.setProperty('--pf-cell-path-border', cellColors.pathBorder);

src/apps/path-finder/models/interfaces.ts

@@ -3,7 +3,7 @@ export const enum CellType {
   entry,
   exit,
   wall,
-  fill,
+  visited,
   path,
 }
 

src/apps/path-finder/store/path-finder.slice.ts

@@ -91,7 +91,7 @@ export const pathFinderSlice = createSlice({
       for (let i = 0; i < state.rows; i++) {
         for (let j = 0; j < state.cols; j++) {
           if (
-            gridClone[i][j] === CellType.fill ||
+            gridClone[i][j] === CellType.visited ||
             gridClone[i][j] === CellType.path
           ) {
             gridClone[i][j] = CellType.clear;