Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 11b5cdb

Browse files
Adding some styles
1 parent 7c5756f commit 11b5cdb

File tree

3 files changed

+100
-46
lines changed

3 files changed

+100
-46
lines changed

‎src/Components/GridLayoutComponent.js

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -104,9 +104,10 @@ class GridLayout extends Component {
104104
}
105105
b.push(currRow)
106106
}
107-
107+
108108
return b;
109109
}
110+
110111

111112
grdRender(r,c){
112113
const b=[];
@@ -253,7 +254,7 @@ class GridLayout extends Component {
253254
iswall: !this.prime(ran) && !node.strt && !node.end ? true : false
254255
};
255256
if(!this.prime(ran) && !node.strt && !node.end){
256-
document.getElementById(`node-${row}-${col}`).className = 'node-wall';
257+
document.getElementById(`node-${row}-${col}`).className += 'node-wall';
257258
}
258259
c.push(val);
259260
}
@@ -292,7 +293,7 @@ class GridLayout extends Component {
292293
iswall: false
293294
};
294295
if(!this.prime(ran) && !node.strt && !node.end){
295-
document.getElementById(`node-${row}-${col}`).className = 'node-weight';
296+
document.getElementById(`node-${row}-${col}`).className += 'node-weight';
296297
}
297298
c.push(val);
298299
}
@@ -394,8 +395,8 @@ class GridLayout extends Component {
394395
console.log(node);
395396
console.log(node.row+" "+node.col);
396397

397-
document.getElementById(`node-${node.row}-${node.col}`).className =
398-
'node node-shortest-path';
398+
document.getElementById(`node-${node.row}-${node.col}`).className +=
399+
'node node-shortest-path';
399400
}, 10 * i);
400401
}
401402
}
@@ -416,8 +417,8 @@ class GridLayout extends Component {
416417
console.log(node)
417418
console.log(node.row+" "+node.col);
418419
console.log(document.getElementById(`node-${node.row}-${node.col}`).id)
419-
document.getElementById(`node-${node.row}-${node.col}`).className =
420-
'node node-visited';
420+
document.getElementById(`node-${node.row}-${node.col}`).className +=
421+
'node node-visited';
421422
}, 10 * i);
422423
}
423424
}
@@ -438,8 +439,8 @@ class GridLayout extends Component {
438439
setTimeout(() => {
439440
const node = visitedNodes[i];
440441
console.log(node);
441-
document.getElementById(`node-${node.row}-${node.col}`).className =
442-
'node node-visited';
442+
document.getElementById(`node-${node.row}-${node.col}`).className +=
443+
'node node-visited';
443444
}, 10 * i);
444445
}
445446
}
@@ -458,8 +459,8 @@ class GridLayout extends Component {
458459

459460
setTimeout(() => {
460461
const node = visitedNodes[i];
461-
document.getElementById(`node-${node.row}-${node.col}`).className =
462-
'node node-visited';
462+
document.getElementById(`node-${node.row}-${node.col}`).className +=
463+
'node node-visited';
463464
}, 10 * i);
464465
}
465466
}
@@ -478,8 +479,8 @@ class GridLayout extends Component {
478479

479480
setTimeout(() => {
480481
const node = visitedNodes[i];
481-
document.getElementById(`node-${node.row}-${node.col}`).className =
482-
'node node-visited';
482+
document.getElementById(`node-${node.row}-${node.col}`).className +=
483+
'node node-visited';
483484
}, 10 * i);
484485
}
485486
}
@@ -697,6 +698,7 @@ class GridLayout extends Component {
697698
unchanged={this.state.unchanged}
698699
mouseIsPressed={this.state.isMousePressed}
699700
iswall={c.iswall}
701+
weight={c.isweight}
700702

701703
onMouseDown ={(row,col) => this.handleMouseDown(row,col)}
702704
onMouseEnter = {(row,col) => this.handleMouseEnter(row,col)}

‎src/Components/HeaderComponent.js

Lines changed: 31 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -65,34 +65,44 @@ class Header extends Component{
6565

6666
return(
6767
<div>
68-
<Navbar className="nav-bg">
68+
<Navbar darkexpand="md"className="nav-bg">
6969
<div className="container row">
7070
<NavbarToggler onClick={this.togglefunc}/>
7171

72-
<div>
73-
<NavbarBrand className="mr-auto" href="/">
74-
<img height="70px" src= {Img} alt="Algo-Visualizer" />
72+
<divclassName="nav">
73+
<NavbarBrand className="ml-auto" href="/">
74+
<img src= {Img}height="60" alt="Algo-Visualizer" />
7575
</NavbarBrand>
7676
<br/>
7777
<br/>
7878

79-
<Form onSubmit={this.handleSubmit}>
80-
<FormGroup>
81-
<Input type='select' className="select" name='algo' onChange={(e) => this.setState({ algo: e.target.value })}>
82-
<option value='null'>Algorithm</option>
83-
<option value='Dijkstra'>Dijkstra</option>
84-
<option value='BFS'>BFS</option>
85-
<option value='GBFS'>Greedy BFS</option>
86-
<option value='DFS'>DFS</option>
87-
<option value='BBFS'>Bi-Directional BFS</option>
88-
<option value='A*'>A star</option>
89-
</Input>
90-
</FormGroup>
91-
<button type="submit" value="submit" className="btn btn-outline-info sub-btn" >{`visualize ${this.state.algo !== 'null'? this.state.algo : '' }`} </button>
92-
</Form>
93-
<button className="btn btn-primary btn-1" onClick={() => this.props.randomGrid()}>Random Grid</button>
94-
<button className="btn btn-primary btn-2" onClick={() => this.props.randomWeight()}>Random Weight Grid</button>
95-
<button className="btn btn-primary btn-2" onClick={() => this.props.clearGrid()}>Clear Grid</button>
79+
<Collapse isOpen={this.state.isNavOpen} className="collapse navbar-collapse">
80+
<Nav className="mr-auto">
81+
<Form onSubmit={this.handleSubmit}>
82+
<NavItem className="navbar-nav">
83+
<FormGroup>
84+
<Input type='select' className="select" name='algo' onChange={(e) => this.setState({ algo: e.target.value })}>
85+
<option value='null'>Algorithm</option>
86+
<option value='Dijkstra'>Dijkstra</option>
87+
<option value='BFS'>BFS</option>
88+
<option value='GBFS'>Greedy BFS</option>
89+
<option value='DFS'>DFS</option>
90+
<option value='BBFS'>Bi-Directional BFS</option>
91+
<option value='A*'>A star</option>
92+
</Input>
93+
</FormGroup>
94+
<button type="submit" value="submit" className="btn btn-outline-info sub-btn" >{`visualize ${this.state.algo !== 'null'? this.state.algo : '' }`} </button>
95+
</NavItem>
96+
97+
98+
</Form>
99+
<NavItem className="nav2">
100+
<button className="btn btn-primary btn-1" onClick={() => this.props.randomGrid()}>Random Grid</button>
101+
<button className="btn btn-primary btn-2" onClick={() => this.props.randomWeight()}>Random Weight Grid</button>
102+
<button className="btn btn-primary btn-2" onClick={() => this.props.clearGrid()}>Clear Grid</button>
103+
</NavItem>
104+
</Nav>
105+
</Collapse>
96106
</div>
97107

98108
</div>

‎src/css/gridblock.css

Lines changed: 54 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
.grid-row div {
2-
border: 1.5px gray ridge;
3-
height: 25px;
4-
width: 25px;
2+
border: 0.5px rgba(0,190,218,0.75) ridge;
3+
height: 28px;
4+
width: 28px;
55
display: inline-block;
66
margin: 0px;
77
padding: 0px;
@@ -30,7 +30,6 @@
3030
font-weight:900;
3131
content:"\f192";
3232
}
33-
3433
.end-node{
3534
background:red;
3635
} */
@@ -41,8 +40,8 @@
4140
}
4241

4342
.node {
44-
width: 25px;
45-
height: 25px;
43+
width: 28px;
44+
height: 28px;
4645
outline: 1px solid rgb(175, 216, 248);
4746
display: inline-block;
4847
}
@@ -58,7 +57,17 @@
5857
animation-play-state: running;
5958
}
6059
.node-weight {
61-
background-color: cadetblue;
60+
position: relative;
61+
background-image: url(https://cdn0.iconfinder.com/data/icons/sports-and-games-1-1/65/37-512.png);
62+
background-position: center;
63+
background-repeat: no-repeat;
64+
background-size: contain;
65+
animation-duration: 1.5s;
66+
animation-timing-function: ease-out;
67+
animation-direction: alternate;
68+
animation-iteration-count: 1;
69+
animation-fill-mode: forwards;
70+
animation-play-state: running;
6271
}
6372

6473
@keyframes visitedAnimation {
@@ -119,9 +128,10 @@
119128
display: inline-flex;
120129
color: blanchedalmond;
121130
background-color: rgb(0, 47, 76);
122-
margin-left: 200px;
131+
margin-left: 100px;
123132
border-radius: 300px;
124-
padding: 15px;
133+
margin-left: 50px;
134+
padding: 13px;
125135
}
126136
.form-group {
127137
margin-bottom: 1rem;
@@ -133,12 +143,12 @@
133143
}
134144

135145
.btn-1 {
136-
margin-left: 100px;
146+
margin-left: 50px;
137147
display: inline-block;
138148
background-color: rgb(0, 47, 76);
139149
}
140150
.btn-2 {
141-
margin-left: 100px;
151+
margin-left: 50px;
142152
display: inline-block;
143153
background-color: rgb(0, 47, 76);
144154
}
@@ -166,6 +176,38 @@
166176
.board {
167177
border: none !important;
168178
}
169-
.grid-block {
179+
/* .grid-block {
170180
border: none;
181+
} */
182+
183+
.nav {
184+
display: inline-flex;
185+
padding-left: 0;
186+
margin-bottom: 0;
187+
list-style: none;
188+
flex-wrap: wrap;
189+
align-content: center;
190+
}
191+
192+
.navbar-nav {
193+
display: inline-block;
194+
margin-top: 10px;
195+
}
196+
197+
form {
198+
display: inline-block;
199+
}
200+
201+
/* .navbar-dark .navbar-brand {
202+
color: #fff;
203+
display: block;
204+
} */
205+
206+
li.nav-item {
207+
margin-top: 60px;
208+
}
209+
210+
.nav2 {
211+
display: inline-block;
212+
padding-top: 6px;
171213
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /