From 45bc4aae55e79c7074fb9850a51c044d27c6ddcc Mon Sep 17 00:00:00 2001
From: "[poww10s]" <[theironminer@gmail.com]>
Date: Wed, 18 Nov 2020 02:53:26 -0500
Subject: [PATCH] Added Mixer Component, and VCO Component

---
 src/features/timbre/Timbre.js                 |  2 +
 src/features/timbre/parameters/Mixer.js       | 58 +++++++++++++++++++
 .../timbre/parameters/Parameters.module.css   |  0
 src/features/timbre/parameters/VCO.js         | 32 +++++++++-
 .../timbre/parameters/parameterSlice.js       |  2 +-
 5 files changed, 91 insertions(+), 3 deletions(-)
 create mode 100644 src/features/timbre/parameters/Mixer.js
 create mode 100644 src/features/timbre/parameters/Parameters.module.css

diff --git a/src/features/timbre/Timbre.js b/src/features/timbre/Timbre.js
index 1db9b27..bfacb94 100644
--- a/src/features/timbre/Timbre.js
+++ b/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>
     );
 }
diff --git a/src/features/timbre/parameters/Mixer.js b/src/features/timbre/parameters/Mixer.js
new file mode 100644
index 0000000..ccf13e5
--- /dev/null
+++ b/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>
+    );
+}
diff --git a/src/features/timbre/parameters/Parameters.module.css b/src/features/timbre/parameters/Parameters.module.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/features/timbre/parameters/VCO.js b/src/features/timbre/parameters/VCO.js
index 398d05d..396e138 100644
--- a/src/features/timbre/parameters/VCO.js
+++ b/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>
     );
 }
diff --git a/src/features/timbre/parameters/parameterSlice.js b/src/features/timbre/parameters/parameterSlice.js
index 0b93bac..8e0ab1a 100644
--- a/src/features/timbre/parameters/parameterSlice.js
+++ b/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,