Merge branch 'main' into feat/algo

Author: ADARSHsri2004

jsconfig.json

@@ -1,7 +1,6 @@
 {
   "compilerOptions": {
     "baseUrl": ".",
-    "ignoreDeprecations": "6.0",
     "paths": {
       "@/*": ["src/*"]
     }

package-lock.json

@@ -23,6 +23,7 @@
     "lucide-react": "^0.545.0",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
+    "react-hot-toast": "^2.6.0",
     "react-redux": "^9.2.0",
     "react-router-dom": "^7.9.4",
     "socket.io-client": "^4.8.1",

package.json

@@ -1,14 +1,15 @@
 import React from "react";
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
-import Homepage from "../src/pages/Homepage.jsx";
 import UnionFindPage from "../src/pages/graph/UnionFind.jsx"; // ✅ Import Union-Find Page
-
+import SortingPage from "./pages/sorting/SortingPage";
+import Homepage from "./pages/Homepage.jsx";
 function App() {
   return (
     <Router>
       <Routes>
         <Route path="/" element={<Homepage />} />
         <Route path="/graph/union-find" element={<UnionFindPage />} /> {/* ✅ Added route */}
+        <Route path="/sorting" element={<SortingPage />} />
       </Routes>
     </Router>
   );

src/App.jsx

@@ -1,6 +1,6 @@
 // src/algorithms/graph/unionFind.js
 
-export class UnionFind {
+class UnionFind {
   constructor(n) {
     this.parent = Array.from({ length: n }, (_, i) => i);
     this.rank = Array(n).fill(0);
@@ -68,3 +68,5 @@ export class UnionFind {
     return this.steps;
   }
 }
+
+export default UnionFind;

src/algorithms/graph/unionFind.js

@@ -0,0 +1,34 @@
+// src/algorithms/sorting/InsertionSort.js
+export function* insertionSort(array) {
+	const arr = [...array];
+	const n = arr.length;
+
+	for (let i = 1; i < n; i++) {
+		// mark the current index being considered (matches selectionSort behavior)
+		yield { type: "compare", indices: [i] };
+
+		// perform insertion by swapping adjacent elements until correct position
+		let j = i;
+		while (j > 0) {
+			// compare the pair we're about to potentially swap
+			yield { type: "compare", indices: [j - 1, j] };
+
+			if (arr[j - 1] > arr[j]) {
+				// swap adjacent
+				[arr[j - 1], arr[j]] = [arr[j], arr[j - 1]];
+				yield { type: "swap", indices: [j - 1, j], array: [...arr] };
+				j--;
+			} else {
+				break;
+			}
+		}
+
+		// if element moved, indicate insertion position (use "min" to match visual cue)
+		if (j !== i) {
+			yield { type: "min", index: j };
+		}
+	}
+
+	yield { type: "done", array: arr };
+}
+

src/algorithms/sorting/InsertionSort.js

@@ -0,0 +1,24 @@
+// src/algorithms/sorting/bubbleSort.js
+export function* bubbleSort(array) {
+	const arr = [...array];
+	const n = arr.length;
+
+	// Standard bubble sort with generator events
+	for (let i = 0; i < n - 1; i++) {
+		// After each pass, the largest element of the unsorted portion bubbles to position n-1-i
+		for (let j = 0; j < n - 1 - i; j++) {
+			// compare pair (j, j+1)
+			yield { type: "compare", indices: [j, j + 1] };
+
+			if (arr[j] > arr[j + 1]) {
+				[arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];
+				yield { type: "swap", indices: [j, j + 1], array: [...arr] };
+			}
+		}
+
+		// mark the settled position at the end of this pass
+		yield { type: "min", index: n - 1 - i };
+	}
+
+	yield { type: "done", array: arr };
+}

src/algorithms/sorting/bubbleSort.js

@@ -0,0 +1,26 @@
+// src/algorithms/sorting/selectionSort.js
+export function* selectionSort(array) {
+  const arr = [...array];
+  const n = arr.length;
+
+  for (let i = 0; i < n - 1; i++) {
+    let minIndex = i;
+    yield { type: "compare", indices: [i] };
+
+    for (let j = i + 1; j < n; j++) {
+      yield { type: "compare", indices: [minIndex, j] };
+
+      if (arr[j] < arr[minIndex]) {
+        minIndex = j;
+        yield { type: "min", index: minIndex };
+      }
+    }
+
+    if (minIndex !== i) {
+      [arr[i], arr[minIndex]] = [arr[minIndex], arr[i]];
+      yield { type: "swap", indices: [i, minIndex], array: [...arr] };
+    }
+  }
+
+  yield { type: "done", array: arr };
+}

src/algorithms/sorting/selectionSort.js

@@ -2,32 +2,120 @@
 import { motion } from "framer-motion";
 
 export default function UnionFindVisualizer({ nodes, parent, highlights }) {
+    // Calculate positions for nodes in a grid layout
+    const getNodePosition = (index) => {
+        const cols = Math.ceil(Math.sqrt(nodes.length));
+        const row = Math.floor(index / cols);
+        const col = index % cols;
+        return { row, col };
+    };
+
+    // Generate connections for visualization
+    const connections = [];
+    nodes.forEach((node, index) => {
+        if (parent[index] !== index) {
+            const parentPos = getNodePosition(parent[index]);
+            const childPos = getNodePosition(index);
+            connections.push({
+                from: childPos,
+                to: parentPos,
+                child: index,
+                parent: parent[index]
+            });
+        }
+    });
+
     return (
-        <div className="flex flex-wrap justify-center gap-6 mt-6">
-            {nodes.map((node, index) => {
-                const isRoot = parent[index] === index;
-                const color =
-                    highlights.current === index
-                        ? "bg-blue-500"
-                        : highlights.root === index
-                            ? "bg-green-500"
-                            : highlights.union.includes(index)
-                                ? "bg-red-500"
-                                : "bg-gray-300";
+        <div className="relative">
+            {/* SVG for connections */}
+            <svg 
+                className="absolute inset-0 w-full h-full pointer-events-none" 
+                style={{ minHeight: '300px' }}
+            >
+                {connections.map((conn, index) => {
+                    const fromX = (conn.from.col + 0.5) * (100 / Math.ceil(Math.sqrt(nodes.length))) + '%';
+                    const fromY = (conn.from.row + 0.5) * (100 / Math.ceil(Math.sqrt(nodes.length))) + '%';
+                    const toX = (conn.to.col + 0.5) * (100 / Math.ceil(Math.sqrt(nodes.length))) + '%';
+                    const toY = (conn.to.row + 0.5) * (100 / Math.ceil(Math.sqrt(nodes.length))) + '%';
+                    
+                    const isHighlighted = highlights.union.includes(conn.child) || 
+                                        highlights.current === conn.child ||
+                                        highlights.root === conn.parent;
+                    
+                    return (
+                        <motion.line
+                            key={index}
+                            x1={fromX}
+                            y1={fromY}
+                            x2={toX}
+                            y2={toY}
+                            stroke={isHighlighted ? "#ef4444" : "#6b7280"}
+                            strokeWidth={isHighlighted ? "3" : "2"}
+                            strokeDasharray={isHighlighted ? "5,5" : "none"}
+                            initial={{ pathLength: 0 }}
+                            animate={{ pathLength: 1 }}
+                            transition={{ duration: 0.5, delay: index * 0.1 }}
+                        />
+                    );
+                })}
+            </svg>
+
+            {/* Nodes */}
+            <div className="grid gap-4 justify-center" style={{ 
+                gridTemplateColumns: `repeat(${Math.ceil(Math.sqrt(nodes.length))}, 1fr)`,
+                maxWidth: '600px',
+                margin: '0 auto'
+            }}>
+                {nodes.map((node, index) => {
+                    const isRoot = parent[index] === index;
+                    const color =
+                        highlights.current === index
+                            ? "bg-blue-500"
+                            : highlights.root === index
+                                ? "bg-green-500"
+                                : highlights.union.includes(index)
+                                    ? "bg-red-500"
+                                    : highlights.path.includes(index)
+                                        ? "bg-purple-500"
+                                        : "bg-gray-600";
+
+                    return (
+                        <motion.div
+                            key={index}
+                            className={`w-20 h-20 flex flex-col items-center justify-center text-white font-semibold rounded-full shadow-lg border-2 border-white/20 ${color} relative`}
+                            layout
+                            animate={{ 
+                                scale: highlights.current === index ? 1.2 : 1,
+                                boxShadow: highlights.current === index ? "0 0 20px rgba(59, 130, 246, 0.5)" : "0 4px 6px rgba(0, 0, 0, 0.1)"
+                            }}
+                            transition={{ duration: 0.3 }}
+                        >
+                            <div className="text-lg font-bold">{node}</div>
+                            <div className="text-xs opacity-80">p:{parent[index]}</div>
+                            {isRoot && (
+                                <div className="absolute -top-2 -right-2 w-6 h-6 bg-yellow-400 rounded-full flex items-center justify-center">
+                                    <span className="text-[10px] font-bold text-black">R</span>
+                                </div>
+                            )}
+                            {highlights.current === index && (
+                                <div className="absolute -top-3 -left-3 w-6 h-6 bg-blue-400 rounded-full flex items-center justify-center animate-pulse">
+                                    <span className="text-[10px] font-bold text-white">F</span>
+                                </div>
+                            )}
+                        </motion.div>
+                    );
+                })}
+            </div>
 
-                return (
-                    <motion.div
-                        key={index}
-                        className={`w-16 h-16 flex flex-col items-center justify-center text-white font-semibold rounded-full shadow-md ${color}`}
-                        layout
-                        animate={{ scale: highlights.current === index ? 1.2 : 1 }}
-                    >
-                        <div>{node}</div>
-                        <div className="text-xs">p:{parent[index]}</div>
-                        {isRoot && <div className="text-[10px]">(root)</div>}
-                    </motion.div>
-                );
-            })}
+            {/* Additional Info */}
+            <div className="mt-6 text-center text-sm text-gray-300">
+                <p>Each node shows: <span className="text-white font-semibold">Node Number</span> | <span className="text-gray-400">Parent</span></p>
+                <p className="mt-1">
+                    <span className="text-yellow-400">R</span> = Root | 
+                    <span className="text-blue-400"> F</span> = Finding | 
+                    <span className="text-red-400"> Red</span> = Unioning
+                </p>
+            </div>
         </div>
     );
 }

src/components/graph/UnionFindVisualizer.jsx

@@ -0,0 +1,38 @@
+import React from "react";
+
+const COLORS = {
+  default: "bg-blue-500 shadow-[0_0_10px_#3b82f6]",
+  comparing: "bg-yellow-400 shadow-[0_0_12px_#facc15]",
+  min: "bg-green-500 shadow-[0_0_12px_#22c55e]",
+  swap: "bg-red-500 shadow-[0_0_12px_#ef4444]",
+};
+
+export default function BubbleSortVisualizer({ array, highlight }) {
+  const maxValue = Math.max(...array, 1); // Avoid division by zero
+  const containerHeight = 288; // px (matches h-72)
+
+  return (
+    <div className="flex items-end justify-center space-x-2 h-72 mt-10 transition-all duration-500">
+      {array.map((value, idx) => {
+        let color = COLORS.default;
+        if (highlight?.type === "compare" && highlight.indices?.includes(idx))
+          color = COLORS.comparing;
+        if (highlight?.type === "min" && highlight.index === idx)
+          color = COLORS.min;
+        if (highlight?.type === "swap" && highlight.indices?.includes(idx))
+          color = COLORS.swap;
+
+        // Normalize height relative to the maximum value
+        const height = Math.max((value / maxValue) * containerHeight, 15); // minimum 15px for visibility
+
+        return (
+          <div
+            key={idx}
+            className={`${color} w-6 transition-all duration-300 rounded-t-md`}
+            style={{ height: `${height}px` }}
+          ></div>
+        );
+      })}
+    </div>
+  );
+}