Possibilité de régler le volume du jeu

ts/audioPanel.ts

@@ -1,4 +1,4 @@
-import Configuration from "./configuration";
+import Configuration from "./entites/configuration";
 import Sauvegardeur from "./sauvegardeur";
 
 export default class AudioPanel {
@@ -20,6 +20,7 @@ export default class AudioPanel {
     this._audioLettreMalPlace = document.getElementById("son-lettre-mal-place") as HTMLAudioElement;
     this._audioLettreNonTrouve = document.getElementById("son-lettre-non-trouve") as HTMLAudioElement;
 
+    this.setVolumeSonore(configuration.volumeSon ?? Configuration.Default.volumeSon);
     this.toggleSon(configuration.hasAudio, true);
 
     this._configAudioBouton.addEventListener(
@@ -49,6 +50,13 @@ export default class AudioPanel {
     }
   }
 
+  public setVolumeSonore(volume: number): void {
+    let volumeTag = volume / 100;
+    this._audioLettreBienPlace.volume = volumeTag;
+    this._audioLettreMalPlace.volume = volumeTag;
+    this._audioLettreNonTrouve.volume = volumeTag;
+  }
+
   public jouerSonLettreBienPlace(callback?: () => void): void {
     this.jouerSon(this._audioLettreBienPlace, callback);
   }

ts/configurationPanel.ts

@@ -1,13 +1,19 @@
-import Configuration from "./configuration";
+import Configuration from "./entites/configuration";
 import PanelManager from "./panelManager";
 import Sauvegardeur from "./sauvegardeur";
+import { VolumeSon } from "./entites/volumeSon";
+import AudioPanel from "./audioPanel";
 
 export default class ConfigurationPanel {
   private readonly _panelManager: PanelManager;
+  private readonly _audioPanel: AudioPanel;
+
   private readonly _configBouton: HTMLElement;
 
-  public constructor(panelManager: PanelManager) {
+  public constructor(panelManager: PanelManager, audioPanel: AudioPanel) {
     this._panelManager = panelManager;
+    this._audioPanel = audioPanel;
+
     this._configBouton = document.getElementById("configuration-config-bouton") as HTMLElement;
 
     this._configBouton.addEventListener(
@@ -21,20 +27,41 @@ export default class ConfigurationPanel {
   public afficher(): void {
     let titre = "Configuration";
     let contenu = document.createElement("div");
+    let config = Sauvegardeur.chargerConfig() ?? Configuration.Default;
     contenu.appendChild(
-      this.genererConfigItem("Volume du son (si activé)", {
-        1: "Faible",
-        2: "Normal",
-        3: "Fort",
-      })
+      this.genererConfigItem(
+        "Volume du son (si activé)",
+        [
+          { value: VolumeSon.Faible.toString(), label: "Faible" },
+          { value: VolumeSon.Normal.toString(), label: "Normal" },
+          { value: VolumeSon.Fort.toString(), label: "Fort" },
+        ],
+        (config.volumeSon ?? Configuration.Default.volumeSon).toString(),
+        (event: Event) => {
+          event.stopPropagation();
+          let volumeSon: VolumeSon = parseInt((event.target as HTMLSelectElement).value);
+
+          this._audioPanel.setVolumeSonore(volumeSon);
+
+          Sauvegardeur.sauvegarderConfig({
+            ...(Sauvegardeur.chargerConfig() ?? Configuration.Default),
+            volumeSon,
+          });
+        }
+      )
     );
 
-    this._panelManager.setContenu(titre, contenu.innerHTML);
+    this._panelManager.setContenuHtmlElement(titre, contenu);
     this._panelManager.setClasses(["config-panel"]);
     this._panelManager.afficherPanel();
   }
 
-  private genererConfigItem(nomConfig: string, options: { [value: number]: string }): HTMLElement {
+  private genererConfigItem(
+    nomConfig: string,
+    options: Array<{ value: string; label: string }>,
+    valeurChoisie: string,
+    onChange?: (event: Event) => void
+  ): HTMLElement {
     let div = document.createElement("div");
     div.className = "config-item";
 
@@ -43,13 +70,14 @@ export default class ConfigurationPanel {
     div.appendChild(label);
 
     let select = document.createElement("select");
-    for (let optionKey in options) {
-      let optionLabel = options[optionKey];
+    for (let optionItem of options) {
       let optionElement = document.createElement("option");
-      optionElement.value = optionKey;
-      optionElement.innerText = optionLabel;
+      optionElement.value = optionItem.value;
+      optionElement.innerText = optionItem.label;
+      if (optionItem.value === valeurChoisie) optionElement.selected = true;
       select.appendChild(optionElement);
     }
+    if (onChange !== undefined) select.addEventListener("change", onChange);
     div.appendChild(select);
 
     return div;

ts/entites/configuration.ts

@@ -1,6 +1,9 @@
+import { VolumeSon } from "./volumeSon";
+
 export default class Configuration {
-  public static Default: Configuration = { hasAudio: false, afficherRegles: true };
+  public static Default: Configuration = { hasAudio: false, afficherRegles: true, volumeSon: VolumeSon.Normal };
 
   hasAudio: boolean = false;
   afficherRegles: boolean = true;
+  volumeSon: VolumeSon = VolumeSon.Normal;
 }

ts/entites/volumeSon.ts

@@ -0,0 +1,5 @@
+export enum VolumeSon {
+  Faible = 30,
+  Normal = 70,
+  Fort = 100,
+}

ts/finDePartiePanel.ts

@@ -1,5 +1,5 @@
-import LettreResultat from "./lettreResultat";
-import { LettreStatut } from "./lettreStatut";
+import LettreResultat from "./entites/lettreResultat";
+import { LettreStatut } from "./entites/lettreStatut";
 import NotificationMessage from "./notificationMessage";
 import PanelManager from "./panelManager";
 

ts/gestionnaire.ts

@@ -1,17 +1,18 @@
 import Dictionnaire from "./dictionnaire";
 import Grille from "./grille";
 import Input from "./input";
-import LettreResultat from "./lettreResultat";
-import { LettreStatut } from "./lettreStatut";
+import LettreResultat from "./entites/lettreResultat";
+import { LettreStatut } from "./entites/lettreStatut";
 import FinDePartiePanel from "./finDePartiePanel";
 import NotificationMessage from "./notificationMessage";
-import SauvegardeStats from "./sauvegardeStats";
+import SauvegardeStats from "./entites/sauvegardeStats";
 import Sauvegardeur from "./sauvegardeur";
-import Configuration from "./configuration";
-import PartieEnCours from "./partieEnCours";
+import Configuration from "./entites/configuration";
+import PartieEnCours from "./entites/partieEnCours";
 import PanelManager from "./panelManager";
 import ReglesPanel from "./reglesPanel";
 import ConfigurationPanel from "./configurationPanel";
+import AudioPanel from "./audioPanel";
 
 export default class Gestionnaire {
   private readonly _dictionnaire: Dictionnaire;
@@ -23,6 +24,7 @@ export default class Gestionnaire {
   private readonly _propositions: Array<string>;
   private readonly _resultats: Array<Array<LettreResultat>>;
   private readonly _panelManager: PanelManager;
+  private readonly _audioPanel: AudioPanel;
 
   private _motATrouver: string = "";
   private _compositionMotATrouver: { [lettre: string]: number } = {};
@@ -45,14 +47,15 @@ export default class Gestionnaire {
     this._dictionnaire = new Dictionnaire();
     this._propositions = new Array<string>();
     this._resultats = new Array<Array<LettreResultat>>();
+    this._audioPanel = new AudioPanel(this._config);
     this._panelManager = new PanelManager();
     this._reglesPanel = new ReglesPanel(this._panelManager);
     this._finDePartiePanel = new FinDePartiePanel(this._datePartieEnCours, this._panelManager);
-    this._configurationPanel = new ConfigurationPanel(this._panelManager);
+    this._configurationPanel = new ConfigurationPanel(this._panelManager, this._audioPanel);
 
     this.choisirMot(this._datePartieEnCours).then((mot) => {
       this._motATrouver = mot;
-      this._grille = new Grille(this._motATrouver.length, this._maxNbPropositions, this._motATrouver[0], this._config);
+      this._grille = new Grille(this._motATrouver.length, this._maxNbPropositions, this._motATrouver[0], this._audioPanel);
       this._input = new Input(this, this._motATrouver.length, this._motATrouver[0]);
       this._compositionMotATrouver = this.decompose(this._motATrouver);
       this.chargerPropositions(partieEnCours.propositions);

ts/grille.ts

@@ -1,7 +1,6 @@
 import AudioPanel from "./audioPanel";
-import Configuration from "./configuration";
-import LettreResultat from "./lettreResultat";
-import { LettreStatut } from "./lettreStatut";
+import LettreResultat from "./entites/lettreResultat";
+import { LettreStatut } from "./entites/lettreStatut";
 
 export default class Grille {
   private readonly _grille: HTMLElement;
@@ -14,9 +13,9 @@ export default class Grille {
   private _indice: Array<string | undefined>;
   private _motActuel: number;
 
-  public constructor(longueurMot: number, maxPropositions: number, indice: string, configuration: Configuration) {
+  public constructor(longueurMot: number, maxPropositions: number, indice: string, audioPanel: AudioPanel) {
     this._grille = document.getElementById("grille") as HTMLElement;
-    this._audioPanel = new AudioPanel(configuration);
+    this._audioPanel = audioPanel;
 
     this._longueurMot = longueurMot;
     this._maxPropositions = maxPropositions;

ts/input.ts

@@ -1,6 +1,6 @@
 import Gestionnaire from "./gestionnaire";
-import LettreResultat from "./lettreResultat";
-import { LettreStatut } from "./lettreStatut";
+import LettreResultat from "./entites/lettreResultat";
+import { LettreStatut } from "./entites/lettreStatut";
 
 export default class Input {
   private readonly _grille: HTMLElement;

ts/panelManager.ts

@@ -49,6 +49,12 @@ export default class PanelManager {
     this._panelContenu.innerHTML = contenu;
   }
 
+  public setContenuHtmlElement(titre: string, contenu: HTMLElement): void {
+    this._panelTitre.innerText = titre;
+    this._panelContenu.innerHTML = "";
+    this._panelContenu.appendChild(contenu);
+  }
+
   public setClasses(classes: Array<string>): void {
     this._panelArea.className = "";
     classes.forEach((nomClasse) => this._panelArea.classList.add(nomClasse));

ts/reglesPanel.ts

@@ -1,4 +1,4 @@
-import Configuration from "./configuration";
+import Configuration from "./entites/configuration";
 import PanelManager from "./panelManager";
 import Sauvegardeur from "./sauvegardeur";
 

ts/sauvegardeur.ts

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