changer le nombre de lignes et de colonnes

index.php

@@ -15,23 +15,26 @@ if (!isset($_GET["grille"])) {
 include_once "dico.php";
 include_once "Grille.php";
 
-
-const HAUTEUR_PAR_DEFAUT = 6;
-const LARGEUR_PAR_DEFAUT = 6;
+const HAUTEUR_DEFAUT = 7;
+const HAUTEUR_MIN = 2;
+const HAUTEUR_MAX = 10;
+const LARGEUR_DEFAUT = 7;
+const LARGEUR_MIN = 2;
+const LARGEUR_MAX = 10;
 
 
-$hauteur = filter_input(INPUT_GET, 'l', FILTER_VALIDATE_INT, [
+$hauteur = filter_input(INPUT_GET, 'lignes', FILTER_VALIDATE_INT, [
     "options" => [
-        "default" => HAUTEUR_PAR_DEFAUT,
-        "min_range" => 2,
-        "max_range" => 30
+        "default" => HAUTEUR_DEFAUT,
+        "min_range" => HAUTEUR_MIN,
+        "max_range" => HAUTEUR_MAX
     ]
 ]);
-$largeur = filter_input(INPUT_GET, 'c', FILTER_VALIDATE_INT, [
+$largeur = filter_input(INPUT_GET, 'colonnes', FILTER_VALIDATE_INT, [
     "options" => [
-        "default" => LARGEUR_PAR_DEFAUT,
-        "min_range" => 2,
-        "max_range" => 30
+        "default" => LARGEUR_DEFAUT,
+        "min_range" => LARGEUR_MIN,
+        "max_range" => LARGEUR_MAX
     ]
 ]);
 
@@ -159,10 +162,16 @@ for ($x = 0; $x < $largeur; $x++) {
             <?php endif ?>
         </div>
         
-        <input type="hidden" id="lignes" <?php if (isset($_GET["lignes"])): ?>name="lignes" <?php endif ?>value="<?= $hauteur ?>" />
-        <input type="hidden" id="colonnes" <?php if (isset($_GET["colonnes"])): ?>name="colonnes" <?php endif ?>value="<?= $largeur ?>" />
-        <input type="hidden" id="solution_hashee" value="<?= $grille->hash() ?>" />
-        <button type="submit"><img src="favicon.ico">Nouvelle grille</button>
+        <div class="nouvelle-grille">
+            <img src="favicon.ico">
+            <button type="submit">
+                Nouvelle grille de
+                <input type="number" id="lignes" name="lignes" value="<?= $hauteur ?>" min="<?=HAUTEUR_MIN?>" max="<?=HAUTEUR_MAX?>">
+                lignes et
+                <input type="number" id="colonnes" name="colonnes" value="<?= $largeur ?>" min="<?=LARGEUR_MIN?>" max="<?=LARGEUR_MAX?>">
+                colonnes
+            </button>
+        </div>
     </form>
 
     <script src="script.js"></script>

script.js

@@ -6,11 +6,11 @@ async function sha256(text) {
   return hashArray.map((b) => b.toString(16).padStart(2, "0")).join("");
 }
 
-const inputs = Array.from(grilleForm.querySelectorAll('input[type="text"]'));
+let inputs = grilleForm.querySelectorAll('.grille input')
 let largeur = Number(colonnes.value);
 let nb_cases = inputs.length;
 let index = 0;
-inputs.forEach((input) => {
+for (let input of inputs) {
   input.index = index++;
   input.x = input.index % largeur;
   input.y = Math.floor(input.index / largeur);
@@ -76,4 +76,10 @@ inputs.forEach((input) => {
       li.classList.remove("non-selectionee")
     }
   };
-});
+};
+
+for (let input of grilleForm.querySelectorAll('.nouvelle-grille input')) {
+  input.onfocus = function (event) {
+    input.select();
+  };
+}

style.css

@@ -63,6 +63,7 @@ h2 {
   width: 2rem;
   height: 2rem;
   text-align: center;
+  vertical-align: middle;
 }
 
 .grille td {
@@ -173,34 +174,57 @@ h2 {
   text-align: center;
 }
 
-button[type="submit"] {
-  width: fit-content;
-  margin: 0 auto;
+.nouvelle-grille {
+  margin: 1em auto 0 auto;
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+  gap: 0.5em;
 }
 
-button[type="submit"] {
-  width: 100%;
-  margin: 1em auto 0 auto;
+.nouvelle-grille button,
+.nouvelle-grille input {
   border: none;
   background: none;
+  color: inherit;
   font-family: inherit;
   font-size: 1em;
-  display: flex;
-  align-items: center;
-  gap: 0.5em;
-  justify-content: center;
 }
 
-button[type="submit"]:hover {
+.nouvelle-grille button {
+  display: flex;
+}
+
+.nouvelle-grille button:hover {
   cursor: pointer;
   color: #2a6496;
+}
+
+.nouvelle-grille button:hover,
+.nouvelle-grille button:hover input {
   text-decoration: underline;
 }
 
-button[type="submit"]:active {
+.nouvelle-grille button:active {
   color: darkorchid;
 }
 
+.nouvelle-grille input { 
+  -moz-appearance: textfield;
+  appearance: textfield;
+  margin: 0;
+  padding: 0;
+  text-align: center;
+  text-decoration: underline dotted; 
+  width: 1em;
+}
+
+.nouvelle-grille input::-webkit-inner-spin-button,
+.nouvelle-grille input::-webkit-outer-spin-button { 
+  -webkit-appearance: none; 
+  margin: 0; 
+}
+
 @media (max-width: 1024px) {
   h1.large.width {
     display: none;
@@ -290,11 +314,11 @@ button[type="submit"]:active {
     background-color: #edeeee;
   }
 
-  button[type="submit"]:hover {
+  .nouvelle-grille button:hover {
     color: #479fec;
   }
 
-  button[type="submit"]:active {
+  .nouvelle-grille button:active {
     color: orchid;
   }
 }