adrien/mots-croises
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

la navigation au clavier saute les cases noires

Browse Source
This commit is contained in:
Adrien MALINGREY
2025-08-19 17:57:02 +02:00
parent c2e4b8ae53
commit 6635adf26a
3 changed files with 60 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
index.php
View File

@ -85,33 +85,35 @@ function formatter_definition($definition) {
<body>
<form id="grilleForm" method="get" location=".">
<h1 class="large width">
<table>
<tbody>
<tr>
<td colspan="2"></td>
<td>M</td>
</tr>
<tr>
<td>c</td>
<td>r</td>
<td>o</td>
<td>i</td>
<td>s</td>
<td>é</td>
<td>s</td>
</tr>
<tr>
<td colspan="2"></td>
<td>t</td>
</tr>
<tr>
<td colspan="2"></td>
<td>s</td>
</tr>
</tbody>
</table>
<a href=".">
<table>
<tbody>
<tr>
<td colspan="2"></td>
<td>M</td>
</tr>
<tr>
<td>c</td>
<td>r</td>
<td>o</td>
<td>i</td>
<td>s</td>
<td>é</td>
<td>s</td>
</tr>
<tr>
<td colspan="2"></td>
<td>t</td>
</tr>
<tr>
<td colspan="2"></td>
<td>s</td>
</tr>
</tbody>
</table>
</a>
</h1>
<h1 class="small width">Mots■croisés</h1>
<h1 class="small width"><a href=".">Mots■croisés</a></h1>
<div class="grille-et-definitions">
<?php if ($grille_valide): ?>
<div class="grille">
@ -129,11 +131,11 @@ function formatter_definition($definition) {
<?php for ($x = 0; $x < $largeur; $x++): ?>
<?php if ($grille[$y][$x] == CASE_NOIRE): ?>
<td class="case noire">
<input id="<?= chr($x + 65) . ($y + 1) ?>" type="text" maxlength="1" size="1" value="<?= CASE_NOIRE ?>" disabled />
<input id="<?= chr($x + 65) . ($y + 1) ?>" type="text" maxlength="1" size="1" disabled />
</td>
<?php else: ?>
<td class="case blanche">
<input id="<?= chr($x + 65) . ($y + 1) ?>" type="text" maxlength="1" size="1" pattern="[A-Z]" placeholder="<?= $grille[$y][$x] ?>"
<input id="<?= chr($x + 65) . ($y + 1) ?>" type="text" maxlength="1" size="1" pattern="[A-Z]"
title="<?= strip_tags("→ " . implode("\n→ ", array_map("formatter_definition", $grille->definitions["horizontales"][$y] ?? [])) . "\n↓ " . implode("\n↓ ", array_map("formatter_definition", $grille->definitions["verticales"][$x] ?? []))) ?>" />
</td>
<?php endif; ?>

42
script.js
View File

@ -35,26 +35,28 @@ for (let input of inputs) {
};
input.onkeydown = function (event) {
next_input = null;
switch (event.key) {
case "ArrowUp":
next_input = inputs[(input.index - largeur + nb_cases) % nb_cases];
break;
case "ArrowDown":
next_input = inputs[(input.index + largeur) % nb_cases];
break;
case "ArrowLeft":
next_input = inputs[(input.index - 1 + nb_cases) % nb_cases];
break;
case "ArrowRight":
next_input = inputs[(input.index + 1) % nb_cases];
break;
}
if (next_input) {
next_input.focus();
next_input.select();
event.preventDefault();
}
next_input = input;
do {
switch (event.key) {
case "ArrowUp":
next_input = inputs[(next_input.index - largeur + nb_cases) % nb_cases];
break;
case "ArrowDown":
next_input = inputs[(next_input.index + largeur) % nb_cases];
break;
case "ArrowLeft":
next_input = inputs[(next_input.index - 1 + nb_cases) % nb_cases];
break;
case "ArrowRight":
next_input = inputs[(next_input.index + 1) % nb_cases];
break;
default:
return;
}
} while (next_input.disabled)
event.preventDefault();
next_input.focus();
next_input.select();
};
input.oninput = function (event) {

8
style.css
View File

@ -18,6 +18,12 @@ h1 {
letter-spacing: 0.2em;
}
h1 a {
width: 100%;
text-decoration: none;
color: inherit;
}
h1.large.width {
display: inherit;
padding-top: 1rem;
@ -199,6 +205,7 @@ h2 {
text-decoration: underline;
}
h1 a:hover,
.nouvelle-grille button:hover {
color: #2a6496;
}
@ -315,6 +322,7 @@ h2 {
background-color: #edeeee;
}
h1 a:hover,
.nouvelle-grille button:hover {
color: #479fec;
}