From e75e6b4bc16ac11e939b28653658acd4c93bf69f Mon Sep 17 00:00:00 2001
From: adrien <adrien@malingrey.fr>
Date: Sun, 11 Oct 2020 02:41:54 +0200
Subject: [PATCH] small enhancements

---
 game.php  | 26 ++++++++++++++-----------
 style.css | 38 ++++++++++++++++++++++--------------
 sudoku.js | 58 ++++++++++++++++++++++++++++++++++---------------------
 3 files changed, 75 insertions(+), 47 deletions(-)

diff --git a/game.php b/game.php
index 18802cc..8cfba39 100644
--- a/game.php
+++ b/game.php
@@ -35,9 +35,14 @@
                     $value = "";
                     $disabled = "";
                 } else {
-                    $disabled = " disabled";
+                    $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 stylo' value='#00008b'/>
+                <input id='colorPicker' type='color' title='Changer de couleur 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
@@ -129,7 +133,7 @@
             <li>un chiffre entre 1 et 9 pour les cases connues</li>
             <li>un point pour les case vides</li>
         </ul>
-    	Exemple : <a href='<?=$urlExample?>'><?=$urlExample?></a><br/>
+        Exemple : <a href='<?=$urlExample?>'><?=$urlExample?></a><br/>
     </body>
 </html>
 <?php
diff --git a/style.css b/style.css
index e3ac053..829c94c 100644
--- a/style.css
+++ b/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 {
-    color: #009973;
-    background: #66ffd9;
+input[type=number].same-value:enabled {
+    color: #009973 !important;
+    background: #66ffd9 !important;
 }
 
-.forbidden-value:enabled {
-    background: #b3ffda;
+input[type=number].forbidden-value:enabled {
+    background: #b3ffda !important;
 }
 
-.same-value:disabled {
-    color: white;
-    background: #00e6ac;
+input[type=number].same-value, button.same-value:enabled {
+    color: white !important;
+    background: #00e6ac !important;
 }
 
-.forbidden-value:disabled {
-    background: #6288ea;
+input[type=number].forbidden-value:disabled {
+    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 {
diff --git a/sudoku.js b/sudoku.js
index c759651..9e0e051 100644
--- a/sudoku.js
+++ b/sudoku.js
@@ -52,14 +52,18 @@ function searchCandidatesOf(box) {
 }
 
 function showCandidatesOn(box) {
-    box.required = box.candidates.size == 0
-    if (box.value.length) {
-        box.title = ""
-    } else 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]
-    } else {
-        box.title = "Aucune valeur possible !"
+    if (!box.disabled) {
+        while (box.list.firstChild) {
+            box.list.firstChild.remove()
+        }
+        if (box.candidates.size) {
+            const candidatesArray = Array.from(box.candidates).sort()
+            candidatesArray.forEach(candidate => {
+                option = document.createElement('option')
+                option.value = candidate
+                box.list.appendChild(option)
+            })
+        }
     }
 }
 
@@ -69,9 +73,9 @@ function onfocus() {
 }
 
 function oninput() {
-	history.push({input: this, value: this.previousValue})
-	undoButton.disabled = false
-	refresh(this)
+    history.push({input: this, value: this.previousValue})
+    undoButton.disabled = false
+    refresh(this)
 }
 
 function refresh(box) {
@@ -86,16 +90,22 @@ function refresh(box) {
     for (neighbour1 of box.neighbourhood) {
         neighbour1.setCustomValidity("")
         if (neighbour1.value.length) {
-            for (area of [
-                {name: "région", neighbours: regions[neighbour1.regionId]},
-                {name: "ligne", neighbours: rows[neighbour1.rowId]},
-                {name: "colonne", neighbours: columns[neighbour1.columnId]},
-            ])
-                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}.`)
-                        neighbour2.setCustomValidity(`Il y a un autre ${neighbour1.value} dans cette ${area.name}.`)
-                    }
+            if (neighbour1.candidates.size) {
+                for (area of [
+                    {name: "région", neighbours: regions[neighbour1.regionId]},
+                    {name: "ligne", neighbours: rows[neighbour1.rowId]},
+                    {name: "colonne", neighbours: columns[neighbour1.columnId]},
+                ])
+                    for (neighbour2 of area.neighbours)
+                        if (neighbour2 != neighbour1 && neighbour2.value == neighbour1.value) {
+                            for (neighbour of [neighbour1, neughbour2]) {
+                                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 !")
         }
     }
     
@@ -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()
 }