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

styler le bouton comme un lien

Browse Source
This commit is contained in:
Adrien MALINGREY
2025-04-24 21:00:33 +02:00
parent d1d189a0db
commit 2aba951d3b
3 changed files with 84 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
index.php
View File

@ -49,38 +49,35 @@ $grille = new Grille($hauteur, $largeur, $id);
</head> </head>
<body> <body>
<h1> <form id="grilleForm" method="get" location=".">
<table> <h1>
<tbody> <table>
<tr> <tbody>
<td colspan="2"></td> <tr>
<td>M</td> <td colspan="2"></td>
</tr> <td>M</td>
<tr> </tr>
<td>c</td> <tr>
<td>r</td> <td>c</td>
<td>o</td> <td>r</td>
<td>i</td> <td>o</td>
<td>s</td> <td>i</td>
<td>é</td> <td>s</td>
<td>s</td> <td>é</td>
</tr> <td>s</td>
<tr> </tr>
<td colspan="2"></td> <tr>
<td>t</td> <td colspan="2"></td>
</tr> <td>t</td>
<tr> </tr>
<td colspan="2"></td> <tr>
<td>s</td> <td colspan="2"></td>
</tr> <td>s</td>
</tbody> </tr>
</table> </tbody>
</h1> </table>
<form id="grilleForm" class="grille" method="get" location="."> </h1>
<input type="hidden" id="lignes" name="lignes" value="<?= $hauteur ?>" /> <table class="grille">
<input type="hidden" id="colonnes" name="colonnes" value="<?= $largeur ?>" />
<input type="hidden" id="solution_hashee" value="<?= $grille->hash() ?>" />
<table>
<tr> <tr>
<th></th> <th></th>
<?php for ($c = 0; $c < $largeur; $c++): ?> <?php for ($c = 0; $c < $largeur; $c++): ?>
@ -95,35 +92,38 @@ $grille = new Grille($hauteur, $largeur, $id);
<?php if ($grille->grille[$l][$c] == " "): ?> <?php if ($grille->grille[$l][$c] == " "): ?>
<input type="text" maxlength="1" size="1" value=" " disabled /> <input type="text" maxlength="1" size="1" value=" " disabled />
<?php else: ?> <?php else: ?>
<input type="text" maxlength="1" size="1" required pattern="[A-Z]" /> <input type="text" maxlength="1" size="1" pattern="[A-Z]" />
<?php endif; ?> <?php endif; ?>
</td> </td>
<?php endfor; ?> <?php endfor; ?>
</tr> </tr>
<?php endfor; ?> <?php endfor; ?>
</table> </table>
</form> <div class="definitions">
<div class="definitions"> <div class="horizontales">
<div class="horizontales"> <h2>Horizontalement</h2>
<h2>Horizontalement</h2> <ol>
<ol> <?php for ($l = 0; $l < $hauteur; $l++): ?>
<?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; ?>
<?php endfor; ?> </ol>
</ol> </div>
<div class="verticales">
<h2>Verticalement</h2>
<ol type="A">
<?php for ($c = 0; $c < $largeur; $c++): ?>
<li><?= $dico[$grille->get_colonne($c, $hauteur)] ?></li>
<?php endfor; ?>
</ol>
</div>
</div> </div>
<div class="verticales">
<h2>Verticalement</h2>
<ol type="A">
<?php for ($c = 0; $c < $largeur; $c++): ?>
<li><?= $dico[$grille->get_colonne($c, $hauteur)] ?></li>
<?php endfor; ?>
</ol>
</div>
</div>
<footer><a href=".">Nouvelle grille</a></footer> <input type="hidden" id="lignes" name="lignes" value="<?= $hauteur ?>" />
<input type="hidden" id="colonnes" name="colonnes" value="<?= $largeur ?>" />
<input type="hidden" id="solution_hashee" value="<?= $grille->hash() ?>" />
<button type="submit">Nouvelle grille</button>
</form>
<script src="script.js"></script> <script src="script.js"></script>
</body> </body>

2
script.js
View File

@ -40,7 +40,7 @@ inputs.forEach(input => {
if (!input.checkValidity()) { if (!input.checkValidity()) {
input.value = ''; input.value = '';
} }
if (grilleForm.checkValidity()) { if (inputs.every(input => input.value.length == 1) && grilleForm.checkValidity()) {
sha256(inputs.map(input => input.value).join('')).then(hash => { sha256(inputs.map(input => input.value).join('')).then(hash => {
if (hash == solution_hashee.value) { if (hash == solution_hashee.value) {
if (confirm('Bravo ! \nUne nouvelle partie ?')) { if (confirm('Bravo ! \nUne nouvelle partie ?')) {

36
style.css
View File

@ -1,16 +1,20 @@
body { body {
margin: 0; margin: 0;
padding: 0;
font-family: Times, 'Times New Roman', Georgia, serif;
}
form {
padding: 1rem; padding: 1rem;
height: calc(100vh - 2rem); height: calc(100vh - 2rem);
display: flex; display: flex;
flex-flow: column; flex-flow: column;
justify-content: space-evenly; justify-content: space-evenly;
font-family: Times, "Times New Roman", Georgia, serif;
} }
h1 table { h1 table {
margin: auto; margin: auto;
line-height: 0.7; line-height: 0.8;
} }
h1 td { h1 td {
@ -23,7 +27,7 @@ h2 {
text-align: center; text-align: center;
} }
.grille table { table.grille {
border-collapse: collapse; border-collapse: collapse;
margin: 0 auto; margin: 0 auto;
} }
@ -38,7 +42,7 @@ h2 {
.grille td { .grille td {
border: 1px solid black; border: 1px solid black;
padding: 2px; padding: 2px;
font-family: "Comic Sans MS", "Comic Sans", cursive, sans; font-family: 'Comic Sans MS', 'Comic Sans', cursive, sans;
} }
.grille tr:nth-of-type(2) td { .grille tr:nth-of-type(2) td {
@ -89,6 +93,26 @@ h2 {
font-weight: bold; font-weight: bold;
} }
footer { button[type='submit'] {
text-align: center; width: fit-content;
margin: 0 auto;
}
button[type='submit'] {
width: fit-content;
margin: 0 auto;
border: none;
background: none;
font-family: inherit;
font-size: 1em;
text-decoration: underline;
}
button[type="submit"]:hover {
cursor: pointer;
color: #2a6496;
}
button[type="submit"]:active {
color: darkorchid;
} }