-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathTutorial.jsx
131 lines (92 loc) · 5.23 KB
/
Tutorial.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
import React from "react";
import { Carousel } from "react-bootstrap";
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'
import "./Tutorial.css";
import SideSwipe from "./animations/SideSwipe";
export default class Tutorial extends React.Component {
render() {
const iconStyle = {
height: "700px"
};
return (
<div class="main-body">
<div className="instructions">
<h2 className="iconId"><SideSwipe text="Icon Identifier" /></h2>
<div class="icons">
<div class="icon-img st-pt"></div>
<div class="icon-text">This is the starting node in the visualizer</div>
</div>
<div class="icons">
<div class="icon-img wall"></div>
<div class="icon-text">This is the node with walls.</div>
</div>
<div class="icons">
<div class="icon-img wei"></div>
<div class="icon-text">This node has weight ( traffic ), the path takes this more time to pass through it.</div>
</div>
<div class="icons">
<div class="icon-img flag"></div>
<div class="icon-text">This node is the flag node means path should pass through this node before going to the final destination.</div>
</div>
<div class="icons">
<div class="icon-img fin-pt"></div>
<div class="icon-text">This is the final destination for the shortest path.</div>
</div>
</div>
<div className='container-fluid'>
<Carousel className="carousel-control" interval={4000} keyboard={false} pauseOnHover={false}>
<Carousel.Item className="carousel-item" style={iconStyle}>
<div className="content">
<div class="content-high">
<SideSwipe text="Algorithm Change" /> Option
</div>
<div class="content-low">
This is used to select the algorithm to run in the visualizer.
</div>
<div class="img algo-choose-img"></div>
</div>
<Carousel.Caption><h3>Grid Control</h3></Carousel.Caption>
</Carousel.Item>
<Carousel.Item className="carousel-item" style={iconStyle}>
<div className="content">
<div class="content-high">
<SideSwipe text="Change Starting-Finishing" /> Option
</div>
<div class="content-low">
This is used to select starting point and ending point for the algorithm to run in the visualizer.
</div>
<div class="img start-end-img"></div>
</div>
<Carousel.Caption><h3>Grid Control</h3></Carousel.Caption>
</Carousel.Item>
<Carousel.Item className="carousel-item" style={iconStyle}>
<div className="content">
<div class="content-high">
<SideSwipe text="Weight Toggling" /> Option
</div>
<div class="content-low">
This is used to select the weights for the paths in the algorithm.
</div>
<div class="img toggle-weight-img"></div>
</div>
<Carousel.Caption><h3>Grid Control</h3></Carousel.Caption>
</Carousel.Item>
<Carousel.Item className="carousel-item" style={iconStyle}>
<div className="content">
<div class="content-high">
<SideSwipe text="Flag Toggle" /> Option
</div>
<div class="content-low">
This is used to select the flags ( from which path should traverse ).
</div>
<div class="img toggle-flag-img"></div>
</div>
<Carousel.Caption><h3>Grid Control</h3></Carousel.Caption>
</Carousel.Item>
</Carousel>
</div>
</div>
);
}
}