Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

changes made in UI/UX #4

Open
wants to merge 1 commit into
base: Master
Choose a base branch
from
Open

changes made in UI/UX #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
134 changes: 42 additions & 92 deletions src/PathfindingVisualizer/PathfindingVisualizer.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,117 +1,67 @@

.grid {
margin: 0 0;
background-color: #050801;
}
.navbar{
width: 100vw;
height: fit-content;
background-color: gray;
/* Navbar container */
.navbar {
background-color: #333;
display: flex;
flex-direction: row;
justify-content: center;
justify-content: space-around;
align-items: center;
padding: 10px;
color: white;

}

.navbar button{
box-sizing: border-box;
appearance: none;
background-color: transparent;
border: 2px solid black;
border-radius: 0.6em;
color: black;
/* Navbar buttons */
.nav-button {
background-color: #007acc;
color: white;
margin-left: 2px;
border-radius: 2px;
padding: 10px 10px;
cursor: pointer;
display: flex;
align-self: center;
font-size: 1rem;
font-weight: 400;
line-height: 1;
margin: 20px;
padding: 1.2em 2.8em;
text-decoration: none;
text-align: center;
text-transform: uppercase;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
transition: background-color 0.3s;
}

.navbar button:hover,:focus {
color: #fff;
outline: 0;
.nav-button:hover {
background-color: #005e9d;
}

.first {
transition: box-shadow 300ms ease-in-out, color 300ms ease-in-out;
/* Navbar nodes */
.nav-nodes {
display: flex;
flex-direction: column;
align-items: center;
}

.first:hover {
box-shadow: 0 0 40px 40px lightgray inset;

.nav-node {
margin: 5px;
padding: 5px;
}

.navbar .first:after {
content: '»';
position: relative;
opacity: 0;
top: -2px;
left: 10px;
transition: 0.5s;
size: 100px;
.unvisited {
background-color: black;
color: #f7f0f0;
}

.navbar .first:hover:after {
opacity: 1;
right: 40px;
.visited {
background-color: #2ebfd8;
color: #000000;
}

.Nodes1{
margin-top: 40px;
display: flex;
flex-direction: column;
align-items: center;
line-height: 1.3;
gap:10px;
.shortest {
background-color: #f3d242;
color: #000000;
}

.Nodes2{
margin: 20px;
display: flex;
flex-direction: column;
align-items: center;
line-height: 1.3;
gap:5px;
.starting {
background-color: #4caf50;
color: #ffffff;
}

.UnvisitedNode{
height: fit-content;
width: 140px;
background-color: white;
border: 2px solid black;
border-radius: 50%;
}
.VisitedNode{
height: fit-content;
width: 140px;
background-color: #64cee4;
border: 2px solid black;
border-radius: 50%;
}
.ShortestNode{
height: fit-content;
width: 140px;
background-color: Yellow;
border: 2px solid black;
border-radius: 50%;
}
.StartingNode{
height: fit-content;
width: 140px;
background-color: Green;
border: 2px solid black;
border-radius: 50%;
.target {
background-color: #ff5722;
color: #ffffff;
}
.TargetNode{
height: fit-content;
width: 140px;
background-color: red;
border: 2px solid black;
border-radius: 50%;
}
73 changes: 42 additions & 31 deletions src/PathfindingVisualizer/PathfindingVisualizer.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React, {Component} from 'react';
import Node from './Node/Node';
import {dijkstra, getNodesInShortestPathOrder} from '../algorithms/dijkstra';
import './PathfindingVisualizer.css';
import React, { Component } from "react";
import Node from "./Node/Node";
import { dijkstra, getNodesInShortestPathOrder } from "../algorithms/dijkstra";
import "./PathfindingVisualizer.css";

const START_NODE_ROW = 10;
const START_NODE_COL = 10;
Expand All @@ -19,22 +19,22 @@ export default class PathfindingVisualizer extends Component {

componentDidMount() {
const grid = getInitialGrid();
this.setState({grid});
this.setState({ grid });
}

handleMouseDown(row, col) {
const newGrid = getNewGridWithWallToggled(this.state.grid, row, col);
this.setState({grid: newGrid, mouseIsPressed: true});
this.setState({ grid: newGrid, mouseIsPressed: true });
}

handleMouseEnter(row, col) {
if (!this.state.mouseIsPressed) return;
const newGrid = getNewGridWithWallToggled(this.state.grid, row, col);
this.setState({grid: newGrid});
this.setState({ grid: newGrid });
}

handleMouseUp() {
this.setState({mouseIsPressed: false});
this.setState({ mouseIsPressed: false });
}

animateDijkstra(visitedNodesInOrder, nodesInShortestPathOrder) {
Expand All @@ -48,7 +48,7 @@ export default class PathfindingVisualizer extends Component {
setTimeout(() => {
const node = visitedNodesInOrder[i];
document.getElementById(`node-${node.row}-${node.col}`).className =
'node node-visited';
"node node-visited";
}, 10 * i);
}
}
Expand All @@ -58,13 +58,13 @@ export default class PathfindingVisualizer extends Component {
setTimeout(() => {
const node = nodesInShortestPathOrder[i];
document.getElementById(`node-${node.row}-${node.col}`).className =
'node node-shortest-path';
"node node-shortest-path";
}, 50 * i);
}
}

visualizeDijkstra() {
const {grid} = this.state;
const { grid } = this.state;
const startNode = grid[START_NODE_ROW][START_NODE_COL];
const finishNode = grid[FINISH_NODE_ROW][FINISH_NODE_COL];
const visitedNodesInOrder = dijkstra(grid, startNode, finishNode);
Expand All @@ -73,33 +73,43 @@ export default class PathfindingVisualizer extends Component {
}

render() {
const {grid, mouseIsPressed} = this.state;
const { grid, mouseIsPressed } = this.state;

return (
<>
<div className='navbar'>
<flex className="Nodes1">
<flex className='StartingNode'>Starting Node</flex>
<flex className='TargetNode'>Target Node</flex>
</flex>
<flex>
<button className='first' onClick={() => this.visualizeDijkstra()}>Visualize Dijkstra's Algorithm</button>
</flex>
<flex>
<a href="https://sorting-visualizer-ruby.vercel.app/"><button className='first'>Go To Sorting Visualizer</button></a>
</flex>
<flex className="Nodes2">
<flex className='UnvisitedNode'>Unvisited Node</flex>
<flex className='VisitedNode'>Visited Nodes</flex>
<flex className='ShortestNode'>Shortest-path Node</flex>
</flex>

<>
<div className="navbar">
<div className="flex">
<button className="nav-button" onClick={() => this.visualizeDijkstra()}>
Visualize Dijkstra's Algorithm
</button>

<a href="https://sorting-visualizer-ruby.vercel.app/" className="nav-link">
<button className="nav-button">Go To Sorting Visualizer</button>
</a>
</div>

<div className="flex">
<div className="nav-nodes">
<div className="nav-node unvisited">Unvisited Node</div>
<div className="nav-node visited">Visited Nodes</div>
<div className="nav-node shortest">Shortest-path Node</div>
</div>
</div>
<div className="flex">
<div className="nav-nodes" style={{ padding: "20px" }}>
<div className="nav-node starting">Starting Node</div>
<div className="nav-node target">Target Node</div>
</div>
</div>
</div>
{/* Rest of your component */}
<div className="grid">
{grid.map((row, rowIdx) => {
return (
<div key={rowIdx}>
{row.map((node, nodeIdx) => {
const {row, col, isFinish, isStart, isWall} = node;
const { row, col, isFinish, isStart, isWall } = node;
return (
<Node
key={nodeIdx}
Expand All @@ -113,7 +123,8 @@ export default class PathfindingVisualizer extends Component {
this.handleMouseEnter(row, col)
}
onMouseUp={() => this.handleMouseUp()}
row={row}></Node>
row={row}
></Node>
);
})}
</div>
Expand Down