Skip to content

Commit 459bd3c

Browse files
harshthakur3harshthakur3
committed
implemented QuickSort
1 parent ca18504 commit 459bd3c

File tree

5 files changed

+186
-1
lines changed

5 files changed

+186
-1
lines changed

‎src/algorithms/sorting/quicksort.js‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
// src/algorithms/sorting/quickSort.js
2+
export function* quickSort(array) {
3+
const arr = [...array];
4+
5+
// Helper generator function for the recursive quicksort
6+
function* quickSortHelper(low, high) {
7+
if (low < high) {
8+
// Partition the array and get the pivot index
9+
yield* partition(low, high);
10+
const pivotIndex = arr.lastPivotIndex;
11+
12+
// Recursively sort left subarray
13+
yield* quickSortHelper(low, pivotIndex - 1);
14+
15+
// Recursively sort right subarray
16+
yield* quickSortHelper(pivotIndex + 1, high);
17+
} else if (low === high) {
18+
// Single element is already sorted
19+
yield { type: "sorted", index: low };
20+
}
21+
}
22+
23+
// Partition function using Lomuto partition scheme
24+
function* partition(low, high) {
25+
// Choose the last element as pivot
26+
const pivot = arr[high];
27+
yield { type: "pivot", index: high };
28+
29+
let i = low - 1; // Index of smaller element
30+
31+
for (let j = low; j < high; j++) {
32+
// Highlight current partition range
33+
yield { type: "partition", indices: [low, high] };
34+
35+
// Compare current element with pivot
36+
yield { type: "compare", indices: [j, high] };
37+
38+
if (arr[j] < pivot) {
39+
i++;
40+
if (i !== j) {
41+
// Swap elements
42+
[arr[i], arr[j]] = [arr[j], arr[i]];
43+
yield { type: "swap", indices: [i, j], array: [...arr] };
44+
}
45+
}
46+
}
47+
48+
// Place pivot in its correct position
49+
if (i + 1 !== high) {
50+
[arr[i + 1], arr[high]] = [arr[high], arr[i + 1]];
51+
yield { type: "swap", indices: [i + 1, high], array: [...arr] };
52+
}
53+
54+
// Mark pivot as sorted in its final position
55+
yield { type: "sorted", index: i + 1 };
56+
57+
// Store pivot index for recursive calls
58+
arr.lastPivotIndex = i + 1;
59+
}
60+
61+
// Start the quicksort process
62+
yield* quickSortHelper(0, arr.length - 1);
63+
64+
// Mark all elements as sorted
65+
yield { type: "done", array: arr };
66+
}

‎src/components/sorting/QuickSortVisualizer.jsx‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import React from "react";
2+
3+
const COLORS = {
4+
default: "bg-blue-500 shadow-[0_0_10px_#3b82f6]",
5+
comparing: "bg-yellow-400 shadow-[0_0_12px_#facc15]",
6+
min: "bg-green-500 shadow-[0_0_12px_#22c55e]",
7+
swap: "bg-red-500 shadow-[0_0_12px_#ef4444]",
8+
};
9+
10+
export default function BubbleSortVisualizer({ array, highlight }) {
11+
const maxValue = Math.max(...array, 1); // Avoid division by zero
12+
const containerHeight = 288; // px (matches h-72)
13+
14+
return (
15+
<div className="flex items-end justify-center space-x-2 h-72 mt-10 transition-all duration-500">
16+
{array.map((value, idx) => {
17+
let color = COLORS.default;
18+
if (highlight?.type === "compare" && highlight.indices?.includes(idx))
19+
color = COLORS.comparing;
20+
if (highlight?.type === "min" && highlight.index === idx)
21+
color = COLORS.min;
22+
if (highlight?.type === "swap" && highlight.indices?.includes(idx))
23+
color = COLORS.swap;
24+
25+
// Normalize height relative to the maximum value
26+
const height = Math.max((value / maxValue) * containerHeight, 15); // minimum 15px for visibility
27+
28+
return (
29+
<div
30+
key={idx}
31+
className={`${color} w-6 transition-all duration-300 rounded-t-md`}
32+
style={{ height: `${height}px` }}
33+
></div>
34+
);
35+
})}
36+
</div>
37+
);
38+
}

‎src/pages/Homepage.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,7 @@ const Homepage = () => {
9696
Explore Now <ArrowRight size={18} />
9797
</button>
9898
<a
99-
href="https://github.com/"
99+
href="https://github.com/OPCODE-Open-Spring-Fest/Algo-Visualizer"
100100
target="_blank"
101101
rel="noopener noreferrer"
102102
className="px-6 py-3 border border-gray-400 hover:bg-white/10 text-gray-200 font-semibold rounded-full flex items-center gap-2 transition-all duration-300"

‎src/pages/sorting/QuickSort.jsx‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
import React, { useState } from "react";
2+
import { Toaster } from "react-hot-toast";
3+
import QuickSortVisualizer from "../../components/sorting/QuickSortVisualizer";
4+
import { quickSort } from "../../algorithms/sorting/quicksort";
5+
6+
export default function QuickSort() {
7+
const [array, setArray] = useState([]);
8+
const [input, setInput] = useState("");
9+
const [highlight, setHighlight] = useState(null);
10+
const [isRunning, setIsRunning] = useState(false);
11+
12+
const handleStart = async () => {
13+
if (isRunning || array.length === 0) return;
14+
setIsRunning(true);
15+
const gen = quickSort(array);
16+
for (let step of gen) {
17+
setHighlight(step);
18+
if (step.array) setArray([...step.array]);
19+
await new Promise((r) => setTimeout(r, 500));
20+
}
21+
setHighlight({ type: "done" });
22+
setIsRunning(false);
23+
};
24+
25+
const handleReset = () => {
26+
setArray([]);
27+
setInput("");
28+
setHighlight(null);
29+
};
30+
31+
const handleInput = (e) => {
32+
setInput(e.target.value);
33+
const numbers = e.target.value
34+
.split(",")
35+
.map((n) => parseInt(n.trim()))
36+
.filter((n) => !isNaN(n));
37+
setArray(numbers);
38+
};
39+
40+
return (
41+
<div className="min-h-screen bg-black text-gray-200 flex flex-col items-center p-6">
42+
<Toaster position="top-center" />
43+
<h1 className="text-4xl font-extrabold mb-8 text-indigo-400 drop-shadow-lg">
44+
Quick Sort Visualizer
45+
</h1>
46+
<input
47+
type="text"
48+
value={input}
49+
onChange={handleInput}
50+
placeholder="Enter numbers separated by commas"
51+
className="border-2 border-indigo-500 bg-gray-900 text-indigo-200 rounded-lg p-3 w-96 text-center shadow-lg focus:ring-2 focus:ring-indigo-400 outline-none"
52+
/>
53+
<div className="space-x-4 mt-6">
54+
<button
55+
onClick={handleStart}
56+
disabled={isRunning}
57+
className={`${
58+
isRunning
59+
? "bg-indigo-700 text-gray-300 cursor-not-allowed"
60+
: "bg-indigo-600 hover:bg-indigo-500"
61+
} px-6 py-2 rounded-lg text-white font-semibold shadow-md transition-all duration-300`}
62+
>
63+
{isRunning ? "Sorting..." : "Start Visualization"}
64+
</button>
65+
<button
66+
onClick={handleReset}
67+
className="bg-gray-700 hover:bg-gray-600 px-6 py-2 rounded-lg text-white font-semibold shadow-md transition-all duration-300"
68+
>
69+
Reset
70+
</button>
71+
</div>
72+
<div className="mt-15">
73+
<QuickSortVisualizer array={array} highlight={highlight} />
74+
</div>
75+
</div>
76+
);
77+
}

‎src/pages/sorting/SortingPage.jsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import React, { useState } from "react";
33
import SelectionSort from "./SelectionSort";
44
import BubbleSort from "./BubbleSort";
55
import InsertionSort from "./InsertionSort";
6+
import QuickSort from "./QuickSort";
67

78
export default function SortingPage() {
89
const [selectedAlgo, setSelectedAlgo] = useState("");
@@ -16,6 +17,8 @@ export default function SortingPage() {
1617
// You can add more later like:
1718
case "bubble":
1819
return <BubbleSort />;
20+
case "quick":
21+
return <QuickSort />;
1922
// case "merge": return <MergeSort />;
2023
default:
2124
return (
@@ -44,6 +47,7 @@ export default function SortingPage() {
4447
<option value="selection">Selection Sort</option>
4548
<option value="bubble">Bubble Sort</option>
4649
<option value="insertion">Insertion Sort</option>
50+
<option value="quick">Quick Sort</option>
4751
</select>
4852

4953
<button

0 commit comments

Comments
 (0)