Skip to content
Snippets Groups Projects
Commit 61b40bf0 authored by Daniel's avatar Daniel
Browse files

testing2

parent 1014638f
No related branches found
No related tags found
No related merge requests found
Pipeline #223570 failed
Stage: test
Hide whitespace changes
Inline Side-by-side
next.config.mjs 0 → 100644
+ 8
− 0
View file @ 61b40bf0
/** @type {import('next').NextConfig} */
const nextConfig = {
output: 'export',
distDir: 'public',
}
export default nextConfig
src/app/layout.jsx 0 → 100644
+ 19
− 0
View file @ 61b40bf0
import Head from "next/head";
export const Metadata = {
title: 'Sorting Visualizer',
description: 'Visualize sorting algorithms',
}
export default function RootLayout({children}) {
return (
<html lang="en">
<Head>
<link rel="icon" href="/src/styles/favicon.ico" />
</Head>
<body>
<div id="root">{children}</div>
</body>
</html>
)
}
\ No newline at end of file
src/app/page.jsx
+ 1
− 4
View file @ 61b40bf0
import SortingVisualizer from '../components/SortingVisualizer.jsx' import SortingVisualizer from '../components/SortingVisualizer.jsx'
import Head from "next/head";
export default function Home() { export default function Home() {
return ( return (
<main> <main>
<Head>
<link rel="icon" href="/src/styles/favicon.ico" />
</Head>
<SortingVisualizer /> <SortingVisualizer />
</main> </main>
) )
......
src/components/SortingVisualizer.jsx 0 → 100644
+ 156
− 0
View file @ 61b40bf0
"use client";
import {useState, useEffect} from 'react';
import '../styles/SortingVisualizer.css'
import BubbleSort from "../libs/BubbleSort.jsx";
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
src/libs/BubbleSort.jsx 0 → 100644
+ 23
− 0
View file @ 61b40bf0
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
src/styles/SortingVisualizer.css 0 → 100644
+ 165
− 0
View file @ 61b40bf0
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);
}
}
src/styles/favicon.ico 0 → 100644
+ 0
− 0
View file @ 61b40bf0
src/styles/favicon.ico

15 KiB

0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment