title and hash
This commit is contained in:
parent
c4ab6cb09d
commit
1689b54570
@ -130,4 +130,12 @@ class Grille {
|
||||
unset($this->mots_utilises[$mot_col]);
|
||||
}
|
||||
}
|
||||
|
||||
public function hash() {
|
||||
$string = "";
|
||||
foreach ($this->grille as $ligne) {
|
||||
$string .= implode("", $ligne);
|
||||
}
|
||||
return hash('sha256', $string);
|
||||
}
|
||||
}
|
75
index.php
75
index.php
@ -38,6 +38,33 @@ $grille = new Grille($hauteur, $largeur);
|
||||
</head>
|
||||
|
||||
<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">
|
||||
<table>
|
||||
<tr>
|
||||
@ -84,22 +111,24 @@ $grille = new Grille($hauteur, $largeur);
|
||||
<script>
|
||||
const inputs = Array.from(grilleForm.querySelectorAll('input[type="text"]'))
|
||||
let largeur = <?= $largeur ?>;
|
||||
let nb_cases = inputs.length
|
||||
let index = 0
|
||||
let nb_cases = inputs.length;
|
||||
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 => {
|
||||
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.onfocus = function(event) {
|
||||
input.select();
|
||||
}
|
||||
|
||||
input.onkeydown = function(event) {
|
||||
switch (event.key) {
|
||||
case "ArrowUp":
|
||||
@ -116,7 +145,27 @@ $grille = new Grille($hauteur, $largeur);
|
||||
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>
|
||||
|
||||
</html>
|
35
style.css
35
style.css
@ -6,6 +6,15 @@ body {
|
||||
flex-flow: column;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
h1 table {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
font-variant-caps: petite-caps;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.grille {
|
||||
margin: 2rem auto;
|
||||
@ -17,35 +26,36 @@ body {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
tr:nth-of-type(2) td {
|
||||
.grille tr:nth-of-type(2) td {
|
||||
border-top: 3px solid black;
|
||||
}
|
||||
tr:last-of-type td {
|
||||
.grille tr:last-of-type td {
|
||||
border-bottom: 3px solid black;
|
||||
}
|
||||
td:first-of-type {
|
||||
.grille td:first-of-type {
|
||||
border-left: 3px solid black;
|
||||
}
|
||||
td:last-child {
|
||||
.grille td:last-child {
|
||||
border-right: 3px solid black;
|
||||
}
|
||||
|
||||
td {
|
||||
.grille td {
|
||||
border: 1px solid black;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
th, td {
|
||||
.grille th,
|
||||
.grille td {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.case.noire {
|
||||
.grille .case.noire {
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
input {
|
||||
.grille input {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: none;
|
||||
@ -54,7 +64,7 @@ input {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
input[disabled] {
|
||||
.grille input[disabled] {
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
@ -68,11 +78,6 @@ input[disabled] {
|
||||
width: 45%;
|
||||
}
|
||||
|
||||
.definitions h2 {
|
||||
font-variant-caps: petite-caps;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
li::marker {
|
||||
.definitions li::marker {
|
||||
font-weight: bold;
|
||||
}
|
Loading…
x
Reference in New Issue
Block a user