adrien/Sudoku
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
Show Stats 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)) {
?>
<!DOCTYPE html>
<html lang="fr">
<html lang='fr'>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<meta charset='utf-8' />
<meta name='viewport' content='width=device-width' />
<title>Sudoku</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="sudoku.js"></script>
<link rel='stylesheet' type='text/css' href='style.css' />
<script src='sudoku.js'></script>
</head>
<body>
<header>
<h1>Sudoku</h1>
</header>
<form id="sudokuForm">
<form id='sudokuForm'>
<div>
<table id="grid">
<table id='grid'>
<tbody>
<?php
for ($row = 0; $row < 9; $row++) {
@ -45,27 +45,27 @@
</tbody>
</table>
</div>
<div id="buttons" class="buttons">
<div id='buttons' class='buttons'>
🔎
<?php
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>
<button type="reset">Tout effacer</button>
<button id="undoButton" type="button" onclick="undo()" disabled>Annuler Ctrl+Z</button>
<label for="colorPicker">🎨</label>
<input id="colorPicker" type="color" value="#00008b"/>
<button type='reset'>Tout effacer</button>
<button id='undoButton' type='button' onclick='undo()' disabled accesskey='z'>Annuler Ctrl+Z</button>
<label for='colorPicker'>🎨</label>
<input id='colorPicker' type='color' value='#00008b'/>
</div>
</form>
<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.
</div>
<div>
<a href="">Lien vers cette grille</a><br/>
<a href=".">Nouvelle grille</a>
<a href=''>Lien vers cette grille</a><br/>
<a href='.'>Nouvelle grille</a>
</div>
</body>
</html>
@ -82,10 +82,10 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<meta charset='utf-8' />
<meta name='viewport' content='width=device-width' />
<title>Grille incorrecte</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel='stylesheet' type='text/css' href='style.css' />
</head>
<body>
<header>
@ -97,7 +97,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

35
sudoku.js
View File

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