diff --git a/app.js b/app.js index f9deaf7..db58e31 100644 --- a/app.js +++ b/app.js @@ -307,6 +307,11 @@ function init() { Tone.Transport.scheduleRepeat(draw, DRAW_PERIOD) updateTaskId = Tone.Transport.scheduleRepeat(update, UPDATE_PERIOD) + if (window.localStorage.midiKeyboard) { + midiSelect.onfocus() + keyMapInput.onchange() + } + settingsDialog.onclose = newGame showSettings() } @@ -345,6 +350,41 @@ function pause() { settingsButton.onclick = showSettings +var midiIputs +var midiKeyboard = window.localStorage.midiKeyboard || "" +midiSelect.onfocus = function() { + midiIputs = {} + midiSelect.innerHTML = `<option value="">Aucun (utiliser les touches ci-dessous)</option>` + navigator.requestMIDIAccess().then( + midiAccess => { + if (midiAccess.inputs.size) { + for ([,input,] of midiAccess.inputs) { + midiIputs[input.id] = input + var option = document.createElement("option") + option.value = input.id + option.innerText = input.name + midiSelect.add(option) + input.onmidimessage = null + } + if(midiIputs[midiKeyboard]) midiSelect.value = midiKeyboard + } + }, + error => { + console.log(error) + } + ) +} + +midiSelect.oninput = () => { + for (const id in midiIputs) midiIputs[id].onmidimessage = null + midiKeyboard = midiSelect.value + if (midiKeyboard) { + midiIputs[midiKeyboard].onmidimessage = onMIDIMessage + } + keyMapInput.onchange() + window.localStorage.midiKeyboard = midiKeyboard +} + keyMapInput.onclick=()=>{ let cursorPosition = keyMapInput.selectionStart keyMapInput.setSelectionRange(cursorPosition-1, cursorPosition) @@ -363,39 +403,6 @@ keyMapInput.onchange = function(event) { } } -var midiIputs -midiSelect.onfocus = function() { - midiIputs = {} - midiSelect.innerHTML = `<option value="">Aucun (utiliser les touches ci-dessous)</option>` - navigator.requestMIDIAccess().then( - midiAccess => { - if (midiAccess.inputs.size) { - for ([,input,] of midiAccess.inputs) { - midiIputs[input.id] = input - var option = document.createElement("option") - option.value = input.id - option.innerText = input.name - midiSelect.add(option) - input.onmidimessage = null - } - } - }, - error => { - console.log(error) - } - ) -} - -var midiKeyboard = "" -midiSelect.oninput = () => { - for (const id in midiIputs) midiIputs[id].onmidimessage = null - midiKeyboard = midiSelect.value - if (midiKeyboard) { - midiIputs[midiKeyboard].onmidimessage = onMIDIMessage - } - keyMapInput.onchange() -} - volRange.oninput = function(event) { volume.gain.linearRampToValueAtTime(volRange.value, audioCtx.currentTime) } diff --git a/index.html b/index.html index 0872fc3..c6b0b9d 100644 --- a/index.html +++ b/index.html @@ -36,18 +36,18 @@ <h2 class="title is-centered">Options</h2> <section class="nes-container with-title is-dark"> <h3 class="title">Clavier MIDI</h3> - <div class="nes-select is-dark"> - <select id="midiSelect"> - <option value="">Aucun (utiliser les touches ci-dessous)</option> - </select> - </div> <div class="nes-field"> <div style="overflow-x: scroll;padding: 2px;"> <input type="text" id="keyMapInput" class="nes-input is-dark" - minlength="25" maxlength="25" size="25" required + minlength="25" maxlength="25" size="25" required tabindex="2" placeholder="wsxdcvgbhnj,e'r(tyèu_içop" value="wsxdcvgbhnj,e'r(tyèu_içop"/> </div> </div> + <div class="nes-select is-dark"> + <select id="midiSelect" tabindex="3"> + <option value="">Aucun (utiliser les touches ci-dessus)</option> + </select> + </div> </section> <section class="nes-container with-title is-dark"> <h3 class="title">Son</h3> diff --git a/style.css b/style.css index 2fb65e1..73a584d 100644 --- a/style.css +++ b/style.css @@ -32,7 +32,7 @@ body::before, } h1 { - text-shadow: 0 4px #adafbc; + text-shadow: 0 3px #adafbc; } .is-centered {