ommission des lettres isolées sur la dernière ligne

This reverts commit ed1ad0566f, reversing
changes made to 6ee909914d.

.gitignore

@@ -1,2 +1,3 @@
 __pycache__/
-test*.*
+test*.*
+*.py

Grille.php

@@ -1,118 +1,180 @@
 <?php
-
 include_once "dico.php";
 
 
-function melanger_cles($tableau)
+const ECART_TYPE = 5;
-{
+
-    uksort($tableau, function ($a, $b) {
+
-        return mt_rand(-1, 1);
+$randmax = mt_getrandmax() + 1;
-    });
+function gaussienne($moyenne = 0, $ecartType = 1.0): float {
-    return $tableau;
+    global $randmax;
+
+    $u = (mt_rand() + 1) / $randmax;
+    $v = (mt_rand() + 1) / $randmax;
+
+    $z = sqrt(-2.0 * log($u)) * cos(2.0 * M_PI * $v);
+    return $z * $ecartType + $moyenne;
 }
 
 
-class Grille implements Iterator, ArrayAccess {
+class Grille implements ArrayAccess
+{
     public $grille;
     public $hauteur;
     public $largeur;
-    private $grilles;
+    private $dico;
-    private $lettres_suivantes;
     private $positions;
     private $nb_positions;
-    public $mots_utilises;
+    private $lignes = [];
+    private $colonnes = [];
+    public $valide = false;
+    public $definitions = [];
 
-    public function __construct($hauteur, $largeur, $id = "")
+    public function __construct($hauteur, $largeur)
     {
-        $this->hauteur = $hauteur;
+        $this->hauteur   = $hauteur;
-        $this->largeur = $largeur;
+        $this->largeur   = $largeur;
-        $this->grille = array_fill(0, $hauteur, array_fill(0, $largeur, ''));
+        $this->grille    = array_fill(0, $hauteur, array_fill(0, $largeur, ''));
-
-        $this->lettres_suivantes = [];
-        foreach ($hauteur == $largeur ? [$hauteur] : [$hauteur, $largeur] as $longueur) {
-            $this->lettres_suivantes[$longueur] = [];
-            foreach (mots_espaces($longueur) as $mot) {
-                $ref = &$this->lettres_suivantes[$longueur];
-                for ($i = 0; $i < $longueur; $i++) {
-                    $lettre = $mot[$i];
-                    if (!isset($ref[$lettre])) {
-                        $ref[$lettre] = [];
-                    }
-                    $ref = &$ref[$lettre];
-                }
-                $ref = [];
-            }
-        }
-
-        $this->positions = [];
-        for ($y = 0; $y < $hauteur; $y++) {
-            for ($x = 0; $x < $largeur; $x++) {
-                $this->positions[] = [$x, $y];
-            }
-        }
-        $this->nb_positions = count($this->positions);
-
-        mt_srand($id == "" ? null : crc32($id));
-        $this->mots_utilises = [];
-        $this->grilles = $this->generateur();
     }
 
     public function get_ligne($y, $largeur)
     {
         $ligne = "";
-        for ($x = 0; $x < $largeur; $x++) {
+        for ($x = 0; $x < $largeur; $x++)
             $ligne .= $this->grille[$y][$x];
-        }
         return $ligne;
     }
 
     public function get_colonne($x, $hauteur)
     {
         $colonne = "";
-        for ($y = 0; $y < $hauteur; $y++) {
+        for ($y = 0; $y < $hauteur; $y++)
             $colonne .= $this->grille[$y][$x];
-        }
         return $colonne;
     }
 
-    public function generateur($i = 0)
+    public function genere($id)
     {
-        if ($i == $this->nb_positions) {
+        mt_srand(crc32($id));
-            yield $this;
+
-            return;
+        if (!isset($this->dico)) {
+            $this->dico = mots_espaces(max($this->hauteur, $this->largeur));
         }
 
+        if (!isset($this->positions)) {
+            $this->positions = [];
+            for ($y = 0; $y < $this->hauteur; $y++) {
+                for ($x = 0; $x < $this->largeur; $x++)
+                    $this->positions[] = [$x, $y];
+            }
+            $this->nb_positions = count($this->positions);
+        }
+
+        $grilles = $this->gen_grilles();
+        $grilles->current();
+
+        if ($grilles->valid()) {
+            $this->definitions = [
+                "horizontales" => [],
+                "verticales" => []
+            ];
+            foreach($this->lignes as $y => $mots) {
+                $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)];
+                    }
+                }
+            }
+            foreach($this->colonnes as $x => $mots) {
+                $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)];
+                    }
+                }
+            }
+            $this->save($id);
+            return true;
+        } else {
+            return false;
+        }
+    }
+
+    public function gen_grilles($i = 0, $lettres_ligne = NULL)
+    {
         [$x, $y] = $this->positions[$i];
 
-        $lettres_suivantes_ligne = $this->lettres_suivantes[$this->largeur];
+        // Recherche de la prochaine lettre possible sur la case courante
-        for ($x2 = 0; $x2 < $x; $x2++) {
+        // en ligne
-            $lettres_suivantes_ligne = $lettres_suivantes_ligne[$this->grille[$y][$x2]];
+        if ($x == 0) {
+            $lettres_ligne = $this->dico[$this->largeur];
         }
-        $lettres_suivantes_colonne = $this->lettres_suivantes[$this->hauteur];
+
+        // en colonne
+        $lettres_colonne = $this->dico[$this->hauteur];
         for ($y2 = 0; $y2 < $y; $y2++) {
-            $lettres_suivantes_colonne = $lettres_suivantes_colonne[$this->grille[$y2][$x]];
+            $lettres_colonne = $lettres_colonne->branches[$this->grille[$y2][$x]];
         }
-        $lettres_communes = melanger_cles(array_intersect_key(
+        $lettres_communes = array_intersect_key(
-            $lettres_suivantes_ligne,
+            $lettres_ligne->branches,
-            $lettres_suivantes_colonne
+            $lettres_colonne->branches
-        ));
+        );
+        foreach ($lettres_communes as $lettre => $_) {
+            $lettres_communes[$lettre] = count($lettres_ligne->branches[$lettre]) * count($lettres_colonne->branches[$lettre]) * gaussienne(1, 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);
 
         foreach ($lettres_communes as $lettre => $_) {
             $this->grille[$y][$x] = $lettre;
 
-            if ($x == $this->largeur - 1) {
+            // Omission des lettres isolées
-                $this->mots_utilises[$y] = $this->get_ligne($y, $x);
+            if ($lettre == CASE_NOIRE) {
-            } else {
+                if (($y < 2 || $this->grille[$y - 2][$x] == CASE_NOIRE)
-                unset($this->mots_utilises[$y]);
+                    && ($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)
-            if ($y == $this->hauteur - 1) {
+                ) continue;
-                if (in_array($this->get_colonne($x, $y), $this->mots_utilises)) {
+                if ($y == $this->hauteur - 1
-                    continue;
+                    && ($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 = [];
+            if ($x == $this->largeur - 1) $mots = explode(CASE_NOIRE, $this->get_ligne($y, $this->largeur));
+            else if ($lettre == CASE_NOIRE) $mots = explode(CASE_NOIRE, $this->get_ligne($y, $x));
+            else $mots = [];
+            $this->lignes[$y] = array_filter($mots, function ($mot) {
+                return strlen($mot) >= 2;
+            });
+            if (count($this->lignes[$y])) {
+                $mot = array_pop($this->lignes[$y]);
+                if (strlen($mot > 2) && in_array($mot, array_merge(...$this->lignes, ...$this->colonnes))) continue;
+                else $this->lignes[$y][] = $mot;
             }
 
-            if ($i < $this->nb_positions) {
+            if ($y == $this->hauteur - 1) {
-                yield from $this->generateur($i + 1);
+                $mots = explode(CASE_NOIRE, $this->get_colonne($x, $this->hauteur));
+                foreach ($mots as $rang => $mot) {
+                    if (strlen($mot) < 2) continue;
+                    if (strlen($mot > 2) && in_array($mot, array_merge(...$this->lignes, ...$this->colonnes))) continue 2;
+                    else $this->colonnes[$x][$rang] = $mot;
+                }
+            } else {
+                $this->colonnes[$x] = [];
+            }
+
+            if ($i < $this->nb_positions - 1) {
+                yield from $this->gen_grilles($i + 1, $lettres_ligne->branches[$lettre]);
             } else {
                 yield $this;
             }
@@ -122,48 +184,79 @@ class Grille implements Iterator, ArrayAccess {
     public function hash()
     {
         $string = "";
-        foreach ($this->grille as $ligne) {
+        foreach ($this->grille as $ligne)
             $string .= implode("", $ligne);
-        }
         return hash('sha256', $string);
     }
 
-    public function current(): mixed
+    public function __toString() {
+        return implode(
+            PHP_EOL,
+            array_map(
+                function ($ligne) {
+                    return implode("", $ligne);
+                },
+                $this->grille
+            )
+        );
+    }
+
+    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)
     {
-        return $this->grilles->current();
+        if (session_status() === PHP_SESSION_ACTIVE) {
+            session_write_close();
+        }
+
+        session_id("$this->largeur,$this->hauteur,$id");
+        session_start(["use_cookies" => false]);
+
+        $_SESSION = serialize($this);
     }
 
-    public function key(): mixed {
+    public function load($id)
-        return $this->grilles->key();
-    }
-
-    public function next(): void {
-        $this->grilles->next();
-    }
-
-    public function rewind(): void {
-        $this->grilles->rewind();
-    }
-
-    public function valid(): bool
     {
-        return $this->grilles->valid();
+        session_id("$this->largeur,$this->hauteur,$id");
+        session_start(["use_cookies" => false]);
+
+        if (!isset($_SESSION["grille"])) {
+            return false;
+        }
+
+        unserialize($_SESSION);
+
+        return true;
     }
-    
+
-    public function offsetExists(mixed $offset): bool {
+
+    public function offsetExists(mixed $offset): bool
+    {
         return isset($this->grille[$offset]);
     }
 
-    public function offsetGet(mixed $offset): mixed {
+    public function offsetGet(mixed $offset): mixed
+    {
         return $this->grille[$offset];
     }
 
-    public function offsetSet(mixed $offset, mixed $value): void {
+    public function offsetSet(mixed $offset, mixed $value): void
+    {
         $this->grille[$offset] = $value;
     }
 
-    public function offsetUnset(mixed $offset): void {
+    public function offsetUnset(mixed $offset): void
+    {
         unset($this->grille[$offset]);
     }
-
 }

README.md

@@ -1,3 +1,5 @@
-# mots-croises
+# Mots croisés
 
-Générateur de grille de mots croisés en PHP
+Générateur de grille de mots croisés en PHP
+
+![screenshot](https://git.malingrey.fr/adrien/mots-croises/raw/branch/main/thumbnail.png)

Trie.php

@@ -0,0 +1,101 @@
+<?php
+
+
+class Trie implements ArrayAccess, IteratorAggregate, Countable {
+    public array $branches = [];
+    private $nb_branches = 0;
+
+    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();
+            $this->branches[$cle]->arraySet($cles, $valeur);
+        }
+    }
+
+    public function arrayExists($cles) {
+        $cle = $cles[0];
+        $cles = array_slice($cles, 1);
+        if ($cles == []) {
+            return isset($this->branches[$cle]);
+        } else {
+            return isset($this->branches[$cle]) && $this->branches[$cle]->arrayExists($cles);
+        }
+    }
+
+    public function &arrayGet($cles) {
+        $cle = $cles[0];
+        $cles = array_slice($cles, 1);
+        if ($cles == []) {
+            return $this->branches[$cle];
+        } else {
+            return $this->branches[$cle]->arrayGet($cles);
+        }
+    }
+
+    public function arrayUnset($cles) {
+        $cle = $cles[0];
+        $cles = array_slice($cles, 1);
+        if ($cles == []) {
+            unset($this->branches[$cle]);
+            $this->nb_branches--;
+        } else {
+            $this->branches[$cle]->arrayUnset($cles);
+            $this->nb_branches--;
+            if (count($this->branches[$cle]) == 0) {
+                unset($this->branches[$cle]);
+            }
+        }
+    }
+
+    // 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->getIterator() as $sous_cles => $feuille) {
+                    yield array_merge([$cle], $sous_cles) => $feuille;
+                }
+            } else {
+                yield [$cle] => $branche;
+            }
+        }
+    }
+
+    // Countable
+    public function count(): int {
+        return $this->nb_branches;
+    }
+}

apercu.png.php

@@ -0,0 +1,84 @@
+<?php
+
+$largeur  = isset($_GET['largeur']) ? (int)$_GET['largeur'] : 200;
+$hauteur  = isset($_GET['hauteur']) ? (int)$_GET['hauteur'] : 200;
+$lignes   = isset($_GET['lignes']) ? (int)$_GET['lignes'] : 8;
+$colonnes = isset($_GET['colonnes']) ? (int)$_GET['colonnes'] : 8;
+
+$image = imagecreatetruecolor($largeur, $hauteur);
+imagesavealpha($image, true);
+$blanc = imagecolorallocate($image, 255, 255, 255);
+$noir  = imagecolorallocate($image, 0, 0, 0);
+$transparent = imagecolorallocatealpha($image, 0, 0, 0, 127);
+
+// Calculer la taille et la position des cases
+$min_dimension = min($largeur, $hauteur);
+if ($min_dimension <= 16) {
+    $bordure_exterieure = 0;
+} else if ($min_dimension < 32) {
+    $bordure_exterieure = 1;
+} else if ($min_dimension <= 96) {
+    $bordure_exterieure = 2;
+} else if ($min_dimension <= 600) {
+    $bordure_exterieure = 3;
+} else {
+    $bordure_exterieure = 6;
+}
+$cote   = (int)min(($largeur - 2 * $bordure_exterieure) / $colonnes, ($hauteur - 2 * $bordure_exterieure) / $lignes);
+if ($cote < 3) {
+    $bordure_interieure = 0;
+} else if ($min_dimension < 600) {
+    $bordure_interieure = 1;
+} else {
+    $bordure_interieure = 2;
+}
+$haut   = (int)(($hauteur - $lignes * $cote - 2 * $bordure_exterieure) / 2) + (int)$bordure_exterieure;
+$gauche = (int)(($largeur - $colonnes * $cote - 2 * $bordure_exterieure) / 2) + $bordure_exterieure;
+$bas    = $haut + $lignes * $cote - $bordure_interieure;
+$droite = $gauche + $colonnes * $cote - $bordure_interieure;
+
+// Remplir l'image avec un fond transparent
+imagefill($image, 0, 0, $transparent);
+
+// Dessiner les bordures extérieures (3 pixels d'épaisseur)
+$marge1 = ceil($bordure_exterieure / 2);
+$marge2 = floor($bordure_exterieure / 2);
+imagesetthickness($image, $bordure_exterieure);
+imagerectangle($image, $gauche - $marge1, $haut - $marge1, $droite + $marge2 -  1, $bas + $marge2 - 1, $noir);
+imagefilledrectangle($image, $gauche, $haut, $droite - 1, $bas - 1, $blanc);
+
+// Dessiner les lignes et colonnes internes (1 pixel d'épaisseur)
+if ($bordure_interieure >= 1) {
+    imagesetthickness($image, $bordure_interieure);
+    for ($x = $gauche + $cote - ceil($bordure_interieure / 2); $x < $droite; $x += $cote) {
+        imageline($image, $x, $haut, $x, $bas, $noir); // Lignes verticales
+    }
+    for ($y = $haut + $cote - ceil($bordure_interieure / 2); $y < $bas; $y += $cote) {
+        imageline($image, $gauche, $y, $droite, $y, $noir); // Lignes horizontales
+    }
+}
+
+// Noicir les cases
+if (isset($_GET["grille"])) {
+    include_once "Grille.php";
+
+    $grille = new Grille($lignes, $colonnes);
+    $id = htmlspecialchars($_GET["grille"]);
+    $grille->load($id) || $grille->genere($id);
+
+    for ($y = 0; $y < $lignes; $y++) {
+        for ($x = 0; $x < $colonnes; $x++) {
+            if ($grille[$y][$x] == CASE_NOIRE) {
+                imagefilledrectangle($image, $gauche + $x * $cote, $haut + $y * $cote, $gauche + ($x + 1) * $cote - 1, $haut + ($y + 1) * $cote - 1, $noir);
+            }
+        }
+    }
+}
+
+// Envoyer l'image au navigateur
+header('Content-Type: image/png');
+imagepng($image);
+
+// Libérer la mémoire
+imagedestroy($image);
+?>

apercu.svg.php

@@ -0,0 +1,90 @@
+<?php
+
+$lignes   = isset($_GET['lignes']) ? (int)$_GET['lignes'] : 8;
+$colonnes = isset($_GET['colonnes']) ? (int)$_GET['colonnes'] : 8;
+
+$bordure = 2;
+$marge = $bordure / 2;
+$cote = 20;
+
+// Dimensions du SVG
+$width = $colonnes * $cote; // Largeur proportionnelle au nombre de colonnes
+$height = $lignes * $cote;  // Hauteur proportionnelle au nombre de lignes
+$rectRadius = 20;        // Rayon des coins arrondis du rectangle
+
+// Création du document XML
+$doc = new DOMDocument('1.0', 'UTF-8');
+$doc->formatOutput = true;
+
+// Élément SVG principal
+$svg = $doc->createElement('svg');
+$svg->setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+$svg->setAttribute('viewBox', -$marge . " " . -$marge . " " . ($width + $bordure) . " " . ($height + $bordure));
+$svg->setAttribute('width', $width + $bordure);
+$svg->setAttribute('height', $height + $bordure);
+$doc->appendChild($svg);
+
+// Rectangle arrondi
+$rect = $doc->createElement('rect');
+$rect->setAttribute('x', 0);
+$rect->setAttribute('y', 0);
+$rect->setAttribute('width', $width);
+$rect->setAttribute('height', $height);
+$rect->setAttribute('rx', $rectRadius);
+$rect->setAttribute('ry', $rectRadius);
+$rect->setAttribute('fill', 'white');
+$rect->setAttribute('stroke', 'black');
+$rect->setAttribute('stroke-width', $bordure);
+$svg->appendChild($rect);
+
+// Lignes verticales
+for ($i = 1; $i < $colonnes; $i++) {
+    $x = $i * $cote;
+    $line = $doc->createElement('line');
+    $line->setAttribute('x1', $x);
+    $line->setAttribute('y1', $marge);
+    $line->setAttribute('x2', $x);
+    $line->setAttribute('y2', $height - $marge);
+    $line->setAttribute('stroke', '#000');
+    $line->setAttribute('stroke-width', 1);
+    $svg->appendChild($line);
+}
+
+// Lignes horizontales
+for ($i = 1; $i < $lignes; $i++) {
+    $y = $i * $cote;
+    $line = $doc->createElement('line');
+    $line->setAttribute('x1', $marge);
+    $line->setAttribute('y1', $y);
+    $line->setAttribute('x2', $width - $marge);
+    $line->setAttribute('y2', $y);
+    $line->setAttribute('stroke', '#000');
+    $line->setAttribute('stroke-width', 1);
+    $svg->appendChild($line);
+}
+
+// Noicir les cases
+if (isset($_GET["grille"])) {
+    include_once "Grille.php";
+
+    $grille = new Grille($lignes, $colonnes);
+    $id = htmlspecialchars($_GET["grille"]);
+    $grille->load($id) || $grille->genere($id);
+
+    for ($y = 0; $y < $lignes; $y++) {
+        for ($x = 0; $x < $colonnes; $x++) {
+            if ($grille[$y][$x] == CASE_NOIRE) {
+                $rect = $doc->createElement('rect');
+                $rect->setAttribute('x', $x * $cote);
+                $rect->setAttribute('y', $y * $cote);
+                $rect->setAttribute('width', $cote);
+                $rect->setAttribute('height', $cote);
+                $rect->setAttribute('fill', 'black');
+                $svg->appendChild($rect);
+            }
+        }
+    }
+}
+
+header('Content-Type: image/svg+xml');
+echo $doc->saveXML();

dico.php

@@ -1,64 +1,59 @@
 <?php
 
+include_once "Trie.php";
 
-const MIN_LETTRES_MOT_1 = 2;
-const MIN_LETTRES_MOT_2 = 1;
 
-$dico = [];
+const CASE_NOIRE = " ";
-if (($lecteur = fopen("dico.csv", "r")) !== FALSE) {
+
-    $header = fgetcsv($lecteur, 0, "\t");
+
-    while (($ligne = fgetcsv($lecteur, 0, "\t")) !== FALSE) {
+function dico($longueur_max) {
-        if (substr($ligne[0], 0, 1) != "#" && count($ligne) >= 3) {
+    $transliterator = Transliterator::createFromRules(':: Any-Latin; :: Latin-ASCII; :: NFD; :: [:Nonspacing Mark:] Remove; :: Upper(); :: NFC;', Transliterator::FORWARD);
-            [$mot, $definition, $auteur] = $ligne;
+    
-            $mot = strtoupper($mot);
+    $dico = [[new Trie()]];
-            if ($auteur) {
+    for ($longueur = 0; $longueur <= $longueur_max; $longueur++) {
-                $definition .= " <small><em>$auteur</em></small>";
+        $dico[] = new Trie();
-            }
-            $nb_espaces = substr_count($mot, ' ');
-            if ($nb_espaces > 0) {
-                $definition .= " <small>(" . ($nb_espaces + 1) . " mots)</small>";
-            }
-            if (strlen($definition)) {
-                $dico[$mot] = [$definition];
-            } else {
-                $dico[$mot] = [];
-            }
-        }
     }
-    fclose($lecteur);
+    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;
 
-$mots_de_n_lettres = [];
+            $mot = $ligne[0];
-foreach ($dico as $mot => $definition) {
+            $definitions = array_slice($ligne, 1);
-    $n = strlen($mot);
-    if (!isset($mots_de_n_lettres[$n])) {
-        $mots_de_n_lettres[$n] = [];
-    }
-    $mots_de_n_lettres[$n][] = $mot;
-    if (!empty($definitions)) {
-        $dico[$mot] = [$definitions[array_rand($definitions)]];
-    }
-}
 
-function mots_espaces($longueur)
+            $mot = str_replace("-", CASE_NOIRE, $mot);
-{
+            $mot = $transliterator->transliterate($mot);
-    global $mots_de_n_lettres;
+            if (strpos($mot, CASE_NOIRE) !== false) {
-    global $dico;
+                $mots = explode(CASE_NOIRE, $mot);
-
+                $nb_mots = count($mots);
-    $nb_mots = 0;
+                $mot = implode("", $mots);
-    foreach ($mots_de_n_lettres[$longueur] as $mot) {
+                foreach($definitions as $i => $definition) {
-        yield $mot;
+                    $definitions[$i] = "$definition#$nb_mots";
-    }
-    for ($i = MIN_LETTRES_MOT_1; $longueur - $i - 1 >= MIN_LETTRES_MOT_2; $i++) {
-        foreach ($mots_de_n_lettres[$i] as $mot1) {
-            foreach (mots_espaces($longueur - $i - 1) as $mot2) {
-                if ($mot1 != $mot2) {
-                    $dico["$mot1 $mot2"] = array_merge($dico[$mot1], $dico[$mot2]);
-                    yield "$mot1 $mot2";
-                    $dico["$mot2 $mot1"] = array_merge($dico[$mot2], $dico[$mot1]);
-                    yield "$mot2 $mot1";
                 }
             }
+
+            $dico[strlen($mot)][$mot] = $definitions;
+        }
+        fclose($lecteur);
+    }
+    
+    return $dico;
+}
+
+function mots_espaces($longueur_max) {
+    $dico = dico($longueur_max);
+    for ($longueur = $longueur_max; $longueur >= 2; $longueur--) {
+        for ($position_espace = $longueur - 1; $position_espace >= 1; $position_espace--) {
+            $mots_suivants = $dico[$longueur - $position_espace - 1];
+            foreach ($dico[$position_espace] as $premier_mot => $definition) {
+                $premier_mot[] = CASE_NOIRE;
+                $dico[$longueur][$premier_mot] = $mots_suivants;
+            }
         }
     }
+    return $dico;
 }

favicons/favicon.svg

@@ -0,0 +1,50 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   viewBox="0 0 64 64"
+   version="1.1"
+   id="svg3"
+   sodipodi:docname="favicon.svg"
+   inkscape:version="1.4.1 (93de688d07, 2025-03-30)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs3" />
+  <sodipodi:namedview
+     id="namedview3"
+     pagecolor="#505050"
+     bordercolor="#eeeeee"
+     borderopacity="1"
+     inkscape:showpageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#505050"
+     inkscape:zoom="8.3124997"
+     inkscape:cx="32"
+     inkscape:cy="32"
+     inkscape:window-width="1536"
+     inkscape:window-height="793"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg3" />
+  <path
+     fill="#ffffff"
+     stroke="#000000"
+     stroke-width="2"
+     stroke-miterlimit="10"
+     d="m 63,8 v 48 a 7,7 0 0 1 -7,7 H 8 a 7,7 0 0 1 -7,-7 V 9 A 7,7 0 0 1 8,1 H 56 A 7,7 0 0 1 63,8 Z M 47,17 H 32 v 15 h 15 z"
+     id="path1" />
+  <path
+     d="M 47,17 H 32 v 15 h 15 z"
+     id="path2"
+     style="stroke-width:1" />
+  <path
+     fill="none"
+     stroke="#000000"
+     stroke-width="2"
+     stroke-miterlimit="10"
+     d="M 47,63 V 32 m 0,-15 V 1 M 32,63 V 32 m 0,-15 V 1 m -16,0 V 63 M 47,32 h 16 m -31,0 H 1 M 63,47 H 1 M 63,16 H 1"
+     id="path3" />
+</svg>

index.php

@@ -1,97 +1,122 @@
 <?php
-ini_set('display_errors', '1');
-ini_set('error_reporting', E_ALL);
 
-
-if (!isset($_GET["grille"])) {
-    $_GET["grille"] = uniqid();
-    header("Location: " . dirname($_SERVER['DOCUMENT_URI']) . "?" . http_build_query($_GET));
-    exit;
-} else {
-    $id = htmlspecialchars($_GET["grille"]);
-}
-
-
-include_once "dico.php";
 include_once "Grille.php";
 
 
-const HAUTEUR_PAR_DEFAUT = 6;
+const HAUTEUR_DEFAUT = 8;
-const LARGEUR_PAR_DEFAUT = 6;
+const HAUTEUR_MIN = 2;
+const HAUTEUR_MAX = 10;
+const LARGEUR_DEFAUT = 8;
+const LARGEUR_MIN = 2;
+const LARGEUR_MAX = 10;
 
 
-$hauteur = filter_input(INPUT_GET, 'l', FILTER_VALIDATE_INT, [
+$hauteur = filter_input(INPUT_GET, 'lignes', FILTER_VALIDATE_INT, [
     "options" => [
-        "default" => HAUTEUR_PAR_DEFAUT,
+        "default" => HAUTEUR_DEFAUT,
-        "min_range" => 2,
+        "min_range" => HAUTEUR_MIN,
-        "max_range" => 30
+        "max_range" => HAUTEUR_MAX
-    ]
-]);
-$largeur = filter_input(INPUT_GET, 'c', FILTER_VALIDATE_INT, [
-    "options" => [
-        "default" => LARGEUR_PAR_DEFAUT,
-        "min_range" => 2,
-        "max_range" => 30
     ]
 ]);
 
-$grille = new Grille($hauteur, $largeur, $id);
+$largeur = filter_input(INPUT_GET, 'colonnes', FILTER_VALIDATE_INT, [
-$grille->current();
+    "options" => [
-$definitions = [
+        "default" => LARGEUR_DEFAUT,
-    "lignes" => [],
+        "min_range" => LARGEUR_MIN,
-    "colonnes" => []
+        "max_range" => LARGEUR_MAX
-];
+    ]
-for ($y = 0; $y < $hauteur; $y++) {
+]);
-    $definitions["lignes"][$y] = $dico[$grille->get_ligne($y, $largeur)];
+
-}
+$grille = new Grille($hauteur, $largeur);
-for ($x = 0; $x < $largeur; $x++) {
+$basedir = $_SERVER["REQUEST_SCHEME"]."://".$_SERVER["HTTP_HOST"].dirname($_SERVER["DOCUMENT_URI"]);
-    $definitions["colonnes"][$x] = $dico[$grille->get_colonne($x, $hauteur)];
+
+if (!isset($_GET["grille"]) || $_GET["grille"] == "") {
+    do {
+        $id = uniqid();
+        $grille_valide = $grille->genere($id);
+    } while (!$grille_valide);
+
+    $_GET["grille"] = $id;
+    header("Location: $basedir/?" . http_build_query($_GET));
+} else {
+    $id = htmlspecialchars($_GET["grille"]);
+    $grille_valide = $grille->load($id) || $grille->genere($id);
 }
 
+function formatter_definition($definition) {
+    if (strpos($definition, "#") !== false) {
+        [$definition, $nb_mots] = explode("#", $definition);
+        $nb_mots = " <small>($nb_mots mots)</small>";
+    } else {
+        $nb_mots = "";
+    }
+    if (strpos($definition, "@") !== false) {
+        [$definition, $auteur] = explode("@", $definition);
+        $auteur = " <small><em>$auteur</em></small>";
+    } else {
+        $auteur = "";
+    }
+    return $definition . $nb_mots . $auteur;
+}
 ?>
 <!DOCTYPE HTML>
-<html>
+<html lang="fr-FR" dir="ltr" prefix="og: https://ogp.me/ns#">
 
 <head>
     <meta charset="utf-8">
-    <title>Mots croisés</title>
+    <title>🄼🄾🅃🅂▣🄲🅁🄾🄸🅂🄴🅂</title>
     <link rel="stylesheet" href="style.css">
-    <link rel="icon" href="favicon.ico">
     <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">
-            <table>
+            <a href=".">
-                <tbody>
+                <table>
-                    <tr>
+                    <tbody>
-                        <td colspan="2"></td>
+                        <tr>
-                        <td>M</td>
+                            <td colspan="2"></td>
-                    </tr>
+                            <td>M</td>
-                    <tr>
+                        </tr>
-                        <td>c</td>
+                        <tr>
-                        <td>r</td>
+                            <td>c</td>
-                        <td>o</td>
+                            <td>r</td>
-                        <td>i</td>
+                            <td>o</td>
-                        <td>s</td>
+                            <td>i</td>
-                        <td>é</td>
+                            <td>s</td>
-                        <td>s</td>
+                            <td>é</td>
-                    </tr>
+                            <td>s</td>
-                    <tr>
+                        </tr>
-                        <td colspan="2"></td>
+                        <tr>
-                        <td>t</td>
+                            <td colspan="2"></td>
-                    </tr>
+                            <td>t</td>
-                    <tr>
+                        </tr>
-                        <td colspan="2"></td>
+                        <tr>
-                        <td>s</td>
+                            <td colspan="2"></td>
-                    </tr>
+                            <td>s</td>
-                </tbody>
+                        </tr>
-            </table>
+                    </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->valid()): ?>
+            <?php if ($grille_valide): ?>
                 <div class="grille">
                     <table>
                         <tr>
@@ -105,14 +130,16 @@ for ($x = 0; $x < $largeur; $x++) {
                             <tr>
                                 <th><?= $y + 1 ?></th>
                                 <?php for ($x = 0; $x < $largeur; $x++): ?>
-                                    <td class="case <?= $grille[$y][$x] == " " ? "noire" : "blanche" ?>">
+                                    <?php if ($grille[$y][$x] == CASE_NOIRE): ?>
-                                        <?php if ($grille[$y][$x] == " "): ?>
+                                        <td class="case noire">
-                                            <input id="<?= chr($x + 65) . ($y + 1) ?>" type="text" maxlength="1" size="1" value=" " disabled />
+                                            <input id="<?= chr($x + 65) . ($y + 1) ?>" type="text" maxlength="1" size="1" value="<?= CASE_NOIRE ?>" disabled />
-                                        <?php else: ?>
+                                        </td>
-                                            <input id="<?= chr($x + 65) . ($y + 1) ?>" type="text" maxlength="1" size="1" pattern="[A-Z]" placeholder="<?= $grille[$y][$x] ?>"
+                                    <?php else: ?>
-                                                title="<?= "→ " . strip_tags(implode("\n→ ", $definitions["lignes"][$y])) . "\n↓ " . strip_tags(implode("\n↓ ", $definitions["colonnes"][$x])) ?>" />
+                                        <td class="case blanche">
-                                        <?php endif; ?>
+                                            <input id="<?= chr($x + 65) . ($y + 1) ?>" type="text" maxlength="1" size="1" pattern="[A-Z]"
-                                    </td>
+                                                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; ?>
@@ -120,17 +147,19 @@ for ($x = 0; $x < $largeur; $x++) {
                 </div>
                 <div class="definitions horizontales">
                     <h2>Horizontalement</h2>
-                    <ol>
+                    <ol type="1">
-                        <?php foreach ($definitions["lignes"] as $y => $definitions_ligne): ?>
+                        <?php foreach ($grille->definitions["horizontales"] as $y => $definitions): ?>
                             <li>
-                                <?php if (count($definitions_ligne) == 1): ?>
+                                <?php if (count($definitions)): ?>
-                                    <?= $definitions_ligne[0] ?>
+                                    <?php if (count($definitions) == 1): ?>
-                                <?php else: ?>
+                                        <?= formatter_definition($definitions[0]) ?>
-                                    <ol>
+                                    <?php else: ?>
-                                        <?php foreach ($definitions_ligne as $definition) : ?>
+                                        <ol>
-                                            <li><?= $definition ?></li>
+                                        <?php foreach ($definitions as $definition) : ?>
+                                            <li><?= formatter_definition($definition) ?></li>
                                         <?php endforeach ?>
-                                    </ol>
+                                        </ol>
+                                    <?php endif ?>
                                 <?php endif ?>
                             </li>
                         <?php endforeach; ?>
@@ -139,33 +168,42 @@ for ($x = 0; $x < $largeur; $x++) {
                 <div class="definitions verticales">
                     <h2>Verticalement</h2>
                     <ol type="A">
-                        <?php foreach ($definitions["colonnes"] as $x => $definitions_colonne): ?>
+                        <?php foreach ($grille->definitions["verticales"] as $x => $definitions): ?>
                             <li>
-                                <?php if (count($definitions_colonne) == 1): ?>
+                                <?php if (count($definitions)): ?>
-                                    <?= $definitions_colonne[0] ?>
+                                    <?php if (count($definitions) == 1): ?>
-                                <?php else: ?>
+                                        <?= formatter_definition($definitions[0]) ?>
-                                    <ol>
+                                    <?php else: ?>
-                                        <?php foreach ($definitions_colonne as $definition) : ?>
+                                        <ol>
-                                            <li><?= $definition ?></li>
+                                            <?php foreach ($definitions as $definition) : ?>
-                                        <?php endforeach ?>
+                                                <li><?= formatter_definition($definition) ?></li>
-                                    </ol>
+                                            <?php endforeach ?>
+                                        </ol>
+                                    <?php endif ?>
                                 <?php endif ?>
                             </li>
                         <?php endforeach; ?>
                     </ol>
                 </div>
-            <?php else: ?>
+                <input type="hidden" id="solution_hashee" value="<?= $grille->hash() ?>" />
+            <?php else: http_response_code(500); ?>
                 <h3 class="erreur">Erreur de génération de la grille</h3>
             <?php endif ?>
         </div>
-
+        
-        <input type="hidden" id="lignes" <?php if (isset($_GET["lignes"])): ?>name="lignes" <?php endif ?>value="<?= $hauteur ?>" />
+        <div class="nouvelle-grille">
-        <input type="hidden" id="colonnes" <?php if (isset($_GET["colonnes"])): ?>name="colonnes" <?php endif ?>value="<?= $largeur ?>" />
+            <img src="favicons/favicon.svg" width="16" height="16">
-        <input type="hidden" id="solution_hashee" value="<?= $grille->hash() ?>" />
+            <button type="submit">Nouvelle grille</button>
-        <button type="submit"><img src="favicon.ico">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>
 
 </html>

script.js

@@ -6,47 +6,57 @@ async function sha256(text) {
   return hashArray.map((b) => b.toString(16).padStart(2, "0")).join("");
 }
 
-const inputs = Array.from(grilleForm.querySelectorAll('input[type="text"]'));
+let inputs = Array.from(grilleForm.querySelectorAll(".grille input"));
 let largeur = Number(colonnes.value);
 let nb_cases = inputs.length;
 let index = 0;
-inputs.forEach((input) => {
+for (let input of inputs) {
   input.index = index++;
   input.x = input.index % largeur;
   input.y = Math.floor(input.index / largeur);
 
   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})`)) {
+    for (li of document.querySelectorAll(
-      li.classList.add("selectionee")
+      `.definitions.horizontales > ol > li:nth-child(${
+        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(${input.y+1})), .definitions.verticales > ol > li:not(:nth-child(${input.x+1}))`)) {
+    for (li of document.querySelectorAll(
-      li.classList.add("non-selectionee")
+      `.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");
     }
-    
+
     input.select();
   };
 
   input.onkeydown = function (event) {
-    next_input = null;
+    next_input = input;
-    switch (event.key) {
+    do {
-      case "ArrowUp":
+      switch (event.key) {
-        next_input = inputs[(input.index - largeur + nb_cases) % nb_cases];
+        case "ArrowUp":
-        break;
+          next_input = inputs[(next_input.index - largeur + nb_cases) % nb_cases];
-      case "ArrowDown":
+          break;
-        next_input = inputs[(input.index + largeur) % nb_cases];
+        case "ArrowDown":
-        break;
+          next_input = inputs[(next_input.index + largeur) % nb_cases];
-      case "ArrowLeft":
+          break;
-        next_input = inputs[(input.index - 1 + nb_cases) % nb_cases];
+        case "ArrowLeft":
-        break;
+          next_input = inputs[(next_input.index - 1 + nb_cases) % nb_cases];
-      case "ArrowRight":
+          break;
-        next_input = inputs[(input.index + 1) % nb_cases];
+        case "ArrowRight":
-        break;
+          next_input = inputs[(next_input.index + 1) % nb_cases];
-    }
+          break;
-    if (next_input) {
+        default:
-      next_input.focus();
+          return;
-      next_input.select();
+      }
-      event.preventDefault();
+    } while (next_input.disabled)
-    }
+    event.preventDefault();
+    next_input.focus();
+    next_input.select();
   };
 
   input.oninput = function (event) {
@@ -60,7 +70,7 @@ inputs.forEach((input) => {
     ) {
       sha256(inputs.map((input) => input.value).join("")).then((hash) => {
         if (hash == solution_hashee.value) {
-          if (confirm("Bravo ! \nUne nouvelle partie ?")) {
+          if (confirm("Bravo !\nUne nouvelle partie ?")) {
             grilleForm.submit();
           }
         }
@@ -69,11 +79,26 @@ inputs.forEach((input) => {
   };
 
   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(
-      li.classList.remove("selectionee")
+      `.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}))`)) {
+    for (li of document.querySelectorAll(
-      li.classList.remove("non-selectionee")
+      `.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")) {
+  input.onfocus = function (event) {
+    input.name = input.id;
+    input.select();
+  };
+}

service-worker.js

@@ -0,0 +1,86 @@
+/*
+Copyright 2015, 2019, 2020 Google LLC. All Rights Reserved.
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+*/
+
+// Incrementing OFFLINE_VERSION will kick off the install event and force
+// previously cached resources to be updated from the network.
+const OFFLINE_VERSION = 1;
+const CACHE_NAME = "offline";
+// Customize this with a different URL if needed.
+const OFFLINE_URL = "index.php";
+
+self.addEventListener("install", (event) => {
+  event.waitUntil(
+    (async () => {
+      const cache = await caches.open(CACHE_NAME);
+      // Setting {cache: 'reload'} in the new request will ensure that the
+      // response isn't fulfilled from the HTTP cache; i.e., it will be from
+      // the network.
+      await cache.add(new Request(OFFLINE_URL, { cache: "reload" }));
+    })()
+  );
+  // Force the waiting service worker to become the active service worker.
+  self.skipWaiting();
+});
+
+self.addEventListener("activate", (event) => {
+  event.waitUntil(
+    (async () => {
+      // Enable navigation preload if it's supported.
+      // See https://developers.google.com/web/updates/2017/02/navigation-preload
+      if ("navigationPreload" in self.registration) {
+        await self.registration.navigationPreload.enable();
+      }
+    })()
+  );
+
+  // Tell the active service worker to take control of the page immediately.
+  self.clients.claim();
+});
+
+self.addEventListener("fetch", (event) => {
+  // We only want to call event.respondWith() if this is a navigation request
+  // for an HTML page.
+  if (event.request.mode === "navigate") {
+    event.respondWith(
+      (async () => {
+        try {
+          // First, try to use the navigation preload response if it's supported.
+          const preloadResponse = await event.preloadResponse;
+          if (preloadResponse) {
+            return preloadResponse;
+          }
+
+          // Always try the network first.
+          const networkResponse = await fetch(event.request);
+          return networkResponse;
+        } catch (error) {
+          // catch is only triggered if an exception is thrown, which is likely
+          // due to a network error.
+          // If fetch() returns a valid HTTP response with a response code in
+          // the 4xx or 5xx range, the catch() will NOT be called.
+          console.log("Fetch failed; returning offline page instead.", error);
+
+          const cache = await caches.open(CACHE_NAME);
+          const cachedResponse = await cache.match(OFFLINE_URL);
+          return cachedResponse;
+        }
+      })()
+    );
+  }
+
+  // If our if() condition is false, then this fetch handler won't intercept the
+  // request. If there are any other fetch handlers registered, they will get a
+  // chance to call event.respondWith(). If no fetch handlers call
+  // event.respondWith(), the request will be handled by the browser as if there
+  // were no service worker involvement.
+});

site.webmanifest

@@ -0,0 +1,21 @@
+{
+    "name": "🄼🄾🅃🅂 🄲🅁🄾🄸🅂🄴🅂",
+    "short_name": "🄼🄾🅃🅂 🄲🅁🄾🄸🅂🄴🅂",
+    "icons": [
+      {
+        "src": "favicons/web-app-manifest-192x192.png",
+        "sizes": "192x192",
+        "type": "image/png",
+        "purpose": "maskable"
+      },
+      {
+        "src": "favicons/web-app-manifest-512x512.png",
+        "sizes": "512x512",
+        "type": "image/png",
+        "purpose": "maskable"
+      }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+  }

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;
@@ -52,9 +58,13 @@ h2 {
   gap: 1em;
 }
 
+.grille {
+  display: flex;
+}
+
 .grille table {
   border-collapse: collapse;
-  margin: 0 auto;
+  margin: auto;
   height: fit-content;
 }
 
@@ -63,6 +73,7 @@ h2 {
   width: 2rem;
   height: 2rem;
   text-align: center;
+  vertical-align: middle;
 }
 
 .grille td {
@@ -90,10 +101,6 @@ h2 {
   background-color: black;
 }
 
-.grille .case.noire {
-  background-color: black;
-}
-
 .grille input {
   width: 100%;
   height: 100%;
@@ -107,6 +114,7 @@ h2 {
 }
 
 .grille input[disabled] {
+  color: black;
   background-color: black;
 }
 
@@ -173,34 +181,55 @@ h2 {
   text-align: center;
 }
 
-button[type="submit"] {
+.nouvelle-grille img {
-  width: fit-content;
+  margin: 0 0.5em;
-  margin: 0 auto;
 }
 
-button[type="submit"] {
+.nouvelle-grille {
-  width: 100%;
   margin: 1em auto 0 auto;
+  display: flex;
+  align-items: baseline;
+}
+
+.nouvelle-grille button,
+.nouvelle-grille input {
   border: none;
   background: none;
+  color: inherit;
   font-family: inherit;
   font-size: 1em;
-  display: flex;
+  cursor: pointer;
-  align-items: center;
-  gap: 0.5em;
-  justify-content: center;
 }
 
-button[type="submit"]:hover {
+.nouvelle-grille button {
-  cursor: pointer;
-  color: #2a6496;
   text-decoration: underline;
 }
 
-button[type="submit"]:active {
+h1 a:hover,
+.nouvelle-grille button:hover {
+  color: #2a6496;
+}
+
+.nouvelle-grille button:active {
   color: darkorchid;
 }
 
+.nouvelle-grille input { 
+  -moz-appearance: textfield;
+  appearance: textfield;
+  margin: 0;
+  padding: 0;
+  text-align: center;
+  text-decoration: underline dotted; 
+  width: 1em;
+}
+
+.nouvelle-grille input::-webkit-inner-spin-button,
+.nouvelle-grille input::-webkit-outer-spin-button { 
+  -webkit-appearance: none; 
+  margin: 0; 
+}
+
 @media (max-width: 1024px) {
   h1.large.width {
     display: none;
@@ -267,7 +296,10 @@ button[type="submit"]:active {
   }
   
   .definitions li.non-selectionee {
-    display: none;
+    visibility: hidden;
+    height: 0;
+    margin: 0;
+    padding: 0;
   }
 }
 
@@ -290,11 +322,12 @@ button[type="submit"]:active {
     background-color: #edeeee;
   }
 
-  button[type="submit"]:hover {
+  h1 a:hover,
+  .nouvelle-grille button:hover {
     color: #479fec;
   }
 
-  button[type="submit"]:active {
+  .nouvelle-grille button:active {
     color: orchid;
   }
 }