drum-machine add notification that selectionMenu is focused

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

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;
   }
 

drum-machine/makeSelection.js

@@ -33,6 +33,7 @@ const makeMetronomeSelection = (selection) => {
     metronomeMenuDisplayed = true;
     showKeyMetronomeSelectionMenu();
     $('#metronomeSelectionMenu').attr("tabindex",0).focus();
+    $('#display-top').append('<p id="menuScrollTip">scroll menu with arrow keys or PgUpDn, "esc" key to go back</p>');
   } 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('<p id="menuScrollTip">scroll menu with arrow keys or PgUpDn, "esc" key to go back</p>');
   } 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('<p id="menuScrollTip">scroll menu with arrow keys or PgUpDn, "esc" key to go back</p>');
   } 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('<p id="menuScrollTip">scroll menu with arrow keys or PgUpDn, "esc" key to go back</p>');
       $('#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('<p id="menuScrollTip">scroll menu with arrow keys or PgUpDn, "esc" key to go back</p>');
       }
     } else if (fileStringArray.length === 1) {
       fileStringArray = [];
       showFirstDirMenu();
+      $('#menuScrollTip').remove();
     } else if (fileStringArray.length === 2)  {
       fileStringArray.pop();
       showSecondDirMenu();