before bugfixing

src/App.tsx

@@ -2,7 +2,7 @@ import { useState, useRef, useEffect } from 'react'
 import { useStore } from '@nanostores/react'
 import { PlaybackManager } from './services/PlaybackManager'
 import { DownloadService } from './services/DownloadService'
-import { generateFormulaGrid } from './utils/bytebeatFormulas'
+import { generateFormulaGrid, generateRandomFormula } from './utils/bytebeatFormulas'
 import { BytebeatTile } from './components/BytebeatTile'
 import { EffectsBar } from './components/EffectsBar'
 import { EngineControls } from './components/EngineControls'
@@ -18,6 +18,7 @@ function App() {
   )
   const [playing, setPlaying] = useState<string | null>(null)
   const [queued, setQueued] = useState<string | null>(null)
+  const [regenerating, setRegenerating] = useState<string | null>(null)
   const [playbackPosition, setPlaybackPosition] = useState<number>(0)
   const [downloading, setDownloading] = useState(false)
   const playbackManagerRef = useRef<PlaybackManager | null>(null)
@@ -136,6 +137,26 @@ function App() {
     downloadServiceRef.current.downloadFormula(formula, filename, { duration: 10, bitDepth: 8 })
   }
 
+  const handleRegenerate = (row: number, col: number) => {
+    const id = `${row}-${col}`
+    const newFormula = generateRandomFormula(engineValues.complexity)
+
+    setFormulas(prevFormulas => {
+      const newFormulas = [...prevFormulas]
+      newFormulas[row] = [...newFormulas[row]]
+      newFormulas[row][col] = newFormula
+      return newFormulas
+    })
+
+    if (playing === id && playbackManagerRef.current) {
+      setRegenerating(id)
+      playbackManagerRef.current.scheduleNextTrack(() => {
+        playFormula(newFormula, id)
+        setRegenerating(null)
+      })
+    }
+  }
+
   return (
     <div className="w-screen h-screen flex flex-col bg-black overflow-hidden">
       <header className="bg-black border-b-2 border-white px-6 py-3">
@@ -172,10 +193,12 @@ function App() {
                 col={j}
                 isPlaying={playing === id}
                 isQueued={queued === id}
+                isRegenerating={regenerating === id}
                 playbackPosition={playing === id ? playbackPosition : 0}
                 onPlay={handleTileClick}
                 onDoubleClick={handleTileDoubleClick}
                 onDownload={handleDownloadFormula}
+                onRegenerate={handleRegenerate}
               />
             )
           })