Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 1b4a6d4

Browse files
Javier OntiverosJavier Ontiveros
Javier Ontiveros
authored and
Javier Ontiveros
committed
navbar component fully functional with grid and animations
1 parent a14e79c commit 1b4a6d4

File tree

8 files changed

+245
-136
lines changed

8 files changed

+245
-136
lines changed

‎src/App.js‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,24 @@ import Grid from "./components/grid_component/Grid";
66

77
const App = () => {
88
const [selected_algorithm, set_selected_algorithm] = useState(null);
9+
const [grid_key, set_grid_key] = useState(1);
910

1011
const select_algorithm = (algorithm) => {
1112
set_selected_algorithm(algorithm);
1213
};
1314

15+
const restart_grid = () => {
16+
set_grid_key(grid_key + 1);
17+
};
18+
1419
return (
1520
<>
1621
<GlobalStyles />
17-
<NavBar select_algorithm={select_algorithm} />
18-
<Grid selected_algorithm={selected_algorithm} />
22+
<NavBar
23+
restart_grid={() => restart_grid()}
24+
select_algorithm={select_algorithm}
25+
/>
26+
<Grid key={grid_key} selected_algorithm={selected_algorithm} />
1927
</>
2028
);
2129
};

‎src/components/grid_component/Grid.jsx‎

Lines changed: 54 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,10 @@ import { GridContainer, Columns, Rows, NodeContainer } from "./Grid_styles";
55
import { NodeClass } from "../node_component/Node_Class";
66
import Node from "../node_component/Node";
77
import {
8-
end_algorithm_animation_action,
9-
end_maze_animation_action,
10-
restart_grid_action,
8+
selected_pathfinding_algorithm_active_action,
9+
selected_maze_algorithm_active_action,
10+
selected_pathfinding_algorithm_on_grid_action,
11+
selected_maze_algorithm_on_grid_action,
1112
} from "../../redux/global_actions";
1213
import { a_star_algorithm } from "../../algorithms/a_star_algorithm";
1314
import { dijkstra_algorithm } from "../../algorithms/dijkstra";
@@ -16,12 +17,16 @@ import { recursive_division_algorithm } from "../../mazes/recursive_division_alg
1617
import { sidewinder_algorithm } from "../../mazes/sidewinder_algorithm";
1718

1819
const Grid = ({
19-
active_algorithm,
20-
active_maze,
21-
active_maze_on_grid,
22-
play_algorithm_animation,
23-
end_algorithm_animation,
24-
end_maze_animation,
20+
selected_pathfinding_algorithm,
21+
selected_maze_algorithm,
22+
selected_pathfinding_algorithm_active,
23+
selected_maze_algorithm_active,
24+
selected_pathfinding_algorithm_on_grid,
25+
selected_maze_algorithm_on_grid,
26+
selected_pathfinding_algorithm_active_fun,
27+
selected_maze_algorithm_active_fun,
28+
selected_pathfinding_algorithm_on_grid_fun,
29+
selected_maze_algorithm_on_grid_fun,
2530
}) => {
2631
// screen size
2732
const columns = Math.floor(window.innerWidth / 30);
@@ -74,11 +79,20 @@ const Grid = ({
7479
}, []);
7580

7681
useEffect(() => {
77-
if (active_algorithm && play_algorithm_animation) {
78-
run_algorithm(active_algorithm);
82+
if (
83+
selected_pathfinding_algorithm &&
84+
selected_pathfinding_algorithm_active &&
85+
!selected_pathfinding_algorithm_on_grid
86+
) {
87+
run_algorithm(selected_pathfinding_algorithm);
7988
}
80-
if (active_maze && !active_maze_on_grid) {
81-
run_maze(active_maze);
89+
if (
90+
selected_maze_algorithm &&
91+
selected_maze_algorithm_active &&
92+
!selected_maze_algorithm_on_grid &&
93+
!selected_pathfinding_algorithm_on_grid
94+
) {
95+
run_maze(selected_maze_algorithm);
8296
}
8397
});
8498

@@ -94,7 +108,7 @@ const Grid = ({
94108
`node_${path[i].i}_${path[i].j}`
95109
);
96110
node_js.className = "node_path";
97-
if (i === path.length - 2) end_algorithm_animation();
111+
if (i === path.length - 2) selected_pathfinding_algorithm_on_grid_fun();
98112
}, i * 75);
99113
}
100114
};
@@ -143,7 +157,7 @@ const Grid = ({
143157
}
144158

145159
if (i === maze.length - 1) {
146-
end_maze_animation();
160+
selected_maze_algorithm_on_grid_fun();
147161
}
148162
}, i * 50);
149163
}
@@ -200,7 +214,7 @@ const Grid = ({
200214
// moving mouse around
201215
const on_mouse_enter = (i, j) => {
202216
if (!creating_obstacles) return;
203-
if (i !== start_i || (j !== start_j && i !== end_i) || j !== end_j) {
217+
if ((i !== start_i || j !== start_j) && (i !== end_i || j !== end_j)) {
204218
mouse_action("CREATE_OBSTACLE", i, j);
205219
}
206220
};
@@ -225,6 +239,7 @@ const Grid = ({
225239
const run_algorithm = (algorithm) => {
226240
switch (algorithm) {
227241
case "RUN_A_STAR_ALGORITHM":
242+
selected_pathfinding_algorithm_active_fun();
228243
const [visited_a_star, path_a_star] = a_star_algorithm(
229244
grid[start_i][start_j],
230245
grid[end_i][end_j],
@@ -237,6 +252,7 @@ const Grid = ({
237252
}
238253
break;
239254
case "RUN_BFS_ALGORITHM":
255+
selected_pathfinding_algorithm_active_fun();
240256
const [visited_bfs, path_bfs] = bfs_algorithm(
241257
grid[start_i][start_j],
242258
grid[end_i][end_j],
@@ -256,6 +272,7 @@ const Grid = ({
256272
const run_maze = (maze) => {
257273
switch (maze) {
258274
case "RUN_RECURSIVE_DIVISION_ALGORITHM":
275+
selected_maze_algorithm_active_fun();
259276
const recursive_maze = recursive_division_algorithm(
260277
grid,
261278
columns,
@@ -265,6 +282,7 @@ const Grid = ({
265282
break;
266283

267284
case "RUN_SIDEWINDER_ALGORITHM":
285+
selected_maze_algorithm_active_fun();
268286
const sidewinder_maze = sidewinder_algorithm(grid, columns, rows);
269287
maze_nodes_animation(sidewinder_maze);
270288
break;
@@ -309,21 +327,31 @@ const Grid = ({
309327
// redux
310328
const mapStateToProps = ({
311329
global_reducer: {
312-
active_algorithm,
313-
active_maze,
314-
active_maze_on_grid,
315-
play_algorithm_animation,
330+
selected_pathfinding_algorithm,
331+
selected_maze_algorithm,
332+
selected_pathfinding_algorithm_active,
333+
selected_maze_algorithm_active,
334+
selected_pathfinding_algorithm_on_grid,
335+
selected_maze_algorithm_on_grid,
316336
},
317337
}) => ({
318-
active_algorithm,
319-
active_maze,
320-
active_maze_on_grid,
321-
play_algorithm_animation,
338+
selected_pathfinding_algorithm,
339+
selected_maze_algorithm,
340+
selected_pathfinding_algorithm_active,
341+
selected_maze_algorithm_active,
342+
selected_pathfinding_algorithm_on_grid,
343+
selected_maze_algorithm_on_grid,
322344
});
323345

324346
const mapDispatchToProps = (dispatch) => ({
325-
end_algorithm_animation: () => dispatch(end_algorithm_animation_action()),
326-
end_maze_animation: () => dispatch(end_maze_animation_action()),
347+
selected_pathfinding_algorithm_active_fun: () =>
348+
dispatch(selected_pathfinding_algorithm_active_action()),
349+
selected_maze_algorithm_active_fun: () =>
350+
dispatch(selected_maze_algorithm_active_action()),
351+
selected_pathfinding_algorithm_on_grid_fun: () =>
352+
dispatch(selected_pathfinding_algorithm_on_grid_action()),
353+
selected_maze_algorithm_on_grid_fun: () =>
354+
dispatch(selected_maze_algorithm_on_grid_action()),
327355
});
328356

329357
export default connect(mapStateToProps, mapDispatchToProps)(Grid);

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /