Skip to content

Commit 2295998

Browse files
neoandmatrixneoandmatrix
committed
added change end feature some pilishing left
1 parent 5769e90 commit 2295998

File tree

12 files changed

+247
-101
lines changed

12 files changed

+247
-101
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
"version": "0.0.0",
66
"type": "module",
77
"scripts": {
8-
"predeoply" : "npm run build",
8+
"predeploy" : "npm run build",
99
"deploy" : "gh-pages -d dist",
1010
"dev": "vite",
1111
"build": "tsc -b && vite build",

‎src/App.tsx‎

Lines changed: 26 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,40 @@
1-
import { useRef } from "react"
2-
import { Grid } from "./components/Grid"
3-
import { PathfindingProvider } from "./context/PathfindingContext"
4-
import { SpeedProvider } from "./context/SpeedContext"
5-
import { TileProvider } from "./context/TileContext"
6-
import { Nav } from "./components/Nav"
1+
import { useRef } from "react";
2+
import { Grid } from "./components/Grid";
3+
import { PathfindingProvider } from "./context/PathfindingContext";
4+
import { SpeedProvider } from "./context/SpeedContext";
5+
import { TileProvider } from "./context/TileContext";
6+
import { Nav } from "./components/Nav";
7+
import { DisableButtonsProvider } from "./context/DisableButtonsContext";
78

89
function App() {
9-
1010
const isVisualizationRunningRef = useRef<boolean>(false);
1111
const isChangeStartSelectedRef = useRef<boolean>(false);
12+
const isChangeEndSelectedRef = useRef<boolean>(false);
1213

1314
return (
1415
<>
15-
<SpeedProvider>
16+
<SpeedProvider>
1617
<TileProvider>
1718
<PathfindingProvider>
18-
<div className="h-screen w-screen flex flex-col">
19-
<Nav isVisualizationRunningRef = {isVisualizationRunningRef} isChangeStartSelectedRef={isChangeStartSelectedRef}/>
20-
<Grid isVisualizationRunningRef = {isVisualizationRunningRef} isChangeStartSelectedRef={isChangeStartSelectedRef} />
21-
</div>
19+
<DisableButtonsProvider>
20+
<div className="h-screen w-screen flex flex-col">
21+
<Nav
22+
isVisualizationRunningRef={isVisualizationRunningRef}
23+
isChangeStartSelectedRef={isChangeStartSelectedRef}
24+
isChangeEndSelectedRef={isChangeEndSelectedRef}
25+
/>
26+
<Grid
27+
isVisualizationRunningRef={isVisualizationRunningRef}
28+
isChangeStartSelectedRef={isChangeStartSelectedRef}
29+
isChangeEndSelectedRef={isChangeEndSelectedRef}
30+
/>
31+
</div>
32+
</DisableButtonsProvider>
2233
</PathfindingProvider>
2334
</TileProvider>
24-
</SpeedProvider>
35+
</SpeedProvider>
2536
</>
26-
)
37+
);
2738
}
2839

29-
export default App
40+
export default App;

‎src/components/Grid.tsx‎

Lines changed: 31 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3,25 +3,36 @@ import { usePathFinding } from "../hooks/usePathFinding";
33
import { MAX_COLS, MAX_ROWS } from "../utils/constants";
44
import { Tile } from "./Tile";
55
import { MutableRefObject, useState } from "react";
6-
import { checkIfStartOrEnd, createNewGrid, resetCurrentStart, setNewStartTile } from "../utils/helpers";
6+
import {
7+
checkIfStartOrEnd,
8+
createNewGrid,
9+
resetCurrentEnd,
10+
resetCurrentStart,
11+
setNewEndTile,
12+
setNewStartTile,
13+
} from "../utils/helpers";
714
import { useTile } from "../hooks/useTile";
815

916
export function Grid({
1017
isVisualizationRunningRef,
1118
isChangeStartSelectedRef,
19+
isChangeEndSelectedRef,
1220
}: {
1321
isVisualizationRunningRef: MutableRefObject<boolean>;
1422
isChangeStartSelectedRef: MutableRefObject<boolean>;
23+
isChangeEndSelectedRef: MutableRefObject<boolean>;
1524
}) {
1625
const { grid, setGrid } = usePathFinding();
1726
const [isMouseDown, setIsMouseDown] = useState<boolean>(false);
18-
const {startTile,setStartTile} = useTile();
27+
const { startTile, setStartTile, endTile, setEndTile } = useTile();
28+
1929

2030
const handleMouseDown = (row: number, col: number) => {
2131
if (
2232
isVisualizationRunningRef.current ||
2333
checkIfStartOrEnd(row, col) ||
24-
isChangeStartSelectedRef.current
34+
isChangeStartSelectedRef.current ||
35+
isChangeEndSelectedRef.current
2536
) {
2637
return;
2738
}
@@ -35,7 +46,8 @@ export function Grid({
3546
if (
3647
isVisualizationRunningRef.current ||
3748
checkIfStartOrEnd(row, col) ||
38-
isChangeStartSelectedRef.current
49+
isChangeStartSelectedRef.current ||
50+
isChangeEndSelectedRef.current
3951
) {
4052
return;
4153
}
@@ -47,7 +59,8 @@ export function Grid({
4759
if (
4860
isVisualizationRunningRef.current ||
4961
checkIfStartOrEnd(row, col) ||
50-
isChangeStartSelectedRef.current
62+
isChangeStartSelectedRef.current ||
63+
isChangeEndSelectedRef.current
5164
) {
5265
return;
5366
}
@@ -59,14 +72,19 @@ export function Grid({
5972
};
6073

6174
const handleMouseClick = (row: number, col: number) => {
62-
if (!isChangeStartSelectedRef.current) {
63-
return;
75+
if (isChangeStartSelectedRef.current ) {
76+
const newSelectedStartTile = setNewStartTile(grid, row, col);
77+
setGrid(newSelectedStartTile);
78+
setGrid(resetCurrentStart(grid, startTile, row, col, setStartTile));
79+
isChangeStartSelectedRef.current = false;
80+
//setIsDisabled(false);
81+
}
82+
if (isChangeEndSelectedRef.current) {
83+
setGrid(setNewEndTile(grid, row, col));
84+
setGrid(resetCurrentEnd(grid, endTile, row, col, setEndTile));
85+
isChangeEndSelectedRef.current = false;
86+
// setIsDisabled(false);
6487
}
65-
66-
const newSelectedStartTile = setNewStartTile(grid,row,col);
67-
setGrid(newSelectedStartTile);
68-
setGrid(resetCurrentStart(grid,startTile,row,col,setStartTile))
69-
isChangeStartSelectedRef.current = false
7088
};
7189

7290
return (
@@ -102,7 +120,7 @@ export function Grid({
102120
handleMouseDown={() => handleMouseDown(row, col)}
103121
handleMouseUp={() => handleMouseUp(row, col)}
104122
handleMouseEnter={() => handleMouseEnter(row, col)}
105-
handleMouseClick={()=>handleMouseClick(row,col)}
123+
handleMouseClick={() => handleMouseClick(row, col)}
106124
/>
107125
);
108126
})}

‎src/components/Nav.tsx‎

Lines changed: 23 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,15 +18,18 @@ import { runPathFindingAlgorithm } from "../utils/runPathFindingAlgorithm";
1818
import { animatePath } from "../utils/animatePath";
1919
import { ChangeStartOrEndPositionButton } from "./SelectButton";
2020
import { selectStart } from "../utils/selectStart";
21+
import { selectEnd } from "../utils/selectEnd";
2122

2223
export function Nav({
2324
isVisualizationRunningRef,
24-
isChangeStartSelectedRef
25+
isChangeStartSelectedRef,
26+
isChangeEndSelectedRef,
2527
}: {
2628
isVisualizationRunningRef: MutableRefObject<boolean>;
27-
isChangeStartSelectedRef : MutableRefObject<boolean>;
29+
isChangeStartSelectedRef: MutableRefObject<boolean>;
30+
isChangeEndSelectedRef: MutableRefObject<boolean>;
2831
}) {
29-
const [isDisabled, setIsDisabled] = useState<boolean>(false);
32+
const [isDisabled, setIsDisabled] = useState<boolean>(false);;
3033
const {
3134
grid,
3235
maze,
@@ -88,6 +91,7 @@ export function Nav({
8891
<Select
8992
label="Maze"
9093
value={maze}
94+
isDisabled={isDisabled}
9195
options={MAZES}
9296
onChange={(e) => {
9397
handleGenerateMaze(e.target.value as MazeType);
@@ -96,6 +100,7 @@ export function Nav({
96100
<Select
97101
label="Graph"
98102
value={algorithm}
103+
isDisabled={isDisabled}
99104
options={PATHFINDING_ALGORITHMS}
100105
onChange={(e) => {
101106
setAlgorithm(e.target.value as AlgorithmType);
@@ -105,6 +110,7 @@ export function Nav({
105110
<Select
106111
label="Speed"
107112
value={speed}
113+
isDisabled={isDisabled}
108114
options={SPEEDS}
109115
onChange={(e) => {
110116
setSpeed(parseInt(e.target.value) as SpeedType);
@@ -115,7 +121,20 @@ export function Nav({
115121
value="Select Start"
116122
isDisabled={isDisabled}
117123
onClick={async () => {
118-
await selectStart(grid, startTile, endTile,isChangeStartSelectedRef);
124+
await selectStart(
125+
grid,
126+
startTile,
127+
endTile,
128+
isChangeStartSelectedRef
129+
);
130+
}}
131+
></ChangeStartOrEndPositionButton>
132+
<ChangeStartOrEndPositionButton
133+
lable="Select End"
134+
value="Change End"
135+
isDisabled={isDisabled}
136+
onClick={async () => {
137+
await selectEnd(grid, startTile, endTile, isChangeEndSelectedRef);
119138
}}
120139
></ChangeStartOrEndPositionButton>
121140
<PlayButton

‎src/components/Select.tsx‎

Lines changed: 33 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,36 @@
11
import { ChangeEvent } from "react";
22

33
export function Select({
4-
value,
5-
onChange,
6-
options,
7-
label,
8-
isDisabled
9-
}:{
10-
value : string | number,
11-
label : string,
12-
onChange : (value : ChangeEvent<HTMLSelectElement>) => void;
13-
options : {value :string | number ; name : string}[];
14-
isDisabled?: boolean;
15-
}){
16-
return (
17-
<div className="flex flex-col items-start gap-1">
18-
<label htmlFor={label} className=" text-xs text-gray-400 ml-1">{label}</label>
19-
<select disabled={isDisabled}
20-
className="bg-gray-700 cursor-pointer hover:bg-gray-800 transition ease-in active:ring-0 active:border-0 p-2 min-w-[200px] sm:min-w-full"
21-
id={label}
22-
value={value}
23-
onChange={onChange}
24-
>
25-
{options.map((option)=>(
26-
<option key={option.value} value={option.value}>
27-
{option.name}
28-
</option>
29-
))}
30-
</select>
31-
</div>
32-
)
33-
}
4+
value,
5+
onChange,
6+
options,
7+
label,
8+
isDisabled,
9+
}: {
10+
value: string | number;
11+
label: string;
12+
onChange: (value: ChangeEvent<HTMLSelectElement>) => void;
13+
options: { value: string | number; name: string }[];
14+
isDisabled?: boolean;
15+
}) {
16+
return (
17+
<div className="flex flex-col items-start gap-1">
18+
<label htmlFor={label} className=" text-xs text-gray-400 ml-1">
19+
{label}
20+
</label>
21+
<select
22+
disabled={isDisabled}
23+
className="bg-gray-700 cursor-pointer hover:bg-gray-800 transition ease-in active:ring-0 active:border-0 p-2 min-w-[200px] sm:min-w-full"
24+
id={label}
25+
value={value}
26+
onChange={onChange}
27+
>
28+
{options.map((option) => (
29+
<option key={option.value} value={option.value}>
30+
{option.name}
31+
</option>
32+
))}
33+
</select>
34+
</div>
35+
);
36+
}

‎src/context/DisableButtonsContext.tsx‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { createContext, ReactNode, useState } from "react";
2+
3+
export interface DisableButtonsInterface{
4+
isDisabled : boolean,
5+
setIsDisabled : (disabled : boolean) => void
6+
}
7+
8+
export const DisableButtonsContext = createContext<DisableButtonsInterface | undefined>(
9+
undefined
10+
);
11+
12+
export const DisableButtonsProvider = ({
13+
children,
14+
}: {
15+
children: ReactNode;
16+
}) => {
17+
const [isDisabled, setIsDisabled] = useState<boolean>(false);
18+
19+
return (
20+
<DisableButtonsContext.Provider
21+
value={{
22+
isDisabled,setIsDisabled
23+
}}
24+
>
25+
{children}
26+
</DisableButtonsContext.Provider>
27+
);
28+
};

‎src/context/PathfindingContext.tsx‎

Lines changed: 31 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,48 @@
11
import { ReactNode, createContext, useState } from "react";
22
import { AlgorithmType, GridType, MazeType } from "../utils/types";
33
import { Creategrid } from "../utils/helpers";
4-
import { END_TILE_CONFIGURATION, START_TILE_CONFIGURATION } from "../utils/constants";
4+
import {
5+
END_TILE_CONFIGURATION,
6+
START_TILE_CONFIGURATION,
7+
} from "../utils/constants";
58

69
export interface PathfindingContextInterface {
7-
algorithm : AlgorithmType;
8-
setAlgorithm : (algorithm : AlgorithmType) => void;
9-
maze : MazeType;
10-
setMaze : (maze : MazeType) => void;
11-
grid : GridType;
12-
setGrid : (grid : GridType) => void;
13-
isGraphVisualized : boolean;
14-
setIsGraphVisualized : (isGraphVisualized : boolean) => void
10+
algorithm: AlgorithmType;
11+
setAlgorithm: (algorithm: AlgorithmType) => void;
12+
maze: MazeType;
13+
setMaze: (maze: MazeType) => void;
14+
grid: GridType;
15+
setGrid: (grid: GridType) => void;
16+
isGraphVisualized: boolean;
17+
setIsGraphVisualized: (isGraphVisualized: boolean) => void;
1518
}
1619

17-
export const PathfindingContext = createContext<PathfindingContextInterface | undefined>(undefined);
20+
export const PathfindingContext = createContext<
21+
PathfindingContextInterface | undefined
22+
>(undefined);
1823

19-
export const PathfindingProvider = ({children} : {children : ReactNode}) => {
20-
const [algorithm,setAlgorithm] = useState<AlgorithmType>('BFS');
21-
const [maze, setMaze] = useState<MazeType>('NONE');
22-
const [grid,setGrid] = useState<GridType>(Creategrid(START_TILE_CONFIGURATION,END_TILE_CONFIGURATION))
23-
const [isGraphVisualized,setIsGraphVisualized] = useState<boolean>(false);
24+
export const PathfindingProvider = ({ children }: { children: ReactNode }) => {
25+
const [algorithm, setAlgorithm] = useState<AlgorithmType>("BFS");
26+
const [maze, setMaze] = useState<MazeType>("NONE");
27+
const [grid, setGrid] = useState<GridType>(
28+
Creategrid(START_TILE_CONFIGURATION, END_TILE_CONFIGURATION)
29+
);
30+
const [isGraphVisualized, setIsGraphVisualized] = useState<boolean>(false);
2431

25-
26-
return (
32+
return (
2733
<PathfindingContext.Provider
28-
value={{
34+
value={{
2935
algorithm,
3036
setAlgorithm,
3137
maze,
3238
setMaze,
3339
grid,
3440
setGrid,
3541
isGraphVisualized,
36-
setIsGraphVisualized
37-
}}
38-
>{children}</PathfindingContext.Provider>
39-
)
40-
}
42+
setIsGraphVisualized,
43+
}}
44+
>
45+
{children}
46+
</PathfindingContext.Provider>
47+
);
48+
};

0 commit comments

Comments
 (0)