${algorithm.name}

${algorithm.description}

\n `).join('');\n \n // Add click listeners\n algorithmGrid.addEventListener('click', (e) => {\n const card = (e.target as Element).closest('.algorithm-card') as HTMLElement;\n if (card) {\n const algorithmId = card.dataset.algorithm;\n if (algorithmId) selectAlgorithm(algorithmId);\n }\n });\n };\n\n const selectAlgorithm = (algorithmId: string) => {\n const algorithm = algorithms.find(a => a.id === algorithmId);\n if (!algorithm) return;\n \n // Update UI\n document.querySelectorAll('.algorithm-card').forEach(card => {\n card.classList.remove('active');\n });\n document.querySelector(`[data-algorithm=\"${algorithmId}\"]`)?.classList.add('active');\n \n // Set default parameters\n const defaultParams: Record = {};\n Object.entries(algorithm.parameters).forEach(([key, config]: [string, any]) => {\n defaultParams[key] = config.default;\n });\n \n currentState.algorithm = algorithmId;\n currentState.parameters = defaultParams;\n \n renderParameterControls(algorithm);\n initializeRenderer();\n };\n\n const renderParameterControls = (algorithm: Algorithm) => {\n if (!parameterControls) return;\n \n parameterControls.innerHTML = Object.entries(algorithm.parameters).map(([key, config]: [string, any]) => `\n

\n ${key.charAt(0).toUpperCase() + key.slice(1)}\n ${config.default}\n

\n \n

\n `).join('');\n \n // Add parameter change listeners\n Object.keys(algorithm.parameters).forEach(key => {\n const slider = document.getElementById(`param-${key}`) as HTMLInputElement;\n const valueDisplay = document.getElementById(`value-${key}`);\n \n if (slider && valueDisplay) {\n slider.addEventListener('input', () => {\n const value = parseFloat(slider.value);\n valueDisplay.textContent = value.toFixed(1);\n currentState.parameters[key] = value;\n \n if (currentRenderer && currentRenderer.updateParameters) {\n currentRenderer.updateParameters(currentState.parameters);\n }\n });\n }\n });\n };\n\n const initializeRenderer = () => {\n if (!canvas) return;\n \n // Clean up previous renderer\n if (currentRenderer && currentRenderer.destroy) {\n currentRenderer.destroy();\n }\n \n if (animationId) {\n cancelAnimationFrame(animationId);\n }\n \n // Resize canvas\n const container = canvas.parentElement;\n if (container) {\n canvas.width = container.clientWidth;\n canvas.height = container.clientHeight;\n }\n \n // Create new renderer\n switch (currentState.algorithm) {\n case 'particle-fill':\n currentRenderer = new ParticleSystem(canvas, currentState.parameters);\n break;\n case 'wave-propagation':\n currentRenderer = new WaveRenderer(canvas, currentState.parameters);\n break;\n case 'neural-network':\n currentRenderer = new NeuralNetwork(canvas, currentState.parameters);\n break;\n case 'fractal-pattern':\n currentRenderer = new FractalRenderer(canvas, currentState.parameters);\n break;\n case 'led-matrix':\n currentRenderer = new LEDMatrix(canvas, currentState.parameters);\n break;\n case 'holographic':\n currentRenderer = new HolographicRenderer(canvas, currentState.parameters);\n break;\n case 'quantum-field':\n currentRenderer = new QuantumField(canvas, currentState.parameters);\n break;\n case 'gradient-flow':\n currentRenderer = new GradientFlow(canvas, currentState.parameters);\n break;\n default:\n currentRenderer = new ParticleSystem(canvas, currentState.parameters);\n }\n \n startAnimation();\n };\n\n const startAnimation = () => {\n const animate = (timestamp: number) => {\n if (currentRenderer && canvas) {\n currentRenderer.render(currentState.text, timestamp);\n }\n animationId = requestAnimationFrame(animate);\n };\n \n animationId = requestAnimationFrame(animate);\n };\n\n // Event listeners\n if (textInput) {\n textInput.addEventListener('input', (e) => {\n currentState.text = (e.target as HTMLInputElement).value || 'FUTURE';\n });\n }\n\n if (exportBtn) {\n exportBtn.addEventListener('click', () => {\n const link = document.createElement('a');\n link.download = `textfill-${currentState.algorithm}-${Date.now()}.png`;\n link.href = canvas.toDataURL();\n link.click();\n });\n }\n\n if (resetBtn) {\n resetBtn.addEventListener('click', () => {\n if (currentRenderer && currentRenderer.reset) {\n currentRenderer.reset();\n }\n });\n }\n\n if (fullscreenBtn) {\n fullscreenBtn.addEventListener('click', () => {\n if (document.fullscreenElement) {\n document.exitFullscreen();\n } else {\n document.documentElement.requestFullscreen();\n }\n });\n }\n\n // Initialize\n loadAlgorithms();\n \n // Handle window resize\n window.addEventListener('resize', () => {\n if (canvas && canvas.parentElement) {\n canvas.width = canvas.parentElement.clientWidth;\n canvas.height = canvas.parentElement.clientHeight;\n }\n });\n};\n\n// Start the application when DOM is loaded\nif (document.readyState === 'loading') {\n document.addEventListener('DOMContentLoaded', initApp);\n} else {\n initApp();\n}\n\nexport default App;","deleted","label",[168,169,149],"frontend","components","permalink","https://www.val.town/x/Gj64/photobackground/code/frontend/components/App.tsx","extension","actionData","errors"]