749 lines
26 KiB
TypeScript
749 lines
26 KiB
TypeScript
import { useState, useRef, useEffect } from 'react'
|
|
import { useStore } from '@nanostores/react'
|
|
import { Square, Archive, Dices, Sparkles } from 'lucide-react'
|
|
import { PlaybackManager } from './services/PlaybackManager'
|
|
import { DownloadService } from './services/DownloadService'
|
|
import { generateTileGrid, generateRandomFormula } from './utils/bytebeatFormulas'
|
|
import { BytebeatTile } from './components/BytebeatTile'
|
|
import { EffectsBar } from './components/EffectsBar'
|
|
import { EngineControls } from './components/EngineControls'
|
|
import { FormulaEditor } from './components/FormulaEditor'
|
|
import { LFOPanel } from './components/LFOPanel'
|
|
import { AudioContextWarning } from './components/AudioContextWarning'
|
|
import { HelpModal } from './components/HelpModal'
|
|
import { getSampleRateFromIndex } from './config/effects'
|
|
import { engineSettings, effectSettings, lfoSettings, type LFOConfig } from './stores/settings'
|
|
import { exitMappingMode } from './stores/mappingMode'
|
|
import { useKeyboardShortcuts } from './hooks/useKeyboardShortcuts'
|
|
import { useTileParams } from './hooks/useTileParams'
|
|
import type { TileState } from './types/tiles'
|
|
import { createTileStateFromCurrent, loadTileParams, randomizeTileParams } from './utils/tileState'
|
|
import { DEFAULT_VARIABLES, PLAYBACK_ID, TILE_GRID, DEFAULT_DOWNLOAD_OPTIONS, LOOP_DURATION } from './constants/defaults'
|
|
import { getTileId, getTileFromGrid, type FocusedTile } from './utils/tileHelpers'
|
|
|
|
function App() {
|
|
const engineValues = useStore(engineSettings)
|
|
const effectValues = useStore(effectSettings)
|
|
|
|
const [tiles, setTiles] = useState<TileState[][]>(() =>
|
|
generateTileGrid(TILE_GRID.SIZE, TILE_GRID.COLUMNS, engineValues.complexity)
|
|
)
|
|
const [playing, setPlaying] = useState<string | null>(null)
|
|
const [queued, setQueued] = useState<string | null>(null)
|
|
const [playbackPosition, setPlaybackPosition] = useState<number>(0)
|
|
const [downloading, setDownloading] = useState(false)
|
|
const [focusedTile, setFocusedTile] = useState<FocusedTile>({ row: 0, col: 0 })
|
|
const [customTile, setCustomTile] = useState<TileState>(() => createTileStateFromCurrent('t*(8&t>>9)'))
|
|
const [showWarning, setShowWarning] = useState(true)
|
|
const [showHelp, setShowHelp] = useState(false)
|
|
const [mobileHeaderTab, setMobileHeaderTab] = useState<'global' | 'options' | 'modulate'>('global')
|
|
const playbackManagerRef = useRef<PlaybackManager | null>(null)
|
|
const downloadServiceRef = useRef<DownloadService>(new DownloadService())
|
|
const switchTimerRef = useRef<number | null>(null)
|
|
|
|
const { saveCurrentTileParams } = useTileParams({ tiles, setTiles, customTile, setCustomTile, focusedTile })
|
|
|
|
useEffect(() => {
|
|
if (playbackManagerRef.current) {
|
|
playbackManagerRef.current.setPlaybackPositionCallback(setPlaybackPosition)
|
|
}
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
effectSettings.setKey('masterVolume', engineValues.masterVolume)
|
|
}, [engineValues.masterVolume])
|
|
|
|
const clearSwitchTimer = () => {
|
|
if (switchTimerRef.current !== null) {
|
|
clearTimeout(switchTimerRef.current)
|
|
switchTimerRef.current = null
|
|
}
|
|
}
|
|
|
|
const startSwitchTimer = (queuedId: string) => {
|
|
clearSwitchTimer()
|
|
|
|
switchTimerRef.current = window.setTimeout(() => {
|
|
const [rowStr, colStr] = queuedId.split('-')
|
|
const row = parseInt(rowStr, 10)
|
|
const col = parseInt(colStr, 10)
|
|
const tile = getTileFromGrid(tiles, row, col)
|
|
|
|
if (tile) {
|
|
playFormula(tile.formula, queuedId)
|
|
}
|
|
}, engineValues.loopCount * 1000)
|
|
}
|
|
|
|
useEffect(() => {
|
|
return () => clearSwitchTimer()
|
|
}, [])
|
|
|
|
const handleRandom = () => {
|
|
clearSwitchTimer()
|
|
setTiles(generateTileGrid(TILE_GRID.SIZE, TILE_GRID.COLUMNS, engineValues.complexity))
|
|
setQueued(null)
|
|
}
|
|
|
|
const handleRandomizeAllParams = () => {
|
|
clearSwitchTimer()
|
|
let newRandomized: TileState | null = null
|
|
|
|
if (playing === PLAYBACK_ID.CUSTOM) {
|
|
setCustomTile(prev => {
|
|
const randomized = randomizeTileParams(prev)
|
|
newRandomized = randomized
|
|
return randomized
|
|
})
|
|
} else {
|
|
setTiles(prevTiles => {
|
|
const newTiles = prevTiles.map((row, rowIdx) =>
|
|
row.map((tile, colIdx) => {
|
|
const randomized = randomizeTileParams(tile)
|
|
if (playing && focusedTile !== 'custom') {
|
|
const tileId = getTileId(focusedTile.row, focusedTile.col)
|
|
if (playing === tileId && rowIdx === focusedTile.row && colIdx === focusedTile.col) {
|
|
newRandomized = randomized
|
|
}
|
|
}
|
|
return randomized
|
|
})
|
|
)
|
|
return newTiles
|
|
})
|
|
|
|
setCustomTile(prev => randomizeTileParams(prev))
|
|
}
|
|
|
|
if (newRandomized && playbackManagerRef.current) {
|
|
const params = newRandomized as TileState
|
|
loadTileParams(params)
|
|
|
|
playbackManagerRef.current.setEffects(params.effectParams)
|
|
playbackManagerRef.current.setVariables(
|
|
params.engineParams.a ?? DEFAULT_VARIABLES.a,
|
|
params.engineParams.b ?? DEFAULT_VARIABLES.b,
|
|
params.engineParams.c ?? DEFAULT_VARIABLES.c,
|
|
params.engineParams.d ?? DEFAULT_VARIABLES.d
|
|
)
|
|
playbackManagerRef.current.setPitch(params.engineParams.pitch ?? 1.0)
|
|
|
|
if (params.lfoConfigs) {
|
|
playbackManagerRef.current.setLFOConfig(0, params.lfoConfigs.lfo1)
|
|
playbackManagerRef.current.setLFOConfig(1, params.lfoConfigs.lfo2)
|
|
playbackManagerRef.current.setLFOConfig(2, params.lfoConfigs.lfo3)
|
|
playbackManagerRef.current.setLFOConfig(3, params.lfoConfigs.lfo4)
|
|
}
|
|
}
|
|
|
|
setQueued(null)
|
|
}
|
|
|
|
const playFormula = async (formula: string, id: string) => {
|
|
const sampleRate = getSampleRateFromIndex(engineValues.sampleRate)
|
|
const duration = LOOP_DURATION
|
|
|
|
if (!playbackManagerRef.current) {
|
|
playbackManagerRef.current = new PlaybackManager({ sampleRate, duration })
|
|
} else {
|
|
await playbackManagerRef.current.updateOptions({ sampleRate, duration })
|
|
}
|
|
|
|
playbackManagerRef.current.stop()
|
|
playbackManagerRef.current.setEffects(effectValues)
|
|
playbackManagerRef.current.setVariables(
|
|
engineValues.a ?? DEFAULT_VARIABLES.a,
|
|
engineValues.b ?? DEFAULT_VARIABLES.b,
|
|
engineValues.c ?? DEFAULT_VARIABLES.c,
|
|
engineValues.d ?? DEFAULT_VARIABLES.d
|
|
)
|
|
playbackManagerRef.current.setPitch(engineValues.pitch ?? 1.0)
|
|
|
|
await playbackManagerRef.current.play(formula)
|
|
setPlaying(id)
|
|
setQueued(null)
|
|
return true
|
|
}
|
|
|
|
const handleTileClick = (_formula: string, row: number, col: number, isDoubleClick: boolean = false) => {
|
|
const id = getTileId(row, col)
|
|
const tile = getTileFromGrid(tiles, row, col)
|
|
|
|
if (!tile) return
|
|
|
|
if (focusedTile === 'custom' || (focusedTile.row !== row || focusedTile.col !== col)) {
|
|
saveCurrentTileParams()
|
|
}
|
|
|
|
if (tile) {
|
|
loadTileParams(tile)
|
|
}
|
|
setFocusedTile({ row, col })
|
|
|
|
if (playing === id) {
|
|
handleStop()
|
|
return
|
|
}
|
|
|
|
if (isDoubleClick || playing === null) {
|
|
clearSwitchTimer()
|
|
playFormula(tile.formula, id)
|
|
} else {
|
|
setQueued(id)
|
|
startSwitchTimer(id)
|
|
}
|
|
}
|
|
|
|
const handleTileDoubleClick = (formula: string, row: number, col: number) => {
|
|
handleTileClick(formula, row, col, true)
|
|
}
|
|
|
|
|
|
const handleEngineChange = async (parameterId: string, value: number) => {
|
|
engineSettings.setKey(parameterId as keyof typeof engineValues, value)
|
|
saveCurrentTileParams()
|
|
|
|
if (parameterId === 'masterVolume' && playbackManagerRef.current) {
|
|
playbackManagerRef.current.setEffects({ ...effectValues, masterVolume: value })
|
|
}
|
|
|
|
if (parameterId === 'pitch' && playbackManagerRef.current && playing) {
|
|
playbackManagerRef.current.setPitch(value)
|
|
}
|
|
|
|
if (['a', 'b', 'c', 'd'].includes(parameterId) && playbackManagerRef.current && playing) {
|
|
const updatedValues = { ...engineValues, [parameterId]: value }
|
|
playbackManagerRef.current.setVariables(
|
|
updatedValues.a ?? DEFAULT_VARIABLES.a,
|
|
updatedValues.b ?? DEFAULT_VARIABLES.b,
|
|
updatedValues.c ?? DEFAULT_VARIABLES.c,
|
|
updatedValues.d ?? DEFAULT_VARIABLES.d
|
|
)
|
|
}
|
|
}
|
|
|
|
const handleEffectChange = (parameterId: string, value: number | boolean | string) => {
|
|
effectSettings.setKey(parameterId as keyof typeof effectValues, value as never)
|
|
saveCurrentTileParams()
|
|
|
|
if (playbackManagerRef.current) {
|
|
playbackManagerRef.current.setEffects(effectValues)
|
|
}
|
|
}
|
|
|
|
const handleLFOChange = (lfoIndex: number, config: LFOConfig) => {
|
|
if (playbackManagerRef.current) {
|
|
playbackManagerRef.current.setLFOConfig(lfoIndex, config)
|
|
}
|
|
}
|
|
|
|
const handleParameterMapClick = (paramId: string, lfoIndex: number) => {
|
|
const lfoKey = `lfo${lfoIndex + 1}` as 'lfo1' | 'lfo2' | 'lfo3' | 'lfo4'
|
|
const currentLFO = lfoSettings.get()[lfoKey]
|
|
|
|
const existingMappingIndex = currentLFO.mappings.findIndex(m => m.targetParam === paramId)
|
|
|
|
let updatedMappings
|
|
if (existingMappingIndex >= 0) {
|
|
updatedMappings = currentLFO.mappings.filter((_, i) => i !== existingMappingIndex)
|
|
} else {
|
|
updatedMappings = [...currentLFO.mappings, { targetParam: paramId, depth: 50 }]
|
|
}
|
|
|
|
const updatedLFO = { ...currentLFO, mappings: updatedMappings }
|
|
lfoSettings.setKey(lfoKey, updatedLFO)
|
|
|
|
if (playbackManagerRef.current) {
|
|
playbackManagerRef.current.setLFOConfig(lfoIndex, updatedLFO)
|
|
}
|
|
|
|
saveCurrentTileParams()
|
|
|
|
if (updatedMappings.length === 0 || existingMappingIndex >= 0) {
|
|
exitMappingMode()
|
|
}
|
|
}
|
|
|
|
const handleUpdateMappingDepth = (lfoIndex: number, paramId: string, depth: number) => {
|
|
const lfoKey = `lfo${lfoIndex + 1}` as 'lfo1' | 'lfo2' | 'lfo3' | 'lfo4'
|
|
const currentLFO = lfoSettings.get()[lfoKey]
|
|
|
|
const updatedMappings = currentLFO.mappings.map(m =>
|
|
m.targetParam === paramId ? { ...m, depth } : m
|
|
)
|
|
|
|
const updatedLFO = { ...currentLFO, mappings: updatedMappings }
|
|
lfoSettings.setKey(lfoKey, updatedLFO)
|
|
|
|
if (playbackManagerRef.current) {
|
|
playbackManagerRef.current.setLFOConfig(lfoIndex, updatedLFO)
|
|
}
|
|
|
|
saveCurrentTileParams()
|
|
}
|
|
|
|
const handleRemoveMapping = (lfoIndex: number, paramId: string) => {
|
|
const lfoKey = `lfo${lfoIndex + 1}` as 'lfo1' | 'lfo2' | 'lfo3' | 'lfo4'
|
|
const currentLFO = lfoSettings.get()[lfoKey]
|
|
|
|
const updatedMappings = currentLFO.mappings.filter(m => m.targetParam !== paramId)
|
|
|
|
const updatedLFO = { ...currentLFO, mappings: updatedMappings }
|
|
lfoSettings.setKey(lfoKey, updatedLFO)
|
|
|
|
if (playbackManagerRef.current) {
|
|
playbackManagerRef.current.setLFOConfig(lfoIndex, updatedLFO)
|
|
}
|
|
|
|
saveCurrentTileParams()
|
|
}
|
|
|
|
const getMappedLFOs = (paramId: string): number[] => {
|
|
const lfos = lfoSettings.get()
|
|
const mapped: number[] = []
|
|
|
|
Object.entries(lfos).forEach(([, lfo], index) => {
|
|
if (lfo.mappings.some((m: { targetParam: string }) => m.targetParam === paramId)) {
|
|
mapped.push(index)
|
|
}
|
|
})
|
|
|
|
return mapped
|
|
}
|
|
|
|
const handleDownloadAll = async () => {
|
|
setDownloading(true)
|
|
const formulas = tiles.map(row => row.map(tile => tile.formula))
|
|
await downloadServiceRef.current.downloadAll(formulas, {
|
|
duration: DEFAULT_DOWNLOAD_OPTIONS.DURATION,
|
|
bitDepth: DEFAULT_DOWNLOAD_OPTIONS.BIT_DEPTH
|
|
})
|
|
setDownloading(false)
|
|
}
|
|
|
|
const handleDownloadFormula = (formula: string, filename: string) => {
|
|
downloadServiceRef.current.downloadFormula(formula, filename, {
|
|
duration: DEFAULT_DOWNLOAD_OPTIONS.DURATION,
|
|
bitDepth: DEFAULT_DOWNLOAD_OPTIONS.BIT_DEPTH
|
|
})
|
|
}
|
|
|
|
const handleRegenerate = (row: number, col: number) => {
|
|
const newFormula = generateRandomFormula(engineValues.complexity)
|
|
const newTile = createTileStateFromCurrent(newFormula)
|
|
|
|
setTiles(prevTiles => {
|
|
const newTiles = [...prevTiles]
|
|
newTiles[row] = [...newTiles[row]]
|
|
newTiles[row][col] = newTile
|
|
return newTiles
|
|
})
|
|
}
|
|
|
|
const handleStop = () => {
|
|
clearSwitchTimer()
|
|
playbackManagerRef.current?.stop()
|
|
setPlaying(null)
|
|
setQueued(null)
|
|
setPlaybackPosition(0)
|
|
}
|
|
|
|
const handleCustomEvaluate = (formula: string) => {
|
|
if (focusedTile !== 'custom') {
|
|
saveCurrentTileParams()
|
|
loadTileParams(customTile)
|
|
}
|
|
|
|
setFocusedTile('custom')
|
|
setCustomTile({ ...customTile, formula })
|
|
playFormula(formula, PLAYBACK_ID.CUSTOM)
|
|
}
|
|
|
|
const handleCustomStop = () => {
|
|
if (playing === PLAYBACK_ID.CUSTOM) {
|
|
handleStop()
|
|
}
|
|
}
|
|
|
|
const handleCustomRandom = () => {
|
|
return generateRandomFormula(engineValues.complexity)
|
|
}
|
|
|
|
const moveFocus = (direction: 'up' | 'down' | 'left' | 'right', step: number = 1) => {
|
|
saveCurrentTileParams()
|
|
|
|
setFocusedTile(prev => {
|
|
if (prev === 'custom') return prev
|
|
|
|
let { row, col } = prev
|
|
const maxRow = tiles.length - 1
|
|
const maxCol = (tiles[row]?.length || 1) - 1
|
|
|
|
switch (direction) {
|
|
case 'up':
|
|
row = Math.max(0, row - step)
|
|
break
|
|
case 'down':
|
|
row = Math.min(maxRow, row + step)
|
|
break
|
|
case 'left':
|
|
col = Math.max(0, col - step)
|
|
break
|
|
case 'right':
|
|
col = Math.min(maxCol, col + step)
|
|
break
|
|
}
|
|
|
|
const newTile = tiles[row]?.[col]
|
|
if (newTile) {
|
|
loadTileParams(newTile)
|
|
return { row, col }
|
|
}
|
|
|
|
return prev
|
|
})
|
|
}
|
|
|
|
const handleKeyboardSpace = () => {
|
|
if (playing) {
|
|
handleStop()
|
|
} else if (focusedTile !== 'custom') {
|
|
const tile = tiles[focusedTile.row]?.[focusedTile.col]
|
|
if (tile) {
|
|
handleTileClick(tile.formula, focusedTile.row, focusedTile.col, true)
|
|
}
|
|
}
|
|
}
|
|
|
|
const handleKeyboardEnter = () => {
|
|
if (focusedTile !== 'custom') {
|
|
const tile = tiles[focusedTile.row]?.[focusedTile.col]
|
|
if (tile) {
|
|
handleTileClick(tile.formula, focusedTile.row, focusedTile.col, false)
|
|
}
|
|
}
|
|
}
|
|
|
|
const handleKeyboardDoubleEnter = () => {
|
|
if (focusedTile !== 'custom') {
|
|
const tile = tiles[focusedTile.row]?.[focusedTile.col]
|
|
if (tile) {
|
|
handleTileClick(tile.formula, focusedTile.row, focusedTile.col, true)
|
|
}
|
|
}
|
|
}
|
|
|
|
const handleKeyboardR = () => {
|
|
if (focusedTile !== 'custom') {
|
|
handleRegenerate(focusedTile.row, focusedTile.col)
|
|
}
|
|
}
|
|
|
|
const handleKeyboardShiftR = () => {
|
|
handleRandom()
|
|
}
|
|
|
|
const handleEscape = () => {
|
|
exitMappingMode()
|
|
}
|
|
|
|
const handleKeyboardC = () => {
|
|
if (focusedTile === 'custom') {
|
|
setCustomTile(prev => {
|
|
const randomized = randomizeTileParams(prev)
|
|
loadTileParams(randomized)
|
|
|
|
if (playing === PLAYBACK_ID.CUSTOM && playbackManagerRef.current) {
|
|
playbackManagerRef.current.setEffects(randomized.effectParams)
|
|
playbackManagerRef.current.setVariables(
|
|
randomized.engineParams.a ?? DEFAULT_VARIABLES.a,
|
|
randomized.engineParams.b ?? DEFAULT_VARIABLES.b,
|
|
randomized.engineParams.c ?? DEFAULT_VARIABLES.c,
|
|
randomized.engineParams.d ?? DEFAULT_VARIABLES.d
|
|
)
|
|
playbackManagerRef.current.setPitch(randomized.engineParams.pitch ?? 1.0)
|
|
|
|
if (randomized.lfoConfigs) {
|
|
playbackManagerRef.current.setLFOConfig(0, randomized.lfoConfigs.lfo1)
|
|
playbackManagerRef.current.setLFOConfig(1, randomized.lfoConfigs.lfo2)
|
|
playbackManagerRef.current.setLFOConfig(2, randomized.lfoConfigs.lfo3)
|
|
playbackManagerRef.current.setLFOConfig(3, randomized.lfoConfigs.lfo4)
|
|
}
|
|
}
|
|
|
|
return randomized
|
|
})
|
|
} else {
|
|
const tileId = getTileId(focusedTile.row, focusedTile.col)
|
|
setTiles(prevTiles => {
|
|
const newTiles = [...prevTiles]
|
|
newTiles[focusedTile.row] = [...newTiles[focusedTile.row]]
|
|
const randomized = randomizeTileParams(newTiles[focusedTile.row][focusedTile.col])
|
|
newTiles[focusedTile.row][focusedTile.col] = randomized
|
|
|
|
loadTileParams(randomized)
|
|
|
|
if (playing === tileId && playbackManagerRef.current) {
|
|
playbackManagerRef.current.setEffects(randomized.effectParams)
|
|
playbackManagerRef.current.setVariables(
|
|
randomized.engineParams.a ?? DEFAULT_VARIABLES.a,
|
|
randomized.engineParams.b ?? DEFAULT_VARIABLES.b,
|
|
randomized.engineParams.c ?? DEFAULT_VARIABLES.c,
|
|
randomized.engineParams.d ?? DEFAULT_VARIABLES.d
|
|
)
|
|
playbackManagerRef.current.setPitch(randomized.engineParams.pitch ?? 1.0)
|
|
|
|
if (randomized.lfoConfigs) {
|
|
playbackManagerRef.current.setLFOConfig(0, randomized.lfoConfigs.lfo1)
|
|
playbackManagerRef.current.setLFOConfig(1, randomized.lfoConfigs.lfo2)
|
|
playbackManagerRef.current.setLFOConfig(2, randomized.lfoConfigs.lfo3)
|
|
playbackManagerRef.current.setLFOConfig(3, randomized.lfoConfigs.lfo4)
|
|
}
|
|
}
|
|
|
|
return newTiles
|
|
})
|
|
}
|
|
}
|
|
|
|
const handleKeyboardShiftC = () => {
|
|
handleRandomizeAllParams()
|
|
}
|
|
|
|
const handleDismissWarning = () => {
|
|
setShowWarning(false)
|
|
}
|
|
|
|
useKeyboardShortcuts({
|
|
onSpace: handleKeyboardSpace,
|
|
onArrowUp: (shift) => moveFocus('up', shift ? 10 : 1),
|
|
onArrowDown: (shift) => moveFocus('down', shift ? 10 : 1),
|
|
onArrowLeft: (shift) => moveFocus('left', shift ? 10 : 1),
|
|
onArrowRight: (shift) => moveFocus('right', shift ? 10 : 1),
|
|
onEnter: handleKeyboardEnter,
|
|
onDoubleEnter: handleKeyboardDoubleEnter,
|
|
onR: handleKeyboardR,
|
|
onShiftR: handleKeyboardShiftR,
|
|
onC: handleKeyboardC,
|
|
onShiftC: handleKeyboardShiftC,
|
|
onEscape: handleEscape
|
|
})
|
|
|
|
useEffect(() => {
|
|
if (focusedTile !== 'custom') {
|
|
const element = document.querySelector(`[data-tile-id="${focusedTile.row}-${focusedTile.col}"]`)
|
|
if (element) {
|
|
element.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
|
|
}
|
|
}
|
|
}, [focusedTile])
|
|
|
|
return (
|
|
<div className="w-screen h-screen flex flex-col bg-black overflow-hidden">
|
|
{showWarning && <AudioContextWarning onDismiss={handleDismissWarning} />}
|
|
{showHelp && <HelpModal onClose={() => setShowHelp(false)} />}
|
|
<header className="bg-black border-b-2 border-white px-2 lg:px-6 py-2 lg:py-3">
|
|
{/* Mobile header */}
|
|
<div className="lg:hidden">
|
|
<div className="flex items-center justify-between mb-2">
|
|
<h1
|
|
onClick={() => setShowHelp(true)}
|
|
className="font-mono text-[10px] tracking-[0.3em] text-white cursor-pointer hover:opacity-70 transition-opacity"
|
|
>
|
|
BRUITISTE
|
|
</h1>
|
|
<div className="flex gap-1 border-2 border-white">
|
|
<button
|
|
onClick={() => setMobileHeaderTab('global')}
|
|
className={`px-2 py-1 font-mono text-[8px] tracking-[0.15em] transition-colors ${
|
|
mobileHeaderTab === 'global'
|
|
? 'bg-white text-black'
|
|
: 'bg-black text-white hover:bg-white/10'
|
|
}`}
|
|
>
|
|
GLOBAL
|
|
</button>
|
|
<button
|
|
onClick={() => setMobileHeaderTab('options')}
|
|
className={`px-2 py-1 font-mono text-[8px] tracking-[0.15em] transition-colors ${
|
|
mobileHeaderTab === 'options'
|
|
? 'bg-white text-black'
|
|
: 'bg-black text-white hover:bg-white/10'
|
|
}`}
|
|
>
|
|
OPTIONS
|
|
</button>
|
|
<button
|
|
onClick={() => setMobileHeaderTab('modulate')}
|
|
className={`px-2 py-1 font-mono text-[8px] tracking-[0.15em] transition-colors ${
|
|
mobileHeaderTab === 'modulate'
|
|
? 'bg-white text-black'
|
|
: 'bg-black text-white hover:bg-white/10'
|
|
}`}
|
|
>
|
|
MODULATE
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{mobileHeaderTab === 'global' && (
|
|
<div className="flex gap-2">
|
|
<button
|
|
onClick={handleStop}
|
|
disabled={!playing}
|
|
className="flex-1 px-2 py-2 bg-black text-white border-2 border-white font-mono text-[9px] tracking-[0.2em] hover:bg-white hover:text-black transition-all disabled:opacity-30 disabled:cursor-not-allowed"
|
|
>
|
|
<Square size={12} strokeWidth={2} fill="currentColor" className="mx-auto" />
|
|
</button>
|
|
<button
|
|
onClick={handleRandom}
|
|
className="flex-1 px-2 py-2 bg-white text-black font-mono text-[9px] tracking-[0.2em] hover:bg-black hover:text-white border-2 border-white transition-all"
|
|
>
|
|
<Dices size={12} strokeWidth={2} className="mx-auto" />
|
|
</button>
|
|
<button
|
|
onClick={handleRandomizeAllParams}
|
|
className="flex-1 px-2 py-2 bg-white text-black font-mono text-[9px] tracking-[0.2em] hover:bg-black hover:text-white border-2 border-white transition-all"
|
|
>
|
|
<Sparkles size={12} strokeWidth={2} className="mx-auto" />
|
|
</button>
|
|
<button
|
|
onClick={handleDownloadAll}
|
|
disabled={downloading}
|
|
className="flex-1 px-2 py-2 bg-black text-white border-2 border-white font-mono text-[9px] tracking-[0.2em] hover:bg-white hover:text-black transition-all disabled:opacity-30 disabled:cursor-not-allowed"
|
|
>
|
|
<Archive size={12} strokeWidth={2} className="mx-auto" />
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
{mobileHeaderTab === 'options' && (
|
|
<EngineControls
|
|
values={engineValues}
|
|
onChange={handleEngineChange}
|
|
onMapClick={handleParameterMapClick}
|
|
getMappedLFOs={getMappedLFOs}
|
|
showOnlySliders
|
|
/>
|
|
)}
|
|
|
|
{mobileHeaderTab === 'modulate' && (
|
|
<EngineControls
|
|
values={engineValues}
|
|
onChange={handleEngineChange}
|
|
onMapClick={handleParameterMapClick}
|
|
getMappedLFOs={getMappedLFOs}
|
|
showOnlyKnobs
|
|
/>
|
|
)}
|
|
</div>
|
|
|
|
{/* Desktop header */}
|
|
<div className="hidden lg:flex items-center gap-4">
|
|
<h1
|
|
onClick={() => setShowHelp(true)}
|
|
className="font-mono text-sm tracking-[0.3em] text-white flex-shrink-0 cursor-pointer hover:opacity-70 transition-opacity"
|
|
>
|
|
BRUITISTE
|
|
</h1>
|
|
<div className="flex-1">
|
|
<EngineControls
|
|
values={engineValues}
|
|
onChange={handleEngineChange}
|
|
onMapClick={handleParameterMapClick}
|
|
getMappedLFOs={getMappedLFOs}
|
|
/>
|
|
</div>
|
|
<div className="flex gap-3 flex-shrink-0">
|
|
<button
|
|
onClick={handleStop}
|
|
disabled={!playing}
|
|
className="px-4 py-2 bg-black text-white border-2 border-white font-mono text-[10px] tracking-[0.2em] hover:bg-white hover:text-black transition-all disabled:opacity-30 disabled:cursor-not-allowed flex items-center gap-1"
|
|
>
|
|
<Square size={12} strokeWidth={2} fill="currentColor" />
|
|
STOP
|
|
</button>
|
|
<button
|
|
onClick={handleRandom}
|
|
className="px-4 py-2 bg-white text-black font-mono text-[10px] tracking-[0.2em] hover:bg-black hover:text-white border-2 border-white transition-all flex items-center gap-1"
|
|
>
|
|
<Dices size={12} strokeWidth={2} />
|
|
RANDOM
|
|
</button>
|
|
<button
|
|
onClick={handleRandomizeAllParams}
|
|
className="px-4 py-2 bg-white text-black font-mono text-[10px] tracking-[0.2em] hover:bg-black hover:text-white border-2 border-white transition-all flex items-center gap-1"
|
|
>
|
|
<Sparkles size={12} strokeWidth={2} />
|
|
CHAOS
|
|
</button>
|
|
<button
|
|
onClick={handleDownloadAll}
|
|
disabled={downloading}
|
|
className="px-4 py-2 bg-black text-white border-2 border-white font-mono text-[10px] tracking-[0.2em] hover:bg-white hover:text-black transition-all disabled:opacity-30 disabled:cursor-not-allowed flex items-center gap-1"
|
|
>
|
|
<Archive size={12} strokeWidth={2} />
|
|
{downloading ? 'DOWNLOADING...' : 'PACK'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<LFOPanel onChange={handleLFOChange} onUpdateDepth={handleUpdateMappingDepth} onRemoveMapping={handleRemoveMapping} />
|
|
|
|
<div className="flex-1 flex flex-col overflow-auto bg-white">
|
|
<div className="grid grid-cols-1 lg:grid-cols-4 gap-[1px] bg-white p-[1px]">
|
|
<div className="col-span-1 lg:col-span-4">
|
|
<FormulaEditor
|
|
formula={customTile.formula}
|
|
isPlaying={playing === PLAYBACK_ID.CUSTOM}
|
|
isFocused={focusedTile === 'custom'}
|
|
playbackPosition={playing === PLAYBACK_ID.CUSTOM ? playbackPosition : 0}
|
|
onEvaluate={handleCustomEvaluate}
|
|
onStop={handleCustomStop}
|
|
onRandom={handleCustomRandom}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex-1 grid grid-cols-1 lg:grid-cols-4 auto-rows-min gap-[1px] bg-white p-[1px]">
|
|
{tiles.map((row, i) =>
|
|
row.map((tile, j) => {
|
|
const id = getTileId(i, j)
|
|
return (
|
|
<BytebeatTile
|
|
key={id}
|
|
formula={tile.formula}
|
|
row={i}
|
|
col={j}
|
|
isPlaying={playing === id}
|
|
isQueued={queued === id}
|
|
isFocused={focusedTile !== 'custom' && focusedTile.row === i && focusedTile.col === j}
|
|
playbackPosition={playing === id ? playbackPosition : 0}
|
|
a={tile.engineParams.a ?? 8}
|
|
b={tile.engineParams.b ?? 16}
|
|
c={tile.engineParams.c ?? 32}
|
|
d={tile.engineParams.d ?? 64}
|
|
onPlay={handleTileClick}
|
|
onDoubleClick={handleTileDoubleClick}
|
|
onDownload={handleDownloadFormula}
|
|
onRegenerate={handleRegenerate}
|
|
/>
|
|
)
|
|
})
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<EffectsBar
|
|
values={effectValues}
|
|
onChange={handleEffectChange}
|
|
onMapClick={handleParameterMapClick}
|
|
getMappedLFOs={getMappedLFOs}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default App
|