{algorithm.name}

\n \n {/* Tabs */}\n

\n \n

\n \n {/* Tab content */}\n

\n {activeTab === 'description' && (\n

{algorithm.description}

\n )}\n \n {activeTab === 'complexity' && (\n

Time Complexity

Best Case

{algorithm.timeComplexity.best}

Average Case

{algorithm.timeComplexity.average}

Worst Case

{algorithm.timeComplexity.worst}

\n \n

Space Complexity

{algorithm.spaceComplexity}

\n )}\n \n {activeTab === 'pseudocode' && (\n

\n              {algorithm.pseudocode.join('\\n')}\n

\n )}\n

\n );\n};\n\nexport default AlgorithmInfo;",[],[171,178,185],{"_102":193,"_95":194,"_143":195,"_145":179,"_146":132,"_147":196,"_149":150,"_104":197,"_99":31,"_152":164,"_154":198,"_155":27,"_156":-5,"_157":199,"_98":200},"41f1c2aa-3682-11f0-b67e-9e149126039e","AlgorithmSelector.tsx","41f1c368-3682-11f0-b67e-9e149126039e",13,["D",1747859352844],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from 'https://esm.sh/react@18.2.0';\nimport { Algorithm, AlgorithmType } from '../../shared/types';\n\ninterface AlgorithmSelectorProps {\n algorithms: Algorithm[];\n selectedAlgorithm: Algorithm | null;\n onSelect: (algorithm: Algorithm) => void;\n}\n\nconst AlgorithmSelector: React.FC = ({ \n algorithms, \n selectedAlgorithm, \n onSelect \n}) => {\n // Group algorithms by type\n const algorithmsByType: Record = {\n sorting: [],\n searching: [],\n graph: [],\n tree: []\n };\n \n algorithms.forEach(algorithm => {\n algorithmsByType[algorithm.type].push(algorithm);\n });\n \n // Filter out empty categories\n const categories = Object.entries(algorithmsByType)\n .filter(([_, algos]) => algos.length > 0)\n .map(([type]) => type as AlgorithmType);\n \n return (\n

\n {categories.map(category => (\n

{category} Algorithms

\n {algorithmsByType[category].map(algorithm => (\n onSelect(algorithm)}\n >\n {algorithm.name}\n \n ))}\n

\n ))}\n

\n );\n};\n\nexport default AlgorithmSelector;",[],[171,178,194],{"_102":202,"_95":203,"_143":204,"_145":179,"_146":132,"_147":180,"_149":150,"_104":205,"_99":31,"_152":164,"_154":206,"_155":27,"_156":-5,"_157":207,"_98":208},"371a5b4e-3682-11f0-8e5a-9e149126039e","App.tsx","371a5bee-3682-11f0-8e5a-9e149126039e",["D",1747859334656],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from 'https://esm.sh/react@18.2.0';\nimport { Algorithm, AlgorithmStep } from '../../shared/types';\nimport AlgorithmSelector from './AlgorithmSelector';\nimport Visualization from './Visualization';\nimport Controls from './Controls';\nimport AlgorithmInfo from './AlgorithmInfo';\nimport ArrayInput from './ArrayInput';\n\ninterface AppProps {\n initialData: {\n algorithms: Algorithm[];\n };\n}\n\nconst App: React.FC = ({ initialData }) => {\n const [algorithms, setAlgorithms] = useState(initialData.algorithms || []);\n const [selectedAlgorithm, setSelectedAlgorithm] = useState(null);\n const [steps, setSteps] = useState([]);\n const [currentStepIndex, setCurrentStepIndex] = useState(0);\n const [isPlaying, setIsPlaying] = useState(false);\n const [playbackSpeed, setPlaybackSpeed] = useState(500); // ms between steps\n const [array, setArray] = useState([28, 45, 12, 67, 33, 89, 21, 55, 40, 75]);\n const [target, setTarget] = useState(undefined);\n const [loading, setLoading] = useState(false);\n \n // Fetch algorithms if not provided in initial data\n useEffect(() => {\n if (!initialData.algorithms) {\n fetch('/api/algorithms')\n .then(res => res.json())\n .then(data => setAlgorithms(data.algorithms))\n .catch(err => console.error('Error fetching algorithms:', err));\n }\n }, [initialData]);\n \n // Fetch algorithm steps when algorithm is selected\n useEffect(() => {\n if (selectedAlgorithm) {\n setLoading(true);\n setSteps([]);\n setCurrentStepIndex(0);\n \n let url = `/api/algorithms/${selectedAlgorithm.id}/steps?array=${JSON.stringify(array)}`;\n if (target !== undefined && selectedAlgorithm.type === 'searching') {\n url += `&target=${target}`;\n }\n \n fetch(url)\n .then(res => res.json())\n .then(data => {\n setSteps(data.steps);\n setLoading(false);\n })\n .catch(err => {\n console.error('Error fetching algorithm steps:', err);\n setLoading(false);\n });\n }\n }, [selectedAlgorithm, array, target]);\n \n // Handle playback\n useEffect(() => {\n let timer: number;\n \n if (isPlaying && currentStepIndex < steps.length - 1) {\n timer = setTimeout(() => {\n setCurrentStepIndex(prev => prev + 1);\n }, playbackSpeed) as unknown as number;\n } else if (currentStepIndex >= steps.length - 1) {\n setIsPlaying(false);\n }\n \n return () => clearTimeout(timer);\n }, [isPlaying, currentStepIndex, steps, playbackSpeed]);\n \n const handleAlgorithmSelect = (algorithm: Algorithm) => {\n setSelectedAlgorithm(algorithm);\n setIsPlaying(false);\n setCurrentStepIndex(0);\n \n // Set default target for search algorithms\n if (algorithm.type === 'searching' && target === undefined) {\n setTarget(array[Math.floor(Math.random() * array.length)]);\n }\n };\n \n const handleArrayChange = (newArray: number[]) => {\n setArray(newArray);\n setIsPlaying(false);\n setCurrentStepIndex(0);\n };\n \n const handleTargetChange = (newTarget: number) => {\n setTarget(newTarget);\n setIsPlaying(false);\n setCurrentStepIndex(0);\n };\n \n const handlePlayPause = () => {\n setIsPlaying(!isPlaying);\n };\n \n const handleStepForward = () => {\n if (currentStepIndex < steps.length - 1) {\n setCurrentStepIndex(prev => prev + 1);\n }\n };\n \n const handleStepBackward = () => {\n if (currentStepIndex > 0) {\n setCurrentStepIndex(prev => prev - 1);\n }\n };\n \n const handleReset = () => {\n setCurrentStepIndex(0);\n setIsPlaying(false);\n };\n \n const handleSpeedChange = (speed: number) => {\n setPlaybackSpeed(speed);\n };\n \n const currentStep = steps[currentStepIndex];\n \n return (\n

\n {/* Header */}\n

AlgoVisual

Algorithm Visualizer for CS Students

\n \n {/* Main Content */}\n

\n {/* Left Sidebar */}\n

Select Algorithm

\n \n

\n \n {selectedAlgorithm && (\n

Input Data

\n \n

\n )}\n

\n \n {/* Main Content */}\n

\n {selectedAlgorithm ? (\n <>\n

Visualization

\n {loading ? (\n

\n ) : steps.length > 0 ? (\n <>\n \n

{currentStep.description}

\n \n \n ) : (\n

No visualization data available

\n )}\n

\n \n

\n \n ) : (\n

Welcome to AlgoVisual

\n Select an algorithm from the sidebar to start visualizing how it works.\n

Why Visualize Algorithms?

\n Visualizing algorithms helps you understand their behavior, efficiency, and \n underlying concepts. It's a powerful learning tool for computer science students.\n

\n )}\n

\n \n {/* Footer */}\n \n

\n );\n};\n\nexport default App;",[],[171,178,203],{"_102":210,"_95":211,"_143":212,"_145":179,"_146":132,"_147":213,"_149":150,"_104":214,"_99":31,"_152":164,"_154":215,"_155":27,"_156":-5,"_157":216,"_98":217},"8231f4ac-3682-11f0-81ad-9e149126039e","ArrayInput.tsx","8231f56a-3682-11f0-81ad-9e149126039e",17,["D",1747859460639],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from 'https://esm.sh/react@18.2.0';\n\ninterface ArrayInputProps {\n array: number[];\n onArrayChange: (array: number[]) => void;\n showTarget: boolean;\n target?: number;\n onTargetChange?: (target: number) => void;\n}\n\nconst ArrayInput: React.FC = ({ \n array, \n onArrayChange, \n showTarget, \n target, \n onTargetChange \n}) => {\n const [arrayInput, setArrayInput] = useState(array.join(', '));\n const [targetInput, setTargetInput] = useState(target?.toString() || '');\n const [error, setError] = useState('');\n \n const handleArrayInputChange = (e: React.ChangeEvent) => {\n setArrayInput(e.target.value);\n };\n \n const handleTargetInputChange = (e: React.ChangeEvent) => {\n setTargetInput(e.target.value);\n };\n \n const handleSubmit = (e: React.FormEvent) => {\n e.preventDefault();\n \n try {\n // Parse array input\n const newArray = arrayInput\n .split(',')\n .map(item => item.trim())\n .filter(item => item !== '')\n .map(item => {\n const num = parseInt(item);\n if (isNaN(num)) {\n throw new Error(`Invalid number: ${item}`);\n }\n return num;\n });\n \n if (newArray.length < 2) {\n throw new Error('Please enter at least 2 numbers');\n }\n \n if (newArray.length > 20) {\n throw new Error('Please enter at most 20 numbers');\n }\n \n // Parse target input if needed\n if (showTarget && onTargetChange) {\n const newTarget = parseInt(targetInput);\n if (isNaN(newTarget)) {\n throw new Error('Please enter a valid target number');\n }\n onTargetChange(newTarget);\n }\n \n // Update array\n onArrayChange(newArray);\n setError('');\n } catch (err) {\n setError(err.message);\n }\n };\n \n const generateRandomArray = () => {\n const size = Math.floor(Math.random() * 9) + 5; // 5-13 elements\n const newArray = Array.from({ length: size }, () => Math.floor(Math.random() * 100) + 1);\n setArrayInput(newArray.join(', '));\n onArrayChange(newArray);\n \n // Generate random target if needed\n if (showTarget && onTargetChange) {\n const randomIndex = Math.floor(Math.random() * newArray.length);\n const newTarget = newArray[randomIndex];\n setTargetInput(newTarget.toString());\n onTargetChange(newTarget);\n }\n };\n \n return (\n \n );\n};\n\nexport default ArrayInput;",[],[171,178,211],{"_102":219,"_95":220,"_143":221,"_145":179,"_146":132,"_147":222,"_149":150,"_104":223,"_99":31,"_152":164,"_154":224,"_155":27,"_156":-5,"_157":225,"_98":226},"649c6774-3682-11f0-a3c7-9e149126039e","Controls.tsx","649c6832-3682-11f0-a3c7-9e149126039e",15,["D",1747859411006],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from 'https://esm.sh/react@18.2.0';\n\ninterface ControlsProps {\n isPlaying: boolean;\n onPlayPause: () => void;\n onStepForward: () => void;\n onStepBackward: () => void;\n onReset: () => void;\n onSpeedChange: (speed: number) => void;\n playbackSpeed: number;\n currentStep: number;\n totalSteps: number;\n}\n\nconst Controls: React.FC = ({\n isPlaying,\n onPlayPause,\n onStepForward,\n onStepBackward,\n onReset,\n onSpeedChange,\n playbackSpeed,\n currentStep,\n totalSteps\n}) => {\n // Convert playback speed to a slider value (1-5)\n // 1000ms = 1, 750ms = 2, 500ms = 3, 250ms = 4, 100ms = 5\n const speedToSliderValue = (speed: number): number => {\n if (speed >= 1000) return 1;\n if (speed >= 750) return 2;\n if (speed >= 500) return 3;\n if (speed >= 250) return 4;\n return 5;\n };\n \n // Convert slider value to playback speed\n const sliderValueToSpeed = (value: number): number => {\n switch (value) {\n case 1: return 1000;\n case 2: return 750;\n case 3: return 500;\n case 4: return 250;\n case 5: return 100;\n default: return 500;\n }\n };\n \n const handleSpeedChange = (e: React.ChangeEvent) => {\n const value = parseInt(e.target.value);\n onSpeedChange(sliderValueToSpeed(value));\n };\n \n return (\n

\n {/* Progress bar */}\n

\n Progress\n {currentStep} / {totalSteps}\n

\n \n {/* Control buttons */}\n

\n \n \n \n \n \n \n \n {isPlaying ? (\n \n ) : (\n \n )}\n \n = totalSteps}\n >\n \n \n

\n \n {/* Speed control */}\n

\n Speed:\n \n \n {speedToSliderValue(playbackSpeed) === 1 ? 'Slow' : \n speedToSliderValue(playbackSpeed) === 5 ? 'Fast' : ''}\n \n

\n );\n};\n\nexport default Controls;",[],[171,178,220],{"_102":228,"_95":229,"_143":230,"_145":179,"_146":132,"_147":231,"_149":150,"_104":232,"_99":31,"_152":164,"_154":233,"_155":27,"_156":-5,"_157":234,"_98":235},"5071b920-3682-11f0-8d21-9e149126039e","Visualization.tsx","5071b9d4-3682-11f0-8d21-9e149126039e",14,["D",1747859377170],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from 'https://esm.sh/react@18.2.0';\nimport { AlgorithmStep, AlgorithmType } from '../../shared/types';\n\ninterface VisualizationProps {\n step: AlgorithmStep;\n algorithmType: AlgorithmType;\n}\n\nconst Visualization: React.FC = ({ step, algorithmType }) => {\n if (!step) return null;\n \n const { array, highlightIndices, sortedIndices, pivotIndex } = step;\n \n // Find the maximum value in the array for scaling\n const maxValue = Math.max(...array);\n \n // Calculate bar properties\n const barWidth = 100 / array.length;\n const barMargin = Math.min(4, barWidth / 4);\n const effectiveBarWidth = barWidth - barMargin * 2;\n \n return (\n

\n {/* Array visualization */}\n

\n {array.map((value, index) => {\n // Determine bar color based on its state\n let barColor = 'bg-blue-500';\n if (highlightIndices.includes(index)) {\n barColor = 'highlight';\n } else if (sortedIndices.includes(index)) {\n barColor = 'sorted';\n } else if (pivotIndex === index) {\n barColor = 'pivot';\n }\n \n // Calculate height as percentage of container\n const heightPercentage = (value / maxValue) * 100;\n \n return (\n \n

\n {value}\n

\n );\n })}\n

\n \n \n {/* Index labels */}\n

\n {array.map((_, index) => (\n

\n {index}\n

\n ))}\n

\n \n );\n};\n\nexport default Visualization;",[],[171,178,229],[171,178],{"_102":238,"_95":239,"_143":240,"_145":172,"_146":132,"_147":173,"_149":150,"_104":241,"_99":31,"_152":242,"_154":243,"_155":27,"_156":-5,"_157":244,"_98":245},"1eb66f20-3682-11f0-ada9-9e149126039e","index.html","1eb66ffc-3682-11f0-ada9-9e149126039e",["D",1747859293734],"file","\n\n\n \n \n AlgoVisual - Algorithm Visualizer for CS Students\n \n \n \n \n\n\n

\n \n\n",[],[171,239],{"_102":247,"_95":248,"_143":249,"_145":172,"_146":132,"_147":250,"_149":150,"_104":251,"_99":31,"_152":164,"_154":252,"_155":27,"_156":-5,"_157":253,"_98":254},"227e5d3e-3682-11f0-bd42-9e149126039e","index.tsx","227e5dde-3682-11f0-bd42-9e149126039e",11,["D",1747859300078],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from 'https://esm.sh/react@18.2.0';\nimport ReactDOM from 'https://esm.sh/react-dom@18.2.0';\nimport App from './components/App';\n\n// Get initial data injected by the server\ndeclare global {\n interface Window {\n __INITIAL_DATA__: any;\n }\n}\n\nReactDOM.render(\n \n \n ,\n document.getElementById('root')\n);",[],[171,248],[171],{"_102":257,"_95":258,"_143":259,"_145":-5,"_146":132,"_147":260,"_149":150,"_104":261,"_99":31,"_152":153,"_154":-5,"_155":27,"_156":-5,"_157":262,"_98":280},"ed5f8c18-3681-11f0-974e-9e149126039e","shared","3cc1f4d3-2dce-494a-9a1c-4d5c13c6ecda",7,["D",1747859210952],[263,272],{"_102":264,"_95":265,"_143":266,"_145":259,"_146":132,"_147":267,"_149":150,"_104":268,"_99":31,"_152":164,"_154":269,"_155":27,"_156":-5,"_157":270,"_98":271},"0cca2356-3682-11f0-8453-9e149126039e","algorithms.ts","0cca245a-3682-11f0-8453-9e149126039e",8,["D",1747859263665],"import { Algorithm, AlgorithmStep } from './types';\n\n// Algorithm definitions\nexport const algorithms: Algorithm[] = [\n {\n id: 'bubble-sort',\n name: 'Bubble Sort',\n type: 'sorting',\n description: 'A simple sorting algorithm that repeatedly steps through the list, compares adjacent elements and swaps them if they are in the wrong order.',\n timeComplexity: {\n best: 'O(n)',\n average: 'O(n²)',\n worst: 'O(n²)',\n },\n spaceComplexity: 'O(1)',\n pseudocode: [\n 'procedure bubbleSort(A: list of sortable items)',\n ' n := length(A)',\n ' repeat',\n ' swapped := false',\n ' for i := 1 to n-1 inclusive do',\n ' if A[i-1] > A[i] then',\n ' swap(A[i-1], A[i])',\n ' swapped := true',\n ' end if',\n ' end for',\n ' n := n - 1',\n ' until not swapped',\n 'end procedure',\n ],\n },\n {\n id: 'insertion-sort',\n name: 'Insertion Sort',\n type: 'sorting',\n description: 'A simple sorting algorithm that builds the final sorted array one item at a time. It is efficient for small data sets.',\n timeComplexity: {\n best: 'O(n)',\n average: 'O(n²)',\n worst: 'O(n²)',\n },\n spaceComplexity: 'O(1)',\n pseudocode: [\n 'procedure insertionSort(A: list of sortable items)',\n ' n := length(A)',\n ' for i := 1 to n-1 inclusive do',\n ' j := i',\n ' while j > 0 and A[j-1] > A[j] do',\n ' swap(A[j], A[j-1])',\n ' j := j - 1',\n ' end while',\n ' end for',\n 'end procedure',\n ],\n },\n {\n id: 'selection-sort',\n name: 'Selection Sort',\n type: 'sorting',\n description: 'A simple sorting algorithm that divides the input list into two parts: a sorted sublist and an unsorted sublist. It repeatedly selects the smallest element from the unsorted sublist and moves it to the end of the sorted sublist.',\n timeComplexity: {\n best: 'O(n²)',\n average: 'O(n²)',\n worst: 'O(n²)',\n },\n spaceComplexity: 'O(1)',\n pseudocode: [\n 'procedure selectionSort(A: list of sortable items)',\n ' n := length(A)',\n ' for i := 0 to n-1 inclusive do',\n ' minIndex := i',\n ' for j := i+1 to n-1 inclusive do',\n ' if A[j] < A[minIndex] then',\n ' minIndex := j',\n ' end if',\n ' end for',\n ' if minIndex ≠ i then',\n ' swap(A[i], A[minIndex])',\n ' end if',\n ' end for',\n 'end procedure',\n ],\n },\n {\n id: 'merge-sort',\n name: 'Merge Sort',\n type: 'sorting',\n description: 'An efficient, stable, comparison-based, divide and conquer sorting algorithm. It divides the input array into two halves, recursively sorts them, and then merges the sorted halves.',\n timeComplexity: {\n best: 'O(n log n)',\n average: 'O(n log n)',\n worst: 'O(n log n)',\n },\n spaceComplexity: 'O(n)',\n pseudocode: [\n 'procedure mergeSort(A: list of sortable items, lo, hi)',\n ' if lo < hi then',\n ' mid := floor((lo + hi) / 2)',\n ' mergeSort(A, lo, mid)',\n ' mergeSort(A, mid + 1, hi)',\n ' merge(A, lo, mid, hi)',\n ' end if',\n 'end procedure',\n '',\n 'procedure merge(A: list of sortable items, lo, mid, hi)',\n ' create temporary arrays L and R',\n ' copy A[lo..mid] to L and A[mid+1..hi] to R',\n ' i := 0, j := 0, k := lo',\n ' while i < length(L) and j < length(R) do',\n ' if L[i] <= R[j] then',\n ' A[k] := L[i]',\n ' i := i + 1',\n ' else',\n ' A[k] := R[j]',\n ' j := j + 1',\n ' end if',\n ' k := k + 1',\n ' end while',\n ' copy remaining elements of L and R back to A',\n 'end procedure',\n ],\n },\n {\n id: 'quick-sort',\n name: 'Quick Sort',\n type: 'sorting',\n description: 'An efficient, in-place sorting algorithm that uses a divide-and-conquer strategy. It picks an element as a pivot and partitions the array around the pivot.',\n timeComplexity: {\n best: 'O(n log n)',\n average: 'O(n log n)',\n worst: 'O(n²)',\n },\n spaceComplexity: 'O(log n)',\n pseudocode: [\n 'procedure quickSort(A: list of sortable items, lo, hi)',\n ' if lo < hi then',\n ' p := partition(A, lo, hi)',\n ' quickSort(A, lo, p - 1)',\n ' quickSort(A, p + 1, hi)',\n ' end if',\n 'end procedure',\n '',\n 'procedure partition(A: list of sortable items, lo, hi)',\n ' pivot := A[hi]',\n ' i := lo - 1',\n ' for j := lo to hi - 1 do',\n ' if A[j] <= pivot then',\n ' i := i + 1',\n ' swap(A[i], A[j])',\n ' end if',\n ' end for',\n ' swap(A[i + 1], A[hi])',\n ' return i + 1',\n 'end procedure',\n ],\n },\n {\n id: 'binary-search',\n name: 'Binary Search',\n type: 'searching',\n description: 'An efficient algorithm for finding an item from a sorted list of items. It works by repeatedly dividing in half the portion of the list that could contain the item, until you\\'ve narrowed down the possible locations to just one.',\n timeComplexity: {\n best: 'O(1)',\n average: 'O(log n)',\n worst: 'O(log n)',\n },\n spaceComplexity: 'O(1)',\n pseudocode: [\n 'procedure binarySearch(A: sorted list of items, target)',\n ' lo := 0',\n ' hi := length(A) - 1',\n ' while lo <= hi do',\n ' mid := floor((lo + hi) / 2)',\n ' if A[mid] < target then',\n ' lo := mid + 1',\n ' else if A[mid] > target then',\n ' hi := mid - 1',\n ' else',\n ' return mid',\n ' end if',\n ' end while',\n ' return -1 // Not found',\n 'end procedure',\n ],\n },\n {\n id: 'linear-search',\n name: 'Linear Search',\n type: 'searching',\n description: 'A simple search algorithm that checks each element of the list until a match is found or the whole list has been searched.',\n timeComplexity: {\n best: 'O(1)',\n average: 'O(n)',\n worst: 'O(n)',\n },\n spaceComplexity: 'O(1)',\n pseudocode: [\n 'procedure linearSearch(A: list of items, target)',\n ' for i := 0 to length(A) - 1 do',\n ' if A[i] = target then',\n ' return i',\n ' end if',\n ' end for',\n ' return -1 // Not found',\n 'end procedure',\n ],\n },\n];\n\n// Algorithm implementation functions\nexport function generateBubbleSortSteps(array: number[]): AlgorithmStep[] {\n const steps: AlgorithmStep[] = [];\n const arr = [...array];\n const n = arr.length;\n \n // Initial state\n steps.push({\n array: [...arr],\n highlightIndices: [],\n sortedIndices: [],\n description: 'Initial array'\n });\n \n let swapped;\n let sortedCount = 0;\n \n do {\n swapped = false;\n for (let i = 0; i < n - 1 - sortedCount; i++) {\n // Comparing elements\n steps.push({\n array: [...arr],\n highlightIndices: [i, i + 1],\n sortedIndices: Array.from({ length: sortedCount }, (_, idx) => n - 1 - idx),\n description: `Comparing ${arr[i]} and ${arr[i + 1]}`\n });\n \n if (arr[i] > arr[i + 1]) {\n // Swap elements\n [arr[i], arr[i + 1]] = [arr[i + 1], arr[i]];\n swapped = true;\n \n steps.push({\n array: [...arr],\n highlightIndices: [i, i + 1],\n sortedIndices: Array.from({ length: sortedCount }, (_, idx) => n - 1 - idx),\n description: `Swapped ${arr[i + 1]} and ${arr[i]}`\n });\n }\n }\n \n sortedCount++;\n \n // Mark the largest element as sorted\n if (n - sortedCount >= 0) {\n steps.push({\n array: [...arr],\n highlightIndices: [],\n sortedIndices: Array.from({ length: sortedCount }, (_, idx) => n - 1 - idx),\n description: `Element ${arr[n - sortedCount]} is now in its correct position`\n });\n }\n } while (swapped);\n \n // Final state\n steps.push({\n array: [...arr],\n highlightIndices: [],\n sortedIndices: Array.from({ length: n }, (_, idx) => idx),\n description: 'Array is sorted'\n });\n \n return steps;\n}\n\nexport function generateInsertionSortSteps(array: number[]): AlgorithmStep[] {\n const steps: AlgorithmStep[] = [];\n const arr = [...array];\n const n = arr.length;\n \n // Initial state\n steps.push({\n array: [...arr],\n highlightIndices: [],\n sortedIndices: [0],\n description: 'Initial array with first element considered sorted'\n });\n \n for (let i = 1; i < n; i++) {\n // Current element to be inserted\n steps.push({\n array: [...arr],\n highlightIndices: [i],\n sortedIndices: Array.from({ length: i }, (_, idx) => idx),\n description: `Inserting element ${arr[i]} into the sorted portion`\n });\n \n let j = i;\n while (j > 0 && arr[j - 1] > arr[j]) {\n // Compare elements\n steps.push({\n array: [...arr],\n highlightIndices: [j - 1, j],\n sortedIndices: Array.from({ length: i }, (_, idx) => idx !== j && idx !== j - 1 ? idx : -1).filter(idx => idx !== -1),\n description: `Comparing ${arr[j - 1]} and ${arr[j]}`\n });\n \n // Swap elements\n [arr[j], arr[j - 1]] = [arr[j - 1], arr[j]];\n \n steps.push({\n array: [...arr],\n highlightIndices: [j - 1, j],\n sortedIndices: Array.from({ length: i }, (_, idx) => idx !== j && idx !== j - 1 ? idx : -1).filter(idx => idx !== -1),\n description: `Swapped ${arr[j]} and ${arr[j - 1]}`\n });\n \n j--;\n }\n \n // Element inserted\n steps.push({\n array: [...arr],\n highlightIndices: [],\n sortedIndices: Array.from({ length: i + 1 }, (_, idx) => idx),\n description: `Element ${arr[j]} inserted into correct position`\n });\n }\n \n // Final state\n steps.push({\n array: [...arr],\n highlightIndices: [],\n sortedIndices: Array.from({ length: n }, (_, idx) => idx),\n description: 'Array is sorted'\n });\n \n return steps;\n}\n\n// Generate steps for binary search\nexport function generateBinarySearchSteps(array: number[], target: number): AlgorithmStep[] {\n const steps: AlgorithmStep[] = [];\n const arr = [...array].sort((a, b) => a - b); // Ensure array is sorted\n let left = 0;\n let right = arr.length - 1;\n \n // Initial state\n steps.push({\n array: [...arr],\n highlightIndices: [],\n sortedIndices: [],\n description: `Searching for ${target} in the sorted array`\n });\n \n while (left <= right) {\n const mid = Math.floor((left + right) / 2);\n \n // Highlight current search range\n steps.push({\n array: [...arr],\n highlightIndices: Array.from({ length: right - left + 1 }, (_, idx) => left + idx),\n sortedIndices: [],\n description: `Searching in the range [${left}, ${right}]`\n });\n \n // Highlight middle element\n steps.push({\n array: [...arr],\n highlightIndices: [mid],\n sortedIndices: [],\n description: `Checking middle element at index ${mid}: ${arr[mid]}`\n });\n \n if (arr[mid] === target) {\n // Found the target\n steps.push({\n array: [...arr],\n highlightIndices: [mid],\n sortedIndices: [],\n description: `Found ${target} at index ${mid}`\n });\n break;\n } else if (arr[mid] < target) {\n // Search in the right half\n left = mid + 1;\n steps.push({\n array: [...arr],\n highlightIndices: Array.from({ length: right - left + 1 }, (_, idx) => left + idx),\n sortedIndices: [],\n description: `${arr[mid]} < ${target}, searching in the right half`\n });\n } else {\n // Search in the left half\n right = mid - 1;\n steps.push({\n array: [...arr],\n highlightIndices: Array.from({ length: right - left + 1 }, (_, idx) => left + idx),\n sortedIndices: [],\n description: `${arr[mid]} > ${target}, searching in the left half`\n });\n }\n }\n \n // If target not found\n if (left > right) {\n steps.push({\n array: [...arr],\n highlightIndices: [],\n sortedIndices: [],\n description: `${target} not found in the array`\n });\n }\n \n return steps;\n}\n\n// Function to generate algorithm steps based on algorithm ID\nexport function generateAlgorithmSteps(algorithmId: string, array: number[], target?: number): AlgorithmStep[] {\n switch (algorithmId) {\n case 'bubble-sort':\n return generateBubbleSortSteps(array);\n case 'insertion-sort':\n return generateInsertionSortSteps(array);\n case 'binary-search':\n return generateBinarySearchSteps(array, target || array[Math.floor(Math.random() * array.length)]);\n // Add other algorithms as needed\n default:\n return [];\n }\n}",[],[258,265],{"_102":273,"_95":274,"_143":275,"_145":259,"_146":132,"_147":260,"_149":150,"_104":276,"_99":31,"_152":164,"_154":277,"_155":27,"_156":-5,"_157":278,"_98":279},"ed5f5cca-3681-11f0-974e-9e149126039e","types.ts","ed5f5d88-3681-11f0-974e-9e149126039e",["D",1747859210952],"// Algorithm types\nexport type AlgorithmType = 'sorting' | 'searching' | 'graph' | 'tree';\n\nexport type AlgorithmId = \n // Sorting\n | 'bubble-sort'\n | 'insertion-sort'\n | 'selection-sort'\n | 'merge-sort'\n | 'quick-sort'\n // Searching\n | 'linear-search'\n | 'binary-search';\n\nexport interface Algorithm {\n id: AlgorithmId;\n name: string;\n type: AlgorithmType;\n description: string;\n timeComplexity: {\n best: string;\n average: string;\n worst: string;\n };\n spaceComplexity: string;\n pseudocode: string[];\n}\n\n// Visualization state\nexport interface VisualizationState {\n array: number[];\n currentStep: number;\n totalSteps: number;\n comparisons: number;\n swaps: number;\n highlightIndices: number[];\n sortedIndices: number[];\n pivotIndex?: number;\n isRunning: boolean;\n speed: number;\n}\n\n// Step data for algorithm visualization\nexport interface AlgorithmStep {\n array: number[];\n highlightIndices: number[];\n sortedIndices: number[];\n description: string;\n pivotIndex?: number;\n}\n\n// API response types\nexport interface AlgorithmListResponse {\n algorithms: Algorithm[];\n}\n\nexport interface AlgorithmStepsResponse {\n steps: AlgorithmStep[];\n algorithm: Algorithm;\n}",[],[258,274],[258],{"_102":282,"_95":283,"_143":284,"_145":-5,"_146":132,"_147":285,"_149":150,"_104":286,"_99":31,"_152":164,"_154":287,"_155":27,"_156":-5,"_157":288,"_98":289},"814b5e1c-3681-11f0-80c0-9e149126039e","01_script.tsx","814b5eda-3681-11f0-80c0-9e149126039e",2,["D",1747859029631],"// This script returns a random fun fact\n// You can run scripts manually in this view or call it from other vals.\nexport default function getRandomFact() {\n const funFacts = [\n \"Honey never spoils.\",\n \"Bananas are actually berries, but strawberries are not.\",\n \"Val Town has a citizen Juicy Bear. 🐻\",\n ];\n const fact = funFacts[Math.floor(Math.random() * funFacts.length)];\n return fact;\n}\nconsole.log(\"Fun fact:\", getRandomFact());\n",[],[283],{"_102":291,"_95":292,"_143":293,"_145":-5,"_146":132,"_147":131,"_149":150,"_104":294,"_99":285,"_152":295,"_154":296,"_155":27,"_156":-5,"_157":297,"_98":298},"9115135a-3682-11f0-a86e-9e149126039e","02_http.tsx","814e94a6-3681-11f0-80c0-9e149126039e",["D",1747859485608],"http","// This file is the HTTP entry point for our AlgoVisual app\nimport app from './backend/index.ts';\n\n// Export the Hono app's fetch handler as the default export\nexport default app.fetch;",[],[292],{"_102":300,"_95":301,"_143":302,"_145":-5,"_146":132,"_147":303,"_149":150,"_104":304,"_99":31,"_152":305,"_154":306,"_155":27,"_156":-5,"_157":307,"_98":308},"815144e4-3681-11f0-80c0-9e149126039e","03_cron.tsx","81514566-3681-11f0-80c0-9e149126039e",4,["D",1747859029670],"interval","// This cron runs on a schedule (e.g. every hour, day).\n// Configure the timer with the 🕒 icon in the top right.\n// This example just logs the current time.\nexport function scheduledHandler() {\n const timestamp = new Date().toISOString();\n console.log(`Cron val executed at: ${timestamp}`);\n return `Executed at ${timestamp}`;\n}",[],[301],{"_102":310,"_95":311,"_143":312,"_145":-5,"_146":132,"_147":313,"_149":150,"_104":314,"_99":31,"_152":315,"_154":316,"_155":27,"_156":-5,"_157":317,"_98":318},"8154c4ca-3681-11f0-80c0-9e149126039e","04_email.tsx","8154c560-3681-11f0-80c0-9e149126039e",5,["D",1747859029693],"email","// This code is triggered when an email is sent to its unique address.\n// Click \"Run\", copy and paste the email address and send an email to it.\n// This example will log the email details received.\nexport default async function emailHandler(email: Email){\n console.log(\"Email received!\", email.from, email.subject, email.text);\n for (const file of email.attachments) {\n console.log(`Filename: ${file.name}`);\n console.log(`Content Type: ${file.type}`);\n console.log(`Content: ${await file.text()}`);\n }\n}",[],[311],{"_102":320,"_95":321,"_143":322,"_145":-5,"_146":132,"_147":323,"_149":150,"_104":324,"_99":325,"_152":242,"_154":326,"_155":27,"_156":-5,"_157":327,"_98":328},"e6b7a42c-3681-11f0-ae9d-9e149126039e","README.md","814747f0-3681-11f0-80c0-9e149126039e",6,["D",1747859199783],1,"# AlgoVisual\n\nAn interactive web application for computer science students to visualize and understand algorithms and data structures.\n\n## Features\n\n- Interactive visualizations of common algorithms (sorting, searching)\n- Step-by-step execution to understand algorithm behavior\n- Time and space complexity explanations\n- Customizable inputs to test different scenarios\n- Clean, modern UI with responsive design\n\n## Project Structure\n\n- `/backend` - Hono API server\n- `/frontend` - React frontend with TailwindCSS\n- `/shared` - Shared types and utilities\n\n## Getting Started\n\nVisit the app at the HTTP endpoint URL. No installation required!\n\n## Technologies Used\n\n- TypeScript\n- React\n- Hono\n- TailwindCSS",[],[321],"files",[140,159,169,176,183,192,201,209,218,227,237,246,256,263,272,281,290,299,309,319],"counts",{"_333":31,"_334":325,"_335":31,"_336":31},"pulls","branches","forks","envVars","contents",[339,342,345,348,351,354,357,360],{"_102":141,"_95":142,"_143":144,"_145":-5,"_146":132,"_147":148,"_149":150,"_104":340,"_99":31,"_152":153,"_154":-5,"_155":27,"_156":-5,"_98":341},["D",1747859282620],[142],{"_102":170,"_95":171,"_143":172,"_145":-5,"_146":132,"_147":173,"_149":150,"_104":343,"_99":31,"_152":153,"_154":-5,"_155":27,"_156":-5,"_98":344},["D",1747859293734],[171],{"_102":257,"_95":258,"_143":259,"_145":-5,"_146":132,"_147":260,"_149":150,"_104":346,"_99":31,"_152":153,"_154":-5,"_155":27,"_156":-5,"_98":347},["D",1747859210952],[258],{"_102":282,"_95":283,"_143":284,"_145":-5,"_146":132,"_147":285,"_149":150,"_104":349,"_99":31,"_152":164,"_154":287,"_155":27,"_156":-5,"_98":350},["D",1747859029631],[283],{"_102":291,"_95":292,"_143":293,"_145":-5,"_146":132,"_147":131,"_149":150,"_104":352,"_99":285,"_152":295,"_154":296,"_155":27,"_156":-5,"_98":353},["D",1747859485608],[292],{"_102":300,"_95":301,"_143":302,"_145":-5,"_146":132,"_147":303,"_149":150,"_104":355,"_99":31,"_152":305,"_154":306,"_155":27,"_156":-5,"_98":356},["D",1747859029670],[301],{"_102":310,"_95":311,"_143":312,"_145":-5,"_146":132,"_147":313,"_149":150,"_104":358,"_99":31,"_152":315,"_154":316,"_155":27,"_156":-5,"_98":359},["D",1747859029693],[311],{"_102":320,"_95":321,"_143":322,"_145":-5,"_146":132,"_147":323,"_149":150,"_104":361,"_99":325,"_152":242,"_154":326,"_155":27,"_156":-5,"_98":362},["D",1747859199783],[321],"upstream","emptyEnvVars","isNew","routes/_app.x.$handle.$name.branch.$branch.history",{"_93":94,"_95":96,"_97":41,"_100":368,"_372":373,"_489":31,"_490":27},{"_102":103,"_95":96,"_104":369,"_106":-5,"_107":27,"_108":109,"_110":-5,"_111":-5,"_12":112,"_113":-5,"_114":27,"_115":-5,"_116":31,"_117":118,"_119":118,"_120":121,"_122":121,"_123":121,"_124":118,"_125":27,"_21":370,"_129":371},["D",1747859029594],{"_93":94,"_127":128},{"_99":131,"_95":41,"_102":132,"_133":103,"_134":-5,"_135":-5,"_136":-5,"_137":-5},"history",[374,379,387,392,397,402,407,412,420,425,433,441,446,454,459,464,469,477,482],{"_143":293,"_99":131,"_104":375,"_146":132,"_329":376},["D",1747859485608],[377],{"_102":291,"_146":132,"_143":293,"_95":292,"_154":296,"_152":295,"_99":285,"_145":-5,"_104":375,"_147":131,"_156":-5,"_149":150,"_155":27,"_98":378},[292],{"_143":293,"_99":380,"_104":381,"_146":132,"_329":382},18,["D",1747859466903],[383],{"_102":384,"_146":132,"_143":293,"_95":292,"_154":385,"_152":295,"_99":325,"_145":-5,"_104":381,"_147":380,"_156":-5,"_149":27,"_155":27,"_98":386},"85ee467c-3682-11f0-917b-9e149126039e","// This file is the HTTP entry point for our AlgoVisual app\nimport app from './backend/index';\n\n// Export the Hono app's fetch handler as the default export\nexport default app.fetch;",[292],{"_143":212,"_99":213,"_104":388,"_146":132,"_329":389},["D",1747859460639],[390],{"_102":210,"_146":132,"_143":212,"_95":211,"_154":215,"_152":164,"_99":31,"_145":179,"_104":388,"_147":213,"_156":-5,"_149":150,"_155":27,"_98":391},[171,178,211],{"_143":186,"_99":187,"_104":393,"_146":132,"_329":394},["D",1747859429711],[395],{"_102":184,"_146":132,"_143":186,"_95":185,"_154":189,"_152":164,"_99":31,"_145":179,"_104":393,"_147":187,"_156":-5,"_149":150,"_155":27,"_98":396},[171,178,185],{"_143":221,"_99":222,"_104":398,"_146":132,"_329":399},["D",1747859411006],[400],{"_102":219,"_146":132,"_143":221,"_95":220,"_154":224,"_152":164,"_99":31,"_145":179,"_104":398,"_147":222,"_156":-5,"_149":150,"_155":27,"_98":401},[171,178,220],{"_143":230,"_99":231,"_104":403,"_146":132,"_329":404},["D",1747859377170],[405],{"_102":228,"_146":132,"_143":230,"_95":229,"_154":233,"_152":164,"_99":31,"_145":179,"_104":403,"_147":231,"_156":-5,"_149":150,"_155":27,"_98":406},[171,178,229],{"_143":195,"_99":196,"_104":408,"_146":132,"_329":409},["D",1747859352844],[410],{"_102":193,"_146":132,"_143":195,"_95":194,"_154":198,"_152":164,"_99":31,"_145":179,"_104":408,"_147":196,"_156":-5,"_149":150,"_155":27,"_98":411},[171,178,194],{"_143":179,"_99":180,"_104":413,"_146":132,"_329":414},["D",1747859334656],[415,417],{"_102":177,"_146":132,"_143":179,"_95":178,"_154":-5,"_152":153,"_99":31,"_145":172,"_104":413,"_147":180,"_156":-5,"_149":150,"_155":27,"_98":416},[171,178],{"_102":202,"_146":132,"_143":204,"_95":203,"_154":206,"_152":164,"_99":31,"_145":179,"_104":418,"_147":180,"_156":-5,"_149":150,"_155":27,"_98":419},["D",1747859334656],[171,178,203],{"_143":249,"_99":250,"_104":421,"_146":132,"_329":422},["D",1747859300078],[423],{"_102":247,"_146":132,"_143":249,"_95":248,"_154":252,"_152":164,"_99":31,"_145":172,"_104":421,"_147":250,"_156":-5,"_149":150,"_155":27,"_98":424},[171,248],{"_143":172,"_99":173,"_104":426,"_146":132,"_329":427},["D",1747859293734],[428,430],{"_102":170,"_146":132,"_143":172,"_95":171,"_154":-5,"_152":153,"_99":31,"_145":-5,"_104":426,"_147":173,"_156":-5,"_149":150,"_155":27,"_98":429},[171],{"_102":238,"_146":132,"_143":240,"_95":239,"_154":243,"_152":242,"_99":31,"_145":172,"_104":431,"_147":173,"_156":-5,"_149":150,"_155":27,"_98":432},["D",1747859293734],[171,239],{"_143":144,"_99":148,"_104":434,"_146":132,"_329":435},["D",1747859282620],[436,438],{"_102":141,"_146":132,"_143":144,"_95":142,"_154":-5,"_152":153,"_99":31,"_145":-5,"_104":434,"_147":148,"_156":-5,"_149":150,"_155":27,"_98":437},[142],{"_102":160,"_146":132,"_143":162,"_95":161,"_154":165,"_152":164,"_99":31,"_145":144,"_104":439,"_147":148,"_156":-5,"_149":150,"_155":27,"_98":440},["D",1747859282620],[142,161],{"_143":266,"_99":267,"_104":442,"_146":132,"_329":443},["D",1747859263665],[444],{"_102":264,"_146":132,"_143":266,"_95":265,"_154":269,"_152":164,"_99":31,"_145":259,"_104":442,"_147":267,"_156":-5,"_149":150,"_155":27,"_98":445},[258,265],{"_143":259,"_99":260,"_104":447,"_146":132,"_329":448},["D",1747859210952],[449,451],{"_102":257,"_146":132,"_143":259,"_95":258,"_154":-5,"_152":153,"_99":31,"_145":-5,"_104":447,"_147":260,"_156":-5,"_149":150,"_155":27,"_98":450},[258],{"_102":273,"_146":132,"_143":275,"_95":274,"_154":277,"_152":164,"_99":31,"_145":259,"_104":452,"_147":260,"_156":-5,"_149":150,"_155":27,"_98":453},["D",1747859210952],[258,274],{"_143":322,"_99":323,"_104":455,"_146":132,"_329":456},["D",1747859199783],[457],{"_102":320,"_146":132,"_143":322,"_95":321,"_154":326,"_152":242,"_99":325,"_145":-5,"_104":455,"_147":323,"_156":-5,"_149":150,"_155":27,"_98":458},[321],{"_143":312,"_99":313,"_104":460,"_146":132,"_329":461},["D",1747859029693],[462],{"_102":310,"_146":132,"_143":312,"_95":311,"_154":316,"_152":315,"_99":31,"_145":-5,"_104":460,"_147":313,"_156":-5,"_149":150,"_155":27,"_98":463},[311],{"_143":302,"_99":303,"_104":465,"_146":132,"_329":466},["D",1747859029670],[467],{"_102":300,"_146":132,"_143":302,"_95":301,"_154":306,"_152":305,"_99":31,"_145":-5,"_104":465,"_147":303,"_156":-5,"_149":150,"_155":27,"_98":468},[301],{"_143":293,"_99":470,"_104":471,"_146":132,"_329":472},3,["D",1747859029653],[473],{"_102":474,"_146":132,"_143":293,"_95":292,"_154":475,"_152":295,"_99":31,"_145":-5,"_104":471,"_147":470,"_156":-5,"_149":27,"_155":27,"_98":476},"814e941a-3681-11f0-80c0-9e149126039e","// This code responds to HTTP web requests.\n// Access it via its public URL (you can also pick a nicer subdomain).\n// Try adding ?name=YourName to the URL!\nexport default function httpHandler(req: Request): Response {\n const url = new URL(req.url);\n const name = url.searchParams.get(\"name\") || \"Friend\";\n console.log(`Greeted ${name} via HTTP`);\n return new Response(`Hello, ${name}! Welcome to Val Town.`);\n}",[292],{"_143":284,"_99":285,"_104":478,"_146":132,"_329":479},["D",1747859029631],[480],{"_102":282,"_146":132,"_143":284,"_95":283,"_154":287,"_152":164,"_99":31,"_145":-5,"_104":478,"_147":285,"_156":-5,"_149":150,"_155":27,"_98":481},[283],{"_143":322,"_99":325,"_104":483,"_146":132,"_329":484},["D",1747859029604],[485],{"_102":486,"_146":132,"_143":322,"_95":321,"_154":487,"_152":242,"_99":31,"_145":-5,"_104":483,"_147":325,"_156":-5,"_149":27,"_155":27,"_98":488},"8147473c-3681-11f0-80c0-9e149126039e","# Welcome to Your First Project! 👋\n\nExplore our examples on the left:\n\n* **01_script.tsx**: A simple script that returns a fun fact.\n* **02_http.tsx**: An HTTP endpoint that greets you.\n* **03_cron.tsx**: A cron that logs the time based on a schedule.\n* **04_email.tsx**: An email handler that processes incoming email details.\n\nFeel free to edit these examples or add new files to your project.\n\nFor inspiration, check out our [Docs](https://docs.val.town/), [Templates](https://www.val.town/explore/use-cases), [Showcase](https://www.val.town/explore/community-showcase) and [Discord](https://discord.val.town/)!\n\nStay as long as you'd like in this project, or head to your main [dashboard](/dashboard) to keep exploring the rest of Val Town.",[321],"page","hasNext","routes/_app","actionData","errors"]

History