cursors!
This commit is contained in:
parent
d84d77e083
commit
576cd3619f
269
app.js
269
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,26 +16,27 @@ 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
|
||||
}
|
||||
}
|
||||
}
|
||||
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
|
||||
@ -50,8 +51,8 @@ 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) {
|
||||
@ -60,28 +61,22 @@ window.onload = function() {
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
boxes.forEach(box => {
|
||||
box.neighbourhood = new Set(rows[box.rowId].concat(columns[box.columnId]).concat(regions[box.regionId]))
|
||||
box.neighbourhood.delete(box)
|
||||
box.neighbourhood = Array.from(box.neighbourhood)
|
||||
searchCandidatesOf(box)
|
||||
})
|
||||
|
||||
|
||||
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()
|
||||
highlight()
|
||||
|
||||
document.onclick = function (event) {
|
||||
contextMenu.style.display = "none"
|
||||
}
|
||||
suggestionTimer = setTimeout(showSuggestion, SUGESTION_DELAY)
|
||||
|
||||
|
||||
refreshUI()
|
||||
|
||||
if ("serviceWorker" in navigator) {
|
||||
navigator.serviceWorker.register("service-worker.js")
|
||||
}
|
||||
@ -94,81 +89,69 @@ function searchCandidatesOf(box) {
|
||||
switch (box.candidates.size) {
|
||||
case 0:
|
||||
box.title = "Aucune possibilité !"
|
||||
break
|
||||
break
|
||||
case 1:
|
||||
box.title = "1 possibilité [Clic-droit]"
|
||||
break
|
||||
break
|
||||
default:
|
||||
box.title = box.candidates.size + " possibilités [Clic-droit]"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
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 = "transparent"
|
||||
this.style.caretColor = valueToInsert? "transparent": "auto"
|
||||
}
|
||||
|
||||
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})
|
||||
this.previousValue = this.value
|
||||
this.previousPlaceholder = this.placeholder
|
||||
history.push({ box: this, value: this.previousValue, placeholder: this.previousPlaceholder })
|
||||
undoButton.disabled = false
|
||||
if (inkPenRadio.checked) {
|
||||
refresh(this)
|
||||
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
|
||||
refreshBox(this)
|
||||
}
|
||||
}
|
||||
|
||||
function undo() {
|
||||
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) {
|
||||
function refreshBox(box) {
|
||||
localStorage[location.href] = boxes.map(box => box.value || ".").join("")
|
||||
|
||||
|
||||
box.neighbourhood.concat([box]).forEach(neighbour => {
|
||||
searchCandidatesOf(neighbour)
|
||||
neighbour.setCustomValidity("")
|
||||
neighbour.required = false
|
||||
})
|
||||
|
||||
enableRadios()
|
||||
highlight()
|
||||
|
||||
|
||||
refreshUI()
|
||||
|
||||
for (neighbour1 of box.neighbourhood) {
|
||||
if (neighbour1.value.length == 1) {
|
||||
for (area of [
|
||||
{name: "région", neighbours: regions[neighbour1.regionId]},
|
||||
{name: "ligne", neighbours: rows[neighbour1.rowId]},
|
||||
{name: "colonne", neighbours: columns[neighbour1.columnId]},
|
||||
{ name: "région", neighbours: regions[neighbour1.regionId] },
|
||||
{ name: "ligne", neighbours: rows[neighbour1.rowId] },
|
||||
{ name: "colonne", neighbours: columns[neighbour1.columnId] },
|
||||
])
|
||||
for (neighbour2 of area.neighbours)
|
||||
if (neighbour2 != neighbour1 && neighbour2.value == neighbour1.value) {
|
||||
@ -183,76 +166,76 @@ function refresh(box) {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
if (box.form.checkValidity()) { // Correct grid
|
||||
if (boxes.filter(box => box.value == "").length == 0) {
|
||||
setTimeout(() => alert(`Bravo ! Vous avez résolu la grille.`), 0)
|
||||
} else {
|
||||
boxes.filter(box => box.value == "" && box.tabIndex == 0)[0].focus()
|
||||
if (suggestionTimer) clearTimeout(suggestionTimer)
|
||||
suggestionTimer = setTimeout(showSuggestion, SUGESTION_DELAY)
|
||||
}
|
||||
if (boxes.filter(box => box.value == "").length == 0)
|
||||
setTimeout(() => alert(`Bravo ! Vous avez résolu la grille.`), 500)
|
||||
} 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
|
||||
radio.previousTitle = null
|
||||
label.title = radio.previousTitle
|
||||
label.previousTitle = null
|
||||
}
|
||||
} else {
|
||||
radio.disabled = true
|
||||
radio.previousTitle = radio.title
|
||||
radio.title = "Tous les " + radio.value + " sont posés"
|
||||
label.previousTitle = label.title
|
||||
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) {
|
||||
boxes.forEach(box => {
|
||||
if (box.value == valueToInsert) {
|
||||
box.classList.add("same-value")
|
||||
box.tabIndex = -1
|
||||
}
|
||||
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")
|
||||
if (valueToInsert) {
|
||||
if (highlighterCheckbox.checked) {
|
||||
boxes.forEach(box => {
|
||||
if (box.value == valueToInsert) {
|
||||
box.classList.add("same-value")
|
||||
box.tabIndex = -1
|
||||
}
|
||||
}
|
||||
})
|
||||
else {
|
||||
box.classList.remove("same-value")
|
||||
if (box.candidates.has(valueToInsert) && !box.disabled) {
|
||||
box.classList.remove("forbidden")
|
||||
box.tabIndex = 0
|
||||
} else {
|
||||
box.classList.add("forbidden")
|
||||
box.tabIndex = -1
|
||||
}
|
||||
}
|
||||
})
|
||||
} else {
|
||||
boxes.forEach(box => {
|
||||
box.classList.remove("same-value")
|
||||
if (box.disabled) {
|
||||
box.classList.add("forbidden")
|
||||
} else {
|
||||
box.classList.remove("forbidden")
|
||||
}
|
||||
box.tabIndex = 0
|
||||
})
|
||||
}
|
||||
} else {
|
||||
boxes.forEach(box => {
|
||||
box.classList.remove("same-value", "allowed", "forbidden")
|
||||
if (box.disabled) {
|
||||
box.classList.add("forbidden")
|
||||
} else if (valueToInsert) {
|
||||
box.classList.add("allowed")
|
||||
}
|
||||
box.classList.remove("same-value", "forbidden")
|
||||
box.tabIndex = 0
|
||||
})
|
||||
}
|
||||
@ -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)
|
||||
if (emptyBoxes.length) {
|
||||
shuffle(emptyBoxes)[0].placeholder = "💡"
|
||||
const easyBoxes = boxes.filter(box => box.value == "" && box.candidates.size == 1)
|
||||
if (easyBoxes.length) {
|
||||
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)
|
||||
onblur.apply(box)
|
||||
box.oninput()
|
||||
box.onblur()
|
||||
}
|
||||
contextMenu.appendChild(li)
|
||||
})
|
||||
@ -305,24 +325,13 @@ function oncontextmenu(event) {
|
||||
return false
|
||||
}
|
||||
|
||||
function erasePencil() {
|
||||
if (confirm("Effacer les chiffres écrits au crayon ?")) {
|
||||
boxes.filter(box => !box.disabled).forEach(box => {
|
||||
box.placeholder = ""
|
||||
})
|
||||
}
|
||||
document.onclick = function (event) {
|
||||
contextMenu.style.display = "none"
|
||||
}
|
||||
|
||||
function eraseAll() {
|
||||
if (confirm("Effacer tous les chiffres écrits au crayon et au stylo ?")) {
|
||||
boxes.filter(box => !box.disabled).forEach(box => {
|
||||
box.value = ""
|
||||
box.placeholder = ""
|
||||
box.setCustomValidity("")
|
||||
box.required = false
|
||||
})
|
||||
boxes.forEach(searchCandidatesOf)
|
||||
enableRadios()
|
||||
highlight()
|
||||
document.onkeydown = function(event) {
|
||||
if (event.key == "Escape") {
|
||||
event.preventDefault()
|
||||
contextMenu.style.display = "none"
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
|
||||
1
img/eraser.svg
Normal file
1
img/eraser.svg
Normal file
@ -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>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
@ -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>
|
||||
|
Before Width: | Height: | Size: 1.2 KiB |
@ -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 "/>
|
||||
|
||||
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.7 KiB |
@ -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>
|
||||
|
Before Width: | Height: | Size: 1.2 KiB |
@ -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 "/>
|
||||
|
||||
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
55
img/restart.svg
Normal file
55
img/restart.svg
Normal file
@ -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>
|
||||
|
After Width: | Height: | Size: 2.2 KiB |
47
img/undo.svg
47
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>
|
||||
|
||||
|
Before Width: | Height: | Size: 814 B After Width: | Height: | Size: 1.2 KiB |
114
style.css
114
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;
|
||||
}
|
||||
|
||||
section, footer {
|
||||
margin: 0.8rem auto;
|
||||
margin: 0.8rem 0;
|
||||
}
|
||||
|
||||
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,
|
||||
button:enabled,
|
||||
.tools input+label {
|
||||
.grid input.pencil,
|
||||
.grid input::placeholder {
|
||||
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 {
|
||||
cursor: copy;
|
||||
}
|
||||
.grid input:disabled,
|
||||
.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 {
|
||||
color: #888 !important;
|
||||
font-size: 1rem !important;
|
||||
width: 2.5rem !important;
|
||||
height: 2.5rem !important;
|
||||
.grid input.one-candidate {
|
||||
cursor: help !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 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 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;
|
||||
|
||||
29
sudoku.php
29
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>
|
||||
<input type='radio' id='inkPenRadio' name='pen' onclick='penStyle = "ink-pen"' checked/>
|
||||
<label for='inkPenRadio' title='Écrire au stylo indélébile'><img src='img/ink-pen.svg' alt='Stylo'/></label>
|
||||
<input type='radio' id='pencilRadio' name='pen' onclick='penStyle = "pencil"'/>
|
||||
<label for='highlighterCheckbox' title='Surligner les cases interdites'><img src='img/highlighter.svg' alt='Surligneur'></label>
|
||||
<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'><img src='img/ink-pen.svg' alt='Stylo indélébile'/></label>
|
||||
<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'>
|
||||
<img src='img/pencil-eraser.svg' alt='Gomme blanche'/>
|
||||
</button>
|
||||
<button class='warning' type='button' onclick='eraseAll()' title='Gommer tout'>
|
||||
<img src='img/ink-eraser.svg' alt='Gomme bleue'/>
|
||||
<input type='radio' id='eraserRadio' name='tool' onclick='grid.style.cursor = "url(img/eraser.svg) 2 22, auto"'/>
|
||||
<label for='eraserRadio' title='Effacer une case'><img src='img/eraser.svg' alt='Gomme'/></label>
|
||||
<button type='button' class='warning' onclick='restart()' title='Recommencer'>
|
||||
<img src='img/restart.svg' alt='Recommencer'/>
|
||||
</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>
|
||||
<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 id='links'>
|
||||
<a href=''>Lien vers cette grille</a><br/>
|
||||
<a href='.................................................................................'>Grille vierge</a><br/>
|
||||
<a href='.'>Nouvelle grille</a>
|
||||
</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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user