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 b40e94c

Browse files
Implementing the speed selector
1 parent 54ddfc1 commit b40e94c

File tree

3 files changed

+99
-35
lines changed

3 files changed

+99
-35
lines changed

‎src/Components/GridLayoutComponent.js

Lines changed: 45 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,9 @@ class GridLayout extends Component {
2020
start:[1,10],
2121
changed:false,
2222
end:[13,45],
23-
unchanged:true
23+
unchanged:true,
24+
speed:{slow:1000,normal:100,fast:10},
25+
curSpeed:10,
2426
}
2527
}
2628

@@ -425,7 +427,7 @@ class GridLayout extends Component {
425427

426428
document.getElementById(`node-${node.row}-${node.col}`).className +=
427429
' node node-shortest-path';
428-
}, 10 * i);
430+
}, this.state.curSpeed * i);
429431
}
430432
}
431433

@@ -436,18 +438,19 @@ class GridLayout extends Component {
436438
if (i === visitedNodes.length - 1) {
437439
setTimeout(() => {
438440
this.animateShortestPath(shortestPath);
439-
}, 10 * i);
441+
}, this.state.curSpeed * i);
440442
return;
441443
}
442444

445+
console.log("this.state.curSpeed");
443446
setTimeout(() => {
444447
const node = visitedNodes[i];
445448
console.log(node)
446449
console.log(node.row+" "+node.col);
447450
console.log(document.getElementById(`node-${node.row}-${node.col}`).className)
448451
document.getElementById(`node-${node.row}-${node.col}`).className +=
449452
' node node-visited';
450-
}, 10 * i);
453+
}, this.state.curSpeed * i);
451454
}
452455
}
453456

@@ -460,7 +463,7 @@ class GridLayout extends Component {
460463
if (i === visitedNodes.length - 1) {
461464
setTimeout(() => {
462465
this.animateShortestPath(shortestPath);
463-
}, 10 * i);
466+
}, this.state.curSpeed * i);
464467
return;
465468
}
466469

@@ -469,7 +472,7 @@ class GridLayout extends Component {
469472
console.log(node);
470473
document.getElementById(`node-${node.row}-${node.col}`).className +=
471474
' node node-visited';
472-
}, 10 * i);
475+
}, this.state.curSpeed * i);
473476
}
474477
}
475478

@@ -481,15 +484,15 @@ class GridLayout extends Component {
481484
setTimeout(() => {
482485
this.animateShortestPath(shortestPath1);
483486
this.animateShortestPath(shortestPath2);
484-
}, 10 * i);
487+
}, this.state.curSpeed * i);
485488
return;
486489
}
487490

488491
setTimeout(() => {
489492
const node = visitedNodes[i];
490493
document.getElementById(`node-${node.row}-${node.col}`).className +=
491494
' node node-visited';
492-
}, 10 * i);
495+
}, this.state.curSpeed * i);
493496
}
494497
}
495498

@@ -501,18 +504,47 @@ class GridLayout extends Component {
501504
setTimeout(() => {
502505
console.log(visitedNodes);
503506
this.animateShortestPath(visitedNodes);
504-
}, 10* i);
507+
}, this.state.curSpeed* i);
505508
return;
506509
}
507510

508511
setTimeout(() => {
509512
const node = visitedNodes[i];
510513
document.getElementById(`node-${node.row}-${node.col}`).className +=
511514
' node node-visited';
512-
}, 10 * i);
515+
}, this.state.curSpeed * i);
513516
}
514517
}
515518

519+
// speed
520+
521+
fast(){
522+
console.log("lay fast",this.state.curSpeed)
523+
this.setState({
524+
curSpeed:this.state.speed.fast
525+
})
526+
console.log("lay fast after",this.state.curSpeed)
527+
528+
}
529+
530+
normal(){
531+
console.log("lay normal",this.state.curSpeed)
532+
this.setState({
533+
curSpeed:this.state.speed.normal
534+
})
535+
console.log("lay normal after",this.state.curSpeed)
536+
}
537+
538+
slow(){
539+
console.log("lay slow",this.state.curSpeed)
540+
541+
this.setState({
542+
curSpeed:this.state.speed.slow
543+
})
544+
console.log("lay slow after",this.state.curSpeed)
545+
}
546+
547+
516548
visualizeDijkstra() {
517549
if(this.state.boxes !== []){
518550
this.clearStyles(true);
@@ -782,6 +814,9 @@ class GridLayout extends Component {
782814
clearGrid={() => this.clearGrid()}
783815
randomGrid={() => this.randomGrid()}
784816
randomWeight={()=> this.randomWeight()}
817+
fast={()=>this.fast()}
818+
slow={()=>this.slow()}
819+
normal={()=>this.normal()}
785820
></Header>
786821

787822
<div id="display"></div>

‎src/Components/HeaderComponent.js

Lines changed: 50 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ class Header extends Component{
1010
this.state = {
1111
isNavOpen:false,
1212
algo:'',
13+
speed:''
1314
}
1415

1516
this.togglefunc = this.togglefunc.bind(this);
@@ -35,25 +36,42 @@ class Header extends Component{
3536
handleSubmit(event){
3637
event.preventDefault()
3738

38-
console.log(this.state.algo)
39-
if(this.state.algo === 'Dijkstra'){
40-
this.props.dijkstra()
39+
console.log(this.state.speed)
40+
if(this.state.speed === 'fast')
41+
{
42+
this.props.fast()
4143
}
42-
else if(this.state.algo === 'BFS'){
43-
this.props.bfs()
44+
else if(this.state.speed === 'normal')
45+
{
46+
this.props.normal()
4447
}
45-
else if(this.state.algo === 'GBFS'){
46-
this.props.gbfs()
47-
}
48-
else if(this.state.algo === 'DFS'){
49-
this.props.dfs()
50-
}
51-
else if(this.state.algo === 'BBFS'){
52-
this.props.bbfs()
53-
}
54-
else if(this.state.algo === 'A*'){
55-
this.props.astar()
48+
else if(this.state.speed === 'slow')
49+
{
50+
this.props.slow()
5651
}
52+
53+
setTimeout(()=>{
54+
console.log(this.state.algo)
55+
if(this.state.algo === 'Dijkstra'){
56+
this.props.dijkstra()
57+
}
58+
else if(this.state.algo === 'BFS'){
59+
this.props.bfs()
60+
}
61+
else if(this.state.algo === 'GBFS'){
62+
this.props.gbfs()
63+
}
64+
else if(this.state.algo === 'DFS'){
65+
this.props.dfs()
66+
}
67+
else if(this.state.algo === 'BBFS'){
68+
this.props.bbfs()
69+
}
70+
else if(this.state.algo === 'A*'){
71+
this.props.astar()
72+
}
73+
},100)
74+
5775

5876
// return this.state.algo;
5977
event.preventDefault()
@@ -101,15 +119,22 @@ class Header extends Component{
101119
<button type="submit" value="submit" className="btn btn-outline-info sub-btn" >{`visualize ${this.state.algo !== 'null'? this.state.algo : '' }`} </button>
102120
</NavItem>
103121
</Form>
104-
<NavItem className="nav2">
105-
<button className="btn btn-primary btn-1" onClick={() => this.props.randomGrid()}>Random Grid</button>
106-
</NavItem>
107-
<NavItem className="nav2">
108-
<button className="btn btn-primary btn-2" onClick={() => this.props.randomWeight()}>Random Weight Grid</button>
109-
</NavItem>
110-
<NavItem className="nav2">
111-
<button className="btn btn-primary btn-2" onClick={() => this.props.clearGrid()}>Clear Grid</button>
112-
</NavItem>
122+
<NavItem className="nav2">
123+
<button className="btn btn-primary btn-1" onClick={() => this.props.randomGrid()}>Random Grid</button>
124+
</NavItem>
125+
<NavItem className="nav2">
126+
<button className="btn btn-primary btn-2" onClick={() => this.props.randomWeight()}>Random Weight Grid</button>
127+
</NavItem>
128+
<NavItem className="nav2">
129+
<button className="btn btn-primary btn-2" onClick={() => this.props.clearGrid()}>Clear Grid</button>
130+
</NavItem>
131+
<NavItem className="nav2">
132+
<Input type='select' className="select speed" name='speed' onChange={(e) => this.setState({ speed: e.target.value })}>
133+
<option value='fast'>fast</option>
134+
<option value='normal'>normal</option>
135+
<option value='slow'>slow</option>
136+
</Input>
137+
</NavItem>
113138
</Nav>
114139
</Collapse>
115140
</div>

‎src/css/gridblock.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -241,6 +241,10 @@ li.nav-item {
241241
margin-top: 60px;
242242
}
243243

244+
.speed {
245+
margin-left: 50px;
246+
}
247+
244248
@keyframes specialNodes {
245249
0% {
246250
transform: scale(0.3);

0 commit comments

Comments
(0)

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