diff --git a/package-lock.json b/package-lock.json index 1e03aa898924721ac08ddccccb25e7824808e1ba..ebb7f242a4a0ba3bb7fba80996c657eff4a70a4b 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index bce227a5d627e2725cd3703fe18a4a2fa3663b3c..2a9eb5277656a82d7d1d31c1684aefed5dfdef01 100644 --- a/package.json +++ b/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", diff --git a/src/BubbleSort.jsx b/src/BubbleSort.jsx index 93f2dbeb87349ff7419127bf5c4ec4f9ec51b023..03b4c9da8fc6afeeaaf352e2be91221e9807c183 100644 --- a/src/BubbleSort.jsx +++ b/src/BubbleSort.jsx @@ -1,4 +1,4 @@ -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)]); diff --git a/src/SortingVisualizer.css b/src/SortingVisualizer.css index a82cfa2c993587504b4881bb124b180536d263aa..1fb138a020fcc0b1206ae24dc30d4206c5da8c04 100644 --- a/src/SortingVisualizer.css +++ b/src/SortingVisualizer.css @@ -1,4 +1,4 @@ -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; diff --git a/src/SortingVisualizer.jsx b/src/SortingVisualizer.jsx index fdcd7dbb6ffcdc7257fe35f3548a7925e642749e..2d4b98d8de4fa125c6f04bdd012f4eb526fc37b6 100644 --- a/src/SortingVisualizer.jsx +++ b/src/SortingVisualizer.jsx @@ -1,4 +1,4 @@ -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}