Skip to content
Snippets Groups Projects
Commit 1014638f authored by Daniel's avatar Daniel
Browse files

testing

parent 8d870c69
No related branches found
No related tags found
No related merge requests found
Pipeline #223568 failed
...@@ -10,7 +10,3 @@ pages: ...@@ -10,7 +10,3 @@ pages:
paths: paths:
# The folder that contains the files to be exposed at the Page URL # The folder that contains the files to be exposed at the Page URL
- public - public
rules:
# This ensures that only pushes to the default branch will trigger
# a pages deploy
- if: $CI_COMMIT_REF_NAME == $CI_DEFAULT_BRANCH
...@@ -13,11 +13,12 @@ RUN npm install ...@@ -13,11 +13,12 @@ RUN npm install
RUN rm -rf src/App.css src/App.jsx src/assets src/index.css RUN rm -rf src/App.css src/App.jsx src/assets src/index.css
COPY src src/ COPY src src/
COPY index.html . #COPY index.html .
COPY vite.config.js . #COPY vite.config.js .
COPY next.config.mjs .
# port 5173 # port 5173
EXPOSE 5173 EXPOSE 5173
#Start #Start
CMD ["npm", "run", "dev", "--", "--host"] CMD ["npm", "run", "dev"]
...@@ -3,7 +3,7 @@ services: ...@@ -3,7 +3,7 @@ services:
image: sorting-visualizer image: sorting-visualizer
container_name: Sorting-Visualizer container_name: Sorting-Visualizer
ports: ports:
- 127.0.0.1:5173:5173 - 127.0.0.1:3000:3000
volumes: volumes:
- ./src/:/app/sorting-visualizer/src/ - ./src/:/app/sorting-visualizer/src/
- ./package-lock.json:/app/sorting-visualizer/package-lock.json - ./package-lock.json:/app/sorting-visualizer/package-lock.json
......
...@@ -8,6 +8,6 @@ ...@@ -8,6 +8,6 @@
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
<script type="module" src="/src/main.jsx"></script> <script type="module" src="/src/app/page.jsx"></script>
</body> </body>
</html> </html>
...@@ -9,6 +9,7 @@ ...@@ -9,6 +9,7 @@
"version": "0.0.0", "version": "0.0.0",
"dependencies": { "dependencies": {
"bootstrap": "^5.3.3", "bootstrap": "^5.3.3",
"next": "^14.2.11",
"react": "^18.3.1", "react": "^18.3.1",
"react-bootstrap": "^2.10.4", "react-bootstrap": "^2.10.4",
"react-bootstrap-range-slider": "^3.0.8", "react-bootstrap-range-slider": "^3.0.8",
...@@ -899,6 +900,146 @@ ...@@ -899,6 +900,146 @@
"@jridgewell/sourcemap-codec": "^1.4.14" "@jridgewell/sourcemap-codec": "^1.4.14"
} }
}, },
"node_modules/@next/env": {
"version": "14.2.11",
"resolved": "https://registry.npmjs.org/@next/env/-/env-14.2.11.tgz",
"integrity": "sha512-HYsQRSIXwiNqvzzYThrBwq6RhXo3E0n8j8nQnAs8i4fCEo2Zf/3eS0IiRA8XnRg9Ha0YnpkyJZIZg1qEwemrHw=="
},
"node_modules/@next/swc-darwin-arm64": {
"version": "14.2.11",
"resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.11.tgz",
"integrity": "sha512-eiY9u7wEJZWp/Pga07Qy3ZmNEfALmmSS1HtsJF3y1QEyaExu7boENz11fWqDmZ3uvcyAxCMhTrA1jfVxITQW8g==",
"cpu": [
"arm64"
],
"optional": true,
"os": [
"darwin"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@next/swc-darwin-x64": {
"version": "14.2.11",
"resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.11.tgz",
"integrity": "sha512-lnB0zYCld4yE0IX3ANrVMmtAbziBb7MYekcmR6iE9bujmgERl6+FK+b0MBq0pl304lYe7zO4yxJus9H/Af8jbg==",
"cpu": [
"x64"
],
"optional": true,
"os": [
"darwin"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@next/swc-linux-arm64-gnu": {
"version": "14.2.11",
"resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.11.tgz",
"integrity": "sha512-Ulo9TZVocYmUAtzvZ7FfldtwUoQY0+9z3BiXZCLSUwU2bp7GqHA7/bqrfsArDlUb2xeGwn3ZuBbKtNK8TR0A8w==",
"cpu": [
"arm64"
],
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@next/swc-linux-arm64-musl": {
"version": "14.2.11",
"resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.11.tgz",
"integrity": "sha512-fH377DnKGyUnkWlmUpFF1T90m0dADBfK11dF8sOQkiELF9M+YwDRCGe8ZyDzvQcUd20Rr5U7vpZRrAxKwd3Rzg==",
"cpu": [
"arm64"
],
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@next/swc-linux-x64-gnu": {
"version": "14.2.11",
"resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.11.tgz",
"integrity": "sha512-a0TH4ZZp4NS0LgXP/488kgvWelNpwfgGTUCDXVhPGH6pInb7yIYNgM4kmNWOxBFt+TIuOH6Pi9NnGG4XWFUyXQ==",
"cpu": [
"x64"
],
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@next/swc-linux-x64-musl": {
"version": "14.2.11",
"resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.11.tgz",
"integrity": "sha512-DYYZcO4Uir2gZxA4D2JcOAKVs8ZxbOFYPpXSVIgeoQbREbeEHxysVsg3nY4FrQy51e5opxt5mOHl/LzIyZBoKA==",
"cpu": [
"x64"
],
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@next/swc-win32-arm64-msvc": {
"version": "14.2.11",
"resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.11.tgz",
"integrity": "sha512-PwqHeKG3/kKfPpM6of1B9UJ+Er6ySUy59PeFu0Un0LBzJTRKKAg2V6J60Yqzp99m55mLa+YTbU6xj61ImTv9mg==",
"cpu": [
"arm64"
],
"optional": true,
"os": [
"win32"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@next/swc-win32-ia32-msvc": {
"version": "14.2.11",
"resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.11.tgz",
"integrity": "sha512-0U7PWMnOYIvM74GY6rbH6w7v+vNPDVH1gUhlwHpfInJnNe5LkmUZqhp7FNWeNa5wbVgRcRi1F1cyxp4dmeLLvA==",
"cpu": [
"ia32"
],
"optional": true,
"os": [
"win32"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@next/swc-win32-x64-msvc": {
"version": "14.2.11",
"resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.11.tgz",
"integrity": "sha512-gQpS7mcgovWoaTG1FbS5/ojF7CGfql1Q0ZLsMrhcsi2Sr9HEqsUZ70MPJyaYBXbk6iEAP7UXMD9HC8KY1qNwvA==",
"cpu": [
"x64"
],
"optional": true,
"os": [
"win32"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@nodelib/fs.scandir": { "node_modules/@nodelib/fs.scandir": {
"version": "2.1.5", "version": "2.1.5",
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
...@@ -1204,6 +1345,11 @@ ...@@ -1204,6 +1345,11 @@
"win32" "win32"
] ]
}, },
"node_modules/@swc/counter": {
"version": "0.1.3",
"resolved": "https://registry.npmjs.org/@swc/counter/-/counter-0.1.3.tgz",
"integrity": "sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ=="
},
"node_modules/@swc/helpers": { "node_modules/@swc/helpers": {
"version": "0.5.13", "version": "0.5.13",
"resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.13.tgz", "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.13.tgz",
...@@ -1589,6 +1735,17 @@ ...@@ -1589,6 +1735,17 @@
"node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7" "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
} }
}, },
"node_modules/busboy": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz",
"integrity": "sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==",
"dependencies": {
"streamsearch": "^1.1.0"
},
"engines": {
"node": ">=10.16.0"
}
},
"node_modules/call-bind": { "node_modules/call-bind": {
"version": "1.0.7", "version": "1.0.7",
"resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz", "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz",
...@@ -1621,7 +1778,6 @@ ...@@ -1621,7 +1778,6 @@
"version": "1.0.30001658", "version": "1.0.30001658",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001658.tgz", "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001658.tgz",
"integrity": "sha512-N2YVqWbJELVdrnsW5p+apoQyYt51aBMSsBZki1XZEfeBCexcM/sf4xiAHcXQBkuOwJBXtWF7aW1sYX6tKebPHw==", "integrity": "sha512-N2YVqWbJELVdrnsW5p+apoQyYt51aBMSsBZki1XZEfeBCexcM/sf4xiAHcXQBkuOwJBXtWF7aW1sYX6tKebPHw==",
"dev": true,
"funding": [ "funding": [
{ {
"type": "opencollective", "type": "opencollective",
...@@ -1656,6 +1812,11 @@ ...@@ -1656,6 +1812,11 @@
"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz", "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
"integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==" "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow=="
}, },
"node_modules/client-only": {
"version": "0.0.1",
"resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
"integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="
},
"node_modules/color-convert": { "node_modules/color-convert": {
"version": "1.9.3", "version": "1.9.3",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
...@@ -2570,6 +2731,11 @@ ...@@ -2570,6 +2731,11 @@
"url": "https://github.com/sponsors/ljharb" "url": "https://github.com/sponsors/ljharb"
} }
}, },
"node_modules/graceful-fs": {
"version": "4.2.11",
"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
"integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="
},
"node_modules/has-bigints": { "node_modules/has-bigints": {
"version": "1.0.2", "version": "1.0.2",
"resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz", "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz",
...@@ -3231,7 +3397,6 @@ ...@@ -3231,7 +3397,6 @@
"version": "3.3.7", "version": "3.3.7",
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz", "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
"integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==", "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
"dev": true,
"funding": [ "funding": [
{ {
"type": "github", "type": "github",
...@@ -3251,6 +3416,91 @@ ...@@ -3251,6 +3416,91 @@
"integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==", "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
"dev": true "dev": true
}, },
"node_modules/next": {
"version": "14.2.11",
"resolved": "https://registry.npmjs.org/next/-/next-14.2.11.tgz",
"integrity": "sha512-8MDFqHBhdmR2wdfaWc8+lW3A/hppFe1ggQ9vgIu/g2/2QEMYJrPoQP6b+VNk56gIug/bStysAmrpUKtj3XN8Bw==",
"dependencies": {
"@next/env": "14.2.11",
"@swc/helpers": "0.5.5",
"busboy": "1.6.0",
"caniuse-lite": "^1.0.30001579",
"graceful-fs": "^4.2.11",
"postcss": "8.4.31",
"styled-jsx": "5.1.1"
},
"bin": {
"next": "dist/bin/next"
},
"engines": {
"node": ">=18.17.0"
},
"optionalDependencies": {
"@next/swc-darwin-arm64": "14.2.11",
"@next/swc-darwin-x64": "14.2.11",
"@next/swc-linux-arm64-gnu": "14.2.11",
"@next/swc-linux-arm64-musl": "14.2.11",
"@next/swc-linux-x64-gnu": "14.2.11",
"@next/swc-linux-x64-musl": "14.2.11",
"@next/swc-win32-arm64-msvc": "14.2.11",
"@next/swc-win32-ia32-msvc": "14.2.11",
"@next/swc-win32-x64-msvc": "14.2.11"
},
"peerDependencies": {
"@opentelemetry/api": "^1.1.0",
"@playwright/test": "^1.41.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"sass": "^1.3.0"
},
"peerDependenciesMeta": {
"@opentelemetry/api": {
"optional": true
},
"@playwright/test": {
"optional": true
},
"sass": {
"optional": true
}
}
},
"node_modules/next/node_modules/@swc/helpers": {
"version": "0.5.5",
"resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.5.tgz",
"integrity": "sha512-KGYxvIOXcceOAbEk4bi/dVLEK9z8sZ0uBB3Il5b1rhfClSpcX0yfRO0KmTkqR2cnQDymwLB+25ZyMzICg/cm/A==",
"dependencies": {
"@swc/counter": "^0.1.3",
"tslib": "^2.4.0"
}
},
"node_modules/next/node_modules/postcss": {
"version": "8.4.31",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
"integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
"funding": [
{
"type": "opencollective",
"url": "https://opencollective.com/postcss/"
},
{
"type": "tidelift",
"url": "https://tidelift.com/funding/github/npm/postcss"
},
{
"type": "github",
"url": "https://github.com/sponsors/ai"
}
],
"dependencies": {
"nanoid": "^3.3.6",
"picocolors": "^1.0.0",
"source-map-js": "^1.0.2"
},
"engines": {
"node": "^10 || ^12 || >=14"
}
},
"node_modules/node-releases": { "node_modules/node-releases": {
"version": "2.0.18", "version": "2.0.18",
"resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.18.tgz", "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.18.tgz",
...@@ -3439,8 +3689,7 @@ ...@@ -3439,8 +3689,7 @@
"node_modules/picocolors": { "node_modules/picocolors": {
"version": "1.1.0", "version": "1.1.0",
"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.0.tgz", "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.0.tgz",
"integrity": "sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==", "integrity": "sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw=="
"dev": true
}, },
"node_modules/possible-typed-array-names": { "node_modules/possible-typed-array-names": {
"version": "1.0.0", "version": "1.0.0",
...@@ -3904,11 +4153,18 @@ ...@@ -3904,11 +4153,18 @@
"version": "1.2.0", "version": "1.2.0",
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz", "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
"integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==", "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
"dev": true,
"engines": { "engines": {
"node": ">=0.10.0" "node": ">=0.10.0"
} }
}, },
"node_modules/streamsearch": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz",
"integrity": "sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==",
"engines": {
"node": ">=10.0.0"
}
},
"node_modules/string.prototype.matchall": { "node_modules/string.prototype.matchall": {
"version": "4.0.11", "version": "4.0.11",
"resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.11.tgz", "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.11.tgz",
...@@ -4018,6 +4274,28 @@ ...@@ -4018,6 +4274,28 @@
"url": "https://github.com/sponsors/sindresorhus" "url": "https://github.com/sponsors/sindresorhus"
} }
}, },
"node_modules/styled-jsx": {
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.1.tgz",
"integrity": "sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw==",
"dependencies": {
"client-only": "0.0.1"
},
"engines": {
"node": ">= 12.0.0"
},
"peerDependencies": {
"react": ">= 16.8.0 || 17.x.x || ^18.0.0-0"
},
"peerDependenciesMeta": {
"@babel/core": {
"optional": true
},
"babel-plugin-macros": {
"optional": true
}
}
},
"node_modules/supports-color": { "node_modules/supports-color": {
"version": "5.5.0", "version": "5.5.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
......
...@@ -5,13 +5,14 @@ ...@@ -5,13 +5,14 @@
"version": "0.0.0", "version": "0.0.0",
"type": "module", "type": "module",
"scripts": { "scripts": {
"dev": "vite", "dev": "next dev",
"build": "vite build", "build": "next build",
"lint": "eslint .", "lint": "eslint .",
"preview": "vite preview" "preview": "vite preview"
}, },
"dependencies": { "dependencies": {
"bootstrap": "^5.3.3", "bootstrap": "^5.3.3",
"next": "^14.2.11",
"react": "^18.3.1", "react": "^18.3.1",
"react-bootstrap": "^2.10.4", "react-bootstrap": "^2.10.4",
"react-bootstrap-range-slider": "^3.0.8", "react-bootstrap-range-slider": "^3.0.8",
......
async function BubbleSort(EingangsArray, updateBars, setColor, sortSpeed){
const len = EingangsArray.length;
for(let i = 0; i< len -1; ++i){
for(let k=0; k< len -1-i; k++){
let tmp;
if (k == len -2-i){
setColor([(len-1-i)]);
}
if(EingangsArray[k] > EingangsArray[k+1]){
tmp = EingangsArray[k];
EingangsArray[k] = EingangsArray[k+1];
EingangsArray[k+1] = tmp;
}
updateBars([...EingangsArray]);
await new Promise(resolve => setTimeout(resolve, sortSpeed)); // Pause für Animation
}
}
setColor([(len-len)]);
console.log(EingangsArray);
return EingangsArray;
}
export default BubbleSort;
\ No newline at end of file
body {
margin: 0;
}
.Container {
display: flex;
flex-direction: column;
align-items: center;
}
.bar {
background-color: blue;
display: inline-block;
height: 100px;
flex: 1 1 20px;
min-width: 2px;
}
.sorted {
background-color: deeppink;
animation: ScaleAnimation 0.5s ease-in-out;
}
.finished {
background-color: lawngreen;
flex: 1 1 20px;
min-width: 2px;
margin: 2px;
display: inline-block;
animation: GreenScaleAnimation 1s ease-in;
}
.range-slider {
padding: 0px;
}
#ToolBar {
height: 50px;
width: 100%;
background: #34495e;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
#startButton {
height: 78%;
width: 85px;
font-size: 12px;
margin: 10px;
background: #1abc9c;
text-align: center;
display: grid;
place-items: center;
border-radius: 5px;
border: none;
color: white;
font-size: 14px;
font-family: Arial, sans-serif;
font-weight: bold;
}
button:active {
box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.46);
transform: translateY(2px);
}
.Label {
margin: 10px;
font-size: 15px;
font-family: Arial, sans-serif;
font-weight: bold;
color: white;
}
.DivArray {
transform: scaleY(-1);
display: flex;
flex-wrap: nowrap;
justify-content: center;
gap: 2px;
width: 90%;
margin-top: 5px;
}
#dropdown-menu {
background-color: #34495e;
border: none;
border-radius: 5px;
margin-top: 3px;
}
#dropdown-item {
color: white;
font-size: 16px;
font-weight: normal;
border-radius: 5px;
}
#dropdown-item:hover {
background-color: #1abc9c;
color: white;
}
#dropdown {
background: none;
border: none;
border-radius: 0px;
color: white;
fontSize: 14px;
fontWeight: normal;
padding: 0;
height: 100%;
display: flex;
alignItems: center;
place-items: center;
margin-inline: 10px;
width: 190px;
}
#dropdown:hover {
color: #1abc9c;
}
#dropdown:active {
box-shadow: none;
transform: none;
}
#dropdown.show {
background-color: #1abc9c;
color: white;
}
@keyframes ScaleAnimation {
0% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
100% {
transform: scale(1);
}
}
@keyframes GreenScaleAnimation {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
import {useState, useEffect} from 'react';
import './SortingVisualizer.css'
import BubbleSort from "./BubbleSort";
import RangeSlider from 'react-bootstrap-range-slider';
import 'react-bootstrap-range-slider/dist/react-bootstrap-range-slider.css';
import {Dropdown} from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
function SortingVisualizer() {
const moduloFive = ((window.innerWidth / 45)).toFixed(0) % 5;
const monitorSize = (window.innerWidth / 45).toFixed(0) - moduloFive;
const [BarNumber, setBarNumber] = useState(() => monitorSize > 100 ? 100 : monitorSize); // max of 100 bars
const [bars, setbars] = useState(() => generateArray(BarNumber));
const [sorting, setSorting] = useState(false);
const [alreadySorted, setAlreadySorted] = useState();
const [isSorted, setIsSorted] = useState(false);
const [sortSpeed, setSortSpeed] = useState('40');
const SliderWithInputFormControl = () => {
const [sliderValue_intern, setSliderValue_intern] = useState(BarNumber);
return (
<RangeSlider
value={sliderValue_intern}
step={5}
max={100}
min={5}
disabled={sorting}
onChange={changeEvent => setSliderValue_intern(Number(changeEvent.target.value))}
onAfterChange={() => setBarNumber(sliderValue_intern)}
/>
);
};
useEffect(() => {
resetBars();
}, [BarNumber]);
function getRandomArbitrary(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function generateArray(numberBars) {
return Array.from({length: numberBars}, () => getRandomArbitrary(50, 300));
}
async function handleSorting() {
if (sorting) return;
setSorting(true);
await BubbleSort(bars, setbars, setAlreadySorted, sortSpeed);
setSorting(false);
}
function resetBars() {
setAlreadySorted(1000);
setbars(generateArray(BarNumber));
let ColoredBars = document.getElementsByClassName('sorted');
document.getElementById('startButton').innerText = 'Sort!';
while (ColoredBars.length > 0) {
ColoredBars[0].className = 'bar';
}
setIsSorted(false);
}
function finishAnimation() {
let ColoredBars = document.getElementsByClassName('sorted');
while (ColoredBars.length > 0) {
ColoredBars[0].className = 'finished';
}
}
function handleButton() {
if (!sorting && !isSorted) {
setAlreadySorted(1000);
handleSorting();
} else if (isSorted) {
resetBars();
}
}
useEffect(() => {
if (alreadySorted == 0) {
setIsSorted(true);
finishAnimation();
document.getElementById('startButton').innerText = 'Reset!';
}
}, [alreadySorted]);
return (
<>
<div className='Container'>
<div id='ToolBar'>
<div className="Label">How many bars?</div>
<SliderWithInputFormControl style={{className: 'range-slider'}}/>
<input type='number' max={100} min={0} disabled={sorting}
onChange={changeEvent => {
let value = Number(changeEvent.target.value);
if (value > 100) value = 100;
if (value < 5) value = 5;
setBarNumber(value);
}} defaultValue={BarNumber}
value={BarNumber} style={{
width: '42px',
margin: '10px',
borderRadius: '5px',
border: 'none',
textAlign: 'center'
}}/>
<div style={{background: 'gray', height: '70%', marginLeft: '10px', width: '2px'}}></div>
<Dropdown id="dropdown">
<Dropdown.Toggle
id="dropdown"
disabled={sorting}
>
Sorting-Speed: {
{
100: 'Slow',
40: 'Medium',
0: 'Fast'
}[sortSpeed] || ''
}
</Dropdown.Toggle>
<Dropdown.Menu id="dropdown-menu">
<Dropdown.Item id="dropdown-item" onClick={() => setSortSpeed(100)}>
Slow
</Dropdown.Item>
<Dropdown.Item id="dropdown-item" onClick={() => setSortSpeed(40)}>
Medium
</Dropdown.Item>
<Dropdown.Item id="dropdown-item" onClick={() => setSortSpeed(0)}>
Fast
</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
<button id='startButton' className="Button" disabled={sorting}
style={{background: `${sorting ? 'red' : ''}`}} onClick={() => {
handleButton()
}}>{sorting ? 'Sorting...' : 'Sort!'}</button>
</div>
<div className='DivArray'>
{bars.map((height, index) => (<div key={index} data-key={index}
className={`bar + ${alreadySorted <= index ? 'sorted' : ''}`}
style={{height: `${height}px`}}></div>))}
</div>
</div>
</>
)
};
export default SortingVisualizer;
\ No newline at end of file
import SortingVisualizer from '../components/SortingVisualizer.jsx'
import Head from "next/head";
export default function Home() {
return (
<main>
<Head>
<link rel="icon" href="/src/styles/favicon.ico" />
</Head>
<SortingVisualizer />
</main>
)
}
import {StrictMode} from 'react'
import {createRoot} from 'react-dom/client'
import SortingVisualizer from './SortingVisualizer.jsx'
createRoot(document.getElementById('root')).render(
<StrictMode>
<SortingVisualizer/>
</StrictMode>,
)
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment