chrome support
This commit is contained in:
parent
65f2ed480a
commit
4c026bd816
50
style.css
50
style.css
@ -21,72 +21,57 @@ section, div, footer {
|
||||
border: 1px solid black;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.grid td, tr {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.grid tr:first-child td:first-child {
|
||||
border-top-left-radius: 5px;
|
||||
}
|
||||
|
||||
.grid tr:first-child td:first-child input {
|
||||
border-top-left-radius: 4px;
|
||||
}
|
||||
|
||||
.grid tr:first-child td:last-child {
|
||||
border-top-right-radius: 5px;
|
||||
}
|
||||
|
||||
.grid tr:first-child td:last-child input {
|
||||
border-top-right-radius: 4px;
|
||||
}
|
||||
|
||||
.grid tr:last-child td:first-child {
|
||||
border-bottom-left-radius: 5px;
|
||||
}
|
||||
|
||||
.grid tr:last-child td:first-child > input {
|
||||
border-bottom-left-radius: 4px;
|
||||
}
|
||||
|
||||
.grid tr:last-child td:last-child {
|
||||
border-bottom-right-radius: 5px;
|
||||
}
|
||||
|
||||
.grid tr:last-child td:last-child input {
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
|
||||
.grid tr:nth-child(3n+1) td {
|
||||
border-top: 1px solid black;
|
||||
}
|
||||
|
||||
.grid tr:nth-child(3n+2) td {
|
||||
border-top: 1px solid grey;
|
||||
border-bottom: 1px solid grey;
|
||||
}
|
||||
|
||||
.grid tr:nth-child(3n) td {
|
||||
border-bottom: 1px solid black;
|
||||
}
|
||||
|
||||
.grid td:nth-child(3n+1) {
|
||||
border-left: 1px solid black;
|
||||
}
|
||||
|
||||
.grid td:nth-child(3n+2) {
|
||||
border-left: 1px solid grey;
|
||||
border-right: 1px solid grey;
|
||||
}
|
||||
|
||||
.grid td:nth-child(3n+3) {
|
||||
border-right: 1px solid black;
|
||||
}
|
||||
|
||||
input[type=number] {
|
||||
width: 1.6em;
|
||||
height: 1.6em;
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
font-size: 1.5em;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
@ -94,58 +79,61 @@ input[type=number] {
|
||||
transition: background 0.5s;
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
|
||||
input::-webkit-outer-spin-button,
|
||||
input::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
input::-webkit-calendar-picker-indicator {
|
||||
display: none;
|
||||
}
|
||||
|
||||
input[type=number]:enabled {
|
||||
color: darkblue;
|
||||
background: white;
|
||||
}
|
||||
|
||||
input[type=number]:disabled, button:enabled {
|
||||
color: white;
|
||||
background: #6666ff;
|
||||
}
|
||||
|
||||
input[type=number].same-value:enabled {
|
||||
color: #009973 !important;
|
||||
background: #66ffd9 !important;
|
||||
}
|
||||
|
||||
input[type=number].forbidden-value:enabled {
|
||||
background: #b3ffda !important;
|
||||
}
|
||||
|
||||
input[type=number].same-value, button.same-value:enabled {
|
||||
color: white !important;
|
||||
background: #00e6ac !important;
|
||||
}
|
||||
|
||||
input[type=number].forbidden-value:disabled {
|
||||
background: #6288ea !important;
|
||||
}
|
||||
|
||||
input::placeholder {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
column-gap: 0.2em;
|
||||
}
|
||||
|
||||
button, input[type="color"] {
|
||||
border: 2px outset #6666ff;
|
||||
border-radius: 4px;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
padding: 0 8px 2px 8px;
|
||||
margin: 0 0 1px 0;
|
||||
|
||||
}
|
||||
button.same-value:enabled {
|
||||
border: 2px inset #00e6ac;
|
||||
padding: 2px 7px 0 9px;
|
||||
margin: 1px 0 0 0;
|
||||
}
|
||||
button:disabled {
|
||||
color: lightgrey;
|
||||
background: darkgrey;
|
||||
border: 2px outset darkgrey;
|
||||
}
|
||||
|
||||
input[type="color"] {
|
||||
@ -156,11 +144,9 @@ input[type="color"] {
|
||||
.shortcuts caption {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.shortcuts td {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
kbd {
|
||||
/* from https://developer.mozilla.org */
|
||||
background-color: #eee;
|
||||
|
||||
52
sudoku.js
52
sudoku.js
@ -14,7 +14,7 @@ window.onload = function() {
|
||||
let columnId = 0
|
||||
for (box of row.getElementsByTagName('input')) {
|
||||
let regionId = rowId - rowId%3 + Math.floor(columnId/3)
|
||||
if (!box.readOnly) {
|
||||
if (!box.disabled) {
|
||||
box.onfocus = onfocus
|
||||
box.oninput = oninput
|
||||
}
|
||||
@ -35,14 +35,9 @@ window.onload = function() {
|
||||
box.neighbourhood = Array.from(box.neighbourhood)
|
||||
})
|
||||
boxes.forEach(searchCandidatesOf)
|
||||
enableButtons()
|
||||
boxes.forEach(showCandidatesOn)
|
||||
for(box of boxes) {
|
||||
if (!box.readOnly) {
|
||||
box.focus()
|
||||
break
|
||||
}
|
||||
}
|
||||
enableButtons()
|
||||
highlightAndTab()
|
||||
suggestionTimer = setTimeout(showSuggestion, 30000)
|
||||
}
|
||||
|
||||
@ -78,6 +73,15 @@ function oninput() {
|
||||
refresh(this)
|
||||
}
|
||||
|
||||
function undo() {
|
||||
if (history.length) {
|
||||
previousState = history.pop()
|
||||
previousState.input.value = previousState.value
|
||||
refresh(previousState.input)
|
||||
if (history.length < 1) undoButton.disabled = true
|
||||
}
|
||||
}
|
||||
|
||||
function refresh(box) {
|
||||
box.style.color = colorPicker.value
|
||||
|
||||
@ -87,6 +91,9 @@ function refresh(box) {
|
||||
neighbour.setCustomValidity("")
|
||||
})
|
||||
|
||||
enableButtons()
|
||||
highlightAndTab()
|
||||
|
||||
for (neighbour1 of box.neighbourhood) {
|
||||
neighbour1.setCustomValidity("")
|
||||
if (neighbour1.value.length) {
|
||||
@ -104,16 +111,10 @@ function refresh(box) {
|
||||
}
|
||||
}
|
||||
} else if (neighbour1.candidates.size == 0) {
|
||||
console.log("rezgzgzg")
|
||||
neighbour1.setCustomValidity("Aucun value possible !")
|
||||
neighbour1.placeholder = "!"
|
||||
}
|
||||
}
|
||||
|
||||
enableButtons()
|
||||
highlightAndTab()
|
||||
|
||||
|
||||
if (box.form.checkValidity()) { // Correct grid
|
||||
if (boxes.filter(box => box.value == "").length == 0) {
|
||||
alert(`Bravo ! Vous avez résolu la grille.`)
|
||||
@ -127,15 +128,6 @@ function refresh(box) {
|
||||
}
|
||||
}
|
||||
|
||||
function undo() {
|
||||
if (history.length) {
|
||||
previousState = history.pop()
|
||||
previousState.input.value = previousState.value
|
||||
refresh(previousState.input)
|
||||
if (history.length < 1) undoButton.disabled = true
|
||||
}
|
||||
}
|
||||
|
||||
function enableButtons() {
|
||||
for (button of buttons.getElementsByTagName("button")) {
|
||||
if (boxes.filter(box => box.value == "").some(box => box.candidates.has(button.textContent))) {
|
||||
@ -147,15 +139,6 @@ function enableButtons() {
|
||||
}
|
||||
}
|
||||
|
||||
function moveOn(area, position, direction) {
|
||||
if (area.filter(box => box.disabled).length < 9) {
|
||||
do {
|
||||
position = (position + direction) % 9
|
||||
} while (area[position].disabled)
|
||||
area[position].focus()
|
||||
}
|
||||
}
|
||||
|
||||
function highlight(value) {
|
||||
if (value == highlightedValue) {
|
||||
highlightedValue = ""
|
||||
@ -186,7 +169,10 @@ function highlightAndTab() {
|
||||
}
|
||||
})
|
||||
} else {
|
||||
boxes.forEach(box => box.className = "")
|
||||
boxes.forEach(box => {
|
||||
box.className = ""
|
||||
box.tabIndex = 0
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user