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 @@
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;
}
}
}