mirror of
https://framagit.org/JonathanMM/sutom.git
synced 2024-05-04 06:53:28 +02:00
Possibilité de régler le volume du jeu
This commit is contained in:
parent
fb726f61c3
commit
37edf6ed08
|
@ -1,4 +1,4 @@
|
||||||
import Configuration from "./configuration";
|
import Configuration from "./entites/configuration";
|
||||||
import Sauvegardeur from "./sauvegardeur";
|
import Sauvegardeur from "./sauvegardeur";
|
||||||
|
|
||||||
export default class AudioPanel {
|
export default class AudioPanel {
|
||||||
|
@ -20,6 +20,7 @@ export default class AudioPanel {
|
||||||
this._audioLettreMalPlace = document.getElementById("son-lettre-mal-place") as HTMLAudioElement;
|
this._audioLettreMalPlace = document.getElementById("son-lettre-mal-place") as HTMLAudioElement;
|
||||||
this._audioLettreNonTrouve = document.getElementById("son-lettre-non-trouve") 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.toggleSon(configuration.hasAudio, true);
|
||||||
|
|
||||||
this._configAudioBouton.addEventListener(
|
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 {
|
public jouerSonLettreBienPlace(callback?: () => void): void {
|
||||||
this.jouerSon(this._audioLettreBienPlace, callback);
|
this.jouerSon(this._audioLettreBienPlace, callback);
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,13 +1,19 @@
|
||||||
import Configuration from "./configuration";
|
import Configuration from "./entites/configuration";
|
||||||
import PanelManager from "./panelManager";
|
import PanelManager from "./panelManager";
|
||||||
import Sauvegardeur from "./sauvegardeur";
|
import Sauvegardeur from "./sauvegardeur";
|
||||||
|
import { VolumeSon } from "./entites/volumeSon";
|
||||||
|
import AudioPanel from "./audioPanel";
|
||||||
|
|
||||||
export default class ConfigurationPanel {
|
export default class ConfigurationPanel {
|
||||||
private readonly _panelManager: PanelManager;
|
private readonly _panelManager: PanelManager;
|
||||||
|
private readonly _audioPanel: AudioPanel;
|
||||||
|
|
||||||
private readonly _configBouton: HTMLElement;
|
private readonly _configBouton: HTMLElement;
|
||||||
|
|
||||||
public constructor(panelManager: PanelManager) {
|
public constructor(panelManager: PanelManager, audioPanel: AudioPanel) {
|
||||||
this._panelManager = panelManager;
|
this._panelManager = panelManager;
|
||||||
|
this._audioPanel = audioPanel;
|
||||||
|
|
||||||
this._configBouton = document.getElementById("configuration-config-bouton") as HTMLElement;
|
this._configBouton = document.getElementById("configuration-config-bouton") as HTMLElement;
|
||||||
|
|
||||||
this._configBouton.addEventListener(
|
this._configBouton.addEventListener(
|
||||||
|
@ -21,20 +27,41 @@ export default class ConfigurationPanel {
|
||||||
public afficher(): void {
|
public afficher(): void {
|
||||||
let titre = "Configuration";
|
let titre = "Configuration";
|
||||||
let contenu = document.createElement("div");
|
let contenu = document.createElement("div");
|
||||||
|
let config = Sauvegardeur.chargerConfig() ?? Configuration.Default;
|
||||||
contenu.appendChild(
|
contenu.appendChild(
|
||||||
this.genererConfigItem("Volume du son (si activé)", {
|
this.genererConfigItem(
|
||||||
1: "Faible",
|
"Volume du son (si activé)",
|
||||||
2: "Normal",
|
[
|
||||||
3: "Fort",
|
{ 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.setClasses(["config-panel"]);
|
||||||
this._panelManager.afficherPanel();
|
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");
|
let div = document.createElement("div");
|
||||||
div.className = "config-item";
|
div.className = "config-item";
|
||||||
|
|
||||||
|
@ -43,13 +70,14 @@ export default class ConfigurationPanel {
|
||||||
div.appendChild(label);
|
div.appendChild(label);
|
||||||
|
|
||||||
let select = document.createElement("select");
|
let select = document.createElement("select");
|
||||||
for (let optionKey in options) {
|
for (let optionItem of options) {
|
||||||
let optionLabel = options[optionKey];
|
|
||||||
let optionElement = document.createElement("option");
|
let optionElement = document.createElement("option");
|
||||||
optionElement.value = optionKey;
|
optionElement.value = optionItem.value;
|
||||||
optionElement.innerText = optionLabel;
|
optionElement.innerText = optionItem.label;
|
||||||
|
if (optionItem.value === valeurChoisie) optionElement.selected = true;
|
||||||
select.appendChild(optionElement);
|
select.appendChild(optionElement);
|
||||||
}
|
}
|
||||||
|
if (onChange !== undefined) select.addEventListener("change", onChange);
|
||||||
div.appendChild(select);
|
div.appendChild(select);
|
||||||
|
|
||||||
return div;
|
return div;
|
||||||
|
|
|
@ -1,6 +1,9 @@
|
||||||
|
import { VolumeSon } from "./volumeSon";
|
||||||
|
|
||||||
export default class Configuration {
|
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;
|
hasAudio: boolean = false;
|
||||||
afficherRegles: boolean = true;
|
afficherRegles: boolean = true;
|
||||||
|
volumeSon: VolumeSon = VolumeSon.Normal;
|
||||||
}
|
}
|
5
ts/entites/volumeSon.ts
Normal file
5
ts/entites/volumeSon.ts
Normal file
|
@ -0,0 +1,5 @@
|
||||||
|
export enum VolumeSon {
|
||||||
|
Faible = 30,
|
||||||
|
Normal = 70,
|
||||||
|
Fort = 100,
|
||||||
|
}
|
|
@ -1,5 +1,5 @@
|
||||||
import LettreResultat from "./lettreResultat";
|
import LettreResultat from "./entites/lettreResultat";
|
||||||
import { LettreStatut } from "./lettreStatut";
|
import { LettreStatut } from "./entites/lettreStatut";
|
||||||
import NotificationMessage from "./notificationMessage";
|
import NotificationMessage from "./notificationMessage";
|
||||||
import PanelManager from "./panelManager";
|
import PanelManager from "./panelManager";
|
||||||
|
|
||||||
|
|
|
@ -1,17 +1,18 @@
|
||||||
import Dictionnaire from "./dictionnaire";
|
import Dictionnaire from "./dictionnaire";
|
||||||
import Grille from "./grille";
|
import Grille from "./grille";
|
||||||
import Input from "./input";
|
import Input from "./input";
|
||||||
import LettreResultat from "./lettreResultat";
|
import LettreResultat from "./entites/lettreResultat";
|
||||||
import { LettreStatut } from "./lettreStatut";
|
import { LettreStatut } from "./entites/lettreStatut";
|
||||||
import FinDePartiePanel from "./finDePartiePanel";
|
import FinDePartiePanel from "./finDePartiePanel";
|
||||||
import NotificationMessage from "./notificationMessage";
|
import NotificationMessage from "./notificationMessage";
|
||||||
import SauvegardeStats from "./sauvegardeStats";
|
import SauvegardeStats from "./entites/sauvegardeStats";
|
||||||
import Sauvegardeur from "./sauvegardeur";
|
import Sauvegardeur from "./sauvegardeur";
|
||||||
import Configuration from "./configuration";
|
import Configuration from "./entites/configuration";
|
||||||
import PartieEnCours from "./partieEnCours";
|
import PartieEnCours from "./entites/partieEnCours";
|
||||||
import PanelManager from "./panelManager";
|
import PanelManager from "./panelManager";
|
||||||
import ReglesPanel from "./reglesPanel";
|
import ReglesPanel from "./reglesPanel";
|
||||||
import ConfigurationPanel from "./configurationPanel";
|
import ConfigurationPanel from "./configurationPanel";
|
||||||
|
import AudioPanel from "./audioPanel";
|
||||||
|
|
||||||
export default class Gestionnaire {
|
export default class Gestionnaire {
|
||||||
private readonly _dictionnaire: Dictionnaire;
|
private readonly _dictionnaire: Dictionnaire;
|
||||||
|
@ -23,6 +24,7 @@ export default class Gestionnaire {
|
||||||
private readonly _propositions: Array<string>;
|
private readonly _propositions: Array<string>;
|
||||||
private readonly _resultats: Array<Array<LettreResultat>>;
|
private readonly _resultats: Array<Array<LettreResultat>>;
|
||||||
private readonly _panelManager: PanelManager;
|
private readonly _panelManager: PanelManager;
|
||||||
|
private readonly _audioPanel: AudioPanel;
|
||||||
|
|
||||||
private _motATrouver: string = "";
|
private _motATrouver: string = "";
|
||||||
private _compositionMotATrouver: { [lettre: string]: number } = {};
|
private _compositionMotATrouver: { [lettre: string]: number } = {};
|
||||||
|
@ -45,14 +47,15 @@ export default class Gestionnaire {
|
||||||
this._dictionnaire = new Dictionnaire();
|
this._dictionnaire = new Dictionnaire();
|
||||||
this._propositions = new Array<string>();
|
this._propositions = new Array<string>();
|
||||||
this._resultats = new Array<Array<LettreResultat>>();
|
this._resultats = new Array<Array<LettreResultat>>();
|
||||||
|
this._audioPanel = new AudioPanel(this._config);
|
||||||
this._panelManager = new PanelManager();
|
this._panelManager = new PanelManager();
|
||||||
this._reglesPanel = new ReglesPanel(this._panelManager);
|
this._reglesPanel = new ReglesPanel(this._panelManager);
|
||||||
this._finDePartiePanel = new FinDePartiePanel(this._datePartieEnCours, 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.choisirMot(this._datePartieEnCours).then((mot) => {
|
||||||
this._motATrouver = 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._input = new Input(this, this._motATrouver.length, this._motATrouver[0]);
|
||||||
this._compositionMotATrouver = this.decompose(this._motATrouver);
|
this._compositionMotATrouver = this.decompose(this._motATrouver);
|
||||||
this.chargerPropositions(partieEnCours.propositions);
|
this.chargerPropositions(partieEnCours.propositions);
|
||||||
|
|
|
@ -1,7 +1,6 @@
|
||||||
import AudioPanel from "./audioPanel";
|
import AudioPanel from "./audioPanel";
|
||||||
import Configuration from "./configuration";
|
import LettreResultat from "./entites/lettreResultat";
|
||||||
import LettreResultat from "./lettreResultat";
|
import { LettreStatut } from "./entites/lettreStatut";
|
||||||
import { LettreStatut } from "./lettreStatut";
|
|
||||||
|
|
||||||
export default class Grille {
|
export default class Grille {
|
||||||
private readonly _grille: HTMLElement;
|
private readonly _grille: HTMLElement;
|
||||||
|
@ -14,9 +13,9 @@ export default class Grille {
|
||||||
private _indice: Array<string | undefined>;
|
private _indice: Array<string | undefined>;
|
||||||
private _motActuel: number;
|
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._grille = document.getElementById("grille") as HTMLElement;
|
||||||
this._audioPanel = new AudioPanel(configuration);
|
this._audioPanel = audioPanel;
|
||||||
|
|
||||||
this._longueurMot = longueurMot;
|
this._longueurMot = longueurMot;
|
||||||
this._maxPropositions = maxPropositions;
|
this._maxPropositions = maxPropositions;
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
import Gestionnaire from "./gestionnaire";
|
import Gestionnaire from "./gestionnaire";
|
||||||
import LettreResultat from "./lettreResultat";
|
import LettreResultat from "./entites/lettreResultat";
|
||||||
import { LettreStatut } from "./lettreStatut";
|
import { LettreStatut } from "./entites/lettreStatut";
|
||||||
|
|
||||||
export default class Input {
|
export default class Input {
|
||||||
private readonly _grille: HTMLElement;
|
private readonly _grille: HTMLElement;
|
||||||
|
|
|
@ -49,6 +49,12 @@ export default class PanelManager {
|
||||||
this._panelContenu.innerHTML = contenu;
|
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 {
|
public setClasses(classes: Array<string>): void {
|
||||||
this._panelArea.className = "";
|
this._panelArea.className = "";
|
||||||
classes.forEach((nomClasse) => this._panelArea.classList.add(nomClasse));
|
classes.forEach((nomClasse) => this._panelArea.classList.add(nomClasse));
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import Configuration from "./configuration";
|
import Configuration from "./entites/configuration";
|
||||||
import PanelManager from "./panelManager";
|
import PanelManager from "./panelManager";
|
||||||
import Sauvegardeur from "./sauvegardeur";
|
import Sauvegardeur from "./sauvegardeur";
|
||||||
|
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
import Configuration from "./configuration";
|
import Configuration from "./entites/configuration";
|
||||||
import PartieEnCours from "./partieEnCours";
|
import PartieEnCours from "./entites/partieEnCours";
|
||||||
import SauvegardePartie from "./sauvegardePartie";
|
import SauvegardePartie from "./entites/sauvegardePartie";
|
||||||
import SauvegardeStats from "./sauvegardeStats";
|
import SauvegardeStats from "./entites/sauvegardeStats";
|
||||||
|
|
||||||
export default class Sauvegardeur {
|
export default class Sauvegardeur {
|
||||||
private static readonly _cleStats = "stats";
|
private static readonly _cleStats = "stats";
|
||||||
|
|
Loading…
Reference in a new issue