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"]));
|
||||
// URL contains grid
|
||||
if (preg_match("#^[1-9.]{81}$#", $gridStr)) {
|
||||
require("get_browser.php");
|
||||
header("Vary: User-Agent");
|
||||
?>
|
||||
<!DOCTYPE html>
|
||||
<html lang='fr'>
|
||||
@ -52,53 +50,22 @@
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div id='buttons' class='buttons'>
|
||||
<div id='buttons' class='highlight-buttons'>
|
||||
<?php
|
||||
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 class='buttons'>
|
||||
<div>
|
||||
<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'/>
|
||||
</div>
|
||||
</form>
|
||||
<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.
|
||||
</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>
|
||||
<a href=''>Lien vers cette grille</a><br/>
|
||||
<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 {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
row-gap: 0.5em;
|
||||
column-gap: 0.5em;
|
||||
margin: 1em auto;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.grid {
|
||||
@ -113,17 +114,15 @@ input::placeholder {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
.highlight-buttons {
|
||||
column-gap: 0.2em;
|
||||
}
|
||||
button, input[type="color"] {
|
||||
border: 2px outset #6666ff;
|
||||
border-radius: 4px;
|
||||
}
|
||||
button {
|
||||
padding: 0 8px 2px 8px;
|
||||
margin: 0 0 1px 0;
|
||||
|
||||
}
|
||||
button.same-value:enabled {
|
||||
border: 2px inset #00e6ac;
|
||||
@ -135,34 +134,10 @@ button:disabled {
|
||||
background: darkgrey;
|
||||
border: 2px outset darkgrey;
|
||||
}
|
||||
|
||||
input[type="color"] {
|
||||
align-self: center;
|
||||
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 {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@ -7,6 +7,7 @@ let regions = Array.from(Array(9), x => [])
|
||||
let suggestionTimer= null
|
||||
let highlightedValue = ""
|
||||
let history = []
|
||||
let accessKeyModifiers = "AccessKey+"
|
||||
|
||||
window.onload = function() {
|
||||
let rowId = 0
|
||||
@ -38,6 +39,13 @@ window.onload = function() {
|
||||
boxes.forEach(showCandidatesOn)
|
||||
enableButtons()
|
||||
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)
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user