small enhancements

game.php

@@ -37,7 +37,12 @@
                 } else {
                     $disabled = "disabled";
                 }
-                echo "                            <td><input type='number' min='1' max='9' step='1' value='$value'$disabled/></td>\n";
+?>
+                            <td>
+                                <input type='number' min='1' max='9' step='1' value='<?=$value?>' list='<?=$row.$column?>' <?=$disabled?>/>
+                                <datalist id='<?=$row.$column?>'></datalist>
+                            </td>
+<?php
             }
 ?>
                         </tr>
@@ -57,8 +62,7 @@
             <div class='buttons'>
                 <button type='reset'>Tout effacer</button>
             	<button id='undoButton' type='button' onclick='undo()' disabled accesskey='z'>Annuler</button>
-            	<label for='colorPicker'>🎨</label>
+                <input id='colorPicker' type='color' title='Changer de couleur de stylo' value='#00008b'/>
-                <input id='colorPicker' type='color' title='Changer de stylo' value='#00008b'/>
             </div>
         </form>
         <section>
@@ -77,10 +81,6 @@
             <table class='shortcuts'>
                 <caption>Raccourcis clavier</caption>
                 <tbody>
-                    <tr>
-                        <td><kbd>Tab</kbd></td>
-                        <td>Déplacement</td>
-                    </tr>
                     <tr>
                         <td><?=$keyboardShortcurt?> + <kbd>1</kbd>~<kbd>9</kbd></td>
                         <td>Surligner</td>
@@ -89,16 +89,20 @@
                         <td><?=$keyboardShortcurt?> + <kbd>Z</kbd></td>
                         <td>Annuler</td>
                     </tr>
+                    <tr>
+                        <td><kbd>Tab</kbd>, <kbd>Maj</kbd> + <kbd>Tab</kbd></td>
+                        <td>Déplacement</td>
+                    </tr>
                 </tbody>
             </table>
         </section>
 <?php
     }
 ?>
-        <section>
+        <footer>
             <a href=''>Lien vers cette grille</a><br/>
             <a href='.'>Nouvelle grille</a>
-        </section>
+        </footer>
     </body>
 </html>
 <?php

style.css

@@ -6,7 +6,7 @@ h1 {
     text-align: center;
 }
 
-section, div {
+section, div, footer {
     display: flex;
     row-gap: 0.5em;
     column-gap: 0.5em;
@@ -101,32 +101,32 @@ input::-webkit-inner-spin-button {
   margin: 0;
 }
 
-input:enabled {
+input[type=number]:enabled {
     color: darkblue;
     background: white;
 }
 
-input:disabled {
+input[type=number]:disabled, button:enabled {
     color: white;
     background: #6666ff;
 }
 
-.same-value:enabled {
+input[type=number].same-value:enabled {
-    color: #009973;
+    color: #009973 !important;
-    background: #66ffd9;
+    background: #66ffd9 !important;
 }
 
-.forbidden-value:enabled {
+input[type=number].forbidden-value:enabled {
-    background: #b3ffda;
+    background: #b3ffda !important;
 }
 
-.same-value:disabled {
+input[type=number].same-value, button.same-value:enabled {
-    color: white;
+    color: white !important;
-    background: #00e6ac;
+    background: #00e6ac !important;
 }
 
-.forbidden-value:disabled {
+input[type=number].forbidden-value:disabled {
-    background: #6288ea;
+    background: #6288ea !important;
 }
 
 input::placeholder {
@@ -138,9 +138,19 @@ input::placeholder {
     column-gap: 0.2em;
 }
 
+button, input[type="color"] {
+    border: 2px outset #6666ff;
+    border-radius: 4px;
+    padding-bottom: 2px;
+}
+
+button.same-value:enabled {
+    border: 2px inset #00e6ac;
+}
+
 input[type="color"] {
-    font-size: 1em;
     align-self: center;
+    padding: 0;
 }
 
 .shortcuts caption {

sudoku.js

@@ -52,14 +52,18 @@ function searchCandidatesOf(box) {
 }
 
 function showCandidatesOn(box) {
-    box.required = box.candidates.size == 0
+    if (!box.disabled) {
-    if (box.value.length) {
+        while (box.list.firstChild) {
-        box.title = ""
+            box.list.firstChild.remove()
-    } else if (box.candidates.size) {
+        }
+        if (box.candidates.size) {
             const candidatesArray = Array.from(box.candidates).sort()
-        box.title = candidatesArray.length ==1 ? candidatesArray[0] : candidatesArray.slice(0, candidatesArray.length-1).join(", ") + " ou " + candidatesArray[candidatesArray.length-1]
+            candidatesArray.forEach(candidate => {
-    } else {
+                option = document.createElement('option')
-        box.title = "Aucune valeur possible !"
+                option.value = candidate
+                box.list.appendChild(option)
+            })
+        }
     }
 }
 
@@ -86,6 +90,7 @@ function refresh(box) {
     for (neighbour1 of box.neighbourhood) {
         neighbour1.setCustomValidity("")
         if (neighbour1.value.length) {
+            if (neighbour1.candidates.size) {
                 for (area of [
                     {name: "région", neighbours: regions[neighbour1.regionId]},
                     {name: "ligne", neighbours: rows[neighbour1.rowId]},
@@ -93,11 +98,16 @@ function refresh(box) {
                 ])
                     for (neighbour2 of area.neighbours)
                         if (neighbour2 != neighbour1 && neighbour2.value == neighbour1.value) {
-                        neighbour1.setCustomValidity(`Il y a un autre ${neighbour1.value} dans cette ${area.name}.`)
+                            for (neighbour of [neighbour1, neughbour2]) {
-                        neighbour2.setCustomValidity(`Il y a un autre ${neighbour1.value} dans cette ${area.name}.`)
+                                neighbour.setCustomValidity(`Il y a un autre ${neighbour.value} dans cette ${area.name}.`)
                             }
                         }
             } 
+        } else if (neighbour1.candidates.size == 0) {
+            console.log("rezgzgzg")
+            neighbour1.setCustomValidity("Aucun value possible !")
+        }
+    }
     
     enableButtons()
     highlightAndTab()
@@ -111,8 +121,8 @@ function refresh(box) {
             suggestionTimer = setTimeout(showSuggestion, 30000)
         }
     } else { // Errors on grid
-        box.select()
         box.reportValidity()
+        box.select()
     }
 }
 
@@ -151,6 +161,10 @@ function highlight(value) {
     } else {
         highlightedValue = value
     }
+    for (button of buttons.getElementsByTagName("button")) {
+        if (button.textContent == highlightedValue) button.className = "same-value"
+        else button.className = ""
+    }
     highlightAndTab()
     boxes.filter(box => box.value == "" && box.tabIndex == 0)[0].focus()
 }