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 8a3355b

Browse files
Implementing Movable start and end nodes
1 parent 11b5cdb commit 8a3355b

File tree

4 files changed

+157
-25
lines changed

4 files changed

+157
-25
lines changed

‎src/Components/GridBlockComponent.js

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -31,18 +31,19 @@ export default class GridBlockComponent extends Component {
3131

3232

3333

34-
<div id={`node-${this.props.row}-${this.props.col}`} className={`grid-block ${clsName}`}
34+
<div id={`node-${this.props.row}-${this.props.col}`} className={`grid-block ${this.props.start?'start':this.props.end?'end':'unvisited'}${clsName}`}
3535

3636
onMouseDown={() => this.props.onMouseDown(this.props.row,this.props.col)}
3737
onMouseEnter={() => this.props.onMouseEnter(this.props.row,this.props.col)}
3838
onMouseUp={() => this.props.onMouseUp()}
3939

4040
>
41-
<Board id={`board-${this.props.row}-${this.props.col}`} className={`board`} row={this.props.row} col={this.props.col} grdRender={this.props.grdRender.bind(this)} funcChd={this.funcChild.bind(this)}>
42-
{(s||e) && this.props.unchanged
41+
{/* <Board id={`board-${this.props.row}-${this.props.col}`} className={`board`} row={this.props.row} col={this.props.col} grdRender={this.props.grdRender.bind(this)} funcChd={this.funcChild.bind(this)}>
42+
{ this.props.unchanged && (this.props.start||this.props.end)
43+
4344
?
4445
45-
<Card id={`card-${this.props.row}-${this.props.col}`} className={`card`} draggable={(s || e)&&this.props.unchanged ? true: false } row={this.props.row} col={this.props.col}>
46+
<Card id={`card-${this.props.row}-${this.props.col}`} className={`card`} draggable={this.props.unchanged && (this.props.start || this.props.end) ? true: false } row={this.props.row} col={this.props.col} funcChd={this.funcChild.bind(this)}>
4647
4748
{console.log("row"+this.props.row +" "+ this.props.col)}
4849
{console.log(this.props.unchanged)}
@@ -53,7 +54,7 @@ export default class GridBlockComponent extends Component {
5354
:
5455
''
5556
}
56-
</Board>
57+
</Board> */}
5758

5859
</div>
5960

‎src/Components/GridLayoutComponent.js

Lines changed: 118 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ class GridLayout extends Component {
3434
boxes:val2
3535
})
3636
console.log(document.getElementById(`node-${this.state.start[0]}-${this.state.start[1]}`));
37+
console.log(this.state.boxes);
3738
}
3839
}
3940

@@ -42,6 +43,7 @@ class GridLayout extends Component {
4243
this.setState({
4344
boxes:val
4445
})
46+
// this.updateStyle();
4547
}
4648

4749
change = (va) => {
@@ -55,6 +57,7 @@ class GridLayout extends Component {
5557

5658
this.setState({
5759
changed:true,start: va, unchanged: false},()=>{
60+
5861
console.log("after state ", this.state.start);
5962
this.setState({
6063
changed:false,
@@ -78,6 +81,23 @@ class GridLayout extends Component {
7881

7982
// change(1);
8083

84+
// updateStyle(){
85+
// for(let row=0;row<19;row++){
86+
// for(let col=0;col<60;col++){
87+
// document.getElementById(`node-${row}-${col}`).className = 'unvisited';
88+
// if((row===this.state.start[0] && col===this.state.start[1]))
89+
// {
90+
// document.getElementById(`node-${row}-${col}`).className = 'start';
91+
// }
92+
// else if((row===this.state.end[0] && col===this.state.end[1]))
93+
// {
94+
// document.getElementById(`node-${row}-${col}`).className = 'end';
95+
// }
96+
// }
97+
// }
98+
// }
99+
100+
81101
gridRender(){
82102
const b=[];
83103
for(let row=0;row<19;row++){
@@ -107,7 +127,7 @@ class GridLayout extends Component {
107127

108128
return b;
109129
}
110-
130+
111131

112132
grdRender(r,c){
113133
const b=[];
@@ -132,6 +152,7 @@ class GridLayout extends Component {
132152
aDis:0
133153
};
134154
currRow.push(val);
155+
document.getElementById(`node-${row}-${col}`).className = 'unvisited';
135156
}
136157
b.push(currRow)
137158
}
@@ -180,12 +201,12 @@ class GridLayout extends Component {
180201
const node = val[row][col];
181202
if(st)
182203
{
183-
if(!node.iswall && !node.isweight){
204+
if(!node.iswall && !node.isweight&&!node.strt&&!node.end){
184205
document.getElementById(`node-${row}-${col}`).className = '';
185206
}
186207
}
187208
else{
188-
if(!node.iswall){
209+
if(!node.iswall&&!node.strt&&!node.end){
189210
document.getElementById(`node-${row}-${col}`).className = '';
190211
}
191212
}
@@ -416,7 +437,7 @@ class GridLayout extends Component {
416437
const node = visitedNodes[i];
417438
console.log(node)
418439
console.log(node.row+" "+node.col);
419-
console.log(document.getElementById(`node-${node.row}-${node.col}`).id)
440+
console.log(document.getElementById(`node-${node.row}-${node.col}`).className)
420441
document.getElementById(`node-${node.row}-${node.col}`).className +=
421442
' node node-visited';
422443
}, 10 * i);
@@ -612,29 +633,110 @@ class GridLayout extends Component {
612633
this.animateDijkstra(visitedNodes, shortestPath);
613634
}
614635

636+
clearSurround(row,col){
637+
if(row!=0)
638+
document.getElementById(`node-${row-1}-${col}`).className = 'gridblock unvisited';
639+
if(col!=0)
640+
document.getElementById(`node-${row}-${col-1}`).className = 'gridblock unvisited';
641+
if(col!=59)
642+
document.getElementById(`node-${row}-${col+1}`).className = 'gridblock unvisited';
643+
if(row!=18)
644+
document.getElementById(`node-${row+1}-${col}`).className = 'gridblock unvisited';
645+
646+
}
647+
615648
handleMouseDown(row,col) {
616649
console.log("Down");
617-
const newgrid = this.getNewGridWithWall(this.state.boxes,row,col);
618-
this.setState({
619-
boxes:newgrid,
620-
isMousePressed:true
621-
});
622-
document.getElementById(`node-${row}-${col}`).className = 'node-wall';
650+
const node = this.state.boxes[row][col]
651+
console.log(node)
652+
if(!node.strt && !node.end)
653+
{
654+
const newgrid = this.getNewGridWithWall(this.state.boxes,row,col);
655+
this.setState({
656+
boxes:newgrid,
657+
isMousePressed:true
658+
});
659+
console.log("wall -",row,col);
660+
document.getElementById(`node-${row}-${col}`).className = 'node-wall';
661+
}
662+
else if(node.strt)
663+
{
664+
this.setState({
665+
isStartPressed:true
666+
});
667+
console.log(" -",row,col);
668+
document.getElementById(`node-${row}-${col}`).className = '';
669+
}
670+
else if(node.end)
671+
{
672+
this.setState({
673+
isEndPressed:true
674+
});
675+
console.log(" -",row,col);
676+
document.getElementById(`node-${row}-${col}`).className = '';
677+
}
678+
623679

624680
}
625681

626682
handleMouseEnter(row,col){
627683
console.log("Enter -"+row +'-'+col);
684+
const node = this.state.boxes[row][col]
628685

629-
if( ! this.state.isMousePressed ) return;
630-
const newGrid = this.getNewGridWithWall(this.state.boxes,row,col);
631-
this.setState({boxes:newGrid});
686+
if( ! this.state.isMousePressed && !this.state.isStartPressed && !this.state.isEndPressed) return;
687+
if(this.state.isMousePressed)
688+
{
689+
if(!node.strt && !node.end)
690+
{
691+
const newGrid = this.getNewGridWithWall(this.state.boxes,row,col);
692+
this.setState({boxes:newGrid});
693+
}
694+
}
695+
696+
else if(this.state.isStartPressed)
697+
{
698+
document.getElementById(`node-${row}-${col}`).className = 'start';
699+
this.setState({
700+
// boxes:newGrid,
701+
start:[row,col],
702+
changed:true
703+
},()=>{
704+
this.setState({
705+
changed:false
706+
})
707+
})
708+
this.clearSurround(row,col);
709+
}
710+
711+
else if(this.state.isEndPressed)
712+
{
713+
document.getElementById(`node-${row}-${col}`).className = 'end';
714+
this.setState({
715+
end:[row,col],
716+
changed:true
717+
},()=>{
718+
this.setState({
719+
changed:false
720+
})
721+
})
722+
this.clearSurround(row,col);
723+
}
632724
}
633725

634726
handleMouseUp(){
635727
console.log("Up");
636-
637-
this.setState({isMousePressed:false});
728+
if(this.state.isMousePressed)
729+
{
730+
this.setState({isMousePressed:false});
731+
}
732+
else if(this.state.isStartPressed)
733+
{
734+
this.setState({isStartPressed:false});
735+
}
736+
else if(this.state.isEndPressed)
737+
{
738+
this.setState({isEndPressed:false});
739+
}
638740
}
639741

640742

@@ -651,6 +753,7 @@ class GridLayout extends Component {
651753
return newGrid;
652754
}
653755

756+
654757
chngstart(){
655758
this.grdRender();
656759
}

‎src/Components/card.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,9 @@ function card(props) {
88
setTimeout(()=>{
99
target.style.display='none';
1010
},0);
11+
// e.target.appendChild(card);
12+
// console.log('r'+props.row+'c'+props.col);
13+
// props.funcChd([props.row,props.col]);
1114
}
1215

1316
const dragOver = e =>{

‎src/css/gridblock.css

Lines changed: 30 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -34,11 +34,6 @@
3434
background:red;
3535
} */
3636

37-
.fa {
38-
display: flex !important;
39-
justify-content: center;
40-
}
41-
4237
.node {
4338
width: 28px;
4439
height: 28px;
@@ -211,3 +206,33 @@ li.nav-item {
211206
display: inline-block;
212207
padding-top: 6px;
213208
}
209+
210+
.start {
211+
position: relative;
212+
background-image: url(http://icons.iconarchive.com/icons/custom-icon-design/flatastic-9/256/Start-icon.png);
213+
background-position: center;
214+
background-repeat: no-repeat;
215+
background-size: contain;
216+
animation-duration: 1.5s;
217+
animation-timing-function: ease-out;
218+
animation-direction: alternate;
219+
animation-iteration-count: 1;
220+
animation-fill-mode: forwards;
221+
animation-play-state: running;
222+
}
223+
224+
/* */
225+
226+
.end {
227+
position: relative;
228+
background-image: url(http://pngimg.com/uploads/dot/dot_PNG14.png);
229+
background-position: center;
230+
background-repeat: no-repeat;
231+
background-size: contain;
232+
animation-duration: 1.5s;
233+
animation-timing-function: ease-out;
234+
animation-direction: alternate;
235+
animation-iteration-count: 1;
236+
animation-fill-mode: forwards;
237+
animation-play-state: running;
238+
}

0 commit comments

Comments
(0)

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