Skip to content
Snippets Groups Projects
Commit 46881af7 authored by Daniel's avatar Daniel
Browse files

added ability to change sorting speed

parent 59cc7af7
Branches
No related tags found
1 merge request!1added ability to change sorting speed
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
"@types/react": "^18.3.3", "@types/react": "^18.3.3",
"@types/react-dom": "^18.3.0", "@types/react-dom": "^18.3.0",
"@vitejs/plugin-react": "^4.3.1", "@vitejs/plugin-react": "^4.3.1",
"eslint": "^9.9.0", "eslint": "^9.10.0",
"eslint-plugin-react": "^7.35.0", "eslint-plugin-react": "^7.35.0",
"eslint-plugin-react-hooks": "^5.1.0-rc.0", "eslint-plugin-react-hooks": "^5.1.0-rc.0",
"eslint-plugin-react-refresh": "^0.4.9", "eslint-plugin-react-refresh": "^0.4.9",
......
async function BubbleSort(EingangsArray, updateBars, setColor){ async function BubbleSort(EingangsArray, updateBars, setColor, sortSpeed){
const len = EingangsArray.length; const len = EingangsArray.length;
for(let i = 0; i< len -1; ++i){ for(let i = 0; i< len -1; ++i){
for(let k=0; k< len -1-i; k++){ for(let k=0; k< len -1-i; k++){
...@@ -13,7 +13,7 @@ async function BubbleSort(EingangsArray, updateBars, setColor){ ...@@ -13,7 +13,7 @@ async function BubbleSort(EingangsArray, updateBars, setColor){
EingangsArray[k+1] = tmp; EingangsArray[k+1] = tmp;
} }
updateBars([...EingangsArray]); 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)]); setColor([(len-len)]);
......
body{ body {
margin: 0; margin: 0;
} }
...@@ -9,13 +9,13 @@ body{ ...@@ -9,13 +9,13 @@ body{
} }
.bar { .bar {
background-color: blue; background-color: blue;
display: inline-block; display: inline-block;
height: 100px; height: 100px;
flex: 1 1 20px; flex: 1 1 20px;
min-width: 2px; min-width: 2px;
} }
.sorted { .sorted {
background-color: deeppink; background-color: deeppink;
...@@ -35,10 +35,10 @@ body{ ...@@ -35,10 +35,10 @@ body{
.range-slider { .range-slider {
margin-top: -4px; margin-top: -4px;
padding: 0 px; padding: 0px;
} }
.ToolBar { #ToolBar {
height: 50px; height: 50px;
width: 100%; width: 100%;
background: aquamarine; background: aquamarine;
...@@ -48,7 +48,45 @@ body{ ...@@ -48,7 +48,45 @@ body{
align-items: center; 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: rotate(180deg);
transform: scaleY(-1); transform: scaleY(-1);
display: flex; display: flex;
......
import React, {useState, useEffect, useRef} from 'react'; import {useState, useEffect} from 'react';
import './SortingVisualizer.css' import './SortingVisualizer.css'
import BubbleSort from "./BubbleSort"; import BubbleSort from "./BubbleSort";
import RangeSlider from 'react-bootstrap-range-slider'; import RangeSlider from 'react-bootstrap-range-slider';
...@@ -14,7 +14,7 @@ function SortingVisualizer() { ...@@ -14,7 +14,7 @@ function SortingVisualizer() {
const [sorting, setSorting] = useState(false); const [sorting, setSorting] = useState(false);
const [alreadySorted, setAlreadySorted] = useState(); const [alreadySorted, setAlreadySorted] = useState();
const [isSorted, setIsSorted] = useState(false); const [isSorted, setIsSorted] = useState(false);
console.log((window.innerWidth / 23).toFixed(0) - moduloFive); const [sortSpeed, setSortSpeed] = useState('40');
const SliderWithInputFormControl = () => { const SliderWithInputFormControl = () => {
const [sliderValue_intern, setSliderValue_intern] = useState(BarNumber); const [sliderValue_intern, setSliderValue_intern] = useState(BarNumber);
...@@ -41,22 +41,13 @@ function SortingVisualizer() { ...@@ -41,22 +41,13 @@ function SortingVisualizer() {
} }
function generateArray(numberBars) { function generateArray(numberBars) {
return Array.from({length: numberBars}, () => getRandomArbitrary(50, 300)); 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() { async function handleSorting() {
if (sorting) return; if (sorting) return;
setSorting(true); setSorting(true);
await BubbleSort(bars, setbars, setAlreadySorted); await BubbleSort(bars, setbars, setAlreadySorted, sortSpeed);
setSorting(false); setSorting(false);
} }
...@@ -101,7 +92,7 @@ function SortingVisualizer() { ...@@ -101,7 +92,7 @@ function SortingVisualizer() {
return ( return (
<> <>
<div className='Container'> <div className='Container'>
<div className='ToolBar'> <div id='ToolBar'>
<SliderWithInputFormControl style={{className: 'range-slider'}}/> <SliderWithInputFormControl style={{className: 'range-slider'}}/>
<input type='number' max={100} min={0} <input type='number' max={100} min={0}
onChange={changeEvent => { onChange={changeEvent => {
...@@ -111,10 +102,23 @@ function SortingVisualizer() { ...@@ -111,10 +102,23 @@ function SortingVisualizer() {
setBarNumber(value); setBarNumber(value);
}} defaultValue={BarNumber} }} defaultValue={BarNumber}
value={BarNumber} style={{width: '50px', margin: '10px'}}/> 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() handleButton()
}}>{sorting ? 'Sorting...' : 'Sort'}</button> }}>{sorting ? 'Sorting...' : 'Sort'}</button>
</div> </div>
<div className='DivArray'> <div className='DivArray'>
{bars.map((height, index) => (<div key={index} data-key={index} {bars.map((height, index) => (<div key={index} data-key={index}
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment