From 80100fd3f92dcc27d2843b3b3bb84a0a1c3a6ed0 Mon Sep 17 00:00:00 2001 From: Sadanand Pai Date: Sun, 31 Mar 2024 23:28:14 +0530 Subject: [PATCH] Dialog info details update --- .deepsource.toml | 2 +- cypress/utils/path.ts | 2 +- src/apps/path-finder/algorithms/index.ts | 2 +- .../components/controller/maze-controls.tsx | 17 ++-- .../components/controller/path-controls.tsx | 8 +- .../components/modal-icon/modal-content.tsx | 88 +++++++++++++------ .../components/modal-icon/modals.module.scss | 81 ++++++++++------- .../components/modal-icon/modals.tsx | 47 +++++----- 8 files changed, 146 insertions(+), 101 deletions(-) diff --git a/.deepsource.toml b/.deepsource.toml index 4ffe6cf..122ce91 100644 --- a/.deepsource.toml +++ b/.deepsource.toml @@ -1,6 +1,6 @@ version = 1 -exclude_patterns = ["docs/**", "cypress/**", "__tests__/**"] +exclude_patterns = ["docs/**", "cypress/**", "**/__tests__/**"] [[analyzers]] name = "javascript" diff --git a/cypress/utils/path.ts b/cypress/utils/path.ts index 68f5ba6..184efa1 100644 --- a/cypress/utils/path.ts +++ b/cypress/utils/path.ts @@ -4,9 +4,9 @@ export const mazes = [ 'Recursive Backtracking', 'Recursive Division', 'Wilson', - 'Binary', 'Ellers', 'Side Winder', + 'Binary Tree', 'Labyrinth', ]; diff --git a/src/apps/path-finder/algorithms/index.ts b/src/apps/path-finder/algorithms/index.ts index e88a665..897253e 100644 --- a/src/apps/path-finder/algorithms/index.ts +++ b/src/apps/path-finder/algorithms/index.ts @@ -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 }], ]); diff --git a/src/apps/path-finder/components/controller/maze-controls.tsx b/src/apps/path-finder/components/controller/maze-controls.tsx index e8a93cb..9c56d5c 100644 --- a/src/apps/path-finder/components/controller/maze-controls.tsx +++ b/src/apps/path-finder/components/controller/maze-controls.tsx @@ -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; @@ -48,7 +48,8 @@ function MazeControls({ defaultSpeed }: Props) { } return (
- + + = 1024px) { + +@media (width >= 1200px) { .mainModal { - display: flex; + display: block; + } +} + +[data-theme='dark'] { + .closeButton { + filter: invert(1); } } diff --git a/src/apps/path-finder/components/modal-icon/modals.tsx b/src/apps/path-finder/components/modal-icon/modals.tsx index ad7309c..1dbd5fb 100644 --- a/src/apps/path-finder/components/modal-icon/modals.tsx +++ b/src/apps/path-finder/components/modal-icon/modals.tsx @@ -1,38 +1,39 @@ -import { useCallback, useRef } from 'react'; -import classes from './modals.module.scss'; +import { useRef } from 'react'; import { Info, X } from 'lucide-react'; +import classes from './modals.module.scss'; -interface ModalItem { - id: number; - heading: string; - content: string; +interface Props { + content: { id: number; heading: string; content: string }[]; } -const Modals = ({ content }: { content: ModalItem[] }) => { + +const Modals = ({ content }: Props) => { const dialogRef = useRef(null); - const handleShowModal = useCallback(() => { - if (dialogRef.current) { - dialogRef.current.showModal(); - } - }, []); - const handleCloseModal = useCallback(() => { - if (dialogRef.current) { - dialogRef.current.close(); - } - }, []); + const handleShowModal = () => { + dialogRef.current?.showModal(); + }; + + const handleCloseModal = () => { + dialogRef.current?.close(); + }; + return (
- {content.map((item: ModalItem) => ( -
-

{item.heading}

-

{item.content}

-
- ))} + +
+ {content.map((item) => ( +
+

{item.heading}

+

{item.content}

+
+ ))} +
+