small enhancements
This commit is contained in:
parent
e0fe365b57
commit
e75e6b4bc1
26
game.php
26
game.php
@ -35,9 +35,14 @@
|
|||||||
$value = "";
|
$value = "";
|
||||||
$disabled = "";
|
$disabled = "";
|
||||||
} else {
|
} else {
|
||||||
$disabled = " disabled";
|
$disabled = "disabled";
|
||||||
}
|
}
|
||||||
echo " <td><input type='number' min='1' max='9' step='1' value='$value'$disabled/></td>\n";
|
?>
|
||||||
|
<td>
|
||||||
|
<input type='number' min='1' max='9' step='1' value='<?=$value?>' list='<?=$row.$column?>' <?=$disabled?>/>
|
||||||
|
<datalist id='<?=$row.$column?>'></datalist>
|
||||||
|
</td>
|
||||||
|
<?php
|
||||||
}
|
}
|
||||||
?>
|
?>
|
||||||
</tr>
|
</tr>
|
||||||
@ -57,8 +62,7 @@
|
|||||||
<div class='buttons'>
|
<div class='buttons'>
|
||||||
<button type='reset'>Tout effacer</button>
|
<button type='reset'>Tout effacer</button>
|
||||||
<button id='undoButton' type='button' onclick='undo()' disabled accesskey='z'>Annuler</button>
|
<button id='undoButton' type='button' onclick='undo()' disabled accesskey='z'>Annuler</button>
|
||||||
<label for='colorPicker'>🎨</label>
|
<input id='colorPicker' type='color' title='Changer de couleur de stylo' value='#00008b'/>
|
||||||
<input id='colorPicker' type='color' title='Changer de stylo' value='#00008b'/>
|
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
<section>
|
<section>
|
||||||
@ -77,10 +81,6 @@
|
|||||||
<table class='shortcuts'>
|
<table class='shortcuts'>
|
||||||
<caption>Raccourcis clavier</caption>
|
<caption>Raccourcis clavier</caption>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
|
||||||
<td><kbd>Tab</kbd></td>
|
|
||||||
<td>Déplacement</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
<tr>
|
||||||
<td><?=$keyboardShortcurt?> + <kbd>1</kbd>~<kbd>9</kbd></td>
|
<td><?=$keyboardShortcurt?> + <kbd>1</kbd>~<kbd>9</kbd></td>
|
||||||
<td>Surligner</td>
|
<td>Surligner</td>
|
||||||
@ -89,16 +89,20 @@
|
|||||||
<td><?=$keyboardShortcurt?> + <kbd>Z</kbd></td>
|
<td><?=$keyboardShortcurt?> + <kbd>Z</kbd></td>
|
||||||
<td>Annuler</td>
|
<td>Annuler</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><kbd>Tab</kbd>, <kbd>Maj</kbd> + <kbd>Tab</kbd></td>
|
||||||
|
<td>Déplacement</td>
|
||||||
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</section>
|
</section>
|
||||||
<?php
|
<?php
|
||||||
}
|
}
|
||||||
?>
|
?>
|
||||||
<section>
|
<footer>
|
||||||
<a href=''>Lien vers cette grille</a><br/>
|
<a href=''>Lien vers cette grille</a><br/>
|
||||||
<a href='.'>Nouvelle grille</a>
|
<a href='.'>Nouvelle grille</a>
|
||||||
</section>
|
</footer>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
<?php
|
<?php
|
||||||
@ -129,7 +133,7 @@
|
|||||||
<li>un chiffre entre 1 et 9 pour les cases connues</li>
|
<li>un chiffre entre 1 et 9 pour les cases connues</li>
|
||||||
<li>un point pour les case vides</li>
|
<li>un point pour les case vides</li>
|
||||||
</ul>
|
</ul>
|
||||||
Exemple : <a href='<?=$urlExample?>'><?=$urlExample?></a><br/>
|
Exemple : <a href='<?=$urlExample?>'><?=$urlExample?></a><br/>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
<?php
|
<?php
|
||||||
|
38
style.css
38
style.css
@ -6,7 +6,7 @@ h1 {
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
section, div {
|
section, div, footer {
|
||||||
display: flex;
|
display: flex;
|
||||||
row-gap: 0.5em;
|
row-gap: 0.5em;
|
||||||
column-gap: 0.5em;
|
column-gap: 0.5em;
|
||||||
@ -101,32 +101,32 @@ input::-webkit-inner-spin-button {
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
input:enabled {
|
input[type=number]:enabled {
|
||||||
color: darkblue;
|
color: darkblue;
|
||||||
background: white;
|
background: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
input:disabled {
|
input[type=number]:disabled, button:enabled {
|
||||||
color: white;
|
color: white;
|
||||||
background: #6666ff;
|
background: #6666ff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.same-value:enabled {
|
input[type=number].same-value:enabled {
|
||||||
color: #009973;
|
color: #009973 !important;
|
||||||
background: #66ffd9;
|
background: #66ffd9 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.forbidden-value:enabled {
|
input[type=number].forbidden-value:enabled {
|
||||||
background: #b3ffda;
|
background: #b3ffda !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.same-value:disabled {
|
input[type=number].same-value, button.same-value:enabled {
|
||||||
color: white;
|
color: white !important;
|
||||||
background: #00e6ac;
|
background: #00e6ac !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.forbidden-value:disabled {
|
input[type=number].forbidden-value:disabled {
|
||||||
background: #6288ea;
|
background: #6288ea !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
input::placeholder {
|
input::placeholder {
|
||||||
@ -138,9 +138,19 @@ input::placeholder {
|
|||||||
column-gap: 0.2em;
|
column-gap: 0.2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
button, input[type="color"] {
|
||||||
|
border: 2px outset #6666ff;
|
||||||
|
border-radius: 4px;
|
||||||
|
padding-bottom: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
button.same-value:enabled {
|
||||||
|
border: 2px inset #00e6ac;
|
||||||
|
}
|
||||||
|
|
||||||
input[type="color"] {
|
input[type="color"] {
|
||||||
font-size: 1em;
|
|
||||||
align-self: center;
|
align-self: center;
|
||||||
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.shortcuts caption {
|
.shortcuts caption {
|
||||||
|
58
sudoku.js
58
sudoku.js
@ -52,14 +52,18 @@ function searchCandidatesOf(box) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function showCandidatesOn(box) {
|
function showCandidatesOn(box) {
|
||||||
box.required = box.candidates.size == 0
|
if (!box.disabled) {
|
||||||
if (box.value.length) {
|
while (box.list.firstChild) {
|
||||||
box.title = ""
|
box.list.firstChild.remove()
|
||||||
} else if (box.candidates.size) {
|
}
|
||||||
const candidatesArray = Array.from(box.candidates).sort()
|
if (box.candidates.size) {
|
||||||
box.title = candidatesArray.length ==1 ? candidatesArray[0] : candidatesArray.slice(0, candidatesArray.length-1).join(", ") + " ou " + candidatesArray[candidatesArray.length-1]
|
const candidatesArray = Array.from(box.candidates).sort()
|
||||||
} else {
|
candidatesArray.forEach(candidate => {
|
||||||
box.title = "Aucune valeur possible !"
|
option = document.createElement('option')
|
||||||
|
option.value = candidate
|
||||||
|
box.list.appendChild(option)
|
||||||
|
})
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -69,9 +73,9 @@ function onfocus() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function oninput() {
|
function oninput() {
|
||||||
history.push({input: this, value: this.previousValue})
|
history.push({input: this, value: this.previousValue})
|
||||||
undoButton.disabled = false
|
undoButton.disabled = false
|
||||||
refresh(this)
|
refresh(this)
|
||||||
}
|
}
|
||||||
|
|
||||||
function refresh(box) {
|
function refresh(box) {
|
||||||
@ -86,16 +90,22 @@ function refresh(box) {
|
|||||||
for (neighbour1 of box.neighbourhood) {
|
for (neighbour1 of box.neighbourhood) {
|
||||||
neighbour1.setCustomValidity("")
|
neighbour1.setCustomValidity("")
|
||||||
if (neighbour1.value.length) {
|
if (neighbour1.value.length) {
|
||||||
for (area of [
|
if (neighbour1.candidates.size) {
|
||||||
{name: "région", neighbours: regions[neighbour1.regionId]},
|
for (area of [
|
||||||
{name: "ligne", neighbours: rows[neighbour1.rowId]},
|
{name: "région", neighbours: regions[neighbour1.regionId]},
|
||||||
{name: "colonne", neighbours: columns[neighbour1.columnId]},
|
{name: "ligne", neighbours: rows[neighbour1.rowId]},
|
||||||
])
|
{name: "colonne", neighbours: columns[neighbour1.columnId]},
|
||||||
for (neighbour2 of area.neighbours)
|
])
|
||||||
if (neighbour2 != neighbour1 && neighbour2.value == neighbour1.value) {
|
for (neighbour2 of area.neighbours)
|
||||||
neighbour1.setCustomValidity(`Il y a un autre ${neighbour1.value} dans cette ${area.name}.`)
|
if (neighbour2 != neighbour1 && neighbour2.value == neighbour1.value) {
|
||||||
neighbour2.setCustomValidity(`Il y a un autre ${neighbour1.value} dans cette ${area.name}.`)
|
for (neighbour of [neighbour1, neughbour2]) {
|
||||||
}
|
neighbour.setCustomValidity(`Il y a un autre ${neighbour.value} dans cette ${area.name}.`)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else if (neighbour1.candidates.size == 0) {
|
||||||
|
console.log("rezgzgzg")
|
||||||
|
neighbour1.setCustomValidity("Aucun value possible !")
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -111,8 +121,8 @@ function refresh(box) {
|
|||||||
suggestionTimer = setTimeout(showSuggestion, 30000)
|
suggestionTimer = setTimeout(showSuggestion, 30000)
|
||||||
}
|
}
|
||||||
} else { // Errors on grid
|
} else { // Errors on grid
|
||||||
box.select()
|
|
||||||
box.reportValidity()
|
box.reportValidity()
|
||||||
|
box.select()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -151,6 +161,10 @@ function highlight(value) {
|
|||||||
} else {
|
} else {
|
||||||
highlightedValue = value
|
highlightedValue = value
|
||||||
}
|
}
|
||||||
|
for (button of buttons.getElementsByTagName("button")) {
|
||||||
|
if (button.textContent == highlightedValue) button.className = "same-value"
|
||||||
|
else button.className = ""
|
||||||
|
}
|
||||||
highlightAndTab()
|
highlightAndTab()
|
||||||
boxes.filter(box => box.value == "" && box.tabIndex == 0)[0].focus()
|
boxes.filter(box => box.value == "" && box.tabIndex == 0)[0].focus()
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user