pencil & css buttons

app.js

@@ -9,6 +9,7 @@ let suggestionTimer= null
 let highlightedValue = ""
 let history = []
 let accessKeyModifiers = "AccessKey+"
+let penStyle = "ink-pen"
 
 window.onload = function() {
     let rowId = 0
@@ -79,7 +80,9 @@ function undo() {
 }
 
 function refresh(box) {
-    box.style.color = colorPicker.value
+    //box.style.color = colorPicker.value
+    box.classList.remove("ink-pen", "pencil")
+    box.classList.add(penStyle)
 
     box.neighbourhood.concat([box]).forEach(neighbour => {
         searchCandidatesOf(neighbour)
@@ -142,8 +145,8 @@ function highlight(value) {
         highlightedValue = value
     }
     for (button of buttons.getElementsByTagName("button")) {
-        if (button.textContent == highlightedValue) button.className = "same-value"
-        else button.className = ""
+        if (button.textContent == highlightedValue) button.classList.add("pressed")
+        else button.classList.remove("pressed")
     }
     highlightAndTab()
     boxes.filter(box => box.value == "" && box.tabIndex == 0)[0].focus()
@@ -153,20 +156,23 @@ function highlightAndTab() {
     if (highlightedValue) {
         boxes.forEach(box => {
             if (box.value == highlightedValue) {
-                box.className = "same-value"
+                box.classList.add("same-value")
                 box.tabIndex = -1
             }
-            else if (box.candidates.has(highlightedValue)) {
-                box.className = ""
+            else { 
+                box.classList.remove("same-value")
+                if (box.candidates.has(highlightedValue)) {
+                    box.classList.remove("forbidden-value")
                     box.tabIndex = 0
                 } else {
-                box.className = "forbidden-value"
+                    box.classList.add("forbidden-value")
                     box.tabIndex = -1
                 }
+            }
         })
     } else {
         boxes.forEach(box => {
-            box.className = ""
+            box.classList.remove("same-value", "forbidden-value")
             box.tabIndex = 0
         })
     }
@@ -198,16 +204,6 @@ function showSuggestion() {
     }
 }
 
-function clearAll() {
-    boxes.filter(box => !box.disabled).forEach(box => {
-        box.value = ""
-        box.placeholder = ""
-    })
-    boxes.forEach(searchCandidatesOf)
-    enableButtons()
-    highlightAndTab()
-}
-
 function oncontextmenu(event) {
     event.preventDefault()
     while (contextMenu.firstChild) contextMenu.firstChild.remove()
@@ -227,7 +223,7 @@ function oncontextmenu(event) {
         } else {
             li = document.createElement("li")
             li.innerText = "Aucun chiffre possible"
-            li.className = "error"
+            li.classList.add("error")
             contextMenu.appendChild(li)
         }
         contextMenu.style.left = `${event.pageX}px`
@@ -236,3 +232,35 @@ function oncontextmenu(event) {
     }
     return false
 }
+
+function useInkPen() {
+    inkPenButton.classList.add("pressed")
+    pencilButton.classList.remove("pressed")
+    penStyle = "ink-pen"
+}
+
+function usePencil() {
+    pencilButton.classList.add("pressed")
+    inkPenButton.classList.remove("pressed")
+    penStyle = "pencil"
+}
+
+function erasePencil() {
+    for (box of grid.getElementsByClassName("pencil")) {
+        box.value = ""
+        box.placeholder = ""
+        searchCandidatesOf(box)
+    }
+    enableButtons()
+    highlightAndTab()
+}
+
+function eraseAll() {
+    boxes.filter(box => !box.disabled).forEach(box => {
+        box.value = ""
+        box.placeholder = ""
+    })
+    boxes.forEach(searchCandidatesOf)
+    enableButtons()
+    highlightAndTab()
+}

game.php

@@ -33,13 +33,14 @@
                 if ($value == UNKNOWN) {
                     $value = "";
                     $disabled = "";
+                    $class = "ink-pen";
                 } else {
                     $disabled = "disabled";
+                    $class = "";
                 }
 ?>
                             <td>
-                                <input type='number' min='1' max='9' step='1' value='<?=$value?>' list='list<?=$row.$column?>' title='[Clic-droit]' <?=$disabled?>/>
-                                <datalist id='list<?=$row.$column?>'></datalist>
+                                <input type='number' min='1' max='9' step='1' value='<?=$value?>' title='Valeurs possibles [Clic-droit]' class="<?=$class?>" <?=$disabled?>/>
                             </td>
 <?php
             }
@@ -59,9 +60,22 @@
 ?>
             </div>
             <div>
-                <button type='button' onclick='clearAll()'>Tout effacer</button>
-                <button id='undoButton' type='button' onclick='undo()' disabled title='Annuler' accesskey='z'>Annuler</button>
-                <input id='colorPicker' type='color' title='Changer de couleur de stylo' value='#00008b'/>
+                <button id='inkPenButton' type='button' onclick='useInkPen()' title='Stylo' class='pressed'>
+                    <img src="img/ink-pen.png" alt='Stylo' width=16 height=16/>
+                </button>
+                <button id='pencilButton' type='button' onclick='usePencil()' title='Crayon'>
+                    <img src="img/pencil.png" alt='Crayon' width=16 height=16/>
+                </button>
+                <button type='button' onclick='erasePencil()' title='Effacer le crayon'>
+                    <img src="img/pencil-eraser.png" alt="Gomme blanche" width=16 height=16/>
+                </button>
+                <button type='button' onclick='eraseAll()' title='Effacer tout'>
+                    <img src="img/ink-eraser.png" alt="Gomme bleue" width=16 height=16/>
+                </button>
+                <button id='undoButton' type='button' onclick='undo()' disabled title='Annuler' accesskey='z'>
+                    <img src="img/undo.png" alt="Annuler" width=16 height=16/>
+                </button>
+                <!--<input id='colorPicker' type='color' title='Changer de couleur de stylo' value='#00008b'/> -->
             </div>
         </form>
         <section>

style.css

@@ -70,7 +70,7 @@ section, div, footer {
     border-right: 1px solid black;
 }
 
-input[type=number] {
+.grid input {
     width: 1.5em;
     height: 1.5em;
     font-size: 1.5em;
@@ -88,53 +88,77 @@ input::-webkit-inner-spin-button {
 input::-webkit-calendar-picker-indicator {
     display: none;
 }
-input[type=number]:enabled {
-    color: darkblue;
+.grid input:enabled {
     background: white;
 }
-input[type=number]:disabled, button:enabled {
+.grid input:disabled, button:enabled {
     color: white;
     background: #6666ff;
 }
-input[type=number].same-value:enabled {
-    color: #009973 !important;
-    background: #66ffd9 !important;
+.grid input.same-value:enabled {
+    background: #ffff33;
 }
-input[type=number].forbidden-value:enabled {
-    background: #b3ffda !important;
+.grid input.forbidden-value:enabled {
+    background: #ffff77;
 }
-input[type=number].same-value, button.same-value:enabled {
-    color: white !important;
-    background: #00e6ac !important;
+.grid input.same-value:disabled, button.same-value:enabled {
+    color: #ffff99;
+    background: #00cc66;
 }
-input[type=number].forbidden-value:disabled {
-    background: #6288ea !important;
+.grid input.forbidden-value:disabled {
+    color: #ffff99;
+    background: #6666ff;
 }
 input::placeholder {
     color: #888;
 }
+.grid input.ink-pen {
+    color: darkblue;
+}
+.grid input.pencil {
+    color: #666;
+}
 
 .highlight-buttons {
-    column-gap: 0.3em;
+    column-gap: 2px;
 }
 button, input[type="color"] {
     border: 2px outset #6666ff;
     border-radius: 4px;
-    font-size: 1em;
-    margin: 0 0 1px 0;
+    font-size: 1.2em;
+    padding: 2px 9px 5px 9px;
+    margin:  0px 0px 1px 2px;
 }
-button {
-    padding: 0 8px 2px 8px;
+button:enabled:hover {
+    border-width: 1px;
+    border-style: outset;
+    padding: 3px 9px 5px 10px;
+    margin:  1px 0px 1px 3px;
 }
-button.same-value:enabled {
-    border: 2px inset #00e6ac;
-    padding: 2px 7px 0 9px;
-    margin: 1px 0 0 0;
+button:enabled:active,
+button.pressed:enabled:hover {
+    border-width: 3px;
+    border-style: inset;
+    padding: 2px 6px 2px 9px;
+    margin:  1px 0px 1px 3px;
+}
+button.pressed {
+    border: 2px inset #00cc66;
+    background: #00cc66;
+    padding: 2px 8px 4px 9px;
+    margin:  1px 0px 0px 3px;
+}
+button.pressed:enabled:active {
+    border-width: 4px;
+    border-style: inset;
+    padding: 2px 4px 0px 9px;
+    margin:  0px 0px 0px 3px;
 }
 button:disabled {
     color: lightgrey;
     background: darkgrey;
-    border: 2px outset darkgrey;
+    border: 1px outset darkgrey;
+    padding: 1px 9px 3px 9px;
 }
 input[type="color"] {
     padding: 0;
@@ -154,8 +178,11 @@ a {
     font-family: sans-serif;
     background: #EEE;
     color: #333;
-    border-radius: 3px;
+    border-top-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
     padding: 0;
+    margin: 0;
 }
 
 .context-menu li {