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

Compare commits

base: adrien:ef49f35e2a53bab043ae09d72bb8b9e8960161ab
Branches Tags
adrien:main
adrien:vercel
adrien:grand-dico
..
compare: adrien:7a29d4d12d1e43b2925d76f4932d462661d1eee6
Branches Tags
adrien:vercel
adrien:main
adrien:grand-dico

No commits in common. "ef49f35e2a53bab043ae09d72bb8b9e8960161ab" and "7a29d4d12d1e43b2925d76f4932d462661d1eee6" have entirely different histories.
ef49f35e2a ... 7a29d4d12d

4 changed files with 32 additions and 95 deletions
Show Stats Expand all files Collapse all files

8
Grille.php
View File

@ -130,12 +130,4 @@ class Grille {
unset($this->mots_utilises[$mot_col]); unset($this->mots_utilises[$mot_col]);
} }
} }
public function hash() {
$string = "";
foreach ($this->grille as $ligne) {
$string .= implode("", $ligne);
}
return hash('sha256', $string);
}
} }

BIN
favicon.ico
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 518 B

76
index.php
View File

@ -34,37 +34,9 @@ $grille = new Grille($hauteur, $largeur);
<meta charset="utf-8"> <meta charset="utf-8">
<title>Mots croisés</title> <title>Mots croisés</title>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<link rel="icon" href="favicon.ico">
</head> </head>
<body> <body>
<h1>
<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>
</h1>
<form id="grilleForm" class="grille"> <form id="grilleForm" class="grille">
<table> <table>
<tr> <tr>
@ -111,24 +83,22 @@ $grille = new Grille($hauteur, $largeur);
<script> <script>
const inputs = Array.from(grilleForm.querySelectorAll('input[type="text"]')) const inputs = Array.from(grilleForm.querySelectorAll('input[type="text"]'))
let largeur = <?= $largeur ?>; let largeur = <?= $largeur ?>;
let nb_cases = inputs.length; let nb_cases = inputs.length
let index = 0; let index = 0
async function sha256(text) {
const encoder = new TextEncoder();
const data = encoder.encode(text);
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('');
}
inputs.forEach(input => { inputs.forEach(input => {
input.index = index++ input.index = index++
input.onfocus = function() {
input.onfocus = function(event) { this.select();
input.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) { input.onkeydown = function(event) {
switch (event.key) { switch (event.key) {
case "ArrowUp": case "ArrowUp":
@ -145,27 +115,7 @@ $grille = new Grille($hauteur, $largeur);
break; break;
} }
} }
input.oninput = function(event) {
this.value = this.value.toUpperCase()
if (!input.checkValidity()) {
input.value = ""
}
if (grilleForm.checkValidity()) {
sha256(inputs.map(input => input.value).join("")).then(
hash => {
if (hash == "<?= $grille->hash() ?>") {
alert("Bravo ! Vous avez trouvé la grille !")
if (confirm("Bravo ! \nUne nouvelle partie ?")) {
location = "."
}
}
}
)
}
}
}) })
// <?= $grille->hash() ?>
</script> </script>
</html> </html>

41
style.css
View File

@ -7,18 +7,9 @@ body {
justify-content: space-evenly; justify-content: space-evenly;
} }
h1 table { .grille {
margin: auto; margin: 2rem auto;
line-height: 0.7; width: unset;
}
h1 td {
width: 0.7em;
}
h1, h2 {
font-variant-caps: petite-caps;
text-align: center;
} }
.grille table { .grille table {
@ -26,36 +17,35 @@ h1, h2 {
margin: 0 auto; margin: 0 auto;
} }
.grille tr:nth-of-type(2) td { tr:nth-of-type(2) td {
border-top: 3px solid black; border-top: 3px solid black;
} }
.grille tr:last-of-type td { tr:last-of-type td {
border-bottom: 3px solid black; border-bottom: 3px solid black;
} }
.grille td:first-of-type { td:first-of-type {
border-left: 3px solid black; border-left: 3px solid black;
} }
.grille td:last-child { td:last-child {
border-right: 3px solid black; border-right: 3px solid black;
} }
.grille td { td {
border: 1px solid black; border: 1px solid black;
padding: 2px; padding: 2px;
} }
.grille th, th, td {
.grille td {
width: 30px; width: 30px;
height: 30px; height: 30px;
text-align: center; text-align: center;
} }
.grille .case.noire { .case.noire {
background-color: black; background-color: black;
} }
.grille input { input {
width: 100%; width: 100%;
height: 100%; height: 100%;
border: none; border: none;
@ -64,7 +54,7 @@ h1, h2 {
font-size: 1.2em; font-size: 1.2em;
} }
.grille input[disabled] { input[disabled] {
background-color: black; background-color: black;
} }
@ -78,6 +68,11 @@ h1, h2 {
width: 45%; width: 45%;
} }
.definitions li::marker { .definitions h2 {
font-variant-caps: petite-caps;
text-align: center;
}
li::marker {
font-weight: bold; font-weight: bold;
} }