update quickSort.js

algos/quickSort.js

@@ -6,24 +6,24 @@ function* partition(arr, start, end) {
 	const mid = Math.floor((start + end) / 2);
 	// select the pivot
 	let pivot = Number(arr[mid].dataset.value);
-	yield new AlgoAnimation({ type: "color", value: "magenta", index: mid });
+	//yield new AlgoAnimation({ type: "color", value: "magenta", index: mid });
 	// move pivot to end;
 	[arr[mid], arr[end]] = [arr[end], arr[mid]];
 	yield new AlgoAnimation({ type: "swap", indexes: [mid, end] });
-	yield new AlgoAnimation({ type: "color", value: "cyan", index: end });
+	//yield new AlgoAnimation({ type: "color", value: "cyan", index: end });
 
 	// set bounds
 	let left = start;
-	let right = end - 1;
+	let right = end;
 
 	while (left <= right) {
 		yield new AlgoAnimation({
 			type: "colors",
 			elements: [
 				{ index: left, value: BAR_COLORS.compare },
 				{ index: right, value: BAR_COLORS.compare },
-				{ index: start, value: "orange" },
-				{ index: end - 1, value: "orange" },
+				//{ index: start, value: "orange" },
+				//{ index: end - 1, value: "orange" },
 			],
 		});
 

script.js

@@ -4,14 +4,13 @@
 
 // Global arrays to hold elements and generators (animations).
 let ARRAY = [];
-/**
- * @type {Generator[]}
- */
 let ANIMATIONS = [];
+let MANUAL_STOP = false; // If stop button was pressed
 
 const MIN_SPEED = 1; // ms
 const MAX_SPEED = 1000; // ms
 const DEFAULT_SPEED = 1; // ms
+
 const BAR_COLORS = {
 	default: "black",
 	compare: "yellow",
@@ -73,8 +72,8 @@ buttonSortArray.addEventListener("click", async (event) => {
 	const chosenSortingAlgo = AVAILABLE_SORTING_ALGORITHMS[selectAlgo.value];
 	ANIMATIONS = chosenSortingAlgo(ARRAY);
 	await renderAnimations(ANIMATIONS);
-
-	if (!isSorted(ARRAY)) {
+	// Verify we are sorted only if we were not manually interrupted.
+	if (!MANUAL_STOP && !isSorted(ARRAY)) {
 		alert("not sorted, something went wrong!");
 	}
 
@@ -85,13 +84,17 @@ buttonSortArray.addEventListener("click", async (event) => {
 	selectArraySize.disabled = false;
 	// Disable stop button after sorting
 	buttonStopSorting.disabled = true;
+
+	// Reset manual stop "flag".
+	MANUAL_STOP = false;
 });
 
 /**
  * Handle stop button click.
  * We replace ANIMATIONS with a fake generator.
  */
 buttonStopSorting.addEventListener("click", (event) => {
+	MANUAL_STOP = true;
 	ANIMATIONS.return("stopped");
 	const e = new MouseEvent("click");
 	buttonGenerateArray.dispatchEvent(e);
@@ -126,6 +129,7 @@ selectAlgo.addEventListener("change", (event) => {
 	buttonSortArray.disabled = !ARRAY.length;
 	if (selectArraySize.value) {
 		buttonGenerateArray.disabled = false;
+		buttonGenerateArray.click();
 	}
 });