minor visual changes

Frontend/algoverse/src/components/SortingVisualizer/SortingVisualizer.css

@@ -1,11 +1,11 @@
 .array-container {
   position: absolute;
-  left: 100px;
-  /* top: 100px; */
+  left: 300px;
+  top: 165px;
 }
 
 .array-bar {
-  width: 2px;
+  width: 35px;
   display: inline-block;
   margin: 0 1px;
 }

Frontend/algoverse/src/components/SortingVisualizer/SortingVisualizer.jsx

@@ -3,10 +3,10 @@ import {getMergeSortAnimations} from '../sortingAlgorithms/sortingAlgorithms.jsx
 import './SortingVisualizer.css';
 
 // Change this value for the speed of the animations.
-const ANIMATION_SPEED_MS = 1;
+const ANIMATION_SPEED_MS = 30;
 
 // Change this value for the number of bars (value) in the array.
-const NUMBER_OF_ARRAY_BARS = 310;
+const NUMBER_OF_ARRAY_BARS = 33;
 
 // This is the main color of the array bars.
 const PRIMARY_COLOR = 'turquoise';
@@ -59,39 +59,17 @@ export default class SortingVisualizer extends React.Component {
     }
   }
 
-  quickSort() {
-    // We leave it as an exercise to the viewer of this code to implement this method.
-  }
-
-  heapSort() {
-    // We leave it as an exercise to the viewer of this code to implement this method.
-  }
-
-  bubbleSort() {
-    // We leave it as an exercise to the viewer of this code to implement this method.
-  }
-
-  // NOTE: This method will only work if your sorting algorithms actually return
-  // the sorted arrays; if they return the animations (as they currently do), then
-  // this method will be broken.
-  testSortingAlgorithms() {
-    for (let i = 0; i < 100; i++) {
-      const array = [];
-      const length = randomIntFromInterval(1, 1000);
-      for (let i = 0; i < length; i++) {
-        array.push(randomIntFromInterval(-1000, 1000));
-      }
-      const javaScriptSortedArray = array.slice().sort((a, b) => a - b);
-      const mergeSortedArray = getMergeSortAnimations(array.slice());
-      console.log(arraysAreEqual(javaScriptSortedArray, mergeSortedArray));
-    }
-  }
-
   render() {
     const {array} = this.state;
 
     return (
-      <div className="array-container">
+        <>
+
+
+        <div className="array-container">
+        <button onClick={() => this.resetArray()}>Generate New Array</button>
+        <button onClick={() => this.mergeSort()}>Merge Sort</button>
+        <br></br><br></br><br></br>
         {array.map((value, idx) => (
           <div
             className="array-bar"
@@ -101,15 +79,11 @@ export default class SortingVisualizer extends React.Component {
               height: `${value}px`,
             }}></div>
         ))}
-        <button onClick={() => this.resetArray()}>Generate New Array</button>
-        <button onClick={() => this.mergeSort()}>Merge Sort</button>
-        <button onClick={() => this.quickSort()}>Quick Sort</button>
-        <button onClick={() => this.heapSort()}>Heap Sort</button>
-        <button onClick={() => this.bubbleSort()}>Bubble Sort</button>
-        <button onClick={() => this.testSortingAlgorithms()}>
-          Test Sorting Algorithms (BROKEN)
-        </button>
-      </div>
+        </div>
+
+
+        </>
+
     );
   }
 }