From 0d024ad390251a701c945953d7cdd89a5a087c0c Mon Sep 17 00:00:00 2001
From: adrien <adrien@malingrey.fr>
Date: Wed, 28 Aug 2024 23:23:43 +0200
Subject: [PATCH] keyMapInput selection

---
 app.js    | 48 ++++++++++++++++++++++++------------------------
 style.css |  5 +++++
 2 files changed, 29 insertions(+), 24 deletions(-)

diff --git a/app.js b/app.js
index db58e31..3a1a0b9 100644
--- a/app.js
+++ b/app.js
@@ -350,6 +350,24 @@ function pause() {
 
 settingsButton.onclick = showSettings
 
+keyMapInput.onclick =  keyMapInput.onkeyup = function(event) {
+    let cursorPosition = keyMapInput.selectionEnd
+    keyMapInput.setSelectionRange(cursorPosition-1, cursorPosition)
+}
+
+keyMapInput.onchange = function(event) {
+    keyMap = keyMapInput.value
+    if (midiKeyboard) {
+        cannonSprites.forEach((cannonSprite, index) => {
+            cannonSprite.key = NOTE_NAMES[index % NOTE_NAMES.length]
+        })
+    } else {
+        cannonSprites.forEach((cannonSprite, index) => {
+            cannonSprite.key = keyMap[index - FIRST_NOTE].toUpperCase()
+        })
+    }
+}
+
 var midiIputs
 var midiKeyboard = window.localStorage.midiKeyboard || ""
 midiSelect.onfocus = function() {
@@ -385,21 +403,13 @@ midiSelect.oninput = () => {
     window.localStorage.midiKeyboard = midiKeyboard
 }
 
-keyMapInput.onclick=()=>{
-    let cursorPosition = keyMapInput.selectionStart
-    keyMapInput.setSelectionRange(cursorPosition-1, cursorPosition)
-}
+function onMIDIMessage(event) {
+    let [code, note, velocity] = event.data
 
-keyMapInput.onchange = function(event) {
-    keyMap = keyMapInput.value
-    if (midiKeyboard) {
-        cannonSprites.forEach((cannonSprite, index) => {
-            cannonSprite.key = NOTE_NAMES[index % NOTE_NAMES.length]
-        })
-    } else {
-        cannonSprites.forEach((cannonSprite, index) => {
-            cannonSprite.key = keyMap[index - FIRST_NOTE].toUpperCase()
-        })
+    if (144 <= code && code <= 159 && cannonSprites[note]) {
+        cannonSprites[note].shooting = true
+    } else if (128 <= code && code <= 143 && cannonSprites[note]) {
+        cannonSprites[note].shooting = false
     }
 }
 
@@ -422,16 +432,6 @@ function onpartialinput() {
     }
 }
 
-function onMIDIMessage(event) {
-    let [code, note, velocity] = event.data
-
-    if (144 <= code && code <= 159 && cannonSprites[note]) {
-        cannonSprites[note].shooting = true
-    } else if (128 <= code && code <= 143 && cannonSprites[note]) {
-        cannonSprites[note].shooting = false
-    }
-}
-
 let level
 function newGame() {
     level = 0
diff --git a/style.css b/style.css
index 73a584d..74730d6 100644
--- a/style.css
+++ b/style.css
@@ -53,6 +53,11 @@ h1 {
     width: calc(25em + 108px);
     height: 54px;
     font-size: 16px;
+    caret-color: transparent;
+}
+
+#keyMapInput::selection {
+    color: #209cee;
 }
 
 #keyMapInput,