cursors!

app.js

@@ -6,7 +6,7 @@ let boxes = []
 let rows = Array.from(Array(9), x => [])
 let columns = Array.from(Array(9), x => [])
 let regions = Array.from(Array(9), x => [])
-let suggestionTimer= null
+let suggestionTimer = null
 let valueToInsert = ""
 let history = []
 let accessKeyModifiers = "AccessKey+"
@@ -16,7 +16,7 @@ function shuffle(iterable) {
     if (array.length > 1) {
         let i, j, tmp
         for (i = array.length - 1; i > 0; i--) {
-            j = Math.floor(Math.random() * (i+1))
+            j = Math.floor(Math.random() * (i + 1))
             tmp = array[i]
             array[i] = array[j]
             array[j] = tmp
@@ -25,17 +25,18 @@ function shuffle(iterable) {
     return array
 }
 
-window.onload = function() {
+window.onload = function () {
     let rowId = 0
     for (let row of grid.getElementsByTagName('tr')) {
         let columnId = 0
         for (let box of row.getElementsByTagName('input')) {
-            let regionId = rowId - rowId%3 + Math.floor(columnId/3)
+            let regionId = rowId - rowId % 3 + Math.floor(columnId / 3)
             if (!box.disabled) {
                 box.onfocus = onfocus
                 box.oninput = oninput
                 box.onblur = onblur
                 box.onclick = onclick
+                box.previousValue = ""
                 box.previousPlaceholder = ""
             }
             box.oncontextmenu = oncontextmenu
@@ -51,7 +52,7 @@ window.onload = function() {
         rowId++
     }
 
-    let savedGame = localStorage[location.href]
+    const savedGame = localStorage[location.href]
     if (savedGame) {
         boxes.forEach((box, i) => {
             if (!box.disabled && savedGame[i] != UNKNOWN) {
@@ -70,17 +71,11 @@ window.onload = function() {
 
     if (/Win/.test(navigator.platform) || /Linux/.test(navigator.platform)) accessKeyModifiers = "Alt+Maj+"
     else if (/Mac/.test(navigator.platform)) accessKeyModifiers = "⌃⌥"
-    for(node of document.querySelectorAll("*[accesskey]")) {
+    for (node of document.querySelectorAll("*[accesskey]")) {
         node.title += " [" + (node.accessKeyLabel || accessKeyModifiers + node.accessKey) + "]"
     }
 
-    enableRadios()
+    refreshUI()
-    highlight()
-    
-    document.onclick = function (event) {
-        contextMenu.style.display = "none"
-    }
-    suggestionTimer = setTimeout(showSuggestion, SUGESTION_DELAY)
 
     if ("serviceWorker" in navigator) {
         navigator.serviceWorker.register("service-worker.js")
@@ -104,54 +99,43 @@ function searchCandidatesOf(box) {
     }
 }
 
-function onclick() {
-    if (valueToInsert) {
-        if (inkPenRadio.checked) {
-            this.value = valueToInsert
-        } else {
-            if (!this.value.includes(valueToInsert))
-                this.value += valueToInsert
-        }
-        oninput.apply(this)
-    }
-}
-
 function onfocus() {
-    if (pencilRadio.checked && this.value == "") {
+    if (pencilRadio.checked) {
         this.value = this.placeholder
-        this.placeholder = ""
         this.classList.add("pencil")
     } else {
         this.select()
     }
-    if (valueToInsert) {
+    this.style.caretColor = valueToInsert? "transparent": "auto"
-        this.style.caretColor = "transparent"
+}
+
+function onclick() {
+    if (inkPenRadio.checked) {
+        this.value = valueToInsert
+    } else if (pencilRadio.checked) {
+        this.value += valueToInsert
     } else {
-        this.style.caretColor = "auto"
+        this.value = ""
+        this.placeholder = ""
     }
+    this.oninput()
 }
 
 function oninput() {
-    history.push({box: this, value: this.previousValue, placeholder: this.previousPlaceholder})
+    history.push({ box: this, value: this.previousValue, placeholder: this.previousPlaceholder })
+    undoButton.disabled = false
+    if (pencilRadio.checked) {
+        this.value = Array.from(new Set(this.value)).sort().join("")
+        this.previousValue = ""
+        this.previousPlaceholder = this.value
+    } else {
         this.previousValue = this.value
         this.previousPlaceholder = this.placeholder
-    undoButton.disabled = false
+        refreshBox(this)
-    if (inkPenRadio.checked) {
-        refresh(this)
     }
 }
 
-function undo() {
+function refreshBox(box) {
-    if (history.length) {
-        previousState = history.pop()
-        previousState.box.value = previousState.value
-        previousState.box.placeholder = previousState.placeholder
-        refresh(previousState.box)
-        if (history.length < 1) undoButton.disabled = true
-    }
-}
-
-function refresh(box) {
     localStorage[location.href] = boxes.map(box => box.value || ".").join("")
 
     box.neighbourhood.concat([box]).forEach(neighbour => {
@@ -160,15 +144,14 @@ function refresh(box) {
         neighbour.required = false
     })
 
-    enableRadios()
+    refreshUI()
-    highlight()
 
     for (neighbour1 of box.neighbourhood) {
         if (neighbour1.value.length == 1) {
             for (area of [
-                {name: "région", neighbours: regions[neighbour1.regionId]},
+                { name: "région", neighbours: regions[neighbour1.regionId] },
-                {name: "ligne", neighbours: rows[neighbour1.rowId]},
+                { name: "ligne", neighbours: rows[neighbour1.rowId] },
-                {name: "colonne", neighbours: columns[neighbour1.columnId]},
+                { name: "colonne", neighbours: columns[neighbour1.columnId] },
             ])
                 for (neighbour2 of area.neighbours)
                     if (neighbour2 != neighbour1 && neighbour2.value == neighbour1.value) {
@@ -185,48 +168,44 @@ function refresh(box) {
     }
 
     if (box.form.checkValidity()) { // Correct grid
-        if (boxes.filter(box => box.value == "").length == 0) {
+        if (boxes.filter(box => box.value == "").length == 0)
-            setTimeout(() => alert(`Bravo ! Vous avez résolu la grille.`), 0)
+            setTimeout(() => alert(`Bravo ! Vous avez résolu la grille.`), 500)
-        } else {
-            boxes.filter(box => box.value == "" && box.tabIndex == 0)[0].focus()
-            if (suggestionTimer) clearTimeout(suggestionTimer)
-            suggestionTimer = setTimeout(showSuggestion, SUGESTION_DELAY)
-        }
     } else { // Errors on grid
         box.form.reportValidity()
         box.select()
     }
 }
 
-function enableRadios() {
+function refreshUI() {
     for (radio of insertRadioGroup.getElementsByTagName("input")) {
+        const label = radio.nextElementSibling
         if (boxes.filter(box => box.value == "").some(box => box.candidates.has(radio.value))) {
             radio.disabled = false
             if (radio.previousTitle) {
-                radio.title = radio.previousTitle
+                label.title = radio.previousTitle
-                radio.previousTitle = null
+                label.previousTitle = null
             }
         } else {
             radio.disabled = true
-            radio.previousTitle = radio.title
+            label.previousTitle = label.title
-            radio.title = "Tous les " + radio.value + " sont posés"
+            label.title = `Tous les ${radio.value} sont posés`
             if (valueToInsert == radio.value) valueToInsert = ""
         }
     }
-}
 
-function insert(radio) {
-    if (radio.value == valueToInsert) {
-        valueToInsert = ""
-        radio.checked = false
-    } else {
-        valueToInsert = radio.value
-    }
     highlight()
+
+    boxes.filter(box => !box.disabled).forEach(box => {
+        if (!box.value && box.candidates.size == 1) box.classList.add("one-candidate")
+        else box.classList.remove("one-candidate")
+    })
+    if (suggestionTimer) clearTimeout(suggestionTimer)
+    suggestionTimer = setTimeout(showSuggestion, SUGESTION_DELAY)
 }
 
 function highlight() {
-    if (highlighterCheckbox.checked && valueToInsert) {
+    if (valueToInsert) {
+        if (highlighterCheckbox.checked) {
             boxes.forEach(box => {
                 if (box.value == valueToInsert) {
                     box.classList.add("same-value")
@@ -235,27 +214,31 @@ function highlight() {
                 else {
                     box.classList.remove("same-value")
                     if (box.candidates.has(valueToInsert) && !box.disabled) {
-                    box.classList.add("allowed")
                         box.classList.remove("forbidden")
                         box.tabIndex = 0
                     } else {
                         box.classList.add("forbidden")
-                    box.classList.remove("allowed")
                         box.tabIndex = -1
                     }
                 }
             })
         } else {
             boxes.forEach(box => {
-            box.classList.remove("same-value", "allowed", "forbidden")
+                box.classList.remove("same-value")
                 if (box.disabled) {
                     box.classList.add("forbidden")
-            } else if (valueToInsert) {
+                } else {
-                box.classList.add("allowed")
+                    box.classList.remove("forbidden")
                 }
                 box.tabIndex = 0
             })
         }
+    } else {
+        boxes.forEach(box => {
+            box.classList.remove("same-value", "forbidden")
+            box.tabIndex = 0
+        })
+    }
 }
 
 function onblur() {
@@ -266,10 +249,47 @@ function onblur() {
     }
 }
 
+function insert(radio) {
+    if (radio.value == valueToInsert) {
+        valueToInsert = ""
+        radio.checked = false
+    } else {
+        valueToInsert = radio.value
+    }
+    highlight()
+}
+
+function undo() {
+    if (history.length) {
+        const previousState = history.pop()
+        previousState.box.value = previousState.value
+        previousState.box.placeholder = previousState.placeholder
+        refreshBox(previousState.box)
+        if (history.length < 1) undoButton.disabled = true
+    }
+}
+
+function restart() {
+    if (confirm("Effacer toutes les cases ?")) {
+        boxes.filter(box => !box.disabled).forEach(box => {
+            box.value = ""
+            box.previousValue = ""
+            box.placeholder = ""
+            box.previousPlaceholder = ""
+            box.required = false
+            box.setCustomValidity("")
+        })
+        let history = []
+        undoButton.disabled = true
+        boxes.forEach(searchCandidatesOf)
+        refreshUI()
+    }
+}
+
 function showSuggestion() {
-    const emptyBoxes = boxes.filter(box => box.value == "" && box.candidates.size == 1)
+    const easyBoxes = boxes.filter(box => box.value == "" && box.candidates.size == 1)
-    if (emptyBoxes.length) {
+    if (easyBoxes.length) {
-        shuffle(emptyBoxes)[0].placeholder = "💡"
+        shuffle(easyBoxes)[0].placeholder = "💡"
     } else {
         clearTimeout(suggestionTimer)
         suggestionTimer = null
@@ -281,15 +301,15 @@ function oncontextmenu(event) {
     while (contextMenu.firstChild) contextMenu.firstChild.remove()
     const box = event.target
     if (box.candidates.size) {
-        candidatesArray = Array.from(box.candidates).sort().forEach(candidate => {
+        Array.from(box.candidates).sort().forEach(candidate => {
             li = document.createElement("li")
             li.innerText = candidate
             li.onclick = function (event) {
                 contextMenu.style.display = "none"
-                onfocus.apply(box)
+                box.onfocus()
                 box.value = event.target.innerText
-                oninput.apply(box)
+                box.oninput()
-                onblur.apply(box)
+                box.onblur()
             }
             contextMenu.appendChild(li)
         })
@@ -305,24 +325,13 @@ function oncontextmenu(event) {
     return false
 }
 
-function erasePencil() {
+document.onclick = function (event) {
-    if (confirm("Effacer les chiffres écrits au crayon ?")) {
+    contextMenu.style.display = "none"
-        boxes.filter(box => !box.disabled).forEach(box => {
-            box.placeholder = ""
-        })
-    }
 }
 
-function eraseAll() {
+document.onkeydown = function(event) {
-    if (confirm("Effacer tous les chiffres écrits au crayon et au stylo ?")) {
+    if (event.key == "Escape") {
-        boxes.filter(box => !box.disabled).forEach(box => {
+        event.preventDefault()
-            box.value = ""
+        contextMenu.style.display = "none"
-            box.placeholder = ""
-            box.setCustomValidity("")
-            box.required = false
-        })
-        boxes.forEach(searchCandidatesOf)
-        enableRadios()
-        highlight()
     }
 }

classes.php

@@ -179,7 +179,7 @@
             $str = "";
             foreach($this->rows as $row) {
                 forEach($row as $box) {
-                    $str .= ($box->value? $box->value : UNKNOWN);
+                    $str .= $box->value;
                 }
             }
             return $str;

img/eraser.svg

@@ -0,0 +1 @@
+<svg id="Capa_1" enable-background="new 0 0 512 512" height="24" viewBox="0 0 512 512" width="24" xmlns="http://www.w3.org/2000/svg"><g><path d="m214.28 498.762c4.098 0 8.029-1.628 10.927-4.526l278.144-278.144c11.398-11.398 11.398-29.879 0-41.277l-152.928-152.928c-11.398-11.398-29.878-11.398-41.277 0l-300.597 300.598c-11.398 11.398-11.398 29.878 0 41.277l130.474 130.474c2.898 2.898 6.828 4.526 10.927 4.526z" fill="#d3e1f5"/><path d="m275.208 386.418-78.91 78.91c-2.898 2.898-6.828 4.526-10.927 4.526h-64.331c-4.098 0-8.029-1.628-10.927-4.526l28.909 28.909c2.898 2.898 6.829 4.526 10.927 4.526h64.331c4.098 0 8.029-1.628 10.927-4.526l78.91-78.91z" fill="#c0d6f2"/><path d="m505.059 176.523-156.344-156.344c-10.455-10.455-28.935-8.925-41.277 3.417l-228.75 228.75 194.205 194.204 228.75-228.75c12.341-12.342 13.871-30.822 3.416-41.277z" fill="#0473ce"/><path d="m187.955 245.061 134.545-134.545c4.023-4.023 10.546-4.023 14.569 0l77.653 77.653c4.023 4.023 4.023 10.546 0 14.569l-134.545 134.545c-4.023 4.023-10.546 4.023-14.569 0l-77.653-77.653c-4.023-4.023-4.023-10.546 0-14.569z" fill="#0055a3"/><path d="m505.059 176.523-28.908-28.909c10.455 10.455 8.925 28.935-3.417 41.277l-228.75 228.75 28.909 28.909 228.75-228.75c12.341-12.342 13.871-30.822 3.416-41.277z" fill="#0067c5"/></g></svg>

img/ink-eraser.svg

@@ -1,43 +0,0 @@
-<?xml version="1.0" encoding="iso-8859-1"?>
-<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
-<path style="fill:#E06B34;" d="M497.559,163.289L368.481,34.211c-19.253-19.253-50.47-19.253-69.723,0L14.44,318.529
-	c-19.253,19.253-19.253,50.47,0,69.723l103.975,103.975h119.928l259.216-259.216C516.813,213.759,516.813,182.542,497.559,163.289z"
-	/>
-<path style="fill:#D1393C;;" d="M497.56,163.289L433.021,98.75L78.979,452.792l39.436,39.436h119.928l259.216-259.216
-	C516.813,213.759,516.813,182.542,497.56,163.289z"/>
-<path style="fill:#A8EAEF;" d="M14.44,318.529c-19.253,19.253-19.253,50.47,0,69.723l103.975,103.975h119.928L355.4,375.171
-	L156.599,176.37L14.44,318.529z"/>
-<polygon style="fill:#80CDD8" points="78.979,452.792 118.415,492.229 238.343,492.229 355.4,375.171 255.999,275.771 "/>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-</svg>

img/ink-pen.svg

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="iso-8859-1"?>
 <!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 511.989 511.989" style="enable-background:new 0 0 511.989 511.989;" xml:space="preserve">
+	 viewBox="0 0 511.989 511.989" style="enable-background:new 0 0 511.989 511.989;" xml:space="preserve"  width="24" height="24">
 <rect x="408.399" y="26.854" transform="matrix(-0.7071 0.7071 -0.7071 -0.7071 819.7593 -231.0359)" style="fill:#9EC8E8;" width="98.659" height="54.811"/>
 <polygon style="fill:#082947;" points="430.604,174.402 186.029,418.976 124.017,372.468 376.343,120.141 "/>
 <polygon style="fill:#274B6D;" points="384.094,127.892 131.769,380.219 93.012,325.958 337.586,81.384 "/>

img/pencil-eraser.svg

@@ -1,43 +0,0 @@
-<?xml version="1.0" encoding="iso-8859-1"?>
-<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
-<path style="fill:#A8EAEF;" d="M497.559,163.289L368.481,34.211c-19.253-19.253-50.47-19.253-69.723,0L14.44,318.529
-	c-19.253,19.253-19.253,50.47,0,69.723l103.975,103.975h119.928l259.216-259.216C516.813,213.759,516.813,182.542,497.559,163.289z"
-	/>
-<path style="fill:#80CDD8;" d="M497.56,163.289L433.021,98.75L78.979,452.792l39.436,39.436h119.928l259.216-259.216
-	C516.813,213.759,516.813,182.542,497.56,163.289z"/>
-<path style="fill:#E06B34;" d="M14.44,318.529c-19.253,19.253-19.253,50.47,0,69.723l103.975,103.975h119.928L355.4,375.171
-	L156.599,176.37L14.44,318.529z"/>
-<polygon style="fill:#D1393C;" points="78.979,452.792 118.415,492.229 238.343,492.229 355.4,375.171 255.999,275.771 "/>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-</svg>

img/pencil.svg

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="iso-8859-1"?>
 <!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"  width="24" height="24">
 <polygon style="fill:#FF9D49;" points="393.29,213.665 142.441,464.524 87.044,424.954 345.817,150.364 "/>
 <polygon style="fill:#FFCC75;" points="353.73,158.277 87.044,424.954 47.473,369.557 298.333,118.708 "/>
 <polygon style="fill:#BD1515;" points="512,94.965 440.78,166.185 377.475,118.708 464.522,47.486 "/>

img/restart.svg

@@ -0,0 +1,55 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="574.859px" height="574.86px" viewBox="0 0 574.859 574.86" style="enable-background:new 0 0 574.859 574.86;"
+	 xml:space="preserve">
+<g>
+	<path d="M181.688,521.185V353.841H19.125v167.344c0,10.566,13.34,23.906,23.906,23.906h124.312
+		C177.91,545.091,181.688,531.751,181.688,521.185z M66.938,502.06c0,2.64-2.142,4.781-4.781,4.781s-4.781-2.142-4.781-4.781
+		V377.748c0-2.64,2.142-4.781,4.781-4.781s4.781,2.142,4.781,4.781V502.06z M105.188,502.06c0,2.64-2.142,4.781-4.781,4.781
+		s-4.781-2.142-4.781-4.781V377.748c0-2.64,2.142-4.781,4.781-4.781s4.781,2.142,4.781,4.781V502.06z M143.438,502.06
+		c0,2.64-2.142,4.781-4.781,4.781s-4.781-2.142-4.781-4.781V377.748c0-2.64,2.142-4.781,4.781-4.781s4.781,2.142,4.781,4.781V502.06
+		z"/>
+	<path d="M19.125,334.716h162.562v-19.125h19.125v-19.125h-57.375c0-10.566-6.828-19.125-15.243-19.125H77.399
+		c-8.415,0-15.243,8.559-15.243,19.125H0v19.125h19.125V334.716z"/>
+	<path d="M357.007,191.556C370.968,329.811,243.892,542.08,243.892,542.08c145.235-78.212,169.189-207.363,169.189-207.363
+		c42.333,66.479,44.475,228.305,44.475,228.305c80.995-194.109,0-377.049,0-377.049l117.304,48.874
+		c-19.546-74.014-141.047-125.68-141.047-125.68c-110.322,50.27-249.974,44.686-249.974,44.686
+		C259.249,226.469,357.007,191.556,357.007,191.556z"/>
+	<circle cx="369.782" cy="55.128" r="43.29"/>
+	<path d="M94.43,229.529c5.977-2.391,27.492-13.148,28.764,0c1.271,13.148,11.876,9.562,19.048,0s3.586-25.102,11.953-23.906
+		s15.539-10.758,17.93-21.735c2.391-10.978-22.711-18.905-33.469-21.458s-20.32,13.321-27.492,13.321s-17.93-20.33-25.102-10.768
+		s-11.953,40.641-11.953,40.641c-10.758-5.977-21.516,7.172-25.102,16.734S88.453,231.919,94.43,229.529z"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

img/undo.svg

@@ -1 +1,46 @@
-<svg height="511pt" viewBox="1 -55 511.99899 511" width="511pt" xmlns="http://www.w3.org/2000/svg"><path d="m349.703125 77.675781h-225.726563v-77.175781l-123.976562 123.980469 123.976562 123.976562v-79.765625h225.726563c39.304687 0 71.28125 31.976563 71.28125 71.277344 0 39.304688-31.976563 71.28125-71.28125 71.28125h-257.425781v91.015625h257.425781c89.492187 0 162.296875-72.804687 162.296875-162.296875 0-89.488281-72.804688-162.292969-162.296875-162.292969zm0 0" fill="#fb4c2e"/><path d="m349.703125 77.675781h-84.410156v91.015625h84.410156c39.304687 0 71.28125 31.976563 71.28125 71.277344 0 39.304688-31.976563 71.28125-71.28125 71.28125h-84.410156v91.015625h84.410156c89.492187 0 162.296875-72.804687 162.296875-162.296875 0-89.488281-72.804688-162.292969-162.296875-162.292969zm0 0" fill="#de1617"/></svg>
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="299.021px" height="299.021px" viewBox="0 0 299.021 299.021" style="enable-background:new 0 0 299.021 299.021;"
+	 xml:space="preserve">
+<g>
+	<g>
+		<path d="M292.866,254.432c-2.288,0-4.443-1.285-5.5-3.399c-0.354-0.684-28.541-52.949-146.169-54.727v51.977
+			c0,2.342-1.333,4.48-3.432,5.513c-2.096,1.033-4.594,0.793-6.461-0.63L2.417,154.392C0.898,153.227,0,151.425,0,149.516
+			c0-1.919,0.898-3.72,2.417-4.888l128.893-98.77c1.87-1.426,4.365-1.667,6.461-0.639c2.099,1.026,3.432,3.173,3.432,5.509v54.776
+			c3.111-0.198,7.164-0.37,11.947-0.37c43.861,0,145.871,13.952,145.871,143.136c0,2.858-1.964,5.344-4.75,5.993
+			C293.802,254.384,293.34,254.432,292.866,254.432z"/>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

style.css

@@ -10,27 +10,27 @@ h1 {
 }
 
 section, div, footer {
-    display: flex;
-    flex-wrap: wrap;
     align-items: center;
-    row-gap: 0.5rem;
+    align-items: center;
     justify-content: center;
     text-align: center;
-    column-gap: 0.3rem;
+    margin: 0.8rem 0;
-}
-
-section, footer {
-    margin: 0.8rem auto;
 }
 
 div {
-    margin: 0 auto;
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 0.5rem;
+    column-gap: 0.3rem;
+    margin: 0.5rem auto;
 }
 
 .grid {
     border-spacing: 0;
     border: 1px solid black;
     border-radius: 6px;
+    margin: auto;
+    cursor: url(img/ink-pen.svg) 2 22, auto;
 }
 .grid td, tr {
     padding: 0;
@@ -99,21 +99,26 @@ input::-webkit-inner-spin-button {
 input::-webkit-calendar-picker-indicator {
     display: none;
 }
-.grid input:enabled {
+.grid input:enabled{
     background: white;
     color: darkblue;
+    cursor: inherit;
 }
-.grid input:disabled,
+.grid input.pencil,
-button:enabled,
+.grid input::placeholder {
-.tools input+label {
+    color: #666 !important;
+    font-size: 0.9rem !important;
+    text-align: bottom;
+    height: 2.2rem;
+    padding: 0.3rem 0 0 0;
+}
+.grid input:disabled {
     color: white;
     background: #6666ff;
 }
-.grid input.allowed:enabled {
+.grid input:disabled,
-    cursor: copy;
-}
 .grid input.forbidden {
-    cursor: not-allowed;
+    cursor: not-allowed !important;
 }
 .grid input.forbidden:enabled {
     background: #ffffaa;
@@ -126,76 +131,78 @@ button:enabled,
     background: #6666ff;
 }
 .grid input.same-value:disabled,
-button.same-value:enabled,
+.tools button.same-value:enabled,
 .tools input:enabled:checked+label {
     color: #ffffaa !important;
     background: #00b359 !important;
 }
-.grid input.pencil, input::placeholder {
+.grid input.one-candidate {
-    color: #888 !important;
+    cursor: help !important;
-    font-size: 1rem !important;
-    width: 2.5rem !important;
-    height: 2.5rem !important;
 }
 
+.tools button,
+.tools input+label {
+    color: white;
+    text-shadow: -1px -1px #5b6c9e;
+    background: #8ca6f2;
+    border: 2px outset #8ca6f2;
+    border-radius: 4px;
+    font-size: 1.3rem;
+    min-width:20px;
+    padding: 4px 5px 5px 5px;
+    margin:  0px 1px 1px 1px;
+    cursor: pointer;
+}
+.tools img {
+    display: block;
+    width: 24px;
+    height: 24px;
+}
 .tools input {
     display:none;
 }
-button,
+.tools button:enabled:hover,
-.tools input+label {
-    border: 2px outset #6666ff;
-    border-radius: 4px;
-    font-size: 1.3rem;
-    padding: 4px 9px 5px 9px;
-    margin:  0px 1px 1px 1px;
-}
-img {
-    width: 16px;
-    height: 16px;
-}
-button:enabled:hover,
 .tools input:enabled:hover+label {
     border-width: 1px;
     border-style: outset;
-    padding: 5px 9px 5px 10px;
+    padding: 5px 5px 5px 6px;
     margin:  1px 1px 1px 2px;
 }
 .tools input:enabled:checked:hover+label {
     border-width: 3px;
     border-style: inset;
-    padding: 4px 6px 2px 9px;
+    padding: 4px 2px 2px 5px;
     margin:  1px 1px 1px 2px;
 }
 .tools input:enabled:checked+label {
+    text-shadow: -1px -1px #005f2f;
     border: 2px inset #00b359;
     background: #00b359;
-    padding: 4px 8px 4px 9px;
+    padding: 4px 4px 4px 5px;
     margin:  1px 1px 0px 2px;
 }
-button:enabled:active,
+.tools button:enabled:active,
 .tools input:enabled:active+label {
     border-width: 4px !important;
     border-style: inset !important;
-    padding: 4px 4px 0px 9px !important;
+    padding: 4px 0px 0px 5px !important;
     margin:  0px 1px 0px 2px !important;
 }
-button:disabled,
+.tools button:disabled,
 .tools input:disabled+label {
-    color: #666;
+    text-shadow: -1px -1px #555;
+    color: #ccc;
     background: darkgrey;
     border: 1px outset darkgrey;
-    padding: 5px 10px 6px 10px;
+    padding: 5px 6px 6px 6px;
     margin:  0px 1px 1px 1px;
+    cursor: not-allowed;
 }
-button.warning {
+.tools button.warning {
     background: #ff5050;
     border-color: #ff5050;
 }
 
-a {
-    text-decoration: none;
-}
-
 .context-menu {
     display: none;
     z-index: 1000;
@@ -212,28 +219,27 @@ a {
     padding: 0;
     margin: 0;
 }
-
 .context-menu li {
     padding: 6px 10px;
     cursor: default;
     list-style-type: none;
     transition: all .3s ease;
-    user-select: none;
     font-size: 1rem;
 }
-
 .context-menu li:hover {
     background-color: #DEF;
 }
-
 .context-menu li.error {
     color: #888
 }
-
 .context-menu li.error:hover {
     background-color: #EEE;
 }
 
+a {
+    text-decoration: none;
+}
+
 .credits {
     font-size: 0.8rem;
     margin: 0;

sudoku.php

@@ -80,16 +80,15 @@
             </div>
             <div>
                 <input id='highlighterCheckbox' type="checkbox" onclick='highlight()'/>
-                <label for='highlighterCheckbox' title='Surligner les chiffres sélectionnés'><img src='img/highlighter.svg' alt='Surligneur'></label>
+                <label for='highlighterCheckbox' title='Surligner les cases interdites'><img src='img/highlighter.svg' alt='Surligneur'></label>
-                <input type='radio' id='inkPenRadio' name='pen' onclick='penStyle = "ink-pen"' checked/>
+                <input type='radio' id='inkPenRadio' name='tool' onclick='grid.style.cursor = "url(img/ink-pen.svg) 2 22, auto"' checked/>
-                <label for='inkPenRadio' title='Écrire au stylo indélébile'><img src='img/ink-pen.svg' alt='Stylo'/></label>
+                <label for='inkPenRadio' title='Écrire au stylo'><img src='img/ink-pen.svg' alt='Stylo indélébile'/></label>
-                <input type='radio' id='pencilRadio' name='pen' onclick='penStyle = "pencil"'/>
+                <input type='radio' id='pencilRadio' name='tool' onclick='grid.style.cursor = "url(img/pencil.svg) 2 22, auto"'/>
                 <label for='pencilRadio' title='Écrire au crayon'><img src='img/pencil.svg' alt='Crayon'/></label>
-                <button type='button' onclick='erasePencil()' title='Gommer le crayon'>
+                <input type='radio' id='eraserRadio' name='tool' onclick='grid.style.cursor = "url(img/eraser.svg) 2 22, auto"'/>
-                    <img src='img/pencil-eraser.svg' alt='Gomme blanche'/>
+                <label for='eraserRadio' title='Effacer une case'><img src='img/eraser.svg' alt='Gomme'/></label>
-                </button>
+                <button type='button' class='warning' onclick='restart()' title='Recommencer'>
-                <button class='warning' type='button' onclick='eraseAll()' title='Gommer tout'>
+                    <img src='img/restart.svg' alt='Recommencer'/>
-                    <img src='img/ink-eraser.svg' alt='Gomme bleue'/>
                 </button>
                 <button id='undoButton' type='button' onclick='undo()' disabled title='Annuler' accesskey='z'>
                     <img src='img/undo.svg' alt='Annuler'/>
@@ -101,10 +100,14 @@
         </section>
         <ul id="contextMenu" class="context-menu"></ul>
         <footer>
+            <div id='links'>
                 <a href=''>Lien vers cette grille</a><br/>
                 <a href='.................................................................................'>Grille vierge</a><br/>
                 <a href='.'>Nouvelle grille</a>
-            <div class="credits">Icons made by <a href="https://www.flaticon.com/authors/freepik" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a></div>
+            </div>
+            <div class='credits'>
+                Icônes par <a href="https://www.flaticon.com/authors/freepik" title="Freepik">Freepik</a> chez <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a>
+            </div>
         </footer>
     </body>
 </html>