deblan/sutom
deblan/sutom
1
0
Fork 0
mirror of https://framagit.org/JonathanMM/sutom.git synced 2024-04-28 12:12:55 +02:00
Code Issues Projects Releases Wiki Activity

Close #2 : Réecriture des règles

Browse source
This commit is contained in:
JonathanMM 2022-01-30 14:41:21 +01:00
parent 53b9a0f4b7
commit d125212d19
3 changed files with 49 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
public/index.html
View file

@ -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>

30
public/jeu.css
View file

@ -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);

37
ts/reglesPanel.ts
View file

@ -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"]);