fixes

app.js

@@ -13,9 +13,9 @@ let penStyle = "ink-pen"
 
 window.onload = function() {
     let rowId = 0
-    for (row of grid.getElementsByTagName('tr')) {
+    for (let row of grid.getElementsByTagName('tr')) {
         let columnId = 0
-        for (box of row.getElementsByTagName('input')) {
+        for (let box of row.getElementsByTagName('input')) {
             let regionId = rowId - rowId%3 + Math.floor(columnId/3)
             if (!box.disabled) {
                 box.onfocus = onfocus
@@ -65,7 +65,7 @@ function onfocus() {
 }
 
 function oninput() {
-    history.push({input: this, value: this.previousValue})
+    history.push({box: this, value: this.previousValue, className: this.className})
     undoButton.disabled = false
     refresh(this)
 }
@@ -73,15 +73,16 @@ function oninput() {
 function undo() {
     if (history.length) {
         previousState = history.pop()
-        previousState.input.value = previousState.value
-        refresh(previousState.input)
+        previousState.box.value = previousState.value
+        previousState.box.className = previousState.className
+        refresh(previousState.box)
         if (history.length < 1) undoButton.disabled = true
     }
 }
 
 function refresh(box) {
-    //box.style.color = colorPicker.value
     box.classList.remove("ink-pen", "pencil")
+    if (box.value.length)
         box.classList.add(penStyle)
 
     box.neighbourhood.concat([box]).forEach(neighbour => {
@@ -94,7 +95,7 @@ function refresh(box) {
     highlightAndTab()
     
     for (neighbour1 of box.neighbourhood) {
-        if (neighbour1.value.length) {
+        if (neighbour1.value.length == 1) {
             for (area of [
                 {name: "région", neighbours: regions[neighbour1.regionId]},
                 {name: "ligne", neighbours: rows[neighbour1.rowId]},
@@ -245,22 +246,23 @@ function usePencil() {
     penStyle = "pencil"
 }
 
-function erasePencil() {
-    for (box of grid.getElementsByClassName("pencil")) {
+function erase(someBoxes) {
+    for (box of someBoxes) {
         box.value = ""
         box.placeholder = ""
         searchCandidatesOf(box)
+        refresh(box)
     }
     enableButtons()
     highlightAndTab()
 }
 
-function eraseAll() {
-    boxes.filter(box => !box.disabled).forEach(box => {
-        box.value = ""
-        box.placeholder = ""
-    })
-    boxes.forEach(searchCandidatesOf)
-    enableButtons()
-    highlightAndTab()
+function erasePencil() {
+    if (confirm("Effacer les chiffres écrits au crayon ?"))
+        erase(grid.getElementsByClassName("pencil"))
+}
+
+function eraseAll() {
+    if (confirm("Effacer tous les chiffres (écrits au crayon et au stylo) ?"))
+        erase(boxes.filter(box => !box.disabled && box.value.length))
 }

style.css

@@ -96,20 +96,20 @@ input::-webkit-calendar-picker-indicator {
     color: white;
     background: #6666ff;
 }
-.grid input.same-value:enabled {
-    background: #ffff33;
-}
 .grid input.forbidden-value:enabled {
     background: #ffff77;
 }
-.grid input.same-value:disabled, button.same-value:enabled {
-    color: #ffff99;
-    background: #00cc66;
+.grid input.same-value:enabled {
+    background: #ffff33;
 }
 .grid input.forbidden-value:disabled {
     color: #ffff99;
     background: #6666ff;
 }
+.grid input.same-value:disabled, button.same-value:enabled {
+    color: #ffff99 !important;
+    background: #00cc66 !important;
+}
 input::placeholder {
     color: #888;
 }
@@ -117,7 +117,10 @@ input::placeholder {
     color: darkblue;
 }
 .grid input.pencil {
-    color: #666;
+    color: #888;
+    font-size: 0.8em;
+    width: 2.8em;
+    height: 2.8em;
 }
 
 .highlight-buttons {
@@ -127,40 +130,40 @@ button, input[type="color"] {
     border: 2px outset #6666ff;
     border-radius: 4px;
     font-size: 1.2em;
-    padding: 2px 9px 5px 9px;
-    margin:  0px 0px 1px 2px;
+    padding: 4px 9px 5px 9px;
+    margin:  0px 1px 1px 1px;
 }
 button:enabled:hover {
     border-width: 1px;
     border-style: outset;
-    padding: 3px 9px 5px 10px;
-    margin:  1px 0px 1px 3px;
+    padding: 5px 9px 5px 10px;
+    margin:  1px 1px 1px 2px;
 }
 button:enabled:active,
 button.pressed:enabled:hover {
     border-width: 3px;
     border-style: inset;
-    padding: 2px 6px 2px 9px;
-    margin:  1px 0px 1px 3px;
+    padding: 4px 6px 2px 9px;
+    margin:  1px 1px 1px 2px;
 }
 button.pressed {
     border: 2px inset #00cc66;
     background: #00cc66;
-    padding: 2px 8px 4px 9px;
-    margin:  1px 0px 0px 3px;
+    padding: 4px 8px 4px 9px;
+    margin:  1px 1px 0px 2px;
 }
 button.pressed:enabled:active {
     border-width: 4px;
     border-style: inset;
-    padding: 2px 4px 0px 9px;
-    margin:  0px 0px 0px 3px;
+    padding: 4px 4px 0px 9px;
+    margin:  0px 1px 0px 2px;
 }
 button:disabled {
     color: #666;
     background: darkgrey;
     border: 1px outset darkgrey;
-    padding: 3px 10px 6px 10px;
-    margin:  0px 0px 1px 2px;
+    padding: 5px 10px 6px 10px;
+    margin:  0px 1px 1px 1px;
 }
 input[type="color"] {
     padding: 0;