galElmalah

const shuffledArrayInRange = (bottom = 1, top = 30) => {
  const arr = [];
  for (let i = bottom; i < top; i++) arr.push(i);
  return arr.sort((a, b) => (Math.random() > 0.5 ? 1 : -1));
};

galElmalah

const bubbleSort = (array, onAction) => {
  for (let i = 0; i < array.length; i++) {
    for (let j = 0; j < array.length; j++) {
      if (array[j] > array[j + 1]) {
        let tmp = array[j];
        array[j] = array[j + 1];
        array[j + 1] = tmp;
      }
    }
  }

galElmalah

const canvas = document.querySelector("canvas");
canvas.height = window.innerHeight;
canvas.width = window.innerWidth;
const ctx = canvas.getContext("2d");

galElmalah

function ArrayMember(x, y, width, height, color = "gray") {
  this.x = x;
  this.y = y;
  this.width = width;
  this.height = height;
  this.color = color;

  this.draw = () => {
    ctx.fillStyle = this.color;

galElmalah

const randomArray = shuffledArrayInRange();
const arrayMembers = randomArray.map((v, i) => {
  return new ArrayMember(10 * i + i, 0, 10, v * 5);
});

const drawAll = () => arrayMembers.forEach((m) => m.draw());
drawAll()

galElmalah

const ACTIONS = {
  SORT: "SORT",
  COMPARE: "COMPARE",
  SWAP: "SWAP",
};

// ---- what to do on each action ----

const actionsMap = {
  [ACTIONS.SORT]: (action, members) => members[action.data].sorted(),

galElmalah

const bubbleSort = (array, onAction) => {
  for (let i = 0; i < array.length; i++) {
    for (let j = 0; j < array.length; j++) {
      onAction({ type: ACTIONS.COMPARE, data: [j, j + 1] });
      if (array[j] > array[j + 1]) {
        let tmp = array[j];
        array[j] = array[j + 1];
        array[j + 1] = tmp;
        onAction({ type: ACTIONS.SWAP, data: [j, j + 1] });
      }

galElmalah

let ticks = 0;
const speed = 50;

bubbleSort(randomArray, (action) => {
  ticks++;
  setTimeout(() => {
    actionsMap[action.type](action, arrayMembers);
    ctx.clearRect(0, 0, innerWidth, innerHeight);
    drawAll(arrayMembers);
    arrayMembers.forEach((m) => m.resetColor());

galElmalah

const canvas = document.querySelector("canvas");
canvas.height = window.innerHeight;
canvas.width = window.innerWidth;
const ctx = canvas.getContext("2d");
const ACTIONS = {
  SORT: "SORT",
  COMPARE: "COMPARE",
  SWAP: "SWAP",
};

galElmalah

const ACTIONS = {
  SORT: "SORT",
  COMPARE: "COMPARE",
  SWAP: "SWAP",
};