Close #19 : Ajout de statistiques

public/jeu.css

@@ -302,3 +302,30 @@ h1 {
   display: flex;
   justify-content: space-between;
 }
+
+.stats-area {
+  display: table;
+  padding-left: 0.5em;
+}
+
+.stats-ligne {
+  display: table-row;
+}
+
+.stats-cellule {
+  display: table-cell;
+}
+
+.stats-cellule:first-child {
+  text-align: right;
+}
+
+.stats-cellule:not(:first-child) {
+  padding-left: 0.5em;
+  text-align: left;
+}
+
+.fin-de-partie-panel-phrase {
+  text-align: left;
+  padding-left: 0.5em;
+}

ts/entites/sauvegardeStats.ts

@@ -1,5 +1,51 @@
 export default class SauvegardeStats {
-  dernierePartie?: Date = new Date();
+  public static Default: SauvegardeStats = {
+    partiesJouees: 0,
+    partiesGagnees: 0,
+    dernierePartie: new Date(),
+    repartition: {
+      1: 0,
+      2: 0,
+      3: 0,
+      4: 0,
+      5: 0,
+      6: 0,
+      "-": 0,
+    },
+    lettresRepartitions: {
+      bienPlace: 0,
+      malPlace: 0,
+      nonTrouve: 0,
+    },
+  };
+
+  dernierePartie: Date = new Date();
   partiesJouees: number = 0;
   partiesGagnees: number = 0;
+  repartition: {
+    1: number;
+    2: number;
+    3: number;
+    4: number;
+    5: number;
+    6: number;
+    "-": number;
+  } = {
+    1: 0,
+    2: 0,
+    3: 0,
+    4: 0,
+    5: 0,
+    6: 0,
+    "-": 0,
+  };
+  lettresRepartitions: {
+    bienPlace: number;
+    malPlace: number;
+    nonTrouve: number;
+  } = {
+    bienPlace: 0,
+    malPlace: 0,
+    nonTrouve: 0,
+  };
 }

ts/finDePartiePanel.ts

@@ -2,6 +2,7 @@ import LettreResultat from "./entites/lettreResultat";
 import { LettreStatut } from "./entites/lettreStatut";
 import NotificationMessage from "./notificationMessage";
 import PanelManager from "./panelManager";
+import Sauvegardeur from "./sauvegardeur";
 
 export default class FinDePartiePanel {
   private readonly _datePartie: Date;
@@ -73,30 +74,66 @@ export default class FinDePartiePanel {
 
   public afficher(): void {
     let titre: string;
-    let contenu: string;
+    let contenu: string = "";
+
     if (!this._partieEstFinie) {
       titre = "Statistiques";
-      contenu = "Vous n'avez pas encore fini votre partie du jour";
+      contenu += '<p class="fin-de-partie-panel-phrase">Vous n\'avez pas encore fini votre partie du jour.</p>';
     } else {
       if (this._estVictoire) {
         titre = "Félicitations";
-        contenu = "<p>Bravo, tu as gagné. Reviens demain pour une nouvelle grille.</p>";
+        contenu += '<p class="fin-de-partie-panel-phrase">Bravo, tu as gagné. Reviens demain pour une nouvelle grille.</p>';
       } else {
         titre = "Perdu";
-        contenu = "<p> \
-          Le mot a trouver était : " + this._motATrouver + "<br /> \
+        contenu +=
+          '<p class="fin-de-partie-panel-phrase"> \
+          Le mot a trouver était : ' +
+          this._motATrouver +
+          "<br /> \
           Peut être feras-tu mieux demain ? \
         </p>";
       }
       contenu +=
-        '<p>Résumé de ta partie <a href="#" id="fin-de-partie-panel-resume-bouton">Partager</a></p> \
+        '<p>Résumé de ta partie − <a href="#" id="fin-de-partie-panel-resume-bouton">Partager</a></p> \
           <pre id="fin-de-partie-panel-resume">' +
         this._resumeTexte +
         "</pre>";
     }
+
+    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-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">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} 🟦` +
+        "</div>" +
+        "</div>" +
+        "</div>";
+    }
+
     this._panelManager.setContenu(titre, contenu);
     this._panelManager.setClasses(["fin-de-partie-panel"]);
     if (this._partieEstFinie) this.attacherPartage();
     this._panelManager.afficherPanel();
   }
+
+  private getMoyenne(repartition: { 1: number; 2: number; 3: number; 4: number; 5: number; 6: number; "-": number }): string {
+    return (
+      (repartition[1] * 1 + repartition[2] * 2 + repartition[3] * 3 + repartition[4] * 4 + repartition[5] * 5 + repartition[6] * 6 + repartition["-"] * 6) /
+      (repartition[1] + repartition[2] + repartition[3] + repartition[4] + repartition[5] + repartition[6] + repartition["-"])
+    ).toLocaleString("fr-FR", { maximumFractionDigits: 2 });
+  }
 }

ts/gestionnaire.ts

@@ -32,7 +32,7 @@ export default class Gestionnaire {
   private _compositionMotATrouver: { [lettre: string]: number } = {};
   private _maxNbPropositions: number = 6;
   private _datePartieEnCours: Date;
-  private _stats: SauvegardeStats = { partiesJouees: 0, partiesGagnees: 0 };
+  private _stats: SauvegardeStats = SauvegardeStats.Default;
   private _config: Configuration = Configuration.Default;
 
   public constructor() {
@@ -69,7 +69,7 @@ export default class Gestionnaire {
   }
 
   private chargerPartieEnCours(): PartieEnCours {
-    this._stats = Sauvegardeur.chargerSauvegardeStats() ?? { partiesJouees: 0, partiesGagnees: 0 };
+    this._stats = Sauvegardeur.chargerSauvegardeStats() ?? SauvegardeStats.Default;
 
     let sauvegardePartieEnCours = Sauvegardeur.chargerSauvegardePartieEnCours();
     if (sauvegardePartieEnCours) return sauvegardePartieEnCours;
@@ -86,7 +86,28 @@ export default class Gestionnaire {
 
   private enregistrerPartieDansStats(): void {
     this._stats.partiesJouees++;
-    if (this._resultats.some((resultat) => resultat.every((item) => item.statut === LettreStatut.BienPlace))) this._stats.partiesGagnees++;
+    let estVictoire = this._resultats.some((resultat) => resultat.every((item) => item.statut === LettreStatut.BienPlace));
+    if (estVictoire) {
+      this._stats.partiesGagnees++;
+      let nbEssais = this._resultats.length;
+      if (nbEssais >= 1 && nbEssais <= 6) {
+        this._stats.repartition[nbEssais as 1 | 2 | 3 | 4 | 5 | 6]++;
+      }
+    } else {
+      this._stats.repartition["-"]++;
+    }
+    this._stats.lettresRepartitions.bienPlace += this._resultats.reduce((accumulateur: number, mot: Array<LettreResultat>) => {
+      accumulateur += mot.filter((item) => item.statut == LettreStatut.BienPlace).length;
+      return accumulateur;
+    }, 0);
+    this._stats.lettresRepartitions.malPlace += this._resultats.reduce((accumulateur: number, mot: Array<LettreResultat>) => {
+      accumulateur += mot.filter((item) => item.statut == LettreStatut.MalPlace).length;
+      return accumulateur;
+    }, 0);
+    this._stats.lettresRepartitions.nonTrouve += this._resultats.reduce((accumulateur: number, mot: Array<LettreResultat>) => {
+      accumulateur += mot.filter((item) => item.statut == LettreStatut.NonTrouve).length;
+      return accumulateur;
+    }, 0);
     this._stats.dernierePartie = this._datePartieEnCours;
 
     Sauvegardeur.sauvegarderStats(this._stats);
@@ -110,7 +131,7 @@ export default class Gestionnaire {
     return composition;
   }
 
-  public verifierMot(mot: string, skipAnimation: boolean = false): void {
+  public verifierMot(mot: string, chargementPartie: boolean = false): void {
     mot = this._dictionnaire.nettoyerMot(mot);
     //console.debug(mot + " => " + (this._dictionnaire.estMotValide(mot) ? "Oui" : "non"));
     if (mot.length !== this._motATrouver.length) {
@@ -133,11 +154,11 @@ export default class Gestionnaire {
 
     if (isBonneReponse || this._propositions.length === this._maxNbPropositions) {
       this._finDePartiePanel.genererResume(isBonneReponse, this._motATrouver, this._resultats);
-      this.enregistrerPartieDansStats();
+      if (!chargementPartie) this.enregistrerPartieDansStats();
     }
 
     if (this._grille)
-      this._grille.validerMot(mot, resultats, isBonneReponse, skipAnimation, () => {
+      this._grille.validerMot(mot, resultats, isBonneReponse, chargementPartie, () => {
         if (this._input) {
           this._input.updateClavier(resultats);
           if (isBonneReponse || this._propositions.length === this._maxNbPropositions) {

ts/sauvegardeur.ts

@@ -4,7 +4,7 @@ import SauvegardePartie from "./entites/sauvegardePartie";
 import SauvegardeStats from "./entites/sauvegardeStats";
 
 export default class Sauvegardeur {
-  private static readonly _cleStats = "stats";
+  private static readonly _cleStats = "statistiques";
   private static readonly _clePartieEnCours = "partieEnCours";
   private static readonly _cleConfiguration = "configuration";