Added Mixer Component, and VCO Component

src/features/timbre/Timbre.js

@@ -1,11 +1,13 @@
 import React from 'react';
 import VCO from './parameters/VCO';
+import Mixer from './parameters/Mixer';
 
 export function Timbre(props) {
     return (
         <div>
             <VCO id="vco1" />
             <VCO id="vco2" />
+            <Mixer id="mixer1" />
         </div>
     );
 }

src/features/timbre/parameters/Mixer.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { selectById, parameterUpdated } from './parameterSlice.js';
+
+const Slider = (props) => {
+    return (
+        <input
+            type="range"
+            min="0"
+            max="127"
+            value={props.parameter}
+            onChange={(e) => props.onChange(e.target.value)}
+        />
+    );
+};
+
+export default function Mixer(props) {
+    const parameters = useSelector((state) => selectById(state, props.id));
+    const dispatch = useDispatch();
+
+    return (
+        <div>
+            <Slider
+                parameter={parameters.vol1}
+                onChange={(value) =>
+                    dispatch(
+                        parameterUpdated({
+                            id: props.id,
+                            changes: { vol1: value },
+                        })
+                    )
+                }
+            />
+            <Slider
+                parameter={parameters.vol2}
+                onChange={(value) =>
+                    dispatch(
+                        parameterUpdated({
+                            id: props.id,
+                            changes: { vol2: value },
+                        })
+                    )
+                }
+            />
+            <Slider
+                parameter={parameters.vol3}
+                onChange={(value) =>
+                    dispatch(
+                        parameterUpdated({
+                            id: props.id,
+                            changes: { vol3: value },
+                        })
+                    )
+                }
+            />
+        </div>
+    );
+}

src/features/timbre/parameters/VCO.js

@@ -2,6 +2,23 @@ import React from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { selectById, parameterUpdated } from './parameterSlice.js';
 
+const SelectList = (props) => {
+    const options = props.list.map((option) =>
+        option === props.value ? (
+            <option value={option} selected>
+                {option}
+            </option>
+        ) : (
+            <option value={option}>{option}</option>
+        )
+    );
+    return (
+        <select onChange={(e) => props.onChange(e.target.value)}>
+            {options}
+        </select>
+    );
+};
+
 export default function VCO(props) {
     const parameters = useSelector((state) => selectById(state, props.id));
 
@@ -19,8 +36,7 @@ export default function VCO(props) {
                         })
                     )
                 }>
-                {' '}
-                Set Waveform to Triangle{' '}
+                Set Waveform to Triangle
             </button>
             <span>Current Mod Value {parameters.waveMod} </span>
             <input
@@ -37,6 +53,18 @@ export default function VCO(props) {
                     )
                 }
             />
+            <SelectList
+                value={parameters.waveform}
+                list={['Saw', 'Square', 'Triangle']}
+                onChange={(value) =>
+                    dispatch(
+                        parameterUpdated({
+                            id: props.id,
+                            changes: { waveform: value },
+                        })
+                    )
+                }
+            />
         </div>
     );
 }

src/features/timbre/parameters/parameterSlice.js

@@ -28,7 +28,7 @@ const parametersSlice = createSlice({
             },
             'vco2': {
                 id: 'vco2',
-                waveform: 'Saw',
+                waveform: 'Square',
                 dwgsOrModType: 0,
                 waveMod: 0,
                 lfoMod: 0,