diff --git a/drum-machine/README.md b/drum-machine/README.md index af89e99..67f4040 100644 --- a/drum-machine/README.md +++ b/drum-machine/README.md @@ -10,6 +10,6 @@ ### TODOS -* add tip for scrolling selectionMenuItems * make sure metronome continues on volume, sound, or metronome BPM change * add additional metronome speed values +* update bpm in drumpad when metronome playing diff --git a/drum-machine/drumMachine.css b/drum-machine/drumMachine.css index 74ed080..722708e 100644 --- a/drum-machine/drumMachine.css +++ b/drum-machine/drumMachine.css @@ -65,6 +65,10 @@ body { margin-top: -10px; } +#menuScrollTip { + padding-top: 20px; +} + #display-middle { flex-basis: 62%; width: 100%; @@ -348,7 +352,7 @@ i.fa-volume-up { margin-right: auto; } - #select-volume, #display-middle-right-f, #display-middle-right-g, #volumeTip { + #select-volume, #display-middle-right-f, #display-middle-right-g, #volumeTip, #menuScrollTip { display: none; } @@ -437,7 +441,7 @@ i.fa-volume-up { margin-right: auto; } - #select-volume, #display-middle-right-f, #display-middle-right-g, #volumeTip { + #select-volume, #display-middle-right-f, #display-middle-right-g, #volumeTip, #menuScrollTip { display: none; } diff --git a/drum-machine/makeSelection.js b/drum-machine/makeSelection.js index 3ea004d..07634f3 100644 --- a/drum-machine/makeSelection.js +++ b/drum-machine/makeSelection.js @@ -33,6 +33,7 @@ const makeMetronomeSelection = (selection) => { metronomeMenuDisplayed = true; showKeyMetronomeSelectionMenu(); $('#metronomeSelectionMenu').attr("tabindex",0).focus(); + $('#display-top').append(''); } else if (padsArray.includes(selection)) { padSelectingFor = selection; showMetronomeMenu(); @@ -41,18 +42,21 @@ const makeMetronomeSelection = (selection) => { sessionStorage.setItem(padSelectingFor + 'isMetronome',false); metronomeMenuDisplayed = false; $('#display-middle-left-b').html((drumPadGrid)); + $('#menuScrollTip').remove(); makeAudioControl(padSelectingFor); } else if (selection.includes('bpm')) { sessionStorage.setItem(padSelectingFor + 'metronomeTempo',selection); sessionStorage.setItem(padSelectingFor + 'isMetronome',true); metronomeMenuDisplayed = false; $('#display-middle-left-b').html((drumPadGrid)); + $('#menuScrollTip').remove(); makeAudioControl(padSelectingFor); makeMetronomeIcons(padSelectingFor); } else if (selection === '( cancel -- back )') { if (padSelectingFor === '') { metronomeMenuDisplayed = false; $('#display-middle-left-b').html((drumPadGrid)); + $('#menuScrollTip').remove(); } else { padSelectingFor = ''; showKeyMetronomeSelectionMenu(); @@ -117,6 +121,7 @@ const makeVolumeSelection = (selection) => { volumeMenuDisplayed = true; showKeyVolumeSelectionMenu(); $('#volumeSelectionMenu').attr("tabindex",0).focus(); + $('#display-top').append(''); } else if (padsArray.includes(selection)) { padSelectingFor = selection; showVolumeMenu(); @@ -125,10 +130,12 @@ const makeVolumeSelection = (selection) => { sessionStorage.setItem((padSelectingFor + 'volume'),selection); volumeMenuDisplayed = false; $('#display-middle-left-b').html((drumPadGrid)); + $('#menuScrollTip').remove(); } else if (selection === '( cancel -- back )') { if (padSelectingFor === '') { volumeMenuDisplayed = false; $('#display-middle-left-b').html((drumPadGrid)); + $('#menuScrollTip').remove(); } else { padSelectingFor = ''; showKeyVolumeSelectionMenu(); @@ -192,13 +199,16 @@ const makeSelection = (selection) => { menuDisplayed = true; showKeySelectionMenu(); $('#selectionMenu').attr("tabindex",0).focus(); + $('#display-top').append(''); } else if (padsArray.includes(selection)) { padSelectingFor = selection; showFirstDirMenu(); + $('#menuScrollTip').remove(); } else if (selection.substring(selection.length - 4) !== '.wav' && selection !== '( cancel -- back )') { fileStringArray.push(selection); if (fileStringArray.length === 1) { showSecondDirMenu(); + $('#display-top').append(''); $('#selectionMenu').attr("tabindex",0).focus(); } else if (fileStringArray.length === 2) { showThirdDirMenu(); @@ -212,20 +222,24 @@ const makeSelection = (selection) => { sessionStorage.setItem(padSelectingFor,fileStringArray.join('/')); menuDisplayed = false; $('#display-middle-left-b').html((drumPadGrid)); + $('#menuScrollTip').remove(); makeAudioControl(padSelectingFor); } else if (selection === '( cancel -- back )') { if (fileStringArray.length === 0) { if (padSelectingFor === '') { menuDisplayed = false; $('#display-middle-left-b').html((drumPadGrid)); + $('#menuScrollTip').remove(); } else { padSelectingFor = ''; showKeySelectionMenu(); $('#selectionMenu').attr("tabindex",0).focus(); + $('#display-top').append(''); } } else if (fileStringArray.length === 1) { fileStringArray = []; showFirstDirMenu(); + $('#menuScrollTip').remove(); } else if (fileStringArray.length === 2) { fileStringArray.pop(); showSecondDirMenu();