From 37edf6ed083dc8ecab148835f7c2b3626af74e6b Mon Sep 17 00:00:00 2001 From: JonathanMM Date: Sun, 30 Jan 2022 11:17:10 +0100 Subject: [PATCH] =?UTF-8?q?Possibilit=C3=A9=20de=20r=C3=A9gler=20le=20volu?= =?UTF-8?q?me=20du=20jeu?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ts/audioPanel.ts | 10 +++++- ts/configurationPanel.ts | 54 +++++++++++++++++++++------- ts/{ => entites}/configuration.ts | 5 ++- ts/{ => entites}/lettreResultat.ts | 0 ts/{ => entites}/lettreStatut.ts | 0 ts/{ => entites}/partieEnCours.ts | 0 ts/{ => entites}/sauvegardePartie.ts | 0 ts/{ => entites}/sauvegardeStats.ts | 0 ts/entites/volumeSon.ts | 5 +++ ts/finDePartiePanel.ts | 4 +-- ts/gestionnaire.ts | 17 +++++---- ts/grille.ts | 9 +++-- ts/input.ts | 4 +-- ts/panelManager.ts | 6 ++++ ts/reglesPanel.ts | 2 +- ts/sauvegardeur.ts | 8 ++--- 16 files changed, 88 insertions(+), 36 deletions(-) rename ts/{ => entites}/configuration.ts (55%) rename ts/{ => entites}/lettreResultat.ts (100%) rename ts/{ => entites}/lettreStatut.ts (100%) rename ts/{ => entites}/partieEnCours.ts (100%) rename ts/{ => entites}/sauvegardePartie.ts (100%) rename ts/{ => entites}/sauvegardeStats.ts (100%) create mode 100644 ts/entites/volumeSon.ts diff --git a/ts/audioPanel.ts b/ts/audioPanel.ts index 87ab155..d1fb233 100644 --- a/ts/audioPanel.ts +++ b/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); } diff --git a/ts/configurationPanel.ts b/ts/configurationPanel.ts index f2f80c8..fc851d7 100644 --- a/ts/configurationPanel.ts +++ b/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; diff --git a/ts/configuration.ts b/ts/entites/configuration.ts similarity index 55% rename from ts/configuration.ts rename to ts/entites/configuration.ts index 197b065..8d4e6a6 100644 --- a/ts/configuration.ts +++ b/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; } diff --git a/ts/lettreResultat.ts b/ts/entites/lettreResultat.ts similarity index 100% rename from ts/lettreResultat.ts rename to ts/entites/lettreResultat.ts diff --git a/ts/lettreStatut.ts b/ts/entites/lettreStatut.ts similarity index 100% rename from ts/lettreStatut.ts rename to ts/entites/lettreStatut.ts diff --git a/ts/partieEnCours.ts b/ts/entites/partieEnCours.ts similarity index 100% rename from ts/partieEnCours.ts rename to ts/entites/partieEnCours.ts diff --git a/ts/sauvegardePartie.ts b/ts/entites/sauvegardePartie.ts similarity index 100% rename from ts/sauvegardePartie.ts rename to ts/entites/sauvegardePartie.ts diff --git a/ts/sauvegardeStats.ts b/ts/entites/sauvegardeStats.ts similarity index 100% rename from ts/sauvegardeStats.ts rename to ts/entites/sauvegardeStats.ts diff --git a/ts/entites/volumeSon.ts b/ts/entites/volumeSon.ts new file mode 100644 index 0000000..2318a10 --- /dev/null +++ b/ts/entites/volumeSon.ts @@ -0,0 +1,5 @@ +export enum VolumeSon { + Faible = 30, + Normal = 70, + Fort = 100, +} diff --git a/ts/finDePartiePanel.ts b/ts/finDePartiePanel.ts index c150340..c2e4bbf 100644 --- a/ts/finDePartiePanel.ts +++ b/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"; diff --git a/ts/gestionnaire.ts b/ts/gestionnaire.ts index 94e65fd..a7d57b7 100644 --- a/ts/gestionnaire.ts +++ b/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; private readonly _resultats: Array>; 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(); this._resultats = new Array>(); + 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); diff --git a/ts/grille.ts b/ts/grille.ts index c0482b3..5d03f6d 100644 --- a/ts/grille.ts +++ b/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; 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; diff --git a/ts/input.ts b/ts/input.ts index b6721b2..081175b 100644 --- a/ts/input.ts +++ b/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; diff --git a/ts/panelManager.ts b/ts/panelManager.ts index 074c21e..19342ef 100644 --- a/ts/panelManager.ts +++ b/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): void { this._panelArea.className = ""; classes.forEach((nomClasse) => this._panelArea.classList.add(nomClasse)); diff --git a/ts/reglesPanel.ts b/ts/reglesPanel.ts index d4d6552..f6e4ef2 100644 --- a/ts/reglesPanel.ts +++ b/ts/reglesPanel.ts @@ -1,4 +1,4 @@ -import Configuration from "./configuration"; +import Configuration from "./entites/configuration"; import PanelManager from "./panelManager"; import Sauvegardeur from "./sauvegardeur"; diff --git a/ts/sauvegardeur.ts b/ts/sauvegardeur.ts index 7f1f23a..33602b7 100644 --- a/ts/sauvegardeur.ts +++ b/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";