Skip to content

Commit 6d59f66

Browse files
mime9599mime9599
committed
functioning board ~WIP~
can't get maze generation to function consistently
1 parent d242c09 commit 6d59f66

File tree

25 files changed

+514
-32350
lines changed

25 files changed

+514
-32350
lines changed

‎package-lock.json‎

Lines changed: 0 additions & 31911 deletions
This file was deleted.

‎package.json‎

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,13 @@
33
"version": "0.1.0",
44
"private": true,
55
"dependencies": {
6-
"@react-three/fiber": "^8.0.27",
7-
"@testing-library/jest-dom": "^5.16.4",
8-
"@testing-library/react": "^13.3.0",
9-
"@testing-library/user-event": "^13.5.0",
10-
"csstype": "^3.1.0",
11-
"react": "^18.2.0",
12-
"react-dom": "^18.2.0",
13-
"react-router": "^6.3.0",
6+
"react": "16.12.0",
7+
"react-dom": "16.12.0",
148
"react-router-dom": "^6.3.0",
15-
"rsuite": "^5.16.0",
16-
"web-vitals": "^2.1.4"
9+
"react-spring": "8.0.27",
10+
"react-three-fiber": "4.0.12",
11+
"three": "0.112.1",
12+
"zustand": "^4.0.0-rc.1"
1713
},
1814
"devDependencies": {
1915
"autoprefixer": "^10.4.7",

‎src/App.css‎

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,25 @@
1+
html, body, * {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
margin: 0;
9+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
10+
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
11+
sans-serif;
12+
-webkit-font-smoothing: antialiased;
13+
-moz-osx-font-smoothing: grayscale;
14+
}
15+
116
.App {
2-
text-align: center;
17+
width: 100%;
18+
height: 100%;
319
}
420

521
.App-logo {
622
height: 40vmin;
7-
pointer-events: none;
823
}
924

1025
@media (prefers-reduced-motion: no-preference) {
@@ -21,7 +36,6 @@
2136
align-items: center;
2237
justify-content: center;
2338
font-size: calc(10px + 2vmin);
24-
color: white;
2539
}
2640

2741
.App-link {
@@ -36,3 +50,6 @@
3650
transform: rotate(360deg);
3751
}
3852
}
53+
54+
55+

‎src/App.js‎

Lines changed: 13 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,21 @@
1-
import React, {Component} from 'react';
2-
// import {Canvas, useFrame} from '@react-three/fiber';
1+
import './App.css';
2+
import React from 'react';
3+
import Display from './components/Algorithms/Display';
4+
import AppRouter from './AppRouter';
5+
import Navigation from './components/Page/partial/Navbar/Navigation';
36

4-
// import {Strategy /*changeRed*/} from './components/Strategy/Strategy';
5-
// import {InputField} from './components/Canvas/InputField.js';
6-
// import MainCanvas from './components/Canvas/MainSortingCanvas';
7-
// import SelectionSort from './components/Strategy/Algorithms/SelectionSort';
87

9-
// import Header from './components/Page/partial/Header';
10-
// import Selection from './components/Page/partial/Selection';
11-
// import Footer from './components/Page/partial/Footer';
12-
// import SplashScreen from './components/Page/Splash/SplashScreen';
13-
// import Box from './modals/cube/Box';
14-
// import Cell from './components/Board/Cell';
15-
import AppRouter from './AppRouter';
168

9+
export default function App() {
1710

18-
19-
{/* Placeholder for the About page */}
20-
21-
22-
23-
class App extends Component {
24-
25-
constructor(props) {
26-
super(props);
27-
}
28-
29-
30-
render() {
31-
32-
33-
34-
return (
35-
<div className = "App h-screen dark:bg-richBlue">
36-
37-
<AppRouter/>
38-
39-
</div>
40-
41-
// TESTING PURPOSES: CELL COMPONENT
42-
// <Canvas>
43-
// <Cell id = {1}
44-
// value = {1}
45-
// size = {1}
46-
// position = {[0, 0, 0]}
47-
// />
48-
// </Canvas>
49-
);
50-
}
11+
return (
12+
<>
13+
<div className = "App">
14+
<AppRouter/>
15+
</div>
16+
</>
17+
);
5118
}
5219

5320

5421

55-
export default App;

‎src/AppRouter.js‎

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
1-
import React from 'react';
1+
import React from 'react';
22
import {
33
BrowserRouter as Router,
44
Routes,
55
Route,
6-
} from 'react-router-dom';
7-
import SplashScreen from './components/Page/Splash/SplashScreen';
8-
import MainSortingCanvas from './components/Canvas/MainSortingCanvas';
9-
import AboutScreen from './components/Page/About/AboutScreen';
10-
import ContactScreen from './components/Page/Contact/ContactScreen';
6+
} from 'react-router-dom';
7+
import SplashScreen from './components/Page/Splash/SplashScreen';
8+
import MainSortingCanvas from './components/Canvas/MainSortingCanvas';
9+
import AboutScreen from './components/Page/About/AboutScreen';
10+
import ContactScreen from './components/Page/Contact/ContactScreen';
11+
import Display from './components/Algorithms/Display';
1112

1213

1314

@@ -17,6 +18,12 @@ function AppRouter() {
1718
<Routes>
1819
<Route exact path = "/"
1920
element = {<SplashScreen/>}/>
21+
<Route exact path = "/home"
22+
element = {<MainSortingCanvas/>}/>
23+
<Route exact path = "/dashboard"
24+
element = {<MainSortingCanvas/>}/>
25+
<Route exact path = "/dashboard-two"
26+
element = {<Display/>}/>
2027
<Route path = "/about"
2128
element = {<AboutScreen/>}/>
2229
<Route path = "/contact"

‎src/components/Algorithms/Display.js‎

Lines changed: 85 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,95 @@
1-
import {Component} from 'react';
2-
import {Canvas, useFrame} from '@react-three/fiber';
3-
4-
5-
6-
export class Display extends Component {
7-
constructor(fArgs) {
8-
super(fArgs);
9-
this.state = {
10-
displayType: fArgs.displayType,
11-
algorithm : fArgs.algorithm,
12-
dataString : fArgs.dataString,
13-
width : fArgs.innerWidth,
14-
height : fArgs.innerHeight,
15-
aspect : fArgs.aspect,
16-
perspective: fArgs.perspective,
17-
};
18-
}
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';
195

6+
/*
207
21-
componentDidMount() {
22-
window.addEventListener('resize', this.handleWindowSizeChange);
23-
}
8+
This is the main display of the game/visual demonstration.
9+
It contains the board, board control interface, orbital(camera)/Input interface,
10+
the game control interface, and the navigation bar.
2411
12+
"The Mediator"
13+
or a psudo
14+
"Layers Pattern"
2515
26-
componentWillUnmount() {
27-
window.removeEventListener('resize', this.handleWindowSizeChange);
28-
}
16+
*/
17+
export default function Display() {
18+
const [layoutType, setLayout] = useState('grid');
19+
const [selectedPoint, setSelectedPoint] = useState(null);
20+
const [selectedGoalPoint, setSelectedGoalPoint] = useState(null);
21+
const [selectedStartPoint, setSelectedStartPoint] = useState(null);
22+
const board = new Array(10000).fill(0).map(
23+
(i, id, type: string) => ({id}));
2924

25+
const boardRef = useRef(); // Mutable(Persistant) board reference object.
3026

31-
handleWindowSizeChange = () => {
32-
this.setState({width: window.innerWidth, height: window.innerHeight});
27+
const handleResetCamera = () => {
28+
boardRef.current.resetCamera();
3329
};
30+
const handleResetBoard = () => {
31+
boardRef.current.resetBoard();
32+
}
3433

3534

36-
render() {
37-
const {width, height} = this.state;
38-
const aspect = width / height;
39-
return (
40-
<Canvas children = {}>
35+
return (
36+
<>
37+
<Navigation/>
38+
<div className = "display-container">
4139

42-
</Canvas>
43-
);
44-
};
45-
}
40+
<Board
41+
ref = {boardRef}
42+
board = {board}
43+
layoutType = {layoutType}
44+
selectedPoint = {selectedPoint}
45+
onSelectPoint = {setSelectedPoint}
46+
/>
47+
<div className = "point-desc">
48+
{selectedPoint && (
49+
<p>Cell:
50+
#<span className = "point-select">{selectedPoint.id}</span>
51+
</p>
52+
)}
53+
</div>
54+
55+
<div className = "control-group-one">
56+
<h2 className = "control-header">Display <br/> Strategy</h2>
57+
<button
58+
onClick = {() => setLayout('grid')}
59+
className = {layoutType === 'grid' ? 'active' : undefined}
60+
>
61+
Grid
62+
</button>
63+
<button
64+
onClick = {() => setLayout('circular')}
65+
className = {layoutType === 'circular' ? 'active' : undefined}
66+
>
67+
Circular
68+
</button>
69+
70+
<button className = "reset-button" onClick = {handleResetCamera}>
71+
View Reset
72+
</button>
73+
</div>
74+
75+
<div className = "control-group-two">
76+
<h2 className = "control-header">Control</h2>
77+
<button
78+
79+
>
80+
81+
</button>
82+
<button
83+
84+
>
85+
86+
</button>
87+
88+
<button className = "reset-button" onClick = {handleResetCamera}>
89+
Settings Reset
90+
</button>
91+
</div>
92+
</div>
93+
</>
94+
);
95+
}

0 commit comments

Comments
 (0)