afficher la définition du mot courant

Grille.php

@@ -242,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) {
@@ -263,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)
@@ -271,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;
     }

index.php

@@ -170,8 +170,8 @@ function definition_courante($definitions, $position) {
 ?>
                                 <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-iddh="<?= isset($definition_horizontale["definition"])? "dh-$y-$iddh" : "" ?>"
-                                    data-iddv="<?= isset($definition_verticale["definition"])? "dv-$x.$iddv" : "" ?>"
+                                    data-iddv="<?= isset($definition_verticale["definition"])? "dv-$x-$iddv" : "" ?>"
                                 />
                             </td>
 <?php               endif; ?>
@@ -188,25 +188,23 @@ function definition_courante($definitions, $position) {
                     return isset($definition["definition"]);
                 });
 ?>
-                        <li>
 <?php           if (count($definitions)): ?>
 <?php               if (count($definitions) == 1): ?>
 <?php                   foreach ($definitions as $id => $definition): ?>
-                            <label id="<?= "dh-$y.$id" ?>" for="case-1<?= $y + 1 ?>">
+                            <li id="<?= "dh-$y-$id" ?>"><label for="case-A<?= $y + 1 ?>"><?= formatter_definition($definition) ?></label></li>
-                                <?= formatter_definition($definition) ?>
-                            </label>
 <?php                   endforeach ?>
 <?php               else: ?>
+                        <li>
                             <ol>
 <?php                   foreach ($definitions as $id => $definition): ?>
-                                <label id="<?= "dh-$y.$id" ?>" for="case-<?= chr($definition["debut"] + 0x41) ?><?= $y + 1 ?>">
+                                <li id="<?= "dh-$y-$id" ?>">
-                                    <li><?= formatter_definition($definition) ?></li>
+                                    <label for="case-<?= chr($definition["debut"] + 0x41) ?><?= $y + 1 ?>"><?= formatter_definition($definition) ?></label>
-                                </label>
+                                </li>
 <?php                   endforeach ?>
                             </ol>
-<?php               endif ?>
-<?php           endif ?>
                         </li>
+<?php               endif ?>
+<?php           endif ?>
 <?php       endforeach ?>
                     </ol>
                 </div>
@@ -218,25 +216,23 @@ function definition_courante($definitions, $position) {
                     return isset($definition["definition"]);
                 });
 ?>
-                        <li>
 <?php           if (count($definitions)): ?>
 <?php               if (count($definitions) == 1): ?>
 <?php                   foreach ($definitions as $id => $definition): ?>
-                            <label id="<?= "dv-$x.$id" ?>" for="case-<?= chr($x + 0x41) ?>1">
+                        <li id="<?= "dv-$x-$id" ?>"><label for="case-<?= chr($x + 0x41) ?>1"><?= formatter_definition($definition) ?></label></li>
-                                <?= formatter_definition($definition) ?>
-                            </label>
 <?php                   endforeach ?>
 <?php               else: ?>
+                        <li>
                             <ol>
 <?php                   foreach ($definitions as $id => $definition): ?>
-                                <label id="<?= "dv-$x.$id" ?>" for="case-<?= chr($x + 0x41) ?><?= $definition["debut"] + 1 ?>">
+                                <li id="<?= "dv-$x-$id" ?>">
-                                    <li><?= formatter_definition($definition) ?></li>
+                                    <label for="case-<?= chr($x + 0x41) ?><?= $definition["debut"] + 1 ?>"><?= formatter_definition($definition) ?></label>
-                                </label>
+                                </li>
 <?php                   endforeach ?>
                             </ol>
-<?php               endif ?>
-<?php           endif ?>
                         </li>
+<?php               endif ?>
+<?php           endif ?>
 <?php       endforeach ?>
                     </ol>
                 </div>
@@ -251,11 +247,9 @@ function definition_courante($definitions, $position) {
                 <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"' : "" ?>
+                <input type="number" id="lignes" <?= isset($_GET["lignes"]) ? ' name="lignes"' : "" ?> value="<?= $hauteur ?>" min="<?= HAUTEUR_MIN ?>" max="<?= HAUTEUR_MAX ?>" />
-                    value="<?= $hauteur ?>" min="<?= HAUTEUR_MIN ?>" max="<?= HAUTEUR_MAX ?>" />
                 lignes et
-                <input type="number" id="colonnes" <?= isset($_GET["colonnes"]) ? ' name="colonnes"' : "" ?>
+                <input type="number" id="colonnes" <?= isset($_GET["colonnes"]) ? ' name="colonnes"' : "" ?> value="<?= $largeur ?>" min="<?= LARGEUR_MIN ?>" max="<?= LARGEUR_MAX ?>" />
-                    value="<?= $largeur ?>" min="<?= LARGEUR_MIN ?>" max="<?= LARGEUR_MAX ?>" />
                 colonnes
             </div>
         </form>

script.js

@@ -17,19 +17,37 @@ for (let input of inputs) {
 
   input.onfocus = function (event) {
     for (li of document.querySelectorAll(
-      `.definitions.horizontales > ol > li:nth-child(${
+      `.definitions.horizontales > ol > li:nth-child(${input.y + 1}), .definitions.verticales > ol > li:nth-child(${input.x + 1})`
-        input.y + 1
-      }), .definitions.verticales > ol > li:nth-child(${input.x + 1})`
     )) {
       li.classList.add("selectionee");
     }
     for (li of document.querySelectorAll(
-      `.definitions.horizontales > ol > li:not(:nth-child(${
+      `.definitions.horizontales > ol > li:not(:nth-child(${input.y + 1})), .definitions.verticales > ol > li:not(:nth-child(${input.x + 1}))`
-        input.y + 1
-      })), .definitions.verticales > ol > li:not(:nth-child(${input.x + 1}))`
     )) {
       li.classList.add("non-selectionee");
     }
+    if (input.dataset.iddh) {
+      for (li of document.querySelectorAll(`.definitions.horizontales ol li ol #${input.dataset.iddh}`)) {
+        for (liVoisin of li.parentElement.querySelectorAll("li")) {
+          if (liVoisin == li) {
+            liVoisin.classList.add("selectionee");
+          } else {
+            liVoisin.classList.add("non-selectionee");
+          }
+        }
+      }
+    }
+    if (input.dataset.iddv) {
+      for (li of document.querySelectorAll(`.definitions.verticales ol li ol #${input.dataset.iddv}`)) {
+        for (liVoisin of li.parentElement.querySelectorAll("li")) {
+          if (liVoisin == li) {
+            liVoisin.classList.add("selectionee");
+          } else {
+            liVoisin.classList.add("non-selectionee");
+          }
+        }
+      }
+    }
 
     input.select();
   };
@@ -79,21 +97,11 @@ for (let input of inputs) {
   };
 
   input.onblur = function (event) {
-    for (li of document.querySelectorAll(
+    for (li of document.querySelectorAll(".definitions li")) {
-      `.definitions.horizontales > ol > li:nth-child(${
-        input.y + 1
-      }), .definitions.verticales > ol > li:nth-child(${input.x + 1})`
-    )) {
       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")) {