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

un peu de style et de js

Browse Source
This commit is contained in:
Adrien MALINGREY
2025-04-24 13:16:39 +02:00
parent 341ac43d86
commit c5e13c277e
3 changed files with 82 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
index.php
View File

@ -37,36 +37,36 @@ $grille = new Grille($hauteur, $largeur);
</head>
<body>
<div class="grille">
<table class="grille">
<form id="grilleForm" class="grille">
<table>
<tr>
<th></th>
<?php for ($c = 0; $c < $largeur; $c++): ?>
<th><?= chr($c + 65) ?></th>
<th><?= chr($c + 65) ?></th>
<?php endfor; ?>
</tr>
<?php for ($l = 0; $l < $hauteur; $l++): ?>
<tr>
<th><?= $l + 1 ?></th>
<?php for ($c = 0; $c < $largeur; $c++): ?>
<td class="case <?= $grille->grille[$l][$c]==" "?"noire": "blanche" ?>">
<?php if ($grille->grille[$l][$c] == " "): ?>
<input type="text" maxlength="1" size="1" name="<?= $l . $c ?>" value=" " disabled/>
<?php else: ?>
<input type="text" maxlength="1" size="1" name="<?= $l . $c ?>" />
<?php endif; ?>
</td>
<?php endfor; ?>
</tr>
<tr>
<th><?= $l + 1 ?></th>
<?php for ($c = 0; $c < $largeur; $c++): ?>
<td class="case <?= $grille->grille[$l][$c] == " " ? "noire" : "blanche" ?>">
<?php if ($grille->grille[$l][$c] == " "): ?>
<input type="text" maxlength="1" size="1" name="<?= $l . $c ?>" value=" " disabled />
<?php else: ?>
<input type="text" maxlength="1" size="1" name="<?= $l . $c ?>" required pattern="[A-Z]" />
<?php endif; ?>
</td>
<?php endfor; ?>
</tr>
<?php endfor; ?>
</table>
</div>
</form>
<div class="definitions">
<div class="horizontales">
<h2>Horizontalement</h2>
<ol>
<?php for ($l = 0; $l < $hauteur; $l++): ?>
<li><?= $dico[$grille->get_ligne($l, $largeur)] ?></li>
<li><?= $dico[$grille->get_ligne($l, $largeur)] ?></li>
<?php endfor; ?>
</ol>
</div>
@ -74,10 +74,48 @@ $grille = new Grille($hauteur, $largeur);
<h2>Verticalement</h2>
<ol type="A">
<?php for ($c = 0; $c < $largeur; $c++): ?>
<li><?= $dico[$grille->get_colonne($c, $hauteur)] ?></li>
<li><?= $dico[$grille->get_colonne($c, $hauteur)] ?></li>
<?php endfor; ?>
</ol>
</div>
</div>
<script>
const inputs = Array.from(grilleForm.querySelectorAll('input[type="text"]'))
let largeur = <?= $largeur ?>;
let nb_cases = inputs.length
let index = 0
inputs.forEach(input => {
input.index = index++
input.onfocus = function() {
this.select();
}
input.oninput = function() {
this.value = this.value.toUpperCase()
if (!input.checkValidity()) {
input.value = ""
}
if (grilleForm.checkValidity()) {
window.setTimeout(() => alert("Grille validée !"), 100)
}
}
input.onkeydown = function(event) {
switch (event.key) {
case "ArrowUp":
inputs[(input.index - largeur + nb_cases) % nb_cases].focus()
break;
case "ArrowDown":
inputs[(input.index + largeur) % nb_cases].focus()
break;
case "ArrowLeft":
inputs[(input.index - 1 + nb_cases) % nb_cases].focus()
break;
case "ArrowRight":
inputs[(input.index + 1) % nb_cases].focus()
break;
}
}
})
</script>
</html>