From e960b48b27da50b4fbf3be6da10fa426174a9468 Mon Sep 17 00:00:00 2001
From: adrien <adrien@malingrey.fr>
Date: Wed, 28 Aug 2024 20:46:38 +0200
Subject: [PATCH] settings menu
---
app.js | 6 ++----
index.html | 14 ++++++--------
style.css | 6 ++++++
3 files changed, 14 insertions(+), 12 deletions(-)
diff --git a/app.js b/app.js
index da1329b..f9deaf7 100644
--- a/app.js
+++ b/app.js
@@ -268,7 +268,6 @@ batterySprite.frame = 12
window.onload = function() {
draw()
startDialog.showModal()
- //window.setInterval(draw, 60)
}
let audioCtx
@@ -341,7 +340,6 @@ window.onblur = showSettings
function pause() {
Tone.Transport.pause()
- //window.clearInterval(updateTaskId)
playing = false
}
@@ -349,7 +347,7 @@ settingsButton.onclick = showSettings
keyMapInput.onclick=()=>{
let cursorPosition = keyMapInput.selectionStart
- keyMapInput.setSelectionRange(cursorPosition, cursorPosition + 1)
+ keyMapInput.setSelectionRange(cursorPosition-1, cursorPosition)
}
keyMapInput.onchange = function(event) {
@@ -368,7 +366,7 @@ keyMapInput.onchange = function(event) {
var midiIputs
midiSelect.onfocus = function() {
midiIputs = {}
- midiSelect.innerHTML = `<option value="">Aucun</option>`
+ midiSelect.innerHTML = `<option value="">Aucun (utiliser les touches ci-dessous)</option>`
navigator.requestMIDIAccess().then(
midiAccess => {
if (midiAccess.inputs.size) {
diff --git a/index.html b/index.html
index 9c17287..0872fc3 100644
--- a/index.html
+++ b/index.html
@@ -35,21 +35,19 @@
<form method="dialog">
<h2 class="title is-centered">Options</h2>
<section class="nes-container with-title is-dark">
- <h3 class="title">Contrôles</h3>
+ <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">
- <label for="keyMapInput">Clavier d'ordinateur</label>
<div style="overflow-x: scroll;padding: 2px;">
<input type="text" id="keyMapInput" class="nes-input is-dark"
minlength="25" maxlength="25" size="25" required
placeholder="wsxdcvgbhnj,e'r(tyèu_içop" value="wsxdcvgbhnj,e'r(tyèu_içop"/>
</div>
</div>
- <label for="midiSelect" style="color:#fff">Clavier MIDI</label>
- <div class="nes-select is-dark">
- <select id="midiSelect">
- <option value="">Aucun</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 80c6df4..2fb65e1 100644
--- a/style.css
+++ b/style.css
@@ -52,6 +52,12 @@ h1 {
letter-spacing: 4px;
width: calc(25em + 108px);
height: 54px;
+ font-size: 16px;
+}
+
+#keyMapInput,
+input[type=range]{
+ cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAzElEQVRYR+2X0Q6AIAhF5f8/2jYXZkwEjNSVvVUjDpcrGgT7FUkI2D9xRfQETwNIiWO85wfINfQUEyxBG2ArsLwC0jioGt5zFcwF4OYDPi/mBYKm4t0U8ATgRm3ThFoAqkhNgWkA0jJLvaOVSs7j3qMnSgXWBMiWPXe94QqMBMBc1VZIvaTu5u5pQewq0EqNZvIEMCmxAawK0DNkay9QmfFNAJUXfgGgUkLaE7j/h8fnASkxHTz0DGIBMCnBeeM7AArpUd3mz2x3C7wADglA8BcWMZhZAAAAAElFTkSuQmCC) 14 0, pointer;
}
.sliders {