adrien/mots-croises
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
dico.php
View File

@ -36,9 +36,9 @@ function mots_espaces($max, $min=0) {
foreach ($mots_de_n_lettres[$i] as $mot1) {
foreach (mots_espaces($max - $i -1, $min) as $mot2) {
if ($mot1 != $mot2) {
$dico["$mot1 $mot2"] = $dico[$mot1] && $dico[$mot2] ? "{$dico[$mot1]}. {$dico[$mot2]}." : $dico[$mot1] . $dico[$mot2];
$dico["$mot1 $mot2"] = $dico[$mot1] && $dico[$mot2] ? "{$dico[$mot1]}<br/>{$dico[$mot2]}." : $dico[$mot1] . $dico[$mot2];
yield "$mot1 $mot2";
$dico["$mot2 $mot1"] = $dico[$mot2] && $dico[$mot1] ? "{$dico[$mot2]}. {$dico[$mot1]}." : $dico[$mot2] . $dico[$mot1];
$dico["$mot2 $mot1"] = $dico[$mot2] && $dico[$mot1] ? "{$dico[$mot2]}<br/>{$dico[$mot1]}." : $dico[$mot2] . $dico[$mot1];
yield "$mot2 $mot1";
}
}

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>

30
style.css
View File

@ -4,7 +4,29 @@ body {
.grille {
margin: 2rem auto;
}
.grille table {
border-collapse: collapse;
margin: 0 auto;
}
tr:nth-of-type(2) td {
border-top: 3px solid black;
}
tr:last-of-type td {
border-bottom: 3px solid black;
}
td:first-of-type {
border-left: 3px solid black;
}
td:last-child {
border-right: 3px solid black;
}
td {
border: 1px solid black;
padding: 2px;
}
th, td {
@ -13,11 +35,6 @@ th, td {
text-align: center;
}
td {
border: 1px solid black;
padding: 2px;
}
.case.noire {
background-color: black;
}
@ -28,7 +45,7 @@ input {
border: none;
padding: 0;
text-align: center;
font-size: 1em;
font-size: 1.2em;
}
input[disabled] {
@ -42,4 +59,5 @@ input[disabled] {
.definitions h2 {
font-variant-caps: petite-caps;
text-align: center;
}