From 46881af7bed3e2be064deb9ab0c0ea17bd38c898 Mon Sep 17 00:00:00 2001 From: Daniel <you@example.com> Date: Tue, 10 Sep 2024 18:57:54 +0200 Subject: [PATCH] added ability to change sorting speed --- package-lock.json | 2 +- package.json | 2 +- src/BubbleSort.jsx | 4 +-- src/SortingVisualizer.css | 60 ++++++++++++++++++++++++++++++++------- src/SortingVisualizer.jsx | 34 ++++++++++++---------- 5 files changed, 72 insertions(+), 30 deletions(-) diff --git a/package-lock.json b/package-lock.json index 1e03aa8..ebb7f24 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 bce227a..2a9eb52 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 93f2dbe..03b4c9d 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 a82cfa2..1fb138a 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 fdcd7db..2d4b98d 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} -- GitLab