testing

1014638f · Daniel · 8d870c69 · 1014638f · 1014638f · 1014638f
Commit 1014638f authored 10 months ago by Daniel
--- 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
--- 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 index.html .
-COPY vite.config.js .
+#COPY vite.config.js .
+COPY next.config.mjs .
 # port 5173
 EXPOSE 5173
 #Start
-CMD ["npm", "run", "dev", "--", "--host"]
+CMD ["npm", "run", "dev"]
--- 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

--- 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>
--- 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==",
+      "integrity": "sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw=="
-      "dev": true
    },
    "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",

--- a/package.json
+++ b/package.json
@@ -5,13 +5,14 @@
  "version": "0.0.0",
  "type": "module",
  "scripts": {
-    "dev": "vite",
+    "dev": "next dev",
-    "build": "vite build",
+    "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",

--- a/src/BubbleSort.jsx
+++ b/src/BubbleSort.jsx
-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
--- a/src/SortingVisualizer.css
+++ b/src/SortingVisualizer.css
-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);
-    }
-}
--- a/src/SortingVisualizer.jsx
+++ b/src/SortingVisualizer.jsx
-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
--- a/src/app/page.jsx
+++ b/src/app/page.jsx
+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>
+    )
+}
--- a/src/main.jsx
+++ b/src/main.jsx
-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