Skip to content

Commit 5769e90

Browse files
neoandmatrixneoandmatrix
committed
added basic change start feature need to refine it like disabling start button after first click and disabling all buttons until wall is constructed
1 parent f827bd1 commit 5769e90

File tree

8 files changed

+348
-204
lines changed

8 files changed

+348
-204
lines changed

Diff for: ‎src/App.tsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,16 @@ import { Nav } from "./components/Nav"
88
function App() {
99

1010
const isVisualizationRunningRef = useRef<boolean>(false);
11+
const isChangeStartSelectedRef = useRef<boolean>(false);
1112

1213
return (
1314
<>
1415
<SpeedProvider>
1516
<TileProvider>
1617
<PathfindingProvider>
1718
<div className="h-screen w-screen flex flex-col">
18-
<Nav isVisualizationRunningRef = {isVisualizationRunningRef}/>
19-
<Grid isVisualizationRunningRef = {isVisualizationRunningRef} />
19+
<Nav isVisualizationRunningRef = {isVisualizationRunningRef} isChangeStartSelectedRef={isChangeStartSelectedRef}/>
20+
<Grid isVisualizationRunningRef = {isVisualizationRunningRef} isChangeStartSelectedRef={isChangeStartSelectedRef} />
2021
</div>
2122
</PathfindingProvider>
2223
</TileProvider>

Diff for: ‎src/components/Grid.tsx

+95-58
Original file line numberDiff line numberDiff line change
@@ -3,74 +3,111 @@ 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 } from "../utils/helpers";
6+
import { checkIfStartOrEnd, createNewGrid, resetCurrentStart, setNewStartTile } from "../utils/helpers";
7+
import { useTile } from "../hooks/useTile";
78

8-
export function Grid({isVisualizationRunningRef}:{isVisualizationRunningRef : MutableRefObject<boolean>}){
9+
export function Grid({
10+
isVisualizationRunningRef,
11+
isChangeStartSelectedRef,
12+
}: {
13+
isVisualizationRunningRef: MutableRefObject<boolean>;
14+
isChangeStartSelectedRef: MutableRefObject<boolean>;
15+
}) {
16+
const { grid, setGrid } = usePathFinding();
17+
const [isMouseDown, setIsMouseDown] = useState<boolean>(false);
18+
const {startTile,setStartTile} = useTile();
919

10-
const {grid,setGrid} = usePathFinding();
11-
const [isMouseDown , setIsMouseDown] = useState<boolean>(false);
20+
const handleMouseDown = (row: number, col: number) => {
21+
if (
22+
isVisualizationRunningRef.current ||
23+
checkIfStartOrEnd(row, col) ||
24+
isChangeStartSelectedRef.current
25+
) {
26+
return;
27+
}
1228

13-
const handleMouseDown = (row : number,col : number) => {
14-
if (isVisualizationRunningRef.current || checkIfStartOrEnd(row,col)) {
15-
return;
16-
}
29+
setIsMouseDown(true);
30+
const newGrid = createNewGrid(grid, row, col);
31+
setGrid(newGrid);
32+
};
1733

18-
setIsMouseDown(true);
19-
const newGrid = createNewGrid(grid,row,col);
20-
setGrid(newGrid)
34+
const handleMouseUp = (row: number, col: number) => {
35+
if (
36+
isVisualizationRunningRef.current ||
37+
checkIfStartOrEnd(row, col) ||
38+
isChangeStartSelectedRef.current
39+
) {
40+
return;
2141
}
2242

23-
const handleMouseUp = (row : number,col : number) => {
24-
if (isVisualizationRunningRef.current || checkIfStartOrEnd(row,col)) {
25-
return;
26-
}
43+
setIsMouseDown(false);
44+
};
2745

28-
setIsMouseDown(false);
46+
const handleMouseEnter = (row: number, col: number) => {
47+
if (
48+
isVisualizationRunningRef.current ||
49+
checkIfStartOrEnd(row, col) ||
50+
isChangeStartSelectedRef.current
51+
) {
52+
return;
2953
}
3054

31-
const handleMouseEnter = (row : number,col : number) => {
32-
if (isVisualizationRunningRef.current || checkIfStartOrEnd(row,col)) {
33-
return;
34-
}
55+
if (isMouseDown) {
56+
const newGrid = createNewGrid(grid, row, col);
57+
setGrid(newGrid);
58+
}
59+
};
3560

36-
if (isMouseDown) {
37-
const newGrid = createNewGrid(grid,row,col);
38-
setGrid(newGrid)
39-
}
61+
const handleMouseClick = (row: number, col: number) => {
62+
if (!isChangeStartSelectedRef.current) {
63+
return;
4064
}
65+
66+
const newSelectedStartTile = setNewStartTile(grid,row,col);
67+
setGrid(newSelectedStartTile);
68+
setGrid(resetCurrentStart(grid,startTile,row,col,setStartTile))
69+
isChangeStartSelectedRef.current = false
70+
};
4171

42-
return (
43-
<div
44-
className={twMerge(
45-
// base classes
46-
"flex items-center flex-col justify-center border-sky-300 my-3",
47-
// manage height of grid
48-
`lg:min-h-[${MAX_ROWS*17}px] md:min-h-[${MAX_ROWS*15}px] xs:min-h-[${MAX_ROWS*8}] min-h-[${MAX_ROWS*7}px]`,
49-
// manage width of grid
50-
`lg:w-[${MAX_COLS*17}px] md:w-[${MAX_COLS*15}px] xs:w-[${MAX_COLS*8}px] w-[${MAX_COLS*7}px]`
51-
)}>
52-
{grid.map((r,rowIndex)=>(
53-
<div key={rowIndex} className="flex">
54-
{r.map((tile,tileIndex)=>{
55-
const {row,col,isEnd,isStart,isPath,isTraversed,isWall} = tile;
56-
return (
57-
<Tile
58-
key={tileIndex}
59-
row={tile.row}
60-
col={tile.col}
61-
isEnd={isEnd}
62-
isStart={isStart}
63-
isPath={isPath}
64-
isTraversed={isTraversed}
65-
isWall={isWall}
66-
handleMouseDown = {() => handleMouseDown(row,col)}
67-
handleMouseUp = {() => handleMouseUp(row,col)}
68-
handleMouseEnter = {() => handleMouseEnter(row,col)}/>
69-
)
70-
})}
71-
</div>
72-
))}
72+
return (
73+
<div
74+
className={twMerge(
75+
// base classes
76+
"flex items-center flex-col justify-center border-sky-300 my-3",
77+
// manage height of grid
78+
`lg:min-h-[${MAX_ROWS * 17}px] md:min-h-[${
79+
MAX_ROWS * 15
80+
}px] xs:min-h-[${MAX_ROWS * 8}] min-h-[${MAX_ROWS * 7}px]`,
81+
// manage width of grid
82+
`lg:w-[${MAX_COLS * 17}px] md:w-[${MAX_COLS * 15}px] xs:w-[${
83+
MAX_COLS * 8
84+
}px] w-[${MAX_COLS * 7}px]`
85+
)}
86+
>
87+
{grid.map((r, rowIndex) => (
88+
<div key={rowIndex} className="flex">
89+
{r.map((tile, tileIndex) => {
90+
const { row, col, isEnd, isStart, isPath, isTraversed, isWall } =
91+
tile;
92+
return (
93+
<Tile
94+
key={tileIndex}
95+
row={tile.row}
96+
col={tile.col}
97+
isEnd={isEnd}
98+
isStart={isStart}
99+
isPath={isPath}
100+
isTraversed={isTraversed}
101+
isWall={isWall}
102+
handleMouseDown={() => handleMouseDown(row, col)}
103+
handleMouseUp={() => handleMouseUp(row, col)}
104+
handleMouseEnter={() => handleMouseEnter(row, col)}
105+
handleMouseClick={()=>handleMouseClick(row,col)}
106+
/>
107+
);
108+
})}
73109
</div>
74-
)
75-
76-
}
110+
))}
111+
</div>
112+
);
113+
}

0 commit comments

Comments
 (0)