Close #3 : Ajout la possibilité de changer le thème

This commit is contained in:
JonathanMM 2022-01-30 14:13:59 +01:00
parent c757067833
commit 53b9a0f4b7
6 changed files with 104 additions and 10 deletions

View File

@ -9,6 +9,10 @@
--couleur-icone: rgb(200, 200, 200);
--couleur-fond-rgb: 43, 43, 43;
--couleur-fond: rgb(var(--couleur-fond-rgb));
--couleur-bordure: #ffffff;
--couleur-bordure-grille: #ffffff;
--couleur-police: #ffffff;
--couleur-police-grille: #ffffff;
}
@font-face {
@ -22,7 +26,7 @@ body {
background-color: var(--couleur-fond);
height: 100vh;
text-align: center;
color: white;
color: var(--couleur-police);
margin: 0;
padding: 0;
}
@ -58,7 +62,7 @@ header {
align-items: center;
justify-content: space-between;
width: 100%;
border-bottom: 1px solid white;
border-bottom: 1px solid var(--couleur-bordure);
margin-top: 0.1em;
margin-bottom: 0.25em;
}
@ -97,8 +101,8 @@ h1 {
text-align: center;
position: relative;
padding: var(--epaisseur-padding-cellule);
color: white;
border: 1px solid white;
color: var(--couleur-police-grille);
border: 1px solid var(--couleur-bordure-grille);
z-index: 0;
}
@ -156,7 +160,7 @@ h1 {
.input-lettre {
font-size: 18px;
display: inline-block;
border: 1px solid white;
border: 1px solid var(--couleur-police);
border-radius: 5px;
user-select: none;
flex-grow: 1;
@ -208,7 +212,7 @@ h1 {
#panel-area a,
#panel-area a:visited {
color: white;
color: var(--couleur-police);
}
#notification {
@ -232,7 +236,7 @@ h1 {
margin-left: auto;
margin-right: auto;
min-height: 400px;
border: 1px solid white;
border: 1px solid var(--couleur-bordure);
border-radius: 0.25em;
margin-top: 3em;
display: flex;

View File

@ -5,18 +5,22 @@ import { VolumeSon } from "./entites/volumeSon";
import AudioPanel from "./audioPanel";
import { ClavierDisposition } from "./entites/clavierDisposition";
import Input from "./input";
import ThemeManager from "./themeManager";
import { Theme } from "./entites/theme";
export default class ConfigurationPanel {
private readonly _panelManager: PanelManager;
private readonly _audioPanel: AudioPanel;
private readonly _themeManager: ThemeManager;
private readonly _configBouton: HTMLElement;
private _input: Input | undefined;
public constructor(panelManager: PanelManager, audioPanel: AudioPanel) {
public constructor(panelManager: PanelManager, audioPanel: AudioPanel, themeManager: ThemeManager) {
this._panelManager = panelManager;
this._audioPanel = audioPanel;
this._themeManager = themeManager;
this._configBouton = document.getElementById("configuration-config-bouton") as HTMLElement;
@ -79,6 +83,30 @@ export default class ConfigurationPanel {
)
);
contenu.appendChild(
this.genererConfigItem(
"Thème",
[
{ value: Theme.Sombre.toString(), label: "Sombre" },
{ value: Theme.Clair.toString(), label: "Clair" },
{ value: Theme.SombreAccessible.toString(), label: "Sombre (Accessible)" },
{ value: Theme.ClairAccessible.toString(), label: "Clair (Accessible)" },
],
(config.theme ?? Configuration.Default.theme).toString(),
(event: Event) => {
event.stopPropagation();
let theme: Theme = parseInt((event.target as HTMLSelectElement).value);
this._themeManager.changerCouleur(theme);
Sauvegardeur.sauvegarderConfig({
...(Sauvegardeur.chargerConfig() ?? Configuration.Default),
theme,
});
}
)
);
this._panelManager.setContenuHtmlElement(titre, contenu);
this._panelManager.setClasses(["config-panel"]);
this._panelManager.afficherPanel();

View File

@ -1,11 +1,19 @@
import { ClavierDisposition } from "./clavierDisposition";
import { Theme } from "./theme";
import { VolumeSon } from "./volumeSon";
export default class Configuration {
public static Default: Configuration = { hasAudio: false, afficherRegles: true, volumeSon: VolumeSon.Normal, disposition: ClavierDisposition.Azerty };
public static Default: Configuration = {
hasAudio: false,
afficherRegles: true,
volumeSon: VolumeSon.Normal,
disposition: ClavierDisposition.Azerty,
theme: Theme.Sombre,
};
hasAudio: boolean = false;
afficherRegles: boolean = true;
volumeSon: VolumeSon = VolumeSon.Normal;
disposition: ClavierDisposition = ClavierDisposition.Azerty;
theme: Theme = Theme.Sombre;
}

6
ts/entites/theme.ts Normal file
View File

@ -0,0 +1,6 @@
export enum Theme {
Sombre,
Clair,
SombreAccessible,
ClairAccessible,
}

View File

@ -13,6 +13,7 @@ import PanelManager from "./panelManager";
import ReglesPanel from "./reglesPanel";
import ConfigurationPanel from "./configurationPanel";
import AudioPanel from "./audioPanel";
import ThemeManager from "./themeManager";
export default class Gestionnaire {
private readonly _dictionnaire: Dictionnaire;
@ -24,6 +25,7 @@ export default class Gestionnaire {
private readonly _propositions: Array<string>;
private readonly _resultats: Array<Array<LettreResultat>>;
private readonly _panelManager: PanelManager;
private readonly _themeManager: ThemeManager;
private readonly _audioPanel: AudioPanel;
private _motATrouver: string = "";
@ -49,9 +51,10 @@ export default class Gestionnaire {
this._resultats = new Array<Array<LettreResultat>>();
this._audioPanel = new AudioPanel(this._config);
this._panelManager = new PanelManager();
this._themeManager = new ThemeManager(this._config);
this._reglesPanel = new ReglesPanel(this._panelManager);
this._finDePartiePanel = new FinDePartiePanel(this._datePartieEnCours, this._panelManager);
this._configurationPanel = new ConfigurationPanel(this._panelManager, this._audioPanel);
this._configurationPanel = new ConfigurationPanel(this._panelManager, this._audioPanel, this._themeManager);
this.choisirMot(this._datePartieEnCours).then((mot) => {
this._motATrouver = mot;

45
ts/themeManager.ts Normal file
View File

@ -0,0 +1,45 @@
import Configuration from "./entites/configuration";
import { Theme } from "./entites/theme";
export default class ThemeManager {
public constructor(config: Configuration) {
this.changerCouleur(config.theme ?? Configuration.Default.theme);
}
public changerCouleur(theme: Theme): void {
const root = document.documentElement;
switch (theme) {
case Theme.Clair:
root.style.setProperty("--couleur-bien-place", "#e7002a");
root.style.setProperty("--couleur-mal-place", "#ffbd00");
root.style.setProperty("--couleur-fond-rgb", "255, 254, 246");
root.style.setProperty("--couleur-police", "#000000");
root.style.setProperty("--couleur-bordure", "#000000");
root.style.setProperty("--couleur-icone", "rgb(55, 55, 55)");
break;
case Theme.ClairAccessible:
root.style.setProperty("--couleur-bien-place", "#096800");
root.style.setProperty("--couleur-mal-place", "#db7c00");
root.style.setProperty("--couleur-fond-rgb", "255, 254, 246");
root.style.setProperty("--couleur-police", "#000000");
root.style.setProperty("--couleur-bordure", "#000000");
root.style.setProperty("--couleur-icone", "rgb(55, 55, 55)");
break;
case Theme.SombreAccessible:
root.style.setProperty("--couleur-bien-place", "#096800");
root.style.setProperty("--couleur-mal-place", "#db7c00");
root.style.setProperty("--couleur-fond-rgb", "43, 43, 43");
root.style.setProperty("--couleur-police", "#ffffff");
root.style.setProperty("--couleur-bordure", "#ffffff");
root.style.setProperty("--couleur-icone", "rgb(200, 200, 200)");
break;
default:
root.style.setProperty("--couleur-bien-place", "#e7002a");
root.style.setProperty("--couleur-mal-place", "#ffbd00");
root.style.setProperty("--couleur-fond-rgb", "43, 43, 43");
root.style.setProperty("--couleur-police", "#ffffff");
root.style.setProperty("--couleur-bordure", "#ffffff");
root.style.setProperty("--couleur-icone", "rgb(200, 200, 200)");
}
}
}