adrien/Sudoku
adrien/Sudoku
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

code cleanup

Browse Source
This commit is contained in:
Adrien MALINGREY 2020-11-09 17:37:29 +01:00
parent a475c7fbf3
commit d84d77e083
2 changed files with 52 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

102
app.js
View File

@ -7,10 +7,24 @@ let rows = Array.from(Array(9), x => [])
let columns = Array.from(Array(9), x => []) let columns = Array.from(Array(9), x => [])
let regions = Array.from(Array(9), x => []) let regions = Array.from(Array(9), x => [])
let suggestionTimer= null let suggestionTimer= null
let selectedValue = "" let valueToInsert = ""
let history = [] let history = []
let accessKeyModifiers = "AccessKey+" let accessKeyModifiers = "AccessKey+"
function shuffle(iterable) {
array = Array.from(iterable)
if (array.length > 1) {
let i, j, tmp
for (i = array.length - 1; i > 0; i--) {
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 let rowId = 0
for (let row of grid.getElementsByTagName('tr')) { for (let row of grid.getElementsByTagName('tr')) {
@ -61,7 +75,7 @@ window.onload = function() {
} }
enableRadios() enableRadios()
highlightAndTab() highlight()
document.onclick = function (event) { document.onclick = function (event) {
contextMenu.style.display = "none" contextMenu.style.display = "none"
@ -91,12 +105,12 @@ function searchCandidatesOf(box) {
} }
function onclick() { function onclick() {
if (selectedValue) { if (valueToInsert) {
if (inkPenRadio.checked) { if (inkPenRadio.checked) {
this.value = selectedValue this.value = valueToInsert
} else { } else {
if (!this.value.includes(selectedValue)) if (!this.value.includes(valueToInsert))
this.value += selectedValue this.value += valueToInsert
} }
oninput.apply(this) oninput.apply(this)
} }
@ -110,7 +124,7 @@ function onfocus() {
} else { } else {
this.select() this.select()
} }
if (selectedValue) { if (valueToInsert) {
this.style.caretColor = "transparent" this.style.caretColor = "transparent"
} else { } else {
this.style.caretColor = "auto" this.style.caretColor = "auto"
@ -147,7 +161,7 @@ function refresh(box) {
}) })
enableRadios() enableRadios()
highlightAndTab() highlight()
for (neighbour1 of box.neighbourhood) { for (neighbour1 of box.neighbourhood) {
if (neighbour1.value.length == 1) { if (neighbour1.value.length == 1) {
@ -174,6 +188,7 @@ function refresh(box) {
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.`), 0)
} else { } else {
boxes.filter(box => box.value == "" && box.tabIndex == 0)[0].focus()
if (suggestionTimer) clearTimeout(suggestionTimer) if (suggestionTimer) clearTimeout(suggestionTimer)
suggestionTimer = setTimeout(showSuggestion, SUGESTION_DELAY) suggestionTimer = setTimeout(showSuggestion, SUGESTION_DELAY)
} }
@ -183,16 +198,8 @@ function refresh(box) {
} }
} }
function onblur() {
if (this.classList.contains("pencil")) {
this.placeholder = this.value
this.value = ""
this.classList.remove("pencil")
}
}
function enableRadios() { function enableRadios() {
for (radio of selectValueRadioGroup.getElementsByTagName("input")) { for (radio of insertRadioGroup.getElementsByTagName("input")) {
if (boxes.filter(box => box.value == "").some(box => box.candidates.has(radio.value))) { if (boxes.filter(box => box.value == "").some(box => box.candidates.has(radio.value))) {
radio.disabled = false radio.disabled = false
if (radio.previousTitle) { if (radio.previousTitle) {
@ -201,34 +208,33 @@ function enableRadios() {
} }
} else { } else {
radio.disabled = true radio.disabled = true
console.log(radio.disabled)
radio.previousTitle = radio.title radio.previousTitle = radio.title
radio.title = "Tous les " + radio.value + " sont posés" radio.title = "Tous les " + radio.value + " sont posés"
if (selectedValue == radio.value) selectedValue = "" if (valueToInsert == radio.value) valueToInsert = ""
} }
} }
} }
function highlight(radio) { function insert(radio) {
if (radio.value == selectedValue) { if (radio.value == valueToInsert) {
selectedValue = "" valueToInsert = ""
radio.checked = false radio.checked = false
} else { } else {
selectedValue = radio.value valueToInsert = radio.value
} }
highlightAndTab() highlight()
} }
function highlightAndTab() { function highlight() {
if (highlighterCheckbox.checked && selectedValue) { if (highlighterCheckbox.checked && valueToInsert) {
boxes.forEach(box => { boxes.forEach(box => {
if (box.value == selectedValue) { if (box.value == valueToInsert) {
box.classList.add("same-value") box.classList.add("same-value")
box.tabIndex = -1 box.tabIndex = -1
} }
else { else {
box.classList.remove("same-value") box.classList.remove("same-value")
if (box.candidates.has(selectedValue) && !box.disabled) { if (box.candidates.has(valueToInsert) && !box.disabled) {
box.classList.add("allowed") box.classList.add("allowed")
box.classList.remove("forbidden") box.classList.remove("forbidden")
box.tabIndex = 0 box.tabIndex = 0
@ -241,34 +247,25 @@ function highlightAndTab() {
}) })
} else { } else {
boxes.forEach(box => { boxes.forEach(box => {
box.classList.remove("same-value", "forbidden") box.classList.remove("same-value", "allowed", "forbidden")
if (selectedValue && !box.disabled) { if (box.disabled) {
box.classList.add("forbidden")
} else if (valueToInsert) {
box.classList.add("allowed") box.classList.add("allowed")
} else {
box.classList.remove("allowed")
} }
box.tabIndex = 0 box.tabIndex = 0
}) })
} }
boxes.filter(box => box.value == "" && box.tabIndex == 0)[0].focus()
} }
function shuffle(iterable) { function onblur() {
array = Array.from(iterable) if (this.classList.contains("pencil")) {
if (array.length > 1) { this.placeholder = this.value
let i, j, tmp this.value = ""
for (i = array.length - 1; i > 0; i--) { this.classList.remove("pencil")
j = Math.floor(Math.random() * (i+1))
tmp = array[i]
array[i] = array[j]
array[j] = tmp
}
} }
return array
} }
easyFirst = (box1, box2) => box1.candidates.size - box2.candidates.size
function showSuggestion() { function showSuggestion() {
const emptyBoxes = boxes.filter(box => box.value == "" && box.candidates.size == 1) const emptyBoxes = boxes.filter(box => box.value == "" && box.candidates.size == 1)
if (emptyBoxes.length) { if (emptyBoxes.length) {
@ -308,17 +305,6 @@ function oncontextmenu(event) {
return false return false
} }
function erase(someBoxes) {
for (box of someBoxes) {
box.value = ""
box.placeholder = ""
searchCandidatesOf(box)
refresh(box)
}
enableRadios()
highlightAndTab()
}
function erasePencil() { function erasePencil() {
if (confirm("Effacer les chiffres écrits au crayon ?")) { if (confirm("Effacer les chiffres écrits au crayon ?")) {
boxes.filter(box => !box.disabled).forEach(box => { boxes.filter(box => !box.disabled).forEach(box => {
@ -337,6 +323,6 @@ function eraseAll() {
}) })
boxes.forEach(searchCandidatesOf) boxes.forEach(searchCandidatesOf)
enableRadios() enableRadios()
highlightAndTab() highlight()
} }
} }

13
sudoku.php
View File

@ -41,9 +41,6 @@
<header> <header>
<h1>Sudoku</h1> <h1>Sudoku</h1>
</header> </header>
<section>
Remplissez la grille de sorte que chaque ligne, colonne et région (carré de 3×3 cases) contienne tous les chiffres de 1 à 9.
</section>
<form id='sudokuForm'> <form id='sudokuForm'>
<table id='grid' class='grid'> <table id='grid' class='grid'>
<tbody> <tbody>
@ -73,15 +70,16 @@
</table> </table>
</form> </form>
<section class='tools'> <section class='tools'>
<div id='selectValueRadioGroup' class='selectValueRadioGroup'> <div id='insertRadioGroup' class='insertRadioGroup'>
<?php <?php
for($value=1; $value<=9; $value++) { for($value=1; $value<=9; $value++) {
echo " <input type='radio' id='selectValueRadio$value' value='$value' name='selectValueRadioGroup' onclick='highlight(this)' accesskey='$value'/><label for='selectValueRadio$value' title='Écrire un $value'>$value</label>\n"; echo " <input type='radio' id='insertRadio$value' value='$value' name='insertRadioGroup' onclick='insert(this)' accesskey='$value'/>\n";
echo " <label for='insertRadio$value' title='Insérer un $value'>$value</label>\n";
} }
?> ?>
</div> </div>
<div> <div>
<input id='highlighterCheckbox' type="checkbox" onclick='highlightAndTab()'/> <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 chiffres sélectionnés'><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='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> <label for='inkPenRadio' title='Écrire au stylo indélébile'><img src='img/ink-pen.svg' alt='Stylo'/></label>
@ -98,6 +96,9 @@
</button> </button>
</div> </div>
</section> </section>
<section>
Remplissez la grille de sorte que chaque ligne, colonne et région (carré de 3×3 cases) contienne tous les chiffres de 1 à 9.
</section>
<ul id="contextMenu" class="context-menu"></ul> <ul id="contextMenu" class="context-menu"></ul>
<footer> <footer>
<a href=''>Lien vers cette grille</a><br/> <a href=''>Lien vers cette grille</a><br/>