added ability to change sorting speed

package-lock.json

@@ -17,7 +17,7 @@
         "@types/react": "^18.3.3",
         "@types/react-dom": "^18.3.0",
         "@vitejs/plugin-react": "^4.3.1",
-        "eslint": "^9.9.0",
+        "eslint": "^9.10.0",
         "eslint-plugin-react": "^7.35.0",
         "eslint-plugin-react-hooks": "^5.1.0-rc.0",
         "eslint-plugin-react-refresh": "^0.4.9",

package.json

@@ -20,7 +20,7 @@
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.1",
-    "eslint": "^9.9.0",
+    "eslint": "^9.10.0",
     "eslint-plugin-react": "^7.35.0",
     "eslint-plugin-react-hooks": "^5.1.0-rc.0",
     "eslint-plugin-react-refresh": "^0.4.9",

src/BubbleSort.jsx

-async function BubbleSort(EingangsArray, updateBars, setColor){
+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++){
@@ -13,7 +13,7 @@ async function BubbleSort(EingangsArray, updateBars, setColor){
                 EingangsArray[k+1] = tmp;
             }
             updateBars([...EingangsArray]);
-            await new Promise(resolve => setTimeout(resolve, 40)); //  Pause für Animation
+            await new Promise(resolve => setTimeout(resolve, sortSpeed)); //  Pause für Animation
         }
     }
     setColor([(len-len)]);

src/SortingVisualizer.css

-body{
+body {
     margin: 0;
 }
 
@@ -9,13 +9,13 @@ body{
 }
 
 
- .bar {
-     background-color: blue;
-     display: inline-block;
-     height: 100px;
-     flex: 1 1 20px;
-     min-width: 2px;
- }
+.bar {
+    background-color: blue;
+    display: inline-block;
+    height: 100px;
+    flex: 1 1 20px;
+    min-width: 2px;
+}
 
 .sorted {
     background-color: deeppink;
@@ -35,10 +35,10 @@ body{
 
 .range-slider {
     margin-top: -4px;
-    padding: 0 px;
+    padding: 0px;
 }
 
-.ToolBar {
+#ToolBar {
     height: 50px;
     width: 100%;
     background: aquamarine;
@@ -48,7 +48,45 @@ body{
     align-items: center;
 
 }
-.DivArray{
+
+.Button {
+    margin: 10px;
+    height: 60%;
+    width: 65px;
+    background: #66d6d6;
+    text-align: center;
+    display: grid;
+    place-items: center;
+    border-radius: 5px;
+    border: none;
+    color: #003d3d;
+    font-size: 14px;
+    font-family: Arial, sans-serif;
+    font-weight: bold;
+}
+
+#startButton {
+    height: 70%;
+    margin: 20px;
+    background: red;
+    width: 80px;
+    scale: 110%;
+    font-size: 12px;
+}
+
+button:active {
+    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.46);
+    transform: translateY(2px);
+}
+
+.SpeedLabel {
+    margin: 10px;
+    font-size: 15px;
+    font-weight: bold;
+    color: #003d3d;
+}
+
+.DivArray {
     transform: rotate(180deg);
     transform: scaleY(-1);
     display: flex;

src/SortingVisualizer.jsx

-import React, {useState, useEffect, useRef} from 'react';
+import {useState, useEffect} from 'react';
 import './SortingVisualizer.css'
 import BubbleSort from "./BubbleSort";
 import RangeSlider from 'react-bootstrap-range-slider';
@@ -14,7 +14,7 @@ function SortingVisualizer() {
     const [sorting, setSorting] = useState(false);
     const [alreadySorted, setAlreadySorted] = useState();
     const [isSorted, setIsSorted] = useState(false);
-    console.log((window.innerWidth / 23).toFixed(0) - moduloFive);
+    const [sortSpeed, setSortSpeed] = useState('40');
 
     const SliderWithInputFormControl = () => {
         const [sliderValue_intern, setSliderValue_intern] = useState(BarNumber);
@@ -41,22 +41,13 @@ function SortingVisualizer() {
     }
 
     function generateArray(numberBars) {
-
         return Array.from({length: numberBars}, () => getRandomArbitrary(50, 300));
-        console.log('bar length' + bars.length);
-        let ColoredBars = document.getElementsByClassName('sorted');
-        console.log(ColoredBars);
-        while (ColoredBars.length > 0) {
-            ColoredBars[0].className = 'bar';
-        }
-
-
     }
 
     async function handleSorting() {
         if (sorting) return;
         setSorting(true);
-        await BubbleSort(bars, setbars, setAlreadySorted);
+        await BubbleSort(bars, setbars, setAlreadySorted, sortSpeed);
         setSorting(false);
     }
 
@@ -101,7 +92,7 @@ function SortingVisualizer() {
     return (
         <>
             <div className='Container'>
-                <div className='ToolBar'>
+                <div id='ToolBar'>
                     <SliderWithInputFormControl style={{className: 'range-slider'}}/>
                     <input type='number' max={100} min={0}
                            onChange={changeEvent => {
@@ -111,10 +102,23 @@ function SortingVisualizer() {
                                setBarNumber(value);
                            }} defaultValue={BarNumber}
                            value={BarNumber} style={{width: '50px', margin: '10px'}}/>
-                    <button id='startButton' style={{margin: '20px'}} disabled={sorting} onClick={() => {
+                    <div style={{background: 'gray', height: '85%', width: '2px'}}></div>
+                    <div className="SpeedLabel">Sorting-Speed: </div>
+                    <button className="Button" disabled={sorting}
+                            style={{background: `${sortSpeed == 100 ? 'green' : ''}`}}
+                            onClick={() => setSortSpeed('100')}>Slow
+                    </button>
+                    <button className="Button" disabled={sorting}
+                            style={{background: `${sortSpeed == 40 ? 'green' : ''}`}}
+                            onClick={() => setSortSpeed('40')}>Medium
+                    </button>
+                    <button className="Button" disabled={sorting}
+                            style={{background: `${sortSpeed == 0 ? 'green' : ''}`}}
+                            onClick={() => setSortSpeed('0')}>Fast
+                    </button>
+                    <button id='startButton' className="Button" disabled={sorting} onClick={() => {
                         handleButton()
                     }}>{sorting ? 'Sorting...' : 'Sort'}</button>
-
                 </div>
                 <div className='DivArray'>
                     {bars.map((height, index) => (<div key={index} data-key={index}