From 98eb3b3f391a7ee1dd6cd712b7514d34e5a38038 Mon Sep 17 00:00:00 2001
From: JonathanMM <jonathanmm@free.fr>
Date: Mon, 31 Jan 2022 19:20:29 +0100
Subject: [PATCH] =?UTF-8?q?Am=C3=A9lioration=20de=20l'affichage=20de=20la?=
 =?UTF-8?q?=20popup?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/jeu.css         | 63 +++++++++++++++++++++++-------------------
 ts/finDePartiePanel.ts | 22 +++++++--------
 2 files changed, 46 insertions(+), 39 deletions(-)

diff --git a/public/jeu.css b/public/jeu.css
index 0da623c..29ce21a 100644
--- a/public/jeu.css
+++ b/public/jeu.css
@@ -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;
+  }
+}
diff --git a/ts/finDePartiePanel.ts b/ts/finDePartiePanel.ts
index 786d42a..944768a 100644
--- a/ts/finDePartiePanel.ts
+++ b/ts/finDePartiePanel.ts
@@ -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>";