règles du jeu

index.html

@@ -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>

script.js

@@ -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) {
-    volumeOn = volumeCheckbox.checked
-    minLettres = Math.min(minLettresInput.value, maxLettresInput.value)
-    maxLettres = Math.max(minLettresInput.value, maxLettresInput.value)
-    optionsDialog.close()
-    if (!nbEssais) nouvellePartie()
+    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 {

style.css

@@ -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%;
 }