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

keyboard navigation

Browse Source
This commit is contained in:
Adrien MALINGREY
2020-10-09 21:55:18 +02:00
parent aaf988dde1
commit e19da137e5
2 changed files with 44 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
game.php
View File

@ -6,21 +6,21 @@
if (preg_match("#^[1-9.]{81}$#", $gridStr)) { if (preg_match("#^[1-9.]{81}$#", $gridStr)) {
?> ?>
<!DOCTYPE html> <!DOCTYPE html>
<html lang="fr"> <html lang='fr'>
<head> <head>
<meta charset="utf-8" /> <meta charset='utf-8' />
<meta name="viewport" content="width=device-width" /> <meta name='viewport' content='width=device-width' />
<title>Sudoku</title> <title>Sudoku</title>
<link rel="stylesheet" type="text/css" href="style.css" /> <link rel='stylesheet' type='text/css' href='style.css' />
<script src="sudoku.js"></script> <script src='sudoku.js'></script>
</head> </head>
<body> <body>
<header> <header>
<h1>Sudoku</h1> <h1>Sudoku</h1>
</header> </header>
<form id="sudokuForm"> <form id='sudokuForm'>
<div> <div>
<table id="grid"> <table id='grid'>
<tbody> <tbody>
<?php <?php
for ($row = 0; $row < 9; $row++) { for ($row = 0; $row < 9; $row++) {
@ -45,27 +45,27 @@
</tbody> </tbody>
</table> </table>
</div> </div>
<div id="buttons" class="buttons"> <div id='buttons' class='buttons'>
🔎 🔎
<?php <?php
for($value=1; $value<=9; $value++) { for($value=1; $value<=9; $value++) {
echo " <button type='button' onclick='showValue(\"$value\")'>$value</button>\n"; echo " <button type='button' onclick='highlight(\"$value\")' accesskey='$value'>$value</button>\n";
} }
?> ?>
</div> </div>
<div> <div>
<button type="reset">Tout effacer</button> <button type='reset'>Tout effacer</button>
<button id="undoButton" type="button" onclick="undo()" disabled>Annuler Ctrl+Z</button> <button id='undoButton' type='button' onclick='undo()' disabled accesskey='z'>Annuler Ctrl+Z</button>
<label for="colorPicker">🎨</label> <label for='colorPicker'>🎨</label>
<input id="colorPicker" type="color" value="#00008b"/> <input id='colorPicker' type='color' value='#00008b'/>
</div> </div>
</form> </form>
<div> <div>
Remplissez la grille de sorte que chaque ligne, colonne et région (carré de 3×3 cases) contienne tous les chiffres de 1 à 9. Remplissez la grille de sorte que chaque ligne, colonne et région (carré de 3×3 cases) contienne tous les chiffres de 1 à 9.
</div> </div>
<div> <div>
<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>
</div> </div>
</body> </body>
</html> </html>
@ -82,10 +82,10 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8" /> <meta charset='utf-8' />
<meta name="viewport" content="width=device-width" /> <meta name='viewport' content='width=device-width' />
<title>Grille incorrecte</title> <title>Grille incorrecte</title>
<link rel="stylesheet" type="text/css" href="style.css" /> <link rel='stylesheet' type='text/css' href='style.css' />
</head> </head>
<body> <body>
<header> <header>
@ -97,7 +97,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

31
sudoku.js
View File

@ -49,7 +49,7 @@ window.onload = function() {
} }
document.onkeydown = function(event) { document.onkeydown = function(event) {
if (event.ctrlKey == true && event.key == "z") { if (event.ctrlKey == true && event.key.toLowerCase() == "z") {
event.preventDefault() event.preventDefault()
undo() undo()
} }
@ -93,7 +93,7 @@ function refresh(input) {
}) })
enableButtons() enableButtons()
refreshShowValue() highlightAndTab()
input.neighbourhood.concat([input]).forEach(neighbour => showAllowedValuesOn(neighbour)) input.neighbourhood.concat([input]).forEach(neighbour => showAllowedValuesOn(neighbour))
if (input.form.checkValidity()) { // Correct grid if (input.form.checkValidity()) { // Correct grid
@ -176,26 +176,41 @@ function keyboardBrowse(event) {
} }
function moveOn(area, position, direction) { function moveOn(area, position, direction) {
if (area.filter(box => box.disabled).length < 9) {
do {
position = (position + direction) % 9 position = (position + direction) % 9
} while (area[position].disabled)
area[position].focus() area[position].focus()
}
} }
function showValue(value) { function highlight(value) {
if (value == highlightedValue) { if (value == highlightedValue) {
highlightedValue = "" highlightedValue = ""
} else { } else {
highlightedValue = value highlightedValue = value
} }
refreshShowValue() highlightAndTab()
boxes.filter(box => box.value == "" && box.tabIndex == 0)[0].focus()
} }
function refreshShowValue() { function highlightAndTab() {
boxes.forEach(box => box.className = "")
if (highlightedValue) { if (highlightedValue) {
boxes.forEach(box => { boxes.forEach(box => {
if (box.value == highlightedValue) box.className = "same-value" if (box.value == highlightedValue) {
if (!box.allowedValues.has(highlightedValue)) box.className = "forbidden-value" box.className = "same-value"
box.tabIndex = -1
}
else if (box.allowedValues.has(highlightedValue)) {
box.className = ""
box.tabIndex = 0
} else {
box.className = "forbidden-value"
box.tabIndex = -1
}
}) })
} else {
boxes.forEach(box => box.className = "")
} }
} }