diff --git a/index.html b/index.html index a72add2c..46cc03f3 100644 --- a/index.html +++ b/index.html @@ -2,7 +2,7 @@ - + diff --git a/src/App.tsx b/src/App.tsx index 252c770a..e39dd75f 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -541,50 +541,82 @@ function App() {
{showWarning && } {showHelp && setShowHelp(false)} />} -
-
-

setShowHelp(true)} - className="font-mono text-sm tracking-[0.3em] text-white flex-shrink-0 cursor-pointer hover:opacity-70 transition-opacity" - > - BRUITISTE -

- -
+
+
+
+

setShowHelp(true)} + className="font-mono text-[10px] md:text-sm tracking-[0.3em] text-white flex-shrink-0 cursor-pointer hover:opacity-70 transition-opacity" + > + BRUITISTE +

+
+ + + + +
+
+
+ +
+
@@ -593,8 +625,8 @@ function App() {
-
-
+
+
-
+
{tiles.map((row, i) => row.map((tile, j) => { const id = getTileId(i, j) diff --git a/src/components/EffectsBar.tsx b/src/components/EffectsBar.tsx index a5a75c8b..135de3a1 100644 --- a/src/components/EffectsBar.tsx +++ b/src/components/EffectsBar.tsx @@ -1,4 +1,5 @@ -import { Dices } from 'lucide-react' +import { useState } from 'react' +import { Dices, ChevronDown } from 'lucide-react' import { Slider } from './Slider' import { Switch } from './Switch' import { Dropdown } from './Dropdown' @@ -13,6 +14,8 @@ interface EffectsBarProps { } export function EffectsBar({ values, onChange, onMapClick, getMappedLFOs }: EffectsBarProps) { + const [expandedEffect, setExpandedEffect] = useState(null) + const [activeTab, setActiveTab] = useState(EFFECTS[0].id) const randomizeEffect = (effect: typeof EFFECTS[number]) => { effect.parameters.forEach(param => { if (param.id.endsWith('Enable')) return @@ -31,8 +34,9 @@ export function EffectsBar({ values, onChange, onMapClick, getMappedLFOs }: Effe } return ( -
-
+
+ {/* Desktop: Grid layout */} +
{EFFECTS.map(effect => { return (
@@ -111,6 +115,100 @@ export function EffectsBar({ values, onChange, onMapClick, getMappedLFOs }: Effe ) })}
+ + {/* Mobile: Tabbed layout */} +
+
+ {EFFECTS.map(effect => ( + + ))} +
+ {EFFECTS.map(effect => { + if (activeTab !== effect.id) return null + return ( +
+
+
+ +
+ {effect.bypassable && ( + onChange(`${effect.id}Bypass`, !checked)} + label={values[`${effect.id}Bypass`] ? 'OFF' : 'ON'} + /> + )} +
+
+ {effect.parameters.map(param => { + if (param.options) { + return ( + onChange(param.id, value)} + /> + ) + } + + const isSwitch = param.min === 0 && param.max === 1 && param.step === 1 + + if (isSwitch) { + return ( +
+
+ + {param.label.toUpperCase()} + + onChange(param.id, checked ? 1 : 0)} + label={values[param.id] ? 'ON' : 'OFF'} + /> +
+
+ ) + } + + return ( + onChange(param.id, value)} + valueId={param.id} + paramId={param.id} + onMapClick={onMapClick} + mappedLFOs={getMappedLFOs ? getMappedLFOs(param.id) : []} + /> + ) + })} +
+
+ ) + })} +
) } \ No newline at end of file diff --git a/src/components/EngineControls.tsx b/src/components/EngineControls.tsx index 4513d733..f53f8e3c 100644 --- a/src/components/EngineControls.tsx +++ b/src/components/EngineControls.tsx @@ -29,7 +29,7 @@ export function EngineControls({ values, onChange, onMapClick, getMappedLFOs }: } return ( -
+
{ENGINE_CONTROLS[0].parameters.map(param => { const useKnob = KNOB_PARAMS.includes(param.id) @@ -46,6 +46,7 @@ export function EngineControls({ values, onChange, onMapClick, getMappedLFOs }: onChange={(value) => onChange(param.id, value)} formatValue={formatValue} valueId={param.id} + size={40} paramId={param.id} onMapClick={onMapClick} mappedLFOs={getMappedLFOs ? getMappedLFOs(param.id) : []} @@ -54,12 +55,12 @@ export function EngineControls({ values, onChange, onMapClick, getMappedLFOs }: } return ( -
-
-