diff --git a/app.js b/app.js index 17bcf73..4f7c645 100644 --- a/app.js +++ b/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,16 +73,17 @@ 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") - box.classList.add(penStyle) + if (box.value.length) + box.classList.add(penStyle) box.neighbourhood.concat([box]).forEach(neighbour => { searchCandidatesOf(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)) } diff --git a/style.css b/style.css index 4d372df..18c92e3 100644 --- a/style.css +++ b/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;