replaceChildren

classes.php

@@ -1,13 +1,12 @@
 <?php
-    const UNKOWN = ".";
+    const UNKNOWN = ".";
 
     function isKnown($box) {
-        return $box->value != UNKOWN;
+        return $box->value != UNKNOWN;
     }
 
-
     function isUnknown($box) {
-        return $box->value == UNKOWN;
+        return $box->value == UNKNOWN;
     }
     
     function easyFirst($box1, $box2) {
@@ -28,19 +27,19 @@
         public $values = array("1", "2", "3", "4", "5", "6", "7", "8", "9");
     
         function __construct($rowId, $columnId, $regionId) {
-            $this->value = UNKOWN;
+            $this->value = UNKNOWN;
             $this->rowId = $rowId;
             $this->columnId = $columnId;
             $this->regionId = $regionId;
             $this->candidates = $this->values;
-            $this->testValueWasAllowed = array();
+            $this->candidateRemoved = array();
             $this->neighbourhood = array();
         }
         
         function searchCandidates() {
             $this->candidates = $this->values;
             forEach($this->neighbourhood as $neighbour) {
-                if ($neighbour->value != UNKOWN)
+                if ($neighbour->value != UNKNOWN)
                     array_unset_value($neighbour->value, $this->candidates);
             }
         }
@@ -103,7 +102,7 @@
                 $erasedValues = array();
                 forEach($testBoxes as $testBox) {
                     $erasedValues[] = $testBox->value;
-                    $testBox->value = UNKOWN;
+                    $testBox->value = UNKNOWN;
                     forEach($testBox->neighbourhood as $neighbour)
                         $neighbour->searchCandidates();
                 }
@@ -146,11 +145,14 @@
                 if ($randomized) shuffle($testBox->candidates);
                 $stop = null;
                 foreach($testBox->candidates as $testBox->value) {
-                    foreach($testBox->neighbourhood as $neighbour)
-                        $neighbour->testValueWasAllowed[] = array_unset_value($testBox->value, $neighbour->candidates);
                     $correctGrid = true;
+                    foreach(array_filter($testBox->neighbourhood, "isUnknown") as $neighbour)
+                        $neighbour->candidateRemoved[] = array_unset_value($testBox->value, $neighbour->candidates);
                     foreach(array_filter($testBox->neighbourhood, "isUnknown") as $neighbour) {
-                        if (count($neighbour->candidates) == 0) $correctGrid = false;
+                        if (count($neighbour->candidates) == 0) {
+                            $correctGrid = false;
+                            break;
+                        }
                     }
                     if ($correctGrid) {
                         $solutions = $this->solutionsGenerator($randomized);
@@ -161,14 +163,13 @@
                                 break;
                             }
                         }
-                        
                     }
-                    forEach($testBox->neighbourhood as $neighbour)
+                    foreach(array_filter($testBox->neighbourhood, "isUnknown") as $neighbour)
-                        if (array_pop($neighbour->testValueWasAllowed))
+                        if (array_pop($neighbour->candidateRemoved))
                             $neighbour->candidates[] = $testBox->value;
                     if ($stop) break;
                 }
-                $testBox->value = UNKOWN;
+                $testBox->value = UNKNOWN;
             } else {
                 yield $this->toString();
             }
@@ -178,7 +179,7 @@
             $str = "";
             foreach($this->rows as $row) {
                 forEach($row as $box) {
-                    $str .= ($box->value? $box->value : UNKOWN);
+                    $str .= ($box->value? $box->value : UNKNOWN);
                 }
             }
             return $str;

game.php

@@ -13,6 +13,7 @@
         <title>Sudoku</title>
         <link rel='stylesheet' type='text/css' href='style.css' />
         <script src='sudoku.js'></script>
+        <link rel="icon" type="image/png" href="favicon.png">
     </head>
     <body>
         <header>
@@ -29,7 +30,7 @@
 <?php
             for ($column = 0; $column < 9; $column++) {
                 $value = $gridStr[9*$row+$column];
-                if ($value == UNKOWN) {
+                if ($value == UNKNOWN) {
                     $value = "";
                     $disabled = "";
                 } else {
@@ -58,7 +59,7 @@
 ?>
             </div>
             <div>
-                <button type='reset'>Tout effacer</button>
+                <button type='button' onclick='clearAll()'>Tout effacer</button>
                 <button id='undoButton' type='button' onclick='undo()' disabled title='Annuler' accesskey='z'>Annuler</button>
                 <input id='colorPicker' type='color' title='Changer de couleur de stylo' value='#00008b'/>
             </div>

style.css

@@ -115,11 +115,13 @@ input::placeholder {
 }
 
 .highlight-buttons {
-    column-gap: 0.2em;
+    column-gap: 0.3em;
 }
 button, input[type="color"] {
     border: 2px outset #6666ff;
     border-radius: 4px;
+    font-size: 1em;
+    margin: 0 0 1px 0;
 }
 button {
     padding: 0 8px 2px 8px;

sudoku.js

@@ -1,4 +1,5 @@
 const VALUES = "123456789"
+const SUGESTION_DELAY = 60000 //ms
 
 let boxes = []
 let rows = Array.from(Array(9), x => [])
@@ -56,9 +57,7 @@ function searchCandidatesOf(box) {
 
 function showCandidatesOn(box) {
     if (!box.disabled) {
-        while (box.list.firstChild) {
+        box.list.replaceChildren()
-            box.list.firstChild.remove()
-        }
         if (!box.value && box.candidates.size) {
             const candidatesArray = Array.from(box.candidates).sort()
             candidatesArray.forEach(candidate => {
@@ -128,7 +127,7 @@ function refresh(box) {
             alert(`Bravo ! Vous avez résolu la grille.`)
         } else {
             if (suggestionTimer) clearTimeout(suggestionTimer)
-            suggestionTimer = setTimeout(showSuggestion, 30000)
+            suggestionTimer = setTimeout(showSuggestion, SUGESTION_DELAY)
         }
     } else { // Errors on grid
         box.reportValidity()
@@ -209,3 +208,14 @@ function showSuggestion() {
         suggestionTimer = null
     }
 }
+
+function clearAll() {
+    boxes.filter(box => !box.disabled).forEach(box => {
+        box.value = ""
+        box.placeholder = ""
+    })
+    boxes.forEach(searchCandidatesOf)
+    boxes.forEach(showCandidatesOn)
+    enableButtons()
+    highlightAndTab()
+}