Merge branch 'master' of https://git.malingrey.fr/adrien/sudoku

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

@@ -37,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 = ""
             }
@@ -53,9 +55,8 @@ 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 => {
@@ -271,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 = ""
@@ -321,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'>
-            <label for='highlighterCheckbox' class='btn btn-primary' title='Surligner les lignes, colonnes et régions contenant déjà le chiffre sélectionné'>
+                <input type='checkbox' id='sightCheckbox' class='btn-check' onclick='highlighterCheckbox.checked = false; refreshUI()' />
-                <i class="bi bi-magic"></i>
+                <label for='sightCheckbox' class='btn btn-primary' title='Surligner la ligne, la colonne et la région de la case survolée'>
-            </label>
+                    <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>