From 2e7c4e7c19b89a357b3ccf45fa7794af75fd2d49 Mon Sep 17 00:00:00 2001
From: adrien <adrien@malingrey.fr>
Date: Fri, 4 Oct 2024 17:16:03 +0200
Subject: [PATCH] autofocus

---
 app.js     |  6 ++----
 index.html | 18 +++++++++---------
 2 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/app.js b/app.js
index 046c89e..101b806 100644
--- a/app.js
+++ b/app.js
@@ -480,8 +480,7 @@ document.onkeydown = function(event) {
     let keyIndex = keyMap.indexOf(event.key.toLowerCase())
     if (keyIndex >= 0) {
         if (event.target != keyMapInput) event.preventDefault()
-        let note = FIRST_NOTE + keyIndex
-        shoot(note)
+        shoot(FIRST_NOTE + keyIndex)
     }
 }
 
@@ -492,8 +491,7 @@ document.onkeyup = function(event) {
     let keyIndex = keyMap.indexOf(event.key.toLowerCase())
     if (keyIndex >= 0) {
         if (event.target != keyMapInput) event.preventDefault()
-        let note = FIRST_NOTE + keyIndex
-        stopShoot(note)
+        stopShoot(FIRST_NOTE + keyIndex)
     }
 }
 
diff --git a/index.html b/index.html
index 57d5349..e5bedd0 100644
--- a/index.html
+++ b/index.html
@@ -36,6 +36,11 @@
                 <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" tabindex="3">
+                            <option value="">Aucun (utiliser les touches ci-dessous)</option>
+                        </select>
+                    </div>
                     <div class="nes-field" style="display: flex; flex-direction: column-reverse;">
                         <div style="overflow-x: scroll;padding: 2px;">
                             <input type="text" id="keyMapInput" class="nes-textarea is-dark"
@@ -43,11 +48,6 @@
                                 title="Cliquez pour changer une touche"
                                 placeholder="ccddeffggaabccddeffggaabc" value="wsexdrcftvgybhunji,ko;lp:"/>
                         </div>
-                        <div class="nes-select is-dark">
-                            <select id="midiSelect" tabindex="3">
-                                <option value="">Aucun (utiliser les touches ci-dessous)</option>
-                            </select>
-                        </div>
                     </div>
                 </section>
                 <section class="nes-container with-title is-dark">
@@ -68,7 +68,7 @@
                     </div>
                 </section>
                 <menu class="is-centered">
-                    <button id="playButton" class="nes-btn is-primary" tabindex="1">OK</button>
+                    <button id="playButton" class="nes-btn is-primary" autofocus>OK</button>
                 </menu>
             </form>
         </dialog>
@@ -77,7 +77,7 @@
                 <h2 id="levelTitle" class="title is-centered">Niveau X</h2>
                 <h3 id="songNameTitle" class="title is-centered">Titre</h3>
                 <div class="is-centered">
-                    <button class="nes-btn is-primary" tabindex="1">Jouer</button>
+                    <button class="nes-btn is-primary" autofocus>Jouer</button>
                 </div>
             </form>
         </dialog>
@@ -86,7 +86,7 @@
                 <h2 class="title is-centered">Victoire !</h2>
                 <p>Vous avez vaincu la musique.</p>
                 <div class="is-centered">
-                    <button class="nes-btn is-primary" tabindex="1">Rejouer ?</button>
+                    <button class="nes-btn is-primary" autofocus>Rejouer ?</button>
                 </div>
             </form>
         </dialog>
@@ -94,7 +94,7 @@
             <form method="dialog">
                 <h2 class="title is-centered">Game over</h2>
                 <div class="is-centered">
-                    <button class="nes-btn is-primary" tabindex="1">Rejouer ?</button>
+                    <button class="nes-btn is-primary" autofocus>Rejouer ?</button>
                 </div>
             </form>
         </dialog>