From 94ec1abca81bc34c2cdfdd98f6cec5062de60d16 Mon Sep 17 00:00:00 2001 From: pankaj kumar Date: Wed, 4 Oct 2023 21:00:05 +0530 Subject: [PATCH] changes made in UI/UX --- .../PathfindingVisualizer.css | 134 ++++++------------ .../PathfindingVisualizer.jsx | 73 ++++++---- 2 files changed, 84 insertions(+), 123 deletions(-) diff --git a/src/PathfindingVisualizer/PathfindingVisualizer.css b/src/PathfindingVisualizer/PathfindingVisualizer.css index b056768..43a2741 100644 --- a/src/PathfindingVisualizer/PathfindingVisualizer.css +++ b/src/PathfindingVisualizer/PathfindingVisualizer.css @@ -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%; -} \ No newline at end of file diff --git a/src/PathfindingVisualizer/PathfindingVisualizer.jsx b/src/PathfindingVisualizer/PathfindingVisualizer.jsx index f18f624..a581a82 100644 --- a/src/PathfindingVisualizer/PathfindingVisualizer.jsx +++ b/src/PathfindingVisualizer/PathfindingVisualizer.jsx @@ -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; @@ -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) { @@ -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); } } @@ -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); @@ -73,33 +73,43 @@ export default class PathfindingVisualizer extends Component { } render() { - const {grid, mouseIsPressed} = this.state; + const { grid, mouseIsPressed } = this.state; return ( - <> -
- - Starting Node - Target Node - - - - - - - - - Unvisited Node - Visited Nodes - Shortest-path Node - + + <> +
+
+ + + + + +
+ +
+
+
Unvisited Node
+
Visited Nodes
+
Shortest-path Node
+
+
+
+
+
Starting Node
+
Target Node
+
+
+ {/* Rest of your component */}
{grid.map((row, rowIdx) => { return (
{row.map((node, nodeIdx) => { - const {row, col, isFinish, isStart, isWall} = node; + const { row, col, isFinish, isStart, isWall } = node; return ( this.handleMouseUp()} - row={row}> + row={row} + > ); })}