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

slightly better

Browse Source
This commit is contained in:
Raphaël Forment
2025-10-06 02:16:23 +02:00
parent ba37b94908
commit ac772054c9
35 changed files with 1874 additions and 390 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
src/components/EffectsBar.tsx
View File

@ -8,9 +8,11 @@ import type { EffectValues } from '../types/effects'
interface EffectsBarProps {
values: EffectValues
onChange: (parameterId: string, value: number | boolean | string) => void
onMapClick?: (paramId: string, lfoIndex: number) => void
getMappedLFOs?: (paramId: string) => number[]
}
export function EffectsBar({ values, onChange }: EffectsBarProps) {
export function EffectsBar({ values, onChange, onMapClick, getMappedLFOs }: EffectsBarProps) {
const randomizeEffect = (effect: typeof EFFECTS[number]) => {
effect.parameters.forEach(param => {
if (param.id.endsWith('Enable')) return
@ -28,82 +30,10 @@ export function EffectsBar({ values, onChange }: EffectsBarProps) {
})
}
const renderFilterEffect = (effect: typeof EFFECTS[number]) => {
const filterGroups = [
{ prefix: 'hp', label: 'HP' },
{ prefix: 'lp', label: 'LP' },
{ prefix: 'bp', label: 'BP' }
]
return (
<div key={effect.id} className="border-2 border-white p-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`)
const freqParam = effect.parameters.find(p => p.id === `${group.prefix}Freq`)
const resParam = effect.parameters.find(p => p.id === `${group.prefix}Res`)
if (!enableParam || !freqParam || !resParam) return null
return (
<div key={group.prefix} className="flex gap-2 items-center">
<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}
value={values[freqParam.id] as number ?? freqParam.default}
min={freqParam.min}
max={freqParam.max}
step={freqParam.step}
unit={freqParam.unit}
onChange={(value) => onChange(freqParam.id, value)}
valueId={freqParam.id}
/>
<Slider
label={resParam.label}
value={values[resParam.id] as number ?? resParam.default}
min={resParam.min}
max={resParam.max}
step={resParam.step}
unit={resParam.unit}
onChange={(value) => onChange(resParam.id, value)}
valueId={resParam.id}
/>
</div>
</div>
)
})}
</div>
</div>
)
}
return (
<div className="bg-black border-t-2 border-white px-6 py-4">
<div className="grid grid-cols-4 gap-4">
{EFFECTS.map(effect => {
if (effect.id === 'filter') {
return renderFilterEffect(effect)
}
return (
<div key={effect.id} className="border-2 border-white p-3">
<div className="flex items-center justify-between mb-3">
@ -170,6 +100,9 @@ export function EffectsBar({ values, onChange }: EffectsBarProps) {
unit={param.unit}
onChange={(value) => onChange(param.id, value)}
valueId={param.id}
paramId={param.id}
onMapClick={onMapClick}
mappedLFOs={getMappedLFOs ? getMappedLFOs(param.id) : []}
/>
)
})}