diff --git a/src/features/menu/Menu.css b/src/features/menu/Menu.css index a8a08f1..f75cbdb 100644 --- a/src/features/menu/Menu.css +++ b/src/features/menu/Menu.css @@ -1,17 +1,21 @@ .menu { - position: absolute; - background: white; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - z-index: 9999; + position: absolute; + background: white; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + z-index: 9999; + top: 0; + left: 0; + min-height: 100vh; + min-width: 100vw; } .scale-out-tl { - -webkit-animation: scale-out-tl 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) - both; - animation: scale-out-tl 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both; + -webkit-animation: scale-out-tl 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53) + both; + animation: scale-out-tl 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53) both; } /* ---------------------------------------------- @@ -27,102 +31,92 @@ * ---------------------------------------- */ @-webkit-keyframes scale-out-tl { - 0% { - -webkit-transform: scale(1); - transform: scale(1); - -webkit-transform-origin: 0 0; - transform-origin: 0 0; - opacity: 1; - } - 100% { - -webkit-transform: scale(0); - transform: scale(0); - -webkit-transform-origin: 0 0; - transform-origin: 0 0; - opacity: 1; - } + 0% { + -webkit-transform: scale(1); + transform: scale(1); + -webkit-transform-origin: 0 0; + transform-origin: 0 0; + opacity: 1; + } + 100% { + -webkit-transform: scale(0); + transform: scale(0); + -webkit-transform-origin: 0 0; + transform-origin: 0 0; + opacity: 1; + } } @keyframes scale-out-tl { - 0% { - -webkit-transform: scale(1); - transform: scale(1); - -webkit-transform-origin: 0 0; - transform-origin: 0 0; - opacity: 1; - } - 100% { - -webkit-transform: scale(0); - transform: scale(0); - -webkit-transform-origin: 0 0; - transform-origin: 0 0; - opacity: 1; - } -} - -.menu-true { - top: 0; - left: 0; - min-height: 100vh; - min-width: 100vw; -} - -.menu-false { - left: -100vw; + 0% { + -webkit-transform: scale(1); + transform: scale(1); + -webkit-transform-origin: 0 0; + transform-origin: 0 0; + opacity: 1; + } + 100% { + -webkit-transform: scale(0); + transform: scale(0); + -webkit-transform-origin: 0 0; + transform-origin: 0 0; + opacity: 1; + } } .menu-logo { - height: 40vmin; - pointer-events: none; + height: 40vmin; + pointer-events: none; } .menu-title { - color: #1c1d21; - font-family: 'Lato', sans-serif; - font-weight: 700; - line-height: 1em; - font-size: calc(10px + 10vmin); - margin: 0 0 0.5em 0; + color: #1c1d21; + font-family: 'Lato', sans-serif; + font-weight: 700; + line-height: 1em; + font-size: calc(10px + 10vmin); + margin: 0 0 0.5em 0; } .menu-button, .menu-open-button { - background: transparent; - display: inline-block; - margin: 1em; - padding: 0.35em 1em; - border: 0.1em solid slateblue; - border-radius: 0.12em; - color: slateblue; - font-family: 'Roboto', sans-serif; - font-size: 1em; - font-weight: 300; - text-align: center; - outline: none; - transition: all 0.2s ease-in-out; + background: transparent; + display: inline-block; + margin: 1em; + padding: 0.35em 1em; + border: 0.1em solid slateblue; + border-radius: 0.12em; + color: slateblue; + font-family: 'Roboto', sans-serif; + font-size: 1em; + font-weight: 300; + text-align: center; + outline: none; + transition: all 0.2s ease-in-out; } .menu-button:hover { - color: white; - background: slateblue; + color: white; + background: slateblue; } .menu-open-button:hover { - color: white; - background: #ef476f; + color: white; + background: #ef476f; } .menu-open-button { - line-height: 1em; - position: absolute; - padding: 0.13em 0.3em; - color: #ef476f; - border: 0.09em solid #ef476f; - margin: 0; - top: 0.55em; - left: 0.5em; + height: 1.5em; + line-height: 0.9em; + position: absolute; + padding: 0.13em 0.3em; + color: #ef476f; + border: 0.09em solid #ef476f; + margin: 0; + top: 0.55em; + left: 0.5em; } /* change how the button is handled when screen is smaller then 880px*/ .menu-open-button::before { - content: '\2630'; + content: '\2630'; } diff --git a/src/features/menu/Menu.js b/src/features/menu/Menu.js index af9c35b..886f380 100644 --- a/src/features/menu/Menu.js +++ b/src/features/menu/Menu.js @@ -1,33 +1,41 @@ import React, { useState } from 'react'; +import { useDispatch } from 'react-redux'; // probably temporarily here +import { parameterRefreshAll } from '../timbre/parameters/parameterSlice'; // probably temporarily here import logo from '../../1f3b9.svg'; import './Menu.css'; export default function MainMenu(props) { - const [open, setOpen] = useState(true); + const [open, setOpen] = useState(true); + const dispatch = useDispatch(); - const HandleClick = () => { - setOpen(!open); - }; + const HandleClick = () => { + setOpen(!open); + }; - return ( -
-
- logo -
Alapatch
-
- - + return ( +
+
+ logo +
Alapatch
+
+ + +
+
+ {!open && ( +
-
- {!open && ( -
- ); + ); } diff --git a/src/features/timbre/parameters/parameterSlice.js b/src/features/timbre/parameters/parameterSlice.js index 0092645..1a41224 100644 --- a/src/features/timbre/parameters/parameterSlice.js +++ b/src/features/timbre/parameters/parameterSlice.js @@ -1,400 +1,402 @@ import { createSlice, createEntityAdapter } from '@reduxjs/toolkit'; const defaultState = { - ids: [ - 'vco1', - 'vco2', - 'mixer1', - 'pitch1', - 'filter1', - 'eg1', - 'amp1', - 'eg2', - 'lfo1', - 'lfo2', - 'patches1', - 'vco3', - 'vco4', - 'mixer2', - 'pitch2', - 'filter2', - 'eg3', - 'amp2', - 'eg4', - 'lfo3', - 'lfo4', - 'patches2', - 'vco5', - 'audioIn', - 'mixer3', - 'pitch3', - 'filter3', - 'fcMod', - 'eg4', - 'amp3', - 'lfo5', - 'lfo6', - 'levels', - 'pans', - 'modfx', - 'delay', - 'eq', - 'arpeggA', - 'arpeggB', - ], - entities: { - vco1: { - id: 'vco1', - waveform: 'Saw', - dwgsOrModType: 'SynWave1', - waveMod: 0, - lfoMod: 0, + ids: [ + 'vco1', + 'vco2', + 'mixer1', + 'pitch1', + 'filter1', + 'eg1', + 'amp1', + 'eg2', + 'lfo1', + 'lfo2', + 'patches1', + 'vco3', + 'vco4', + 'mixer2', + 'pitch2', + 'filter2', + 'eg3', + 'amp2', + 'eg4', + 'lfo3', + 'lfo4', + 'patches2', + 'vco5', + 'audioIn', + 'mixer3', + 'pitch3', + 'filter3', + 'fcMod', + 'eg4', + 'amp3', + 'lfo5', + 'lfo6', + 'levels', + 'pans', + 'modfx', + 'delay', + 'eq', + 'arpeggA', + 'arpeggB', + ], + entities: { + vco1: { + id: 'vco1', + waveform: 'Saw', + dwgsOrModType: 'SynWave1', + waveMod: 0, + lfoMod: 0, + }, + vco2: { + id: 'vco2', + waveform: 'Saw', + dwgsOrModType: 'Off', + waveMod: 0, + lfoMod: 0, + }, + vco3: { + id: 'vco3', + waveform: 'Saw', + dwgsOrModType: 'SynWave1', + waveMod: 0, + lfoMod: 0, + }, + vco4: { + id: 'vco4', + waveform: 'Saw', + dwgsOrModType: 'Off', + waveMod: 0, + lfoMod: 0, + }, + vco5: { + id: 'vco5', + waveform: 'Saw', + dwgsOrModType: 'SynWave1', + waveMod: 0, + lfoMod: 0, + }, + audioIn: { + id: 'audioIn', + gate: 0, + threshold: 0, + hpfLevel: 0, + hpfGate: false, + }, + mixer1: { + id: 'mixer1', + vol1: 127, + vol2: 0, + vol3: 0, + }, + mixer2: { + id: 'mixer2', + vol1: 127, + vol2: 0, + vol3: 0, + }, + mixer3: { + id: 'mixer3', + vol1: 127, + vol2: 0, + vol3: 0, + }, + pitch1: { + id: 'pitch1', + voiceAssign: 'Mono', + triggerMode: 'Single', + transpose: 0, + tune: 0, + unisonDetune: 0, + portamento: 0, + bendRange: 0, + vibratoIntensity: 0, + }, + pitch2: { + id: 'pitch2', + voiceAssign: 'Mono', + triggerMode: 'Single', + transpose: 0, + tune: 0, + unisonDetune: 0, + portamento: 0, + bendRange: 0, + vibratoIntensity: 0, + }, + pitch3: { + id: 'pitch3', + voiceAssign: 'Mono', + triggerMode: 'Single', + transpose: 0, + tune: 0, + unisonDetune: 0, + portamento: 0, + bendRange: 0, + vibratoIntensity: 0, + }, + filter1: { + id: 'filter1', + filterType: '-24db Low Pass', + cutoff: 0, + resonance: 0, + egIntensity: 0, + keyboardTrack: 0, + }, + filter2: { + id: 'filter2', + filterType: '-24db Low Pass', + cutoff: 0, + resonance: 0, + egIntensity: 0, + keyboardTrack: 0, + }, + filter3: { + id: 'filter3', + cutoff: 0, + resonance: 0, + efSense: 0, + }, + fcMod: { + id: 'fcMod', + source: 'Amp EG', + intensity: 0, + }, + eg1: { + id: 'eg1', + attack: 0, + decay: 0, + sustain: 127, + release: 0, + egReset: false, + }, + amp1: { + id: 'amp1', + ampLevel: 127, + panpot: 0, + ampTrack: 0, + distortion: false, + }, + eg2: { + id: 'eg2', + attack: 0, + decay: 0, + sustain: 127, + release: 0, + egReset: false, + }, + eg3: { + id: 'eg3', + attack: 0, + decay: 0, + sustain: 127, + release: 0, + egReset: false, + }, + amp2: { + id: 'amp2', + ampLevel: 127, + panpot: 0, + ampTrack: 0, + distortion: false, + }, + eg4: { + id: 'eg4', + attack: 0, + decay: 0, + sustain: 127, + release: 0, + egReset: false, + }, + eg5: { + id: 'eg5', + attack: 0, + decay: 0, + sustain: 127, + release: 0, + egReset: false, + }, + amp3: { + id: 'amp3', + ampLevel: 127, + directLevel: 0, + ampTrack: 0, + distortion: false, + }, + lfo1: { + id: 'lfo1', + waveform: 'Saw', + keySync: 'Off', + tempoSync: false, + frequency: 0, + }, + lfo2: { + id: 'lfo2', + waveform: 'Saw', + keySync: 'Off', + tempoSync: false, + frequency: 0, + }, + lfo3: { + id: 'lfo3', + waveform: 'Saw', + keySync: 'Off', + tempoSync: false, + frequency: 0, + }, + lfo4: { + id: 'lfo4', + waveform: 'Saw', + keySync: 'Off', + tempoSync: false, + frequency: 0, + }, + lfo5: { + id: 'lfo5', + waveform: 'Saw', + keySync: 'Off', + tempoSync: false, + frequency: 0, + }, + lfo6: { + id: 'lfo6', + waveform: 'Saw', + keySync: 'Off', + tempoSync: false, + frequency: 0, + }, + patches1: { + id: 'patches1', + patch1: { + source: 'Filter EG', + destination: 'Pitch', + modIntensity: 0, + }, + patch2: { + source: 'Filter EG', + destination: 'Pitch', + modIntensity: 0, + }, + patch3: { + source: 'LFO 1', + destination: 'Pitch', + modIntensity: 0, + }, + patch4: { + source: 'LFO 2', + destination: 'Pitch', + modIntensity: 0, + }, + }, + patches2: { + id: 'patches2', + patch1: { + source: 'Filter EG', + destination: 'Pitch', + modIntensity: 0, + }, + patch2: { + source: 'Filter EG', + destination: 'Pitch', + modIntensity: 0, + }, + patch3: { + source: 'LFO 1', + destination: 'Pitch', + modIntensity: 0, + }, + patch4: { + source: 'LFO 2', + destination: 'Pitch', + modIntensity: 0, + }, + }, + levels: { + id: 'levels', + level1: 0, + level2: 0, + level3: 0, + level4: 0, + level5: 0, + level6: 0, + level7: 0, + level8: 0, + }, + pans: { + id: 'pans', + pan1: 0, + pan2: 0, + pan3: 0, + pan4: 0, + pan5: 0, + pan6: 0, + pan7: 0, + pan8: 0, + }, + modfx: { + id: 'modfx', + type: 'Flanger/Chorus', + lfoSpeed: 0, + effectDepth: 0, + }, + delay: { + id: 'delay', + type: 'Stereo Delay', + tempoSync: false, + syncNote: '1/32', + delayTime: 0, + delayDepth: 0, + }, + eq: { + id: 'eq', + lowFrequency: 40, + lowGain: 0, + 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', + }, }, - vco2: { - id: 'vco2', - waveform: 'Saw', - dwgsOrModType: 'Off', - waveMod: 0, - lfoMod: 0, - }, - vco3: { - id: 'vco3', - waveform: 'Saw', - dwgsOrModType: 'SynWave1', - waveMod: 0, - lfoMod: 0, - }, - vco4: { - id: 'vco4', - waveform: 'Saw', - dwgsOrModType: 'Off', - waveMod: 0, - lfoMod: 0, - }, - vco5: { - id: 'vco5', - waveform: 'Saw', - dwgsOrModType: 'SynWave1', - waveMod: 0, - lfoMod: 0, - }, - audioIn: { - id: 'audioIn', - gate: 0, - threshold: 0, - hpfLevel: 0, - hpfGate: false, - }, - mixer1: { - id: 'mixer1', - vol1: 127, - vol2: 0, - vol3: 0, - }, - mixer2: { - id: 'mixer2', - vol1: 127, - vol2: 0, - vol3: 0, - }, - mixer3: { - id: 'mixer3', - vol1: 127, - vol2: 0, - vol3: 0, - }, - pitch1: { - id: 'pitch1', - voiceAssign: 'Mono', - triggerMode: 'Single', - transpose: 0, - tune: 0, - unisonDetune: 0, - portamento: 0, - bendRange: 0, - vibratoIntensity: 0, - }, - pitch2: { - id: 'pitch2', - voiceAssign: 'Mono', - triggerMode: 'Single', - transpose: 0, - tune: 0, - unisonDetune: 0, - portamento: 0, - bendRange: 0, - vibratoIntensity: 0, - }, - pitch3: { - id: 'pitch3', - voiceAssign: 'Mono', - triggerMode: 'Single', - transpose: 0, - tune: 0, - unisonDetune: 0, - portamento: 0, - bendRange: 0, - vibratoIntensity: 0, - }, - filter1: { - id: 'filter1', - filterType: '-24db Low Pass', - cutoff: 0, - resonance: 0, - egIntensity: 0, - keyboardTrack: 0, - }, - filter2: { - id: 'filter2', - filterType: '-24db Low Pass', - cutoff: 0, - resonance: 0, - egIntensity: 0, - keyboardTrack: 0, - }, - filter3: { - id: 'filter3', - cutoff: 0, - resonance: 0, - efSense: 0, - }, - fcMod: { - id: 'fcMod', - source: 'Amp EG', - intensity: 0, - }, - eg1: { - id: 'eg1', - attack: 0, - decay: 0, - sustain: 127, - release: 0, - egReset: false, - }, - amp1: { - id: 'amp1', - ampLevel: 127, - panpot: 0, - ampTrack: 0, - distortion: false, - }, - eg2: { - id: 'eg2', - attack: 0, - decay: 0, - sustain: 127, - release: 0, - egReset: false, - }, - eg3: { - id: 'eg3', - attack: 0, - decay: 0, - sustain: 127, - release: 0, - egReset: false, - }, - amp2: { - id: 'amp2', - ampLevel: 127, - panpot: 0, - ampTrack: 0, - distortion: false, - }, - eg4: { - id: 'eg4', - attack: 0, - decay: 0, - sustain: 127, - release: 0, - egReset: false, - }, - eg5: { - id: 'eg5', - attack: 0, - decay: 0, - sustain: 127, - release: 0, - egReset: false, - }, - amp3: { - id: 'amp3', - ampLevel: 127, - directLevel: 0, - ampTrack: 0, - distortion: false, - }, - lfo1: { - id: 'lfo1', - waveform: 'Saw', - keySync: 'Off', - tempoSync: false, - frequency: 0, - }, - lfo2: { - id: 'lfo2', - waveform: 'Saw', - keySync: 'Off', - tempoSync: false, - frequency: 0, - }, - lfo3: { - id: 'lfo3', - waveform: 'Saw', - keySync: 'Off', - tempoSync: false, - frequency: 0, - }, - lfo4: { - id: 'lfo4', - waveform: 'Saw', - keySync: 'Off', - tempoSync: false, - frequency: 0, - }, - lfo5: { - id: 'lfo5', - waveform: 'Saw', - keySync: 'Off', - tempoSync: false, - frequency: 0, - }, - lfo6: { - id: 'lfo6', - waveform: 'Saw', - keySync: 'Off', - tempoSync: false, - frequency: 0, - }, - patches1: { - id: 'patches1', - patch1: { - source: 'Filter EG', - destination: 'Pitch', - modIntensity: 0, - }, - patch2: { - source: 'Filter EG', - destination: 'Pitch', - modIntensity: 0, - }, - patch3: { - source: 'LFO 1', - destination: 'Pitch', - modIntensity: 0, - }, - patch4: { - source: 'LFO 2', - destination: 'Pitch', - modIntensity: 0, - }, - }, - patches2: { - id: 'patches2', - patch1: { - source: 'Filter EG', - destination: 'Pitch', - modIntensity: 0, - }, - patch2: { - source: 'Filter EG', - destination: 'Pitch', - modIntensity: 0, - }, - patch3: { - source: 'LFO 1', - destination: 'Pitch', - modIntensity: 0, - }, - patch4: { - source: 'LFO 2', - destination: 'Pitch', - modIntensity: 0, - }, - }, - levels: { - id: 'levels', - level1: 0, - level2: 0, - level3: 0, - level4: 0, - level5: 0, - level6: 0, - level7: 0, - level8: 0, - }, - pans: { - id: 'pans', - pan1: 0, - pan2: 0, - pan3: 0, - pan4: 0, - pan5: 0, - pan6: 0, - pan7: 0, - pan8: 0, - }, - modfx: { - id: 'modfx', - type: 'Flanger/Chorus', - lfoSpeed: 0, - effectDepth: 0, - }, - delay: { - id: 'delay', - type: 'Stereo Delay', - tempoSync: false, - syncNote: '1/32', - delayTime: 0, - delayDepth: 0, - }, - eq: { - id: 'eq', - lowFrequency: 40, - lowGain: 0, - 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', - }, - }, }; const parametersAdapter = createEntityAdapter({}); const parametersSlice = createSlice({ - name: 'parameters', - initialState: parametersAdapter.getInitialState(defaultState), - reducers: { - parameterAdded: parametersAdapter.addOne, - parameterUpdated: parametersAdapter.updateOne, - parameterRefreshAll(state) { - parametersAdapter.setAll(state, defaultState); + name: 'parameters', + initialState: parametersAdapter.getInitialState(defaultState), + reducers: { + parameterAdded: parametersAdapter.addOne, + parameterUpdated: parametersAdapter.updateOne, + parameterRefreshAll: () => defaultState, }, - }, }); export const { - selectById, - selectAll, - selectEntities, - selectIds, + selectById, + selectAll, + selectEntities, + selectIds, } = parametersAdapter.getSelectors((state) => state.parameters); -export const { parameterAdded, parameterUpdated } = parametersSlice.actions; +export const { + parameterAdded, + parameterUpdated, + parameterRefreshAll, +} = parametersSlice.actions; export default parametersSlice.reducer;