peaufinage

Signed-off-by: adrien <adrien@malingrey.fr>

Grille.php

@@ -2,16 +2,13 @@
 include_once "dico.php";
 
 
-const ECART_TYPE_ALEA = 5;
+const ECART_TYPE = 5.0;
 
 
 $randmax = mt_getrandmax() + 1;
 function gaussienne($moyenne = 0, $ecartType = 1.0): float {
     global $randmax;
 
-    $u = 0;
-    $v = 0;
-
     $u = (mt_rand() + 1) / $randmax;
     $v = (mt_rand() + 1) / $randmax;
 
@@ -19,6 +16,27 @@ function gaussienne($moyenne = 0, $ecartType = 1.0): float {
     return $z * $ecartType + $moyenne;
 }
 
+function explode_pos(string $separator, string $string): array {
+    $mots = [];
+    $mot = "";
+    $longueur = strlen($string);
+    $debut = 0;
+
+    for ($i = 0; $i < $longueur; $i++) {
+        $lettre = $string[$i];
+        if ($lettre == $separator) {
+            $mots[] = ["mot" => $mot, "debut" => $debut, "fin" => $i - 1, "longueur" => $i - $debut];
+            $mot = "";
+            $debut = $i + 1;
+        } else {
+            $mot .= $lettre;
+        }
+    }
+
+    $mots[] = ["mot" => $mot, "debut" => $debut, "fin" => $longueur - 1, "longueur" => $longueur - $debut];
+    return $mots;
+}
+
 
 class Grille implements ArrayAccess
 {
@@ -81,22 +99,38 @@ class Grille implements ArrayAccess
                 "horizontales" => [],
                 "verticales" => []
             ];
-            foreach($this->lignes as $y => $mots) {
+            for ($y = 0; $y < $this->hauteur; $y++) {
+                $mots = explode_pos(CASE_NOIRE, $this->get_ligne($y, $this->largeur));
                 $this->definitions["horizontales"][$y] = [];
                 foreach($mots as $mot) {
-                    $definitions = $this->dico[strlen($mot)][$mot];
+                    $definitions = $this->dico[$mot["longueur"]][$mot["mot"]];
                     if (count($definitions)) {
-                        $this->definitions["horizontales"][$y][] = $definitions[mt_rand(0, count($definitions) - 1)];
+                        $definition = $definitions[mt_rand(0, count($definitions) - 1)];
+                        if (isset($definition[DEFINITION])) $mot["definition"] = $definition[DEFINITION];
+                        if (isset($definition[AUTEUR])) $mot["auteur"] = $definition[AUTEUR];
+                    }
+                    if (isset($definitions["nb_mots"])) {
+                        $mot["nb_mots"] = $definitions["nb_mots"];
+                    }
+                    unset($mot["mot"]);
+                    $this->definitions["horizontales"][$y][] = $mot;
                 }
             }
-            }
-            foreach($this->colonnes as $x => $mots) {
+            for ($x = 0; $x < $this->largeur; $x++) {
+                $mots = explode_pos(CASE_NOIRE, $this->get_colonne($x, $this->hauteur));
                 $this->definitions["verticales"][$x] = [];
                 foreach($mots as $mot) {
-                    $definitions = $this->dico[strlen($mot)][$mot];
+                    $definitions = $this->dico[$mot["longueur"]][$mot["mot"]];
                     if (count($definitions)) {
-                        $this->definitions["verticales"][$x][] = $definitions[mt_rand(0, count($definitions) - 1)];
+                        $definition = $definitions[mt_rand(0, count($definitions) - 1)];
+                        if (isset($definition[DEFINITION])) $mot["definition"] = $definition[DEFINITION];
+                        if (isset($definition[AUTEUR])) $mot["auteur"] = $definition[AUTEUR];
                     }
+                    if (isset($definitions["nb_mots"])) {
+                        $mot["nb_mots"] = $definitions["nb_mots"];
+                    }
+                    unset($mot["mot"]);
+                    $this->definitions["verticales"][$x][] = $mot;
                 }
             }
             $this->save($id);
@@ -125,25 +159,35 @@ class Grille implements ArrayAccess
             $lettres_ligne->branches,
             $lettres_colonne->branches
         );
+        // Sélection des candidats les plus fertiles
         foreach ($lettres_communes as $lettre => $_) {
-            $lettres_communes[$lettre] = count($lettres_ligne->branches[$lettre]) * count($lettres_colonne->branches[$lettre]) * gaussienne(1, ECART_TYPE_ALEA);
+            $lettres_communes[$lettre] = log(count($lettres_ligne->branches[$lettre])) * count($lettres_colonne->branches[$lettre]) * gaussienne(ECART_TYPE, ECART_TYPE);
         }
         uksort($lettres_communes, function($a, $b) use ($lettres_communes) {
             return $lettres_communes[$b] <=> $lettres_communes[$a];
         });
-        $lettres_communes = array_slice($lettres_communes, 0, 3);
+        uksort($lettres_communes, function($a, $b) {
+            return ($a == CASE_NOIRE)? 1 : -1;
+        });
+        $lettres_communes = array_slice($lettres_communes, 0, 2);
 
         foreach ($lettres_communes as $lettre => $_) {
             $this->grille[$y][$x] = $lettre;
 
             // Omission des lettres isolées
-            if ($lettre == CASE_NOIRE
-                && ($y - 2 < 0 || $this->grille[$y - 2][$x] == CASE_NOIRE)
-                && ($y - 1 < 0 || $x - 1 < 0 || $this->grille[$y - 1][$x - 1] == CASE_NOIRE)
-                && ($y - 1 < 0 || $x + 1 >= $this->largeur || $this->grille[$y - 1][$x + 1] == CASE_NOIRE)
-            ) {
-                continue;
-            }
+            if ($lettre == CASE_NOIRE) {
+                if (($y < 2 || $this->grille[$y - 2][$x] == CASE_NOIRE)
+                    && ($y < 1 || $x == 0 || $this->grille[$y - 1][$x - 1] == CASE_NOIRE)
+                    && ($y < 1 || $x + 1 >= $this->largeur || $this->grille[$y - 1][$x + 1] == CASE_NOIRE)
+                ) continue;
+                if ($y == $this->hauteur - 1
+                    && ($x < 2 || $this[$y][$x - 2] == CASE_NOIRE)
+                    && ($x < 1 || $this[$y - 1][$x - 1] == CASE_NOIRE)
+                ) continue;
+            } else if ($x == $this->largeur - 1 && $y == $this->hauteur - 1
+             && $this[$y][$x - 1] == CASE_NOIRE
+             && $this[$y-1][$x] == CASE_NOIRE
+            ) continue;
 
             // Omission des doublons
             $mots = [];
@@ -198,18 +242,6 @@ class Grille implements ArrayAccess
         );
     }
 
-    public function __serialize(): array {
-        return [
-            "grille" => $this->grille,
-            "definitions" => $this->definitions
-        ];
-    }
-
-    public function __unserialize(array $data): void {
-        $this->grille = $data["grille"];
-        $this->definitions = $data["definitions"];
-    }
-
     public function save($id)
     {
         if (session_status() === PHP_SESSION_ACTIVE) {
@@ -219,7 +251,8 @@ class Grille implements ArrayAccess
         session_id("$this->largeur,$this->hauteur,$id");
         session_start(["use_cookies" => false]);
 
-        $_SESSION = serialize($this);
+        $_SESSION["grille"] = $this->grille;
+        $_SESSION["definitions"] = $this->definitions;
     }
 
     public function load($id)
@@ -227,11 +260,12 @@ class Grille implements ArrayAccess
         session_id("$this->largeur,$this->hauteur,$id");
         session_start(["use_cookies" => false]);
 
-        if (!isset($_SESSION["grille"])) {
+        if (!isset($_SESSION)) {
             return false;
         }
 
-        unserialize($_SESSION);
+        $this->grille = $_SESSION["grille"];
+        $this->definitions = $_SESSION["definitions"];
 
         return true;
     }

Trie.php

@@ -1,23 +1,27 @@
 <?php
 
 
-class Trie implements ArrayAccess, IteratorAggregate, Countable {
+class Trie implements ArrayAccess, IteratorAggregate, Countable
+{
     public array $branches = [];
     private $nb_branches = 0;
 
-    public function arraySet($cles, $valeur) {
+    public function arraySet($cles, $valeur)
+    {
         $cle = $cles[0];
         $this->nb_branches++;
         $cles = array_slice($cles, 1);
         if ($cles == []) {
             $this->branches[$cle] = $valeur;
         } else {
-            if (!isset($this->branches[$cle])) $this->branches[$cle] = new Trie();
+            if (!isset($this->branches[$cle]))
+                $this->branches[$cle] = new Trie();
             $this->branches[$cle]->arraySet($cles, $valeur);
         }
     }
 
-    public function arrayExists($cles) {
+    public function arrayExists($cles)
+    {
         $cle = $cles[0];
         $cles = array_slice($cles, 1);
         if ($cles == []) {
@@ -27,7 +31,8 @@ class Trie implements ArrayAccess, IteratorAggregate, Countable {
         }
     }
 
-    public function &arrayGet($cles) {
+    public function &arrayGet($cles)
+    {
         $cle = $cles[0];
         $cles = array_slice($cles, 1);
         if ($cles == []) {
@@ -37,7 +42,8 @@ class Trie implements ArrayAccess, IteratorAggregate, Countable {
         }
     }
 
-    public function arrayUnset($cles) {
+    public function arrayUnset($cles)
+    {
         $cle = $cles[0];
         $cles = array_slice($cles, 1);
         if ($cles == []) {
@@ -52,10 +58,45 @@ class Trie implements ArrayAccess, IteratorAggregate, Countable {
         }
     }
 
-    public function arrayIterator() {
+    // ArrayAccess
+    public function offsetSet($array, $valeur): void
+    {
+        if (is_string($array)) {
+            $array = str_split($array);
+        }
+        $this->arraySet($array, $valeur);
+    }
+
+    public function offsetExists($array): bool
+    {
+        if (is_string($array)) {
+            $array = str_split($array);
+        }
+        return $this->arrayExists($array);
+    }
+
+    public function &offsetGet($array): mixed
+    {
+        if (is_string($array)) {
+            $array = str_split($array);
+        }
+        return $this->arrayGet($array);
+    }
+
+    public function offsetUnset($array): void
+    {
+        if (is_string($array)) {
+            $array = str_split($array);
+        }
+        $this->arrayUnset($array);
+    }
+
+    // IteratorAggregate
+    public function getIterator(): Traversable
+    {
         foreach ($this->branches as $cle => $branche) {
             if ($branche instanceof Trie) {
-                foreach($branche->arrayIterator() as $sous_cles => $feuille) {
+                foreach ($branche->getIterator() as $sous_cles => $feuille) {
                     yield array_merge([$cle], $sous_cles) => $feuille;
                 }
             } else {
@@ -64,32 +105,9 @@ class Trie implements ArrayAccess, IteratorAggregate, Countable {
         }
     }
 
-    // ArrayAccess
-    public function offsetSet($string, $valeur): void {
-        $this->arraySet(str_split($string), $valeur);
-    }
-
-    public function offsetExists($string): bool {
-        return $this->arrayExists(str_split($string));
-    }
-
-    public function &offsetGet($string): mixed {
-        return $this->arrayGet(str_split($string));
-    }
-
-    public function offsetUnset($string): void {
-        $this->arrayUnset(str_split($string));
-    }
-
-    // IteratorAggregate
-    public function getIterator(): Traversable {
-        foreach($this->arrayIterator() as $array => $valeur) {
-            yield implode("", $array) => $valeur;
-        }
-    }
-
     // Countable
-    public function count(): int {
+    public function count(): int
+    {
         return $this->nb_branches;
     }
 }

dico.php

@@ -1,18 +1,21 @@
 <?php
+
 include_once "Trie.php";
 
 
 const CASE_NOIRE = " ";
+const DEFINITION = 0;
+const AUTEUR     = 1;
 
 
 function dico($longueur_max) {
     $transliterator = Transliterator::createFromRules(':: Any-Latin; :: Latin-ASCII; :: NFD; :: [:Nonspacing Mark:] Remove; :: Upper(); :: NFC;', Transliterator::FORWARD);
     
-    $dico = [[new Trie()]];
+    $dico = [];
     for ($longueur = 0; $longueur <= $longueur_max; $longueur++) {
         $dico[] = new Trie();
     }
-    if (($lecteur = fopen("dico.csv", "r")) !== FALSE) {
+    if (($lecteur = fopen("dico.tsv", "r")) !== FALSE) {
         $entete = fgetcsv($lecteur, 0, "\t");
         while (($ligne = fgetcsv($lecteur, 0, "\t")) !== FALSE) {
             if (
@@ -22,7 +25,7 @@ function dico($longueur_max) {
             ) continue;
 
             $mot = $ligne[0];
-            $definitions = array_slice($ligne, 1);
+            $definition = array_slice($ligne, 1);
 
             $mot = str_replace("-", CASE_NOIRE, $mot);
             $mot = $transliterator->transliterate($mot);
@@ -30,12 +33,16 @@ function dico($longueur_max) {
                 $mots = explode(CASE_NOIRE, $mot);
                 $nb_mots = count($mots);
                 $mot = implode("", $mots);
-                foreach($definitions as $i => $definition) {
-                    $definitions[$i] = "$definition#$nb_mots";
-                }
+            } else {
+                $nb_mots = 1;
             }
 
-            $dico[strlen($mot)][$mot] = $definitions;
+            if (array_key_exists($mot, $dico)) {
+                $dico[strlen($mot)][$mot][] = $definition;
+            } else {
+                $dico[strlen($mot)][$mot] = [$definition];
+                if ($nb_mots > 1) $dico[strlen($mot)][$mot]["nb_mots"] = $nb_mots;
+            }
         }
         fclose($lecteur);
     }
@@ -44,13 +51,15 @@ function dico($longueur_max) {
 }
 
 function mots_espaces($longueur_max) {
+    $longueur_min = 1;
     $dico = dico($longueur_max);
-    for ($longueur = 1; $longueur <= $longueur_max; $longueur++) {
-        for ($position_espace = 1; $position_espace + 1 < $longueur; $position_espace++) {
+    for ($longueur = 3; $longueur <= $longueur_max; $longueur++) {
+        //$longueur_min = $longueur == $longueur_max ? 1 : 2;
+        for ($position_espace = $longueur - 2; $position_espace >= $longueur_min; $position_espace--) {
             $mots_suivants = $dico[$longueur - $position_espace - 1];
-            foreach ($dico[$position_espace]->arrayIterator() as $premier_mot => $definition) {
+            foreach ($dico[$position_espace] as $premier_mot => $definition) {
                 $premier_mot[] = CASE_NOIRE;
-                $dico[$longueur]->arraySet($premier_mot, $mots_suivants);
+                $dico[$longueur][$premier_mot] = $mots_suivants;
             }
         }
     }

index.php

@@ -1,11 +1,14 @@
 <?php
+ini_set('display_errors', '1');
+ini_set('display_startup_errors', '1');
+error_reporting(E_ALL);
 include_once "Grille.php";
 
 
-const HAUTEUR_DEFAUT = 8;
+const HAUTEUR_DEFAUT = 7;
 const HAUTEUR_MIN = 2;
 const HAUTEUR_MAX = 10;
-const LARGEUR_DEFAUT = 8;
+const LARGEUR_DEFAUT = 7;
 const LARGEUR_MIN = 2;
 const LARGEUR_MAX = 10;
 
@@ -27,7 +30,7 @@ $largeur = filter_input(INPUT_GET, 'colonnes', FILTER_VALIDATE_INT, [
 ]);
 
 $grille = new Grille($hauteur, $largeur);
-$basedir = $_SERVER["REQUEST_SCHEME"]."://".$_SERVER["HTTP_HOST"].dirname($_SERVER["DOCUMENT_URI"]);
+$basedir = $_SERVER["REQUEST_SCHEME"] . "://" . $_SERVER["HTTP_HOST"] . dirname($_SERVER["DOCUMENT_URI"]);
 
 if (!isset($_GET["grille"]) || $_GET["grille"] == "") {
     do {
@@ -43,48 +46,60 @@ if (!isset($_GET["grille"]) || $_GET["grille"] == "") {
 }
 
 function formatter_definition($definition) {
-    if (strpos($definition, "#") !== false) {
-        [$definition, $nb_mots] = explode("#", $definition);
+    if (isset($definition["nb_mots"]) && $definition["nb_mots"] > 1) {
+        $nb_mots = $definition["nb_mots"];
         $nb_mots = " <small>($nb_mots mots)</small>";
     } else {
         $nb_mots = "";
     }
-    if (strpos($definition, "@") !== false) {
-        [$definition, $auteur] = explode("@", $definition);
+    if (isset($definition["auteur"])) {
+        $auteur = $definition["auteur"];
         $auteur = " <small><em>$auteur</em></small>";
     } else {
         $auteur = "";
     }
-    return $definition;
+    return ucfirst($definition["definition"]) . $nb_mots . $auteur;
+}
+
+function definition_courante($definitions, $position) {
+    foreach ($definitions as $id => $definition) {
+        if ($position <= $definition["fin"])
+            return [$id, $definition];
+    }
+    return [];
 }
 ?>
 <!DOCTYPE HTML>
 <html lang="fr-FR" dir="ltr" prefix="og: https://ogp.me/ns#">
 
-<head>
+    <head>
         <meta charset="utf-8">
         <title>🄼🄾🅃🅂▣🄲🅁🄾🄸🅂🄴🅂</title>
         <link rel="stylesheet" href="style.css">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <link rel="shortcut icon" href="favicon.ico" />
-    <link rel="icon" type="image/svg+xml" href="apercu.svg.php?grille=<?=$id?>&lignes=<?=$hauteur?>&colonnes=<?=$largeur?>">
-    <link rel="icon" type="image/png" sizes="96x96" href="apercu.png.php?grille=<?=$id?>&lignes=<?=$hauteur?>&colonnes=<?=$largeur?>&largeur=96&hauteur=96" />
+        <link rel="icon" type="image/svg+xml"
+            href="apercu.svg.php?grille=<?= $id ?>&lignes=<?= $hauteur ?>&colonnes=<?= $largeur ?>">
+        <link rel="icon" type="image/png" sizes="96x96"
+            href="apercu.png.php?grille=<?= $id ?>&lignes=<?= $hauteur ?>&colonnes=<?= $largeur ?>&largeur=96&hauteur=96" />
         <link rel="apple-touch-icon" sizes="180x180" href="favicons/apple-touch-icon.png" />
         <meta name="apple-mobile-web-app-title" content="🄼🄾🅃🅂 🄲🅁🄾🄸🅂🄴🅂" />
         <link rel="manifest" href="site.webmanifest" />
-    <meta property="og:title" content="🄼🄾🅃🅂▣🄲🅁🄾🄸🅂🄴🅂"/>
-    <meta property="og:type" content="game"/>
-    <meta property="og:url" content="<?=$basedir?>"/>
-    <meta property="og:image" content="<?=$basedir?>/apercu.png.php?grille=<?=$id?>&lignes=<?=$hauteur?>&colonnes=<?=$largeur?>&largeur=1200&hauteur=630"/>
-    <meta property="og:image:width" content="1200"/>
-    <meta property="og:image:height" content="630"/>
-    <meta property="og:locale" content="fr_FR"/>
-    <meta property="og:site_name" content="<?=$_SERVER["HTTP_HOST"]?>"/>
-</head>
+        <meta property="og:title" content="🄼🄾🅃🅂▣🄲🅁🄾🄸🅂🄴🅂" />
+        <meta property="og:type" content="game" />
+        <meta property="og:url" content="<?= $basedir ?>" />
+        <meta property="og:image"
+            content="<?= $basedir ?>/apercu.png.php?grille=<?= $id ?>&lignes=<?= $hauteur ?>&colonnes=<?= $largeur ?>&largeur=1200&hauteur=630" />
+        <meta property="og:image:width" content="1200" />
+        <meta property="og:image:height" content="630" />
+        <meta property="og:locale" content="fr_FR" />
+        <meta property="og:site_name" content="<?= $_SERVER["HTTP_HOST"] ?>" />
+    </head>
 
-<body>
+    <body>
         <form id="grilleForm" method="get" location=".">
             <h1 class="large width">
+                <a href=".">
                     <table>
                         <tbody>
                             <tr>
@@ -110,97 +125,141 @@ function formatter_definition($definition) {
                             </tr>
                         </tbody>
                     </table>
+                </a>
             </h1>
-        <h1 class="small width">Mots■croisés</h1>
+            <h1 class="small width"><a href=".">Mots■croisés</a></h1>
             <div class="grille-et-definitions">
-            <?php if ($grille_valide): ?>
+<?php   if ($grille_valide): ?>
                 <div class="grille">
                     <table>
                         <tr>
                             <th></th>
-                            <?php for ($x = 0; $x < $largeur; $x++): ?>
+<?php       for ($x = 0; $x < $largeur; $x++): ?>
                             <th><?= chr($x + 65) ?></th>
-                            <?php endfor; ?>
+<?php       endfor; ?>
                             <th></th>
                         </tr>
-                        <?php for ($y = 0; $y < $hauteur; $y++): ?>
+<?php       for ($y = 0; $y < $hauteur; $y++): ?>
                         <tr>
                             <th><?= $y + 1 ?></th>
-                                <?php for ($x = 0; $x < $largeur; $x++): ?>
-                                    <?php if ($grille[$y][$x] == CASE_NOIRE): ?>
+<?php           for ($x = 0; $x < $largeur; $x++): ?>
+<?php               if ($grille[$y][$x] == CASE_NOIRE): ?>
                             <td class="case noire">
-                                            <input id="<?= chr($x + 65) . ($y + 1) ?>" type="text" maxlength="1" size="1" value="<?= CASE_NOIRE ?>" disabled />
+                                <input id="<?= chr($x + 65) . ($y + 1) ?>" type="text" maxlength="1" size="1"
+                                    value="<?= CASE_NOIRE ?>" disabled />
                             </td>
-                                    <?php else: ?>
+<?php               else: ?>
                             <td class="case blanche">
-                                            <input id="<?= chr($x + 65) . ($y + 1) ?>" type="text" maxlength="1" size="1" pattern="[A-Z]" placeholder="<?= $grille[$y][$x] ?>"
-                                                title="<?= strip_tags("→ " . implode("\n→ ", array_map("formatter_definition", $grille->definitions["horizontales"][$y] ?? [])) . "\n↓ " . implode("\n↓ ", array_map("formatter_definition", $grille->definitions["verticales"][$x] ?? []))) ?>" />
+<?php
+                        $title = [];
+                        [$iddh, $definition_horizontale] = definition_courante($grille->definitions["horizontales"][$y], $x);
+                        [$iddv, $definition_verticale] = definition_courante($grille->definitions["verticales"][$x], $y);
+                        if (isset($definition_horizontale["definition"]))
+                            $title[0] = "→ " . $definition_horizontale["definition"];
+                        if (isset($definition_horizontale["nb_mots"]))
+                            $title[0] .= " (" . $definition_horizontale["nb_mots"] . ")";
+                        if (isset($definition_horizontale["auteur"]))
+                            $title[0] .= " (" . $definition_horizontale["auteur"] . ")";
+                        if (isset($definition_verticale["definition"]))
+                            $title[1] = "↓  " . $definition_verticale["definition"];
+                        if (isset($definition_verticale["nb_mots"]))
+                            $title[0] .= " (" . $definition_verticale["nb_mots"] . ")";
+                        if (isset($definition_verticale["auteur"]))
+                            $title[1] .= " (" . $definition_verticale["auteur"] . ")";
+                        $title = htmlspecialchars(implode("\n", $title));
+?>
+                                <input id="case-<?= chr($x + 65) . ($y + 1) ?>" type="text" maxlength="1" size="1"
+                                    pattern="[A-Z]" title="<?= $title ?>"
+                                    data-iddh="<?= isset($definition_horizontale["definition"])? "dh-$y-$iddh" : "" ?>"
+                                    data-iddv="<?= isset($definition_verticale["definition"])? "dv-$x-$iddv" : "" ?>"
+                                />
                             </td>
-                                    <?php endif; ?>
-                                <?php endfor; ?>
+<?php               endif; ?>
+<?php           endfor; ?>
                         </tr>
-                        <?php endfor; ?>
+<?php       endfor; ?>
                     </table>
                 </div>
                 <div class="definitions horizontales">
                     <h2>Horizontalement</h2>
                     <ol type="1">
-                        <?php foreach ($grille->definitions["horizontales"] as $y => $definitions): ?>
+<?php       foreach ($grille->definitions["horizontales"] as $y => $definitions):
+                $definitions = array_filter($definitions, function($definition) {
+                    return isset($definition["definition"]);
+                });
+?>
+<?php           if (count($definitions)): ?>
+<?php               if (count($definitions) == 1): ?>
+<?php                   foreach ($definitions as $id => $definition): ?>
+                        <li id="<?= "dh-$y-$id" ?>"><label for="case-A<?= $y + 1 ?>"><?= formatter_definition($definition) ?></label></li>
+<?php                   endforeach ?>
+<?php               else: ?>
                         <li>
-                                <?php if (count($definitions)): ?>
-                                    <?php if (count($definitions) == 1): ?>
-                                        <?= formatter_definition($definitions[0]) ?>
-                                    <?php else: ?>
                             <ol>
-                                            <?php foreach ($definitions as $definition) : ?>
-                                                <li><?= formatter_definition($definition) ?></li>
-                                            <?php endforeach ?>
-                                        </ol>
-                                    <?php endif ?>
-                                <?php endif ?>
+<?php                   foreach ($definitions as $id => $definition): ?>
+                                <li id="<?= "dh-$y-$id" ?>">
+                                    <label for="case-<?= chr($definition["debut"] + 0x41) ?><?= $y + 1 ?>"><?= formatter_definition($definition) ?></label>
                                 </li>
-                        <?php endforeach; ?>
+<?php                   endforeach ?>
+                            </ol>
+                        </li>
+<?php               endif ?>
+<?php           else: ?>
+                        <li></li>
+<?php           endif ?>
+<?php       endforeach ?>
                     </ol>
                 </div>
                 <div class="definitions verticales">
                     <h2>Verticalement</h2>
                     <ol type="A">
-                        <?php foreach ($grille->definitions["verticales"] as $x => $definitions): ?>
+<?php       foreach ($grille->definitions["verticales"] as $x => $definitions):
+                $definitions = array_filter($definitions, function($definition) {
+                    return isset($definition["definition"]);
+                });
+?>
+<?php           if (count($definitions)): ?>
+<?php               if (count($definitions) == 1): ?>
+<?php                   foreach ($definitions as $id => $definition): ?>
+                        <li id="<?= "dv-$x-$id" ?>"><label for="case-<?= chr($x + 0x41) ?>1"><?= formatter_definition($definition) ?></label></li>
+<?php                   endforeach ?>
+<?php               else: ?>
                         <li>
-                                <?php if (count($definitions)): ?>
-                                    <?php if (count($definitions) == 1): ?>
-                                        <?= formatter_definition($definitions[0]) ?>
-                                    <?php else: ?>
                             <ol>
-                                            <?php foreach ($definitions as $definition) : ?>
-                                                <li><?= formatter_definition($definition) ?></li>
-                                            <?php endforeach ?>
-                                        </ol>
-                                    <?php endif ?>
-                                <?php endif ?>
+<?php                   foreach ($definitions as $id => $definition): ?>
+                                <li id="<?= "dv-$x-$id" ?>">
+                                    <label for="case-<?= chr($x + 0x41) ?><?= $definition["debut"] + 1 ?>"><?= formatter_definition($definition) ?></label>
                                 </li>
-                        <?php endforeach; ?>
+<?php                   endforeach ?>
+                            </ol>
+                        </li>
+<?php               endif ?>
+<?php           else: ?>
+                        <li></li>
+<?php           endif ?>
+<?php       endforeach ?>
                     </ol>
                 </div>
                 <input type="hidden" id="solution_hashee" value="<?= $grille->hash() ?>" />
-            <?php else: http_response_code(500); ?>
+<?php       else:
+                http_response_code(500); ?>
                 <h3 class="erreur">Erreur de génération de la grille</h3>
-            <?php endif ?>
+<?php       endif ?>
             </div>
 
             <div class="nouvelle-grille">
                 <img src="favicons/favicon.svg" width="16" height="16">
                 <button type="submit">Nouvelle grille</button>
                 de
-            <input type="number" id="lignes"<?= isset($_GET["lignes"])? ' name="lignes"': "" ?> value="<?= $hauteur ?>" min="<?=HAUTEUR_MIN?>" max="<?=HAUTEUR_MAX?>"/>
+                <input type="number" id="lignes" <?= isset($_GET["lignes"]) ? ' name="lignes"' : "" ?> value="<?= $hauteur ?>" min="<?= HAUTEUR_MIN ?>" max="<?= HAUTEUR_MAX ?>" />
                 lignes et
-            <input type="number" id="colonnes"<?= isset($_GET["colonnes"])? ' name="colonnes"': "" ?> value="<?= $largeur ?>" min="<?=LARGEUR_MIN?>" max="<?=LARGEUR_MAX?>"/>
+                <input type="number" id="colonnes" <?= isset($_GET["colonnes"]) ? ' name="colonnes"' : "" ?> value="<?= $largeur ?>" min="<?= LARGEUR_MIN ?>" max="<?= LARGEUR_MAX ?>" />
                 colonnes
             </div>
         </form>
 
         <script src="script.js"></script>
         <script>navigator?.serviceWorker.register('service-worker.js')</script>
-</body>
+    </body>
 
 </html>

script.js

@@ -17,16 +17,31 @@ for (let input of inputs) {
 
   input.onfocus = function (event) {
     for (li of document.querySelectorAll(
-      `.definitions.horizontales > ol > li:nth-child(${
-        input.y + 1
-      }), .definitions.verticales > ol > li:nth-child(${input.x + 1})`
+      `.definitions.horizontales > ol > li:nth-child(${input.y + 1})`
     )) {
       li.classList.add("selectionee");
+      for (liEnfant of li.querySelectorAll("li")) {
+        if (liEnfant.id == input.dataset.iddh) {
+          liEnfant.classList.add("selectionee");
+        } else {
+          liEnfant.classList.add("non-selectionee");
+        }
+      }
     }
     for (li of document.querySelectorAll(
-      `.definitions.horizontales > ol > li:not(:nth-child(${
-        input.y + 1
-      })), .definitions.verticales > ol > li:not(:nth-child(${input.x + 1}))`
+      `.definitions.verticales > ol > li:nth-child(${input.x + 1})`
+    )) {
+      li.classList.add("selectionee");
+      for (liEnfant of li.querySelectorAll("li")) {
+        if (liEnfant.id == input.dataset.iddv) {
+          liEnfant.classList.add("selectionee");
+        } else {
+          liEnfant.classList.add("non-selectionee");
+        }
+      }
+    }
+    for (li of document.querySelectorAll(
+      `.definitions.horizontales > ol > li:not(:nth-child(${input.y + 1})), .definitions.verticales > ol > li:not(:nth-child(${input.x + 1}))`
     )) {
       li.classList.add("non-selectionee");
     }
@@ -35,26 +50,28 @@ for (let input of inputs) {
   };
 
   input.onkeydown = function (event) {
-    next_input = null;
+    next_input = input;
+    do {
       switch (event.key) {
         case "ArrowUp":
-        next_input = inputs[(input.index - largeur + nb_cases) % nb_cases];
+          next_input = inputs[(next_input.index - largeur + nb_cases) % nb_cases];
           break;
         case "ArrowDown":
-        next_input = inputs[(input.index + largeur) % nb_cases];
+          next_input = inputs[(next_input.index + largeur) % nb_cases];
           break;
         case "ArrowLeft":
-        next_input = inputs[(input.index - 1 + nb_cases) % nb_cases];
+          next_input = inputs[(next_input.index - 1 + nb_cases) % nb_cases];
           break;
         case "ArrowRight":
-        next_input = inputs[(input.index + 1) % nb_cases];
+          next_input = inputs[(next_input.index + 1) % nb_cases];
           break;
+        default:
+          return;
       }
-    if (next_input) {
+    } while (next_input.disabled)
+    event.preventDefault();
     next_input.focus();
     next_input.select();
-      event.preventDefault();
-    }
   };
 
   input.oninput = function (event) {
@@ -77,21 +94,11 @@ for (let input of inputs) {
   };
 
   input.onblur = function (event) {
-    for (li of document.querySelectorAll(
-      `.definitions.horizontales > ol > li:nth-child(${
-        input.y + 1
-      }), .definitions.verticales > ol > li:nth-child(${input.x + 1})`
-    )) {
+    for (li of document.querySelectorAll(".definitions li")) {
       li.classList.remove("selectionee");
-    }
-    for (li of document.querySelectorAll(
-      `.definitions.horizontales > ol > li:not(:nth-child(${
-        input.y + 1
-      })), .definitions.verticales > ol > li:not(:nth-child(${input.x + 1}))`
-    )) {
       li.classList.remove("non-selectionee");
     }
-  };
+  }
 }
 
 for (let input of grilleForm.querySelectorAll(".nouvelle-grille input")) {

style.css

@@ -18,6 +18,12 @@ h1 {
   letter-spacing: 0.2em;
 }
 
+h1 a {
+  width: 100%;
+  text-decoration: none;
+  color: inherit;
+}
+
 h1.large.width {
   display: inherit;
   padding-top: 1rem;
@@ -171,6 +177,10 @@ h2 {
   opacity: 30%;
 }
 
+.definitions label {
+  cursor: pointer;
+}
+
 .erreur {
   text-align: center;
 }
@@ -199,6 +209,7 @@ h2 {
   text-decoration: underline;
 }
 
+h1 a:hover,
 .nouvelle-grille button:hover {
   color: #2a6496;
 }
@@ -315,6 +326,7 @@ h2 {
     background-color: #edeeee;
   }
 
+  h1 a:hover,
   .nouvelle-grille button:hover {
     color: #479fec;
   }