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

Fixing more bugs

Browse Source
This commit is contained in:
Raphaël Forment
2025-09-30 22:21:53 +02:00
parent d1ff3daae1
commit 79ad69275f
10 changed files with 398 additions and 201 deletions
Download Patch File Download Diff File Expand all files Collapse all files

163
src/components/EffectsBar.tsx
View File

@ -17,62 +17,125 @@ export function EffectsBar({ values, onChange }: EffectsBarProps) {
return value.toString()
}
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">
<h3 className="font-mono text-[10px] tracking-[0.2em] text-white mb-3">
{effect.name.toUpperCase()}
</h3>
<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">
<Switch
checked={Boolean(values[enableParam.id])}
onChange={(checked) => onChange(enableParam.id, checked ? 1 : 0)}
vertical
/>
<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 => (
<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>
{effect.bypassable && (
<Switch
checked={!Boolean(values[`${effect.id}Bypass`])}
onChange={(checked) => onChange(`${effect.id}Bypass`, !checked)}
label={Boolean(values[`${effect.id}Bypass`]) ? 'OFF' : 'ON'}
/>
)}
</div>
<div className="flex flex-col gap-3">
{effect.parameters.map(param => {
const isSwitch = param.min === 0 && param.max === 1 && param.step === 1
{EFFECTS.map(effect => {
if (effect.id === 'filter') {
return renderFilterEffect(effect)
}
if (isSwitch) {
return (
<div key={param.id} className="flex flex-col gap-1 mt-2">
<div className="flex items-center justify-between">
<span className="font-mono text-[9px] tracking-[0.15em] text-white">
{param.label.toUpperCase()}
</span>
<Switch
checked={Boolean(values[param.id])}
onChange={(checked) => onChange(param.id, checked ? 1 : 0)}
label={Boolean(values[param.id]) ? 'ON' : 'OFF'}
/>
</div>
</div>
)
}
return (
<Slider
key={param.id}
label={param.label}
value={values[param.id] as number ?? param.default}
min={param.min}
max={param.max}
step={param.step}
unit={param.unit}
onChange={(value) => onChange(param.id, value)}
formatValue={param.id === 'clipMode' ? formatValue : undefined}
valueId={param.id}
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>
{effect.bypassable && (
<Switch
checked={!Boolean(values[`${effect.id}Bypass`])}
onChange={(checked) => onChange(`${effect.id}Bypass`, !checked)}
label={Boolean(values[`${effect.id}Bypass`]) ? 'OFF' : 'ON'}
/>
)
})}
)}
</div>
<div className="flex flex-col gap-3">
{effect.parameters.map(param => {
const isSwitch = param.min === 0 && param.max === 1 && param.step === 1
if (isSwitch) {
return (
<div key={param.id} className="flex flex-col gap-1 mt-2">
<div className="flex items-center justify-between">
<span className="font-mono text-[9px] tracking-[0.15em] text-white">
{param.label.toUpperCase()}
</span>
<Switch
checked={Boolean(values[param.id])}
onChange={(checked) => onChange(param.id, checked ? 1 : 0)}
label={Boolean(values[param.id]) ? 'ON' : 'OFF'}
/>
</div>
</div>
)
}
return (
<Slider
key={param.id}
label={param.label}
value={values[param.id] as number ?? param.default}
min={param.min}
max={param.max}
step={param.step}
unit={param.unit}
onChange={(value) => onChange(param.id, value)}
formatValue={param.id === 'clipMode' ? formatValue : undefined}
valueId={param.id}
/>
)
})}
</div>
</div>
</div>
))}
)
})}
</div>
</div>
)