diff --git a/src/app/store.js b/src/app/store.js index 30c0c5a..a7faa8b 100644 --- a/src/app/store.js +++ b/src/app/store.js @@ -1,10 +1,10 @@ import { configureStore } from '@reduxjs/toolkit'; import counterReducer from '../features/counter/counterSlice'; -import timbreReducer from '../features/timbre/timbreSlice'; +import parameterReducer from '../features/timbre/parameters/parameterSlice'; export default configureStore({ reducer: { counter: counterReducer, - timbre: timbreReducer, + parameters: parameterReducer, }, }); diff --git a/src/features/timbre/Timbre.js b/src/features/timbre/Timbre.js index e34a769..1db9b27 100644 --- a/src/features/timbre/Timbre.js +++ b/src/features/timbre/Timbre.js @@ -2,5 +2,10 @@ import React from 'react'; import VCO from './parameters/VCO'; export function Timbre(props) { - return ; + return ( +
+ + +
+ ); } diff --git a/src/features/timbre/parameters/VCO.js b/src/features/timbre/parameters/VCO.js index 469d390..398d05d 100644 --- a/src/features/timbre/parameters/VCO.js +++ b/src/features/timbre/parameters/VCO.js @@ -1,6 +1,6 @@ import React from 'react'; import { useSelector, useDispatch } from 'react-redux'; -import { selectById, parameterUpdated } from '../timbreSlice.js'; +import { selectById, parameterUpdated } from './parameterSlice.js'; export default function VCO(props) { const parameters = useSelector((state) => selectById(state, props.id)); @@ -14,7 +14,7 @@ export default function VCO(props) { onClick={() => dispatch( parameterUpdated({ - id: 'vco1', + id: props.id, changes: { waveform: 'Triangle' }, }) ) @@ -22,17 +22,17 @@ export default function VCO(props) { {' '} Set Waveform to Triangle{' '} - Current Mod Value {parameters.mod} + Current Mod Value {parameters.waveMod} dispatch( parameterUpdated({ - id: 'vco1', - changes: { mod: e.target.value }, + id: props.id, + changes: { waveMod: e.target.value }, }) ) } diff --git a/src/features/timbre/parameters/parameterSlice.js b/src/features/timbre/parameters/parameterSlice.js new file mode 100644 index 0000000..0b93bac --- /dev/null +++ b/src/features/timbre/parameters/parameterSlice.js @@ -0,0 +1,80 @@ +import { createSlice, createEntityAdapter } from '@reduxjs/toolkit'; + +const parametersAdapter = createEntityAdapter({}); + +const parametersSlice = createSlice({ + name: 'parameters', + initialState: parametersAdapter.getInitialState({ + ids: [ + 'vco1', + 'vco2', + 'mixer1', + 'timbre1', + 'filter1', + 'eg1', + 'amp1', + 'eg2', + 'lfo1', + 'lfo2', + 'patches1', + ], + entities: { + 'vco1': { + id: 'vco1', + waveform: 'Saw', + dwgsOrModType: 0, + waveMod: 0, + lfoMod: 0, + }, + 'vco2': { + id: 'vco2', + waveform: 'Saw', + dwgsOrModType: 0, + waveMod: 0, + lfoMod: 0, + }, + 'mixer1': { + id: 'mixer1', + vol1: 127, + vol2: 0, + vol3: 0, + }, + 'timbre1': { + id: 'timbre1', + }, + 'filter1': { + id: 'filter1', + }, + 'eg1': { + id: 'eg1', + }, + 'amp1': { + id: 'amp1', + }, + 'eg2': { + id: 'eg2', + }, + 'lfo1': { + id: 'lfo1', + }, + 'lfo2': { + id: 'lfo2', + }, + }, + }), + reducers: { + parameterAdded: parametersAdapter.addOne, + parameterUpdated: parametersAdapter.updateOne, + }, +}); + +export const { + selectById, + selectAll, + selectEntities, + selectIds, +} = parametersAdapter.getSelectors((state) => state.parameters); + +export const { parameterAdded, parameterUpdated } = parametersSlice.actions; + +export default parametersSlice.reducer; diff --git a/src/features/timbre/timbreSlice.js b/src/features/timbre/timbreSlice.js deleted file mode 100644 index 365322c..0000000 --- a/src/features/timbre/timbreSlice.js +++ /dev/null @@ -1,32 +0,0 @@ -import { createSlice, createEntityAdapter } from '@reduxjs/toolkit'; - -const timbreAdapter = createEntityAdapter({}); - -const timbreSlice = createSlice({ - name: 'timbre', - initialState: timbreAdapter.getInitialState({ - ids: ['vco1'], - entities: { - vco1: { - id: 'vco1', - waveform: 'Saw', - mod: 0, - }, - }, - }), - reducers: { - parameterAdded: timbreAdapter.addOne, - parameterUpdated: timbreAdapter.updateOne, - }, -}); - -export const { - selectById, - selectAll, - selectEntities, - selectIds, -} = timbreAdapter.getSelectors((state) => state.timbre); - -export const { parameterAdded, parameterUpdated } = timbreSlice.actions; - -export default timbreSlice.reducer;