Skip to content

Commit c5ae3e5

Browse files
mime9599mime9599
committed
pagination and routing
1 parent 5a483b4 commit c5ae3e5

File tree

18 files changed

+308
-69
lines changed

18 files changed

+308
-69
lines changed

‎package-lock.json‎

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

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@
88
"@testing-library/user-event": "^13.5.0",
99
"react": "^18.2.0",
1010
"react-dom": "^18.2.0",
11+
"react-router": "^6.3.0",
12+
"react-router-dom": "^6.3.0",
1113
"web-vitals": "^2.1.4"
1214
},
1315
"devDependencies": {

‎src/App.js‎

Lines changed: 42 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,53 @@
11
import './App.css';
2-
import React, {Component} from 'react';
3-
import { Strategy, changeRed } from './components/Strategy/Strategy'
4-
import { InputField } from './components/Canvas/InputField.js';
5-
import MainCanvas from './components/Canvas/MainCanvas';
2+
import React, {Component} from 'react';
3+
import {
4+
BrowserRouter as Router,
5+
Switch,
6+
Route,
7+
Link,
8+
} from 'react-router-dom';
69

7-
class App extends Component {
10+
import Header from './partial/Header';
11+
import Selection from './partial/Selection';
12+
import Footer from './partial/Footer';
13+
import {Strategy, changeRed} from './components/Strategy/Strategy';
14+
import {InputField} from './components/Canvas/InputField.js';
15+
import MainCanvas from './components/Canvas/MainCanvas';
16+
import SplashScreen from './components/Container/Splash/SplashScreen';
17+
import {Routes} from 'react-router';
18+
19+
20+
21+
function About() {
22+
return null;
23+
}
824

9-
constructor(props) {
10-
super(props);
11-
// this.changeRed = new changeRed();
12-
// this.Strategy = new Strategy().setStrategy = this.changeRed;
13-
}
25+
26+
27+
class App extends Component {
1428

1529
render() {
1630
return (
17-
<>
18-
<MainCanvas/>
19-
</>
20-
)
31+
<>
32+
<Router>
33+
{/*<Layout>*/}
34+
<Routes>
35+
{/* A <Switch> looks through its children <Route>s and
36+
renders the first one that matches the current URL. */}
37+
<Route exact path = "/about" element = {<About/>}/>
38+
<Route exact path = "/home" element = {<MainCanvas/>}/>
39+
{/*<Route exact path = "/" element = {<SplashScreen/>}/>*/}
40+
<Route exact path = "/" element = {<MainCanvas/>}/>
41+
</Routes>
42+
{/*</Layout>*/}
43+
</Router>
44+
</>
45+
46+
);
47+
2148
}
2249
}
2350

2451

52+
2553
export default App;

‎src/components/Algorithms/MiniMax.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
2+
3+
class MiniMax {
4+
constructor(params) {
5+
this.objectRepresentation = params.objectRepresentation;
6+
7+
}
8+
9+
getObjectRepresentation() {
10+
return this.objectRepresentation.type;
11+
}
12+
13+
14+
15+
}

‎src/components/Canvas/Canvas.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ class Canvas extends Component {
1616

1717

1818
return (
19-
<div className="w-full flex justify-center mt-[4em]">
19+
<div className="flex justify-center mt-[4em]">
2020
<div className="flex items-end">
2121
{generatedArray.map((element) => {
2222
return <div key={Math.random()} style={{height: element+'px', width: BAR_WIDTH+'px'}} className={`bg-red-400 m-[1px]`}/>

‎src/components/Canvas/InputField.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@ class InputField extends Component {
55

66
constructor(props) {
77
super(props);
8-
8+
this.InputHandler = new InputHandler();
9+
this.name = props.name;
910
}
1011

1112

@@ -14,8 +15,8 @@ class InputField extends Component {
1415

1516

1617
return (
17-
<div className="flex flex-col items-center justify-center">
18-
<p className="text-gray-700 mb-5">Array size should not exceed {InputHandler.getAllowedMaxInputSize()}.</p>
18+
<div className={this.name[0] + " "}>
19+
<p className={this.name[1] + " "}>Array size should not exceed {InputHandler.getAllowedMaxInputSize()}.</p>
1920
<div className="flex">
2021
<input placeholder="Enter array size" value={inputArrayLength} onChange={(e) => {
2122
(Number(e.target.value) || !e.target.value)

‎src/components/Canvas/MainCanvas.js‎

Lines changed: 19 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,34 @@
1-
import React, { Component } from 'react'
2-
import { InputHandler } from '../InputHandler/InputHandler';
3-
import { Canvas } from './Canvas';
4-
import { InputField } from './InputField';
1+
import React, {Component} from 'react';
2+
import './main-canvas.css';
3+
import {InputHandler} from '../InputHandler/InputHandler';
4+
import {Canvas} from './Canvas';
5+
import {InputField} from './InputField';
6+
57

68

79
class MainCanvas extends Component {
810
constructor(props) {
911
super(props);
1012
this.InputHandler = new InputHandler();
11-
this.state = {
13+
this.state = {
1214
inputArrayLength: '',
13-
generatedArray: InputHandler.getGeneratedArray,
14-
}
15+
generatedArray : InputHandler.getGeneratedArray,
16+
};
1517
}
1618

19+
1720
render() {
1821
return (
19-
<>
20-
<InputField InputHandler={this}/>
21-
<Canvas generatedArray={this.state.generatedArray}/>
22-
</>
23-
)
22+
<>
23+
<div className = "w-full flex justify-center mt-[4em]">
24+
<InputField name={["generic-input", "instructions"]} InputHandler = {this}/>
25+
<Canvas generatedArray = {this.state.generatedArray}/>
26+
</div>
27+
</>
28+
);
2429
}
2530
}
2631

2732

28-
export default MainCanvas
33+
34+
export default MainCanvas;

‎src/components/Canvas/main-canvas.css‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
2+
.generic-input {
3+
align-content: center;
4+
display: flex;
5+
flex-direction: column;
6+
justify-content: center;
7+
align-items: center;
8+
width: 100%;
9+
height: 100%;
10+
11+
}
12+
13+
.generic-input .instructions {
14+
color: white;
15+
margin-bottom: 1.25rem;
16+
--tw-text-opacity: 1;
17+
z-index: 1;
18+
}

‎src/components/Container/Splash/SplashScreen.js‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import React from 'react'
2+
import './splash.css';
3+
import './cu-icon.png';
4+
import './background.jpg';
5+
6+
7+
const SplashScreen = () => {
8+
9+
10+
return (
11+
<>
12+
<div className = "splash_background"> {/*-- background --*/}
13+
<div className = "splash_overlay">
14+
<div className = "splash_content">
15+
<h1 className = "splash_title">{"Algorithm Visualizer"}<span>{'{}'}</span></h1>
16+
<h2 className = "splash_subheading">
17+
<span>CU Boulder</span>
18+
</h2>
19+
<div className = "splash_Links">
20+
21+
</div>
22+
</div>
23+
</div>
24+
</div>
25+
{/*-- background --*/}
26+
</>
27+
)
28+
}
29+
30+
31+
32+
export default SplashScreen;

‎src/components/Container/Splash/background.jpg‎

718 KB
Loading

0 commit comments

Comments
 (0)