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">
<article>
<header>
<h3>L<img src="icones/lotus.svg" alt="O">TUS</h3>
<h2>L<img src="icones/lotus.svg" alt="O">TUS</h2>
</header>
<form id="optionsForm" action="#">
<fieldset>
<label>
<input id="volumeCheckbox" type="checkbox" role="switch" checked/>
Son
<fieldset class="grid">
<legend>
Trouvez des mot comprenant entre
</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>
</fieldset>
<fieldset class="grid">
<legend>Nombre de lettres des mots à trouver</legend>
<label>
entre
<input type="number" id="minLettresInput" min="6" max="10" value="6"/>
<fieldset>
<label class="option">
<input class="lettre mal-placee" disabled>
indique une lettre se trouvant ailleurs dans le mot et
</label>
<label>
et
<input type="number" id="maxLettresInput" min="6" max="10" value="10"/>
<label class="option">
<input class="lettre bien-placee" disabled>
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>
</fieldset>
</form>
<footer>
<button id="cancelOptionsButton" class="secondary">Annuler</button>
<button id="confirmOptionsButton">OK</button>
</footer>
</article>

16
script.js
View File

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

16
style.css
View File

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