add Arpeggio / finish all Components

src/features/timbre/Arpeggio.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { selectById } from './timbreSlice.js';
+import { ArpeggA, ArpeggB } from './parameters/Arpeggios';
+import styles from './Timbre.module.css';
+
+export default function Arpeggio(props) {
+  const ids = useSelector((state) => selectById(state, props.id));
+  return (
+    <div className={styles.timbreStyle}>
+      <ArpeggA id={ids.arpeggA} />
+      <ArpeggB id={ids.arpeggB} />
+    </div>
+  );
+}

src/features/timbre/parameters/Arpeggios.js

@@ -0,0 +1,199 @@
+import React from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { selectById, parameterUpdated } from './parameterSlice.js';
+import { Slider, SelectList, Checkbox } from '../../helpers/Helpers';
+import styles from './Parameters.module.css';
+
+const ArpeggA = (props) => {
+  const parameters = useSelector((state) => selectById(state, props.id));
+  const dispatch = useDispatch();
+
+  return (
+    <div className={styles.horizontalContainer}>
+      <span className={styles.header}>Arpeggio A.</span>
+      <div className={styles.container}>
+        Tempo
+        <Slider
+          min={20}
+          max={300}
+          parameter={parameters.tempo}
+          onChange={(value) =>
+            dispatch(
+              parameterUpdated({
+                id: props.id,
+                changes: { tempo: value },
+              })
+            )
+          }
+        />
+        Resolution
+        <SelectList
+          value={parameters.resolution}
+          list={[
+            { value: '1/24' },
+            { value: '1/16' },
+            { value: '1/12' },
+            { value: '1/8' },
+            { value: '1/6' },
+            { value: '1/4' },
+          ]}
+          onChange={(value) =>
+            dispatch(
+              parameterUpdated({
+                id: props.id,
+                changes: { resolution: value },
+              })
+            )
+          }
+        />
+        Gate
+        <Slider
+          min={0}
+          max={100}
+          parameter={parameters.gate}
+          onChange={(value) =>
+            dispatch(
+              parameterUpdated({
+                id: props.id,
+                changes: { gate: value },
+              })
+            )
+          }
+        />
+      </div>
+      <div className={styles.divider} />
+      <div className={styles.container}>
+        Type
+        <SelectList
+          value={parameters.type}
+          list={[
+            { value: 'Up' },
+            { value: 'Down' },
+            { value: 'Alternate 1' },
+            { value: 'Alternate 2' },
+            { value: 'Random' },
+            { value: 'Trigger' },
+          ]}
+          onChange={(value) =>
+            dispatch(
+              parameterUpdated({
+                id: props.id,
+                changes: { type: value },
+              })
+            )
+          }
+        />
+        Range
+        <SelectList
+          labelFunction={(v) => `${v.value} Oct`}
+          value={parameters.range}
+          list={[{ value: 1 }, { value: 2 }, { value: 3 }, { value: 4 }]}
+          onChange={(value) =>
+            dispatch(
+              parameterUpdated({
+                id: props.id,
+                changes: { range: value },
+              })
+            )
+          }
+        />
+      </div>
+    </div>
+  );
+};
+
+const ArpeggB = (props) => {
+  const parameters = useSelector((state) => selectById(state, props.id));
+  const dispatch = useDispatch();
+
+  return (
+    <div className={styles.horizontalContainer}>
+      <span className={styles.header}>Arpeggio B.</span>
+      <div className={styles.container}>
+        <Checkbox
+          name="Latch"
+          parameter={parameters.latch}
+          onChange={(value) =>
+            dispatch(
+              parameterUpdated({
+                id: props.id,
+                changes: { latch: value },
+              })
+            )
+          }
+        />
+        Swing
+        <Slider
+          min={-100}
+          max={100}
+          parameter={parameters.swing}
+          onChange={(value) =>
+            dispatch(
+              parameterUpdated({
+                id: props.id,
+                changes: { swing: value },
+              })
+            )
+          }
+        />
+        <Checkbox
+          name="Key Sync"
+          parameter={parameters.keySync}
+          onChange={(value) =>
+            dispatch(
+              parameterUpdated({
+                id: props.id,
+                changes: { keySync: value },
+              })
+            )
+          }
+        />
+      </div>
+      <div className={styles.divider} />
+      <div className={styles.container}>
+        Last Step
+        <SelectList
+          labelFunction={(v) => `Step ${v.value}`}
+          value={parameters.lastStep}
+          list={[
+            { value: 1 },
+            { value: 2 },
+            { value: 3 },
+            { value: 4 },
+            { value: 5 },
+            { value: 6 },
+            { value: 7 },
+            { value: 8 },
+          ]}
+          onChange={(value) =>
+            dispatch(
+              parameterUpdated({
+                id: props.id,
+                changes: { lastStep: value },
+              })
+            )
+          }
+        />
+        Target Timbre
+        <SelectList
+          value={parameters.target}
+          list={[
+            { value: 'Both' },
+            { value: 'Timbre 1' },
+            { value: 'Timbre 2' },
+          ]}
+          onChange={(value) =>
+            dispatch(
+              parameterUpdated({
+                id: props.id,
+                changes: { target: value },
+              })
+            )
+          }
+        />
+      </div>
+    </div>
+  );
+};
+
+export { ArpeggA, ArpeggB };

src/features/timbre/parameters/parameterSlice.js

@@ -43,6 +43,8 @@ const parametersSlice = createSlice({
       'modfx',
       'delay',
       'eq',
+      'arpeggA',
+      'arpeggB',
     ],
     entities: {
       vco1: {
@@ -357,6 +359,22 @@ const parametersSlice = createSlice({
         highFrequency: 1.0,
         highGain: 0,
       },
+      arpeggA: {
+        id: 'arpeggA',
+        tempo: 20,
+        resolution: '1/24',
+        gate: 0,
+        type: 'Up',
+        range: 1,
+      },
+      arpeggB: {
+        id: 'arpeggB',
+        latch: false,
+        swing: 0,
+        keySync: false,
+        lastStep: 1,
+        target: 'Both',
+      },
     },
   }),
   reducers: {

src/features/timbre/timbreSlice.js

@@ -5,7 +5,7 @@ const timbreAdapter = createEntityAdapter({});
 const timbreSlice = createSlice({
   name: 'timbre',
   initialState: timbreAdapter.getInitialState({
-    ids: ['timbre1', 'timbre2', 'vocoder', 'effects', 'arpeggiator'],
+    ids: ['timbre1', 'timbre2', 'vocoder', 'effects', 'arpeggio'],
     entities: {
       timbre1: {
         id: 'timbre1',
@@ -56,6 +56,10 @@ const timbreSlice = createSlice({
         delay: 'delay',
         eq: 'eq',
       },
+      arpeggio: {
+        arpeggA: 'arpeggA',
+        arpeggB: 'arpeggB',
+      },
     },
     currentTimbre: 'timbre1',
   }),

src/features/timbre/timbreSwitcher.js

@@ -2,6 +2,7 @@ import React from 'react';
 import Timbre from './Timbre';
 import Vocoder from './Vocoder';
 import Effects from './Effects';
+import Arpeggio from './Arpeggio';
 import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
 import styles from './Timbre.module.css';
 
@@ -34,6 +35,9 @@ export default function TimbreSwitcher(props) {
         <TabPanel>
           <Effects id="effects" />
         </TabPanel>
+        <TabPanel>
+          <Arpeggio id="arpeggio" />
+        </TabPanel>
       </Tabs>
     </div>
   );