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"]));
|
$gridStr = basename(strip_tags($_SERVER["REQUEST_URI"]));
|
||||||
// URL contains grid
|
// URL contains grid
|
||||||
if (preg_match("#^[1-9.]{81}$#", $gridStr)) {
|
if (preg_match("#^[1-9.]{81}$#", $gridStr)) {
|
||||||
|
require("get_browser.php");
|
||||||
|
header("Vary: User-Agent");
|
||||||
?>
|
?>
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang='fr'>
|
<html lang='fr'>
|
||||||
@ -20,7 +22,7 @@
|
|||||||
</header>
|
</header>
|
||||||
<form id='sudokuForm'>
|
<form id='sudokuForm'>
|
||||||
<div>
|
<div>
|
||||||
<table id='grid'>
|
<table id='grid' class='grid'>
|
||||||
<tbody>
|
<tbody>
|
||||||
<?php
|
<?php
|
||||||
for ($row = 0; $row < 9; $row++) {
|
for ($row = 0; $row < 9; $row++) {
|
||||||
@ -46,27 +48,57 @@
|
|||||||
</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='highlight(\"$value\")' accesskey='$value'>$value</button>\n";
|
echo " <button type='button' onclick='highlight(\"$value\")' accesskey='$value'>$value</button>\n";
|
||||||
}
|
}
|
||||||
?>
|
?>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<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 Ctrl+Z</button>
|
<button id='undoButton' type='button' onclick='undo()' disabled accesskey='z'>Annuler</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>
|
<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.
|
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>
|
</section>
|
||||||
<div>
|
<?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=''>Lien vers cette grille</a><br/>
|
||||||
<a href='.'>Nouvelle grille</a>
|
<a href='.'>Nouvelle grille</a>
|
||||||
</div>
|
</section>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
<?php
|
<?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;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
div {
|
section, div {
|
||||||
display: flex;
|
display: flex;
|
||||||
row-gap: 0.5em;
|
row-gap: 0.5em;
|
||||||
column-gap: 0.5em;
|
column-gap: 0.5em;
|
||||||
margin: 1em auto;
|
margin: 1em auto;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
align-items: center;
|
align-items: baseline;
|
||||||
}
|
}
|
||||||
|
|
||||||
table {
|
.grid {
|
||||||
border-spacing: 0;
|
border-spacing: 0;
|
||||||
border: 1px solid black;
|
border: 1px solid black;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
td, tr {
|
.grid td, tr {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
tr:first-child td:first-child {
|
.grid tr:first-child td:first-child {
|
||||||
border-top-left-radius: 5px;
|
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;
|
border-top-left-radius: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
tr:first-child td:last-child {
|
.grid tr:first-child td:last-child {
|
||||||
border-top-right-radius: 5px;
|
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;
|
border-top-right-radius: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
tr:last-child td:first-child {
|
.grid tr:last-child td:first-child {
|
||||||
border-bottom-left-radius: 5px;
|
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;
|
border-bottom-left-radius: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
tr:last-child td:last-child {
|
.grid tr:last-child td:last-child {
|
||||||
border-bottom-right-radius: 5px;
|
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;
|
border-bottom-right-radius: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
tr:nth-child(3n+1) td {
|
.grid tr:nth-child(3n+1) td {
|
||||||
border-top: 1px solid black;
|
border-top: 1px solid black;
|
||||||
}
|
}
|
||||||
|
|
||||||
tr:nth-child(3n+2) td {
|
.grid tr:nth-child(3n+2) td {
|
||||||
border-top: 1px solid grey;
|
border-top: 1px solid grey;
|
||||||
border-bottom: 1px solid grey;
|
border-bottom: 1px solid grey;
|
||||||
}
|
}
|
||||||
|
|
||||||
tr:nth-child(3n) td {
|
.grid tr:nth-child(3n) td {
|
||||||
border-bottom: 1px solid black;
|
border-bottom: 1px solid black;
|
||||||
}
|
}
|
||||||
|
|
||||||
td:nth-child(3n+1) {
|
.grid td:nth-child(3n+1) {
|
||||||
border-left: 1px solid black;
|
border-left: 1px solid black;
|
||||||
}
|
}
|
||||||
|
|
||||||
td:nth-child(3n+2) {
|
.grid td:nth-child(3n+2) {
|
||||||
border-left: 1px solid grey;
|
border-left: 1px solid grey;
|
||||||
border-right: 1px solid grey;
|
border-right: 1px solid grey;
|
||||||
}
|
}
|
||||||
|
|
||||||
td:nth-child(3n+3) {
|
.grid td:nth-child(3n+3) {
|
||||||
border-right: 1px solid black;
|
border-right: 1px solid black;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -91,7 +91,7 @@ input {
|
|||||||
border: 0;
|
border: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
transition: 0.3s;
|
transition: 0.5s;
|
||||||
}
|
}
|
||||||
|
|
||||||
input:enabled {
|
input:enabled {
|
||||||
@ -129,11 +129,35 @@ input::placeholder {
|
|||||||
.buttons {
|
.buttons {
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
column-gap: 0.2em;
|
column-gap: 0.2em;
|
||||||
margin: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="color"] {
|
input[type="color"] {
|
||||||
font-size: 1em;
|
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 {
|
a {
|
||||||
|
|||||||
@ -48,13 +48,6 @@ window.onload = function() {
|
|||||||
suggestionTimer = setTimeout(showSuggestion, 30000)
|
suggestionTimer = setTimeout(showSuggestion, 30000)
|
||||||
}
|
}
|
||||||
|
|
||||||
document.onkeydown = function(event) {
|
|
||||||
if (event.ctrlKey == true && event.key.toLowerCase() == "z") {
|
|
||||||
event.preventDefault()
|
|
||||||
undo()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function searchAllowedValuesOf(box) {
|
function searchAllowedValuesOf(box) {
|
||||||
box.allowedValues = new Set(VALUES)
|
box.allowedValues = new Set(VALUES)
|
||||||
box.neighbourhood.forEach(neighbour => box.allowedValues.delete(neighbour.value))
|
box.neighbourhood.forEach(neighbour => box.allowedValues.delete(neighbour.value))
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user