diff --git a/.gitignore b/.gitignore deleted file mode 100644 index 4d29575..0000000 --- a/.gitignore +++ /dev/null @@ -1,23 +0,0 @@ -# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. - -# dependencies -/node_modules -/.pnp -.pnp.js - -# testing -/coverage - -# production -/build - -# misc -.DS_Store -.env.local -.env.development.local -.env.test.local -.env.production.local - -npm-debug.log* -yarn-debug.log* -yarn-error.log* diff --git a/README.md b/README.md deleted file mode 100644 index 17d41ab..0000000 --- a/README.md +++ /dev/null @@ -1,45 +0,0 @@ -

Sorting Algorithm Visualizer

-

- Click Here for Live Demo -

- -![Screenshot from 2022-08-27 12-33-31](https://github.com/ProgrammerShri/Algorithm-Visualizer/blob/main/www_screencapture_com_2022-8-27_13_10.gif) - -## Use Cases - -

Using this application you can explain anyone, How Sorting Algorithm Works ? Because this application visualize the way of sorting in realtime.

- -## Features - -- 6 Algorithm Options -- Bar Size Randomly Change -- Length of Bar Customization (7-150) -- Visulaization Speed Customization (100ms - 1000ms) -- Sound Feature : You can listen the sorting status. - -## Algorithm Used - -- Merge Sort -- Bubble Sort -- Insertion Sort -- Selection Sort -- Quick Sort -- Heap Sort - -## Tech Stack Used - -- ReactJS for Frontend -- CSS3 for Desiging -- Data Structure for Algorithms - - -
-

Open for Contribution

-

Thanks for visting in my repository

- - - - - - - diff --git a/asset-manifest.json b/asset-manifest.json new file mode 100644 index 0000000..a1ebfb1 --- /dev/null +++ b/asset-manifest.json @@ -0,0 +1,21 @@ +{ + "files": { + "main.css": "/static/css/main.a4e1813a.chunk.css", + "main.js": "/static/js/main.b2eb2f67.chunk.js", + "main.js.map": "/static/js/main.b2eb2f67.chunk.js.map", + "runtime-main.js": "/static/js/runtime-main.fbff3301.js", + "runtime-main.js.map": "/static/js/runtime-main.fbff3301.js.map", + "static/js/2.6c6dc74b.chunk.js": "/static/js/2.6c6dc74b.chunk.js", + "static/js/2.6c6dc74b.chunk.js.map": "/static/js/2.6c6dc74b.chunk.js.map", + "index.html": "/index.html", + "static/css/main.a4e1813a.chunk.css.map": "/static/css/main.a4e1813a.chunk.css.map", + "static/js/2.6c6dc74b.chunk.js.LICENSE.txt": "/static/js/2.6c6dc74b.chunk.js.LICENSE.txt", + "static/media/github-icon.fcf5f80d.png": "/static/media/github-icon.fcf5f80d.png" + }, + "entrypoints": [ + "static/js/runtime-main.fbff3301.js", + "static/js/2.6c6dc74b.chunk.js", + "static/css/main.a4e1813a.chunk.css", + "static/js/main.b2eb2f67.chunk.js" + ] +} \ No newline at end of file diff --git a/public/favicon.ico b/favicon.ico similarity index 100% rename from public/favicon.ico rename to favicon.ico diff --git a/index.html b/index.html new file mode 100644 index 0000000..81f9436 --- /dev/null +++ b/index.html @@ -0,0 +1 @@ +Sorting Visualizer
\ No newline at end of file diff --git a/public/logo192.png b/logo192.png similarity index 100% rename from public/logo192.png rename to logo192.png diff --git a/public/logo512.png b/logo512.png similarity index 100% rename from public/logo512.png rename to logo512.png diff --git a/public/manifest.json b/manifest.json similarity index 100% rename from public/manifest.json rename to manifest.json diff --git a/package.json b/package.json deleted file mode 100644 index e99bc7b..0000000 --- a/package.json +++ /dev/null @@ -1,44 +0,0 @@ -{ - "name": "visualizer", - "version": "0.1.0", - "private": true, - "dependencies": { - "@testing-library/jest-dom": "^5.14.1", - "@testing-library/react": "^11.2.7", - "@testing-library/user-event": "^12.8.3", - "react": "^17.0.2", - "react-dom": "^17.0.2", - "react-scripts": "4.0.3", - "web-vitals": "^1.1.2" - }, - "scripts": { - "start": "react-scripts --openssl-legacy-provider start", - "build": "react-scripts --openssl-legacy-provider build", - "test": "react-scripts test", - "eject": "react-scripts eject", - "predeploy": "npm run build", - "deploy": "gh-pages -d build", - "live": "serve -s build" - }, - "eslintConfig": { - "extends": [ - "react-app", - "react-app/jest" - ] - }, - "browserslist": { - "production": [ - ">0.2%", - "not dead", - "not op_mini all" - ], - "development": [ - "last 1 chrome version", - "last 1 firefox version", - "last 1 safari version" - ] - }, - "devDependencies": { - "gh-pages": "^3.2.3" - } -} diff --git a/public/index.html b/public/index.html deleted file mode 100644 index 98d2e0c..0000000 --- a/public/index.html +++ /dev/null @@ -1,21 +0,0 @@ - - - - - - - - - - - - Sorting Visualizer - - - -
- - diff --git a/public/robots.txt b/robots.txt similarity index 100% rename from public/robots.txt rename to robots.txt diff --git a/src/App.css b/src/App.css deleted file mode 100644 index 2987f46..0000000 --- a/src/App.css +++ /dev/null @@ -1,7 +0,0 @@ -*, -html { - margin: 0; - padding: 0; - background-color: #f7fbef; - font-family: 'Roboto', sans-serif; -} diff --git a/src/App.js b/src/App.js deleted file mode 100644 index f9967d3..0000000 --- a/src/App.js +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react'; -import './App.css'; -import Visualizer from './SortingVisualizer/Visualizer'; - -function App() { - return ( - <> - - - ); -} - -export default App; diff --git a/src/Icons/GithubIcon.js b/src/Icons/GithubIcon.js deleted file mode 100644 index a9950a3..0000000 --- a/src/Icons/GithubIcon.js +++ /dev/null @@ -1,30 +0,0 @@ -import React from 'react'; -import '../SortingVisualizer/SortingVisualizer.css'; -function GithubIcon({ className }) { - return ( - { - console.log('heloo'); - window - .open( - 'https://github.com/ashirbad29/Sorting-Algorithm-Visualizer', - '_blank' - ) - .focus(); - }} - className={className} - style={{ - backgroundColor: '#00303f', - cursor: 'pointer', - }} - xmlns='http://www.w3.org/2000/svg' - width='40' - height='40' - viewBox='0 0 24 24' - > - - - ); -} - -export default GithubIcon; diff --git a/src/SortingVisualizer/SortingVisualizer.css b/src/SortingVisualizer/SortingVisualizer.css deleted file mode 100644 index 6d71138..0000000 --- a/src/SortingVisualizer/SortingVisualizer.css +++ /dev/null @@ -1,166 +0,0 @@ -.container { - width: 100%; - height: 100vh; - display: flex; - background-color: #01172e; - flex-direction: row-reverse; - align-items: flex-end; - overflow: hidden; -} - -.visualizeContainer { - margin: 0 5px 0 5px; - width: 100%; - min-width: 500px; - height: 100%; - min-height: 500px; - display: flex; - flex-direction: row; - align-items: flex-end; - justify-content: space-evenly; - background-color: inherit; -} - -.arrayBar { - width: 80px; - margin: 0px 1px 2px 1px; - transition: height 0.2s; - display: flex; - flex-direction: column; - justify-content: flex-start; - align-items: center; - border-top-left-radius: 4px; - border-top-right-radius: 4px; - padding-top: 10px; - border: 0.5px solid black; -} - -.arrayBar > span { - background-color: inherit; - margin-bottom: 5px; - color: black; - font-weight: 800; -} - -.button { - width: 12rem; - height: 3rem; - padding: 0.3rem 0rem; - border: none; - border-radius: 0.317rem; - background-color: #1481ba; - color: #fff; - font-weight: 700; - font-size: 1rem; - cursor: pointer; -} - -.button:hover { - opacity: 0.85; -} - -.sidebar { - width: 25vw; - min-width: 200px; - height: 100%; - min-height: 500px; - padding: 0 1.5vw 0 1.5vw; - background-color: #001021; - display: flex; - flex-direction: column; - justify-content: space-evenly; - align-items: center; -} - -.slider-container { - height: 3rem; - width: 12rem; - display: flex; - flex-direction: column; - align-items: center; - justify-content: space-between; - background-color: inherit; -} - -.slider-container > input { - width: 100%; - cursor: pointer; -} - -label { - color: #fff; - background-color: inherit; - font-size: 1.1rem; -} - -.select-box { - display: flex; - flex-direction: column; - align-items: center; - width: 200px; - background-color: inherit; - font-size: 16px; - cursor: pointer; -} - -header { - background-color: inherit; - color: #e7d9ea; - font-size: 25px; - text-align: center; - line-height: 2rem; - font-weight: 600; - border: 2px solid white; - border-radius: 20px; - padding: 10px; -} - -#select { - height: 35px; - padding: 5px 7px; - line-height: 20px; - font-size: 18px; - width: 100%; - border: 2px solid green; - border-radius: 6px; - margin-top: 10px; -} - -.select-box select:focus { - border: 2px solid green; -} - -.slt { - cursor: pointer; -} - -.social { - font-size: 20px; - color: white; -} - -a { - text-decoration: none; - background-color: #001021; - color: white; -} - -a:link { - text-decoration: none; - background-color: #001021; -} - -a:visited { - text-decoration: none; - background-color: #001021; -} - -a:hover { - text-decoration: none; - background-color: #001021; -} - -a:active { - text-decoration: none; - background-color: #001021; -} diff --git a/src/SortingVisualizer/Visualizer.js b/src/SortingVisualizer/Visualizer.js deleted file mode 100644 index 5cd79ec..0000000 --- a/src/SortingVisualizer/Visualizer.js +++ /dev/null @@ -1,270 +0,0 @@ -import React, { useState, useEffect } from "react"; -import colors from "./colorCodes"; -// import GithubIcon from "../Icons/GithubIcon"; -import { mergeSortAnimation } from "../algorithms/mergesort"; -import { insertionSort } from "../algorithms/insertion"; -import { selectionSort } from "../algorithms/selectionsort"; -import { bubbleSort } from "../algorithms/bubblesort"; -import { quicksort } from "../algorithms/quicksort"; -import { heapsort } from "../algorithms/heapsort"; -// stylesheet -import "./SortingVisualizer.css"; -// Sounds -// import ResetEffect from "./sounds/resetEffect.mp3"; -// import CompletedEffect from "./sounds/completedEffect.mp3"; -// import SortingStart from "./sounds/sortingStart.mp3"; -// import SortingCompleted from "./sounds/sortingCompleted.mp3"; -// Icon - -import githubIcon from "../Icons/github-icon.png"; - -// Random Number Genrator -const generateRandomNumber = (i, j) => { - return Math.floor(i + Math.random() * (j - i)); -}; - -const Visualizer = () => { - // state of the array - const [mainArray, setMainArray] = useState([]); - const [arrayLength, setArrayLength] = useState(20); - const [animationSpeed, setAnimationSpeed] = useState(100); - const [algo, setAlgo] = useState("mergesort"); - const [able, setAble] = useState(true); - - //Project Sounds - - // let resetEffect = new Audio(ResetEffect); // Play audio when bar reset - // let completedEffect = new Audio(CompletedEffect); - // let sortingStart = new Audio(SortingStart); - // let sortingCompleted = new Audio(SortingCompleted); - - //Render the Array Before DOM loades - useEffect(() => { - if (able) populateArray(arrayLength); - }, [arrayLength, algo]); - - // ABLE / DISABLE BUTTONS ETC. - useEffect(() => { - const items = document.getElementsByClassName("able"); - - if (!able) { - for (let i = 0; i < items.length; i++) { - items[i].style.pointerEvents = "none"; - items[i].disabled = true; - } - } else { - for (let i = 0; i < items.length; i++) { - items[i].style.pointerEvents = "auto"; - items[i].disabled = false; - } - } - }, [able]); - - const populateArray = (size) => { - // resetEffect.play(); // play resetEffect here - const tempArr = []; - for (let i = 0; i < size; i++) { - const item = { - idx: i, - val: generateRandomNumber(25, 500), - }; - tempArr.push(item); - if (document.getElementsByClassName("arrayBar")[i] != null) { - document.getElementsByClassName("arrayBar")[i].style.backgroundColor = - colors.primaryColor; - } - } - if (able) setMainArray(tempArr); - }; - - // colors every elements afte sorting - const colorEveryElement = (arr, counter) => { - setTimeout(() => { - // completedEffect.play(); // Play audion when bar will sorted - // sortingCompleted.play(); - const sortedArray = []; - for (let i = 0; i < arr.length; i++) { - document.getElementsByClassName("arrayBar")[i].style.backgroundColor = - colors.afterSortingColor; - - sortedArray.push({ - idx: i, - val: arr[i], - }); - } - - setMainArray(sortedArray); - setAble(true); - }, counter * animationSpeed); - }; - - // BUBBLE SORT - const bubbleSortAnimate = () => { - setAble(false); - const { arr, count } = bubbleSort(mainArray, animationSpeed); - colorEveryElement(arr, count + 1); - }; - - // MERGE SORT - const mergeSort = () => { - setAble(false); - const { sortedArray, count } = mergeSortAnimation( - mainArray, - animationSpeed - ); - colorEveryElement(sortedArray, count + 5); - }; - - // INSERTION SORT - const insertionSortAnimate = () => { - setAble(false); - const { arr, count } = insertionSort(mainArray, animationSpeed); - colorEveryElement(arr, count + 1); - }; - - // SELECTION SORT - const selectionSortAnimate = () => { - setAble(false); - const { arr, count } = selectionSort(mainArray, animationSpeed); - colorEveryElement(arr, count + 2); - }; - - //QUICK SORT - const quicksortAnimate = () => { - setAble(false); - const { arr, count } = quicksort(mainArray, animationSpeed); - colorEveryElement(arr, count + 1); - }; - - // HEAP SORT - const heapsortAnimate = () => { - setAble(false); - const { arr, count } = heapsort(mainArray, animationSpeed); - colorEveryElement(arr, count + 1); - }; - const startSorting = (algo) => { - // sortingStart.play(); - switch (algo) { - case "bubblesort": - bubbleSortAnimate(); - break; - - case "mergesort": - mergeSort(); - break; - - case "selectionsort": - selectionSortAnimate(); - break; - - case "insertionsort": - insertionSortAnimate(); - break; - case "quicksort": - quicksortAnimate(); - break; - case "heapsort": - heapsortAnimate(); - break; - default: - mergeSort(); - break; - } - }; - - return ( - <> -
-
- {mainArray.map((item) => { - return ( -
- {arrayLength < 31 && able && {item.val}} -
- ); - })} -
-
-
- Sorting Algorithm
Visualizer -
-
- - - -
- - - - -
- - setArrayLength(e.target.value)} - min="7" - max="150" - /> -
-
- - - - setAnimationSpeed(e.target.value)} - min="100" - max="1000" - /> -
-
- - Connect with me... - -
-
-
- - ); -}; - -export default Visualizer; diff --git a/src/SortingVisualizer/colorCodes.js b/src/SortingVisualizer/colorCodes.js deleted file mode 100644 index d8a19d6..0000000 --- a/src/SortingVisualizer/colorCodes.js +++ /dev/null @@ -1,10 +0,0 @@ -const colors = { - primaryColor: "#dd85e7", - afterSortingColor: "#1481BA", - pivotActiveColor: "#ff2400", - sortedElementColor: "#4cbb17", - cyan: "#40E0D0", - orange: "#FFA500", -}; - -export default colors; diff --git a/src/SortingVisualizer/sounds/CompletedEffect.mp3 b/src/SortingVisualizer/sounds/CompletedEffect.mp3 deleted file mode 100644 index b2cf855..0000000 Binary files a/src/SortingVisualizer/sounds/CompletedEffect.mp3 and /dev/null differ diff --git a/src/SortingVisualizer/sounds/ResetEffect.mp3 b/src/SortingVisualizer/sounds/ResetEffect.mp3 deleted file mode 100644 index 072d689..0000000 Binary files a/src/SortingVisualizer/sounds/ResetEffect.mp3 and /dev/null differ diff --git a/src/SortingVisualizer/sounds/sortingCompleted.mp3 b/src/SortingVisualizer/sounds/sortingCompleted.mp3 deleted file mode 100644 index 9804241..0000000 Binary files a/src/SortingVisualizer/sounds/sortingCompleted.mp3 and /dev/null differ diff --git a/src/SortingVisualizer/sounds/sortingStart.mp3 b/src/SortingVisualizer/sounds/sortingStart.mp3 deleted file mode 100644 index cd747ea..0000000 Binary files a/src/SortingVisualizer/sounds/sortingStart.mp3 and /dev/null differ diff --git a/src/algorithms/bubblesort.js b/src/algorithms/bubblesort.js deleted file mode 100644 index e4031bf..0000000 --- a/src/algorithms/bubblesort.js +++ /dev/null @@ -1,55 +0,0 @@ -import colors from '../SortingVisualizer/colorCodes'; - -export const bubbleSort = (tempArr, speed) => { - const arr = tempArr.map(item => item.val); - let count = 0; - - const arrayBars = document.getElementsByClassName('arrayBar'); - - for (let i = 0; i < arr.length - 1; i++) { - let swapped = false; - for (let j = 0; j < arr.length - i - 1; j++) { - // colors it up to active - setTimeout(() => { - arrayBars[j].style.backgroundColor = colors.cyan; - arrayBars[j + 1].style.backgroundColor = colors.cyan; - }, count++ * speed); - - if (arr[j] > arr[j + 1]) { - // swap the heights - setTimeout(() => { - arrayBars[j].style.backgroundColor = colors.pivotActiveColor; - arrayBars[j + 1].style.backgroundColor = colors.pivotActiveColor; - - let temp = arrayBars[j].style.height; - arrayBars[j].style.height = arrayBars[j + 1].style.height; - arrayBars[j + 1].style.height = temp; - }, count++ * speed); - - count += 1; - swapped = true; - - let temp = arr[j]; - arr[j] = arr[j + 1]; - arr[j + 1] = temp; - } - // color back to normal - setTimeout(() => { - arrayBars[j].style.backgroundColor = colors.primaryColor; - arrayBars[j + 1].style.backgroundColor = colors.primaryColor; - }, count++ * speed); - } - setTimeout(() => { - arrayBars[arr.length - i - 1].style.backgroundColor = - colors.sortedElementColor; - if (swapped === false) { - for (let x = 0; x < i; x++) { - arrayBars[x].style.backgroundColor = colors.sortedElementColor; - } - } - }, count * speed); - if (swapped === false) break; - } - - return { arr, count }; -}; diff --git a/src/algorithms/heapsort.js b/src/algorithms/heapsort.js deleted file mode 100644 index 7b31364..0000000 --- a/src/algorithms/heapsort.js +++ /dev/null @@ -1,79 +0,0 @@ -import { swap } from './swap'; -import colors from '../SortingVisualizer/colorCodes'; - -let count = 0; - -const arrayBars = document.getElementsByClassName('arrayBar'); - -export const heapsort = (tempArr, speed) => { - count = 0; - const arr = tempArr.map(item => item.val); - sort(arr, arr.length, speed); - return { arr, count }; -}; - -const setColor = (speed, color, i, j) => { - if (i) { - setTimeout(() => { - arrayBars[i].style.backgroundColor = color; - }, count * speed); - } - - if (j) { - setTimeout(() => { - arrayBars[j].style.backgroundColor = color; - }, count * speed); - } - count++; -}; -const swapHeights = (speed, color, i, j) => { - setTimeout(() => { - arrayBars[i].style.backgroundColor = color; - arrayBars[j].style.backgroundColor = color; - - let temp = arrayBars[i].style.height; - arrayBars[i].style.height = arrayBars[j].style.height; - arrayBars[j].style.height = temp; - }, count * speed); - - count++; -}; -// heapify -const heapify = (arr, i, n, speed) => { - let largest = i; - let leftChild = i * 2 + 1; - let rightChild = i * 2 + 2; - - if (leftChild < n && arr[leftChild] > arr[largest]) largest = leftChild; - - if (rightChild < n && arr[rightChild] > arr[largest]) largest = rightChild; - - if (largest !== i) { - swap(i, largest, arr); - - // color - swapHeights(speed, colors.pivotActiveColor, i, largest); - setColor(speed, colors.primaryColor, i, largest); - heapify(arr, largest, n, speed); - } -}; - -// sort -const sort = (arr, n, speed) => { - // arrange the array - for (let i = Math.floor(n / 2) - 1; i >= 0; i--) { - heapify(arr, i, n, speed); - } - - count += 3; - // one by one extract the element from heap - // and put them at back - for (let i = n - 1; i >= 0; i--) { - swap(i, 0, arr); - swapHeights(speed, colors.orange, i, 0); - count += 2; - - setColor(speed, colors.sortedElementColor, i); - heapify(arr, 0, i, speed); - } -}; diff --git a/src/algorithms/insertion.js b/src/algorithms/insertion.js deleted file mode 100644 index 76b2a81..0000000 --- a/src/algorithms/insertion.js +++ /dev/null @@ -1,45 +0,0 @@ -import colors from '../SortingVisualizer/colorCodes'; -import { swap } from './swap'; -export const insertionSort = (tempArr, speed) => { - let count = 0; - - const arrayBars = document.getElementsByClassName('arrayBar'); - const arr = tempArr.map(item => item.val); - - for (let i = 1; i < arr.length; i++) { - // color current comparing value - setTimeout(() => { - arrayBars[i].style.backgroundColor = colors.orange; - arrayBars[i - 1].style.backgroundColor = colors.orange; - }, count++ * speed); - - let j = i; - while (j > 0 && arr[j] < arr[j - 1]) { - let k = j; /* to avoid es line error */ - - setTimeout(() => { - if (k !== i) - arrayBars[k].style.backgroundColor = colors.sortedElementColor; - arrayBars[k - 1].style.backgroundColor = colors.sortedElementColor; - - let temp = arrayBars[k].style.height; - arrayBars[k].style.height = arrayBars[k - 1].style.height; - arrayBars[k - 1].style.height = temp; - }, count++ * speed); - - swap(j, j - 1, arr); - - setTimeout(() => { - if (k !== i) arrayBars[k].style.backgroundColor = colors.primaryColor; - arrayBars[k - 1].style.backgroundColor = colors.primaryColor; - }, count++ * speed); - j--; - } - // set the color to normal color - setTimeout(() => { - arrayBars[i].style.backgroundColor = colors.primaryColor; - arrayBars[i - 1].style.backgroundColor = colors.primaryColor; - }, count * speed); - } - return { arr, count }; -}; diff --git a/src/algorithms/mergesort.js b/src/algorithms/mergesort.js deleted file mode 100644 index 8728626..0000000 --- a/src/algorithms/mergesort.js +++ /dev/null @@ -1,128 +0,0 @@ -import colors from '../SortingVisualizer/colorCodes'; - -let count = 0; - -export const mergeSortAnimation = (tempArr, animationSpeed) => { - const arr = tempArr.map(item => item.val); - count = 0; - const sortedArray = mergesort(arr, 0, arr.length - 1, animationSpeed); - return { sortedArray, count }; -}; - -const mergesort = (arr, low, high, animationSpeed) => { - if (low > high) { - return []; - } - - if (low === high) { - let aux = []; - aux.push(arr[low]); - return aux; - } - - let mid = Math.floor((high + low) / 2); - - // recursively divide the array until its sorted - // in the end it will only have a single item and sorted :) - - const right = mergesort(arr, low, mid, animationSpeed); - const left = mergesort(arr, mid + 1, high, animationSpeed); - - const aux = []; - let k = low; - const arrayBars = document.getElementsByClassName('arrayBar'); - - let li = 0, - ri = 0; // for left and right array respectively - while (li < left.length && ri < right.length) { - let counter = count; - let barIdx = k; - - if (left[li] < right[ri]) { - aux.push(left[li]); - let i = li; - setTimeout(() => { - arrayBars[barIdx].style.backgroundColor = colors.cyan; - arrayBars[barIdx].style.height = `${left[i]}px`; - }, counter * animationSpeed); - - setTimeout(() => { - arrayBars[barIdx].style.backgroundColor = colors.pivotActiveColor; - }, (counter + 1) * animationSpeed); - - setTimeout(() => { - arrayBars[barIdx].style.backgroundColor = colors.primaryColor; - }, (counter + 1.5) * animationSpeed); - li++; - } else { - aux.push(right[ri]); - let i = ri; - - setTimeout(() => { - arrayBars[barIdx].style.backgroundColor = colors.cyan; - arrayBars[barIdx].style.height = `${right[i]}px`; - }, counter * animationSpeed); - - setTimeout(() => { - arrayBars[barIdx].style.backgroundColor = colors.pivotActiveColor; - }, (counter + 1) * animationSpeed); - - setTimeout(() => { - arrayBars[barIdx].style.backgroundColor = colors.primaryColor; - }, (counter + 1.5) * animationSpeed); - ri++; - } - k++; - count++; - } - - // left exhausted - if (li === left.length) { - while (ri < right.length) { - aux.push(right[ri]); - let barIdx = k; - let i = ri; - let counter = count; - - setTimeout(() => { - arrayBars[barIdx].style.backgroundColor = colors.cyan; - arrayBars[barIdx].style.height = `${right[i]}px`; - }, counter * animationSpeed); - - setTimeout(() => { - arrayBars[barIdx].style.backgroundColor = colors.pivotActiveColor; - }, (counter + 1) * animationSpeed); - - setTimeout(() => { - arrayBars[barIdx].style.backgroundColor = colors.primaryColor; - }, (counter + 1.5) * animationSpeed); - ri++; - count++; - k++; - } - } else if (ri === right.length) { - while (li < left.length) { - aux.push(left[li]); - let barIdx = k; - let i = li; - let counter = count; - - setTimeout(() => { - arrayBars[barIdx].style.backgroundColor = colors.cyan; - arrayBars[barIdx].style.height = `${left[i]}px`; - }, counter * animationSpeed); - - setTimeout(() => { - arrayBars[barIdx].style.backgroundColor = colors.pivotActiveColor; - }, (counter + 1) * animationSpeed); - - setTimeout(() => { - arrayBars[barIdx].style.backgroundColor = colors.primaryColor; - }, (counter + 1.5) * animationSpeed); - li++; - k++; - count++; - } - } - return aux; -}; diff --git a/src/algorithms/quicksort.js b/src/algorithms/quicksort.js deleted file mode 100644 index a988219..0000000 --- a/src/algorithms/quicksort.js +++ /dev/null @@ -1,93 +0,0 @@ -import colors from '../SortingVisualizer/colorCodes'; -import { swap } from './swap'; - -const arrayBars = document.getElementsByClassName('arrayBar'); -let count = 0; - -export const quicksort = (tempArr, animationSpeed) => { - const arr = tempArr.map(item => item.val); - count = 0; - let low = 0; - let high = arr.length - 1; - - // main quicksort function - quicksortHelper(arr, low, high, animationSpeed); - count += 2; - return { arr, count }; -}; - -const quicksortHelper = (arr, low, high, speed) => { - if (low > high) return; - - let pivot = partition(arr, low, high, speed); - - // Colors the element which is in its correct place - setTimeout(() => { - arrayBars[pivot].style.backgroundColor = colors.sortedElementColor; - }, count * speed); - count++; - - quicksortHelper(arr, low, pivot - 1, speed); - quicksortHelper(arr, pivot + 1, high, speed); -}; - -const partition = (arr, low, high, speed) => { - let pivotElement = arr[high]; - - // Colors the current pivot index - setTimeout(() => { - arrayBars[high].style.backgroundColor = colors.pivotActiveColor; - }, count * speed); - count++; - - let i = low; - for (let j = low; j < high; j++) { - // animate the curr traversing element - setTimeout(() => { - arrayBars[j].style.backgroundColor = colors.cyan; - }, count * speed); - count += 2; - - // color primary to the curr traversing element - setTimeout(() => { - arrayBars[j].style.backgroundColor = colors.primaryColor; - }, count * speed); - count++; - - if (pivotElement > arr[j]) { - let tempI = i; - setTimeout(() => { - arrayBars[tempI].style.backgroundColor = colors.orange; - - let temp = arrayBars[tempI].style.height; - arrayBars[tempI].style.height = arrayBars[j].style.height; - arrayBars[j].style.height = temp; - }, count * speed); - count++; - - setTimeout(() => { - arrayBars[tempI].style.backgroundColor = colors.primaryColor; - }, (count + 1) * speed); - count++; - - swap(i, j, arr); - i++; - } - } - - // resets the color of pivot element to primary - setTimeout(() => { - arrayBars[high].style.backgroundColor = colors.primaryColor; - }, count * speed); - count++; - - setTimeout(() => { - let temp = arrayBars[i].style.height; - arrayBars[i].style.height = arrayBars[high].style.height; - arrayBars[high].style.height = temp; - }, count * speed); - count++; - - swap(i, high, arr); - return i; -}; diff --git a/src/algorithms/selectionsort.js b/src/algorithms/selectionsort.js deleted file mode 100644 index 2ff231f..0000000 --- a/src/algorithms/selectionsort.js +++ /dev/null @@ -1,54 +0,0 @@ -import { swap } from './swap'; - -export const selectionSort = (tempArr, speed) => { - const arr = tempArr.map(item => item.val); - const arrayBars = document.getElementsByClassName('arrayBar'); - - let count = 0; - for (let i = 0; i < arr.length; i++) { - // initially minidx is set to i - let minIdx = i; - - // change the color of the minIdx to red to identify - setTimeout(() => { - arrayBars[minIdx].style.backgroundColor = 'red'; - }, count * speed); - count++; - - // traverse for the next smallest item - for (let j = i + 1; j < arr.length; j++) { - // current item color to orange - setTimeout(() => { - arrayBars[j].style.backgroundColor = 'orange'; - }, (count + 2) * speed); - - let oldMinIdx; - if (arr[j] < arr[minIdx]) { - oldMinIdx = minIdx; - minIdx = j; - - // change the old minIdx to default color - setTimeout(() => { - arrayBars[oldMinIdx].style.backgroundColor = '#dd85e7'; - }, (count + 3) * speed); - } - // changing the current item to default color - setTimeout(() => { - arrayBars[j].style.backgroundColor = '#dd85e7'; - }, (count + 3) * speed); - count++; - } - - swap(i, minIdx, arr); - - // swap the heights and color the sorted item green - setTimeout(() => { - let temp = arrayBars[i].style.height; - arrayBars[i].style.height = arrayBars[minIdx].style.height; - arrayBars[minIdx].style.height = temp; - arrayBars[i].style.backgroundColor = 'green'; - }, (count + 3) * speed); - count++; - } - return { arr, count }; -}; diff --git a/src/algorithms/swap.js b/src/algorithms/swap.js deleted file mode 100644 index afcb40f..0000000 --- a/src/algorithms/swap.js +++ /dev/null @@ -1,5 +0,0 @@ -export function swap(i, j, arr = []) { - let temp = arr[i]; - arr[i] = arr[j]; - arr[j] = temp; -} diff --git a/src/index.css b/src/index.css deleted file mode 100644 index ec2585e..0000000 --- a/src/index.css +++ /dev/null @@ -1,13 +0,0 @@ -body { - margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', - monospace; -} diff --git a/src/index.js b/src/index.js deleted file mode 100644 index afed62d..0000000 --- a/src/index.js +++ /dev/null @@ -1,6 +0,0 @@ -import React from "react"; -import ReactDOM from "react-dom"; -import "./index.css"; -import App from "./App"; - -ReactDOM.render(, document.getElementById("root")); diff --git a/static/css/main.a4e1813a.chunk.css b/static/css/main.a4e1813a.chunk.css new file mode 100644 index 0000000..c4655e6 --- /dev/null +++ b/static/css/main.a4e1813a.chunk.css @@ -0,0 +1,2 @@ +body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,"Courier New",monospace}*,html{margin:0;padding:0;background-color:#f7fbef;font-family:"Roboto",sans-serif}.container{height:100vh;background-color:#01172e;flex-direction:row-reverse;overflow:hidden}.container,.visualizeContainer{width:100%;display:flex;align-items:flex-end}.visualizeContainer{margin:0 5px;min-width:500px;height:100%;min-height:500px;flex-direction:row;justify-content:space-evenly;background-color:inherit}.arrayBar{width:80px;margin:0 1px 2px;transition:height .2s;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;border-top-left-radius:4px;border-top-right-radius:4px;padding-top:10px;border:.5px solid #000}.arrayBar>span{background-color:inherit;margin-bottom:5px;color:#000;font-weight:800}.button{width:12rem;height:3rem;padding:.3rem 0;border:none;border-radius:.317rem;background-color:#1481ba;color:#fff;font-weight:700;font-size:1rem;cursor:pointer}.button:hover{opacity:.85}.sidebar{width:25vw;min-width:200px;height:100%;min-height:500px;padding:0 1.5vw;background-color:#001021;justify-content:space-evenly}.sidebar,.slider-container{display:flex;flex-direction:column;align-items:center}.slider-container{height:3rem;width:12rem;justify-content:space-between;background-color:inherit}.slider-container>input{width:100%;cursor:pointer}label{color:#fff;font-size:1.1rem}.select-box,label{background-color:inherit}.select-box{display:flex;flex-direction:column;align-items:center;width:200px;font-size:16px;cursor:pointer}header{background-color:inherit;color:#e7d9ea;font-size:25px;text-align:center;line-height:2rem;font-weight:600;border:2px solid #fff;border-radius:20px;padding:10px}#select{height:35px;padding:5px 7px;line-height:20px;font-size:18px;width:100%;border:2px solid green;border-radius:6px;margin-top:10px}.select-box select:focus{border:2px solid green}.slt{cursor:pointer}.social{font-size:20px;color:#fff}a{color:#fff}a,a:active,a:hover,a:link,a:visited{text-decoration:none;background-color:#001021} +/*# sourceMappingURL=main.a4e1813a.chunk.css.map */ \ No newline at end of file diff --git a/static/css/main.a4e1813a.chunk.css.map b/static/css/main.a4e1813a.chunk.css.map new file mode 100644 index 0000000..7341494 --- /dev/null +++ b/static/css/main.a4e1813a.chunk.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["webpack://src/index.css","webpack://src/App.css","webpack://src/SortingVisualizer/SortingVisualizer.css"],"names":[],"mappings":"AAAA,KACE,QAAS,CACT,mJAEY,CACZ,kCAAmC,CACnC,iCACF,CAEA,KACE,yEAEF,CCZA,OAEC,QAAS,CACT,SAAU,CACV,wBAAyB,CACzB,+BACD,CCNA,WAEE,YAAa,CAEb,wBAAyB,CACzB,0BAA2B,CAE3B,eACF,CAEA,+BATE,UAAW,CAEX,YAAa,CAGb,oBAeF,CAXA,oBACE,YAAmB,CAEnB,eAAgB,CAChB,WAAY,CACZ,gBAAiB,CAEjB,kBAAmB,CAEnB,4BAA6B,CAC7B,wBACF,CAEA,UACE,UAAW,CACX,gBAAuB,CACvB,qBAAuB,CACvB,YAAa,CACb,qBAAsB,CACtB,0BAA2B,CAC3B,kBAAmB,CACnB,0BAA2B,CAC3B,2BAA4B,CAC5B,gBAAiB,CACjB,sBACF,CAEA,eACE,wBAAyB,CACzB,iBAAkB,CAClB,UAAY,CACZ,eACF,CAEA,QACE,WAAY,CACZ,WAAY,CACZ,eAAoB,CACpB,WAAY,CACZ,qBAAuB,CACvB,wBAAyB,CACzB,UAAW,CACX,eAAgB,CAChB,cAAe,CACf,cACF,CAEA,cACE,WACF,CAEA,SACE,UAAW,CACX,eAAgB,CAChB,WAAY,CACZ,gBAAiB,CACjB,eAAwB,CACxB,wBAAyB,CAGzB,4BAEF,CAEA,2BANE,YAAa,CACb,qBAAsB,CAEtB,kBAWF,CARA,kBACE,WAAY,CACZ,WAAY,CAIZ,6BAA8B,CAC9B,wBACF,CAEA,wBACE,UAAW,CACX,cACF,CAEA,MACE,UAAW,CAEX,gBACF,CAEA,kBAJE,wBAYF,CARA,YACE,YAAa,CACb,qBAAsB,CACtB,kBAAmB,CACnB,WAAY,CAEZ,cAAe,CACf,cACF,CAEA,OACE,wBAAyB,CACzB,aAAc,CACd,cAAe,CACf,iBAAkB,CAClB,gBAAiB,CACjB,eAAgB,CAChB,qBAAuB,CACvB,kBAAmB,CACnB,YACF,CAEA,QACE,WAAY,CACZ,eAAgB,CAChB,gBAAiB,CACjB,cAAe,CACf,UAAW,CACX,sBAAuB,CACvB,iBAAkB,CAClB,eACF,CAEA,yBACE,sBACF,CAEA,KACE,cACF,CAEA,QACE,cAAe,CACf,UACF,CAEA,EAGE,UACF,CAiBA,oCACE,oBAAqB,CACrB,wBACF","file":"main.a4e1813a.chunk.css","sourcesContent":["body {\n margin: 0;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',\n 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',\n sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\ncode {\n font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',\n monospace;\n}\n","*,\nhtml {\n\tmargin: 0;\n\tpadding: 0;\n\tbackground-color: #f7fbef;\n\tfont-family: 'Roboto', sans-serif;\n}\n",".container {\n width: 100%;\n height: 100vh;\n display: flex;\n background-color: #01172e;\n flex-direction: row-reverse;\n align-items: flex-end;\n overflow: hidden;\n}\n\n.visualizeContainer {\n margin: 0 5px 0 5px;\n width: 100%;\n min-width: 500px;\n height: 100%;\n min-height: 500px;\n display: flex;\n flex-direction: row;\n align-items: flex-end;\n justify-content: space-evenly;\n background-color: inherit;\n}\n\n.arrayBar {\n width: 80px;\n margin: 0px 1px 2px 1px;\n transition: height 0.2s;\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: center;\n border-top-left-radius: 4px;\n border-top-right-radius: 4px;\n padding-top: 10px;\n border: 0.5px solid black;\n}\n\n.arrayBar > span {\n background-color: inherit;\n margin-bottom: 5px;\n color: black;\n font-weight: 800;\n}\n\n.button {\n width: 12rem;\n height: 3rem;\n padding: 0.3rem 0rem;\n border: none;\n border-radius: 0.317rem;\n background-color: #1481ba;\n color: #fff;\n font-weight: 700;\n font-size: 1rem;\n cursor: pointer;\n}\n\n.button:hover {\n opacity: 0.85;\n}\n\n.sidebar {\n width: 25vw;\n min-width: 200px;\n height: 100%;\n min-height: 500px;\n padding: 0 1.5vw 0 1.5vw;\n background-color: #001021;\n display: flex;\n flex-direction: column;\n justify-content: space-evenly;\n align-items: center;\n}\n\n.slider-container {\n height: 3rem;\n width: 12rem;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: space-between;\n background-color: inherit;\n}\n\n.slider-container > input {\n width: 100%;\n cursor: pointer;\n}\n\nlabel {\n color: #fff;\n background-color: inherit;\n font-size: 1.1rem;\n}\n\n.select-box {\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 200px;\n background-color: inherit;\n font-size: 16px;\n cursor: pointer;\n}\n\nheader {\n background-color: inherit;\n color: #e7d9ea;\n font-size: 25px;\n text-align: center;\n line-height: 2rem;\n font-weight: 600;\n border: 2px solid white;\n border-radius: 20px;\n padding: 10px;\n}\n\n#select {\n height: 35px;\n padding: 5px 7px;\n line-height: 20px;\n font-size: 18px;\n width: 100%;\n border: 2px solid green;\n border-radius: 6px;\n margin-top: 10px;\n}\n\n.select-box select:focus {\n border: 2px solid green;\n}\n\n.slt {\n cursor: pointer;\n}\n\n.social {\n font-size: 20px;\n color: white;\n}\n\na {\n text-decoration: none;\n background-color: #001021;\n color: white;\n}\n\na:link {\n text-decoration: none;\n background-color: #001021;\n}\n\na:visited {\n text-decoration: none;\n background-color: #001021;\n}\n\na:hover {\n text-decoration: none;\n background-color: #001021;\n}\n\na:active {\n text-decoration: none;\n background-color: #001021;\n}\n"]} \ No newline at end of file diff --git a/static/js/2.6c6dc74b.chunk.js b/static/js/2.6c6dc74b.chunk.js new file mode 100644 index 0000000..b46d5fe --- /dev/null +++ b/static/js/2.6c6dc74b.chunk.js @@ -0,0 +1,3 @@ +/*! For license information please see 2.6c6dc74b.chunk.js.LICENSE.txt */ +(this.webpackJsonpvisualizer=this.webpackJsonpvisualizer||[]).push([[2],[function(e,t,n){"use strict";e.exports=n(11)},function(e,t,n){"use strict";e.exports=n(4)},function(e,t,n){"use strict";var r=Object.getOwnPropertySymbols,l=Object.prototype.hasOwnProperty,a=Object.prototype.propertyIsEnumerable;e.exports=function(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var t={},n=0;n<10;n++)t["_"+String.fromCharCode(n)]=n;if("0123456789"!==Object.getOwnPropertyNames(t).map((function(e){return t[e]})).join(""))return!1;var r={};return"abcdefghijklmnopqrst".split("").forEach((function(e){r[e]=e})),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},r)).join("")}catch(l){return!1}}()?Object.assign:function(e,t){for(var n,o,u=function(e){if(null===e||void 0===e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}(e),i=1;i