Skip to content

Commit b9137d0

Browse files
bennettohbennettoh
committed
2 parents 6e5761f + 7681a80 commit b9137d0

File tree

6 files changed

+80
-37
lines changed

6 files changed

+80
-37
lines changed

‎README.md

+1-2
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,7 @@ To do / Features
2121
- [x] Color code sorted bars
2222
- [x] Pause, play, step through
2323
- [x] Better styling
24-
- [ ] Indicate bars being compared
25-
- [ ] Profile links
24+
- [x] Indicate bars being compared
2625

2726

2827
Live demo

‎src/App.js

+22-12
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,8 @@ class App extends React.Component {
2121
currentStep: 0,
2222
timeouts: [],
2323
algorithm: 'Bubble Sort',
24-
barCount: 25,
25-
delay: 64,
24+
barCount: 10,
25+
delay: 200,
2626
}
2727

2828
ALGO_SET = {
@@ -32,7 +32,7 @@ class App extends React.Component {
3232
}
3333

3434
componentDidMount() {
35-
this.generateBars(this.state.barCount);
35+
this.generateBars();
3636
}
3737

3838
generateSteps = () => {
@@ -87,7 +87,7 @@ class App extends React.Component {
8787
}
8888

8989
stepForward = () => {
90-
if (this.state.currentStep === this.state.arraySteps.length) return;
90+
if (this.state.currentStep >= this.state.arraySteps.length - 1) return;
9191
this.clearTimeouts();
9292

9393
let currentStep = this.state.currentStep + 1;
@@ -108,6 +108,10 @@ class App extends React.Component {
108108
this.clearColorKey();
109109
};
110110

111+
changeBarCount = (barCount) => {
112+
this.setState({ barCount: barCount }, () => this.generateBars());
113+
}
114+
111115
changeDelay = (event) => {
112116
this.clearTimeouts();
113117
this.setState({
@@ -123,18 +127,18 @@ class App extends React.Component {
123127
}
124128

125129
clearColorKey = () => {
126-
let blankKey = new Array(this.state.barCount).fill(false);
130+
let blankKey = new Array(parseInt(this.state.barCount)).fill(0);
127131
this.setState({
128132
colorKey: blankKey,
129133
colorSteps: [blankKey],
130134
});
131135
}
132136

133-
generateBars = (barCount) => {
137+
generateBars = () => {
134138
this.clearTimeouts();
135139
this.clearColorKey();
136140

137-
barCount = parseInt(barCount);
141+
let barCount = parseInt(this.state.barCount);
138142
let barsTemp = [];
139143

140144
for (let i = 0; i < barCount; i++) {
@@ -153,17 +157,23 @@ class App extends React.Component {
153157
let barsDiv = this.state.array.map((value, index) => <Bar
154158
key={index}
155159
length={value}
156-
color={this.state.colorKey[index]}
160+
colorKey={this.state.colorKey[index]}
157161
/>);
158162
let playButton;
159163

160164
// Set player controls
161-
if (this.state.timeouts.length !== 0 && this.state.currentStep !== this.state.arraySteps.length - 1) {
165+
if (this.state.timeouts.length !== 0 && this.state.currentStep !== this.state.arraySteps.length) {
162166
playButton = (
163167
<IconButton onClick={() => this.clearTimeouts()} >
164168
<Pause />
165169
</IconButton>
166170
);
171+
} else if (this.state.currentStep === this.state.arraySteps.length) {
172+
playButton = (
173+
<IconButton color="secondary" onClick={() => this.generateBars()} >
174+
<RotateLeft />
175+
</IconButton>
176+
)
167177
} else {
168178
playButton = (
169179
<IconButton color="secondary" onClick={() => this.setTimeouts()} >
@@ -178,7 +188,7 @@ class App extends React.Component {
178188
</section>
179189

180190
<section className="container-small">
181-
<IconButton onClick={() => this.generateBars(this.state.barCount)} >
191+
<IconButton onClick={() => this.generateBars()} >
182192
<RotateLeft />
183193
</IconButton>
184194
<IconButton onClick={this.stepBack} >
@@ -205,12 +215,12 @@ class App extends React.Component {
205215
values={[10, 25, 50]}
206216
labels={['10 items', '25 items', '50 items']}
207217
currentValue={this.state.barCount}
208-
onChange={e => this.generateBars(e.target.value)}
218+
onChange={e => this.changeBarCount(e.target.value)}
209219
/>
210220

211221
<Form
212222
formLabel="Speed"
213-
values={[128, 64, 32]}
223+
values={[200, 100, 50]}
214224
labels={['1x', '2x', '4x']}
215225
currentValue={this.state.delay}
216226
onChange={this.changeDelay}

‎src/algorithms/bubbleSort.js

+6-3
Original file line numberDiff line numberDiff line change
@@ -9,16 +9,19 @@ const bubbleSort = (array, position, arraySteps, colorSteps) => {
99
array = swap(array, j, j + 1);
1010
}
1111
arraySteps.push(array.slice());
12+
colorKey[j] = 1;
13+
colorKey[j + 1] = 1;
1214
colorSteps.push(colorKey.slice());
13-
15+
colorKey[j] = 0;
16+
colorKey[j + 1] = 0;
1417
}
15-
colorKey[array.length - 1 - i] = true;
18+
colorKey[array.length - 1 - i] = 2;
1619
arraySteps.push(array.slice());
1720
colorSteps.push(colorKey.slice());
1821
}
1922

2023
// Remaining bars become green
21-
colorSteps[colorSteps.length - 1] = new Array(array.length).fill(true);
24+
colorSteps[colorSteps.length - 1] = new Array(array.length).fill(2);
2225
return;
2326
}
2427

‎src/algorithms/mergeSort.js

+20-13
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,10 @@ function mergeSort(array, position, arraySteps, colorSteps) {
88
let arrayA = mergeSort(array.slice(0, mid), position, arraySteps, colorSteps);
99
let arrayB = mergeSort(array.slice(mid), position + mid, arraySteps, colorSteps);
1010

11-
return merge(arrayA, arrayB, position, arraySteps, colorSteps);
11+
let arrayNew = merge(arrayA, arrayB, position, arraySteps, colorSteps);
12+
arraySteps.push(arraySteps[arraySteps.length - 1].slice());
13+
colorSteps.push(colorSteps[colorSteps.length - 1].fill(arrayNew.length === arraySteps[0].length ? 2 : 0));
14+
return arrayNew;
1215
}
1316

1417
const merge = (arrayA, arrayB, position, arraySteps, colorSteps) => {
@@ -24,28 +27,32 @@ const merge = (arrayA, arrayB, position, arraySteps, colorSteps) => {
2427
arrayNew.push(arrayB.shift());
2528
insertStep(arrayNew, position, arraySteps);
2629
}
27-
updateColor(position, colorSteps, arrayNew.length - 1, [0], []);
30+
updateColor(position, colorSteps, arrayNew.length - 1, [], []);
2831
}
2932

3033
// concatenate remaining values
31-
updateColor(position, colorSteps, arrayNew.length, arrayA, arrayB);
32-
if (arrayA.length !== 0) arrayNew = arrayNew.concat(arrayA);
33-
if (arrayB.length !== 0) arrayNew = arrayNew.concat(arrayB);
34-
insertStep(arrayNew, position, arraySteps);
34+
35+
if (arrayA.length !== 0 || arrayB.length !== 0) {
36+
updateColor(position, colorSteps, arrayNew.length, arrayA, arrayB);
37+
arrayNew = arrayNew.concat(arrayA);
38+
arrayNew = arrayNew.concat(arrayB)
39+
insertStep(arrayNew, position, arraySteps);
40+
}
3541

3642
return arrayNew;
3743
}
3844

3945
function updateColor(position, colorSteps, start, arrayA, arrayB) {
40-
if (position === 0) {
41-
// if sorted from the front, mark changed elements to be green
42-
let colorKey = colorSteps[colorSteps.length - 1].slice();
43-
colorKey.fill(true, start, start + arrayA.length + arrayB.length);
44-
colorSteps.push(colorKey);
46+
let colorKey = colorSteps[colorSteps.length - 1].slice();
47+
let end = position + start + arrayA.length + arrayB.length;
48+
start = start + position;
49+
50+
if (end === start) {
51+
colorKey.fill(1, start, end + 1);
4552
} else {
46-
// or duplicate previous step
47-
colorSteps.push(colorSteps[colorSteps.length - 1].slice());
53+
colorKey.fill(1, start, end);
4854
}
55+
colorSteps.push(colorKey);
4956
}
5057

5158
export default mergeSort;

‎src/algorithms/quickSort.js

+25-5
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ const quickSort = (array, position, arraySteps, colorSteps) => {
55
insertStep(array, position, arraySteps);
66

77
let colorKey = colorSteps[colorSteps.length - 1].slice();
8-
colorKey[position] = true;
8+
colorKey[position] = 2;
99
colorSteps.push(colorKey);
1010
return;
1111
}
@@ -21,12 +21,32 @@ const quickSort = (array, position, arraySteps, colorSteps) => {
2121

2222
// swap small value from right with big value from left
2323
while (A < B) {
24-
while (array[A] < pivot) A++;
25-
while (array[B] >= pivot) B--;
24+
while (array[A] < pivot) {
25+
insertStep(array, position, arraySteps);
26+
let colorKey = colorSteps[colorSteps.length - 1].slice();
27+
colorKey = colorKey.map(key => key === 2 ? 2 : 0);
28+
colorKey[position + A] = 1;
29+
colorKey[position + B] = 1;
30+
colorSteps.push(colorKey);
31+
A++;
32+
}
33+
while (array[B] >= pivot) {
34+
insertStep(array, position, arraySteps);
35+
let colorKey = colorSteps[colorSteps.length - 1].slice();
36+
colorKey = colorKey.map(key => key === 2 ? 2 : 0);
37+
colorKey[position + A] = 1;
38+
colorKey[position + B] = 1;
39+
colorSteps.push(colorKey);
40+
B--;
41+
}
2642
if (A < B) {
2743
swap(array, A, B);
2844
insertStep(array, position, arraySteps);
29-
colorSteps.push(colorSteps[colorSteps.length - 1].slice());
45+
let colorKey = colorSteps[colorSteps.length - 1].slice();
46+
colorKey = colorKey.map(key => key === 2 ? 2 : 0);
47+
colorKey[position + A] = 1;
48+
colorKey[position + B] = 1;
49+
colorSteps.push(colorKey);
3050
}
3151
}
3252

@@ -36,7 +56,7 @@ const quickSort = (array, position, arraySteps, colorSteps) => {
3656
swap(array, bigIndex, array.length - 1);
3757
insertStep(array, position, arraySteps);
3858
let colorKey = colorSteps[colorSteps.length - 1].slice();
39-
colorKey[position + bigIndex] = true;
59+
colorKey[position + bigIndex] = 2;
4060
colorSteps.push(colorKey);
4161

4262
// recurse on two halves

‎src/components/Bar.js

+6-2
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,14 @@
11
import React from 'react';
22
import "./Bar.css"
33

4-
function Bar({ length, color }) {
4+
function Bar({ length, colorKey }) {
5+
const COLOR_SET = ["grey", "orange", "green"];
6+
7+
let color = COLOR_SET[colorKey];
8+
59
let style = {
610
height: length,
7-
backgroundColor: color ? "green" : "grey",
11+
backgroundColor: color,
812
}
913

1014
return (

0 commit comments

Comments
 (0)