diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..403adbc --- /dev/null +++ b/.gitignore @@ -0,0 +1,23 @@ +.DS_Store +node_modules +/dist + + +# local env files +.env.local +.env.*.local + +# Log files +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* + +# Editor directories and files +.idea +.vscode +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..d3aa313 --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2023 Najmul H. Bappy + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/README.md b/README.md new file mode 100644 index 0000000..09deec5 --- /dev/null +++ b/README.md @@ -0,0 +1,24 @@ +# algo + +## Project setup +``` +npm install +``` + +### Compiles and hot-reloads for development +``` +npm run serve +``` + +### Compiles and minifies for production +``` +npm run build +``` + +### Lints and fixes files +``` +npm run lint +``` + +### Customize configuration +See [Configuration Reference](https://cli.vuejs.org/config/). diff --git a/babel.config.js b/babel.config.js new file mode 100644 index 0000000..e955840 --- /dev/null +++ b/babel.config.js @@ -0,0 +1,5 @@ +module.exports = { + presets: [ + '@vue/cli-plugin-babel/preset' + ] +} diff --git a/base.js b/base.js deleted file mode 100644 index be58444..0000000 --- a/base.js +++ /dev/null @@ -1,116 +0,0 @@ -// class for sorting -class sortData { - constructor(data) { - this.data = data; - } - selectionSort() {} - bubbleSort() {} - stopSort() { - return false; - } -} - -//get selected algorithm -function getAlgo() { - var algo = document.getElementsByName("algo-name"); - for (var i = 0; i < algo.length; i++) { - if (algo[i].checked) { - return algo[i].value; - } - } -} - -// function for changing specific bar color filtering with data -// d => single data, color => hexa color code -function changeBarColor(d, color) { - var smi = heightScale(d); - svg.selectAll("rect").each(function (d, i) { - if (smi == d3.select(this).attr("height")) { - d3.select(this).style("fill", color); - } - }); -} - -// function for generating random data -function randomData(max, range) { - data = []; - n = 0; - while (n < max) { - d = Math.floor(Math.random() * range) + 1; - if (data.includes(d) != true) { - data.push(d); - n++; - } - } - return data; -} - -//function for creating chart. Note: data is an array of integer value -function createChart(data) { - svg = d3.select("#chart").append("svg"); - - bandScale = d3.scaleBand().domain(data).range([0, areaWidth]).padding(0.1); - - svg.attr("width", areaWidth).attr("height", areaHeight); - - svg - .selectAll("rect") - .data(data) - .enter() - .append("rect") - .attr("x", function (d, i) { - return bandScale(d); - }) - .attr("y", function (d) { - return areaHeight - heightScale(d); - }) - .attr("width", function () { - return bandScale.bandwidth(); - }) - .attr("height", function (d) { - return heightScale(d); - }) - .style("fill", "rgb(173, 216, 230)"); - - svg - .selectAll("text") - .data(data) - .enter() - .append("text") - .text(function (d) { - return d; - }) - .attr("x", function (d, i) { - return bandScale(d) + 10; - }) - .attr("y", function (d) { - return areaHeight - 15; - }) - .style("width", bandScale.bandwidth) - .style("fill", "black") - .style("font-size", areaWidth / data.length / 3) - .style("font-family", "sans-serif") - .style("z-index", 1); -} - -// bar visualization while sorting. Bar Swapping -function swapBar(data) { - var dOrder = data.map(function (d) { - return d; - }); - bandScale.domain(dOrder); - svg - .transition() - .duration(750) - .selectAll("rect") - .attr("x", function (d) { - return bandScale(d); - }); - svg - .transition() - .duration(750) - .selectAll("text") - .attr("x", function (d) { - return bandScale(d) + 5; - }); -} diff --git a/function.js b/function.js deleted file mode 100644 index 71ad81e..0000000 --- a/function.js +++ /dev/null @@ -1,121 +0,0 @@ -var svg, - bandScale, - text, - maxElement = 15, - dataRange = maxElement * 2, - areaHeight = 150, - areaWidth = 800, - time = 300, - traverseColor = "#ffcaa1", - smallestColor = "#ab87ff", - unsortedColor = "#add8e6"; - -// generating random data -var data = randomData(maxElement, dataRange); -function setSpeed() { - time = document.getElementById("speed").value; -} -//a d3 function for scaling height for all the data this function -var heightScale = d3 - .scaleLinear() - .domain([0, d3.max(data)]) - .range([0, areaHeight]); - -// initialized a chart with random value -createChart(data); - -let Sort = new sortData(data); -Sort.selectionSort = function () { - const timer = (ms) => new Promise((res) => setTimeout(res, ms)); - async function sort() { - // We need to wrap the loop into an async function for this to work - for (var i = 0; i < data.length; i++) { - smallest = data[i]; - pos = i; - changeBarColor(smallest, smallestColor); - await timer(time); - for (var j = i + 1; j < data.length; j++) { - changeBarColor(data[j], traverseColor); - if (smallest > data[j]) { - await timer(time); - changeBarColor(smallest, unsortedColor); - smallest = data[j]; - pos = j; - } - - changeBarColor(smallest, smallestColor); - await timer(time); - changeBarColor(data[j], unsortedColor); - } - if (data[i] != smallest) { - temp = data[i]; - data[i] = smallest; - data[pos] = temp; - - var swooshAudio = new Audio( - "/algorithm-visualizer/sound-effects/swoosh.mp3" - ); - swooshAudio.play(); - } - changeBarColor(smallest, "#56b4d3"); - swapBar(data); - await timer(time); // then the created Promise can be awaited - } - svg.selectAll("rect").style("fill", "#56b4d3"); - var completeAudio = new Audio( - "/algorithm-visualizer/sound-effects/complete.mp3" - ); - completeAudio.play(); - } - sort(); -}; - -Sort.bubbleSort = function () { - const timer = (ms) => new Promise((res) => setTimeout(res, ms)); - async function sort() { - var temp; - for (i = 0; i < data.length - 1; i++) { - changeBarColor(data[0], smallestColor); - await timer(time); - for (j = 0; j < data.length - i - 1; j++) { - await timer(time); - changeBarColor(data[j + 1], traverseColor); - await timer(time); - if (data[j] > data[j + 1]) { - temp = data[j]; - data[j] = data[j + 1]; - data[j + 1] = temp; - changeBarColor(data[j + 1], smallestColor); - var swooshAudio = new Audio("./sound-effects/swoosh.mp3"); - swooshAudio.play(); - swapBar(data); - await timer(time); - } else { - changeBarColor(data[j + 1], smallestColor); - } - changeBarColor(data[j], unsortedColor); - } - } - svg.selectAll("rect").style("fill", "#56b4d3"); - var completeAudio = new Audio( - "/algorithm-visualizer/sound-effects/complete.mp3" - ); - completeAudio.play(); - } - sort(); -}; - -document.getElementById("sort").addEventListener("click", function () { - if (getAlgo() == "selection-sort") { - Sort.selectionSort(); - } else if (getAlgo() == "bubble-sort") { - Sort.bubbleSort(); - } -}); - -document.getElementById("random-data").addEventListener("click", function () { - var data = randomData(maxElement, dataRange); - Sort.stopSort(); - svg.remove(); - createChart(data); -}); diff --git a/index.html b/index.html deleted file mode 100644 index e10623d..0000000 --- a/index.html +++ /dev/null @@ -1,56 +0,0 @@ - - - - - - - Sorting Visualizer - - - -

Sorting Visualizer

- -
-
- - -
-
- -
-
-
-
-
-
- -
-
- - - - - diff --git a/jsconfig.json b/jsconfig.json new file mode 100644 index 0000000..4aafc5f --- /dev/null +++ b/jsconfig.json @@ -0,0 +1,19 @@ +{ + "compilerOptions": { + "target": "es5", + "module": "esnext", + "baseUrl": "./", + "moduleResolution": "node", + "paths": { + "@/*": [ + "src/*" + ] + }, + "lib": [ + "esnext", + "dom", + "dom.iterable", + "scripthost" + ] + } +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..a8fdca3 --- /dev/null +++ b/package.json @@ -0,0 +1,61 @@ +{ + "name": "algo", + "version": "1.0.0", + "private": true, + "description": "* Sorting\r * Bubble Sort\r * Insertion Sort\r * Searching\r * Linear Search\r * Binary Search", + "author": "", + "scripts": { + "serve": "vue-cli-service serve", + "build": "vue-cli-service build", + "lint": "vue-cli-service lint", + "test": "echo \"Error: no test specified\" && exit 1" + }, + "main": "index.js", + "dependencies": { + "core-js": "^3.8.3", + "vue": "^3.2.13", + "vue-router": "^4.2.2" + }, + "devDependencies": { + "@babel/core": "^7.12.16", + "@babel/eslint-parser": "^7.12.16", + "@vue/cli": "^5.0.8", + "@vue/cli-plugin-babel": "~5.0.0", + "@vue/cli-plugin-eslint": "~5.0.0", + "@vue/cli-service": "~5.0.0", + "eslint": "^7.32.0", + "eslint-plugin-vue": "^8.0.3" + }, + "eslintConfig": { + "root": true, + "env": { + "node": true + }, + "extends": [ + "plugin:vue/vue3-essential", + "eslint:recommended" + ], + "parserOptions": { + "parser": "@babel/eslint-parser" + }, + "rules": {} + }, + "browserslist": [ + "> 1%", + "last 2 versions", + "not dead", + "not ie 11" + ], + "_id": "algo@1.0.0", + "bugs": { + "url": "https://github.com/Bappy4u/algorithm-visualizer/issues" + }, + "homepage": "https://github.com/Bappy4u/algorithm-visualizer#readme", + "keywords": [], + "license": "ISC", + "readme": "ERROR: No README data found!", + "repository": { + "type": "git", + "url": "git+https://github.com/Bappy4u/algorithm-visualizer.git" + } +} diff --git a/public/favicon.ico b/public/favicon.ico new file mode 100644 index 0000000..df36fcf Binary files /dev/null and b/public/favicon.ico differ diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..ad561d9 --- /dev/null +++ b/public/index.html @@ -0,0 +1,17 @@ + + + + + + + + Algorithm Visualizer + + + +
+ + + diff --git a/sound-effects/complete.mp3 b/sound-effects/complete.mp3 deleted file mode 100644 index ea9d34f..0000000 Binary files a/sound-effects/complete.mp3 and /dev/null differ diff --git a/sound-effects/swipe.mp3 b/sound-effects/swipe.mp3 deleted file mode 100644 index d935234..0000000 Binary files a/sound-effects/swipe.mp3 and /dev/null differ diff --git a/sound-effects/swoosh.mp3 b/sound-effects/swoosh.mp3 deleted file mode 100644 index ad2aefd..0000000 Binary files a/sound-effects/swoosh.mp3 and /dev/null differ diff --git a/src/App.vue b/src/App.vue new file mode 100644 index 0000000..807ed1b --- /dev/null +++ b/src/App.vue @@ -0,0 +1,28 @@ + + + + + diff --git a/src/algorithms/algorithms.vue b/src/algorithms/algorithms.vue new file mode 100644 index 0000000..1561276 --- /dev/null +++ b/src/algorithms/algorithms.vue @@ -0,0 +1,15 @@ + + + + + \ No newline at end of file diff --git a/src/algorithms/search/Search.vue b/src/algorithms/search/Search.vue new file mode 100644 index 0000000..a0ea2a3 --- /dev/null +++ b/src/algorithms/search/Search.vue @@ -0,0 +1,15 @@ + + + + + \ No newline at end of file diff --git a/src/algorithms/sort/Sort.vue b/src/algorithms/sort/Sort.vue new file mode 100644 index 0000000..5c7b10d --- /dev/null +++ b/src/algorithms/sort/Sort.vue @@ -0,0 +1,15 @@ + + + + + \ No newline at end of file diff --git a/src/assets/logo.png b/src/assets/logo.png new file mode 100644 index 0000000..f3d2503 Binary files /dev/null and b/src/assets/logo.png differ diff --git a/src/components/AlgorithmVisualizer.vue b/src/components/AlgorithmVisualizer.vue new file mode 100644 index 0000000..253e53a --- /dev/null +++ b/src/components/AlgorithmVisualizer.vue @@ -0,0 +1,36 @@ + + + + + + diff --git a/src/components/menu.vue b/src/components/menu.vue new file mode 100644 index 0000000..d377540 --- /dev/null +++ b/src/components/menu.vue @@ -0,0 +1,93 @@ + + + + + diff --git a/src/core/_helperFunctions.js b/src/core/_helperFunctions.js new file mode 100644 index 0000000..e69de29 diff --git a/src/main.js b/src/main.js new file mode 100644 index 0000000..d30ece6 --- /dev/null +++ b/src/main.js @@ -0,0 +1,4 @@ +import { createApp } from 'vue' +import App from './App.vue' +import router from './routes/router'; +createApp(App).use(router).mount('#app') diff --git a/src/routes/router.js b/src/routes/router.js new file mode 100644 index 0000000..df27c7e --- /dev/null +++ b/src/routes/router.js @@ -0,0 +1,18 @@ +import { createRouter, createWebHistory } from 'vue-router'; +import SearchView from './../algorithms/search/Search.vue'; +import homeView from './../algorithms/algorithms.vue'; +import SortView from './../algorithms/sort/Sort.vue'; + +const routes = [ + { path: '/', component: homeView }, + { path: '/search', component: SearchView }, + { path: '/sort', component: SortView }, + // Add more routes for other algorithm components +]; + +const router = createRouter({ + history: createWebHistory(), + routes, +}); + +export default router; diff --git a/style.css b/style.css deleted file mode 100644 index 7457299..0000000 --- a/style.css +++ /dev/null @@ -1,78 +0,0 @@ -* { - font-family: sans-serif; -} -.container { - display: flex; - justify-content: center; - align-items: center; -} -.bar-chart { - margin-top: 40px; - background-color: #eee; - padding: 50px 20px 30px 20px; - box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; -} - -h1 { - text-align: center; - font-family: sans-serif; - padding: 0; - margin: 30px 0 0 0; -} -button { - display: block; - margin: auto; - - padding: 5px 20px; - background: steelblue; - color: rgb(218, 238, 105); - font-size: 15px; - cursor: pointer; - font-weight: 600; -} -button { - margin: auto; - margin-top: 20px; - padding: 2px 30px; - border: none; -} - -button { - background-image: linear-gradient( - to right, - #348f50 0%, - #56b4d3 51%, - #348f50 100% - ); -} -button { - padding: 10px 30px; - text-align: center; - text-transform: uppercase; - transition: 0.5s; - background-size: 200% auto; - color: white; - box-shadow: 0 0 20px #eee; - border-radius: 10px; - display: block; -} - -button:hover { - background-position: right center; /* change the direction of the change here */ - color: #fff; - text-decoration: none; -} -form { - margin-top: 20px; - text-align: center; -} -label { - font-size: 20px; - cursor: pointer; -} -input { - cursor: pointer; -} -rect:hover { - cursor: pointer; -} diff --git a/vue.config.js b/vue.config.js new file mode 100644 index 0000000..910e297 --- /dev/null +++ b/vue.config.js @@ -0,0 +1,4 @@ +const { defineConfig } = require('@vue/cli-service') +module.exports = defineConfig({ + transpileDependencies: true +})