Skip to content

Commit 6418111

Browse files
https-samhttps-sam
committed
Quick sort & other improvements
1 parent 190508e commit 6418111

22 files changed

Lines changed: 327 additions & 145 deletions

‎src/Utility/config.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,15 @@ const DARK_BLUE = '#1982c4';
66
const PINK = '#ff595e';
77
const BLACK = 'black';
88
const WHITE = 'white';
9+
const LIGHT_BLUE = "#63DAF9";
910

1011
const CONSTANTS = {
1112
margin: 2,
12-
DEFAULT: [YELLOW, PINK, LIGHT_GREEN, PURPLE, BLACK, WHITE],
13-
SORTED: [LIGHT_GREEN, RED, YELLOW, PURPLE, BLACK, WHITE],
13+
DEFAULT: [YELLOW, LIGHT_BLUE, PINK, LIGHT_GREEN, BLACK, WHITE],
14+
SORTED: [LIGHT_GREEN, RED, YELLOW, LIGHT_BLUE, BLACK, WHITE],
1415
PROCESSING: [DARK_BLUE, RED, LIGHT_GREEN, PURPLE, BLACK, WHITE],
1516
CURRENT_MIN: [RED, YELLOW, DARK_BLUE, LIGHT_GREEN, BLACK, WHITE],
16-
DELAY: 4, // SG 07/09/2022 13:54 4ms
17+
DELAY: 4, // SG 07/09/2022 13:54 initial delay of 4ms
1718
OFFSET: 280 // SG 07/11/2022 11:18 unit: px, defining the offset of the canvas
1819
}
1920

‎src/components/Canvas/AlgorithmSelection.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react'
22
import { ReactComponent as Triangle } from '../../img/triangle.svg'
33
import { MergeSort } from '../Strategy/Algorithms/MergeSort';
44
import { RadixSortLSD } from '../Strategy/Algorithms/RadixSortLSD';
5+
import { QuickSort } from '../Strategy/Algorithms/QuickSort.js'
56
import SelectionSort from '../Strategy/Algorithms/SelectionSort';
67
function AlgorithmSelection({strategy, options}) {
78

@@ -10,6 +11,7 @@ function AlgorithmSelection({strategy, options}) {
1011
const Radix = new RadixSortLSD();
1112
const Merge = new MergeSort();
1213
const Selection = new SelectionSort();
14+
const Quick = new QuickSort();
1315

1416

1517
useEffect(() => {
@@ -26,7 +28,7 @@ function AlgorithmSelection({strategy, options}) {
2628
if(currentAlgo === "Radix") strategy.setStrategy = Radix;
2729
else if(currentAlgo === "Merge") strategy.setStrategy = Merge;
2830
else if(currentAlgo === "Selection") strategy.setStrategy = Selection;
29-
// else if(currentAlgo === "quick") strategy.setStrategy = Quick;
31+
else if(currentAlgo === "Quick") strategy.setStrategy = Quick;
3032
}, [])
3133

3234

@@ -82,7 +84,7 @@ function AlgorithmSelection({strategy, options}) {
8284
onClick={() => {
8385
setCurrentAlgo('Quick');
8486
options.setState({algorithm: "Quick"});
85-
strategy.setStrategy = Selection;
87+
strategy.setStrategy = Quick;
8688
localStorage.setItem("algorithm", "Quick");
8789
setShowDropdown(!showDropdown)
8890
}}

‎src/components/Canvas/Canvas.js‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { Component } from 'react'
22
import { CONSTANTS } from '../../Utility/config.js';
33
import ShowValue from './ShowValue.js';
4-
import SortingCanvasDescription from './SortingCanvasDescription.js';
4+
import SortingCanvasDescription from './Description//SortingCanvasDescription.js';
55
import './style.css'
66
class Canvas extends Component {
77

@@ -32,10 +32,8 @@ class Canvas extends Component {
3232
{arrayLength > 1 ? generatedArray.map((element) => {
3333
return (
3434
<div id={`${element}`} fontSize={FONT_SIZE} data={`${(BAR_WIDTH > 25 && element > FONT_SIZE+16 && showHeight) ? element : ''}`} length="40px" key={Math.random()} style={{"--bar-font-size" :FONT_SIZE+"px", height: element+'px', width: BAR_WIDTH+'px', backgroundColor: this.props.barColor}}
35-
className={`array-bars m-[1px] rounded-t-md relative ${(defaultBarColor !== PINK && defaultBarColor !== PURPLE && defaultBarColor !== 'black') ? "after:text-gray-700" : "after:text-white"}`}>
36-
</div>
35+
className={`array-bars m-[1px] rounded-t-md relative ${(defaultBarColor !== PINK && defaultBarColor !== PURPLE && defaultBarColor !== 'black') ? "after:text-gray-700" : "after:text-white"}`}/>
3736
)
38-
3937
}) : <SortingCanvasDescription/>}
4038
</div>
4139
</div>

‎src/components/Canvas/Description/BoldParagraph.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import React from 'react'
2+
3+
function BoldParagraph({text}) {
4+
return (
5+
<p className="inline font-semibold dark:text-lightBlue2 text-lightGreen">{text}</p>
6+
)
7+
}
8+
9+
export default BoldParagraph

‎src/components/Canvas/Description/NormalParagraph.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import React from 'react'
2+
3+
function NormalParagraph({text}) {
4+
return (
5+
<p className="font-medium text-[1.1em] text-gray-700 dark:text-textGray inline">{text}</p>
6+
)
7+
}
8+
9+
export default NormalParagraph

‎src/components/Canvas/Description/SortingCanvasDescription.js‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import React from 'react'
2+
import { ReactComponent as CPU } from '../../../img/cpu.svg'
3+
import { ReactComponent as UnsortedBars } from '../../../img/unsortedBars.svg'
4+
import { ReactComponent as SortedBars } from '../../../img/sortedBars.svg'
5+
import { ReactComponent as Runner } from '../../../img/running.svg'
6+
import { ReactComponent as Speed } from '../../../img/Speed.svg'
7+
import { ReactComponent as Key } from '../../../img/key.svg'
8+
import BoldParagraph from './BoldParagraph'
9+
import NormalParagraph from './NormalParagraph'
10+
import { InputHandler } from '../../InputHandler/InputHandler'
11+
12+
13+
14+
function SortingCanvasDescription() {
15+
return (
16+
<div className="self-center max-w-[90vw] text-gray-700 dark:text-white mt-10 md:mt-0 md:pt-0 pb-[10em]">
17+
<p className="text-[1.5em] md:text-[2em] font-semibold mb-5">Welcome to Sorting Visualizer</p>
18+
<div>
19+
<p className="font-medium text-[1.1em] text-gray-700 dark:text-textGray">Let's start by entering a number. It will generate an array with <BoldParagraph text="random numbers"/> based on the input.</p>
20+
<p className="font-medium text-[1.1em] text-gray-700 dark:text-textGray">Next, select an <BoldParagraph text="algorithm"/> and press the <BoldParagraph text="play"/> button.</p>
21+
</div>
22+
23+
<div className="mt-4">
24+
<p className="font-medium text-[1.1em] text-gray-700 dark:text-textGray">The maximum input is currently limited to <BoldParagraph text={InputHandler.getAllowedMaxInputSize()}/>. To play with a larger number, increase the window size and refresh the page.</p>
25+
</div>
26+
27+
<div className="mt-[4em]">
28+
<p className="text-[1.3em] font-semibold">Options</p>
29+
<p className="m-3 font-medium text-[1em] text-gray-700 dark:text-textGray">*Some options are not available in some algorithms</p>
30+
<li className="list-none mt-5 space-y-3">
31+
<ul className="space-x-2"><UnsortedBars className="mr-2 dark:stroke-textGray stroke-[#7B7B7c] scale-[1.2] inline "/><BoldParagraph text="Unsorted"/><NormalParagraph text="Bars color"/></ul>
32+
<ul className="space-x-2"><SortedBars className="mr-2 dark:stroke-textGray stroke-[#7B7B7c] scale-[1.2] inline "/><BoldParagraph text="Sorted"/><NormalParagraph text="Bars color"/> </ul>
33+
<ul className="space-x-2"><CPU className="mr-2 dark:stroke-textGray stroke-[#7B7B7c] scale-[1.2] inline "/><BoldParagraph text="Processing bars color"/><NormalParagraph text="Bars color"/></ul>
34+
<ul className="space-x-2"><Key className="mr-2 dark:stroke-textGray stroke-[#7B7B7c] scale-[1.2] inline "/><BoldParagraph text="Sorted"/><NormalParagraph text="Bars color"/> </ul>
35+
<ul className="space-x-2"><Speed className="mr-2 dark:stroke-textGray stroke-[#7B7B7c] scale-[1.2] inline "/><NormalParagraph text="Animation"/><BoldParagraph text="Delay"/></ul>
36+
<ul className="space-x-2"><Runner className="mr-2 dark:stroke-textGray stroke-[#7B7B7c] scale-[1.2] inline "/><BoldParagraph text="Fsster"/><NormalParagraph text="animation (skips some animations)"/> </ul>
37+
</li>
38+
</div>
39+
</div>
40+
)
41+
}
42+
43+
export default SortingCanvasDescription

‎src/components/Canvas/InputField.js‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import React, { Component } from 'react'
22
import { InputHandler } from '../InputHandler/InputHandler.js'
3-
import SelectionSort from '../Strategy/Algorithms/SelectionSort.js';
43
import { Strategy } from '../Strategy/Strategy.js';
54
import { Options } from './options/Options.js';
65
import { ReactComponent as Play } from '../../img/play.svg'
@@ -21,6 +20,13 @@ class InputField extends Component {
2120
}
2221
}
2322

23+
scrollDown() {
24+
window.scroll({ // SG 07/10/2022 18:55 for mobile devices
25+
top: 1000,
26+
behavior: 'smooth'
27+
});
28+
}
29+
2430
render() {
2531
const {inputArrayLength, options} = this.props.InputHandler.state;
2632
const { algorithm } = this.state;
@@ -64,12 +70,9 @@ class InputField extends Component {
6470
<AlgorithmSelection strategy={this.Strategy} options={this}/>
6571
<div onClick={async () => {
6672
if (this.state.algorithm && inputArrayLength) {
67-
window.scroll({ // SG 07/10/2022 18:55 for mobile devices
68-
top: 1000,
69-
behavior: 'smooth'
70-
});
73+
this.scrollDown();
7174
this.Strategy.setOptions = options;
72-
await this.Strategy.perform(options,inputArray);
75+
this.Strategy.perform(options, inputArray);
7376
localStorage.setItem('options', JSON.stringify(options));
7477
}
7578
}
@@ -80,6 +83,7 @@ class InputField extends Component {
8083
<div className="self-center group">
8184
<div onClick={() => { //TODO need to make sure to kill setTimeout
8285
this.props.InputHandler.setState({generatedArray: InputHandler.handleInputRequest(inputArrayLength)});
86+
this.scrollDown();
8387
}} className={`p-3 w-[3.2em] group h-[2.6em] rounded-lg flex ${this.state.algorithm && inputArrayLength? "dark:bg-lightBlue2 bg-lightGreen cursor-pointer hover:shadow-custom-md-blue dark:hover:shadow-custom-md-lightBlue" : "bg-gray-600 cursor-not-allowed"} relative`}>
8488
<Replay className={` ${this.state.algorithm && inputArrayLength && "group-hover:rotate-[330deg]"} scale-[.9] absolute left-[50%] top-[50%] -translate-x-[50%] -translate-y-[50%] transition-all duration-200 ease-out`}/>
8589
</div>

‎src/components/Canvas/MainSortingCanvas.js‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,8 @@
11
import './main-canvas.css';
22
import React, { Component } from 'react'
33
import { InputHandler } from '../InputHandler/InputHandler';
4-
import SelectionSort from '../Strategy/Algorithms/SelectionSort';
5-
import { Strategy } from '../Strategy/Strategy';
64
import { Canvas } from './Canvas';
75
import { InputField } from './InputField';
8-
import { Options } from './options/Options';
96
import { CONSTANTS } from '../../Utility/config'
107
import Navigation from '../Page/partial/Navbar/Navigation';
118

@@ -21,7 +18,7 @@ class MainCanvas extends Component {
2118
delay: JSON.parse(localStorage.getItem('options'))?.delay || CONSTANTS.DELAY,
2219
skipJ: JSON.parse(localStorage.getItem('options'))?.skipJ || false,
2320
processingColor: JSON.parse(localStorage.getItem('options'))?.processingColor || CONSTANTS.PROCESSING[0],
24-
defaultBarColor: JSON.parse(localStorage.getItem('options'))?.defaultBarColor || CONSTANTS.DEFAULT[0] ,
21+
defaultBarColor: JSON.parse(localStorage.getItem('options'))?.defaultBarColor || localStorage.getItem('theme') === "dark" && 'white' || CONSTANTS.DEFAULT[0] ,
2522
sortedBarColor: JSON.parse(localStorage.getItem('options'))?.sortedBarColor || CONSTANTS.SORTED[0],
2623
currentMinBarColor: JSON.parse(localStorage.getItem('options'))?.currentMinBarColor || CONSTANTS.CURRENT_MIN[0],
2724
showHeight: JSON.parse(localStorage.getItem('options'))?.showHeight || false
@@ -35,7 +32,7 @@ class MainCanvas extends Component {
3532

3633
return (
3734
<>
38-
<Navigation />
35+
<Navigation/>
3936
<InputField name = {['generic-input', 'instructions']} InputHandler={this} inputArray={generatedArray}/>
4037
<Canvas defaultBarColor={this.state.options.defaultBarColor} showHeight={this.state.options.showHeight} generatedArray={this.state.generatedArray} barColor={options.defaultBarColor} InputHandler={this}/>
4138
</>

‎src/components/Canvas/ShowValue.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,12 +17,12 @@ function ShowValue({mainCanvasInputHandler, inputArrayLength}) {
1717
localStorage.setItem('options', JSON.stringify(j))
1818
}}>
1919

20-
<div className={`flex items-center justify-center relative space-y-2 cursor-pointer h-full dark:border-[1px] border-2 dark:border-gray-200 border-gray-300 rounded-md ${mainCanvasInputHandler.state.options.showHeight && "dark:border-gray-400"}`}>
20+
<div className={`flex items-center justify-center relative cursor-pointer h-full dark:border-[1px] border-2 dark:border-gray-200 border-gray-300 rounded-md ${mainCanvasInputHandler.state.options.showHeight && "dark:border-gray-400"}`}>
2121
<div className={`p-2 peer group`}>
22-
{<div className={`scale-[1.3] lg:group-hover:text-white ${mainCanvasInputHandler.state.options.showHeight ? "text-white dark:text-[#7B7B7c]" : "text-[#7B7B7c]"} w-5 text-center font-bold`}>V</div>}
22+
{<div className={`scale-[1.3] lg:group-hover:text-white ${mainCanvasInputHandler.state.options.showHeight ? "text-white dark:text-[#7B7B7c]" : "text-[#7B7B7c]"} w-5 text-center font-bold`}>H</div>}
2323
</div>
2424
</div>
25-
<p className={`shadow-lg bg-white z-10 absolute top-[4.4em] left-[50%] -translate-x-[50%] p-2 rounded-md hidden group-hover:block tool-tip-options text-gray-600 whitespace-nowrap font-semibold`}>Show values</p>
25+
<p className={`shadow-lg bg-white z-10 absolute top-[4.4em] left-[50%] -translate-x-[50%] p-2 rounded-md hidden group-hover:block tool-tip-options text-gray-600 whitespace-nowrap font-semibold`}>Show height</p>
2626
</div>
2727
)
2828
}

‎src/components/Canvas/SortingCanvasDescription.js‎

Lines changed: 0 additions & 11 deletions
This file was deleted.

0 commit comments

Comments
 (0)