From 0ad9f90fdc6840698ef529bc8811621bfcfcefc5 Mon Sep 17 00:00:00 2001 From: Aoife Date: Fri, 2 Apr 2021 06:14:22 -0400 Subject: [PATCH] Add Card Component .commit to change branch --- src/App.js | 6 +- src/features/editor/Timbre.js | 21 +- src/features/editor/card.js | 16 ++ src/features/editor/index.js | 8 +- src/features/editor/parameters/Amp.js | 4 +- src/features/editor/parameters/EG.js | 2 +- src/features/editor/parameters/Filter.js | 4 +- src/features/editor/parameters/LFO.js | 2 +- src/features/editor/parameters/Mixer.js | 96 +++++---- src/features/editor/parameters/Patches.js | 2 +- src/features/editor/parameters/Pitch.js | 241 +++++++++++----------- src/features/editor/parameters/VCO.js | 131 ++++++------ src/features/menu/index.js | 4 +- src/index.css | 3 + 14 files changed, 291 insertions(+), 249 deletions(-) create mode 100644 src/features/editor/card.js diff --git a/src/App.js b/src/App.js index be3b5fd..3988204 100644 --- a/src/App.js +++ b/src/App.js @@ -4,9 +4,9 @@ import Editor from './features/editor'; function App() { return ( -
- - +
+ +
); } diff --git a/src/features/editor/Timbre.js b/src/features/editor/Timbre.js index dea804a..a20a2d9 100644 --- a/src/features/editor/Timbre.js +++ b/src/features/editor/Timbre.js @@ -13,8 +13,9 @@ import { selectById } from './timbreSlice.js'; export default function Timbre(props) { const ids = useSelector((state) => selectById(state, props.id)); return ( -
+
- - - - - - -
+ + + + + + - +
); } diff --git a/src/features/editor/card.js b/src/features/editor/card.js new file mode 100644 index 0000000..393f4ab --- /dev/null +++ b/src/features/editor/card.js @@ -0,0 +1,16 @@ +export default function Card(props = { className: 'col-span-2' }) { + return ( +
+
+

{props.header}

+
+
+ {props.children} +
+
+ ); +} diff --git a/src/features/editor/index.js b/src/features/editor/index.js index 2d610f7..af45d38 100644 --- a/src/features/editor/index.js +++ b/src/features/editor/index.js @@ -4,10 +4,10 @@ import Effects from './Effects'; import Arpeggio from './Arpeggio'; import { useSelector } from 'react-redux'; -const Editor = () => { +export default function Editor() { const activeTab = useSelector((state) => state.parameters.activeTab); return ( -
+
{activeTab === 'Timbre1' ? : null} {activeTab === 'Timbre2' ? : null} {activeTab === 'Vocoder' ? : null} @@ -15,6 +15,4 @@ const Editor = () => { {activeTab === 'Arpeggio' ? : null}
); -}; - -export default Editor; +} diff --git a/src/features/editor/parameters/Amp.js b/src/features/editor/parameters/Amp.js index ac0f43a..38cfa20 100644 --- a/src/features/editor/parameters/Amp.js +++ b/src/features/editor/parameters/Amp.js @@ -8,7 +8,7 @@ export default function Amp(props) { const dispatch = useDispatch(); return ( -
+
{`${props.name}`} Amp Level { const dispatch = useDispatch(); return ( -
+
{`${props.name}`} Amp Level +
{`${props.name}`} Attack +
{`${props.name}`} Filter Type { const parameters = useSelector((state) => selectById(state, props.id)); const dispatch = useDispatch(); return ( -
+
{`${props.name}`} Cutoff +
{`${props.name}`} LFO Waveform - {`${props.name}`} - Volume 1 - - dispatch( - parameterUpdated({ - id: props.id, - changes: { vol1: value }, - }) - ) - } - /> - Volume 2 - - dispatch( - parameterUpdated({ - id: props.id, - changes: { vol2: value }, - }) - ) - } - /> - Volume 3 - - dispatch( - parameterUpdated({ - id: props.id, - changes: { vol3: value }, - }) - ) - } - /> -
+ +
+

Volume 1

+ + dispatch( + parameterUpdated({ + id: props.id, + changes: { vol1: value }, + }) + ) + } + /> +
+
+

Volume 2

+ + dispatch( + parameterUpdated({ + id: props.id, + changes: { vol2: value }, + }) + ) + } + /> +
+
+

Volume 3

+ + dispatch( + parameterUpdated({ + id: props.id, + changes: { vol3: value }, + }) + ) + } + /> +
+ ); } diff --git a/src/features/editor/parameters/Patches.js b/src/features/editor/parameters/Patches.js index d165ca6..fb8be2e 100644 --- a/src/features/editor/parameters/Patches.js +++ b/src/features/editor/parameters/Patches.js @@ -70,7 +70,7 @@ export default function Patches(props) { const dispatch = useDispatch(); return ( -
+
{`${props.name}`} selectById(state, props.id)); const dispatch = useDispatch(); return ( -
- {`${props.name}`} -
- Voice Assign - - dispatch( - parameterUpdated({ - id: props.id, - changes: { voiceAssign: value }, - }) - ) - } - /> - Trigger Mode - - dispatch( - parameterUpdated({ - id: props.id, - changes: { triggerMode: value }, - }) - ) - } - /> - Transpose - - dispatch( - parameterUpdated({ - id: props.id, - changes: { transpose: value }, - }) - ) - } - /> + +
+
+

Voice Assign

+ + dispatch( + parameterUpdated({ + id: props.id, + changes: { triggerMode: value }, + }) + ) + } + /> +

Transpose

+ + dispatch( + parameterUpdated({ + id: props.id, + changes: { transpose: value }, + }) + ) + } + /> +

Tune

+ + dispatch( + parameterUpdated({ + id: props.id, + changes: { tune: value }, + }) + ) + } + /> +
+
+
+

Unison Detune

+ + dispatch( + parameterUpdated({ + id: props.id, + changes: { unisonDetune: value }, + }) + ) + } + /> +

Portamento

+ + dispatch( + parameterUpdated({ + id: props.id, + changes: { portamento: value }, + }) + ) + } + /> +

Bend Range

+ + dispatch( + parameterUpdated({ + id: props.id, + changes: { bendRange: value }, + }) + ) + } + /> +

Vibrato Intensity

+ + dispatch( + parameterUpdated({ + id: props.id, + changes: { vibratoIntensity: value }, + }) + ) + } + /> +
-
-
- Tune - - dispatch( - parameterUpdated({ - id: props.id, - changes: { tune: value }, - }) - ) - } - /> - Unisone Detune - - dispatch( - parameterUpdated({ - id: props.id, - changes: { unisonDetune: value }, - }) - ) - } - /> - Portamento - - dispatch( - parameterUpdated({ - id: props.id, - changes: { portamento: value }, - }) - ) - } - /> - Bend Range - - dispatch( - parameterUpdated({ - id: props.id, - changes: { bendRange: value }, - }) - ) - } - /> - Vibrato Intensity - - dispatch( - parameterUpdated({ - id: props.id, - changes: { vibratoIntensity: value }, - }) - ) - } - /> -
-
+ ); } diff --git a/src/features/editor/parameters/VCO.js b/src/features/editor/parameters/VCO.js index 2ebbbc9..7c2c6fd 100644 --- a/src/features/editor/parameters/VCO.js +++ b/src/features/editor/parameters/VCO.js @@ -1,70 +1,81 @@ import React from 'react'; +import Card from '../card'; import { useSelector, useDispatch } from 'react-redux'; import { selectById, parameterUpdated } from './parameterSlice.js'; -import { Slider, SelectList, Checkbox } from '../../helpers/Helpers'; +import { Select } from '../../utils/components'; +import { Slider, Checkbox } from '../../helpers/Helpers'; export default function VCO(props) { const parameters = useSelector((state) => selectById(state, props.id)); - const dispatch = useDispatch(); + return ( -
- {`${props.name}`} - Waveform - - dispatch( - parameterUpdated({ - id: props.id, - changes: { waveform: value }, - }) - ) - } - /> - {`${props.dwgsOrModTypeName}`} - - dispatch( - parameterUpdated({ - id: props.id, - changes: { dwgsOrModType: value }, - }) - ) - } - /> - Waveform Mod - - dispatch( - parameterUpdated({ - id: props.id, - changes: { waveMod: value }, - }) - ) - } - /> - LFO Mod - - dispatch( - parameterUpdated({ - id: props.id, - changes: { lfoMod: value }, - }) - ) - } - /> -
+ +
+

Waveform

+ + dispatch( + parameterUpdated({ + id: props.id, + changes: { dwgsOrModType: value }, + }) + ) + } + /> +
+
+

Waveform Mod

+ + dispatch( + parameterUpdated({ + id: props.id, + changes: { waveMod: value }, + }) + ) + } + /> +
+
+

LFO Mod

+ + dispatch( + parameterUpdated({ + id: props.id, + changes: { lfoMod: value }, + }) + ) + } + /> +
+ ); } @@ -73,7 +84,7 @@ export const AudioIn = (props) => { const dispatch = useDispatch(); return ( -
+
{`${props.name}`} Gate +