From c757067833490e5698e091f763887a868bcb3213 Mon Sep 17 00:00:00 2001 From: JonathanMM Date: Sun, 30 Jan 2022 12:03:48 +0100 Subject: [PATCH] =?UTF-8?q?Close=20#33:=20Possibilit=C3=A9=20de=20changer?= =?UTF-8?q?=20la=20disposition=20du=20clavier?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/index.html | 38 +-------------- public/jeu.css | 5 +- ts/configurationPanel.ts | 32 +++++++++++++ ts/entites/clavierDisposition.ts | 6 +++ ts/entites/configuration.ts | 4 +- ts/gestionnaire.ts | 3 +- ts/input.ts | 81 +++++++++++++++++++++++++++++++- 7 files changed, 126 insertions(+), 43 deletions(-) create mode 100644 ts/entites/clavierDisposition.ts diff --git a/public/index.html b/public/index.html index 1f42e68..78200e3 100644 --- a/public/index.html +++ b/public/index.html @@ -57,43 +57,7 @@
Chargement de la grille en cours…
-
-
-
A
-
Z
-
E
-
R
-
T
-
Y
-
U
-
I
-
O
-
P
-
-
-
Q
-
S
-
D
-
F
-
G
-
H
-
J
-
K
-
L
-
M
-
-
-
-
W
-
X
-
C
-
V
-
B
-
N
-
⌫
-
↲
-
-
+
diff --git a/public/jeu.css b/public/jeu.css index bbf7855..31b2024 100644 --- a/public/jeu.css +++ b/public/jeu.css @@ -168,11 +168,12 @@ h1 { font-family: monospace; } -.input-lettre.input-lettre-vide { +.input-lettre.input-lettre-vide, +.input-lettre.input-lettre-vide-double { border: 0; - flex-grow: 2; } +.input-lettre.input-lettre-vide-double, .input-lettre.input-lettre-entree { flex-grow: 2; } diff --git a/ts/configurationPanel.ts b/ts/configurationPanel.ts index fc851d7..7d874b1 100644 --- a/ts/configurationPanel.ts +++ b/ts/configurationPanel.ts @@ -3,6 +3,8 @@ import PanelManager from "./panelManager"; import Sauvegardeur from "./sauvegardeur"; import { VolumeSon } from "./entites/volumeSon"; import AudioPanel from "./audioPanel"; +import { ClavierDisposition } from "./entites/clavierDisposition"; +import Input from "./input"; export default class ConfigurationPanel { private readonly _panelManager: PanelManager; @@ -10,6 +12,8 @@ export default class ConfigurationPanel { private readonly _configBouton: HTMLElement; + private _input: Input | undefined; + public constructor(panelManager: PanelManager, audioPanel: AudioPanel) { this._panelManager = panelManager; this._audioPanel = audioPanel; @@ -51,6 +55,30 @@ export default class ConfigurationPanel { ) ); + contenu.appendChild( + this.genererConfigItem( + "Disposition du clavier", + [ + { value: ClavierDisposition.Azerty.toString(), label: "AZERTY" }, + { value: ClavierDisposition.Bépo.toString(), label: "BÉPO" }, + { value: ClavierDisposition.Qwerty.toString(), label: "QWERTY" }, + { value: ClavierDisposition.Qwertz.toString(), label: "QWERTZ" }, + ], + (config.disposition ?? Configuration.Default.disposition).toString(), + (event: Event) => { + event.stopPropagation(); + let disposition: ClavierDisposition = parseInt((event.target as HTMLSelectElement).value); + + if (this._input) this._input.dessinerClavier(disposition); + + Sauvegardeur.sauvegarderConfig({ + ...(Sauvegardeur.chargerConfig() ?? Configuration.Default), + disposition, + }); + } + ) + ); + this._panelManager.setContenuHtmlElement(titre, contenu); this._panelManager.setClasses(["config-panel"]); this._panelManager.afficherPanel(); @@ -82,4 +110,8 @@ export default class ConfigurationPanel { return div; } + + public setInput(input: Input): void { + this._input = input; + } } diff --git a/ts/entites/clavierDisposition.ts b/ts/entites/clavierDisposition.ts new file mode 100644 index 0000000..4990869 --- /dev/null +++ b/ts/entites/clavierDisposition.ts @@ -0,0 +1,6 @@ +export enum ClavierDisposition { + Azerty, + Bépo, + Qwerty, + Qwertz, +} diff --git a/ts/entites/configuration.ts b/ts/entites/configuration.ts index 8d4e6a6..8bd57d2 100644 --- a/ts/entites/configuration.ts +++ b/ts/entites/configuration.ts @@ -1,9 +1,11 @@ +import { ClavierDisposition } from "./clavierDisposition"; import { VolumeSon } from "./volumeSon"; export default class Configuration { - public static Default: Configuration = { hasAudio: false, afficherRegles: true, volumeSon: VolumeSon.Normal }; + public static Default: Configuration = { hasAudio: false, afficherRegles: true, volumeSon: VolumeSon.Normal, disposition: ClavierDisposition.Azerty }; hasAudio: boolean = false; afficherRegles: boolean = true; volumeSon: VolumeSon = VolumeSon.Normal; + disposition: ClavierDisposition = ClavierDisposition.Azerty; } diff --git a/ts/gestionnaire.ts b/ts/gestionnaire.ts index a7d57b7..8aabf75 100644 --- a/ts/gestionnaire.ts +++ b/ts/gestionnaire.ts @@ -56,7 +56,8 @@ export default class Gestionnaire { this.choisirMot(this._datePartieEnCours).then((mot) => { this._motATrouver = mot; 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._config, this._motATrouver.length, this._motATrouver[0]); + this._configurationPanel.setInput(this._input); this._compositionMotATrouver = this.decompose(this._motATrouver); this.chargerPropositions(partieEnCours.propositions); }); diff --git a/ts/input.ts b/ts/input.ts index 081175b..c636bf4 100644 --- a/ts/input.ts +++ b/ts/input.ts @@ -1,6 +1,8 @@ import Gestionnaire from "./gestionnaire"; import LettreResultat from "./entites/lettreResultat"; import { LettreStatut } from "./entites/lettreStatut"; +import { ClavierDisposition } from "./entites/clavierDisposition"; +import Configuration from "./entites/configuration"; export default class Input { private readonly _grille: HTMLElement; @@ -11,8 +13,9 @@ export default class Input { private _longueurMot: number; private _motSaisi: string; private _estBloque: boolean; + private _resultats: Array; - public constructor(gestionnaire: Gestionnaire, longueurMot: number, premiereLettre: string) { + public constructor(gestionnaire: Gestionnaire, configuration: Configuration, longueurMot: number, premiereLettre: string) { this._grille = document.getElementById("grille") as HTMLElement; this._inputArea = document.getElementById("input-area") as HTMLElement; this._premiereLettre = premiereLettre; @@ -20,7 +23,81 @@ export default class Input { this._gestionnaire = gestionnaire; this._motSaisi = ""; this._estBloque = false; + this._resultats = new Array(); + this.dessinerClavier(configuration.disposition ?? Configuration.Default.disposition); + } + + public dessinerClavier(disposition: ClavierDisposition): void { + let clavier = this.getDisposition(disposition); + this._inputArea.innerHTML = ""; + + for (let ligne of clavier) { + let ligneDiv = document.createElement("div"); + ligneDiv.className = "input-ligne"; + + for (let lettre of ligne) { + let lettreDiv = document.createElement("div"); + lettreDiv.className = "input-lettre"; + switch (lettre) { + case "_effacer": + lettreDiv.dataset["lettre"] = lettre; + lettreDiv.innerText = "⌫"; + break; + case "_entree": + lettreDiv.innerText = "↲"; + lettreDiv.dataset["lettre"] = lettre; + lettreDiv.classList.add("input-lettre-entree"); + break; + case "_vide": + lettreDiv.classList.add("input-lettre-vide"); + break; + case "_videdouble": + lettreDiv.classList.add("input-lettre-vide-double"); + break; + default: + lettreDiv.dataset["lettre"] = lettre; + lettreDiv.innerText = lettre; + } + ligneDiv.appendChild(lettreDiv); + } + + this._inputArea.appendChild(ligneDiv); + } + this.ajouterEvenements(); + this.updateClavier(this._resultats); + } + + private getDisposition(clavier: ClavierDisposition): Array> { + switch (clavier) { + case ClavierDisposition.Bépo: + return [ + ["B", "E", "P", "O", "E", "V", "D", "L", "Z", "W"], + ["A", "U", "I", "E", "C", "T", "S", "R", "N", "M"], + ["Y", "X", "K", "Q", "G", "H", "F", "_effacer", "_entree"], + ]; + case ClavierDisposition.Qwerty: + return [ + ["Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P"], + ["A", "S", "D", "F", "G", "H", "J", "K", "L"], + ["_vide", "Z", "X", "C", "V", "B", "N", "M", "_effacer", "_entree"], + ]; + case ClavierDisposition.Qwertz: + return [ + ["Q", "W", "E", "R", "T", "Z", "U", "I", "O", "P"], + ["A", "S", "D", "F", "G", "H", "J", "K", "L"], + ["_vide", "Y", "X", "C", "V", "B", "N", "M", "_effacer", "_entree"], + ]; + default: + return [ + ["A", "Z", "E", "R", "T", "Y", "U", "I", "O", "P"], + ["Q", "S", "D", "F", "G", "H", "J", "K", "L", "M"], + ["_videdouble", "W", "X", "C", "V", "B", "N", "_effacer", "_entree"], + ]; + } + } + + private ajouterEvenements(): void { document.addEventListener( "keypress", ((event: KeyboardEvent) => { @@ -98,6 +175,7 @@ export default class Input { public updateClavier(resultats: Array): void { if (this._estBloque) return; + this._resultats = resultats; // On sauvegarde au cas où on doit redessiner tout le clavier let statutLettres: { [lettre: string]: LettreStatut } = {}; // console.log(statutLettres); for (let resultat of resultats) { @@ -148,7 +226,6 @@ export default class Input { touche.classList.add("lettre-non-trouve"); break; } - break; } } }