redesign complete

.remove unused import

src/features/editor/Arpeggio.js

@@ -1,6 +1,9 @@
 import React from 'react';
-import { useSelector } from 'react-redux';
+import { useSelector, useDispatch } from 'react-redux';
-import { selectById } from './timbreSlice.js';
+import { selectById } from './parameters/parameterSlice.js';
+import Card from './card';
+import { Knob, Select, Checkbox } from '../utils/components';
+import { parameterUpdated } from './parameters/parameterSlice';
 import { ArpeggA, ArpeggB } from './parameters/Arpeggios';
 
 export default function Arpeggio(props) {
@@ -12,3 +15,209 @@ export default function Arpeggio(props) {
     </div>
   );
 }
+
+export function Arpeggiator(props) {
+  const parameters_1 = useSelector((state) => selectById(state, props.id1));
+  const parameters_2 = useSelector((state) => selectById(state, props.id2));
+  const dispatch = useDispatch();
+  return (
+    <Card className={props.className} header='Arpeggiator'>
+      <div className='flex flex-row'>
+        <section className='flex flex-col justify-around w-2/5'>
+          <div className='flex flex-row items-center justify-between'>
+            <h3>Type</h3>
+            <Select
+              className='select w-1/2'
+              value={parameters_1.type}
+              list={[
+                { value: 'Up' },
+                { value: 'Down' },
+                { value: 'Alternate 1' },
+                { value: 'Alternate 2' },
+                { value: 'Random' },
+                { value: 'Trigger' },
+              ]}
+              onChange={(value) =>
+                dispatch(
+                  parameterUpdated({
+                    id: props.id1,
+                    changes: { type: value },
+                  })
+                )
+              }
+            />
+          </div>
+          <div className='flex flex-row items-center justify-between'>
+            <h3>Range</h3>
+            <Select
+              className='select w-1/2'
+              labelFunction={(v) => `${v.value} Oct`}
+              value={parameters_1.range}
+              list={[{ value: 1 }, { value: 2 }, { value: 3 }, { value: 4 }]}
+              onChange={(value) =>
+                dispatch(
+                  parameterUpdated({
+                    id: props.id1,
+                    changes: { range: value },
+                  })
+                )
+              }
+            />
+          </div>
+          <div className='flex flex-row items-center justify-between'>
+            <h3>Resolution</h3>
+            <Select
+              className='select w-1/2'
+              value={parameters_1.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.id1,
+                    changes: { resolution: value },
+                  })
+                )
+              }
+            />
+          </div>
+        </section>
+        <section className=' -mt-4 flex flex-col justify-around w-1/5'>
+          <div className='flex flex-col'>
+            <div className='flex flex-col items-center'>
+              <h3>Tempo</h3>
+              <Knob
+                max={280}
+                offset={20}
+                value={parameters_1.tempo - 20}
+                onChange={(value) =>
+                  dispatch(
+                    parameterUpdated({
+                      id: props.id1,
+                      changes: { tempo: value + 20 },
+                    })
+                  )
+                }
+              />
+            </div>
+            <div className='flex flex-col items-center'>
+              <h3>Gate</h3>
+              <Knob
+                max={100}
+                value={parameters_1.gate}
+                onChange={(value) =>
+                  dispatch(
+                    parameterUpdated({
+                      id: props.id1,
+                      changes: { gate: value },
+                    })
+                  )
+                }
+              />
+            </div>
+            <div className='flex flex-col items-center'>
+              <h3>Swing</h3>
+              <Knob
+                dual={true}
+                max={100}
+                value={parameters_2.swing}
+                onChange={(value) =>
+                  dispatch(
+                    parameterUpdated({
+                      id: props.id2,
+                      changes: { swing: value },
+                    })
+                  )
+                }
+              />
+            </div>
+          </div>
+        </section>
+        <section className='flex flex-col space-y-4 w-2/5'>
+          <div className='flex flex-row items-center justify-between'>
+            <h3>Target</h3>
+            <Select
+              className='select w-1/2'
+              value={parameters_2.target}
+              list={[
+                { value: 'Both' },
+                { value: 'Timbre 1' },
+                { value: 'Timbre 2' },
+              ]}
+              onChange={(value) =>
+                dispatch(
+                  parameterUpdated({
+                    id: props.id2,
+                    changes: { target: value },
+                  })
+                )
+              }
+            />
+          </div>
+          <div className='flex flex-row items-center justify-between'>
+            <h3>Last Step</h3>
+            <Select
+              className='select w-1/2'
+              labelFunction={(v) => `Step ${v.value}`}
+              value={parameters_2.lastStep}
+              list={[
+                { value: 1 },
+                { value: 2 },
+                { value: 3 },
+                { value: 4 },
+                { value: 5 },
+                { value: 6 },
+                { value: 7 },
+                { value: 8 },
+              ]}
+              onChange={(value) =>
+                dispatch(
+                  parameterUpdated({
+                    id: props.id2,
+                    changes: { lastStep: value },
+                  })
+                )
+              }
+            />
+          </div>
+          <div className='flex flex-row justify-around'>
+            <div className='flex flex-col items-center w-1/2'>
+              <h3>Key Sync</h3>
+              <Checkbox
+                parameter={parameters_2.keySync}
+                onChange={(value) =>
+                  dispatch(
+                    parameterUpdated({
+                      id: props.id2,
+                      changes: { keySync: value },
+                    })
+                  )
+                }
+              />
+            </div>
+            <div className='flex flex-col items-center w-1/2'>
+              <h3>Latch</h3>
+              <Checkbox
+                parameter={parameters_2.latch}
+                onChange={(value) =>
+                  dispatch(
+                    parameterUpdated({
+                      id: props.id2,
+                      changes: { latch: value },
+                    })
+                  )
+                }
+              />
+            </div>
+          </div>
+        </section>
+      </div>
+    </Card>
+  );
+}

src/features/editor/Effects.js

@@ -2,14 +2,29 @@ import React from 'react';
 import { useSelector } from 'react-redux';
 import { ModFX, Delay, EQ } from './parameters/ModFX';
 import { selectById } from './timbreSlice.js';
+import { Arpeggiator } from './Arpeggio';
 
 export default function Effects(props) {
   const ids = useSelector((state) => selectById(state, props.id));
   return (
-    <div>
+    <div className='h-screen grid grid-cols-10 grid-rows-6 gap-4 p-6'>
-      <ModFX id={ids.modfx} />
+      <ModFX
-      <Delay id={ids.delay} />
+        className='row-start-2 col-start-3 col-span-2 row-span-2'
-      <EQ id={ids.eq} />
+        id={ids.modfx}
+      />
+      <Delay
+        className='row-start-2 col-start-5 col-span-2 row-span-2'
+        id={ids.delay}
+      />
+      <EQ
+        className='row-start-2 col-start-7 col-span-2 row-span-2'
+        id={ids.eq}
+      />
+      <Arpeggiator
+        className='row-start-4 row-span-2 col-start-4 col-span-4'
+        id1={ids.arpeggA}
+        id2={ids.arpeggB}
+      />
     </div>
   );
 }

src/features/editor/index.js

@@ -12,7 +12,6 @@ export default function Editor() {
       {activeTab === 'Timbre2' ? <Timbre id='timbre2' /> : null}
       {activeTab === 'Vocoder' ? <Vocoder id='vocoder' /> : null}
       {activeTab === 'Effects' ? <Effects id='effects' /> : null}
-      {activeTab === 'Arpeggio' ? <Arpeggio id='arpeggio' /> : null}
     </div>
   );
 }

src/features/editor/parameters/Arpeggios.js

@@ -1,4 +1,5 @@
 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';
@@ -8,7 +9,7 @@ const ArpeggA = (props) => {
   const dispatch = useDispatch();
 
   return (
-    <div>
+    <Card className={props.className} header='Arpeggio A'>
       <span>Arpeggio A.</span>
       <div>
         Tempo
@@ -97,7 +98,7 @@ const ArpeggA = (props) => {
           }
         />
       </div>
-    </div>
+    </Card>
   );
 };
 

src/features/editor/parameters/ModFX.js

@@ -1,17 +1,19 @@
 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 { Knob, Select, Checkbox } from '../../utils/components';
 
 const ModFX = (props) => {
   const parameters = useSelector((state) => selectById(state, props.id));
   const dispatch = useDispatch();
 
   return (
-    <div>
+    <Card className={props.className} header='Mod FX'>
-      <span>Mod FX</span>
+      <div className='flex flex-row items-center justify-between'>
-      Mod Type
+        <h3>Mod Type</h3>
-      <SelectList
+        <Select
+          className='select'
           value={parameters.type}
           list={[
             { value: 'Flanger/Chorus' },
@@ -27,11 +29,12 @@ const ModFX = (props) => {
             )
           }
         />
-      LFO Speed
+      </div>
-      <Slider
+      <div className='flex flex-col items-center'>
-        min={0}
+        <h3>LFO Speed</h3>
+        <Knob
           max={127}
-        parameter={parameters.lfoSpeed}
+          value={parameters.lfoSpeed}
           onChange={(value) =>
             dispatch(
               parameterUpdated({
@@ -41,11 +44,12 @@ const ModFX = (props) => {
             )
           }
         />
-      Mod FX Depth
+      </div>
-      <Slider
+      <div className='flex flex-col items-center'>
-        min={0}
+        <h3>Mod FX Depth</h3>
+        <Knob
           max={127}
-        parameter={parameters.effectDepth}
+          value={parameters.effectDepth}
           onChange={(value) =>
             dispatch(
               parameterUpdated({
@@ -56,6 +60,7 @@ const ModFX = (props) => {
           }
         />
       </div>
+    </Card>
   );
 };
 
@@ -64,10 +69,11 @@ const Delay = (props) => {
   const dispatch = useDispatch();
 
   return (
-    <div>
+    <Card className={props.className} header='Delay'>
-      <span>Delay</span>
+      <div className='flex flex-row items-center justify-between'>
-      Delay Type
+        <h3>Delay Type</h3>
-      <SelectList
+        <Select
+          className='select'
           value={parameters.type}
           list={[
             { value: 'Stereo Delay' },
@@ -83,9 +89,11 @@ const Delay = (props) => {
             )
           }
         />
+      </div>
+      <div className='flex flex-col items-center'>
+        <h3>Tempo Sync</h3>
         <Checkbox
-        name='Tempo Sync'
+          value={parameters.tempoSync}
-        parameter={parameters.tempoSync}
           onChange={(value) =>
             dispatch(
               parameterUpdated({
@@ -95,10 +103,13 @@ const Delay = (props) => {
             )
           }
         />
+      </div>
+      <div className='flex flex-row'>
         {parameters.tempoSync ? (
-        <div>
+          <div className='flex flex-col items-center w-1/2'>
-          Sync Note
+            <h3>Sync Note</h3>
-          <SelectList
+            <Select
+              className='select'
               value={parameters.syncNote}
               list={[
                 { value: '1/32' },
@@ -128,12 +139,11 @@ const Delay = (props) => {
             />
           </div>
         ) : (
-        <div>
+          <div className='flex flex-col items-center w-1/2'>
-          Delay Time
+            <h3>Delay Time</h3>
-          <Slider
+            <Knob
-            min={0}
               max={127}
-            parameter={parameters.delayTime}
+              value={parameters.delayTime}
               onChange={(value) =>
                 dispatch(
                   parameterUpdated({
@@ -145,11 +155,11 @@ const Delay = (props) => {
             />
           </div>
         )}
-      Delay Depth
+        <div className='flex flex-col items-center w-1/2'>
-      <Slider
+          <h3>Delay Depth</h3>
-        min={0}
+          <Knob
             max={127}
-        parameter={parameters.delayDepth}
+            value={parameters.delayDepth}
             onChange={(value) =>
               dispatch(
                 parameterUpdated({
@@ -160,6 +170,8 @@ const Delay = (props) => {
             }
           />
         </div>
+      </div>
+    </Card>
   );
 };
 
@@ -168,10 +180,11 @@ const EQ = (props) => {
   const dispatch = useDispatch();
 
   return (
-    <div>
+    <Card className={props.className} header='EQ'>
-      <span>EQ</span>
+      <div className='flex flex-row items-center justify-between'>
-      Low EQ Frequency
+        <h3>Low Freq</h3>
-      <SelectList
+        <Select
+          className='select w-2/4'
           labelFunction={(e) => `${e.value}kHz`}
           value={parameters.lowFrequency}
           list={[
@@ -215,22 +228,11 @@ const EQ = (props) => {
             )
           }
         />
-      Low EQ Gain
+      </div>
-      <Slider
+      <div className='flex flex-row items-center justify-between'>
-        min={-12}
+        <h3>High Freq</h3>
-        max={12}
+        <Select
-        parameter={parameters.lowGain}
+          className='select w-2/4'
-        onChange={(value) =>
-          dispatch(
-            parameterUpdated({
-              id: props.id,
-              changes: { lowGain: value },
-            })
-          )
-        }
-      />
-      High EQ Frequency
-      <SelectList
           labelFunction={(e) => `${e.value}kHz`}
           value={parameters.highFrequency}
           list={[
@@ -274,11 +276,30 @@ const EQ = (props) => {
             )
           }
         />
-      High EQ Gain
+      </div>
-      <Slider
+      <div className='flex flex-row'>
-        min={-12}
+        <div className='flex flex-col items-center w-1/2'>
+          <h3>Low Gain</h3>
+          <Knob
+            dual={true}
             max={12}
-        parameter={parameters.highGain}
+            value={parameters.lowGain}
+            onChange={(value) =>
+              dispatch(
+                parameterUpdated({
+                  id: props.id,
+                  changes: { lowGain: value },
+                })
+              )
+            }
+          />
+        </div>
+        <div className='flex flex-col items-center w-1/2'>
+          <h3>High Gain</h3>
+          <Knob
+            dual={true}
+            max={12}
+            value={parameters.highGain}
             onChange={(value) =>
               dispatch(
                 parameterUpdated({
@@ -289,6 +310,8 @@ const EQ = (props) => {
             }
           />
         </div>
+      </div>
+    </Card>
   );
 };
 

src/features/editor/parameters/Pitch.js

@@ -3,7 +3,6 @@ import Card from '../card';
 import { useSelector, useDispatch } from 'react-redux';
 import { selectById, parameterUpdated } from './parameterSlice.js';
 import { Select, Knob } from '../../utils/components';
-import { Slider } from '../../helpers/Helpers';
 
 export default function Pitch(props) {
   const parameters = useSelector((state) => selectById(state, props.id));

src/features/editor/timbreSlice.js

@@ -56,6 +56,8 @@ const timbreSlice = createSlice({
         modfx: 'modfx',
         delay: 'delay',
         eq: 'eq',
+        arpeggA: 'arpeggA',
+        arpeggB: 'arpeggB',
       },
       arpeggio: {
         arpeggA: 'arpeggA',

src/features/menu/index.js

@@ -142,14 +142,7 @@ export default function Menu() {
           onClick={() => {
             dispatch(parameterUpdateTab('Effects'));
           }}>
-          Effects
+          Arp/FX
-        </button>
-        <button
-          className={activeTab === 'Arpeggio' ? `btn btn-active` : `btn`}
-          onClick={() => {
-            dispatch(parameterUpdateTab('Arpeggio'));
-          }}>
-          Arpeggio
         </button>
       </div>
       <div className='w-full text-center text-xl font-semibold'>

src/features/utils/components.js

@@ -10,7 +10,7 @@ const Select = (props) => {
       value={props.value}>
       {props.list.map((element) => (
         <option key={element.value} value={element.value}>
-          {element.value}
+          {props.labelFunction ? props.labelFunction(element) : element.value}
         </option>
       ))}
     </select>
@@ -89,6 +89,7 @@ function Knob({
   value = 0,
   fillWidth = 4,
   onChange,
+  offset = 0,
 }) {
   value = value / max;
   const uid = useMemo(() => knob_id++, []);
@@ -160,7 +161,7 @@ function Knob({
         className={` ${
           isDragging ? 'opacity-100' : 'opacity-0 hidden'
         } transition duration-75 ease-in select-none pointer-events-none absolute -mt-6 bg-gray-800 text-white truncate text-xs box-content rounded text-center w-8 py-0.5`}>
-        {Math.round(value * max)}
+        {Math.round(value * max + offset)}
       </div>
       <svg
         className={` ${