script.js

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const algoSelect = document.getElementById('algoSelect');
const sizeSlider = document.getElementById('sizeSlider');
const speedSlider = document.getElementById('speedSlider');
const sizeVal = document.getElementById('sizeVal');
const speedVal = document.getElementById('speedVal');
const sortBtn = document.getElementById('sortBtn');
const shuffleBtn = document.getElementById('shuffleBtn');

let array = [], sorting = false;
const W = canvas.width, H = canvas.height;

function genArray() {
  const size = parseInt(sizeSlider.value);
  array = Array.from({ length: size }, () => Math.floor(Math.random() * (H - 20)) + 10);
  draw(-1, -1, []);
}

function draw(compareIdx, swapIdx, sorted) {
  ctx.clearRect(0, 0, W, H);
  const barW = W / array.length;
  for (let i = 0; i < array.length; i++) {
    let color = '#6366f1';
    if (sorted.includes(i)) color = '#10b981';
    else if (i === swapIdx) color = '#f43f5e';
    else if (i === compareIdx) color = '#fbbf24';
    ctx.fillStyle = color;
    ctx.fillRect(i * barW, H - array[i], barW - 1, array[i]);
  }
}

function delay() { return 110 - parseInt(speedSlider.value); }
const sleep = (ms) => new Promise(r => setTimeout(r, ms));

async function bubbleSort() {
  for (let i = 0; i < array.length; i++) {
    for (let j = 0; j < array.length - i - 1; j++) {
      if (!sorting) return;
      draw(j, -1, []);
      await sleep(delay());
      if (array[j] > array[j + 1]) { [array[j], array[j + 1]] = [array[j + 1], array[j]]; draw(j, j + 1, []); await sleep(delay()); }
    }
  }
}

async function selectionSort() {
  for (let i = 0; i < array.length; i++) {
    let min = i;
    for (let j = i + 1; j < array.length; j++) {
      if (!sorting) return;
      draw(j, min, []);
      await sleep(delay());
      if (array[j] < array[min]) min = j;
    }
    [array[i], array[min]] = [array[min], array[i]];
    draw(i, min, []);
    await sleep(delay());
  }
}

async function insertionSort() {
  for (let i = 1; i < array.length; i++) {
    let j = i;
    while (j > 0 && array[j - 1] > array[j]) {
      if (!sorting) return;
      draw(j - 1, j, []);
      await sleep(delay());
      [array[j], array[j - 1]] = [array[j - 1], array[j]];
      j--;
    }
  }
}

async function quickSort(lo = 0, hi = array.length - 1) {
  if (lo >= hi || !sorting) return;
  let pivot = array[hi], i = lo;
  for (let j = lo; j < hi; j++) {
    if (!sorting) return;
    draw(j, hi, []);
    await sleep(delay());
    if (array[j] < pivot) { [array[i], array[j]] = [array[j], array[i]]; i++; }
  }
  [array[i], array[hi]] = [array[hi], array[i]];
  await quickSort(lo, i - 1);
  await quickSort(i + 1, hi);
}

async function mergeSort(lo = 0, hi = array.length - 1) {
  if (lo >= hi || !sorting) return;
  const mid = Math.floor((lo + hi) / 2);
  await mergeSort(lo, mid);
  await mergeSort(mid + 1, hi);
  await merge(lo, mid, hi);
}

async function merge(lo, mid, hi) {
  const left = array.slice(lo, mid + 1), right = array.slice(mid + 1, hi + 1);
  let i = 0, j = 0, k = lo;
  while (i < left.length && j < right.length) {
    if (!sorting) return;
    draw(k, -1, []);
    await sleep(delay());
    if (left[i] <= right[j]) array[k++] = left[i++];
    else array[k++] = right[j++];
  }
  while (i < left.length) array[k++] = left[i++];
  while (j < right.length) array[k++] = right[j++];
}

async function startSort() {
  if (sorting) return;
  sorting = true;
  sortBtn.disabled = true;
  const algo = algoSelect.value;
  if (algo === 'bubble') await bubbleSort();
  else if (algo === 'selection') await selectionSort();
  else if (algo === 'insertion') await insertionSort();
  else if (algo === 'quick') await quickSort();
  else if (algo === 'merge') await mergeSort();
  sorting = false;
  sortBtn.disabled = false;
  // Final animation
  for (let i = 0; i < array.length; i++) { draw(-1, -1, Array.from({ length: i }, (_, k) => k)); await sleep(15); }
  draw(-1, -1, array.map((_, i) => i));
}

sizeSlider.addEventListener('input', () => { sizeVal.textContent = sizeSlider.value; if (!sorting) genArray(); });
speedSlider.addEventListener('input', () => { speedVal.textContent = speedSlider.value; });
sortBtn.addEventListener('click', startSort);
shuffleBtn.addEventListener('click', () => { if (!sorting) genArray(); });

genArray();