mirror of
https://framagit.org/JonathanMM/sutom.git
synced 2024-05-23 16:12:14 +02:00
Close #2 : Réecriture des règles
This commit is contained in:
parent
53b9a0f4b7
commit
d125212d19
|
@ -56,7 +56,7 @@
|
|||
<div id="panel-fenetre-contenu"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="grille">Chargement de la grille en cours…</div>
|
||||
<div id="grille" class="grille">Chargement de la grille en cours…</div>
|
||||
<div id="input-area"></div>
|
||||
<div style="display: none">
|
||||
<audio preload src="sons/lettre-non-trouve.wav" id="son-lettre-non-trouve"></audio>
|
||||
|
|
|
@ -91,11 +91,12 @@ h1 {
|
|||
min-height: calc(6 * var(--taille-cellule) + 12 * var(--epaisseur-bordure-cellule));
|
||||
}
|
||||
|
||||
#grille table {
|
||||
.grille table {
|
||||
border-spacing: 0;
|
||||
background-color: var(--couleur-fond-grille);
|
||||
}
|
||||
|
||||
#grille td {
|
||||
.grille td {
|
||||
width: calc(var(--taille-cellule) - 2 * var(--epaisseur-padding-cellule));
|
||||
height: calc(var(--taille-cellule) - 2 * var(--epaisseur-padding-cellule));
|
||||
text-align: center;
|
||||
|
@ -106,11 +107,11 @@ h1 {
|
|||
z-index: 0;
|
||||
}
|
||||
|
||||
#grille td:not(.resultat) {
|
||||
.grille td:not(.resultat) {
|
||||
background-color: var(--couleur-fond-grille);
|
||||
}
|
||||
|
||||
#grille td.resultat::after {
|
||||
.grille td.resultat::after {
|
||||
width: calc(var(--taille-cellule));
|
||||
height: calc(var(--taille-cellule));
|
||||
position: absolute;
|
||||
|
@ -120,16 +121,16 @@ h1 {
|
|||
content: " ";
|
||||
}
|
||||
|
||||
#grille td.mal-place::after {
|
||||
.grille td.mal-place::after {
|
||||
background-color: var(--couleur-mal-place);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
#grille td.bien-place::after {
|
||||
.grille td.bien-place::after {
|
||||
background-color: var(--couleur-bien-place);
|
||||
}
|
||||
|
||||
#grille td.non-trouve::after {
|
||||
.grille td.non-trouve::after {
|
||||
background-color: var(--couleur-fond-grille);
|
||||
}
|
||||
|
||||
|
@ -205,11 +206,26 @@ h1 {
|
|||
cursor: initial;
|
||||
}
|
||||
|
||||
.regles-panel table {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
@media (max-height: 640px) {
|
||||
.regles-panel table {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.regles-panel #panel-fenetre {
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.regles-panel #panel-fenetre-contenu p,
|
||||
.regles-panel #panel-fenetre-contenu div {
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
#panel-area a,
|
||||
#panel-area a:visited {
|
||||
color: var(--couleur-police);
|
||||
|
|
|
@ -21,18 +21,31 @@ export default class ReglesPanel {
|
|||
public afficher(): void {
|
||||
let titre = "Règles";
|
||||
let contenu =
|
||||
'<p> \
|
||||
Vous avez six essais pour deviner le mot du jour.<br /> \
|
||||
Vous ne pouvez proposer que des mots commençant par la même lettre que le mot recherché, et qui se trouvent dans notre dictionnaire.<br /> \
|
||||
Les lettres entourées d\'un carré rouge sont bien placées,<br /> \
|
||||
les lettres entourées d\'un cercle jaune sont mal placées (mais présentes dans le mot).<br /> \
|
||||
Les lettres qui restent sur fond bleu ne sont pas dans le mot.<br /> \
|
||||
Il y a un mot par jour, entre 6 et 9 lettres, et il est identique pour tout le monde. Évitez donc les spoils et privilégiez le bouton de partage.<br /> \
|
||||
En cas de soucis, vous pouvez contacter <a href="https://twitter.com/Jonamaths">@Jonamaths</a> sur twitter. − \
|
||||
<a target="_blank" href="https://framagit.org/JonathanMM/sutom">Page du projet</a><br /> \
|
||||
Basé sur l\'excellent <a target="_blank" href="https://www.powerlanguage.co.uk/wordle/">Wordle</a> et le regretté Motus.<br /> \
|
||||
Merci à Emmanuel pour l\'aide sur les mots à trouver, et à GaranceAmarante pour l\'aide sur le dictionnaire. \
|
||||
</p>';
|
||||
"<p>" +
|
||||
"Vous avez six essais pour deviner le mot du jour, entre 6 et 9 lettres, commun à tous.<br />" +
|
||||
"Vous ne pouvez proposer que des mots commençant par la même lettre que le mot recherché, et qui se trouvent dans notre dictionnaire.<br />" +
|
||||
"Le mot change chaque jour. Évitez donc les spoils et privilégiez le bouton de partage.<br />" +
|
||||
"</p>" +
|
||||
'<div class="grille">' +
|
||||
"<table>" +
|
||||
"<tr>" +
|
||||
'<td class="resultat non-trouve">R</td>' +
|
||||
'<td class="resultat non-trouve">A</td>' +
|
||||
'<td class="resultat bien-place">T</td>' +
|
||||
'<td class="resultat non-trouve">I</td>' +
|
||||
'<td class="resultat mal-place">O</td>' +
|
||||
"</tr>" +
|
||||
"</table>" +
|
||||
"Les lettres entourées d'un carré rouge sont bien placées,<br />" +
|
||||
"les lettres entourées d'un cercle jaune sont mal placées (mais présentes dans le mot).<br />" +
|
||||
"Les lettres qui restent sur fond bleu ne sont pas dans le mot.<br />" +
|
||||
"</div>" +
|
||||
"<p>" +
|
||||
'En cas de soucis, vous pouvez contacter <a href="https://twitter.com/Jonamaths">@Jonamaths</a> sur twitter. −' +
|
||||
'<a target="_blank" href="https://framagit.org/JonathanMM/sutom">Page du projet</a><br />' +
|
||||
'Basé sur l\'excellent <a target="_blank" href="https://www.powerlanguage.co.uk/wordle/">Wordle</a> et le regretté Motus.<br />' +
|
||||
"Merci à Emmanuel pour l'aide sur les mots à trouver, et à GaranceAmarante pour l'aide sur le dictionnaire." +
|
||||
"</p>";
|
||||
|
||||
this._panelManager.setContenu(titre, contenu);
|
||||
this._panelManager.setClasses(["regles-panel"]);
|
||||
|
|
Loading…
Reference in a new issue