From 7407fd11386ddc92dda8e3f19f62ec5457f5d2a0 Mon Sep 17 00:00:00 2001
From: adrien <adrien@malingrey.fr>
Date: Mon, 24 Apr 2023 09:19:45 +0200
Subject: [PATCH] reportValidity

---
 app.js     | 9 ++++-----
 index.html | 8 ++++----
 2 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/app.js b/app.js
index d5281ef..367a4b7 100644
--- a/app.js
+++ b/app.js
@@ -376,11 +376,11 @@ Z.prototype.minoesPosition = [
 
 class Settings {
     constructor() {
-        for (let input of settingsForm.getElementsByTagName("input")) {
+        this.form = settingsForm
+        for (let input of this.form.getElementsByTagName("input")) {
             if (localStorage[input.name]) input.value = localStorage[input.name]
         }
-
-        settingsForm.onsubmit = newGame
+        this.form.submit = newGame
         this.modal = new bootstrap.Modal('#settingsModal')
         document.getElementById('settingsModal').addEventListener('shown.bs.modal', () => {
             resumeButton.focus()
@@ -621,7 +621,6 @@ function resume(event) {
     event.preventDefault()
 
     settings.load()
-
     document.onkeydown = onkeydown
     document.onkeyup = onkeyup
 
@@ -801,7 +800,7 @@ function gameOver() {
 
 window.onbeforeunload = function(event) {
     localStorage["highScore"] = stats.highScore
-    for (let input of settingsForm.getElementsByTagName("input")) {
+    for (let input of settings.form.getElementsByTagName("input")) {
         localStorage[input.name] = input.value
     }
 }
diff --git a/index.html b/index.html
index a7eede0..1d08504 100644
--- a/index.html
+++ b/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">
+            <form name="settingsForm" class="needs-validation" novalidate oninput="resumeButton.disabled = !settingsForm.checkValidity()">
               <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">
@@ -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">
+                    <input name="arr" id="arrInput" type="number" class="form-control text-center" value="50" min="2" max="200" step="1" required onInput="arrInput.reportValidity()">
                     <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">
+                    <input name="das" id="dasInput" type="number" class="form-control text-center" value="300" min="100" max="500" step="5" required onInput="dasInput.reportValidity()">
                     <div class="input-group-text">ms</div>
                   </div>
                 </div>
@@ -95,7 +95,7 @@
                 <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">
+                  <input name="startLevel" id="levelInput" type="number" class="form-control text-center" value="1" min="1" max="15" required onInput="startLevel.reportValidity()">
                 </div>
                 <div class="col-sm-4">
                   <button id="resumeButton" type="submit" data-bs-dismiss="modal" class="btn btn-primary form-control" autofocus>Jouer</button>