fcc-challenges/drum-machine/makeSelection.js

342 lines
12 KiB
JavaScript
Raw Normal View History

2020-04-26 00:35:40 -07:00
let drumPadGrid = {};
let fileStringArray = [];
let padSelectingFor = '';
let menuDisplayed = false;
let volumeMenuDisplayed = false;
let metronomeMenuDisplayed = false;
const anyMenuDisplayed = () => {
return menuDisplayed || volumeMenuDisplayed || metronomeMenuDisplayed;
};
const padsArray = ['Q','W','E','A','S','D','Z','X','C'];
const volumeMenuArray = ['+30','+20','+10','0','-10','-20','-30'];
const stopMetronomes = () => {
padsArray.forEach(pad => {
sessionStorage.setItem(pad + 'metronomeIsPlaying', 'false');
makeMetronomeIcons(pad);
2020-04-26 00:35:40 -07:00
});
};
2020-04-26 00:35:40 -07:00
const reset = () => {
sessionStorage.clear();
initialSamples();
padsArray.forEach(pad => {
makeAudioControl(pad);
});
};
const makeMetronomeSelection = (selection) => {
if (selection === "keys") {
padSelectingFor = '';
drumPadGrid = document.getElementById('drum-pad-grid');
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>');
2020-04-26 00:35:40 -07:00
} else if (padsArray.includes(selection)) {
padSelectingFor = selection;
showMetronomeMenu();
$('#metronomeSelectionMenu').attr("tabindex",0).focus();
2020-04-26 00:35:40 -07:00
} else if (selection === 'Metronome Off') {
sessionStorage.setItem(padSelectingFor + 'isMetronome',false);
metronomeMenuDisplayed = false;
$('#display-middle-left-b').html((drumPadGrid));
$('#menuScrollTip').remove();
makeMetronomeIcons(padSelectingFor);
} else if (selection.match(/\d{2,3}/)) {
sessionStorage.setItem(padSelectingFor + 'metronomeTempo',Math.round(60000 / parseInt(selection.split(':')[1])));
2020-04-26 00:35:40 -07:00
sessionStorage.setItem(padSelectingFor + 'isMetronome',true);
metronomeMenuDisplayed = false;
$('#display-middle-left-b').html((drumPadGrid));
$('#menuScrollTip').remove();
2020-04-26 00:35:40 -07:00
makeMetronomeIcons(padSelectingFor);
} else if (selection === '( cancel -- back )') {
if (padSelectingFor === '') {
metronomeMenuDisplayed = false;
$('#display-middle-left-b').html((drumPadGrid));
$('#menuScrollTip').remove();
} else {
padSelectingFor = '';
showKeyMetronomeSelectionMenu();
$('#metronomeSelectionMenu').attr("tabindex",0).focus();
}
2020-04-26 00:35:40 -07:00
}
};
const showMetronomeMenu = () => {
const selectionMenu = Object.keys(metronomeTempos)
.map(item => (makeMetronomeSelectionMenuItem((() => {
const metronomeStringArray = item.split(' ');
if (metronomeStringArray.length === 2) {
return metronomeStringArray[0] + ': ' + metronomeTempos[item].slice(0,-4);
} else {
return metronomeStringArray[0] + ' ' + metronomeStringArray[1] + ': ' + metronomeTempos[item].slice(0,-4);
}
})())));
2020-04-26 00:35:40 -07:00
selectionMenu.unshift(makeMetronomeSelectionMenuItem('Metronome Off'));
showMetronomeSelectionMenuItems(selectionMenu);
};
const showKeyMetronomeSelectionMenu = () => {
const metronomeSelectionMenu = padsArray
.map(item => (makeMetronomeSelectionMenuItem(item)));
showMetronomeSelectionMenuItems(metronomeSelectionMenu);
};
const makeMetronomeSelectionMenuItem = (selector) => {
return '<div id="foo" class="metronomeSelectionMenuItem" title="">' + selector + '</div>';
};
const showMetronomeSelectionMenuItems = (menuItems) => {
menuItems.unshift(makeMetronomeSelectionMenuItem('( cancel -- back )'));
$('#display-middle-left-b').html(('<div id="metronomeSelectionMenu" class="selectionMenu"></div>'));
for (let i = 0; i < menuItems.length; i++) {
let j = i + 3000;
$('#metronomeSelectionMenu').append(menuItems[i].replace('foo',j));
$('#'+j).tooltip({
content: makeMetronomeSelectionMenuItemToolTipContent($('#'+j).text()),
position: { my: "right top+150", at: "center bottom" },
show: {delay: 250, duration: 0},
classes: {
"ui-tooltip": "highlight"
},
tooltipClass: "tool-tip-class",
});
}
};
const makeMetronomeSelectionMenuItemToolTipContent = (text) => {
if (padsArray.includes(text)) {
return 'set metronome tempo for ' + text + ' (or disable)';
} else if (text === 'Metronome Off') {
return 'turn metronome off for ' + padSelectingFor;
2020-04-26 00:35:40 -07:00
} else if (text === '( cancel -- back )') {
return text;
} else {
return 'set metronome temp for ' + padSelectingFor + ': ' + text.split(':')[1] + ' bpm';
2020-04-26 00:35:40 -07:00
}
};
2020-04-26 00:35:40 -07:00
const makeVolumeSelection = (selection) => {
if (selection === "keys") {
padSelectingFor = '';
drumPadGrid = document.getElementById('drum-pad-grid');
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>');
2020-04-26 00:35:40 -07:00
} else if (padsArray.includes(selection)) {
padSelectingFor = selection;
showVolumeMenu();
$('#volumeSelectionMenu').attr("tabindex",0).focus();
2020-04-26 00:35:40 -07:00
} else if (volumeMenuArray.includes(selection)) {
sessionStorage.setItem((padSelectingFor + 'volume'),selection);
volumeMenuDisplayed = false;
$('#display-middle-left-b').html((drumPadGrid));
$('#menuScrollTip').remove();
2020-04-26 00:35:40 -07:00
} else if (selection === '( cancel -- back )') {
if (padSelectingFor === '') {
volumeMenuDisplayed = false;
$('#display-middle-left-b').html((drumPadGrid));
$('#menuScrollTip').remove();
} else {
padSelectingFor = '';
showKeyVolumeSelectionMenu();
$('#volumeSelectionMenu').attr("tabindex",0).focus();
}
2020-04-26 00:35:40 -07:00
}
};
const showVolumeMenu = () => {
const selectionMenu = volumeMenuArray
.map(item => (makeVolumeSelectionMenuItem(item)));
showVolumeSelectionMenuItems(selectionMenu);
};
const showKeyVolumeSelectionMenu = () => {
const volumeSelectionMenu = padsArray
.map(item => (makeVolumeSelectionMenuItem(item)));
showVolumeSelectionMenuItems(volumeSelectionMenu);
};
const makeVolumeSelectionMenuItem = (selector) => {
return '<div id="foo" class="volumeSelectionMenuItem" title="">' + selector + '</div>';
};
const showVolumeSelectionMenuItems = (menuItems) => {
menuItems.unshift(makeVolumeSelectionMenuItem('( cancel -- back )'));
$('#display-middle-left-b').html(('<div id="volumeSelectionMenu" class="selectionMenu"></div>'));
for (let i = 0; i < menuItems.length; i++) {
let j = i + 2000;
$('#volumeSelectionMenu').append(menuItems[i].replace('foo',j));
$('#'+j).tooltip({
content: makeVolumeSelectionMenuItemToolTipContent($('#'+j).text()),
position: { my: "right top+150", at: "center bottom" },
show: {delay: 250, duration: 0},
classes: {
"ui-tooltip": "highlight"
},
tooltipClass: "tool-tip-class",
});
}
};
const makeVolumeSelectionMenuItemToolTipContent = (text) => {
if (padsArray.includes(text)) {
return 'set volume offset for ' + text;
2020-04-26 00:35:40 -07:00
} else if (text === '( cancel -- back )') {
return text;
} else {
return 'set volume offset for ' + padSelectingFor + ': '+ text;
2020-04-26 00:35:40 -07:00
}
};
2020-04-26 00:35:40 -07:00
const makeSelection = (selection) => {
if (selection === "keys") {
padSelectingFor = '';
fileStringArray = [];
drumPadGrid = document.getElementById('drum-pad-grid');
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>');
2020-04-26 00:35:40 -07:00
} else if (padsArray.includes(selection)) {
padSelectingFor = selection;
showFirstDirMenu();
$('#menuScrollTip').remove();
2020-04-26 00:35:40 -07:00
} 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();
2020-04-26 00:35:40 -07:00
} else if (fileStringArray.length === 2) {
showThirdDirMenu();
$('#selectionMenu').attr("tabindex",0).focus();
2020-04-26 00:35:40 -07:00
} else {
showFourthDirMenu();
$('#selectionMenu').attr("tabindex",0).focus();
2020-04-26 00:35:40 -07:00
}
} else if (selection.substring(selection.length - 4) === '.wav') {
fileStringArray.push(selection);
sessionStorage.setItem(padSelectingFor,fileStringArray.join('/'));
menuDisplayed = false;
$('#display-middle-left-b').html((drumPadGrid));
$('#menuScrollTip').remove();
makeMetronomeIcons(padSelectingFor);
2020-04-26 00:35:40 -07:00
} else if (selection === '( cancel -- back )') {
if (fileStringArray.length === 0) {
if (padSelectingFor === '') {
menuDisplayed = false;
$('#display-middle-left-b').html((drumPadGrid));
$('#menuScrollTip').remove();
2020-04-26 00:35:40 -07:00
} 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>');
2020-04-26 00:35:40 -07:00
}
} else if (fileStringArray.length === 1) {
fileStringArray = [];
showFirstDirMenu();
$('#menuScrollTip').remove();
2020-04-26 00:35:40 -07:00
} else if (fileStringArray.length === 2) {
fileStringArray.pop();
showSecondDirMenu();
$('#selectionMenu').attr("tabindex",0).focus();
2020-04-26 00:35:40 -07:00
} else if (fileStringArray.length === 3) {
fileStringArray.pop();
showThirdDirMenu();
$('#selectionMenu').attr("tabindex",0).focus();
2020-04-26 00:35:40 -07:00
}
}
};
const showFourthDirMenu = () => {
const selectionMenu = wavFiles[fileStringArray[0]][fileStringArray[1]][0][fileStringArray[2]]
.map(item => (makeSelectionMenuItem(item)));
showSelectionMenuItems(selectionMenu);
};
const showThirdDirMenu = () => {
const selectionMenu = wavFiles[fileStringArray[0]][fileStringArray[1]]
.filter(item => typeof item === 'string')
.map(item => (makeSelectionMenuItem(item)));
if (!(typeof wavFiles[fileStringArray[0]][fileStringArray[1]][0] === 'string')) {
const moreDirs = Object.keys(wavFiles[fileStringArray[0]][fileStringArray[1]][0])
.map(item => (makeSelectionMenuItem(item)));
moreDirs.forEach(item => selectionMenu.push(item));
}
showSelectionMenuItems(selectionMenu);
};
const showSecondDirMenu = () => {
const selectionMenu = Object.keys(wavFiles[fileStringArray[0]])
.map(item => (makeSelectionMenuItem(item)));
showSelectionMenuItems(selectionMenu);
};
const showFirstDirMenu = () => {
const selectionMenu = Object.keys(wavFiles)
.map(item => (makeSelectionMenuItem(item)));
showSelectionMenuItems(selectionMenu);
};
const showKeySelectionMenu = () => {
const selectionMenu = padsArray
.map(item => (makeSelectionMenuItem(item)));
showSelectionMenuItems(selectionMenu);
};
const showSelectionMenuItems = (menuItems) => {
menuItems.unshift(makeSelectionMenuItem('( cancel -- back )'));
$('#display-middle-left-b').html(('<div id="selectionMenu" class="selectionMenu"></div>'));
for (let i = 0; i < menuItems.length; i++) {
let j = i + 1000;
$('#selectionMenu').append(menuItems[i].replace('foo',j));
$('#'+j).tooltip({
content: makeSelectionMenuItemToolTipContent($('#'+j).text()),
position: { my: "right top+150", at: "center bottom" },
show: {delay: 250, duration: 0},
classes: {
"ui-tooltip": "highlight"
},
tooltipClass: "tool-tip-class",
});
}
};
const makeSelectionMenuItemToolTipContent = (text) => {
if (padsArray.includes(text)) {
return 'select for ' + text;
} else if (text === '( cancel -- back )') {
return text;
} else if (fileStringArray.length === 0) {
return 'select for ' + padSelectingFor + ': ' + text;
} else if (fileStringArray.length === 1) {
return 'select for ' + padSelectingFor + ': ' + fileStringArray[0] + '/' + text;
} else {
return 'select for ' + padSelectingFor + ': ' + fileStringArray.join('/') + '/' + text;
}
};
2020-04-26 00:35:40 -07:00
const makeSelectionMenuItem = (selector) => {
return '<div id="foo" class="selectionMenuItem" title="">' + selector + '</div>';
};