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

règles du jeu

Browse Source
This commit is contained in:
Adrien MALINGREY 2024-04-26 21:22:34 +02:00
parent 17f4670d67
commit 9aea682723
3 changed files with 48 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
index.html
View File

@ -19,29 +19,40 @@
<dialog id="optionsDialog"> <dialog id="optionsDialog">
<article> <article>
<header> <header>
<h3>L<img src="icones/lotus.svg" alt="O">TUS</h3> <h2>L<img src="icones/lotus.svg" alt="O">TUS</h2>
</header> </header>
<form id="optionsForm" action="#"> <form id="optionsForm" action="#">
<fieldset> <fieldset class="grid">
<label> <legend>
<input id="volumeCheckbox" type="checkbox" role="switch" checked/> Trouvez des mot comprenant entre
Son </legend>
<label class="option">
<input type="number" id="minLettresInput" min="6" max="10" value="6" size="2" required/>
et
</label>
<label class="option">
<input type="number" id="maxLettresInput" min="6" max="10" value="10" size="2" required/>
lettres.
</label> </label>
</fieldset> </fieldset>
<fieldset class="grid"> <fieldset>
<legend>Nombre de lettres des mots à trouver</legend> <label class="option">
<label> <input class="lettre mal-placee" disabled>
entre indique une lettre se trouvant ailleurs dans le mot et
<input type="number" id="minLettresInput" min="6" max="10" value="6"/>
</label> </label>
<label> <label class="option">
et <input class="lettre bien-placee" disabled>
<input type="number" id="maxLettresInput" min="6" max="10" value="10"/> une lettre bien placée.
</label>
</fieldset>
<fieldset>
<label for="volumeCheckbox" style="align-items: end;">
<input id="volumeCheckbox" type="checkbox" role="switch" checked/>
Effets sonores
</label> </label>
</fieldset> </fieldset>
</form> </form>
<footer> <footer>
<button id="cancelOptionsButton" class="secondary">Annuler</button>
<button id="confirmOptionsButton">OK</button> <button id="confirmOptionsButton">OK</button>
</footer> </footer>
</article> </article>

16
script.js
View File

@ -13,19 +13,16 @@ optionsButton.onclick = function(event) {
optionsDialog.showModal(); optionsDialog.showModal();
} }
cancelOptionsButton.onclick = function(event) {
volumeCheckbox.checked = volumeOn
minLettresInput.value = minLettres
maxLettresInput.value = maxLettres
optionsDialog.close()
}
confirmOptionsButton.onclick = function(event) { confirmOptionsButton.onclick = function(event) {
if (optionsForm.checkValidity()) {
volumeOn = volumeCheckbox.checked volumeOn = volumeCheckbox.checked
minLettres = Math.min(minLettresInput.value, maxLettresInput.value) minLettres = Math.min(minLettresInput.value, maxLettresInput.value)
maxLettres = Math.max(minLettresInput.value, maxLettresInput.value) maxLettres = Math.max(minLettresInput.value, maxLettresInput.value)
optionsDialog.close() optionsDialog.close()
if (!nbEssais) nouvellePartie() if (!nbEssais) nouvellePartie()
} else {
optionsForm.reportValidity()
}
} }
var motATrouver var motATrouver
@ -68,6 +65,7 @@ function nouvelEssai() {
input.size = 1 input.size = 1
input.pattern = "[a-z]" input.pattern = "[a-z]"
input.placeholder = "." input.placeholder = "."
input.classList.add("lettre")
input.onfocus = onfocus input.onfocus = onfocus
input.onkeydown = onkeydown input.onkeydown = onkeydown
input.oninput = oninput input.oninput = oninput
@ -132,7 +130,7 @@ function onsubmit(event) {
delete(inputsNonValides[indice]) delete(inputsNonValides[indice])
nbLettresBienPlacees++ nbLettresBienPlacees++
setTimeout(() => { setTimeout(() => {
input.className = "lettre-bien-placee" input.classList.add("bien-placee")
if (volumeOn) sonLettreBienPlacee.play() if (volumeOn) sonLettreBienPlacee.play()
}, periode * indice) }, periode * indice)
} }
@ -144,7 +142,7 @@ function onsubmit(event) {
if (index >= 0) { if (index >= 0) {
delete(lettresATrouver[index]) delete(lettresATrouver[index])
setTimeout(() => { setTimeout(() => {
input.className = "lettre-mal-placee" input.classList.add("mal-placee")
if (volumeOn) sonLettreMalPlacee.play() if (volumeOn) sonLettreMalPlacee.play()
}, periode * indice) }, periode * indice)
} else { } else {

16
style.css
View File

@ -12,7 +12,7 @@ h1 {
} }
h1 img, h1 img,
h3 img { h2 img {
background-color: var(--pico-h1-color); background-color: var(--pico-h1-color);
border-radius: 100%; border-radius: 100%;
background-origin: content-box; background-origin: content-box;
@ -21,12 +21,18 @@ h3 img {
vertical-align: baseline; vertical-align: baseline;
} }
label.option {
display: flex;
align-items: baseline;
gap: 1em;
}
#grille { #grille {
width: fit-content; width: fit-content;
margin: auto; margin: auto;
} }
#grille input[type=text] { input.lettre {
font-size: 1.5em; font-size: 1.5em;
text-transform: capitalize; text-transform: capitalize;
width: 1.3em; width: 1.3em;
@ -37,15 +43,15 @@ h3 img {
vertical-align: text-top; vertical-align: text-top;
} }
.lettre-bien-placee { input.bien-placee {
background-color: #D93526D0; background-color: #D93526D0;
} }
.lettre-mal-placee { input.mal-placee {
background-image: radial-gradient(ellipse at center, #FFBF00A0 70%, transparent 70%); background-image: radial-gradient(ellipse at center, #FFBF00A0 70%, transparent 70%);
background-repeat: no-repeat; background-repeat: no-repeat;
} }
#grille input[type=text]:disabled { input.lettre:disabled {
opacity: 100%; opacity: 100%;
} }