Added Selection Sort & minor adjustments

src/algorithms/selectionSort.jsx

@@ -0,0 +1,22 @@
+export default function selectionSort(array) {
+    const auxiliaryArray = [...array];
+    const animations = [];
+    selectionSortHelper(auxiliaryArray, animations);
+    return animations;
+}   
+
+function selectionSortHelper(array, animations) {
+    for (let i = 0; i < array.length; i++) {
+        let minIndex = i;
+        for (let j = i + 1; j < array.length; j++) {
+            animations.push([i, j, false]);
+            if (array[j] < array[minIndex]) {
+                minIndex = j;
+            }
+        }
+        if (minIndex !== i) {
+            animations.push([i, minIndex, true]);
+            [array[i], array[minIndex]] = [array[minIndex], array[i]];
+        }
+    }
+}       

src/assets/graph.css

@@ -1,6 +1,5 @@
 @import url('https://fonts.googleapis.com/css2?family=MuseoModerno:ital,wght@0,100..900;1,100..900&display=swap');
 
-
 :root {
     --bg-primary: #1a1a1a;
     --bg-secondary: #2d2d2d;
@@ -15,7 +14,6 @@
     --button-hover: #8e6bf8;
 }
 
-
 body {
     background-color: var(--bg-primary);
     color: var(--text-primary);
@@ -37,11 +35,11 @@ body {
     margin: 20px 0;
     flex: 1;
 }
-h1{
+
+h1 {
     font-family: 'MuseoModerno', cursive;
 }
 
-
 .graph {
     height: 200px;
     width: 800px;
@@ -55,7 +53,7 @@ h1{
     padding: 20px;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
     margin: 0 auto;
-}   
+}
 
 /* Bar Styling */
 .bar {
@@ -83,15 +81,13 @@ h1{
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
 }
 
-/* Title */
 .controls-container h1 {
     font-size: 2rem;
     margin: 10px 0;
     text-align: center;
     color: var(--text-primary);
 }
 
-/* Controls Group */
 .controls-group {
     display: flex;
     gap: 15px;
@@ -133,7 +129,7 @@ select, button {
     border-radius: 6px;
     border: 2px solid var(--accent-primary);
     font-size: 14px;
-    min-width: 120px;
+    min-width: 130px;
     background-color: var(--bg-secondary);
     color: var(--text-primary);
     cursor: pointer;
@@ -192,35 +188,6 @@ button:hover {
     }
 }
 
-@media (max-width: 480px) {
-    .graph {
-        height: 250px;
-    }
-}
-
-/* Scrollbar Styling */
-::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
-}
-
-::-webkit-scrollbar-track {
-    background: var(--bg-primary);
-    border-radius: 4px;
-}
-
-::-webkit-scrollbar-thumb {
-    background: var(--accent-primary);
-    border-radius: 4px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-    background: var(--button-hover);
-}
-
-
-
-/* Media Queries */
 @media (max-width: 768px) {
     .controls-container {
         padding: 10px;
@@ -254,12 +221,18 @@ button:hover {
         width: 16px;  
         height: 16px;
     }
-    .note{
+
+    .note {
         font-size: 0.7rem;
     }
 }
 
 @media (max-width: 480px) {
+    .graph {
+        height: 250px;
+        padding: 10px;
+    }
+
     .controls-container {
         padding: 8px;
         gap: 6px;
@@ -286,13 +259,34 @@ button:hover {
         width: 75px;
     }
 
-    .graph {
-        height: 250px;
-        padding: 10px;
-    }
     .note {
         font-size: 0.65rem;
     }
+
+    .bar {
+        width: 4px;
+        margin: 0 1.3px;
+    }
+}
+
+/* Scrollbar Styling */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: var(--bg-primary);
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--accent-primary);
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: var(--button-hover);
 }
 
 .controls-group button {
@@ -304,4 +298,16 @@ button:hover {
 
 .controls-group button:hover {
     opacity: 0.9;
+}
+
+.range-labels {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+}
+
+.range-labels span {
+    font-size: 0.9rem;
+    color: var(--text-color);
+    font-weight: bold;
 }

src/components/graph.jsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect, useRef } from "react";
 import "../assets/graph.css";
 import bubbleSort from "../algorithms/bubbleSort";
 import quickSort from "../algorithms/quickSort";
+import selectionSort from "../algorithms/selectionSort";
 
 function Graph() {
     const [array, setArray] = useState([]);
@@ -69,7 +70,14 @@ function Graph() {
                 setIsSorting(false);
                 return;
             }
-        }   
+        } else if (algo === "selection") {
+            animation = selectionSort(array);
+            if (!Array.isArray(animation)) {
+                console.error("Invalid animation returned from sorting algorithm");
+                setIsSorting(false);
+                return;
+            }
+        }
 
         setAnimations(animation);
         visualizeSort(animation);
@@ -121,6 +129,12 @@ function Graph() {
                                 bars[j].style.backgroundColor = "var(--bar-default)";
                             }
                             setIsSorting(false);
+
+                            // Add new timeout to reset after bars return to default color
+                            setTimeout(() => {
+                                generateArray(size);
+                            }, 500); // Half second delay after bars return to default
+
                         }, 3000);
                     }, 100);
                 }
@@ -139,14 +153,19 @@ function Graph() {
             <div className="controls-container">
                 <h1>Simply Sorting Visualizer</h1>
                 <div className="controls-group">
-                    <input 
-                        type="range" 
-                        min="10"
-                        max="40" 
-                        onChange={(e) => generateArray(parseInt(e.target.value))} 
-                        defaultValue="20"
-                        disabled={isSorting} 
-                    />
+                    <div className="range-container">
+                        <div className="range-labels">
+                            <span>Array Size</span>
+                        </div>
+                        <input 
+                            type="range" 
+                            min="10"
+                            max="40" 
+                            onChange={(e) => generateArray(parseInt(e.target.value))} 
+                            defaultValue="20"
+                            disabled={isSorting} 
+                        />
+                    </div>
                     <select name="algorithm" id="algo" disabled={isSorting}>
                         <option value="bubble">Bubble Sort</option>
                         <option value="selection">Selection Sort</option>