Skip to content

Commit c1467df

Browse files
mime9599mime9599
committed
Merge branch 'main' of https://github.com/https-sam/algorithm-visualizer into alt_method
� Conflicts: � src/components/BoardCanvas/Cells.js � src/components/BoardCanvas/Layouts.js
2 parents bbab496 + 15979d3 commit c1467df

File tree

30 files changed

+891
-309
lines changed

30 files changed

+891
-309
lines changed

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
# Algorithm Visualizer
22

33
By:
4-
[Sam Gotto](https://github.com/https-sam),
4+
[Sam Goto](https://github.com/https-sam),
55
[Michael Metz](https://github.com/MicMetz)
66
<br>
77
<br>

‎package-lock.json‎

Lines changed: 8 additions & 9 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,10 @@
77
"@testing-library/jest-dom": "^5.16.4",
88
"@testing-library/react": "^13.3.0",
99
"@testing-library/user-event": "^13.5.0",
10+
"@types/jest": "^28.1.6",
11+
"@types/node": "^18.0.6",
12+
"@types/react": "^18.0.15",
13+
"@types/react-dom": "^18.0.6",
1014
"csstype": "^3.1.0",
1115
"postcss-cli": "^10.0.0",
1216
"react": "^18.2.0",
@@ -16,6 +20,7 @@
1620
"react-spring": "8.0.27",
1721
"react-three-fiber": "4.0.12",
1822
"three": "0.112.1",
23+
"typescript": "^4.7.4",
1924
"zustand": "^4.0.0-rc.1"
2025
},
2126
"devDependencies": {

‎public/_redirects 2‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎public/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
<!-- For iphone notch -->
1515
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
1616
<link rel="icon" href="%PUBLIC_URL%/favicon.png" sizes="any" type="image/png">
17+
1718
<link rel="apple-touch-icon" href="%PUBLIC_URL%/favicon.png">
1819
<link rel="preconnect" href="https://fonts.googleapis.com">
1920
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

‎public/manifest.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,17 @@
33
"name": "Create React App Sample",
44
"icons": [
55
{
6-
"src": "",
6+
"src": "favicon.png",
77
"sizes": "64x64 32x32 24x24 16x16",
88
"type": "image/x-icon"
99
},
1010
{
11-
"src": "code.svg",
11+
"src": "favicon.png",
1212
"type": "image/png",
1313
"sizes": "192x192"
1414
},
1515
{
16-
"src": "code.svg",
16+
"src": "favicon.png",
1717
"type": "image/png",
1818
"sizes": "512x512"
1919
}

‎src/Utility/setupTests 2.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
import '@testing-library/jest-dom';

‎src/components/Algorithms/Display.js‎

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
import React, {Component, useState, useRef} from 'react';
2+
import Board from '../BoardCanvas/Board';
3+
import Navigation from '../Page/partial/Navbar/Navigation';
4+
import './display.css';
5+
import {useBinaryTreeCreation} from './Maze/Generation/BinaryTreeCreation';
6+
import {Strategy} from '../Strategy/Strategy';
7+
8+
/*
9+
10+
This is the main display of the game/visual demonstration.
11+
It contains the board, board control interface, orbital(camera)/Input interface,
12+
the game control interface, and the navigation bar.
13+
14+
"The Mediator"
15+
or a psudo
16+
"Layers Pattern"
17+
18+
*/
19+
export default function Display() {
20+
const [layoutType, setLayout] = useState('standard');
21+
const [mazeType, setMazeType] = useState("_none_");
22+
const [selectedPoint, setSelectedPoint] = useState(null);
23+
const [selectedGoalPoint, setSelectedGoalPoint] = useState(null);
24+
const [selectedStartPoint, setSelectedStartPoint] = useState(null);
25+
// const board = new Array(10000).fill(0).map(
26+
const board = new Array(3844).fill(0).map(
27+
// (i, id, type: string = '_floor_', visited: Boolean = false, x: Number, y: Number ) => ({id, type, visited}));
28+
// (i, id, type: string = '_floor_', visited: Boolean = false, x: Number, y: Number ) => ({x, y} ({id, type, visited})));
29+
(i, id: number, type: String = '_wall_', sourceType: String = '_wall_', targetType: String = '_wall_', visited: Boolean = false, x: number, y: number ) => ({x, y, id, type, visited, sourceType, targetType}));
30+
31+
const boardRef = useRef(); // Mutable(Persistant) board reference object.
32+
33+
const handleResetCamera = () => {
34+
boardRef.current.resetCamera();
35+
};
36+
const handleResetBoard = () => {
37+
boardRef.current.resetBoard();
38+
};
39+
const handleMazeGeneration = (Strategy) => {
40+
boardRef.current.generateMaze(Strategy);
41+
};
42+
43+
44+
return (
45+
<>
46+
<Navigation/>
47+
<div className = "display-container">
48+
49+
<Board
50+
ref = {boardRef}
51+
board = {board}
52+
layoutType = {layoutType}
53+
mazeType = {mazeType}
54+
selectedPoint = {selectedPoint}
55+
onSelectPoint = {setSelectedPoint}
56+
/>
57+
<div className = "point-desc">
58+
{selectedPoint && (
59+
<p>Cell:
60+
#<span className = "point-select">{selectedPoint.id}</span>
61+
</p>
62+
)}
63+
</div>
64+
65+
<div className = "control-group-one">
66+
<h2 className = "control-header">Display <br/> Strategy</h2>
67+
<button
68+
onClick = {() => setLayout('standard')}
69+
className = {layoutType === 'standard' ? 'active' : undefined}
70+
>
71+
Standard Grid
72+
</button>
73+
{/* <button */}
74+
{/* onClick = {() => setLayout('circular')} */}
75+
{/* className = {layoutType === 'circular' ? 'active' : undefined} */}
76+
{/* > */}
77+
{/* Circular */}
78+
{/* </button> */}
79+
80+
<button className = "reset-button" onClick = {handleResetCamera}>
81+
View Reset
82+
</button>
83+
</div>
84+
85+
<div className = "control-group-two">
86+
<h2 className = "control-header">Generate Maze</h2>
87+
<div className = "maze-toggle-group" >
88+
<button
89+
onClick = {() => {
90+
if (mazeType === '_none_') {
91+
setMazeType('_BinaryTree_');
92+
}
93+
}}
94+
className = {`maze-toggle ${mazeType !== '_none_' ? 'active' : undefined}`}
95+
>
96+
ON
97+
</button>
98+
99+
<button
100+
onClick = {() => setMazeType('_none_')}
101+
className = {`maze-toggle ${mazeType === '_none_' ? 'active' : undefined}`}
102+
>
103+
OFF
104+
</button>
105+
106+
</div>
107+
<button
108+
onClick = {() => setMazeType('_BinaryTree_')}
109+
className = {mazeType === '_BinaryTree_' ? 'active' : undefined}
110+
>
111+
Binary Tree
112+
</button>
113+
<button
114+
onClick = {() => setMazeType('_GrowingTree_')}
115+
className = {mazeType === '_GrowingTree_' ? 'active' : undefined}
116+
>
117+
Growing Tree
118+
</button>
119+
<button
120+
onClick = {() => setMazeType('_BFS_')}
121+
className = {mazeType === '_BFS_' ? 'active' : undefined}
122+
>
123+
Breath First Search
124+
</button>
125+
<button className = "reset-button" onClick = {handleResetBoard}>
126+
Board Reset
127+
</button>
128+
</div>
129+
</div>
130+
</>
131+
);
132+
}

‎src/components/Algorithms/Maze/Generation/Directions 2.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
var directions = new Array();
2+
directions.push({x: 0, y: 0.5});
3+
directions.push({x: 0.5, y: 0});
4+
directions.push({x: 0, y: -0.5});
5+
directions.push({x: -0.5, y: 0});
6+
7+
export {directions};

‎src/components/Algorithms/Maze/useMaze.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import {useState} from 'react';
2+
3+
4+
5+
6+
export default function useMaze({board, mazeType}) {
7+
const [maze, setMaze] = useState(board);
8+
const [mazeSize, setMazeSize] = useState(null);
9+
const [mazeSolved, setMazeSolved] = useState(false);
10+
const [mazeSolving, setMazeSolving] = useState(false);
11+
const [mazeSolvingError, setMazeSolvingError] = useState(false);
12+
13+
}

0 commit comments

Comments
 (0)