From 71cfe8a16eadfaa2a9c424c5e6820f5e36a827b3 Mon Sep 17 00:00:00 2001
From: "[poww10s]" <[theironminer@gmail.com]>
Date: Wed, 18 Nov 2020 17:59:20 -0500
Subject: [PATCH] add LFO component and add prop lists

---
 src/features/timbre/Timbre.js                 | 97 ++++++++++++++++++-
 src/features/timbre/parameters/LFO.js         | 60 ++++++++++++
 src/features/timbre/parameters/Mixer.js       | 13 +--
 src/features/timbre/parameters/VCO.js         | 33 ++++++-
 .../timbre/parameters/parameterSlice.js       |  8 ++
 5 files changed, 193 insertions(+), 18 deletions(-)
 create mode 100644 src/features/timbre/parameters/LFO.js

diff --git a/src/features/timbre/Timbre.js b/src/features/timbre/Timbre.js
index 46df65b..3ce663e 100644
--- a/src/features/timbre/Timbre.js
+++ b/src/features/timbre/Timbre.js
@@ -4,17 +4,110 @@ import Mixer from './parameters/Mixer';
 import Pitch from './parameters/Pitch';
 import Filter from './parameters/Filter';
 import EG from './parameters/EG';
+import Amp from './parameters/Amp';
+import LFO from './parameters/LFO';
 
 export function Timbre(props) {
     return (
         <div>
-            <VCO id="vco1" />
-            <VCO id="vco2" />
+            <VCO
+                id="vco1"
+                waveforms={[
+                    'Saw',
+                    'Square',
+                    'Triangle',
+                    'Sine',
+                    'Vox Wave',
+                    'DWGS',
+                    'Noise',
+                    'Audio In',
+                ]}
+                dwgsOrModType={[
+                    'SynSine1',
+                    'SynSine2',
+                    'SynSine3',
+                    'SynSine4',
+                    'SynSine5',
+                    'SynSine6',
+                    'SynSine7',
+                    'SynBass1',
+                    'SynBass2',
+                    'SynBass3',
+                    'SynBass4',
+                    'SynBass5',
+                    'SynBass6',
+                    'SynBass7',
+                    'SynWave1',
+                    'SynWave2',
+                    'SynWave3',
+                    'SynWave4',
+                    'SynWave5',
+                    'SynWave6',
+                    'SynWave7',
+                    'SynWave8',
+                    'SynWave9',
+                    '5thWave1',
+                    '5thWave2',
+                    '5thWave3',
+                    'Digi1',
+                    'Digi2',
+                    'Digi3',
+                    'Digi4',
+                    'Digi5',
+                    'Digi6',
+                    'Digi7',
+                    'Digi8',
+                    'Endless',
+                    'E.Piano1',
+                    'E.Piano2',
+                    'E.Piano3',
+                    'E.Piano4',
+                    'Organ1',
+                    'Organ2',
+                    'Organ3',
+                    'Organ4',
+                    'Organ5',
+                    'Organ6',
+                    'Organ7',
+                    'Clav1',
+                    'Clav2',
+                    'Guitar1',
+                    'Guitar2',
+                    'Guitar3',
+                    'Bass1',
+                    'Bass2',
+                    'Bass3',
+                    'Bass4',
+                    'Bass5',
+                    'Bell1',
+                    'Bell2',
+                    'Bell3',
+                    'Bell4',
+                    'Voice1',
+                    'Voice2',
+                    'Voice3',
+                    'Voice4',
+                ]}
+            />
+            <VCO
+                id="vco2"
+                waveforms={['Saw', 'Square', 'Triangle']}
+                dwgsOrModType={['Off', 'Ring', 'Sync', 'RingSync']}
+            />
             <Mixer id="mixer1" />
             <Pitch id="pitch1" />
             <Filter id="filter1" />
             <EG id="eg1" />
+            <Amp id="amp1" />
             <EG id="eg2" />
+            <LFO
+                id="lfo1"
+                waveforms={['Saw', 'Square 1', 'Triangle', 'Sample & Hold']}
+            />
+            <LFO
+                id="lfo2"
+                waveforms={['Saw', 'Square 2', 'Sine', 'Sample & Hold']}
+            />
         </div>
     );
 }
diff --git a/src/features/timbre/parameters/LFO.js b/src/features/timbre/parameters/LFO.js
new file mode 100644
index 0000000..abd7fa1
--- /dev/null
+++ b/src/features/timbre/parameters/LFO.js
@@ -0,0 +1,60 @@
+import React from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { selectById, parameterUpdated } from './parameterSlice.js';
+import { Slider, SelectList, Checkbox } from '../../helpers/Helpers';
+
+export default function LFO(props) {
+    const parameters = useSelector((state) => selectById(state, props.id));
+    const dispatch = useDispatch();
+
+    return (
+        <div>
+            <SelectList
+                value={parameters.waveform}
+                list={props.waveforms}
+                onChange={(value) =>
+                    dispatch(
+                        parameterUpdated({
+                            id: props.id,
+                            changes: { waveform: value },
+                        })
+                    )
+                }
+            />
+            <SelectList
+                value={parameters.keySync}
+                list={['Off', 'Timbre', 'Voice']}
+                onChange={(value) =>
+                    dispatch(
+                        parameterUpdated({
+                            id: props.id,
+                            changes: { keySync: value },
+                        })
+                    )
+                }
+            />
+            <Checkbox
+                parameter={parameters.tempoSync}
+                onChange={(value) =>
+                    dispatch(
+                        parameterUpdated({
+                            id: props.id,
+                            changes: { tempoSync: value },
+                        })
+                    )
+                }
+            />
+            <Slider
+                parameter={parameters.frequency}
+                onChange={(value) =>
+                    dispatch(
+                        parameterUpdated({
+                            id: props.id,
+                            changes: { frequency: value },
+                        })
+                    )
+                }
+            />
+        </div>
+    );
+}
diff --git a/src/features/timbre/parameters/Mixer.js b/src/features/timbre/parameters/Mixer.js
index ccf13e5..f65b80f 100644
--- a/src/features/timbre/parameters/Mixer.js
+++ b/src/features/timbre/parameters/Mixer.js
@@ -1,18 +1,7 @@
 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)}
-        />
-    );
-};
+import { Slider } from '../../helpers/Helpers';
 
 export default function Mixer(props) {
     const parameters = useSelector((state) => selectById(state, props.id));
diff --git a/src/features/timbre/parameters/VCO.js b/src/features/timbre/parameters/VCO.js
index 0c99d7c..1236294 100644
--- a/src/features/timbre/parameters/VCO.js
+++ b/src/features/timbre/parameters/VCO.js
@@ -9,6 +9,30 @@ export default function VCO(props) {
     const dispatch = useDispatch();
     return (
         <div>
+            <SelectList
+                value={parameters.waveform}
+                list={props.waveforms}
+                onChange={(value) =>
+                    dispatch(
+                        parameterUpdated({
+                            id: props.id,
+                            changes: { waveform: value },
+                        })
+                    )
+                }
+            />
+            <SelectList
+                value={parameters.dwgsOrModType}
+                list={props.dwgsOrModType}
+                onChange={(value) =>
+                    dispatch(
+                        parameterUpdated({
+                            id: props.id,
+                            changes: { dwgsOrModType: value },
+                        })
+                    )
+                }
+            />
             <Slider
                 min="0"
                 max="100"
@@ -22,14 +46,15 @@ export default function VCO(props) {
                     )
                 }
             />
-            <SelectList
-                value={parameters.waveform}
-                list={['Saw', 'Square', 'Triangle']}
+            <Slider
+                min="0"
+                max="100"
+                parameter={parameters.lfoMod}
                 onChange={(value) =>
                     dispatch(
                         parameterUpdated({
                             id: props.id,
-                            changes: { waveform: value },
+                            changes: { lfoMod: value },
                         })
                     )
                 }
diff --git a/src/features/timbre/parameters/parameterSlice.js b/src/features/timbre/parameters/parameterSlice.js
index 9cf98f4..f4a223c 100644
--- a/src/features/timbre/parameters/parameterSlice.js
+++ b/src/features/timbre/parameters/parameterSlice.js
@@ -83,9 +83,17 @@ const parametersSlice = createSlice({
             },
             'lfo1': {
                 id: 'lfo1',
+                waveform: 'Saw',
+                keySync: 'Off',
+                tempoSync: false,
+                frequency: 0,
             },
             'lfo2': {
                 id: 'lfo2',
+                waveform: 'Saw',
+                keySync: 'Off',
+                tempoSync: false,
+                frequency: 0,
             },
         },
     }),