diff --git a/src/App.js b/src/App.js
index f3a334a..f02b37c 100644
--- a/src/App.js
+++ b/src/App.js
@@ -7,9 +7,9 @@ function App() {
return (
- {/*
- */}
-
+
+ {/*
+ */}
);
diff --git a/src/features/timbre/Timbre.js b/src/features/timbre/Timbre.js
index bc8a2f6..c968b4b 100644
--- a/src/features/timbre/Timbre.js
+++ b/src/features/timbre/Timbre.js
@@ -7,6 +7,7 @@ import Filter from './parameters/Filter';
import EG from './parameters/EG';
import Amp from './parameters/Amp';
import LFO from './parameters/LFO';
+import Patches from './parameters/Patches';
import { selectById } from './timbreSlice.js';
const timbreStyle = {
@@ -144,6 +145,7 @@ export default function Timbre(props) {
{ value: 'Sample & Hold' },
]}
/>
+
);
}
diff --git a/src/features/timbre/parameters/Parameters.module.css b/src/features/timbre/parameters/Parameters.module.css
index 521470b..0900284 100644
--- a/src/features/timbre/parameters/Parameters.module.css
+++ b/src/features/timbre/parameters/Parameters.module.css
@@ -14,7 +14,7 @@
margin: 2.5pt 0;
}
-.pitchContainer {
+.horizontalContainer {
font-size: small;
display: inline-flex;
flex-direction: row;
@@ -26,7 +26,7 @@
width: 420px;
height: 214px;
}
-.pitchContainer > .container {
+.horizontalContainer > .container {
padding: 0 16pt;
width: 100%;
margin: 10pt 0;
diff --git a/src/features/timbre/parameters/Patches.js b/src/features/timbre/parameters/Patches.js
new file mode 100644
index 0000000..96c6b72
--- /dev/null
+++ b/src/features/timbre/parameters/Patches.js
@@ -0,0 +1,128 @@
+import React from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { selectById, parameterUpdated } from './parameterSlice.js';
+import { Slider, SelectList } from '../../helpers/Helpers';
+import styles from './Parameters.module.css';
+
+const Patch = (props) => {
+ return (
+
+ Source
+
+ props.onChange({
+ source: value,
+ destination: props.patch.destination,
+ modIntensity: props.patch.modIntensity,
+ })
+ }
+ />
+ Destination
+
+ props.onChange({
+ source: props.patch.source,
+ destination: value,
+ modIntensity: props.patch.modIntensity,
+ })
+ }
+ />
+ Mod Intensity
+
+ props.onChange({
+ source: props.patch.source,
+ destination: props.patch.destination,
+ modIntensity: value,
+ })
+ }
+ />
+
+ );
+};
+
+export default function Patches(props) {
+ const parameters = useSelector((state) => selectById(state, props.id));
+ const dispatch = useDispatch();
+
+ return (
+
+
+ dispatch(
+ parameterUpdated({
+ id: props.id,
+ changes: {
+ patch1: value,
+ },
+ })
+ )
+ }
+ />
+
+
+ dispatch(
+ parameterUpdated({
+ id: props.id,
+ changes: {
+ patch2: value,
+ },
+ })
+ )
+ }
+ />
+
+
+ dispatch(
+ parameterUpdated({
+ id: props.id,
+ changes: { patch3: value },
+ })
+ )
+ }
+ />
+
+
+ dispatch(
+ parameterUpdated({
+ id: props.id,
+ changes: { patch4: value },
+ })
+ )
+ }
+ />
+
+ );
+}
diff --git a/src/features/timbre/parameters/Pitch.js b/src/features/timbre/parameters/Pitch.js
index 087df31..ab1b36d 100644
--- a/src/features/timbre/parameters/Pitch.js
+++ b/src/features/timbre/parameters/Pitch.js
@@ -9,7 +9,7 @@ export default function Pitch(props) {
const dispatch = useDispatch();
return (
-