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