cvancau/alapatch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

make button reset state

Browse Source
This commit is contained in:
[poww10s]
2020-11-21 22:44:05 -05:00
parent 813fdd3b38
commit 7c638843e6
3 changed files with 494 additions and 490 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/features/menu/Menu.css
+77 -83
View File
@@ -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';
}
src/features/menu/Menu.js
+32 -24
View File
@@ -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 (
<div>
<div className={open ? 'menu menu-true' : 'menu menu-false scale-out-tl'}>
<img src={logo} className="menu-logo" alt="logo" />
<header className="menu-title">Alapatch</header>
<div className="menu-button-container">
<button className="menu-button" onClick={HandleClick}>
New Patch
</button>
<button className="menu-button">Load Patch</button>
return (
<div>
<div className={open ? 'menu' : 'menu scale-out-tl'}>
<img src={logo} className="menu-logo" alt="logo" />
<header className="menu-title">Alapatch</header>
<div className="menu-button-container">
<button
className="menu-button"
onClick={() => {
HandleClick();
dispatch(parameterRefreshAll());
}}>
New Patch
</button>
<button className="menu-button">Load Patch</button>
</div>
</div>
{!open && (
<button
className="menu-open-button"
onClick={HandleClick}
onAnimationEnd={() => setOpen(!open)}
/>
)}
</div>
</div>
{!open && (
<button
className="menu-open-button"
onClick={HandleClick}
onAnimationEnd={() => setOpen(!open)}
/>
)}
</div>
);
);
}
src/features/timbre/parameters/parameterSlice.js
+385 -383
View File
@@ -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;