Ajout d'un écran pour afficher les nouveautés

public/jeu.css

@@ -254,7 +254,8 @@ h1 {
   font-size: 32px;
 }
 
-.regles-panel #panel-fenetre {
+.regles-panel #panel-fenetre,
+.notes-panel #panel-fenetre {
   font-size: 14px;
   text-align: left;
 }

ts/entites/configuration.ts

@@ -11,6 +11,7 @@ export default class Configuration {
     disposition: ClavierDisposition.Azerty,
     theme: Theme.Sombre,
     haptique: false,
+    changelog: 0,
   };
 
   hasAudio: boolean = false;
@@ -20,4 +21,5 @@ export default class Configuration {
   disposition: ClavierDisposition = ClavierDisposition.Azerty;
   theme: Theme = Theme.Sombre;
   haptique: boolean = false;
+  changelog: number = 0;
 }

ts/gestionnaire.ts

@@ -16,6 +16,7 @@ import AudioPanel from "./audioPanel";
 import ThemeManager from "./themeManager";
 import InstanceConfiguration from "./instanceConfiguration";
 import LienHelper from "./lienHelper";
+import NotesMaJPanel from "./notesMaJPanel";
 
 export default class Gestionnaire {
   private _grille: Grille | null = null;
@@ -28,6 +29,7 @@ export default class Gestionnaire {
   private readonly _panelManager: PanelManager;
   private readonly _themeManager: ThemeManager;
   private readonly _audioPanel: AudioPanel;
+  private readonly _notesMaJPanel: NotesMaJPanel;
 
   private _motATrouver: string = "";
   private _compositionMotATrouver: { [lettre: string]: number } = {};
@@ -67,6 +69,7 @@ export default class Gestionnaire {
     this._reglesPanel = new ReglesPanel(this._panelManager);
     this._finDePartiePanel = new FinDePartiePanel(this._datePartieEnCours, this._panelManager, this);
     this._configurationPanel = new ConfigurationPanel(this._panelManager, this._audioPanel, this._themeManager);
+    this._notesMaJPanel = new NotesMaJPanel(this._panelManager);
 
     this.choisirMot(this._idPartieEnCours, this._datePartieEnCours)
       .then(async (mot) => {
@@ -265,7 +268,12 @@ export default class Gestionnaire {
   }
 
   private afficherReglesSiNecessaire(): void {
-    if (this._config.afficherRegles !== undefined && !this._config.afficherRegles) return;
+    if (this._config.afficherRegles !== undefined && !this._config.afficherRegles) {
+      if (this._config.changelog === undefined || this._config.changelog < InstanceConfiguration.derniereMiseAJour) {
+        this._notesMaJPanel.afficher(this._config.changelog ?? 0);
+      }
+      return;
+    }
 
     this._reglesPanel.afficher();
   }

ts/instanceConfiguration.ts

@@ -1,4 +1,5 @@
 export default class InstanceConfiguration {
   public static readonly dateOrigine = new Date(2022, 0, 8); // Attention, c'est du js/ts, donc pour le mois, il faut faire -1, Janvier = 0 !
   public static readonly idPartieParDefaut = "34ccc522-c264-4e51-b293-fd5bd60ef7aa";
+  public static readonly derniereMiseAJour = 500;
 }

ts/notesMaJPanel.ts

@@ -0,0 +1,75 @@
+import Configuration from "./entites/configuration";
+import InstanceConfiguration from "./instanceConfiguration";
+import PanelManager from "./panelManager";
+import Sauvegardeur from "./sauvegardeur";
+
+export default class NotesMaJPanel {
+  private readonly _panelManager: PanelManager;
+
+  private readonly _notes = [
+    {
+      version: 500,
+      notes: [
+        "Ajout de la possibilité d'avoir des mots de 10 lettres",
+        "Revue du design général de l'application",
+        "Refonte du mode clair",
+        "Refonte de l'affichage des statistiques",
+        "Ajout d'un bouton pour partager ses statistiques",
+        "Ajout d'un bouton pour terminer la partie de la veille",
+        "Ajout d'une option pour avoir le clavier haptique",
+        "Ajout d'une option pour transférer ses statistiques sur un autre navigateur",
+      ],
+    },
+  ];
+
+  public constructor(panelManager: PanelManager) {
+    this._panelManager = panelManager;
+  }
+
+  public afficher(versionOrigine: number): void {
+    let titre = "Notes de mises à jour";
+
+    // On affiche du plus récent au plus ancien
+    const notesAAfficher = this._notes
+      .filter((note) => note.version > versionOrigine)
+      .sort((a, b) => {
+        if (b.version > a.version) return 1;
+        if (b.version < a.version) return -1;
+        return 0;
+      });
+
+    if (notesAAfficher.length === 0) return;
+
+    const notesArea = document.createElement("div");
+
+    for (let note of notesAAfficher) {
+      const divNote = document.createElement("div");
+
+      const titre = document.createElement("h3");
+      titre.innerText = `Version ${note.version}`;
+      divNote.appendChild(titre);
+
+      const listeNotes = document.createElement("ul");
+
+      for (let item of note.notes) {
+        const itemLi = document.createElement("li");
+        itemLi.innerText = item;
+        listeNotes.appendChild(itemLi);
+      }
+
+      divNote.appendChild(listeNotes);
+
+      notesArea.appendChild(divNote);
+    }
+
+    this._panelManager.setContenuHtmlElement(titre, notesArea);
+    this._panelManager.setClasses(["notes-panel"]);
+    this._panelManager.setCallbackFermeture(() => {
+      Sauvegardeur.sauvegarderConfig({
+        ...(Sauvegardeur.chargerConfig() ?? Configuration.Default),
+        changelog: InstanceConfiguration.derniereMiseAJour,
+      });
+    });
+    this._panelManager.afficherPanel();
+  }
+}