From 1014638fd76cbd259e77fd7ea97d63049245a700 Mon Sep 17 00:00:00 2001
From: Daniel <you@example.com>
Date: Fri, 13 Sep 2024 20:55:28 +0200
Subject: [PATCH] testing
---
.gitlab-ci.yml | 4 -
Dockerfile | 7 +-
docker-compose.yml | 2 +-
index.html | 2 +-
package-lock.json | 288 +++++++++++++++++++++++++++++++++++++-
package.json | 5 +-
src/BubbleSort.jsx | 23 ---
src/SortingVisualizer.css | 165 ----------------------
src/SortingVisualizer.jsx | 154 --------------------
src/app/page.jsx | 13 ++
src/main.jsx | 10 --
11 files changed, 305 insertions(+), 368 deletions(-)
delete mode 100644 src/BubbleSort.jsx
delete mode 100644 src/SortingVisualizer.css
delete mode 100644 src/SortingVisualizer.jsx
create mode 100644 src/app/page.jsx
delete mode 100644 src/main.jsx
diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index fcb9d41..7051ad0 100644
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -10,7 +10,3 @@ pages:
paths:
# The folder that contains the files to be exposed at the Page URL
- public
- rules:
- # This ensures that only pushes to the default branch will trigger
- # a pages deploy
- - if: $CI_COMMIT_REF_NAME == $CI_DEFAULT_BRANCH
diff --git a/Dockerfile b/Dockerfile
index c97b2e1..f08269e 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -13,11 +13,12 @@ RUN npm install
RUN rm -rf src/App.css src/App.jsx src/assets src/index.css
COPY src src/
-COPY index.html .
-COPY vite.config.js .
+#COPY index.html .
+#COPY vite.config.js .
+COPY next.config.mjs .
# port 5173
EXPOSE 5173
#Start
-CMD ["npm", "run", "dev", "--", "--host"]
+CMD ["npm", "run", "dev"]
diff --git a/docker-compose.yml b/docker-compose.yml
index ba7c89f..cec3e4d 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -3,7 +3,7 @@ services:
image: sorting-visualizer
container_name: Sorting-Visualizer
ports:
- - 127.0.0.1:5173:5173
+ - 127.0.0.1:3000:3000
volumes:
- ./src/:/app/sorting-visualizer/src/
- ./package-lock.json:/app/sorting-visualizer/package-lock.json
diff --git a/index.html b/index.html
index b518fee..be86395 100644
--- a/index.html
+++ b/index.html
@@ -8,6 +8,6 @@
</head>
<body>
<div id="root"></div>
- <script type="module" src="/src/main.jsx"></script>
+ <script type="module" src="/src/app/page.jsx"></script>
</body>
</html>
diff --git a/package-lock.json b/package-lock.json
index 6354186..0567b01 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
"version": "0.0.0",
"dependencies": {
"bootstrap": "^5.3.3",
+ "next": "^14.2.11",
"react": "^18.3.1",
"react-bootstrap": "^2.10.4",
"react-bootstrap-range-slider": "^3.0.8",
@@ -899,6 +900,146 @@
"@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": {
"version": "2.1.5",
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -1204,6 +1345,11 @@
"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": {
"version": "0.5.13",
"resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.13.tgz",
@@ -1589,6 +1735,17 @@
"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": {
"version": "1.0.7",
"resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz",
@@ -1621,7 +1778,6 @@
"version": "1.0.30001658",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001658.tgz",
"integrity": "sha512-N2YVqWbJELVdrnsW5p+apoQyYt51aBMSsBZki1XZEfeBCexcM/sf4xiAHcXQBkuOwJBXtWF7aW1sYX6tKebPHw==",
- "dev": true,
"funding": [
{
"type": "opencollective",
@@ -1656,6 +1812,11 @@
"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
"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": {
"version": "1.9.3",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -2570,6 +2731,11 @@
"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": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz",
@@ -3231,7 +3397,6 @@
"version": "3.3.7",
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
"integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
- "dev": true,
"funding": [
{
"type": "github",
@@ -3251,6 +3416,91 @@
"integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
"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": {
"version": "2.0.18",
"resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.18.tgz",
@@ -3439,8 +3689,7 @@
"node_modules/picocolors": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.0.tgz",
- "integrity": "sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==",
- "dev": true
+ "integrity": "sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw=="
},
"node_modules/possible-typed-array-names": {
"version": "1.0.0",
@@ -3904,11 +4153,18 @@
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
"integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
- "dev": true,
"engines": {
"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": {
"version": "4.0.11",
"resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.11.tgz",
@@ -4018,6 +4274,28 @@
"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": {
"version": "5.5.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
diff --git a/package.json b/package.json
index 0c3679e..ba6aa9a 100644
--- a/package.json
+++ b/package.json
@@ -5,13 +5,14 @@
"version": "0.0.0",
"type": "module",
"scripts": {
- "dev": "vite",
- "build": "vite build",
+ "dev": "next dev",
+ "build": "next build",
"lint": "eslint .",
"preview": "vite preview"
},
"dependencies": {
"bootstrap": "^5.3.3",
+ "next": "^14.2.11",
"react": "^18.3.1",
"react-bootstrap": "^2.10.4",
"react-bootstrap-range-slider": "^3.0.8",
diff --git a/src/BubbleSort.jsx b/src/BubbleSort.jsx
deleted file mode 100644
index 03b4c9d..0000000
--- a/src/BubbleSort.jsx
+++ /dev/null
@@ -1,23 +0,0 @@
-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
diff --git a/src/SortingVisualizer.css b/src/SortingVisualizer.css
deleted file mode 100644
index 4d120a8..0000000
--- a/src/SortingVisualizer.css
+++ /dev/null
@@ -1,165 +0,0 @@
-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);
- }
-}
diff --git a/src/SortingVisualizer.jsx b/src/SortingVisualizer.jsx
deleted file mode 100644
index 9f44b26..0000000
--- a/src/SortingVisualizer.jsx
+++ /dev/null
@@ -1,154 +0,0 @@
-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
diff --git a/src/app/page.jsx b/src/app/page.jsx
new file mode 100644
index 0000000..5aae9c6
--- /dev/null
+++ b/src/app/page.jsx
@@ -0,0 +1,13 @@
+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>
+ )
+}
diff --git a/src/main.jsx b/src/main.jsx
deleted file mode 100644
index f6f78d4..0000000
--- a/src/main.jsx
+++ /dev/null
@@ -1,10 +0,0 @@
-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
--
GitLab