Enhance FM synthesis + cleaning code architecture

src/hooks/useTileGrid.ts

@@ -0,0 +1,66 @@
+import { useState, useCallback } from 'react'
+import { useStore } from '@nanostores/react'
+import type { TileState } from '../types/tiles'
+import { synthesisMode, setSynthesisMode, type SynthesisMode } from '../stores/synthesisMode'
+import { engineSettings } from '../stores/settings'
+import { generateTileGrid, generateRandomFormula } from '../utils/bytebeatFormulas'
+import { generateFMTileGrid, generateRandomFMPatch, createFMTileState } from '../utils/fmPatches'
+import { createTileStateFromCurrent } from '../utils/tileState'
+import { TILE_GRID } from '../constants/defaults'
+
+export function useTileGrid() {
+  const mode = useStore(synthesisMode)
+  const engineValues = useStore(engineSettings)
+
+  const [tiles, setTiles] = useState<TileState[][]>(() =>
+    mode === 'fm'
+      ? generateFMTileGrid(TILE_GRID.SIZE, TILE_GRID.COLUMNS, engineValues.complexity)
+      : generateTileGrid(TILE_GRID.SIZE, TILE_GRID.COLUMNS, engineValues.complexity)
+  )
+
+  const regenerateAll = useCallback(() => {
+    if (mode === 'fm') {
+      setTiles(generateFMTileGrid(TILE_GRID.SIZE, TILE_GRID.COLUMNS, engineValues.complexity))
+    } else {
+      setTiles(generateTileGrid(TILE_GRID.SIZE, TILE_GRID.COLUMNS, engineValues.complexity))
+    }
+  }, [mode, engineValues.complexity])
+
+  const regenerateTile = useCallback((row: number, col: number) => {
+    let newTile: TileState
+
+    if (mode === 'fm') {
+      const patch = generateRandomFMPatch(engineValues.complexity)
+      newTile = createFMTileState(patch)
+    } else {
+      const newFormula = generateRandomFormula(engineValues.complexity)
+      newTile = createTileStateFromCurrent(newFormula)
+    }
+
+    setTiles(prevTiles => {
+      const newTiles = [...prevTiles]
+      newTiles[row] = [...newTiles[row]]
+      newTiles[row][col] = newTile
+      return newTiles
+    })
+  }, [mode, engineValues.complexity])
+
+  const switchMode = useCallback((newMode: SynthesisMode) => {
+    setSynthesisMode(newMode)
+
+    if (newMode === 'fm') {
+      setTiles(generateFMTileGrid(TILE_GRID.SIZE, TILE_GRID.COLUMNS, engineValues.complexity))
+    } else {
+      setTiles(generateTileGrid(TILE_GRID.SIZE, TILE_GRID.COLUMNS, engineValues.complexity))
+    }
+  }, [engineValues.complexity])
+
+  return {
+    tiles,
+    setTiles,
+    mode,
+    regenerateAll,
+    regenerateTile,
+    switchMode
+  }
+}