save midiKeyboard

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

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>

style.css

@@ -32,7 +32,7 @@ body::before,
 }
 
 h1 {
-    text-shadow: 0 4px #adafbc;
+    text-shadow: 0 3px #adafbc;
 }
 
 .is-centered {