show keyboard shortcuts
This commit is contained in:
parent
e19da137e5
commit
c0ea157f08
48
game.php
48
game.php
@ -4,6 +4,8 @@
|
||||
$gridStr = basename(strip_tags($_SERVER["REQUEST_URI"]));
|
||||
// URL contains grid
|
||||
if (preg_match("#^[1-9.]{81}$#", $gridStr)) {
|
||||
require("get_browser.php");
|
||||
header("Vary: User-Agent");
|
||||
?>
|
||||
<!DOCTYPE html>
|
||||
<html lang='fr'>
|
||||
@ -20,7 +22,7 @@
|
||||
</header>
|
||||
<form id='sudokuForm'>
|
||||
<div>
|
||||
<table id='grid'>
|
||||
<table id='grid' class='grid'>
|
||||
<tbody>
|
||||
<?php
|
||||
for ($row = 0; $row < 9; $row++) {
|
||||
@ -46,27 +48,57 @@
|
||||
</table>
|
||||
</div>
|
||||
<div id='buttons' class='buttons'>
|
||||
🔎
|
||||
<?php
|
||||
for($value=1; $value<=9; $value++) {
|
||||
echo " <button type='button' onclick='highlight(\"$value\")' accesskey='$value'>$value</button>\n";
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
<div>
|
||||
<div class='buttons'>
|
||||
<button type='reset'>Tout effacer</button>
|
||||
<button id='undoButton' type='button' onclick='undo()' disabled accesskey='z'>Annuler Ctrl+Z</button>
|
||||
<button id='undoButton' type='button' onclick='undo()' disabled accesskey='z'>Annuler</button>
|
||||
<label for='colorPicker'>🎨</label>
|
||||
<input id='colorPicker' type='color' value='#00008b'/>
|
||||
</div>
|
||||
</form>
|
||||
<div>
|
||||
<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.
|
||||
</div>
|
||||
<div>
|
||||
</section>
|
||||
<?php
|
||||
$userAgent=getBrowser();
|
||||
if($userAgent["platform"] == "mac" || $userAgent["platform"] == "linux" || $userAgent["platform"] == "windows") {
|
||||
if($userAgent["platform"] == "mac") $keyboardShortcurt = "<kbd>Control</kbd> + <kbd>Alt</kbd>";
|
||||
elseif($userAgent["platform"] == "linux" || $userAgent["platform"] == "windows") {
|
||||
if($userAgent["name"] == "Mozilla Firefox") $keyboardShortcurt = "<kbd>Alt</kbd> + <kbd>Maj</kbd>";
|
||||
else $keyboardShortcurt = "<kbd>Alt</kbd>";
|
||||
}
|
||||
?>
|
||||
<section>
|
||||
<table class='shortcuts'>
|
||||
<caption>Raccourcis clavier</caption>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><kbd>Tab</kbd> <kbd>⬅</kbd> <kbd>⬆</kbd> <kbd>⬇</kbd> <kbd>➡</kbd></td>
|
||||
<td>Déplacement</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><?=$keyboardShortcurt?> + <kbd>1</kbd>~<kbd>9</kbd></td>
|
||||
<td>Surligner</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><?=$keyboardShortcurt?> + <kbd>Z</kbd></td>
|
||||
<td>Annuler</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
<?php
|
||||
}
|
||||
?>
|
||||
<section>
|
||||
<a href=''>Lien vers cette grille</a><br/>
|
||||
<a href='.'>Nouvelle grille</a>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
<?php
|
||||
|
||||
89
get_browser.php
Normal file
89
get_browser.php
Normal file
@ -0,0 +1,89 @@
|
||||
<?php
|
||||
// by ruudrp at live dot nl on https://www.php.net/manual/en/function.get-browser.php#101125
|
||||
|
||||
function getBrowser()
|
||||
{
|
||||
$u_agent = $_SERVER['HTTP_USER_AGENT'];
|
||||
$bname = 'Unknown';
|
||||
$platform = 'Unknown';
|
||||
$version= "";
|
||||
|
||||
//First get the platform?
|
||||
if (preg_match('/linux/i', $u_agent)) {
|
||||
$platform = 'linux';
|
||||
}
|
||||
elseif (preg_match('/macintosh|mac os x/i', $u_agent)) {
|
||||
$platform = 'mac';
|
||||
}
|
||||
elseif (preg_match('/windows|win32/i', $u_agent)) {
|
||||
$platform = 'windows';
|
||||
}
|
||||
|
||||
// Next get the name of the useragent yes seperately and for good reason
|
||||
if(preg_match('/MSIE/i',$u_agent) && !preg_match('/Opera/i',$u_agent))
|
||||
{
|
||||
$bname = 'Internet Explorer';
|
||||
$ub = "MSIE";
|
||||
}
|
||||
elseif(preg_match('/Firefox/i',$u_agent))
|
||||
{
|
||||
$bname = 'Mozilla Firefox';
|
||||
$ub = "Firefox";
|
||||
}
|
||||
elseif(preg_match('/Chrome/i',$u_agent))
|
||||
{
|
||||
$bname = 'Google Chrome';
|
||||
$ub = "Chrome";
|
||||
}
|
||||
elseif(preg_match('/Safari/i',$u_agent))
|
||||
{
|
||||
$bname = 'Apple Safari';
|
||||
$ub = "Safari";
|
||||
}
|
||||
elseif(preg_match('/Opera/i',$u_agent))
|
||||
{
|
||||
$bname = 'Opera';
|
||||
$ub = "Opera";
|
||||
}
|
||||
elseif(preg_match('/Netscape/i',$u_agent))
|
||||
{
|
||||
$bname = 'Netscape';
|
||||
$ub = "Netscape";
|
||||
}
|
||||
|
||||
// finally get the correct version number
|
||||
$known = array('Version', $ub, 'other');
|
||||
$pattern = '#(?<browser>' . join('|', $known) .
|
||||
')[/ ]+(?<version>[0-9.|a-zA-Z.]*)#';
|
||||
if (!preg_match_all($pattern, $u_agent, $matches)) {
|
||||
// we have no matching number just continue
|
||||
}
|
||||
|
||||
// see how many we have
|
||||
$i = count($matches['browser']);
|
||||
if ($i != 1) {
|
||||
//we will have two since we are not using 'other' argument yet
|
||||
//see if version is before or after the name
|
||||
if (strripos($u_agent,"Version") < strripos($u_agent,$ub)){
|
||||
$version= $matches['version'][0];
|
||||
}
|
||||
else {
|
||||
$version= $matches['version'][1];
|
||||
}
|
||||
}
|
||||
else {
|
||||
$version= $matches['version'][0];
|
||||
}
|
||||
|
||||
// check if we have a number
|
||||
if ($version==null || $version=="") {$version="?";}
|
||||
|
||||
return array(
|
||||
'userAgent' => $u_agent,
|
||||
'name' => $bname,
|
||||
'version' => $version,
|
||||
'platform' => $platform,
|
||||
'pattern' => $pattern
|
||||
);
|
||||
}
|
||||
?>
|
||||
64
style.css
64
style.css
@ -6,81 +6,81 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div {
|
||||
section, div {
|
||||
display: flex;
|
||||
row-gap: 0.5em;
|
||||
column-gap: 0.5em;
|
||||
margin: 1em auto;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
table {
|
||||
.grid {
|
||||
border-spacing: 0;
|
||||
border: 1px solid black;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
td, tr {
|
||||
.grid td, tr {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
tr:first-child td:first-child {
|
||||
.grid tr:first-child td:first-child {
|
||||
border-top-left-radius: 5px;
|
||||
}
|
||||
|
||||
tr:first-child td:first-child input {
|
||||
.grid tr:first-child td:first-child input {
|
||||
border-top-left-radius: 4px;
|
||||
}
|
||||
|
||||
tr:first-child td:last-child {
|
||||
.grid tr:first-child td:last-child {
|
||||
border-top-right-radius: 5px;
|
||||
}
|
||||
|
||||
tr:first-child td:last-child input {
|
||||
.grid tr:first-child td:last-child input {
|
||||
border-top-right-radius: 4px;
|
||||
}
|
||||
|
||||
tr:last-child td:first-child {
|
||||
.grid tr:last-child td:first-child {
|
||||
border-bottom-left-radius: 5px;
|
||||
}
|
||||
|
||||
tr:last-child td:first-child > input {
|
||||
.grid tr:last-child td:first-child > input {
|
||||
border-bottom-left-radius: 4px;
|
||||
}
|
||||
|
||||
tr:last-child td:last-child {
|
||||
.grid tr:last-child td:last-child {
|
||||
border-bottom-right-radius: 5px;
|
||||
}
|
||||
|
||||
tr:last-child td:last-child input {
|
||||
.grid tr:last-child td:last-child input {
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
|
||||
tr:nth-child(3n+1) td {
|
||||
.grid tr:nth-child(3n+1) td {
|
||||
border-top: 1px solid black;
|
||||
}
|
||||
|
||||
tr:nth-child(3n+2) td {
|
||||
.grid tr:nth-child(3n+2) td {
|
||||
border-top: 1px solid grey;
|
||||
border-bottom: 1px solid grey;
|
||||
}
|
||||
|
||||
tr:nth-child(3n) td {
|
||||
.grid tr:nth-child(3n) td {
|
||||
border-bottom: 1px solid black;
|
||||
}
|
||||
|
||||
td:nth-child(3n+1) {
|
||||
.grid td:nth-child(3n+1) {
|
||||
border-left: 1px solid black;
|
||||
}
|
||||
|
||||
td:nth-child(3n+2) {
|
||||
.grid td:nth-child(3n+2) {
|
||||
border-left: 1px solid grey;
|
||||
border-right: 1px solid grey;
|
||||
}
|
||||
|
||||
td:nth-child(3n+3) {
|
||||
.grid td:nth-child(3n+3) {
|
||||
border-right: 1px solid black;
|
||||
}
|
||||
|
||||
@ -91,7 +91,7 @@ input {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
transition: 0.3s;
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
input:enabled {
|
||||
@ -129,11 +129,35 @@ input::placeholder {
|
||||
.buttons {
|
||||
flex-wrap: wrap;
|
||||
column-gap: 0.2em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
input[type="color"] {
|
||||
font-size: 1em;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.shortcuts caption {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.shortcuts td {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
kbd {
|
||||
/* from https://developer.mozilla.org */
|
||||
background-color: #eee;
|
||||
border-radius: 3px;
|
||||
border: 1px solid #b4b4b4;
|
||||
box-shadow: 0 1px 1px rgba(0,0,0,.2),0 2px 0 0 rgba(255,255,255,.7) inset;
|
||||
color: #333;
|
||||
display: inline-block;
|
||||
font-family: consolas,"Liberation Mono",courier,monospace;
|
||||
font-size: .85em;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
padding: 4px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
a {
|
||||
|
||||
@ -48,13 +48,6 @@ window.onload = function() {
|
||||
suggestionTimer = setTimeout(showSuggestion, 30000)
|
||||
}
|
||||
|
||||
document.onkeydown = function(event) {
|
||||
if (event.ctrlKey == true && event.key.toLowerCase() == "z") {
|
||||
event.preventDefault()
|
||||
undo()
|
||||
}
|
||||
}
|
||||
|
||||
function searchAllowedValuesOf(box) {
|
||||
box.allowedValues = new Set(VALUES)
|
||||
box.neighbourhood.forEach(neighbour => box.allowedValues.delete(neighbour.value))
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user