diff --git a/src/App.css b/src/App.css
index fe77481..ad02042 100644
--- a/src/App.css
+++ b/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);
+ }
}
diff --git a/src/App.js b/src/App.js
index 0346e13..548b41b 100644
--- a/src/App.js
+++ b/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) => (
-
Here is where the magic will happen.
+Soon enough.
+ > + ); +} diff --git a/src/algorithms/bubbleSort.js b/src/algorithms/bubbleSort.js deleted file mode 100644 index fd96a6b..0000000 --- a/src/algorithms/bubbleSort.js +++ /dev/null @@ -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; diff --git a/src/algorithms/mergeSort.js b/src/algorithms/mergeSort.js deleted file mode 100644 index 6fa9b4f..0000000 --- a/src/algorithms/mergeSort.js +++ /dev/null @@ -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; diff --git a/src/algorithms/quickSort.js b/src/algorithms/quickSort.js deleted file mode 100644 index 4aa0d16..0000000 --- a/src/algorithms/quickSort.js +++ /dev/null @@ -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; diff --git a/src/components/Bar.css b/src/components/Bar.css deleted file mode 100644 index 07c5a3a..0000000 --- a/src/components/Bar.css +++ /dev/null @@ -1,5 +0,0 @@ -.bar { - background: black; - margin: 2.5px; - width: 5px; -} diff --git a/src/components/Bar.js b/src/components/Bar.js deleted file mode 100644 index d0c0b59..0000000 --- a/src/components/Bar.js +++ /dev/null @@ -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 ( - <> - - > - ); -} diff --git a/src/components/Counter.js b/src/components/Counter.js deleted file mode 100644 index e83517c..0000000 --- a/src/components/Counter.js +++ /dev/null @@ -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 ( -Place for a sheet.
- -Example
-Example
-Example
-Example
-