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> <body>
<form id="grilleForm" method="get" location="."> <form id="grilleForm" method="get" location=".">
<h1 class="large width"> <h1 class="large width">
<table> <a href=".">
<tbody> <table>
<tr> <tbody>
<td colspan="2"></td> <tr>
<td>M</td> <td colspan="2"></td>
</tr> <td>M</td>
<tr> </tr>
<td>c</td> <tr>
<td>r</td> <td>c</td>
<td>o</td> <td>r</td>
<td>i</td> <td>o</td>
<td>s</td> <td>i</td>
<td>é</td> <td>s</td>
<td>s</td> <td>é</td>
</tr> <td>s</td>
<tr> </tr>
<td colspan="2"></td> <tr>
<td>t</td> <td colspan="2"></td>
</tr> <td>t</td>
<tr> </tr>
<td colspan="2"></td> <tr>
<td>s</td> <td colspan="2"></td>
</tr> <td>s</td>
</tbody> </tr>
</table> </tbody>
</table>
</a>
</h1> </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"> <div class="grille-et-definitions">
<?php if ($grille_valide): ?> <?php if ($grille_valide): ?>
<div class="grille"> <div class="grille">
@ -129,11 +131,11 @@ function formatter_definition($definition) {
<?php for ($x = 0; $x < $largeur; $x++): ?> <?php for ($x = 0; $x < $largeur; $x++): ?>
<?php if ($grille[$y][$x] == CASE_NOIRE): ?> <?php if ($grille[$y][$x] == CASE_NOIRE): ?>
<td class="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> </td>
<?php else: ?> <?php else: ?>
<td class="case blanche"> <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] ?? []))) ?>" /> 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> </td>
<?php endif; ?> <?php endif; ?>

42
script.js
View File

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

8
style.css
View File

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