BuboBubo/bruitiste
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Everything is a bit better

Browse Source
This commit is contained in:
Raphaël Forment
2025-10-04 00:27:14 +02:00
parent a960f4e18b
commit 012c3534be
6 changed files with 194 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
src/App.tsx
View File

@ -3,20 +3,22 @@ import { useStore } from '@nanostores/react'
import { Square, Archive, Dices } from 'lucide-react'
import { PlaybackManager } from './services/PlaybackManager'
import { DownloadService } from './services/DownloadService'
import { generateFormulaGrid, generateRandomFormula } from './utils/bytebeatFormulas'
import { generateTileGrid, generateRandomFormula } from './utils/bytebeatFormulas'
import { BytebeatTile } from './components/BytebeatTile'
import { EffectsBar } from './components/EffectsBar'
import { EngineControls } from './components/EngineControls'
import { getSampleRateFromIndex } from './config/effects'
import { engineSettings, effectSettings } from './stores/settings'
import { useKeyboardShortcuts } from './hooks/useKeyboardShortcuts'
import type { TileState } from './types/tiles'
import { createTileStateFromCurrent, loadTileParams, saveTileParams } from './utils/tileState'
function App() {
const engineValues = useStore(engineSettings)
const effectValues = useStore(effectSettings)
const [formulas, setFormulas] = useState<string[][]>(() =>
generateFormulaGrid(100, 2, engineValues.complexity)
const [tiles, setTiles] = useState<TileState[][]>(() =>
generateTileGrid(100, 2, engineValues.complexity)
)
const [playing, setPlaying] = useState<string | null>(null)
const [queued, setQueued] = useState<string | null>(null)
@ -27,18 +29,18 @@ function App() {
const playbackManagerRef = useRef<PlaybackManager | null>(null)
const downloadServiceRef = useRef<DownloadService>(new DownloadService())
const animationFrameRef = useRef<number | null>(null)
const formulasRef = useRef<string[][]>(formulas)
const tilesRef = useRef<TileState[][]>(tiles)
useEffect(() => {
formulasRef.current = formulas
}, [formulas])
tilesRef.current = tiles
}, [tiles])
useEffect(() => {
effectSettings.setKey('masterVolume', engineValues.masterVolume)
}, [engineValues.masterVolume])
const handleRandom = () => {
setFormulas(generateFormulaGrid(100, 2, engineValues.complexity))
setTiles(generateTileGrid(100, 2, engineValues.complexity))
setQueued(null)
}
@ -82,8 +84,20 @@ function App() {
updatePosition()
}
const handleTileClick = (formula: string, row: number, col: number, isDoubleClick: boolean = false) => {
const handleTileClick = (_formula: string, row: number, col: number, isDoubleClick: boolean = false) => {
const id = `${row}-${col}`
const tile = tiles[row]?.[col]
if (!tile) return
if (focusedTile.row !== row || focusedTile.col !== col) {
const currentTile = tiles[focusedTile.row]?.[focusedTile.col]
if (currentTile) {
saveTileParams(currentTile)
}
loadTileParams(tile)
}
setFocusedTile({ row, col })
if (playing === id) {
@ -98,14 +112,15 @@ function App() {
}
if (isDoubleClick || playing === null) {
playFormula(formula, id)
playFormula(tile.formula, id)
} else {
setQueued(id)
if (playbackManagerRef.current) {
playbackManagerRef.current.scheduleNextTrack(() => {
const queuedFormula = formulasRef.current.flat()[parseInt(id.split('-')[0]) * 2 + parseInt(id.split('-')[1])]
if (queuedFormula) {
playFormula(queuedFormula, id)
const queuedTile = tilesRef.current[row]?.[col]
if (queuedTile) {
loadTileParams(queuedTile)
playFormula(queuedTile.formula, id)
}
})
}
@ -120,6 +135,11 @@ function App() {
const handleEngineChange = (parameterId: string, value: number) => {
engineSettings.setKey(parameterId as keyof typeof engineValues, value)
const currentTile = tiles[focusedTile.row]?.[focusedTile.col]
if (currentTile) {
saveTileParams(currentTile)
}
if (parameterId === 'masterVolume' && playbackManagerRef.current) {
playbackManagerRef.current.setEffects({ ...effectValues, masterVolume: value })
}
@ -131,6 +151,12 @@ function App() {
const handleEffectChange = (parameterId: string, value: number | boolean | string) => {
effectSettings.setKey(parameterId as any, value as any)
const currentTile = tiles[focusedTile.row]?.[focusedTile.col]
if (currentTile) {
saveTileParams(currentTile)
}
if (playbackManagerRef.current) {
playbackManagerRef.current.setEffects(effectValues)
}
@ -138,6 +164,7 @@ function App() {
const handleDownloadAll = async () => {
setDownloading(true)
const formulas = tiles.map(row => row.map(tile => tile.formula))
await downloadServiceRef.current.downloadAll(formulas, { duration: 10, bitDepth: 8 })
setDownloading(false)
}
@ -149,25 +176,27 @@ function App() {
const handleRegenerate = (row: number, col: number) => {
const id = `${row}-${col}`
const newFormula = generateRandomFormula(engineValues.complexity)
const newTile = createTileStateFromCurrent(newFormula)
if (playing === id && playbackManagerRef.current) {
setRegenerating(id)
playbackManagerRef.current.scheduleNextTrack(() => {
setFormulas(prevFormulas => {
const newFormulas = [...prevFormulas]
newFormulas[row] = [...newFormulas[row]]
newFormulas[row][col] = newFormula
return newFormulas
setTiles(prevTiles => {
const newTiles = [...prevTiles]
newTiles[row] = [...newTiles[row]]
newTiles[row][col] = newTile
return newTiles
})
playFormula(newFormula, id)
loadTileParams(newTile)
playFormula(newTile.formula, id)
setRegenerating(null)
})
} else {
setFormulas(prevFormulas => {
const newFormulas = [...prevFormulas]
newFormulas[row] = [...newFormulas[row]]
newFormulas[row][col] = newFormula
return newFormulas
setTiles(prevTiles => {
const newTiles = [...prevTiles]
newTiles[row] = [...newTiles[row]]
newTiles[row][col] = newTile
return newTiles
})
}
}
@ -183,10 +212,15 @@ function App() {
}
const moveFocus = (direction: 'up' | 'down' | 'left' | 'right', step: number = 1) => {
const currentTile = tiles[focusedTile.row]?.[focusedTile.col]
if (currentTile) {
saveTileParams(currentTile)
}
setFocusedTile(prev => {
let { row, col } = prev
const maxRow = formulas.length - 1
const maxCol = (formulas[row]?.length || 1) - 1
const maxRow = tiles.length - 1
const maxCol = (tiles[row]?.length || 1) - 1
switch (direction) {
case 'up':
@ -202,6 +236,12 @@ function App() {
col = Math.min(maxCol, col + step)
break
}
const newTile = tiles[row]?.[col]
if (newTile) {
loadTileParams(newTile)
}
return { row, col }
})
}
@ -210,24 +250,24 @@ function App() {
if (playing) {
handleStop()
} else {
const formula = formulas[focusedTile.row]?.[focusedTile.col]
if (formula) {
handleTileClick(formula, focusedTile.row, focusedTile.col, true)
const tile = tiles[focusedTile.row]?.[focusedTile.col]
if (tile) {
handleTileClick(tile.formula, focusedTile.row, focusedTile.col, true)
}
}
}
const handleKeyboardEnter = () => {
const formula = formulas[focusedTile.row]?.[focusedTile.col]
if (formula) {
handleTileClick(formula, focusedTile.row, focusedTile.col, false)
const tile = tiles[focusedTile.row]?.[focusedTile.col]
if (tile) {
handleTileClick(tile.formula, focusedTile.row, focusedTile.col, false)
}
}
const handleKeyboardDoubleEnter = () => {
const formula = formulas[focusedTile.row]?.[focusedTile.col]
if (formula) {
handleTileClick(formula, focusedTile.row, focusedTile.col, true)
const tile = tiles[focusedTile.row]?.[focusedTile.col]
if (tile) {
handleTileClick(tile.formula, focusedTile.row, focusedTile.col, true)
}
}
@ -293,13 +333,13 @@ function App() {
</header>
<div className="flex-1 grid grid-cols-2 auto-rows-min gap-[1px] bg-white p-[1px] overflow-auto">
{formulas.map((row, i) =>
row.map((formula, j) => {
{tiles.map((row, i) =>
row.map((tile, j) => {
const id = `${i}-${j}`
return (
<BytebeatTile
key={id}
formula={formula}
formula={tile.formula}
row={i}
col={j}
isPlaying={playing === id}

49
src/components/EffectsBar.tsx
View File

@ -1,3 +1,4 @@
import { Dices } from 'lucide-react'
import { Slider } from './Slider'
import { Switch } from './Switch'
import { Dropdown } from './Dropdown'
@ -10,6 +11,23 @@ interface EffectsBarProps {
}
export function EffectsBar({ values, onChange }: EffectsBarProps) {
const randomizeEffect = (effect: typeof EFFECTS[number]) => {
effect.parameters.forEach(param => {
if (param.id.endsWith('Enable')) return
if (param.options) {
const randomOption = param.options[Math.floor(Math.random() * param.options.length)]
onChange(param.id, randomOption.value)
} else {
const range = param.max - param.min
const steps = Math.floor(range / param.step)
const randomStep = Math.floor(Math.random() * (steps + 1))
const randomValue = param.min + (randomStep * param.step)
onChange(param.id, randomValue)
}
})
}
const renderFilterEffect = (effect: typeof EFFECTS[number]) => {
const filterGroups = [
{ prefix: 'hp', label: 'HP' },
@ -19,9 +37,17 @@ export function EffectsBar({ values, onChange }: EffectsBarProps) {
return (
<div key={effect.id} className="border-2 border-white p-3">
<h3 className="font-mono text-[10px] tracking-[0.2em] text-white mb-3">
<div className="flex items-center justify-between mb-3">
<h3 className="font-mono text-[10px] tracking-[0.2em] text-white">
{effect.name.toUpperCase()}
</h3>
<button
onClick={() => randomizeEffect(effect)}
className="p-1 text-white hover:bg-white hover:text-black transition-colors"
>
<Dices size={12} strokeWidth={2} />
</button>
</div>
<div className="flex flex-col gap-3">
{filterGroups.map(group => {
const enableParam = effect.parameters.find(p => p.id === `${group.prefix}Enable`)
@ -32,11 +58,14 @@ export function EffectsBar({ values, onChange }: EffectsBarProps) {
return (
<div key={group.prefix} className="flex gap-2 items-center">
<Switch
checked={Boolean(values[enableParam.id])}
onChange={(checked) => onChange(enableParam.id, checked ? 1 : 0)}
vertical
/>
<button
onClick={() => onChange(enableParam.id, values[enableParam.id] ? 0 : 1)}
className="w-4 h-4 border-2 border-white bg-black flex items-center justify-center cursor-pointer hover:bg-white transition-colors group"
>
{Boolean(values[enableParam.id]) && (
<div className="w-2 h-2 bg-white group-hover:bg-black" />
)}
</button>
<div className="flex-1 flex flex-col gap-2">
<Slider
label={freqParam.label}
@ -78,9 +107,17 @@ export function EffectsBar({ values, onChange }: EffectsBarProps) {
return (
<div key={effect.id} className="border-2 border-white p-3">
<div className="flex items-center justify-between mb-3">
<div className="flex items-center gap-2">
<h3 className="font-mono text-[10px] tracking-[0.2em] text-white">
{effect.name.toUpperCase()}
</h3>
<button
onClick={() => randomizeEffect(effect)}
className="p-1 text-white hover:bg-white hover:text-black transition-colors"
>
<Dices size={12} strokeWidth={2} />
</button>
</div>
{effect.bypassable && (
<Switch
checked={!Boolean(values[`${effect.id}Bypass`])}

4
src/config/effects.ts
View File

@ -10,7 +10,7 @@ export const ENGINE_CONTROLS: EffectConfig[] = [
label: 'Sample Rate',
min: 0,
max: 3,
default: 1,
default: 3,
step: 1,
unit: ''
},
@ -37,7 +37,7 @@ export const ENGINE_CONTROLS: EffectConfig[] = [
label: 'Bit Depth',
min: 0,
max: 2,
default: 0,
default: 2,
step: 1,
unit: ''
},

5
src/types/tiles.ts Normal file
View File

@ -0,0 +1,5 @@
export interface TileState {
formula: string
engineParams: Record<string, number>
effectParams: Record<string, number | boolean | string>
}

16
src/utils/bytebeatFormulas.ts
View File

@ -1,3 +1,6 @@
import type { TileState } from '../types/tiles'
import { createTileState } from './tileState'
interface Template {
pattern: string
weight: number
@ -217,3 +220,16 @@ export function generateFormulaGrid(rows: number, cols: number, complexity: numb
}
return grid
}
export function generateTileGrid(rows: number, cols: number, complexity: number = 1): TileState[][] {
const grid: TileState[][] = []
for (let i = 0; i < rows; i++) {
const row: TileState[] = []
for (let j = 0; j < cols; j++) {
const formula = generateRandomFormula(complexity)
row.push(createTileState(formula))
}
grid.push(row)
}
return grid
}

46
src/utils/tileState.ts Normal file
View File

@ -0,0 +1,46 @@
import type { TileState } from '../types/tiles'
import { engineSettings, effectSettings } from '../stores/settings'
import { getDefaultEngineValues, getDefaultEffectValues } from '../config/effects'
export function createTileState(
formula: string,
engineParams?: Record<string, number>,
effectParams?: Record<string, number | boolean | string>
): TileState {
return {
formula,
engineParams: engineParams ?? { ...getDefaultEngineValues() },
effectParams: effectParams ?? { ...getDefaultEffectValues(), masterVolume: 75 }
}
}
export function createTileStateFromCurrent(formula: string): TileState {
return {
formula,
engineParams: { ...engineSettings.get() },
effectParams: { ...effectSettings.get() }
}
}
export function loadTileParams(tile: TileState): void {
Object.entries(tile.engineParams).forEach(([key, value]) => {
engineSettings.setKey(key as any, value)
})
Object.entries(tile.effectParams).forEach(([key, value]) => {
effectSettings.setKey(key as any, value as any)
})
}
export function saveTileParams(tile: TileState): void {
tile.engineParams = { ...engineSettings.get() }
tile.effectParams = { ...effectSettings.get() }
}
export function cloneTileState(tile: TileState): TileState {
return {
formula: tile.formula,
engineParams: { ...tile.engineParams },
effectParams: { ...tile.effectParams }
}
}