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="= $hauteur ?>" />
- name="colonnes" value="= $largeur ?>" />
-
-
+
+
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;
}
}