n'afficher que les définitions de la case
This commit is contained in:
parent
92306e2a2a
commit
c8ecb504ef
@ -20,7 +20,7 @@ class Grille implements Iterator, ArrayAccess {
|
||||
private $lettres_suivantes;
|
||||
private $positions;
|
||||
private $nb_positions;
|
||||
private $mots_utilises;
|
||||
public $mots_utilises;
|
||||
|
||||
public function __construct($hauteur, $largeur, $id = "")
|
||||
{
|
||||
|
||||
3
dico.php
3
dico.php
@ -35,6 +35,9 @@ foreach ($dico as $mot => $definition) {
|
||||
$mots_de_n_lettres[$n] = [];
|
||||
}
|
||||
$mots_de_n_lettres[$n][] = $mot;
|
||||
if (!empty($definitions)) {
|
||||
$dico[$mot] = [$definitions[array_rand($definitions)]];
|
||||
}
|
||||
}
|
||||
|
||||
function mots_espaces($longueur)
|
||||
|
||||
34
index.php
34
index.php
@ -38,14 +38,14 @@ $largeur = filter_input(INPUT_GET, 'c', FILTER_VALIDATE_INT, [
|
||||
$grille = new Grille($hauteur, $largeur, $id);
|
||||
$grille->current();
|
||||
$definitions = [
|
||||
"horizontales" => [],
|
||||
"verticales" => []
|
||||
"lignes" => [],
|
||||
"colonnes" => []
|
||||
];
|
||||
for ($y = 0; $y < $hauteur; $y++) {
|
||||
$definitions["horizontales"][$y] = $dico[$grille->get_ligne($y, $largeur)];
|
||||
$definitions["lignes"][$y] = $dico[$grille->get_ligne($y, $largeur)];
|
||||
}
|
||||
for ($x = 0; $x < $largeur; $x++) {
|
||||
$definitions["verticales"][$x] = $dico[$grille->get_colonne($x, $hauteur)];
|
||||
$definitions["colonnes"][$x] = $dico[$grille->get_colonne($x, $hauteur)];
|
||||
}
|
||||
|
||||
?>
|
||||
@ -107,10 +107,10 @@ for ($x = 0; $x < $largeur; $x++) {
|
||||
<?php for ($x = 0; $x < $largeur; $x++): ?>
|
||||
<td class="case <?= $grille[$y][$x] == " " ? "noire" : "blanche" ?>">
|
||||
<?php if ($grille[$y][$x] == " "): ?>
|
||||
<input type="text" maxlength="1" size="1" value=" " disabled />
|
||||
<input id="<?= chr($x + 65) . ($y + 1) ?>" type="text" maxlength="1" size="1" value=" " disabled />
|
||||
<?php else: ?>
|
||||
<input type="text" maxlength="1" size="1" pattern="[A-Z]" placeholder="<?= $grille[$y][$x] ?>"
|
||||
title="<?= "➡️ " . strip_tags(implode(" ➡️ ", $definitions["horizontales"][$y])) . "\n⬇️ " . strip_tags(implode("\n⬇️ ", $definitions["verticales"][$x])) ?>" />
|
||||
<input id="<?= chr($x + 65) . ($y + 1) ?>" type="text" maxlength="1" size="1" pattern="[A-Z]" placeholder="<?= $grille[$y][$x] ?>"
|
||||
title="<?= "→ " . strip_tags(implode("\n→ ", $definitions["lignes"][$y])) . "\n↓ " . strip_tags(implode("\n↓ ", $definitions["colonnes"][$x])) ?>" />
|
||||
<?php endif; ?>
|
||||
</td>
|
||||
<?php endfor; ?>
|
||||
@ -121,37 +121,37 @@ for ($x = 0; $x < $largeur; $x++) {
|
||||
<div class="definitions horizontales">
|
||||
<h2>Horizontalement</h2>
|
||||
<ol>
|
||||
<?php for ($y = 0; $y < $hauteur; $y++): ?>
|
||||
<?php foreach ($definitions["lignes"] as $y => $definitions_ligne): ?>
|
||||
<li>
|
||||
<?php if (count($definitions["horizontales"][$y]) == 1): ?>
|
||||
<?= $definitions["horizontales"][$y][0] ?>
|
||||
<?php if (count($definitions_ligne) == 1): ?>
|
||||
<?= $definitions_ligne[0] ?>
|
||||
<?php else: ?>
|
||||
<ol>
|
||||
<?php foreach ($definitions["horizontales"][$y] as $definition) : ?>
|
||||
<?php foreach ($definitions_ligne as $definition) : ?>
|
||||
<li><?= $definition ?></li>
|
||||
<?php endforeach ?>
|
||||
</ol>
|
||||
<?php endif ?>
|
||||
</li>
|
||||
<?php endfor; ?>
|
||||
<?php endforeach; ?>
|
||||
</ol>
|
||||
</div>
|
||||
<div class="definitions verticales">
|
||||
<h2>Verticalement</h2>
|
||||
<ol type="A">
|
||||
<?php for ($x = 0; $x < $largeur; $x++): ?>
|
||||
<?php foreach ($definitions["colonnes"] as $x => $definitions_colonne): ?>
|
||||
<li>
|
||||
<?php if (count($definitions["horizontales"][$x]) == 1): ?>
|
||||
<?= $definitions["horizontales"][$x][0] ?>
|
||||
<?php if (count($definitions_colonne) == 1): ?>
|
||||
<?= $definitions_colonne[0] ?>
|
||||
<?php else: ?>
|
||||
<ol>
|
||||
<?php foreach ($definitions["horizontales"][$x] as $definition) : ?>
|
||||
<?php foreach ($definitions_colonne as $definition) : ?>
|
||||
<li><?= $definition ?></li>
|
||||
<?php endforeach ?>
|
||||
</ol>
|
||||
<?php endif ?>
|
||||
</li>
|
||||
<?php endfor; ?>
|
||||
<?php endforeach; ?>
|
||||
</ol>
|
||||
</div>
|
||||
<?php else: ?>
|
||||
|
||||
44
script.js
44
script.js
@ -1,36 +1,44 @@
|
||||
async function sha256(text) {
|
||||
const encoder = new TextEncoder();
|
||||
const data = encoder.encode(text);
|
||||
const hashBuffer = await crypto.subtle.digest('SHA-256', data);
|
||||
const hashBuffer = await crypto.subtle.digest("SHA-256", data);
|
||||
const hashArray = Array.from(new Uint8Array(hashBuffer));
|
||||
return hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
|
||||
return hashArray.map((b) => b.toString(16).padStart(2, "0")).join("");
|
||||
}
|
||||
|
||||
const inputs = Array.from(grilleForm.querySelectorAll('input[type="text"]'));
|
||||
let largeur = Number(colonnes.value);
|
||||
let nb_cases = inputs.length;
|
||||
let index = 0;
|
||||
|
||||
inputs.forEach(input => {
|
||||
inputs.forEach((input) => {
|
||||
input.index = index++;
|
||||
input.x = input.index % largeur;
|
||||
input.y = Math.floor(input.index / largeur);
|
||||
|
||||
input.onfocus = function (event) {
|
||||
for (li of document.querySelectorAll(`.definitions.horizontales > ol > li:nth-child(${input.y+1}), .definitions.verticales > ol > li:nth-child(${input.x+1})`)) {
|
||||
li.classList.add("selectionee")
|
||||
}
|
||||
for (li of document.querySelectorAll(`.definitions.horizontales > ol > li:not(:nth-child(${input.y+1})), .definitions.verticales > ol > li:not(:nth-child(${input.x+1}))`)) {
|
||||
li.classList.add("non-selectionee")
|
||||
}
|
||||
|
||||
input.select();
|
||||
};
|
||||
|
||||
input.onkeydown = function (event) {
|
||||
next_input = null;
|
||||
switch (event.key) {
|
||||
case 'ArrowUp':
|
||||
case "ArrowUp":
|
||||
next_input = inputs[(input.index - largeur + nb_cases) % nb_cases];
|
||||
break;
|
||||
case 'ArrowDown':
|
||||
case "ArrowDown":
|
||||
next_input = inputs[(input.index + largeur) % nb_cases];
|
||||
break;
|
||||
case 'ArrowLeft':
|
||||
case "ArrowLeft":
|
||||
next_input = inputs[(input.index - 1 + nb_cases) % nb_cases];
|
||||
break;
|
||||
case 'ArrowRight':
|
||||
case "ArrowRight":
|
||||
next_input = inputs[(input.index + 1) % nb_cases];
|
||||
break;
|
||||
}
|
||||
@ -44,16 +52,28 @@ inputs.forEach(input => {
|
||||
input.oninput = function (event) {
|
||||
this.value = this.value.toUpperCase();
|
||||
if (!input.checkValidity()) {
|
||||
input.value = '';
|
||||
input.value = "";
|
||||
}
|
||||
if (inputs.every(input => input.value.length == 1) && grilleForm.checkValidity()) {
|
||||
sha256(inputs.map(input => input.value).join('')).then(hash => {
|
||||
if (
|
||||
inputs.every((input) => input.value.length == 1) &&
|
||||
grilleForm.checkValidity()
|
||||
) {
|
||||
sha256(inputs.map((input) => input.value).join("")).then((hash) => {
|
||||
if (hash == solution_hashee.value) {
|
||||
if (confirm('Bravo ! \nUne nouvelle partie ?')) {
|
||||
if (confirm("Bravo ! \nUne nouvelle partie ?")) {
|
||||
grilleForm.submit();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
input.onblur = function (event) {
|
||||
for (li of document.querySelectorAll(`.definitions.horizontales > ol > li:nth-child(${input.y+1}), .definitions.verticales > ol > li:nth-child(${input.x+1})`)) {
|
||||
li.classList.remove("selectionee")
|
||||
}
|
||||
for (li of document.querySelectorAll(`.definitions.horizontales > ol > li:not(:nth-child(${input.y+1})), .definitions.verticales > ol > li:not(:nth-child(${input.x+1}))`)) {
|
||||
li.classList.remove("non-selectionee")
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
63
style.css
63
style.css
@ -1,14 +1,16 @@
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 2rem 1rem;
|
||||
padding: 0;
|
||||
background-color: white;
|
||||
font-family: Times, 'Times New Roman', Georgia, serif;
|
||||
font-family: Times, "Times New Roman", Georgia, serif;
|
||||
}
|
||||
|
||||
form {
|
||||
display: flex;
|
||||
padding: 1rem;
|
||||
min-height: calc(100vh - 2rem);
|
||||
flex-flow: column;
|
||||
min-height: calc(100vh - 4rem);
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -18,6 +20,7 @@ h1 {
|
||||
|
||||
h1.large.width {
|
||||
display: inherit;
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
h1.small.width {
|
||||
@ -46,8 +49,7 @@ h2 {
|
||||
justify-content: space-evenly;
|
||||
flex-wrap: wrap;
|
||||
height: max-content;
|
||||
flex-grow: 1;
|
||||
align-items: center;
|
||||
gap: 1em;
|
||||
}
|
||||
|
||||
.grille table {
|
||||
@ -99,7 +101,7 @@ h2 {
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
font-size: 1.2em;
|
||||
font-family: 'Comic Sans MS', 'Comic Sans', sans;
|
||||
font-family: "Comic Sans MS", "Comic Sans", sans;
|
||||
color: darkblue;
|
||||
background-color: white;
|
||||
}
|
||||
@ -151,18 +153,34 @@ h2 {
|
||||
text-wrap: nowrap;
|
||||
}
|
||||
|
||||
.definitions.case ol.horizontales {
|
||||
list-style-type: "→ ";
|
||||
}
|
||||
|
||||
.definitions.case ol.verticales {
|
||||
list-style-type: "↓ ";
|
||||
}
|
||||
|
||||
.definitions li {
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
.definitions li.non-selectionee {
|
||||
opacity: 30%;
|
||||
}
|
||||
|
||||
.erreur {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
button[type='submit'] {
|
||||
button[type="submit"] {
|
||||
width: fit-content;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
button[type='submit'] {
|
||||
button[type="submit"] {
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
margin: 1em auto 0 auto;
|
||||
border: none;
|
||||
background: none;
|
||||
font-family: inherit;
|
||||
@ -183,12 +201,7 @@ button[type="submit"]:active {
|
||||
color: darkorchid;
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
body {
|
||||
padding: 1.5rem 1rem;
|
||||
}
|
||||
|
||||
h1.large.width {
|
||||
display: none;
|
||||
}
|
||||
@ -201,10 +214,6 @@ button[type="submit"]:active {
|
||||
line-height: 0.7;
|
||||
}
|
||||
|
||||
form {
|
||||
min-height: calc(100vh - 2rem);
|
||||
}
|
||||
|
||||
.grille {
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
@ -215,7 +224,7 @@ button[type="submit"]:active {
|
||||
}
|
||||
|
||||
.definitions.horizontales {
|
||||
order: inherit
|
||||
order: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
@ -243,18 +252,26 @@ button[type="submit"]:active {
|
||||
height: 2.5rem;
|
||||
}
|
||||
|
||||
.definitions {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
h2 {
|
||||
font-size: 1.2em;
|
||||
margin: 1em 0 0.5em 0;
|
||||
}
|
||||
|
||||
.definitions.horizontales,
|
||||
.definitions.verticales {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.definitions > ol {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.definitions li.non-selectionee {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-device-width:768px) and (orientation: landscape) {
|
||||
@media (max-device-width: 768px) and (orientation: landscape) {
|
||||
html {
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-ms-text-size-adjust: 100%;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user