diff --git a/index.php b/index.php index 9e6ab2d..d55ef2a 100644 --- a/index.php +++ b/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 ] ]); @@ -158,11 +161,17 @@ for ($x = 0; $x < $largeur; $x++) {

Erreur de génération de la grille

- - name="lignes" value="" /> - name="colonnes" value="" /> - - + +
+ + +
diff --git a/script.js b/script.js index a73ea37..833e76a 100644 --- a/script.js +++ b/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(); + }; +} \ No newline at end of file diff --git a/style.css b/style.css index 253b201..49c753a 100644 --- a/style.css +++ b/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; } }