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 id="panel-fenetre-contenu"></div>
|
||||||
</div>
|
</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 id="input-area"></div>
|
||||||
<div style="display: none">
|
<div style="display: none">
|
||||||
<audio preload src="sons/lettre-non-trouve.wav" id="son-lettre-non-trouve"></audio>
|
<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));
|
min-height: calc(6 * var(--taille-cellule) + 12 * var(--epaisseur-bordure-cellule));
|
||||||
}
|
}
|
||||||
|
|
||||||
#grille table {
|
.grille table {
|
||||||
border-spacing: 0;
|
border-spacing: 0;
|
||||||
|
background-color: var(--couleur-fond-grille);
|
||||||
}
|
}
|
||||||
|
|
||||||
#grille td {
|
.grille td {
|
||||||
width: calc(var(--taille-cellule) - 2 * var(--epaisseur-padding-cellule));
|
width: calc(var(--taille-cellule) - 2 * var(--epaisseur-padding-cellule));
|
||||||
height: calc(var(--taille-cellule) - 2 * var(--epaisseur-padding-cellule));
|
height: calc(var(--taille-cellule) - 2 * var(--epaisseur-padding-cellule));
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
@ -106,11 +107,11 @@ h1 {
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
#grille td:not(.resultat) {
|
.grille td:not(.resultat) {
|
||||||
background-color: var(--couleur-fond-grille);
|
background-color: var(--couleur-fond-grille);
|
||||||
}
|
}
|
||||||
|
|
||||||
#grille td.resultat::after {
|
.grille td.resultat::after {
|
||||||
width: calc(var(--taille-cellule));
|
width: calc(var(--taille-cellule));
|
||||||
height: calc(var(--taille-cellule));
|
height: calc(var(--taille-cellule));
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
@ -120,16 +121,16 @@ h1 {
|
||||||
content: " ";
|
content: " ";
|
||||||
}
|
}
|
||||||
|
|
||||||
#grille td.mal-place::after {
|
.grille td.mal-place::after {
|
||||||
background-color: var(--couleur-mal-place);
|
background-color: var(--couleur-mal-place);
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
#grille td.bien-place::after {
|
.grille td.bien-place::after {
|
||||||
background-color: var(--couleur-bien-place);
|
background-color: var(--couleur-bien-place);
|
||||||
}
|
}
|
||||||
|
|
||||||
#grille td.non-trouve::after {
|
.grille td.non-trouve::after {
|
||||||
background-color: var(--couleur-fond-grille);
|
background-color: var(--couleur-fond-grille);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -205,11 +206,26 @@ h1 {
|
||||||
cursor: initial;
|
cursor: initial;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.regles-panel table {
|
||||||
|
font-size: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-height: 640px) {
|
||||||
|
.regles-panel table {
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.regles-panel #panel-fenetre {
|
.regles-panel #panel-fenetre {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.regles-panel #panel-fenetre-contenu p,
|
||||||
|
.regles-panel #panel-fenetre-contenu div {
|
||||||
|
padding: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
#panel-area a,
|
#panel-area a,
|
||||||
#panel-area a:visited {
|
#panel-area a:visited {
|
||||||
color: var(--couleur-police);
|
color: var(--couleur-police);
|
||||||
|
|
|
@ -21,18 +21,31 @@ export default class ReglesPanel {
|
||||||
public afficher(): void {
|
public afficher(): void {
|
||||||
let titre = "Règles";
|
let titre = "Règles";
|
||||||
let contenu =
|
let contenu =
|
||||||
'<p> \
|
"<p>" +
|
||||||
Vous avez six essais pour deviner le mot du jour.<br /> \
|
"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 /> \
|
"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 /> \
|
"Le mot change chaque jour. Évitez donc les spoils et privilégiez le bouton de partage.<br />" +
|
||||||
les lettres entourées d\'un cercle jaune sont mal placées (mais présentes dans le mot).<br /> \
|
"</p>" +
|
||||||
Les lettres qui restent sur fond bleu ne sont pas dans le mot.<br /> \
|
'<div class="grille">' +
|
||||||
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 /> \
|
"<table>" +
|
||||||
En cas de soucis, vous pouvez contacter <a href="https://twitter.com/Jonamaths">@Jonamaths</a> sur twitter. − \
|
"<tr>" +
|
||||||
<a target="_blank" href="https://framagit.org/JonathanMM/sutom">Page du projet</a><br /> \
|
'<td class="resultat non-trouve">R</td>' +
|
||||||
Basé sur l\'excellent <a target="_blank" href="https://www.powerlanguage.co.uk/wordle/">Wordle</a> et le regretté Motus.<br /> \
|
'<td class="resultat non-trouve">A</td>' +
|
||||||
Merci à Emmanuel pour l\'aide sur les mots à trouver, et à GaranceAmarante pour l\'aide sur le dictionnaire. \
|
'<td class="resultat bien-place">T</td>' +
|
||||||
</p>';
|
'<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.setContenu(titre, contenu);
|
||||||
this._panelManager.setClasses(["regles-panel"]);
|
this._panelManager.setClasses(["regles-panel"]);
|
||||||
|
|
Loading…
Reference in a new issue