From 4a377b6a7a7586b02325160f2a32c9221d25f474 Mon Sep 17 00:00:00 2001
From: adrien <adrien@malingrey.fr>
Date: Mon, 24 Apr 2023 17:10:20 +0200
Subject: [PATCH] controls input type text

---
 app.js     | 12 ++++++------
 index.html | 18 +++++++++---------
 2 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/app.js b/app.js
index 2596a87..8fa2588 100644
--- a/app.js
+++ b/app.js
@@ -404,14 +404,14 @@ class Settings {
 
 function changeKey(input) {
     prevValue = input.value
-    input.value = "Touche ?"
+    input.value = ""
     input.onkeydown = function (event) {
         event.preventDefault()
         input.value = KEY_NAMES[event.key] || event.key
         input.blur()
     }
     input.onblur = function (event) {
-        if (input.value == "Touche ?") input.value = prevValue
+        if (input.value == "") input.value = prevValue
         input.onkeydown = null
         input.onblur = null
     }
@@ -597,6 +597,7 @@ function pause() {
     document.onkeydown = null
 
     resumeButton.disabled = false
+    settings.form.classList.remove('was-validated')
     settings.modal.show()
     settings.form.reportValidity()
 }
@@ -629,11 +630,10 @@ function newGame(event) {
 function resume(event) {
     event.preventDefault()
     event.stopPropagation()
+    settings.form.reportValidity()
+    settings.form.classList.add('was-validated')
 
-    if (!settings.form.checkValidity()) {
-        settings.form.reportValidity()
-        settings.form.classList.add('was-validated')
-    } else {
+    if (settings.form.checkValidity()) {
         settings.load()
         settings.modal.hide()
         document.onkeydown = onkeydown
diff --git a/index.html b/index.html
index 3eb330c..2aabc66 100644
--- a/index.html
+++ b/index.html
@@ -29,10 +29,10 @@
                   <i class="bi bi-arrow-left"></i>
                 </label>
                 <div class="col-sm-4">
-                  <input name="moveLeft" id="moveLeftInput" type="button" class="form-control text-center" value="←" onclick="changeKey(this)">
+                  <input name="moveLeft" id="moveLeftInput" type="text" class="form-control text-center" value="←" onclick="changeKey(this)" placeholder="Touche ?" required>
                 </div>
                 <div class="col-sm-4">
-                  <input name="moveRight" id="moveRightInput" type="button" class="form-control text-center" value="→" onclick="changeKey(this)">
+                  <input name="moveRight" id="moveRightInput" type="text" class="form-control text-center" value="→" onclick="changeKey(this)" placeholder="Touche ?" required>
                 </div>
                 <label for="moveRightInput" title="Droite" class="col-sm-2 col-form-label d-flex align-items-center justify-content-center">
                   <i class="bi bi-arrow-right"></i>
@@ -41,10 +41,10 @@
                   <i class="bi bi-arrow-counterclockwise"></i>
                 </label>
                 <div class="col-sm-4">
-                  <input name="rotateCounterclockwise" id="rotateCounterclockwiseInput" type="button" class="form-control text-center" value="w" onclick="changeKey(this)">
+                  <input name="rotateCounterclockwise" id="rotateCounterclockwiseInput" type="text" class="form-control text-center" value="w" onclick="changeKey(this)" placeholder="Touche ?" required>
                 </div>
                 <div class="col-sm-4">
-                  <input name="rotateClockwise" id="rotateClockwiseInput" type="button" class="form-control text-center" value="↑" onclick="changeKey(this)">
+                  <input name="rotateClockwise" id="rotateClockwiseInput" type="text" class="form-control text-center" value="↑" onclick="changeKey(this)" placeholder="Touche ?" required>
                 </div>
                 <label for="rotateClockwiseInput" title="Rotation horaire" class="col-sm-2 col-form-label d-flex align-items-center justify-content-center">
                   <i class="bi bi-arrow-clockwise"></i>
@@ -53,10 +53,10 @@
                   <i class="bi bi-arrow-down-short"></i>
                 </label>
                 <div class="col-sm-4">
-                  <input name="softDrop" id="softDropInput" type="button" class="form-control text-center" value="↓" onclick="changeKey(this)">
+                  <input name="softDrop" id="softDropInput" type="text" class="form-control text-center" value="↓" onclick="changeKey(this)" placeholder="Touche ?" required>
                 </div>
                 <div class="col-sm-4">
-                  <input name="hardDrop" id="hardDropInput" type="button" class="form-control text-center" value="Espace" onclick="changeKey(this)">
+                  <input name="hardDrop" id="hardDropInput" type="text" class="form-control text-center" value="Espace" onclick="changeKey(this)" placeholder="Touche ?" required>
                 </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>
@@ -65,10 +65,10 @@
                   <i class="bi bi-arrow-left-right"></i>
                 </label>
                 <div class="col-sm-4">
-                  <input name="hold" id="holdInput" type="button" class="form-control text-center" value="c" onclick="changeKey(this)">
+                  <input name="hold" id="holdInput" type="text" class="form-control text-center" value="c" onclick="changeKey(this)" placeholder="Touche ?" required>
                 </div>
                 <div class="col-sm-4">
-                  <input name="pause" id="pauseInput" type="button" class="form-control text-center" value="Échap" onclick="changeKey(this)">
+                  <input name="pause" id="pauseInput" type="text" class="form-control text-center" value="Échap" onclick="changeKey(this)" placeholder="Touche ?" required>
                 </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>
@@ -98,7 +98,7 @@
                   <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" class="btn btn-primary form-control" autofocus>Jouer</button>
+                  <button id="resumeButton" type="submit" class="btn btn-primary w-100" autofocus>Jouer</button>
                 </div>
               </fieldset>
             </form>