truc

Grille.php

@@ -2,7 +2,7 @@
 include_once "dico.php";
 
 
-const ECART_TYPE = 5;
+const ECART_TYPE = 5.0;
 
 
 $randmax = mt_getrandmax() + 1;
@@ -16,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
 {
@@ -78,22 +99,24 @@ 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];
-                    if (count($definitions)) {
-                        $this->definitions["horizontales"][$y][] = $definitions[mt_rand(0, count($definitions) - 1)];
-                    }
+                    $definition = $this->dico[$mot["longueur"]][$mot["mot"]];
+                    $definition["debut"] = $mot["debut"];
+                    $definition["fin"] = $mot["fin"];
+                    $this->definitions["horizontales"][$y][] = $definition;
                 }
             }
-            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];
-                    if (count($definitions)) {
-                        $this->definitions["verticales"][$x][] = $definitions[mt_rand(0, count($definitions) - 1)];
-                    }
+                    $definition = $this->dico[$mot["longueur"]][$mot["mot"]];
+                    $definition["debut"] = $mot["debut"];
+                    $definition["fin"] = $mot["fin"];
+                    $this->definitions["verticales"][$x][] = $definition;
                 }
             }
             $this->save($id);
@@ -122,13 +145,17 @@ 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);
+            $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;
@@ -201,18 +228,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) {
@@ -222,7 +237,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)
@@ -230,11 +246,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 == []) {
@@ -53,28 +59,32 @@ class Trie implements ArrayAccess, IteratorAggregate, Countable {
     }
 
     // ArrayAccess
-    public function offsetSet($array, $valeur): void {
+    public function offsetSet($array, $valeur): void
+    {
         if (is_string($array)) {
             $array = str_split($array);
         }
         $this->arraySet($array, $valeur);
     }
 
-    public function offsetExists($array): bool {
+    public function offsetExists($array): bool
+    {
         if (is_string($array)) {
             $array = str_split($array);
         }
         return $this->arrayExists($array);
     }
 
-    public function &offsetGet($array): mixed {
+    public function &offsetGet($array): mixed
+    {
         if (is_string($array)) {
             $array = str_split($array);
         }
         return $this->arrayGet($array);
     }
 
-    public function offsetUnset($array): void {
+    public function offsetUnset($array): void
+    {
         if (is_string($array)) {
             $array = str_split($array);
         }
@@ -82,10 +92,11 @@ class Trie implements ArrayAccess, IteratorAggregate, Countable {
     }
 
     // IteratorAggregate
-    public function getIterator(): Traversable {
+    public function getIterator(): Traversable
+    {
         foreach ($this->branches as $cle => $branche) {
             if ($branche instanceof Trie) {
-                foreach($branche->getIterator() as $sous_cles => $feuille) {
+                foreach ($branche->getIterator() as $sous_cles => $feuille) {
                     yield array_merge([$cle], $sous_cles) => $feuille;
                 }
             } else {
@@ -95,7 +106,8 @@ class Trie implements ArrayAccess, IteratorAggregate, Countable {
     }
 
     // Countable
-    public function count(): int {
+    public function count(): int
+    {
         return $this->nb_branches;
     }
 }

dico.php

@@ -9,45 +9,51 @@ const CASE_NOIRE = " ";
 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) {
-        $entete = fgetcsv($lecteur, 0, "\t");
-        while (($ligne = fgetcsv($lecteur, 0, "\t")) !== FALSE) {
-            if (
-                $ligne[0] == NULL
-                || substr($ligne[0], 0, 1) == "#"
-                || strlen($ligne[0]) > $longueur_max
-            ) continue;
+    foreach (str_split("ABCDEFGHIJKLMNOPQRSTUVWXYZ") as $lettre) {
+        $dico[1][$lettre] = [];
+    }
 
-            $mot = $ligne[0];
-            $definitions = array_slice($ligne, 1);
-
-            $mot = str_replace("-", CASE_NOIRE, $mot);
-            $mot = $transliterator->transliterate($mot);
-            if (strpos($mot, CASE_NOIRE) !== false) {
-                $mots = explode(CASE_NOIRE, $mot);
-                $nb_mots = count($mots);
-                $mot = implode("", $mots);
-                foreach($definitions as $i => $definition) {
-                    $definitions[$i] = "$definition#$nb_mots";
-                }
-            }
-
-            $dico[strlen($mot)][$mot] = $definitions;
+    foreach (yaml_parse_file('dico.yaml') as $mot => $definitions) {
+        $mot = str_replace("-", CASE_NOIRE, $mot);
+        $mot = $transliterator->transliterate($mot);
+        if (strpos($mot, CASE_NOIRE) !== false) {
+            $mots = explode(CASE_NOIRE, $mot);
+            $nb_mots = count($mots);
+            $mot = implode("", $mots);
+        } else {
+            $nb_mots = 1;
         }
-        fclose($lecteur);
+
+        if (strlen($mot) > $longueur_max) continue;
+        
+        $dico[strlen($mot)][$mot] = [];
+        if (count($definitions)) {
+            $definition = $definitions[mt_rand(0, count($definitions) - 1)];
+            if (is_array($definition)) {
+                foreach ($definition as $auteur => $def) {
+                    $dico[strlen($mot)][$mot]["definition"] = $def;
+                    $dico[strlen($mot)][$mot]["auteur"] = $auteur;
+                }
+            } else if (is_string($definition)) {
+                $dico[strlen($mot)][$mot]["definition"] = $definition;
+            }
+        }
+        if ($nb_mots > 1) $dico[strlen($mot)][$mot]["nb_mots"] = $nb_mots;
     }
     
     return $dico;
 }
 
 function mots_espaces($longueur_max) {
+    $longueur_min = 1;
     $dico = dico($longueur_max);
-    for ($longueur = $longueur_max; $longueur >= 2; $longueur--) {
-        for ($position_espace = $longueur - 2; $position_espace >= 1; $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] as $premier_mot => $definition) {
                 $premier_mot[] = CASE_NOIRE;

index.php

@@ -1,5 +1,7 @@
 <?php
-
+ini_set('display_errors', '1');
+ini_set('display_startup_errors', '1');
+error_reporting(E_ALL);
 include_once "Grille.php";
 
 
@@ -28,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 {
@@ -44,166 +46,220 @@ 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 . $nb_mots . $auteur;
+    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>
-    <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="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>
+    <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="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>
 
-<body>
-    <form id="grilleForm" method="get" location=".">
-        <h1 class="large width">
-            <a href=".">
-                <table>
-                    <tbody>
-                        <tr>
-                            <td colspan="2"></td>
-                            <td>M</td>
-                        </tr>
-                        <tr>
-                            <td>c</td>
-                            <td>r</td>
-                            <td>o</td>
-                            <td>i</td>
-                            <td>s</td>
-                            <td>é</td>
-                            <td>s</td>
-                        </tr>
-                        <tr>
-                            <td colspan="2"></td>
-                            <td>t</td>
-                        </tr>
-                        <tr>
-                            <td colspan="2"></td>
-                            <td>s</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </a>
-        </h1>
-        <h1 class="small width"><a href=".">Mots■croisés</a></h1>
-        <div class="grille-et-definitions">
-            <?php if ($grille_valide): ?>
+    <body>
+        <form id="grilleForm" method="get" location=".">
+            <h1 class="large width">
+                <a href=".">
+                    <table>
+                        <tbody>
+                            <tr>
+                                <td colspan="2"></td>
+                                <td>M</td>
+                            </tr>
+                            <tr>
+                                <td>c</td>
+                                <td>r</td>
+                                <td>o</td>
+                                <td>i</td>
+                                <td>s</td>
+                                <td>é</td>
+                                <td>s</td>
+                            </tr>
+                            <tr>
+                                <td colspan="2"></td>
+                                <td>t</td>
+                            </tr>
+                            <tr>
+                                <td colspan="2"></td>
+                                <td>s</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </a>
+            </h1>
+            <h1 class="small width"><a href=".">Mots■croisés</a></h1>
+            <div class="grille-et-definitions">
+<?php   if ($grille_valide): ?>
                 <div class="grille">
                     <table>
                         <tr>
                             <th></th>
-                            <?php for ($x = 0; $x < $largeur; $x++): ?>
-                                <th><?= chr($x + 65) ?></th>
-                            <?php endfor; ?>
+<?php       for ($x = 0; $x < $largeur; $x++): ?>
+                            <th><?= chr($x + 65) ?></th>
+<?php       endfor; ?>
                             <th></th>
                         </tr>
-                        <?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): ?>
-                                        <td class="case noire">
-                                            <input id="<?= chr($x + 65) . ($y + 1) ?>" type="text" maxlength="1" size="1" value="<?= CASE_NOIRE ?>" disabled />
-                                        </td>
-                                    <?php else: ?>
-                                        <td class="case blanche">
-                                            <input id="<?= chr($x + 65) . ($y + 1) ?>" type="text" maxlength="1" size="1" pattern="[A-Z]"
-                                                title="<?= strip_tags("→ " . implode("\n→ ", array_map("formatter_definition", $grille->definitions["horizontales"][$y] ?? [])) . "\n↓ " . implode("\n↓ ", array_map("formatter_definition", $grille->definitions["verticales"][$x] ?? []))) ?>" />
-                                        </td>
-                                    <?php endif; ?>
-                                <?php endfor; ?>
-                            </tr>
-                        <?php endfor; ?>
+<?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): ?>
+                            <td class="case noire">
+                                <input id="<?= chr($x + 65) . ($y + 1) ?>" type="text" maxlength="1" size="1"
+                                    value="<?= CASE_NOIRE ?>" disabled />
+                            </td>
+<?php               else: ?>
+                            <td class="case blanche">
+<?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; ?>
+                        </tr>
+<?php       endfor; ?>
                     </table>
                 </div>
                 <div class="definitions horizontales">
                     <h2>Horizontalement</h2>
                     <ol type="1">
-                        <?php foreach ($grille->definitions["horizontales"] as $y => $definitions): ?>
-                            <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 ?>
-                            </li>
-                        <?php endforeach; ?>
+<?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>
+                            <ol>
+<?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 ?>
+                            </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): ?>
-                            <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 ?>
-                            </li>
-                        <?php endforeach; ?>
+<?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>
+                            <ol>
+<?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 ?>
+                            </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 ?>
-        </div>
+<?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?>"/>
-            lignes et
-            <input type="number" id="colonnes"<?= isset($_GET["colonnes"])? ' name="colonnes"': "" ?> value="<?= $largeur ?>" min="<?=LARGEUR_MIN?>" max="<?=LARGEUR_MAX?>"/>
-            colonnes
-        </div>
-    </form>
+            <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 ?>" />
+                lignes et
+                <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>
+        <script src="script.js"></script>
+        <script>navigator?.serviceWorker.register('service-worker.js')</script>
+    </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");
     }
@@ -79,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

@@ -177,6 +177,10 @@ h2 {
   opacity: 30%;
 }
 
+.definitions label {
+  cursor: pointer;
+}
+
 .erreur {
   text-align: center;
 }