Close #3 : Ajout la possibilité de changer le thème
This commit is contained in:
parent
c757067833
commit
53b9a0f4b7
|
@ -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;
|
||||
|
|
|
@ -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();
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -0,0 +1,6 @@
|
|||
export enum Theme {
|
||||
Sombre,
|
||||
Clair,
|
||||
SombreAccessible,
|
||||
ClairAccessible,
|
||||
}
|
|
@ -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;
|
||||
|
|
|
@ -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)");
|
||||
}
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue