add sight function

css/style.css

@@ -95,6 +95,10 @@ td {
 }
 
 .table-active {
+    cursor: inherit !important;
+}
+
+.table-danger {
     cursor: not-allowed !important;
 }
 
@@ -104,6 +108,7 @@ table {
 
 button,
 label {
+    padding: .375rem .6rem !important;
     cursor: pointer;
 }
 

js/sudoku.js

@@ -10,6 +10,7 @@ let valueToInsert = ""
 let history = []
 let accessKeyModifiers = "AccessKey+"
 let easyBoxes = []
+let insertRadios = []
 
 function shuffle(iterable) {
     array = Array.from(iterable)
@@ -36,6 +37,8 @@ window.onload = function() {
                 box.oninput = oninput
                 box.onblur = onblur
                 box.onclick = onclick
+                box.onmouseenter = onmouseenter
+                box.onmouseleave = onmouseleave
                 box.previousValue = ""
                 box.previousPlaceholder = ""
             }
@@ -52,18 +55,20 @@ window.onload = function() {
         rowId++
     }
 
-    if (localStorage["highlighterCheckbox.checked"]) {
+    if (localStorage["sightCheckbox.checked"] == "true") sightCheckbox.checked = true
-        highlighterCheckbox.checked = true
+    if (localStorage["highlighterCheckbox.checked"] == "true") highlighterCheckbox.checked = true
-    }
     loadSavedGame()
 
     boxes.forEach(box => {
         box.neighbourhood = new Set(rows[box.rowId].concat(columns[box.columnId]).concat(regions[box.regionId]))
+        box.andNeighbourhood = Array.from(box.neighbourhood)
         box.neighbourhood.delete(box)
         box.neighbourhood = Array.from(box.neighbourhood)
         searchCandidatesOf(box)
     })
 
+    insertRadios = Array.from(insertRadioGroup.getElementsByTagName("input"))
+
     for (label of document.getElementsByTagName("label")) {
         label.control.label = label
     }
@@ -169,7 +174,7 @@ function refreshBox(box) {
 }
 
 function checkBox(box) {
-    box.neighbourhood.concat([box]).forEach(neighbour => {
+    box.andNeighbourhood.forEach(neighbour => {
         neighbour.setCustomValidity("")
         neighbour.classList.remove("is-invalid")
         searchCandidatesOf(neighbour)
@@ -217,7 +222,7 @@ function refreshUI() {
 }
 
 function enableRadio() {
-    for (radio of insertRadioGroup.getElementsByTagName("input")) {
+    for (radio of insertRadios) {
         if (boxes.filter(box => box.value == "").some(box => box.candidates.has(radio.value))) {
             radio.disabled = false
             radio.label.title = `Insérer un ${radio.value} [${radio.accessKeyLabel||(accessKeyModifiers+radio.accessKey)}]`
@@ -241,6 +246,7 @@ function highlight() {
             box.parentElement.classList.remove("table-primary")
             box.tabIndex = 0
         }
+        
         if (valueToInsert && highlighterCheckbox.checked && !box.candidates.has(valueToInsert)) {
             box.parentElement.classList.add("table-active")
             box.tabIndex = -1
@@ -266,6 +272,33 @@ function onblur() {
     }
 }
 
+function onmouseenter(event) {
+    if (sightCheckbox.checked){
+        box = event.target
+        box.neighbourhood.concat([box]).forEach(neighbour => {
+            neighbour.parentElement.classList.add("table-active")
+        })
+
+        box.neighbourhood.forEach(neighbour => {
+            if (valueToInsert && neighbour.value == valueToInsert) {
+                for (neighbour of[box, neighbour]) {
+                    neighbour.parentElement.classList.add("table-danger")
+                }
+            }
+        })
+}
+}
+
+function onmouseleave(event) {
+    if (sightCheckbox.checked){
+        box = event.target
+        box.neighbourhood.concat([box]).forEach(neighbour => {
+            neighbour.parentElement.classList.remove("table-active")
+            neighbour.parentElement.classList.remove("table-danger")
+        })
+    }
+}
+
 function insert(radio) {
     if (radio.value == valueToInsert) {
         valueToInsert = ""
@@ -316,6 +349,7 @@ function save() {
 }
 
 window.onbeforeunload = function(event) {
+    localStorage["sightCheckbox.checked"] = sightCheckbox.checked
     localStorage["highlighterCheckbox.checked"] = highlighterCheckbox.checked
     if (!saveButton.disabled) {
         event.preventDefault()

sudoku.php

@@ -10,24 +10,30 @@
             <h1 class="display-4 mb-3">Sudoku</h1>
         </header>
         <div class='d-flex justify-content-between mb-2'>
-            <div class='radioGroup btn-group'>
+            <div class='btn-group'>
-                <input type='radio' id='inkPenRadio' class='btn-check' name='tool' checked />
+                <input type='radio' id='inkPenRadio' class='btn-check' name='penRadioGroup' checked />
                 <label for='inkPenRadio' class='btn btn-primary' title='Écrire un chiffre'>
                     <i class="bi bi-pen-fill"></i>
                 </label>
-                <input type='radio' id='pencilRadio' class='btn-check' name='tool' />
+                <input type='radio' id='pencilRadio' class='btn-check' name='penRadioGroup' />
                 <label for='pencilRadio' class='btn btn-primary' title='Prendre des notes'>
                     <i class="bi bi-pencil-fill"></i>
                 </label>
-                <input type='radio' id='eraserRadio' class='btn-check' name='tool' '/>
+                <input type='radio' id='eraserRadio' class='btn-check' name='penRadioGroup' />
                 <label for='eraserRadio' class='btn btn-primary' title='Effacer une case'>
                     <i class="bi bi-eraser-fill"></i>
                 </label>
             </div>
-            <input id='highlighterCheckbox' type="checkbox" class='btn-check' onclick='highlight()' />
+            <div class='btn-group'>
+                <input type='checkbox' id='sightCheckbox' class='btn-check' onclick='highlighterCheckbox.checked = false; refreshUI()' />
+                <label for='sightCheckbox' class='btn btn-primary' title='Surligner la ligne, la colonne et la région de la case survolée'>
+                    <i class="bi bi-plus-circle-fill"></i>
+                </label>
+                <input type='checkbox' id='highlighterCheckbox' class='btn-check' onclick='sightCheckbox.checked = false; refreshUI()' />
                 <label for='highlighterCheckbox' class='btn btn-primary' title='Surligner les lignes, colonnes et régions contenant déjà le chiffre sélectionné'>
                     <i class="bi bi-magic"></i>
                 </label>
+            </div>
             <button id="hintButton" type="button" class='btn btn-primary' onclick="showHint()" title="Montrer une case avec une seule possibilité" accesskey="H" disabled="">
                 <i class="bi bi-lightbulb-fill"></i>
             </button>