src folder resctructuring
This commit is contained in:
username
parent
cc2d70bfdf
commit
0e2a539852
49
src/App.css
49
src/App.css
@ -1,38 +1,37 @@
|
||||
.App {
|
||||
font-family: "Nunito", sans-serif;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
background-color: #f2f2f2;
|
||||
color: #fafafa;
|
||||
padding: 1vh;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
margin: 25px;
|
||||
padding: 25px;
|
||||
svg {
|
||||
height: 14vmin;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.container-small {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
margin: 5px;
|
||||
padding: 15px;
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
svg {
|
||||
animation: App-logo-spin infinite 20s linear;
|
||||
}
|
||||
}
|
||||
|
||||
.bars {
|
||||
height: 100px;
|
||||
.App-header {
|
||||
background-color: #282c34;
|
||||
min-height: 30vh;
|
||||
text-align: left;
|
||||
font-size: calc(10px + 2vmin);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: white;
|
||||
border-radius: 15px;
|
||||
box-shadow: 0px 5px 15px 0px #ddd;
|
||||
.App-link {
|
||||
color: #61dafb;
|
||||
}
|
||||
|
||||
.controls {
|
||||
display: flex;
|
||||
@keyframes App-logo-spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
261
src/App.js
261
src/App.js
@ -1,253 +1,26 @@
|
||||
import React, { useState } from "react";
|
||||
|
||||
import { IconButton } from "@material-ui/core";
|
||||
import {
|
||||
PlayArrow,
|
||||
Pause,
|
||||
SkipPrevious,
|
||||
SkipNext,
|
||||
RotateLeft,
|
||||
SettingsInputAntennaTwoTone,
|
||||
} from "@material-ui/icons";
|
||||
import Bar from "./components/Bar";
|
||||
import Form from "./components/Form";
|
||||
|
||||
import "./App.css";
|
||||
import Playground from "./Playground.js";
|
||||
var randomColor = Math.floor(Math.random() * 16777215).toString(16);
|
||||
|
||||
// algorithms
|
||||
import bubbleSort from "./algorithms/bubbleSort";
|
||||
import mergeSort from "./algorithms/mergeSort";
|
||||
import quickSort from "./algorithms/quickSort";
|
||||
|
||||
class App extends React.Component {
|
||||
state = {
|
||||
array: [],
|
||||
colorKey: [],
|
||||
arraySteps: [],
|
||||
colorSteps: [],
|
||||
currentStep: 0,
|
||||
timeouts: [],
|
||||
algorithm: "Bubble Sort",
|
||||
barCount: 10,
|
||||
delay: 200,
|
||||
};
|
||||
|
||||
ALGO_SET = {
|
||||
"Bubble Sort": bubbleSort,
|
||||
"Merge Sort": mergeSort,
|
||||
"Quick Sort": quickSort,
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
this.generateBars();
|
||||
}
|
||||
|
||||
generateSteps = () => {
|
||||
let array = this.state.array.slice();
|
||||
let steps = this.state.arraySteps.slice();
|
||||
let colorSteps = this.state.colorSteps.slice();
|
||||
|
||||
this.ALGO_SET[this.state.algorithm](array, 0, steps, colorSteps);
|
||||
|
||||
this.setState({
|
||||
arraySteps: steps,
|
||||
colorSteps: colorSteps,
|
||||
});
|
||||
};
|
||||
|
||||
setTimeouts() {
|
||||
let steps = this.state.arraySteps;
|
||||
let colorSteps = this.state.colorSteps;
|
||||
|
||||
this.clearTimeouts();
|
||||
let timeouts = [];
|
||||
let i = 0;
|
||||
|
||||
while (i < steps.length - this.state.currentStep) {
|
||||
let timeout = setTimeout(() => {
|
||||
let currentStep = this.state.currentStep;
|
||||
this.setState({
|
||||
array: steps[currentStep],
|
||||
colorKey: colorSteps[currentStep],
|
||||
currentStep: currentStep + 1,
|
||||
});
|
||||
}, this.state.delay * i);
|
||||
timeouts.push(timeout);
|
||||
i++;
|
||||
}
|
||||
|
||||
this.setState({
|
||||
timeouts: timeouts,
|
||||
});
|
||||
}
|
||||
|
||||
stepBack = () => {
|
||||
if (this.state.currentStep === 0) return;
|
||||
this.clearTimeouts();
|
||||
|
||||
let currentStep = this.state.currentStep - 1;
|
||||
this.setState({
|
||||
array: this.state.arraySteps[currentStep],
|
||||
colorKey: this.state.colorSteps[currentStep],
|
||||
currentStep: currentStep,
|
||||
});
|
||||
};
|
||||
|
||||
stepForward = () => {
|
||||
if (this.state.currentStep >= this.state.arraySteps.length - 1) return;
|
||||
this.clearTimeouts();
|
||||
|
||||
let currentStep = this.state.currentStep + 1;
|
||||
this.setState({
|
||||
array: this.state.arraySteps[currentStep],
|
||||
colorKey: this.state.colorSteps[currentStep],
|
||||
currentStep: currentStep,
|
||||
});
|
||||
};
|
||||
|
||||
changeAlgorithm = (event) => {
|
||||
this.setState(
|
||||
{
|
||||
algorithm: event.target.value,
|
||||
currentStep: 0,
|
||||
arraySteps: [
|
||||
this.state.arraySteps[
|
||||
this.state.currentStep === 0 ? 0 : this.state.currentStep - 1
|
||||
],
|
||||
],
|
||||
},
|
||||
() => this.generateSteps()
|
||||
);
|
||||
this.clearTimeouts();
|
||||
this.clearColorKey();
|
||||
};
|
||||
|
||||
changeBarCount = (barCount) => {
|
||||
this.setState({ barCount: barCount }, () => this.generateBars());
|
||||
// setBarCount(barCount);
|
||||
//() => generateBars();
|
||||
};
|
||||
|
||||
changeDelay = (event) => {
|
||||
this.clearTimeouts();
|
||||
this.setState({
|
||||
delay: parseInt(event.target.value),
|
||||
});
|
||||
};
|
||||
|
||||
clearTimeouts = () => {
|
||||
this.state.timeouts.forEach((timeout) => clearTimeout(timeout));
|
||||
this.setState({
|
||||
timeouts: [],
|
||||
});
|
||||
};
|
||||
|
||||
clearColorKey = () => {
|
||||
let blankKey = new Array(parseInt(this.state.barCount)).fill(0);
|
||||
this.setState({
|
||||
colorKey: blankKey,
|
||||
colorSteps: [blankKey],
|
||||
});
|
||||
};
|
||||
|
||||
generateBars = () => {
|
||||
this.clearTimeouts();
|
||||
this.clearColorKey();
|
||||
|
||||
let barCount = parseInt(this.state.barCount);
|
||||
let barsTemp = [];
|
||||
|
||||
for (let i = 0; i < barCount; i++) {
|
||||
barsTemp.push(Math.floor(Math.random() * 90) + 10);
|
||||
}
|
||||
|
||||
this.setState(
|
||||
{
|
||||
array: barsTemp,
|
||||
arraySteps: [barsTemp],
|
||||
barCount: barCount,
|
||||
currentStep: 0,
|
||||
},
|
||||
() => this.generateSteps()
|
||||
);
|
||||
};
|
||||
|
||||
render() {
|
||||
let barsDiv = this.state.array.map((value, index) => (
|
||||
<Bar key={index} length={value} colorKey={this.state.colorKey[index]} />
|
||||
));
|
||||
let playButton;
|
||||
|
||||
// Set player controls
|
||||
if (
|
||||
this.state.timeouts.length !== 0 &&
|
||||
this.state.currentStep !== this.state.arraySteps.length
|
||||
) {
|
||||
playButton = (
|
||||
<IconButton onClick={() => this.clearTimeouts()}>
|
||||
<Pause />
|
||||
</IconButton>
|
||||
);
|
||||
} else if (this.state.currentStep === this.state.arraySteps.length) {
|
||||
playButton = (
|
||||
<IconButton color="secondary" onClick={() => this.generateBars()}>
|
||||
<RotateLeft />
|
||||
</IconButton>
|
||||
);
|
||||
} else {
|
||||
playButton = (
|
||||
<IconButton color="secondary" onClick={() => this.setTimeouts()}>
|
||||
<PlayArrow />
|
||||
</IconButton>
|
||||
);
|
||||
}
|
||||
|
||||
var current = "#" + randomColor;
|
||||
function App() {
|
||||
return (
|
||||
<>
|
||||
<div className="App">
|
||||
<section className="bars container card">{barsDiv}</section>
|
||||
|
||||
<section className="container-small">
|
||||
<IconButton onClick={() => this.generateBars()}>
|
||||
<RotateLeft />
|
||||
</IconButton>
|
||||
<IconButton onClick={this.stepBack}>
|
||||
<SkipPrevious />
|
||||
</IconButton>
|
||||
{playButton}
|
||||
<IconButton onClick={this.stepForward}>
|
||||
<SkipNext />
|
||||
</IconButton>
|
||||
<IconButton />
|
||||
</section>
|
||||
|
||||
<section className="controls container-small">
|
||||
<Form
|
||||
formLabel="Algorithm"
|
||||
values={["Bubble Sort", "Merge Sort", "Quick Sort"]}
|
||||
labels={["Bubble Sort", "Merge Sort", "Quick Sort"]}
|
||||
currentValue={this.state.algorithm}
|
||||
onChange={this.changeAlgorithm}
|
||||
/>
|
||||
|
||||
<Form
|
||||
formLabel="Array size"
|
||||
values={[10, 25, 50]}
|
||||
labels={["10 items", "25 items", "50 items"]}
|
||||
currentValue={this.state.barCount}
|
||||
onChange={(e) => this.changeBarCount(e.target.value)}
|
||||
/>
|
||||
|
||||
<Form
|
||||
formLabel="Speed"
|
||||
values={[200, 100, 50]}
|
||||
labels={["1x", "2x", "4x"]}
|
||||
currentValue={this.state.delay}
|
||||
onChange={this.changeDelay}
|
||||
/>
|
||||
</section>
|
||||
<header className="App-header">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
|
||||
<g fill={current}>
|
||||
<path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z" />
|
||||
<circle cx="420.9" cy="296.5" r="45.7" />
|
||||
<path d="M520.5 78.1z" />
|
||||
</g>
|
||||
</svg>
|
||||
</header>
|
||||
<h1>Guillotine-cutter App</h1>
|
||||
<Playground title="👨🏻💻"></Playground>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default App;
|
||||
|
||||
8
src/App.test.js
Normal file
8
src/App.test.js
Normal file
@ -0,0 +1,8 @@
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import App from './App';
|
||||
|
||||
test('renders learn react link', () => {
|
||||
render(<App />);
|
||||
const linkElement = screen.getByText(/learn react/i);
|
||||
expect(linkElement).toBeInTheDocument();
|
||||
});
|
||||
70
src/Playground.js
Normal file
70
src/Playground.js
Normal file
@ -0,0 +1,70 @@
|
||||
class Rectangle {
|
||||
constructor(height, width) {
|
||||
this.height = height;
|
||||
this.width = width;
|
||||
}
|
||||
get area() {
|
||||
return this.calcArea();
|
||||
}
|
||||
calcArea() {
|
||||
return this.height * this.width;
|
||||
}
|
||||
}
|
||||
|
||||
const rect1 = new Rectangle(30, 50);
|
||||
const rect2 = new Rectangle(40, 50);
|
||||
const rect3 = new Rectangle(10, 20);
|
||||
|
||||
const tab = [rect1.area, rect2.area, rect3.area];
|
||||
const sortedtab = tab.sort(function (tab, temp) {
|
||||
return tab - temp;
|
||||
});
|
||||
const prettytab = sortedtab.toString();
|
||||
|
||||
let Sheet = { w: 10, h: 5 };
|
||||
const Square = { w: 4, h: 4 };
|
||||
|
||||
let activities = [
|
||||
["Work", 9],
|
||||
["Eat", 1],
|
||||
["Commute", 2],
|
||||
["Play Game", 1],
|
||||
["Sleep", 7],
|
||||
];
|
||||
console.table(activities);
|
||||
// loop the outer array
|
||||
for (let i = 0; i < activities.length; i++) {
|
||||
// get the size of the inner array
|
||||
var innerArrayLength = activities[i].length;
|
||||
// loop the inner array
|
||||
for (let j = 0; j < innerArrayLength; j++) {
|
||||
console.log("[" + i + "," + j + "] = " + activities[i][j]);
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
|
||||
There are a few ways of doing this, so I'll just give an example of a simple to understand (if somewhat inefficient) method that should still give fairly decent results.
|
||||
|
||||
Start by ordering your boxes from largest to smallest.
|
||||
Presume that your first box is going to be square (it won't end up that way, but it will end close). Take sqrt(area[1]) to get the length of its side. Take that width as the width you want for your first column.
|
||||
Given that width, fill as many more rows as you can in that column.
|
||||
Add up how much total area you have put in the column; resize its width to be match that (it will now be a little thinner).
|
||||
Repeat steps 1-3 for the rest of the available boxes. When you get to the point where the target width for your first box in the column is wider than the amount of space you have left, just use that width.
|
||||
The remaining boxes should cleanly fit into that remaining space in that column.
|
||||
|
||||
This will give you aligned columns, with varying height divisions. As an alternative, you can flip "row" and "column" to get constant row divisions with varying column splits.
|
||||
|
||||
|
||||
*/
|
||||
|
||||
export default function Playground(props) {
|
||||
return (
|
||||
<>
|
||||
<h1>{props.title}</h1>
|
||||
<p>Here is where the magic will happen.</p>
|
||||
<p>Soon enough.</p>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -1,27 +0,0 @@
|
||||
import { swap } from "../helpers/helpers.js";
|
||||
|
||||
const bubbleSort = (array, position, arraySteps, colorSteps) => {
|
||||
let colorKey = colorSteps[colorSteps.length - 1].slice();
|
||||
|
||||
for (let i = 0; i < array.length - 1; i++) {
|
||||
for (let j = 0; j < array.length - i - 1; j++) {
|
||||
if (array[j] > array[j + 1]) {
|
||||
array = swap(array, j, j + 1);
|
||||
}
|
||||
arraySteps.push(array.slice());
|
||||
colorKey[j] = 1;
|
||||
colorKey[j + 1] = 1;
|
||||
colorSteps.push(colorKey.slice());
|
||||
colorKey[j] = 0;
|
||||
colorKey[j + 1] = 0;
|
||||
}
|
||||
colorKey[array.length - 1 - i] = 2;
|
||||
arraySteps.push(array.slice());
|
||||
colorSteps.push(colorKey.slice());
|
||||
}
|
||||
|
||||
colorSteps[colorSteps.length - 1] = new Array(array.length).fill(2);
|
||||
return;
|
||||
};
|
||||
|
||||
export default bubbleSort;
|
||||
@ -1,67 +0,0 @@
|
||||
import { insertStep } from "../helpers/helpers.js";
|
||||
|
||||
function mergeSort(array, position, arraySteps, colorSteps) {
|
||||
if (array.length === 1) return array;
|
||||
let mid = Math.floor(array.length / 2);
|
||||
|
||||
// Split and work recursively
|
||||
let arrayA = mergeSort(array.slice(0, mid), position, arraySteps, colorSteps);
|
||||
let arrayB = mergeSort(
|
||||
array.slice(mid),
|
||||
position + mid,
|
||||
arraySteps,
|
||||
colorSteps
|
||||
);
|
||||
|
||||
let arrayNew = merge(arrayA, arrayB, position, arraySteps, colorSteps);
|
||||
arraySteps.push(arraySteps[arraySteps.length - 1].slice());
|
||||
colorSteps.push(
|
||||
colorSteps[colorSteps.length - 1].fill(
|
||||
arrayNew.length === arraySteps[0].length ? 2 : 0
|
||||
)
|
||||
);
|
||||
return arrayNew;
|
||||
}
|
||||
|
||||
const merge = (arrayA, arrayB, position, arraySteps, colorSteps) => {
|
||||
let arrayNew = [];
|
||||
let A = 0;
|
||||
let B = 0;
|
||||
|
||||
while (arrayA.length > 0 && arrayB.length > 0) {
|
||||
if (arrayA[A] < arrayB[B]) {
|
||||
arrayNew.push(arrayA.shift());
|
||||
insertStep(arrayNew, position, arraySteps);
|
||||
} else {
|
||||
arrayNew.push(arrayB.shift());
|
||||
insertStep(arrayNew, position, arraySteps);
|
||||
}
|
||||
updateColor(position, colorSteps, arrayNew.length - 1, [], []);
|
||||
}
|
||||
|
||||
// concatenate remaining values
|
||||
|
||||
if (arrayA.length !== 0 || arrayB.length !== 0) {
|
||||
updateColor(position, colorSteps, arrayNew.length, arrayA, arrayB);
|
||||
arrayNew = arrayNew.concat(arrayA);
|
||||
arrayNew = arrayNew.concat(arrayB);
|
||||
insertStep(arrayNew, position, arraySteps);
|
||||
}
|
||||
|
||||
return arrayNew;
|
||||
};
|
||||
|
||||
function updateColor(position, colorSteps, start, arrayA, arrayB) {
|
||||
let colorKey = colorSteps[colorSteps.length - 1].slice();
|
||||
let end = position + start + arrayA.length + arrayB.length;
|
||||
start = start + position;
|
||||
|
||||
if (end === start) {
|
||||
colorKey.fill(1, start, end + 1);
|
||||
} else {
|
||||
colorKey.fill(1, start, end);
|
||||
}
|
||||
colorSteps.push(colorKey);
|
||||
}
|
||||
|
||||
export default mergeSort;
|
||||
@ -1,80 +0,0 @@
|
||||
import { swap, insertStep } from "../helpers/helpers.js";
|
||||
|
||||
const quickSort = (array, position, arraySteps, colorSteps) => {
|
||||
if (array.length < 2) {
|
||||
insertStep(array, position, arraySteps);
|
||||
|
||||
let colorKey = colorSteps[colorSteps.length - 1].slice();
|
||||
colorKey[position] = 2;
|
||||
colorSteps.push(colorKey);
|
||||
return;
|
||||
}
|
||||
|
||||
// pick median of three numbers as pivot and sent it to back
|
||||
swap(array, pickPivot(array), array.length - 1);
|
||||
insertStep(array, position, arraySteps);
|
||||
colorSteps.push(colorSteps[colorSteps.length - 1].slice());
|
||||
|
||||
let pivot = array[array.length - 1];
|
||||
let A = 0;
|
||||
let B = array.length - 1;
|
||||
|
||||
// swap small value from right with big value from left
|
||||
while (A < B) {
|
||||
while (array[A] < pivot) {
|
||||
insertStep(array, position, arraySteps);
|
||||
let colorKey = colorSteps[colorSteps.length - 1].slice();
|
||||
colorKey = colorKey.map((key) => (key === 2 ? 2 : 0));
|
||||
colorKey[position + A] = 1;
|
||||
colorKey[position + B] = 1;
|
||||
colorSteps.push(colorKey);
|
||||
A++;
|
||||
}
|
||||
while (array[B] >= pivot) {
|
||||
insertStep(array, position, arraySteps);
|
||||
let colorKey = colorSteps[colorSteps.length - 1].slice();
|
||||
colorKey = colorKey.map((key) => (key === 2 ? 2 : 0));
|
||||
colorKey[position + A] = 1;
|
||||
colorKey[position + B] = 1;
|
||||
colorSteps.push(colorKey);
|
||||
B--;
|
||||
}
|
||||
if (A < B) {
|
||||
swap(array, A, B);
|
||||
insertStep(array, position, arraySteps);
|
||||
let colorKey = colorSteps[colorSteps.length - 1].slice();
|
||||
colorKey = colorKey.map((key) => (key === 2 ? 2 : 0));
|
||||
colorKey[position + A] = 1;
|
||||
colorKey[position + B] = 1;
|
||||
colorSteps.push(colorKey);
|
||||
}
|
||||
}
|
||||
|
||||
// swap big value with pivot
|
||||
let bigIndex = Math.max(A, B);
|
||||
|
||||
swap(array, bigIndex, array.length - 1);
|
||||
insertStep(array, position, arraySteps);
|
||||
let colorKey = colorSteps[colorSteps.length - 1].slice();
|
||||
colorKey[position + bigIndex] = 2;
|
||||
colorSteps.push(colorKey);
|
||||
|
||||
// recurse on two halves
|
||||
quickSort(array.slice(0, A), position, arraySteps, colorSteps);
|
||||
quickSort(array.slice(A + 1), position + A + 1, arraySteps, colorSteps);
|
||||
|
||||
return;
|
||||
};
|
||||
|
||||
function pickPivot(array) {
|
||||
let A = array[0];
|
||||
let B = array[Math.floor(array.length / 2)];
|
||||
let C = array[array.length - 1];
|
||||
|
||||
let middleValue = [A, B, C].sort()[1];
|
||||
let middleIndex = array.indexOf(middleValue);
|
||||
|
||||
return middleIndex;
|
||||
}
|
||||
|
||||
export default quickSort;
|
||||
@ -1,5 +0,0 @@
|
||||
.bar {
|
||||
background: black;
|
||||
margin: 2.5px;
|
||||
width: 5px;
|
||||
}
|
||||
@ -1,19 +0,0 @@
|
||||
import React from "react";
|
||||
import "./Bar.css";
|
||||
|
||||
export default function Bar({ length, colorKey }) {
|
||||
const COLOR_SET = ["lightgrey", "grey", "#F51057"];
|
||||
|
||||
let color = COLOR_SET[colorKey];
|
||||
|
||||
let style = {
|
||||
height: length,
|
||||
backgroundColor: color,
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="bar" style={style}></div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -1,27 +0,0 @@
|
||||
import React from "react";
|
||||
|
||||
export default class Counter extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
array: [],
|
||||
};
|
||||
}
|
||||
|
||||
resetArray() {
|
||||
const array = [];
|
||||
for (let i = 0; i < 100; i++) {
|
||||
array.push(Math.floor(Math.random() * 100));
|
||||
}
|
||||
this.setState(array);
|
||||
}
|
||||
|
||||
render() {
|
||||
const array = this.state;
|
||||
return (
|
||||
<div className="array-container">
|
||||
<button onClick={() => this.resetArray()}>Generate New Array</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,38 +0,0 @@
|
||||
import React from "react";
|
||||
import {
|
||||
FormControl,
|
||||
FormControlLabel,
|
||||
FormLabel,
|
||||
Radio,
|
||||
RadioGroup,
|
||||
} from "@material-ui/core";
|
||||
|
||||
export default function Form({
|
||||
formLabel,
|
||||
values,
|
||||
labels,
|
||||
currentValue,
|
||||
onChange,
|
||||
}) {
|
||||
return (
|
||||
<>
|
||||
<div className="card container-small">
|
||||
<FormControl>
|
||||
<FormLabel>{formLabel}</FormLabel>
|
||||
<RadioGroup value={currentValue} onChange={onChange}>
|
||||
{values.map((value, index) => {
|
||||
return (
|
||||
<FormControlLabel
|
||||
key={`${value}_${index}`}
|
||||
value={values[index]}
|
||||
control={<Radio />}
|
||||
label={labels[index]}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</RadioGroup>
|
||||
</FormControl>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -1,22 +0,0 @@
|
||||
.MainSection {
|
||||
background: #363c58;
|
||||
text-align: center;
|
||||
flex: 1;
|
||||
padding: 1vw;
|
||||
/* height of the whole site (both columns) */
|
||||
min-height: 75vw;
|
||||
/* === */
|
||||
}
|
||||
|
||||
.MainSection > p {
|
||||
padding: 5vw;
|
||||
}
|
||||
|
||||
.MainSection > .ProgressBar {
|
||||
margin: 2vw auto;
|
||||
width: 30vw;
|
||||
}
|
||||
|
||||
.MainSection > input {
|
||||
padding: 2vw;
|
||||
}
|
||||
@ -1,25 +0,0 @@
|
||||
import { React, useState } from "react";
|
||||
import "./MainSection.css";
|
||||
import MainSheet from "./MainSheet.js";
|
||||
import ProgressBar from "react-bootstrap/ProgressBar";
|
||||
|
||||
export default function MainSection() {
|
||||
const [rangeval, setRangeval] = useState(50);
|
||||
return (
|
||||
<div className="MainSection">
|
||||
<h1>MainSection</h1>
|
||||
<MainSheet />
|
||||
<ProgressBar
|
||||
className="ProgressBar"
|
||||
now={rangeval}
|
||||
label={`${rangeval}`}
|
||||
/>
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max="100"
|
||||
onChange={(e) => setRangeval(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,20 +0,0 @@
|
||||
.MainSheet {
|
||||
width: 65vw;
|
||||
height: 30vw;
|
||||
background: #3f476c;
|
||||
border: solid #9b1cfc;
|
||||
margin: auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.MainSheet > p {
|
||||
width: 300px;
|
||||
height: 100px;
|
||||
padding: 20px;
|
||||
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
|
||||
margin: -70px 0 0 -170px;
|
||||
}
|
||||
@ -1,11 +0,0 @@
|
||||
import React from "react";
|
||||
import "./MainSheet.css";
|
||||
|
||||
export default function MainSheet() {
|
||||
return (
|
||||
<div className="MainSheet">
|
||||
<p>Place for a sheet.</p>
|
||||
<p id="workspace"></p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,17 +0,0 @@
|
||||
.Navbar {
|
||||
background: #191e36;
|
||||
text-align: center;
|
||||
flex: 0 0 12vw;
|
||||
padding: 1vw;
|
||||
}
|
||||
|
||||
.Navbar > p {
|
||||
color: white;
|
||||
transition: 0.3s;
|
||||
-webkit-transition: 0.3s;
|
||||
}
|
||||
|
||||
.Navbar > p:hover {
|
||||
color: #191e36;
|
||||
background: #9b1cfc;
|
||||
}
|
||||
@ -1,15 +0,0 @@
|
||||
import React from "react";
|
||||
import "./Navbar.css";
|
||||
import styled from "styled-components";
|
||||
|
||||
export default function Navbar() {
|
||||
return (
|
||||
<div className="Navbar">
|
||||
<h2>Navbar</h2>
|
||||
<p>Example</p>
|
||||
<p>Example</p>
|
||||
<p>Example</p>
|
||||
<p>Example</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,12 +0,0 @@
|
||||
export function swap(array, indexA, indexB) {
|
||||
let temp = array[indexA];
|
||||
array[indexA] = array[indexB];
|
||||
array[indexB] = temp;
|
||||
return array;
|
||||
}
|
||||
|
||||
export function insertStep(arrayNew, position, arraySteps) {
|
||||
let currentStep = arraySteps[arraySteps.length - 1].slice();
|
||||
currentStep.splice(position, arrayNew.length, ...arrayNew);
|
||||
arraySteps.push(currentStep);
|
||||
}
|
||||
@ -1,13 +1,14 @@
|
||||
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@200&display=swap");
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
|
||||
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Nunito",
|
||||
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
|
||||
sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
background-color: #282c34;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
|
||||
monospace;
|
||||
}
|
||||
|
||||
16
src/index.js
16
src/index.js
@ -1,11 +1,17 @@
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom";
|
||||
import App from "./App.js";
|
||||
import "./index.css";
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import './index.css';
|
||||
import App from './App';
|
||||
import reportWebVitals from './reportWebVitals';
|
||||
|
||||
ReactDOM.render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>,
|
||||
document.getElementById("root")
|
||||
document.getElementById('root')
|
||||
);
|
||||
|
||||
// If you want to start measuring performance in your app, pass a function
|
||||
// to log results (for example: reportWebVitals(console.log))
|
||||
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
|
||||
reportWebVitals();
|
||||
|
||||
1
src/logo.svg
Normal file
1
src/logo.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
13
src/reportWebVitals.js
Normal file
13
src/reportWebVitals.js
Normal file
@ -0,0 +1,13 @@
|
||||
const reportWebVitals = onPerfEntry => {
|
||||
if (onPerfEntry && onPerfEntry instanceof Function) {
|
||||
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
|
||||
getCLS(onPerfEntry);
|
||||
getFID(onPerfEntry);
|
||||
getFCP(onPerfEntry);
|
||||
getLCP(onPerfEntry);
|
||||
getTTFB(onPerfEntry);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
export default reportWebVitals;
|
||||
5
src/setupTests.js
Normal file
5
src/setupTests.js
Normal file
@ -0,0 +1,5 @@
|
||||
// jest-dom adds custom jest matchers for asserting on DOM nodes.
|
||||
// allows you to do things like:
|
||||
// expect(element).toHaveTextContent(/react/i)
|
||||
// learn more: https://github.com/testing-library/jest-dom
|
||||
import '@testing-library/jest-dom';
|
||||
Loading…
Reference in New Issue
Block a user