show keyboard shortcut as tooltip
This commit is contained in:
parent
4c026bd816
commit
f198715e45
41
game.php
41
game.php
@ -4,8 +4,6 @@
|
|||||||
$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'>
|
||||||
@ -52,53 +50,22 @@
|
|||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
<div id='buttons' class='buttons'>
|
<div id='buttons' class='highlight-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\")' title='Surligner les $value' accesskey='$value'>$value</button>\n";
|
||||||
}
|
}
|
||||||
?>
|
?>
|
||||||
</div>
|
</div>
|
||||||
<div class='buttons'>
|
<div>
|
||||||
<button type='reset'>Tout effacer</button>
|
<button type='reset'>Tout effacer</button>
|
||||||
<button id='undoButton' type='button' onclick='undo()' disabled accesskey='z'>Annuler</button>
|
<button id='undoButton' type='button' onclick='undo()' disabled title='Annuler' accesskey='z'>Annuler</button>
|
||||||
<input id='colorPicker' type='color' title='Changer de couleur de stylo' value='#00008b'/>
|
<input id='colorPicker' type='color' title='Changer de couleur de stylo' value='#00008b'/>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
<section>
|
<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.
|
||||||
</section>
|
</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><?=$keyboardShortcurt?> + <kbd>1</kbd>~<kbd>9</kbd></td>
|
|
||||||
<td>Surligner</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<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
|
|
||||||
}
|
|
||||||
?>
|
|
||||||
<footer>
|
<footer>
|
||||||
<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>
|
||||||
|
|||||||
@ -1,89 +0,0 @@
|
|||||||
<?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
|
|
||||||
);
|
|
||||||
}
|
|
||||||
?>
|
|
||||||
35
style.css
35
style.css
@ -8,12 +8,13 @@ h1 {
|
|||||||
|
|
||||||
section, div, footer {
|
section, div, footer {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
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: baseline;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.grid {
|
.grid {
|
||||||
@ -113,17 +114,15 @@ input::placeholder {
|
|||||||
color: #888;
|
color: #888;
|
||||||
}
|
}
|
||||||
|
|
||||||
.buttons {
|
.highlight-buttons {
|
||||||
flex-wrap: wrap;
|
|
||||||
align-items: center;
|
|
||||||
column-gap: 0.2em;
|
column-gap: 0.2em;
|
||||||
}
|
}
|
||||||
button, input[type="color"] {
|
button, input[type="color"] {
|
||||||
border: 2px outset #6666ff;
|
border: 2px outset #6666ff;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
button {
|
||||||
padding: 0 8px 2px 8px;
|
padding: 0 8px 2px 8px;
|
||||||
margin: 0 0 1px 0;
|
|
||||||
|
|
||||||
}
|
}
|
||||||
button.same-value:enabled {
|
button.same-value:enabled {
|
||||||
border: 2px inset #00e6ac;
|
border: 2px inset #00e6ac;
|
||||||
@ -135,34 +134,10 @@ button:disabled {
|
|||||||
background: darkgrey;
|
background: darkgrey;
|
||||||
border: 2px outset darkgrey;
|
border: 2px outset darkgrey;
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="color"] {
|
input[type="color"] {
|
||||||
align-self: center;
|
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.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 {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -7,6 +7,7 @@ let regions = Array.from(Array(9), x => [])
|
|||||||
let suggestionTimer= null
|
let suggestionTimer= null
|
||||||
let highlightedValue = ""
|
let highlightedValue = ""
|
||||||
let history = []
|
let history = []
|
||||||
|
let accessKeyModifiers = "AccessKey+"
|
||||||
|
|
||||||
window.onload = function() {
|
window.onload = function() {
|
||||||
let rowId = 0
|
let rowId = 0
|
||||||
@ -38,6 +39,13 @@ window.onload = function() {
|
|||||||
boxes.forEach(showCandidatesOn)
|
boxes.forEach(showCandidatesOn)
|
||||||
enableButtons()
|
enableButtons()
|
||||||
highlightAndTab()
|
highlightAndTab()
|
||||||
|
|
||||||
|
if (/Win/.test(navigator.platform) || /Linux/.test(navigator.platform)) accessKeyModifiers = "Alt+Maj+"
|
||||||
|
else if (/Mac/.test(navigator.platform)) accessKeyModifiers = "⌃⌥ "
|
||||||
|
for(node of document.querySelectorAll("*[accesskey]")) {
|
||||||
|
node.title += " [" + (node.accessKeyLabel || accessKeyModifiers + "+" + node.accessKey) + "]"
|
||||||
|
}
|
||||||
|
|
||||||
suggestionTimer = setTimeout(showSuggestion, 30000)
|
suggestionTimer = setTimeout(showSuggestion, 30000)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user