'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; // ============================================================================ // BUBBLE SORT VIEW (Preserved) // ============================================================================ export const BubbleSortView = () => { const [arr, setArr] = useState([40, 100, 20, 80, 60, 120, 10, 90]); const [comparing, setComparing] = useState([]); const [sortedIdx, setSortedIdx] = useState([]); const sortingRef = useRef(false); const reset = () => { setArr(Array.from({length: 8}, () => Math.floor(Math.random() * 100) + 20)); setSortedIdx([]); sortingRef.current = false; }; useEffect(() => { const sort = async () => { if (sortingRef.current) return; sortingRef.current = true; const a = [...arr]; const n = a.length; for (let i = 0; i < n - 1; i++) { for (let j = 0; j < n - i - 1; j++) { setComparing([j, j+1]); await new Promise(r => setTimeout(r, 500)); if (a[j] > a[j+1]) { // Swap let temp = a[j]; a[j] = a[j+1]; a[j+1] = temp; setArr([...a]); await new Promise(r => setTimeout(r, 500)); } } setSortedIdx(prev => [...prev, n - i - 1]); } setSortedIdx(prev => [...prev, 0]); setComparing([]); await new Promise(r => setTimeout(r, 2000)); reset(); }; sort(); }, [arr]); const barWidth = 50; const gap = 20; const startX = (VIEW_WIDTH - (arr.length * (barWidth + gap))) / 2; return ( ); };