import React, { useState, useEffect, useRef } from "react" import { useFireproof } from "use-fireproof" import { callAI } from "call-ai" import { ImgGen } from "use-vibes" export default function SortingVisualizer() { const { database, useLiveQuery, useDocument } = useFireproof("sorting-algorithms") const [isRunning, setIsRunning] = useState(false) const [currentStep, setCurrentStep] = useState(0) const [speed, setSpeed] = useState(200) const [algorithm, setAlgorithm] = useState('bubble') const [customArray, setCustomArray] = useState('') const timeoutRef = useRef(null) const { doc: sessionDoc, merge: mergeSession, save: saveSession } = useDocument({ type: 'sorting-session', algorithm: 'bubble', originalArray: [64, 34, 25, 12, 22, 11, 90], steps: [], completed: false }) const { docs: sessions } = useLiveQuery('type', { key: 'sorting-session', descending: true, limit: 10 }) const algorithms = { bubble: 'Bubble Sort', selection: 'Selection Sort', insertion: 'Insertion Sort', quick: 'Quick Sort' } useEffect(() => { if (isRunning && currentStep < sessionDoc.steps.length) { timeoutRef.current = setTimeout(() => { setCurrentStep(prev => prev + 1) }, speed) } else if (currentStep >= sessionDoc.steps.length && sessionDoc.steps.length > 0) { setIsRunning(false) mergeSession({ completed: true }) saveSession() } return () => { if (timeoutRef.current) clearTimeout(timeoutRef.current) } }, [isRunning, currentStep, speed, sessionDoc.steps.length]) const generateSteps = (arr, algo) => { const steps = [] const array = [...arr] if (algo === 'bubble') { const n = array.length for (let i = 0; i < n - 1; i++) { for (let j = 0; j < n - i - 1; j++) { steps.push({ array: [...array], comparing: [j, j + 1], description: `Comparing ${array[j]} and ${array[j + 1]}` }) if (array[j] > array[j + 1]) { [array[j], array[j + 1]] = [array[j + 1], array[j]] steps.push({ array: [...array], swapped: [j, j + 1], description: `Swapped ${array[j]} and ${array[j + 1]}` }) } } } } else if (algo === 'selection') { const n = array.length for (let i = 0; i < n - 1; i++) { let minIdx = i steps.push({ array: [...array], current: i, description: `Finding minimum from position ${i}` }) for (let j = i + 1; j < n; j++) { steps.push({ array: [...array], comparing: [minIdx, j], description: `Comparing ${array[minIdx]} and ${array[j]}` }) if (array[j] < array[minIdx]) { minIdx = j } } if (minIdx !== i) { [array[i], array[minIdx]] = [array[minIdx], array[i]] steps.push({ array: [...array], swapped: [i, minIdx], description: `Swapped ${array[i]} to position ${i}` }) } } } else if (algo === 'insertion') { for (let i = 1; i < array.length; i++) { const key = array[i] let j = i - 1 steps.push({ array: [...array], current: i, description: `Inserting ${key} into sorted portion` }) while (j >= 0 && array[j] > key) { steps.push({ array: [...array], comparing: [j, j + 1], description: `Moving ${array[j]} to the right` }) array[j + 1] = array[j] j-- steps.push({ array: [...array], moved: j + 2, description: `Shifted elements` }) } array[j + 1] = key steps.push({ array: [...array], inserted: j + 1, description: `Placed ${key} at position ${j + 1}` }) } } steps.push({ array: [...array], completed: true, description: 'Sorting completed!' }) return steps } const startSorting = () => { const arr = customArray ? customArray.split(',').map(x => parseInt(x.trim())).filter(x => !isNaN(x)) : sessionDoc.originalArray if (arr.length === 0) return const steps = generateSteps(arr, algorithm) mergeSession({ algorithm, originalArray: arr, steps, completed: false }) setCurrentStep(0) setIsRunning(true) } const resetVisualization = () => { setIsRunning(false) setCurrentStep(0) if (timeoutRef.current) clearTimeout(timeoutRef.current) } const generateDemoData = async () => { const response = await callAI("Generate 3 different sorting scenarios with arrays of 6-10 numbers each. Include one with mostly sorted data, one random, and one reverse sorted.", { schema: { properties: { scenarios: { type: "array", items: { type: "object", properties: { name: { type: "string" }, description: { type: "string" }, data: { type: "array", items: { type: "number" } }, algorithm: { type: "string" } } } } } } }) const scenarios = JSON.parse(response) for (const scenario of scenarios.scenarios) { const steps = generateSteps(scenario.data, scenario.algorithm || 'bubble') await database.put({ type: 'sorting-session', name: scenario.name, description: scenario.description, algorithm: scenario.algorithm || 'bubble', originalArray: scenario.data, steps, completed: false, createdAt: Date.now() }) } } const currentArray = sessionDoc.steps[currentStep]?.array || sessionDoc.originalArray const currentInfo = sessionDoc.steps[currentStep] || {} return (

{/* Header */}

🔢 Visual Sort Algorithm Demo

*Watch different sorting algorithms come to life! Choose an algorithm, input your data, and see each comparison and swap in real-time. Perfect for **understanding how sorting works** step by step.*

{/* Controls */}

Algorithm:

Speed (ms): setSpeed(parseInt(e.target.value))} className="w-full" />

{speed}ms

Custom Array: setCustomArray(e.target.value)} placeholder="e.g. 64,34,25,12,22" className="w-full p-3 border-3 border-black rounded font-bold" style={{ backgroundColor: '#ffd670' }} />

{/* Visualization */}

{algorithms[sessionDoc.algorithm]} - Step {currentStep} of {sessionDoc.steps.length}

{currentInfo.description || 'Ready to start sorting...'}

{/* Array Bars */}

{currentArray.map((value, index) => { let colorStyle = { backgroundColor: '#e9ff70' } if (currentInfo.comparing?.includes(index)) { colorStyle = { backgroundColor: '#ff70a6' } } else if (currentInfo.swapped?.includes(index)) { colorStyle = { backgroundColor: '#70d6ff' } } else if (currentInfo.current === index) { colorStyle = { backgroundColor: '#ff9770' } } else if (currentInfo.inserted === index) { colorStyle = { backgroundColor: '#ffd670' } } return (

{value}

) })}

{/* Legend */}

Normal

Comparing

Swapped

Current

Inserted

{/* Session History */} {sessions.length > 0 && (

📚 Previous Sessions

{sessions.map((session) => (

{ mergeSession({ algorithm: session.algorithm, originalArray: session.originalArray, steps: session.steps, completed: session.completed }) setAlgorithm(session.algorithm) setCurrentStep(0) setIsRunning(false) }} >

{algorithms[session.algorithm]}

{session.name || 'Custom Session'}

Array: [{session.originalArray.join(', ')}]

{session.completed ? '✅ Completed' : '⏳ In Progress'} ({session.steps.length} steps)

))}

)}

) }

🔢 Visual Sort Algorithm Demo

Bubble Sort - Step 0 of 0