validation

app.js

@@ -380,7 +380,7 @@ class Settings {
         for (let input of this.form.getElementsByTagName("input")) {
             if (localStorage[input.name]) input.value = localStorage[input.name]
         }
-        this.form.submit = newGame
+        this.form.onsubmit = newGame
         this.modal = new bootstrap.Modal('#settingsModal')
         document.getElementById('settingsModal').addEventListener('shown.bs.modal', () => {
             resumeButton.focus()
@@ -597,14 +597,20 @@ function pause() {
 
     resumeButton.disabled = false
     settings.modal.show()
+    settings.form.reportValidity()
 }
 onblur = pause
 
 pause()
 
 function newGame(event) {
+    if (!settings.form.checkValidity()) {
+        event.preventDefault()
+        event.stopPropagation()
+        settings.form.reportValidity()
+        settings.form.classList.add('was-validated')
+    } else {
         stats.lockDelay = DELAY.LOCK
-    resume(event)
         levelInput.name = "level"
         levelInput.disabled = true
         titleHeader.innerHTML = "PAUSE"
@@ -614,19 +620,27 @@ function newGame(event) {
         stats.goal = 0
         stats.level = levelInput.valueAsNumber
         localStorage["startLevel"] = levelInput.value
-    generate()
+        resume(event)
+    }
 }
 
 function resume(event) {
     event.preventDefault()
+    event.stopPropagation()
 
+    if (!settings.form.checkValidity()) {
+        settings.form.reportValidity()
+        settings.form.classList.add('was-validated')
+    } else {
         settings.load()
+        settings.modal.hide()
         document.onkeydown = onkeydown
         document.onkeyup = onkeyup
     
         stats.time = stats.pauseTime
         scheduler.setInterval(ticktack, 1000)
-    if (stats.fallPeriod) scheduler.setInterval(fall, stats.fallPeriod)
+        if (!matrix.piece) generate()
+    }
 }
 
 function ticktack() {

index.html

@@ -22,7 +22,7 @@
             <h1 id="titleHeader" class="modal-title w-100 text-center">QUATRIS</h1>
           </div>
           <div class="modal-body">
-            <form name="settingsForm" class="needs-validation" novalidate oninput="resumeButton.disabled = !settingsForm.checkValidity(); settingsForm.reportValidity()">
+            <form name="settingsForm" class="needs-validation" novalidate>
               <fieldset id="keyBindFielset" class="row g-2 mb-3 align-items-center text-center">
                 <legend class="text-start">Commandes</legend>
                 <label for="moveLeftInput" title="Gauche" class="col-sm-2 col-form-label d-flex align-items-center justify-content-center">
@@ -56,7 +56,7 @@
                   <input name="softDrop" id="softDropInput" type="button" class="form-control text-center" value="↓" onclick="changeKey(this)">
                 </div>
                 <div class="col-sm-4">
-                  <input name="hardDrop" id="hardDropInput" type="button" class="form-control text-center" value="Space" onclick="changeKey(this)">
+                  <input name="hardDrop" id="hardDropInput" type="button" class="form-control text-center" value="Espace" onclick="changeKey(this)">
                 </div>
                 <label for="hardDropInput" title="Chute rapide" class="col-sm-2 col-form-label d-flex align-items-center justify-content-center">
                   <i class="bi bi-download"></i>
@@ -68,7 +68,7 @@
                   <input name="hold" id="holdInput" type="button" class="form-control text-center" value="c" onclick="changeKey(this)">
                 </div>
                 <div class="col-sm-4">
-                  <input name="pause" id="pauseInput" type="button" class="form-control text-center" value="Escape" onclick="changeKey(this)">
+                  <input name="pause" id="pauseInput" type="button" class="form-control text-center" value="Échap" onclick="changeKey(this)">
                 </div>
                 <label for="pauseInput" title="Pause" class="col-sm-2 col-form-label d-flex align-items-center justify-content-center">
                   <i class="bi bi-pause"></i>
@@ -79,13 +79,13 @@
                 <label for="arrInput" class="col-sm-2 col-form-label" title="Automatic Repeat Rate : période de répétition de l'action">ARR</label>
                 <div class="col-sm-4">
                   <div class="input-group">
-                    <input name="arr" id="arrInput" type="number" class="form-control text-center" value="50" min="2" max="200" step="1" required>
+                    <input name="arr" id="arrInput" type="number" class="form-control text-center" value="50" min="2" max="200" step="1">
                     <div class="input-group-text">ms</div>
                   </div>
                 </div>
                 <div class="col-sm-4">
                   <div class="input-group">
-                    <input name="das" id="dasInput" type="number" class="form-control text-center" value="300" min="100" max="500" step="5" required>
+                    <input name="das" id="dasInput" type="number" class="form-control text-center" value="300" min="100" max="500" step="5">
                     <div class="input-group-text">ms</div>
                   </div>
                 </div>
@@ -95,10 +95,10 @@
                 <legend class="text-start">Partie</legend>
                 <label for="levelInput" class="col-sm-2 col-form-label text-center">Niveau</label>
                 <div class="col-sm-4">
-                  <input name="startLevel" id="levelInput" type="number" class="form-control text-center" value="1" min="1" max="15" required>
+                  <input name="startLevel" id="levelInput" type="number" class="form-control text-center" value="1" min="1" max="15">
                 </div>
                 <div class="col-sm-4">
-                  <button id="resumeButton" type="submit" data-bs-dismiss="modal" class="btn btn-primary form-control" autofocus>Jouer</button>
+                  <button id="resumeButton" type="submit" class="btn btn-primary form-control" autofocus>Jouer</button>
                 </div>
               </fieldset>
             </form>