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

Amélioration de l'affichage de la popup

Browse source
This commit is contained in:
JonathanMM 2022-01-31 19:20:29 +01:00
parent 1d48c6de99
commit 98eb3b3f39
2 changed files with 46 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

63
public/jeu.css
View file

@ -40,22 +40,6 @@ body {
height: 100%;
}
@media (max-width: 1024px) {
#contenu {
margin-left: 2px;
margin-right: 2px;
}
}
@media (max-height: 640px) {
:root {
--taille-cellule: 36px;
}
body {
font-size: 24px;
}
}
header {
display: grid;
grid-template-columns: 2fr 6fr 2fr;
@ -210,12 +194,6 @@ h1 {
font-size: 32px;
}
@media (max-height: 640px) {
.regles-panel table {
font-size: 24px;
}
}
.regles-panel #panel-fenetre {
font-size: 14px;
text-align: left;
@ -286,12 +264,6 @@ h1 {
height: 32px;
}
@media (max-width: 1024px) {
#panel-fenetre {
width: 90%;
}
}
.config-panel #panel-fenetre-contenu {
display: flex;
flex-direction: column;
@ -329,3 +301,38 @@ h1 {
text-align: left;
padding-left: 0.5em;
}
@media (max-width: 1024px) {
#contenu {
margin-left: 2px;
margin-right: 2px;
}
#panel-fenetre {
width: 90%;
overflow-y: auto;
max-height: calc(100vh - 4em - 2px);
}
}
@media (max-width: 500px) {
:root {
--taille-cellule: 42px;
}
body,
.regles-panel table {
font-size: 28px;
}
}
@media (max-height: 640px), (max-width: 400px) {
:root {
--taille-cellule: 36px;
}
body,
.regles-panel table {
font-size: 24px;
}
}

22
ts/finDePartiePanel.ts
View file

@ -103,22 +103,22 @@ export default class FinDePartiePanel {
let stats = Sauvegardeur.chargerSauvegardeStats();
if (stats) {
contenu +=
'<div class="stats-area"><div class="stats-ligne"><div class="stats-cellule">Nombre de parties :</div>' +
'<div class="stats-area"><div class="stats-ligne"><div class="stats-cellule">Parties :</div>' +
`<div class="stats-cellule">${stats.partiesGagnees}/${stats.partiesJouees}</div>` +
"</div>" +
`<div class="stats-ligne"><div class="stats-cellule">1/6 :</div><div class="stats-cellule">${stats.repartition[1]}</div></div>` +
`<div class="stats-ligne"><div class="stats-cellule">2/6 :</div><div class="stats-cellule">${stats.repartition[2]}</div></div>` +
`<div class="stats-ligne"><div class="stats-cellule">3/6 :</div><div class="stats-cellule">${stats.repartition[3]}</div></div>` +
`<div class="stats-ligne"><div class="stats-cellule">4/6 :</div><div class="stats-cellule">${stats.repartition[4]}</div></div>` +
`<div class="stats-ligne"><div class="stats-cellule">5/6 :</div><div class="stats-cellule">${stats.repartition[5]}</div></div>` +
`<div class="stats-ligne"><div class="stats-cellule">6/6 :</div><div class="stats-cellule">${stats.repartition[6]}</div></div>` +
`<div class="stats-ligne"><div class="stats-cellule">-/6 :</div><div class="stats-cellule">${stats.repartition["-"]}</div></div>` +
`<div class="stats-ligne"><div class="stats-cellule">1/6 :</div><div class="stats-cellule">${stats.repartition[1]}</div></div>` +
`<div class="stats-ligne"><div class="stats-cellule">2/6 :</div><div class="stats-cellule">${stats.repartition[2]}</div></div>` +
`<div class="stats-ligne"><div class="stats-cellule">3/6 :</div><div class="stats-cellule">${stats.repartition[3]}</div></div>` +
`<div class="stats-ligne"><div class="stats-cellule">4/6 :</div><div class="stats-cellule">${stats.repartition[4]}</div></div>` +
`<div class="stats-ligne"><div class="stats-cellule">5/6 :</div><div class="stats-cellule">${stats.repartition[5]}</div></div>` +
`<div class="stats-ligne"><div class="stats-cellule">6/6 :</div><div class="stats-cellule">${stats.repartition[6]}</div></div>` +
`<div class="stats-ligne"><div class="stats-cellule">-/6 :</div><div class="stats-cellule">${stats.repartition["-"]}</div></div>` +
`<div class="stats-ligne"><div class="stats-cellule">Moyenne :</div><div class="stats-cellule">${this.getMoyenne(stats.repartition)}</div></div>` +
'<div class="stats-ligne"><div class="stats-cellule">Lettres :</div>' +
'<div class="stats-cellule">' +
`${stats.lettresRepartitions.bienPlace} 🟥 ` +
`${stats.lettresRepartitions.malPlace} 🟡 ` +
`${stats.lettresRepartitions.nonTrouve} 🟦` +
`${stats.lettresRepartitions.bienPlace} 🟥 ` +
`${stats.lettresRepartitions.malPlace} 🟡 ` +
`${stats.lettresRepartitions.nonTrouve} 🟦` +
"</div>" +
"</div>" +
"</div>";