settings menu

This commit is contained in:
Adrien MALINGREY 2024-08-28 20:46:38 +02:00
parent b0cc701226
commit e960b48b27
3 changed files with 14 additions and 12 deletions

6
app.js
View File

@ -268,7 +268,6 @@ batterySprite.frame = 12
window.onload = function() { window.onload = function() {
draw() draw()
startDialog.showModal() startDialog.showModal()
//window.setInterval(draw, 60)
} }
let audioCtx let audioCtx
@ -341,7 +340,6 @@ window.onblur = showSettings
function pause() { function pause() {
Tone.Transport.pause() Tone.Transport.pause()
//window.clearInterval(updateTaskId)
playing = false playing = false
} }
@ -349,7 +347,7 @@ settingsButton.onclick = showSettings
keyMapInput.onclick=()=>{ keyMapInput.onclick=()=>{
let cursorPosition = keyMapInput.selectionStart let cursorPosition = keyMapInput.selectionStart
keyMapInput.setSelectionRange(cursorPosition, cursorPosition + 1) keyMapInput.setSelectionRange(cursorPosition-1, cursorPosition)
} }
keyMapInput.onchange = function(event) { keyMapInput.onchange = function(event) {
@ -368,7 +366,7 @@ keyMapInput.onchange = function(event) {
var midiIputs var midiIputs
midiSelect.onfocus = function() { midiSelect.onfocus = function() {
midiIputs = {} midiIputs = {}
midiSelect.innerHTML = `<option value="">Aucun</option>` midiSelect.innerHTML = `<option value="">Aucun (utiliser les touches ci-dessous)</option>`
navigator.requestMIDIAccess().then( navigator.requestMIDIAccess().then(
midiAccess => { midiAccess => {
if (midiAccess.inputs.size) { if (midiAccess.inputs.size) {

View File

@ -35,21 +35,19 @@
<form method="dialog"> <form method="dialog">
<h2 class="title is-centered">Options</h2> <h2 class="title is-centered">Options</h2>
<section class="nes-container with-title is-dark"> <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"> <div class="nes-field">
<label for="keyMapInput">Clavier d'ordinateur</label>
<div style="overflow-x: scroll;padding: 2px;"> <div style="overflow-x: scroll;padding: 2px;">
<input type="text" id="keyMapInput" class="nes-input is-dark" <input type="text" id="keyMapInput" class="nes-input is-dark"
minlength="25" maxlength="25" size="25" required minlength="25" maxlength="25" size="25" required
placeholder="wsxdcvgbhnj,e'r(tyèu_içop" value="wsxdcvgbhnj,e'r(tyèu_içop"/> placeholder="wsxdcvgbhnj,e'r(tyèu_içop" value="wsxdcvgbhnj,e'r(tyèu_içop"/>
</div> </div>
</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>
<section class="nes-container with-title is-dark"> <section class="nes-container with-title is-dark">
<h3 class="title">Son</h3> <h3 class="title">Son</h3>

View File

@ -52,6 +52,12 @@ h1 {
letter-spacing: 4px; letter-spacing: 4px;
width: calc(25em + 108px); width: calc(25em + 108px);
height: 54px; height: 54px;
font-size: 16px;
}
#keyMapInput,
input[type=range]{
cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAzElEQVRYR+2X0Q6AIAhF5f8/2jYXZkwEjNSVvVUjDpcrGgT7FUkI2D9xRfQETwNIiWO85wfINfQUEyxBG2ArsLwC0jioGt5zFcwF4OYDPi/mBYKm4t0U8ATgRm3ThFoAqkhNgWkA0jJLvaOVSs7j3qMnSgXWBMiWPXe94QqMBMBc1VZIvaTu5u5pQewq0EqNZvIEMCmxAawK0DNkay9QmfFNAJUXfgGgUkLaE7j/h8fnASkxHTz0DGIBMCnBeeM7AArpUd3mz2x3C7wADglA8BcWMZhZAAAAAElFTkSuQmCC) 14 0, pointer;
} }
.sliders { .sliders {