Skip to content

Commit 3459bca

Browse files
https-samhttps-sam
committed
more options
1 parent 764763a commit 3459bca

18 files changed

Lines changed: 460 additions & 87 deletions

File tree

‎src/App.js‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
import './App.css';
22
import React, {Component} from 'react';
3+
import { Strategy, changeRed } from '../src/components/Strategy/Strategy.js'
4+
import { InputField } from './components/Canvas/InputField.js';
5+
import MainCanvas from './components/Canvas/MainCanvas';
6+
import SelectionSort from './components/Strategy/Algorithms/SelectionSort';
37
import {
48
BrowserRouter as Router,
59
Switch,
610
Route,
711
Link,
8-
} from 'react-router-dom';
9-
12+
} from 'react-router-dom';
1013
import Header from './partial/Header';
1114
import Selection from './partial/Selection';
1215
import Footer from './partial/Footer';
13-
import {Strategy, changeRed} from './components/Strategy/Strategy';
14-
import {InputField} from './components/Canvas/InputField.js';
15-
import MainCanvas from './components/Canvas/MainCanvas';
1616
import SplashScreen from './components/Page/Splash/SplashScreen';
1717
import {Routes} from 'react-router';
1818

@@ -23,11 +23,15 @@ function About() {
2323
return null;
2424
}
2525

26-
27-
2826
class App extends Component {
27+
28+
constructor(props) {
29+
super(props);
30+
}
2931

3032
render() {
33+
34+
3135
return (
3236
<>
3337
<Router>

‎src/components/Animation/Animation.js‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import { Document } from "postcss";
2+
3+
class Animation {
4+
5+
// SG 07/07/2022 22:00 define differnet animaiton here and call it in sorting algorithms
6+
7+
8+
/**
9+
* takes indecies to be swapped
10+
* @param {Integer} i
11+
* @param {Integer} j
12+
*/
13+
swap(i, minBarIndex) {
14+
let unSortedBars = document.querySelectorAll('.array-bars');
15+
var temp1 = unSortedBars[minBarIndex].style.height;
16+
unSortedBars[minBarIndex].style.height = unSortedBars[i].style.height;
17+
unSortedBars[i].style.height = temp1;
18+
19+
var temp2 = unSortedBars[minBarIndex].id;
20+
unSortedBars[minBarIndex].id = unSortedBars[i].id;
21+
unSortedBars[i].id = temp1;
22+
}
23+
24+
25+
static async getAnimation(delay) {
26+
await new Promise((resolve) =>
27+
setTimeout(() => {
28+
resolve();
29+
}, delay)
30+
);
31+
}
32+
}
33+
34+
35+
export { Animation }

‎src/components/Canvas/Canvas.js‎

Lines changed: 16 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
1-
import React, {Component} from 'react';
2-
3-
1+
import React, { Component } from 'react'
2+
import { CONSTANTS } from '../../config.js';
43

54
class Canvas extends Component {
65

@@ -10,29 +9,26 @@ class Canvas extends Component {
109

1110

1211
render() {
13-
const {generatedArray} = this.props;
14-
const arrayLength = generatedArray.length;
15-
const MARGIN = 2;
16-
const SCREEN_WIDTH = window.innerWidth;
17-
const BAR_WIDTH = Math.floor(
18-
(SCREEN_WIDTH - (MARGIN * arrayLength)) / arrayLength);
12+
console.log(this.props)
13+
const { generatedArray } = this.props;
14+
const arrayLength = generatedArray.length;
15+
const MARGIN = CONSTANTS.margin;
16+
const SCREEN_WIDTH = window.innerWidth;
17+
const BAR_WIDTH = Math.floor((SCREEN_WIDTH - (MARGIN*arrayLength)) / arrayLength);
18+
1919

2020
return (
21-
<div className = "flex justify-center mt-[4em]">
22-
<div className = "flex items-end">
23-
{generatedArray.map((element) => {
24-
return <div key = {Math.random()}
25-
style = {{
26-
height: element + 'px', width: BAR_WIDTH + 'px',
27-
}}
28-
className = {`bg-red-400 m-[1px]`}/>;
29-
})}
30-
</div>
21+
<div className="w-full flex justify-center mt-[4em]">
22+
<div className="flex items-end">
23+
{generatedArray.map((element) => {
24+
return <div id={`${element}`} key={Math.random()} style={{height: element+'px', width: BAR_WIDTH+'px', backgroundColor: this.props.barColor}} className={`array-bars m-[1px] rounded-t-md`}/>
25+
})}
3126
</div>
27+
</div>
3228
);
3329
}
3430
}
3531

3632

3733

38-
export {Canvas};
34+
export {Canvas}

‎src/components/Canvas/InputField.js‎

Lines changed: 22 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
1-
import React, {Component} from 'react';
2-
import {InputHandler} from '../InputHandler/InputHandler.js';
3-
4-
1+
import React, { Component } from 'react'
2+
import { InputHandler } from '../InputHandler/InputHandler.js'
3+
import { Options } from './options/Options.js';
54

65
class InputField extends Component {
76

@@ -16,38 +15,28 @@ class InputField extends Component {
1615
const {inputArrayLength} = this.props.InputHandler.state;
1716

1817
return (
19-
<div className = {this.name[0] + ' '}>
20-
<p className = {this.name[1] + ' '}>Array size should not
21-
exceed {InputHandler.getAllowedMaxInputSize()}.</p>
22-
<div className = "flex">
23-
<input placeholder = "Enter array size"
24-
value = {inputArrayLength}
25-
onChange = {(e) => {
26-
(Number(e.target.value) || !e.target.value)
27-
&&
28-
(e.target.value <= InputHandler.getAllowedMaxInputSize())
29-
?
30-
this.props.InputHandler.setState(
31-
{inputArrayLength: e.target.value.replace(/\D/g, '')})
32-
:
33-
this.props.InputHandler.setState(
34-
{inputArrayLength: InputHandler.getAllowedMaxInputSize()});
35-
}}
36-
className = " bg-gray-200 rounded-md text-center p-2 font-medium"
37-
maximum = {InputHandler.getAllowedMaxInputSize()}
18+
<div className={`flex items-center justify-around border-b p-3 w-sreen flex-wrap ${this.name[0] + ' '}`}>
19+
<div>
20+
<div className="flex">
21+
<input placeholder="Enter array size" value={inputArrayLength} onChange={(e) => {
22+
// SG 07/07/2022 21:03 Input validation, only accepts a number that is less than the allowed array size
23+
(Number(e.target.value) || !e.target.value)
24+
&& (e.target.value <= InputHandler.getAllowedMaxInputSize())
25+
? this.props.InputHandler.setState({inputArrayLength: e.target.value.replace(/\D/g, '')})
26+
: this.props.InputHandler.setState({inputArrayLength: InputHandler.getAllowedMaxInputSize()})
27+
}}
28+
className=" bg-gray-200 rounded-md text-center p-[.5em] font-medium"
29+
maximum={InputHandler.getAllowedMaxInputSize()}
3830
/>
39-
<button onClick = {() => {
40-
this.props.InputHandler.setState({
41-
generatedArray: InputHandler.handleInputRequest(
42-
inputArrayLength),
43-
});
44-
}}
45-
className = "bg-blue-300 p-2 ml-3 rounded-md text-white font-medium hover:scale-[1.02] hover:bg-blue-400 transition duration-200 ease-in-out">Generate
46-
Array
47-
</button>
31+
<button onClick={() => {
32+
this.props.InputHandler.setState({generatedArray: InputHandler.handleInputRequest(inputArrayLength)});
33+
}} className="bg-blue-300 p-2 ml-3 rounded-md text-white font-medium hover:scale-[1.02] hover:bg-blue-400 transition duration-200 ease-in-out">Generate Array</button>
4834
</div>
35+
<p className={`text-gray-700 mt-1 ${this.name[1] + ' '}`}>Array size should not exceed {InputHandler.getAllowedMaxInputSize()}.</p>
4936
</div>
50-
);
37+
<Options options={this.props.InputHandler}/>
38+
</div>
39+
)
5140
}
5241
}
5342

‎src/components/Canvas/MainCanvas.js‎

Lines changed: 39 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,55 @@
1-
import React, {Component} from 'react';
21
import './main-canvas.css';
3-
import {InputHandler} from '../InputHandler/InputHandler';
4-
import {Canvas} from './Canvas';
5-
import {InputField} from './InputField';
6-
7-
2+
import React, { Component } from 'react'
3+
import { InputHandler } from '../InputHandler/InputHandler';
4+
import SelectionSort from '../Strategy/Algorithms/SelectionSort';
5+
import { Strategy } from '../Strategy/Strategy';
6+
import { Canvas } from './Canvas';
7+
import { InputField } from './InputField';
8+
import { Options } from './options/Options';
9+
import { CONSTANTS } from '../../config'
810

911
class MainCanvas extends Component {
1012
constructor(props) {
1113
super(props);
1214
this.InputHandler = new InputHandler();
13-
this.state = {
14-
inputArrayLength: '',
15-
generatedArray : InputHandler.getGeneratedArray,
15+
this.state = {
16+
generatedArray: InputHandler.getGeneratedArray,
17+
inputArrayLength: InputHandler.getGeneratedArray.length,
18+
options: {
19+
showAdvancedOptions: false,
20+
processingColor: CONSTANTS.PROCESSING[0],
21+
defaultBarColor: CONSTANTS.DEFAULT[0],
22+
sortedBarColor: CONSTANTS.SORTED[0],
23+
currentMinBarColor: CONSTANTS.CURRENT_MIN[0]
24+
}
1625
};
26+
this.selectionSort = new SelectionSort();
27+
this.Strategy = new Strategy().setStrategy = this.selectionSort;
28+
Strategy.setTargetArray = this.state.generatedArray;
1729
}
1830

1931

2032
render() {
33+
const {options} = this.state;
34+
2135
return (
22-
<>
23-
<div className = "w-full flex justify-center mt-[4em]">
24-
<InputField name = {['generic-input', 'instructions']}
25-
InputHandler = {this}/>
26-
<Canvas generatedArray = {this.state.generatedArray}/>
36+
<>
37+
<InputField name = {['generic-input', 'instructions']} InputHandler = {this}/>
38+
<Canvas generatedArray={this.state.generatedArray} barColor={options.defaultBarColor}/>
39+
{this.state.generatedArray.length >= 1 &&
40+
<div className="">
41+
<div className="">
42+
<button onClick={async () => { // SG 07/08/2022 15:03 start sorting using whatever algorithm assigned to Strategy
43+
this.selectionSort.setOptions = this.state.options;
44+
await this.Strategy.perform(options);
45+
}}>Selection Sort</button>
46+
47+
</div>
48+
{/* <Options className="col-span-2" options={this}/> */}
2749
</div>
28-
</>
29-
);
50+
}
51+
</>
52+
)
3053
}
3154
}
3255

0 commit comments

Comments
 (0)