style cursor on tool selected

app.js

@@ -10,7 +10,6 @@ let suggestionTimer= null
 let selectedValue = ""
 let history = []
 let accessKeyModifiers = "AccessKey+"
-let penStyle = "ink-pen"
 
 window.onload = function() {
     let rowId = 0
@@ -61,7 +60,7 @@ window.onload = function() {
         node.title += " [" + (node.accessKeyLabel || accessKeyModifiers + node.accessKey) + "]"
     }
     
-    enableButtons()
+    enableRadios()
     highlightAndTab()
     
     document.onclick = function (event) {
@@ -93,7 +92,7 @@ function searchCandidatesOf(box) {
 
 function onclick() {
     if (selectedValue) {
-        if (penStyle == "ink-pen") {
+        if (inkPenRadio.checked) {
             this.value = selectedValue
         } else {
             if (!this.value.includes(selectedValue))
@@ -104,13 +103,18 @@ function onclick() {
 }
 
 function onfocus() {
-    if (penStyle == "pencil" && this.value == "") {
+    if (pencilRadio.checked && this.value == "") {
         this.value = this.placeholder
         this.placeholder = ""
         this.classList.add("pencil")
     } else {
         this.select()
     }
+    if (selectedValue) {
+        this.style.caretColor = "transparent"
+    } else {
+        this.style.caretColor = "auto"
+    }
 }
 
 function oninput() {
@@ -118,7 +122,7 @@ function oninput() {
     this.previousValue = this.value
     this.previousPlaceholder = this.placeholder
     undoButton.disabled = false
-    if (penStyle != "pencil") {
+    if (inkPenRadio.checked) {
         refresh(this)
     }
 }
@@ -142,7 +146,7 @@ function refresh(box) {
         neighbour.required = false
     })
     
-    enableButtons()
+    enableRadios()
     highlightAndTab()
     
     for (neighbour1 of box.neighbourhood) {
@@ -187,8 +191,8 @@ function onblur() {
     }
 }
 
-function enableButtons() {
+function enableRadios() {
-    for (radio of radioValues.getElementsByTagName("input")) {
+    for (radio of selectValueRadioGroup.getElementsByTagName("input")) {
         if (boxes.filter(box => box.value == "").some(box => box.candidates.has(radio.value))) {
             radio.disabled = false
             if (radio.previousTitle) {
@@ -213,7 +217,6 @@ function highlight(radio) {
         selectedValue = radio.value
     }
     highlightAndTab()
-    boxes.filter(box => box.value == "" && box.tabIndex == 0)[0].focus()
 }
 
 function highlightAndTab() {
@@ -225,21 +228,29 @@ function highlightAndTab() {
             }
             else { 
                 box.classList.remove("same-value")
-                if (box.candidates.has(selectedValue)) {
+                if (box.candidates.has(selectedValue) && !box.disabled) {
-                    box.classList.remove("forbidden-value")
+                    box.classList.add("allowed")
+                    box.classList.remove("forbidden")
                     box.tabIndex = 0
                 } else {
-                    box.classList.add("forbidden-value")
+                    box.classList.add("forbidden")
+                    box.classList.remove("allowed")
                     box.tabIndex = -1
                 }
             }
         })
     } else {
         boxes.forEach(box => {
-            box.classList.remove("same-value", "forbidden-value")
+            box.classList.remove("same-value", "forbidden")
+            if (selectedValue && !box.disabled) {
+                box.classList.add("allowed")
+            } else {
+                box.classList.remove("allowed")
+            }
             box.tabIndex = 0
         })
     }
+    boxes.filter(box => box.value == "" && box.tabIndex == 0)[0].focus()
 }
 
 function shuffle(iterable) {
@@ -304,7 +315,7 @@ function erase(someBoxes) {
         searchCandidatesOf(box)
         refresh(box)
     }
-    enableButtons()
+    enableRadios()
     highlightAndTab()
 }
 
@@ -325,7 +336,7 @@ function eraseAll() {
             box.required = false
         })
         boxes.forEach(searchCandidatesOf)
-        enableButtons()
+        enableRadios()
         highlightAndTab()
     }
 }

style.css

@@ -89,7 +89,6 @@ div {
     padding: 0;
     text-align: center;
     transition: background 0.5s;
-    caret-color: transparent;
     -moz-appearance: textfield;
 }
 input::-webkit-outer-spin-button,
@@ -110,19 +109,25 @@ button:enabled,
     color: white;
     background: #6666ff;
 }
-.grid input.forbidden-value:enabled {
+.grid input.allowed:enabled {
+    cursor: copy;
+}
+.grid input.forbidden {
+    cursor: not-allowed;
+}
+.grid input.forbidden:enabled {
     background: #ffffaa;
 }
 .grid input.same-value:enabled {
     background: #ffff33;
 }
-.grid input.forbidden-value:disabled {
+.grid input.forbidden:disabled {
     color: #ffffaa;
     background: #6666ff;
 }
 .grid input.same-value:disabled,
 button.same-value:enabled,
-.tools input:checked+label {
+.tools input:enabled:checked+label {
     color: #ffffaa !important;
     background: #00b359 !important;
 }
@@ -155,15 +160,13 @@ button:enabled:hover,
     padding: 5px 9px 5px 10px;
     margin:  1px 1px 1px 2px;
 }
-button.pressed:enabled:hover,
 .tools input:enabled:checked:hover+label {
     border-width: 3px;
     border-style: inset;
     padding: 4px 6px 2px 9px;
     margin:  1px 1px 1px 2px;
 }
-button.pressed,
+.tools input:enabled:checked+label {
-.tools input:checked+label {
     border: 2px inset #00b359;
     background: #00b359;
     padding: 4px 8px 4px 9px;

sudoku.php

@@ -73,10 +73,10 @@
             </table>
         </form>
         <section class='tools'>
-            <div id='radioValues' class='radioValues'>
+            <div id='selectValueRadioGroup' class='selectValueRadioGroup'>
 <?php
         for($value=1; $value<=9; $value++) {
-            echo "                <input type='radio' id='radioValue$value' value='$value' name='radioValues' onclick='highlight(this)' accesskey='$value'/><label for='radioValue$value' title='Écrire un $value'>$value</label>\n";
+            echo "                <input type='radio' id='selectValueRadio$value' value='$value' name='selectValueRadioGroup' onclick='highlight(this)' accesskey='$value'/><label for='selectValueRadio$value' title='Écrire un $value'>$value</label>\n";
         }
 ?>
             </div>