adrien/lotus
adrien/lotus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

choisir directement le nombre de lettre

Browse Source
This commit is contained in:
Adrien MALINGREY 2024-05-12 11:04:44 +02:00
parent d7e3fe8906
commit 369ca341e2
3 changed files with 22 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
index.html
View File

@ -16,22 +16,16 @@
<body> <body>
<dialog id="optionsDialog"> <dialog id="optionsDialog" open>
<article> <article>
<header> <header>
<h2>L<img src="icones/lotus.svg" alt="O">TUS</h2> <h2>L<img src="icones/lotus.svg" alt="O">TUS</h2>
</header> </header>
<form id="optionsForm" action="#" method="dialog"> <form id="optionsForm" action="#" method="dialog">
<fieldset class="grid"> <fieldset>
<legend>
Trouvez des mot comprenant entre
</legend>
<label class="option"> <label class="option">
<input type="number" id="minLettresInput" min="6" max="10" value="6" size="2" required/> Trouvez des mot de
et <input type="number" id="nbLettresInput" min="6" max="10" value="8" size="2" step="1" required/>
</label>
<label class="option">
<input type="number" id="maxLettresInput" min="6" max="10" value="10" size="2" required/>
lettres. lettres.
</label> </label>
</fieldset> </fieldset>
@ -46,14 +40,16 @@
</label> </label>
</fieldset> </fieldset>
<fieldset> <fieldset>
<label for="volumeCheckbox" style="align-items: end;"> <label for="volumeCheckbox" style="align-items: end;" class="option">
<input id="volumeCheckbox" type="checkbox" role="switch" checked/> <input id="volumeCheckbox" type="checkbox" role="switch" checked/>
Effets sonores Effets sonores
</label> </label>
</fieldset> </fieldset>
</form> </form>
<footer> <footer>
<button id="confirmOptionsButton" type="submit" form="optionsForm">Jouer</button> <button id="confirmOptionsButton" type="submit" form="optionsForm" disabled>
<div aria-busy="true"></div>
</button>
</footer> </footer>
</article> </article>
</dialog> </dialog>

14
script.js
View File

@ -1,23 +1,21 @@
const NB_ESSAIS_MAX = 6 const NB_ESSAIS_MAX = 6
const periode = 400 //ms const periode = 400 //ms
var volumeOn = true
var minLettres = 6
var maxLettres = 10
window.onload = function(event) { window.onload = function(event) {
optionsDialog.showModal(); confirmOptionsButton.innerHTML = "Jouer"
confirmOptionsButton.disabled = false
} }
optionsButton.onclick = function(event) { optionsButton.onclick = function(event) {
optionsDialog.showModal(); optionsDialog.showModal();
} }
var volumeOn = true
var nbLettres = 8
optionsForm.onsubmit = function(event) { optionsForm.onsubmit = function(event) {
if (optionsForm.checkValidity()) { if (optionsForm.checkValidity()) {
volumeOn = volumeCheckbox.checked volumeOn = volumeCheckbox.checked
minLettres = minLettresInput.valueAsNumber nbLettres = nbLettresInput.valueAsNumber
maxLettres = maxLettresInput.valueAsNumber
optionsDialog.close() optionsDialog.close()
if (!nbEssais) nouvellePartie() if (!nbEssais) nouvellePartie()
} else { } else {
@ -28,11 +26,9 @@ optionsForm.onsubmit = function(event) {
var motATrouver var motATrouver
var listeATrouver var listeATrouver
var lettresTrouvees var lettresTrouvees
var nbLettres
var nbEssais = 0 var nbEssais = 0
function nouvellePartie() { function nouvellePartie() {
nbEssais = 0 nbEssais = 0
nbLettres = minLettres + Math.floor(Math.random() * (Math.abs(maxLettres - minLettres) + 1))
motATrouver = motsATrouver[nbLettres][Math.floor(motsATrouver[nbLettres].length * Math.random())] motATrouver = motsATrouver[nbLettres][Math.floor(motsATrouver[nbLettres].length * Math.random())]
motATrouver = motATrouver.normalize("NFD").replace(/\p{Diacritic}/gu, "") motATrouver = motATrouver.normalize("NFD").replace(/\p{Diacritic}/gu, "")
listeATrouver = Array.from(motATrouver) listeATrouver = Array.from(motATrouver)

9
style.css
View File

@ -34,6 +34,15 @@ label.option {
display: flex; display: flex;
align-items: baseline; align-items: baseline;
gap: 1em; gap: 1em;
width: 100%;;
}
label.option * {
width: auto;
}
[type="checkbox"][role="switch"] {
margin: 0;
} }
#grille { #grille {