sight fixes

style.css

@@ -108,7 +108,7 @@ table input {
     cursor: inherit !important;
 }
 
-.table-danger {
+.not-allowed {
     cursor: not-allowed !important;
 }
 

sudoku.js

@@ -5,6 +5,11 @@ let boxes         = []
 let rows          = Array.from(Array(9), x => [])
 let columns       = Array.from(Array(9), x => [])
 let regions       = Array.from(Array(9), x => [])
+let areaNames     = {
+    ligne:   rows,
+    colonne: columns,
+    région:  regions,
+}
 let valueToInsert = ""
 let easyBoxes     = []
 let insertRadios  = []
@@ -165,7 +170,7 @@ function onclick() {
 
 function oninput() {
     if (inkPenRadio.checked) {
-        checkBox(this)
+        checkBoxes()
         enableRadio()
         highlight()
         fixGridLink.href = "?" + boxes.map(box => box.value || UNKNOWN).join("")
@@ -175,39 +180,8 @@ function oninput() {
     undoButton.disabled = false
 }
 
-function checkBox(box) {
-    checkCandidates(box.andNeighbourhood)
-    
-    if (box.value) {
-        for (let [areaName, area] of Object.entries({
-                région:  regions[box.regionId],
-                ligne:   rows[box.rowId],
-                colonne: columns[box.columnId],
-            }))
-            for (neighbour of area)
-                if (box != neighbour)
-                    showDuplicates(area, areaName, box, neighbour)
-    }
-
-    checkSuccess()
-}
-
 function checkBoxes() {
-    checkCandidates(boxes)
-
-    for (let [areaName, areas] of Object.entries({
-        région:  regions,
-        ligne:   rows,
-        colonne: columns,
-    }))
-        for (area of areas)
-            area.filter(box => box.value).sort(showDuplicates.bind(null, area, areaName))
-
-    checkSuccess()
-}
-
-function checkCandidates(area) {
-    area.forEach(box => {
+    boxes.forEach(box => {
         box.setCustomValidity("")
         box.classList.remove("is-invalid")
         box.parentElement.classList.remove("table-danger")
@@ -217,9 +191,10 @@ function checkCandidates(area) {
             box.classList.add("is-invalid")
         }
     })
-}
 
-function showDuplicates(area, areaName, box, neighbour) {
+    for (let [areaName, areas] of Object.entries(areaNames))
+        for (area of areas)
+            area.filter(box => box.value).sort((box, neighbour) => {
                 if(box.value == neighbour.value) {
                     area.forEach(neighbour => neighbour.parentElement.classList.add("table-danger"))
                     for (neighbour of [box, neighbour]) {
@@ -227,9 +202,9 @@ function showDuplicates(area, areaName, box, neighbour) {
                         neighbour.classList.add("is-invalid")
                     }
                 }
-}
+                return box.value - neighbour.value
+            })
 
-function checkSuccess() {
     if (sudokuForm.checkValidity()) { // Correct grid
         if (boxes.filter(box => box.value == "").length == 0) {
             grid.classList.add("table-success")
@@ -317,7 +292,7 @@ function onmouseenter(event) {
         box.neighbourhood.forEach(neighbour => {
             if (valueToInsert && neighbour.value == valueToInsert) {
                 for (neighbour of [box, neighbour]) {
-                    neighbour.parentElement.classList.add("table-danger")
+                    neighbour.parentElement.classList.add("table-danger", "not-allowed")
                 }
             }
         })
@@ -329,7 +304,7 @@ function onmouseleave(event) {
         box = event.target
         box.andNeighbourhood.forEach(neighbour => {
             neighbour.parentElement.classList.remove("table-active")
-            neighbour.parentElement.classList.remove("table-danger")
+            neighbour.parentElement.classList.remove("table-danger", "not-allowed")
         })
     }
 }

sudoku.php

@@ -21,9 +21,9 @@
             <input type="color" class="btn-check" id="colorPickerInput" title="Changer la couleur" oninput="changeColor()"/>
             <label id="colorPickerLabel" for="colorPickerInput" class="btn btn-primary" title="Changer de couleur"><i class="ri-palette-fill"></i></label>
             <div class='btn-group'>
-                <input type='checkbox' id='sightCheckbox' class='btn-check' onclick='highlighterCheckbox.checked = false; refreshUI()' />
+                <input type='checkbox' id='sightCheckbox' class='btn-check' onclick='highlighterCheckbox.checked = false; highlight()' />
                 <label for='sightCheckbox' class='btn btn-info' title='Surligner la ligne, la colonne et la région de la case survolée'><i class="ri-focus-3-line"></i></label>
-                <input type='checkbox' id='highlighterCheckbox' class='btn-check' onclick='sightCheckbox.checked = false; refreshUI()' />
+                <input type='checkbox' id='highlighterCheckbox' class='btn-check' onclick='sightCheckbox.checked = false; highlight()' />
                 <label for='highlighterCheckbox' class='btn btn-info' title='Surligner les lignes, colonnes et régions contenant déjà le chiffre sélectionné'><i class="ri-mark-pen-fill"></i></label>
             </div>
             <button id="hintButton" type="button" class='btn btn-info' onclick="showHint()" title="Montrer une case avec une seule possibilité" accesskey="H" disabled=""><i class="ri-lightbulb-line"></i></button>