script.js

let array = [];
let delay = 200;
let size = 30;
let isSorting = false;
let stopRequested = false;

function generateArray() {
  const barsContainer = document.getElementById("bars");
  barsContainer.innerHTML = "";
  size = document.getElementById("size").value;
  array = [];

  for (let i = 0; i < size; i++) {
    let value = Math.floor(Math.random() * 300) + 10;
    array.push(value);

    // Bar element
    let bar = document.createElement("div");
    bar.classList.add("bar");
    bar.style.height = value + "px";
    bar.style.width = (600 / size) + "px";

    // Label for number
    let label = document.createElement("span");
    label.classList.add("label");
    label.innerText = value;

    bar.appendChild(label);
    barsContainer.appendChild(bar);
  }
}

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

function updateBars(arr, colors = []) {
  const bars = document.getElementsByClassName("bar");
  for (let i = 0; i < arr.length; i++) {
    bars[i].style.height = arr[i] + "px";
    bars[i].style.background = colors[i] || "#43cea2";
    bars[i].querySelector(".label").innerText = arr[i];
  }
}

// ---------------- Sorting Algorithms ---------------- //

async function bubbleSort() {
  let arr = array.slice();
  for (let i = 0; i < arr.length - 1; i++) {
    for (let j = 0; j < arr.length - i - 1; j++) {
      if (stopRequested) return;
      updateBars(arr, arr.map((_, idx) =>
        idx === j || idx === j + 1 ? "tomato" : "#43cea2"
      ));
      if (arr[j] > arr[j + 1]) {
        [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];
      }
      await sleep(delay);
    }
  }
  updateBars(arr, Array(arr.length).fill("mediumseagreen"));
}

async function selectionSort() {
  let arr = array.slice();
  for (let i = 0; i < arr.length; i++) {
    let minIdx = i;
    for (let j = i + 1; j < arr.length; j++) {
      if (stopRequested) return;
      updateBars(arr, arr.map((_, idx) =>
        idx === minIdx || idx === j ? "tomato" : "#43cea2"
      ));
      if (arr[j] < arr[minIdx]) minIdx = j;
      await sleep(delay);
    }
    [arr[i], arr[minIdx]] = [arr[minIdx], arr[i]];
  }
  updateBars(arr, Array(arr.length).fill("mediumseagreen"));
}

async function insertionSort() {
  let arr = array.slice();
  for (let i = 1; i < arr.length; i++) {
    let key = arr[i];
    let j = i - 1;
    while (j >= 0 && arr[j] > key) {
      if (stopRequested) return;
      arr[j + 1] = arr[j];
      j--;
      updateBars(arr, arr.map((_, idx) =>
        idx === j + 1 ? "tomato" : "#43cea2"
      ));
      await sleep(delay);
    }
    arr[j + 1] = key;
  }
  updateBars(arr, Array(arr.length).fill("mediumseagreen"));
}

// ---------------- Controls ---------------- //

async function startSorting() {
  if (isSorting) return;
  isSorting = true;
  stopRequested = false;

  let algo = document.getElementById("algorithm").value;
  if (algo === "bubble") await bubbleSort();
  else if (algo === "selection") await selectionSort();
  else if (algo === "insertion") await insertionSort();

  isSorting = false;
}

function stopSorting() {
  stopRequested = true;
  isSorting = false;
}

function resetArray() {
  stopRequested = true;
  isSorting = false;
  generateArray();
}

// ---------------- Event Listeners ---------------- //

document.getElementById("speed").addEventListener("input", (e) => {
  delay = e.target.value;
});

document.getElementById("startBtn").addEventListener("click", startSorting);
document.getElementById("stopBtn").addEventListener("click", stopSorting);
document.getElementById("resetBtn").addEventListener("click", resetArray);

// Generate initial array
generateArray();