Skip to content

Commit 763fd30

Browse files
ian-chuangian-chuang
committed
new landing page and other tweaks
1 parent a81efd9 commit 763fd30

File tree

6 files changed

+48
-183
lines changed

6 files changed

+48
-183
lines changed

‎algorithm_visualizer/public/graph_example.PNG‎

10.5 KB
Loading

‎algorithm_visualizer/public/sorting_example.PNG‎

5.67 KB
Loading

‎algorithm_visualizer/src/pages/GraphPage.js‎

Lines changed: 20 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { dijkstra, aStarManhattan, aStarDiagonal, aStarEuclidean, depthFirstSear
44
import { recursiveDivision, randomMaze, randomWeightedMaze, prims, dfsMaze, binaryTreeMaze, terrainMap, fileReaderTerrain } from "./graph_components/mazeAlgorithms";
55

66
import { useState, useEffect, useRef } from "react";
7+
import { Link } from "react-router-dom";
78

89
import {Node} from './graph_components/Node';
910
import Webcam from "react-webcam";
@@ -27,19 +28,19 @@ let animationSpeed = 50;
2728
const pxToNode = px => Math.floor(px / parseFloat(getComputedStyle(document.documentElement).fontSize) / nodeSize);
2829

2930
export const GraphPage = () => {
30-
// grid states
31+
// grid
3132
const grid = useRef([]).current;
3233
const gridRef = useRef();
3334
const [dimensions, setDimensions] = useState(null);
3435

35-
// slider states
36+
// slider
3637
const exampleWeightRef = useRef();
3738

38-
// webcam states
39+
// webcam
3940
const webCamRef = useRef();
4041
const [webcamEnabled, setWebcamState] = useState(false);
4142

42-
// tutorial states
43+
// tutorial
4344
const [tutorialPage, setTutorialPage] = useState(1);
4445

4546
// INITIALIZATION
@@ -63,10 +64,11 @@ export const GraphPage = () => {
6364
document.removeEventListener("mousedown", handleMouseDown);
6465
document.removeEventListener("mousemove", handleMouseMove);
6566
document.removeEventListener("mouseup", handleMouseUp);
66-
gridRef.current.removeEventListener("contextmenu", e => e.preventDefault());
6767
};
6868
}, []);
6969

70+
// READ IMAGES
71+
7072
const readWebcam = () => {
7173
// https://github.com/mozmorris/react-webcam/issues/65#issuecomment-385126201
7274
const dataURLtoBlob = (dataurl) => {
@@ -260,7 +262,7 @@ export const GraphPage = () => {
260262
resetGrid();
261263
const walls = mazeFunction(grid);
262264

263-
const delay = 3000 / walls.length;
265+
const delay = 2250 / walls.length;
264266
const wallsPerIteration = delay > 2 ? 1 : Math.ceil(2 / delay);
265267

266268
for (let i = 0; i < walls.length; i += wallsPerIteration) {
@@ -317,7 +319,7 @@ export const GraphPage = () => {
317319
}
318320
}
319321

320-
const resizeGrid = () => {
322+
const resizeGrid = async () => {
321323
clearAllTimeouts();
322324

323325
let rows = pxToNode(gridRef.current.offsetHeight);
@@ -326,7 +328,7 @@ export const GraphPage = () => {
326328
if (rows > 1 && rows % 2 === 0) rows--;
327329
if (cols > 1 && cols % 2 === 0) cols--;
328330

329-
setDimensions({
331+
await setDimensions({
330332
rows: rows,
331333
cols: cols
332334
});
@@ -427,7 +429,7 @@ export const GraphPage = () => {
427429
{/* SIDEBAR */}
428430
<div className="sidebar d-flex flex-column bg-black">
429431

430-
<h5 className="pb-3 mb-3 border-bottom"><a href="/"><i className="fas fa-arrow-circle-left fa-lg me-3"></i></a>Graph Algorithms</h5>
432+
<h5 className="pb-3 mb-3 border-bottom"><Link to="/"><i className="fas link-info fa-arrow-circle-left fa-lg me-3"></i></Link>Graph Algorithms</h5>
431433

432434
<div className="mb-3 gap-2 d-flex flex-row justify-content-start flex-wrap">
433435
<button className="btn btn-sm btn-warning" onClick={resetGrid}>Reset Board</button>
@@ -512,21 +514,25 @@ export const GraphPage = () => {
512514

513515
{/* Animation Speed Slider */}
514516
<label className="form-label d-block mb-1">Animation Speed : </label>
515-
<input type="range" step="1" min="1" max="100" defaultValue={50} className="form-range"
517+
<input type="range" step="1" min="1" max="100" defaultValue={50} className="form-range mb-2"
516518
onChange={(e) => {
517519
clearVisualization(true);
518520
animationSpeed = parseInt(e.target.value);
519521
}} />
522+
523+
<button className="btn btn-outline-light" data-bs-toggle="modal" data-bs-target="#tutorial" onClick={()=>{setTutorialPage(1)}}>
524+
<i class="fas fa-question-circle"></i>
525+
Tutorial
526+
</button>
520527
</div>
521-
<li type="button" data-bs-toggle="modal" data-bs-target="#tutorial" onClick={()=>{setTutorialPage(1)}}>Tutorial</li>
522528
</div>
523529

524530
{/* Graph Algorithm Grid */}
525531
{makeGridElement()}
526532

527533
{/* Webcam Popup Window */}
528-
<div className="modal fade" id="modal" tabindex="-1" aria-labelledby="modal-label" aria-hidden="true">
529-
<div className="modal-dialog modal-dialog-centered">
534+
<div className="modal fade" id="modal" tabindex="-1" aria-labelledby="modal-label" aria-hidden="false">
535+
<div className="modal-dialog modal-dialog-centered modal-lg">
530536
<div className="modal-content camera-modal">
531537
<div className="modal-header">
532538
<h5 className="modal-title text-white" id="modal-label">Webcam Terrain Generator</h5>
@@ -543,7 +549,7 @@ export const GraphPage = () => {
543549
</div>
544550

545551
{/* Tutorial Popup Window */}
546-
<div className="modal show fade" id="tutorial" tabindex="-1" aria-labelledby="myLargeModalLabel" aria-hidden="true">
552+
<div className="modal fade" id="tutorial" tabindex="-1" aria-labelledby="myLargeModalLabel" aria-hidden="true">
547553
<div className="modal-dialog modal-dialog-centered modal-lg">
548554
<div className="modal-content camera-modal">
549555
<div className="modal-header">

‎algorithm_visualizer/src/pages/LandingPage.css‎

Lines changed: 10 additions & 152 deletions
Original file line numberDiff line numberDiff line change
@@ -4,167 +4,25 @@
44
width: 100%;
55
margin: 0;
66
padding: 0;
7-
overflow: hidden;
87
position: absolute;
98
z-index: -1;
109
background-color: black;
1110
}
1211

13-
.landingPage #title {
14-
position: absolute;
15-
top: 50%;
16-
left: 0;
17-
right: 0;
18-
color: #FFF;
19-
text-align: center;
20-
font-family: sans-serif;
21-
font-weight: 300;
22-
font-size: 90px;
23-
letter-spacing: 10px;
24-
margin-top: -140px;
25-
padding-left: 10px;
26-
}
27-
28-
.landingPage #title span {
29-
background: -webkit-linear-gradient(white, #38495a);
30-
-webkit-background-clip: text;
31-
-webkit-text-fill-color: transparent;
32-
}
33-
34-
.landingPage #navigation {
35-
position: absolute;
36-
top: 5%;
12+
.landingPage img {
13+
object-fit: contain;
3714
width: 100%;
38-
text-align: center;
39-
align-content: center;
40-
align-self: center;
4115
}
4216

43-
.landingPage .btn {
44-
display: table-cell;
45-
vertical-align: middle;
46-
font-size: 1.3rem;
47-
border-width: 2px;
48-
font-weight: bold;
49-
font-family: Lato;
50-
margin-right:15px;
51-
margin-left: 15px;
52-
color: white;
53-
background: transparent;
54-
border-color: white;
55-
border-radius: 150px;
56-
padding: 20px;
57-
width: 200px;
58-
height: 70px;
17+
.landingPage .algo {
18+
min-width: 20rem;
19+
width: 40%;
20+
text-align: center;
21+
cursor: pointer;
22+
transition: transform .2s;
5923
}
6024

61-
.landingPage .btn:hover {
62-
color: black;
63-
background: white;
64-
border-color: black;
25+
.landingPage .algo:hover {
26+
transform: scale(1.1)
6527
}
6628

67-
.landingPage .bubbles{
68-
position:absolute;
69-
width:100%;
70-
height: 100%;
71-
z-index:-1;
72-
overflow:hidden;
73-
top:0;
74-
left:0;
75-
}
76-
.landingPage .bubble{
77-
position: absolute;
78-
bottom:-100px;
79-
width:40px;
80-
height: 40px;
81-
background:#f1f1f1;
82-
border-radius:50%;
83-
opacity:0.5;
84-
animation: rise 10s infinite ease-in;
85-
}
86-
.landingPage .bubble:nth-child(1){
87-
width:40px;
88-
height:40px;
89-
left:10%;
90-
animation-duration:8s;
91-
}
92-
.landingPage .bubble:nth-child(2){
93-
width:20px;
94-
height:20px;
95-
left:20%;
96-
animation-duration:8s;
97-
animation-delay:1s;
98-
}
99-
.landingPage .bubble:nth-child(3){
100-
width:50px;
101-
height:50px;
102-
left:35%;
103-
animation-duration:12s;
104-
animation-delay:2s;
105-
}
106-
.landingPage .bubble:nth-child(4){
107-
width:80px;
108-
height:80px;
109-
left:50%;
110-
animation-duration:15s;
111-
animation-delay:0s;
112-
}
113-
.landingPage .bubble:nth-child(5){
114-
width:35px;
115-
height:35px;
116-
left:55%;
117-
animation-duration:9s;
118-
animation-delay:1s;
119-
}
120-
.landingPage .bubble:nth-child(6){
121-
width:45px;
122-
height:45px;
123-
left:65%;
124-
animation-duration:11s;
125-
animation-delay:3s;
126-
}
127-
.landingPage .bubble:nth-child(7){
128-
width:90px;
129-
height:90px;
130-
left:70%;
131-
animation-duration:16s;
132-
animation-delay:2s;
133-
}
134-
.landingPage .bubble:nth-child(8){
135-
width:25px;
136-
height:25px;
137-
left:80%;
138-
animation-duration:9s;
139-
animation-delay:2s;
140-
}
141-
.landingPage .bubble:nth-child(9){
142-
width:15px;
143-
height:15px;
144-
left:70%;
145-
animation-duration:8s;
146-
animation-delay:1s;
147-
}
148-
.landingPage .bubble:nth-child(10){
149-
width:90px;
150-
height:90px;
151-
left:25%;
152-
animation-duration:14s;
153-
animation-delay:4s;
154-
}
155-
@keyframes rise{
156-
0%{
157-
opacity: 35%;
158-
bottom:-100px;
159-
transform:translateX(0);
160-
}
161-
50%{
162-
transform:translate(100px);
163-
opacity: 8%;
164-
}
165-
100%{
166-
bottom:1080px;
167-
transform:translateX(-200px);
168-
opacity: 0%;
169-
}
170-
}

‎algorithm_visualizer/src/pages/LandingPage.js‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,25 @@
11
import "./LandingPage.css";
2+
import { useHistory, Link } from "react-router-dom";
23

34
export const LandingPage = () => {
45

6+
const history = useHistory()
7+
58
return (
6-
7-
<div className="landingPage bubbles">
8-
{/* Navigation Buttons to Algorithms Visualizers */}
9-
<div id="navigation">
10-
<button className="btn" onClick={event => window.location.href='/sorting'}>Sorting</button>
11-
<button className="btn" onClick={event => window.location.href='/graph'}>Graphs</button>
12-
</div>
9+
<div className="landingPage d-flex align-items-center justify-content-center p-3">
10+
<div className="w-100 d-flex justify-content-around flex-wrap gap-4 m-auto">
11+
<div onClick={() => history.push('/sorting')} className="algo">
12+
<h2 className="mb-4">Sorting Algorithms</h2>
13+
<img src={process.env.PUBLIC_URL + "/sorting_example.PNG"} />
14+
15+
</div>
1316

14-
{/* Title*/}
15-
<div id="title">
16-
<span><b>ALGORITHM</b></span><br/>
17-
<span><b>VISUALIZER</b></span>
17+
<div onClick={() => history.push('/graph')} className="algo">
18+
<h2 className="mb-4">Graph Algorithms</h2>
19+
<img src={process.env.PUBLIC_URL + "/graph_example.PNG"} />
20+
21+
</div>
1822
</div>
19-
20-
{/* Bubbles*/}
21-
{[...Array(10)].map((e, i) => <div className="bubble" key={i}></div>)}
22-
2323
</div>
2424
);
2525
}

‎algorithm_visualizer/src/pages/SortingPage.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
import { useState, useEffect } from "react"
22
import { bubbleSortAnimation, insertionSortAnimation, quickSortAnimation, shellSortAnimation, mergeSortAnimation } from "./sort_components/sortingAlgorithms.js"
3+
import { Link } from "react-router-dom";
34
import "./SortingPage.css";
45

56
const DEFAULT_COLOR = "#0dcaf0";
67
const SORTED_COLOR = "#28a745";
78
const SWAP_COLOR = "#dc3545";
8-
const HEIGHT = 50;
9+
const HEIGHT = 60;
910

1011
export const SortingPage = () => {
1112

@@ -178,7 +179,7 @@ export const SortingPage = () => {
178179
return (
179180
<div className="container sortingPage">
180181

181-
<h1 className="title"> <a href="/"><i class="fas fa-arrow-circle-left fa-lg me-3" aria-hidden="true"></i></a>Sorting Algorithms</h1>
182+
<h1 className="title"> <Link to="/"><i class="fas fa-arrow-circle-left fa-lg me-3 link-info" aria-hidden="true"></i></Link>Sorting Algorithms</h1>
182183

183184
{/* Dynamically sets bar heights */}
184185
<div className="bars-container mb-3" style={{'height': `${HEIGHT}vh`}}>

0 commit comments

Comments
 (0)