truc

Grille.php

@@ -20,19 +20,20 @@ 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[$i] = $mot;
+            $mots[] = ["mot" => $mot, "debut" => $debut, "fin" => $i - 1, "longueur" => $i - $debut];
             $mot = "";
+            $debut = $i + 1;
         } else {
             $mot .= $lettre;
         }
     }
 
-    $mots[$i] = $mot;
-
+    $mots[] = ["mot" => $mot, "debut" => $debut, "fin" => $longueur - 1, "longueur" => $longueur - $debut];
     return $mots;
 }
 
@@ -98,32 +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 $fin => $mot) {
-                    $definitions = $this->dico[strlen($mot)][$mot];
-                    if (count($definitions)) {
-                        $definition = $definitions[mt_rand(0, count($definitions) - 1)];
-                        if (isset($definitions["nb_mots"])) {
-                            $definition["nb_mots"] = $definitions["nb_mots"];
-                        }
-                        $this->definitions["horizontales"][$y][$fin] = $definition;
+                foreach($mots as $mot) {
+                    $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 $fin => $mot) {
-                    $definitions = $this->dico[strlen($mot)][$mot];
-                    if (count($definitions)) {
-                        $definition = $definitions[mt_rand(0, count($definitions) - 1)];
-                        if (isset($definitions["nb_mots"])) {
-                            $definition["nb_mots"] = $definitions["nb_mots"];
-                        }
-                        $this->definitions["verticales"][$x][$fin] = $definition;
-                    }
+                foreach($mots as $mot) {
+                    $definition = $this->dico[$mot["longueur"]][$mot["mot"]];
+                    $definition["debut"] = $mot["debut"];
+                    $definition["fin"] = $mot["fin"];
+                    $this->definitions["verticales"][$x][] = $definition;
                 }
             }
             $this->save($id);
@@ -235,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) {
@@ -256,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)
@@ -264,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;
     }

dico.php

@@ -4,8 +4,6 @@ include_once "Trie.php";
 
 
 const CASE_NOIRE = " ";
-const DEFINITION = 0;
-const AUTEUR     = 1;
 
 
 function dico($longueur_max) {
@@ -15,18 +13,11 @@ function dico($longueur_max) {
     for ($longueur = 0; $longueur <= $longueur_max; $longueur++) {
         $dico[] = new Trie();
     }
-    if (($lecteur = fopen("dico.tsv", "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;
-
-            $mot = $ligne[0];
-            $definition = array_slice($ligne, 1);
+    foreach (str_split("ABCDEFGHIJKLMNOPQRSTUVWXYZ") as $lettre) {
+        $dico[1][$lettre] = [];
+    }
 
+    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) {
@@ -37,23 +28,32 @@ function dico($longueur_max) {
             $nb_mots = 1;
         }
 
-            if (array_key_exists($mot, $dico)) {
-                $dico[strlen($mot)][$mot][] = $definition;
-            } else {
-                $dico[strlen($mot)][$mot] = [$definition];
+        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;
     }
-        }
-        fclose($lecteur);
-    }
     
     return $dico;
 }
 
-function mots_espaces($longueur_max, $longueur_min=1) {
+function mots_espaces($longueur_max) {
+    $longueur_min = 1;
     $dico = dico($longueur_max);
-    for ($longueur = $longueur_max; $longueur >= $longueur_min + 1; $longueur--) {
-        for ($position_espace = $longueur - $longueur_min - 1; $position_espace >= $longueur_min; $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,6 +1,7 @@
 <?php
-
-
+ini_set('display_errors', '1');
+ini_set('display_startup_errors', '1');
+error_reporting(E_ALL);
 include_once "Grille.php";
 
 
@@ -29,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 {
@@ -45,24 +46,25 @@ if (!isset($_GET["grille"]) || $_GET["grille"] == "") {
 }
 
 function formatter_definition($definition) {
-    if (isset($definition["nb_mots"]) && $definition["nb_mots"] > 1){
+    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 (array_key_exists(AUTEUR, $definition)) {
-        $auteur = $definition[AUTEUR];
+    if (isset($definition["auteur"])) {
+        $auteur = $definition["auteur"];
         $auteur = " <small><em>$auteur</em></small>";
     } else {
         $auteur = "";
     }
-    return ucfirst($definition[DEFINITION]) . $nb_mots . $auteur;
+    return ucfirst($definition["definition"]) . $nb_mots . $auteur;
 }
 
-function mot_courant($mots, $position) {
-    foreach ($mots as $fin => $mot) {
-        if ($position <= $fin) return $mot;
+function definition_courante($definitions, $position) {
+    foreach ($definitions as $id => $definition) {
+        if ($position <= $definition["fin"])
+            return [$id, $definition];
     }
     return [];
 }
@@ -70,28 +72,31 @@ function mot_courant($mots, $position) {
 <!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=".">
@@ -124,108 +129,137 @@ function mot_courant($mots, $position) {
             </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">
-                                            <?php
+<?php
                         $title = [];
-                                                $definition_horizontale = mot_courant($grille->definitions["horizontales"][$y], $x);
-                                                $definition_verticale = mot_courant($grille->definitions["verticales"][$x], $y);
-                                                if (isset($definition_horizontale[0])) $title[0] = "→ " . $definition_horizontale[0];
-                                                if (isset($definition_horizontale[1])) $title[0] .= " (" . $definition_horizontale[1] . ")";
-                                                if (isset($definition_verticale[0])) $title[1] = "↓  " . $definition_verticale[0];
-                                                if (isset($definition_verticale[1])) $title[1] .= " (" . $definition_verticale[1] . ")";
+                        [$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="<?= chr($x + 65) . ($y + 1) ?>" type="text" maxlength="1" size="1" pattern="[A-Z]"
-                                                title="<?=$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(reset($definitions)) ?>
-                                    <?php else: ?>
                             <ol>
-                                        <?php foreach ($definitions as $definition) : ?>
-                                            <?php if (isset($definition[0])): ?>
-                                            <li><?= formatter_definition($definition) ?></li>
-                                            <?php endif ?>
-                                        <?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(reset($definitions)) ?>
-                                    <?php else: ?>
                             <ol>
-                                            <?php foreach ($definitions as $definition) : ?>
-                                                <?php if (isset($definition[0])): ?>
-                                                <li><?= formatter_definition($definition) ?></li>
-                                                <?php endif ?>
-                                            <?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");
     }
@@ -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;
 }