mirror of
https://framagit.org/JonathanMM/sutom.git
synced 2024-05-23 16:12:14 +02:00
Close #33: Possibilité de changer la disposition du clavier
This commit is contained in:
parent
37edf6ed08
commit
c757067833
|
@ -57,43 +57,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="grille">Chargement de la grille en cours…</div>
|
<div id="grille">Chargement de la grille en cours…</div>
|
||||||
<div id="input-area">
|
<div id="input-area"></div>
|
||||||
<div class="input-ligne">
|
|
||||||
<div data-lettre="A" class="input-lettre">A</div>
|
|
||||||
<div data-lettre="Z" class="input-lettre">Z</div>
|
|
||||||
<div data-lettre="E" class="input-lettre">E</div>
|
|
||||||
<div data-lettre="R" class="input-lettre">R</div>
|
|
||||||
<div data-lettre="T" class="input-lettre">T</div>
|
|
||||||
<div data-lettre="Y" class="input-lettre">Y</div>
|
|
||||||
<div data-lettre="U" class="input-lettre">U</div>
|
|
||||||
<div data-lettre="I" class="input-lettre">I</div>
|
|
||||||
<div data-lettre="O" class="input-lettre">O</div>
|
|
||||||
<div data-lettre="P" class="input-lettre">P</div>
|
|
||||||
</div>
|
|
||||||
<div class="input-ligne">
|
|
||||||
<div data-lettre="Q" class="input-lettre">Q</div>
|
|
||||||
<div data-lettre="S" class="input-lettre">S</div>
|
|
||||||
<div data-lettre="D" class="input-lettre">D</div>
|
|
||||||
<div data-lettre="F" class="input-lettre">F</div>
|
|
||||||
<div data-lettre="G" class="input-lettre">G</div>
|
|
||||||
<div data-lettre="H" class="input-lettre">H</div>
|
|
||||||
<div data-lettre="J" class="input-lettre">J</div>
|
|
||||||
<div data-lettre="K" class="input-lettre">K</div>
|
|
||||||
<div data-lettre="L" class="input-lettre">L</div>
|
|
||||||
<div data-lettre="M" class="input-lettre">M</div>
|
|
||||||
</div>
|
|
||||||
<div class="input-ligne">
|
|
||||||
<div class="input-lettre input-lettre-vide"></div>
|
|
||||||
<div data-lettre="W" class="input-lettre">W</div>
|
|
||||||
<div data-lettre="X" class="input-lettre">X</div>
|
|
||||||
<div data-lettre="C" class="input-lettre">C</div>
|
|
||||||
<div data-lettre="V" class="input-lettre">V</div>
|
|
||||||
<div data-lettre="B" class="input-lettre">B</div>
|
|
||||||
<div data-lettre="N" class="input-lettre">N</div>
|
|
||||||
<div data-lettre="_effacer" class="input-lettre">⌫</div>
|
|
||||||
<div data-lettre="_entree" class="input-lettre input-lettre-entree">↲</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div style="display: none">
|
<div style="display: none">
|
||||||
<audio preload src="sons/lettre-non-trouve.wav" id="son-lettre-non-trouve"></audio>
|
<audio preload src="sons/lettre-non-trouve.wav" id="son-lettre-non-trouve"></audio>
|
||||||
<audio preload src="sons/lettre-mal-place.wav" id="son-lettre-mal-place"></audio>
|
<audio preload src="sons/lettre-mal-place.wav" id="son-lettre-mal-place"></audio>
|
||||||
|
|
|
@ -168,11 +168,12 @@ h1 {
|
||||||
font-family: monospace;
|
font-family: monospace;
|
||||||
}
|
}
|
||||||
|
|
||||||
.input-lettre.input-lettre-vide {
|
.input-lettre.input-lettre-vide,
|
||||||
|
.input-lettre.input-lettre-vide-double {
|
||||||
border: 0;
|
border: 0;
|
||||||
flex-grow: 2;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.input-lettre.input-lettre-vide-double,
|
||||||
.input-lettre.input-lettre-entree {
|
.input-lettre.input-lettre-entree {
|
||||||
flex-grow: 2;
|
flex-grow: 2;
|
||||||
}
|
}
|
||||||
|
|
|
@ -3,6 +3,8 @@ import PanelManager from "./panelManager";
|
||||||
import Sauvegardeur from "./sauvegardeur";
|
import Sauvegardeur from "./sauvegardeur";
|
||||||
import { VolumeSon } from "./entites/volumeSon";
|
import { VolumeSon } from "./entites/volumeSon";
|
||||||
import AudioPanel from "./audioPanel";
|
import AudioPanel from "./audioPanel";
|
||||||
|
import { ClavierDisposition } from "./entites/clavierDisposition";
|
||||||
|
import Input from "./input";
|
||||||
|
|
||||||
export default class ConfigurationPanel {
|
export default class ConfigurationPanel {
|
||||||
private readonly _panelManager: PanelManager;
|
private readonly _panelManager: PanelManager;
|
||||||
|
@ -10,6 +12,8 @@ export default class ConfigurationPanel {
|
||||||
|
|
||||||
private readonly _configBouton: HTMLElement;
|
private readonly _configBouton: HTMLElement;
|
||||||
|
|
||||||
|
private _input: Input | undefined;
|
||||||
|
|
||||||
public constructor(panelManager: PanelManager, audioPanel: AudioPanel) {
|
public constructor(panelManager: PanelManager, audioPanel: AudioPanel) {
|
||||||
this._panelManager = panelManager;
|
this._panelManager = panelManager;
|
||||||
this._audioPanel = audioPanel;
|
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.setContenuHtmlElement(titre, contenu);
|
||||||
this._panelManager.setClasses(["config-panel"]);
|
this._panelManager.setClasses(["config-panel"]);
|
||||||
this._panelManager.afficherPanel();
|
this._panelManager.afficherPanel();
|
||||||
|
@ -82,4 +110,8 @@ export default class ConfigurationPanel {
|
||||||
|
|
||||||
return div;
|
return div;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public setInput(input: Input): void {
|
||||||
|
this._input = input;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
6
ts/entites/clavierDisposition.ts
Normal file
6
ts/entites/clavierDisposition.ts
Normal file
|
@ -0,0 +1,6 @@
|
||||||
|
export enum ClavierDisposition {
|
||||||
|
Azerty,
|
||||||
|
Bépo,
|
||||||
|
Qwerty,
|
||||||
|
Qwertz,
|
||||||
|
}
|
|
@ -1,9 +1,11 @@
|
||||||
|
import { ClavierDisposition } from "./clavierDisposition";
|
||||||
import { VolumeSon } from "./volumeSon";
|
import { VolumeSon } from "./volumeSon";
|
||||||
|
|
||||||
export default class Configuration {
|
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;
|
hasAudio: boolean = false;
|
||||||
afficherRegles: boolean = true;
|
afficherRegles: boolean = true;
|
||||||
volumeSon: VolumeSon = VolumeSon.Normal;
|
volumeSon: VolumeSon = VolumeSon.Normal;
|
||||||
|
disposition: ClavierDisposition = ClavierDisposition.Azerty;
|
||||||
}
|
}
|
||||||
|
|
|
@ -56,7 +56,8 @@ export default class Gestionnaire {
|
||||||
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._audioPanel);
|
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._compositionMotATrouver = this.decompose(this._motATrouver);
|
||||||
this.chargerPropositions(partieEnCours.propositions);
|
this.chargerPropositions(partieEnCours.propositions);
|
||||||
});
|
});
|
||||||
|
|
81
ts/input.ts
81
ts/input.ts
|
@ -1,6 +1,8 @@
|
||||||
import Gestionnaire from "./gestionnaire";
|
import Gestionnaire from "./gestionnaire";
|
||||||
import LettreResultat from "./entites/lettreResultat";
|
import LettreResultat from "./entites/lettreResultat";
|
||||||
import { LettreStatut } from "./entites/lettreStatut";
|
import { LettreStatut } from "./entites/lettreStatut";
|
||||||
|
import { ClavierDisposition } from "./entites/clavierDisposition";
|
||||||
|
import Configuration from "./entites/configuration";
|
||||||
|
|
||||||
export default class Input {
|
export default class Input {
|
||||||
private readonly _grille: HTMLElement;
|
private readonly _grille: HTMLElement;
|
||||||
|
@ -11,8 +13,9 @@ export default class Input {
|
||||||
private _longueurMot: number;
|
private _longueurMot: number;
|
||||||
private _motSaisi: string;
|
private _motSaisi: string;
|
||||||
private _estBloque: boolean;
|
private _estBloque: boolean;
|
||||||
|
private _resultats: Array<LettreResultat>;
|
||||||
|
|
||||||
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._grille = document.getElementById("grille") as HTMLElement;
|
||||||
this._inputArea = document.getElementById("input-area") as HTMLElement;
|
this._inputArea = document.getElementById("input-area") as HTMLElement;
|
||||||
this._premiereLettre = premiereLettre;
|
this._premiereLettre = premiereLettre;
|
||||||
|
@ -20,7 +23,81 @@ export default class Input {
|
||||||
this._gestionnaire = gestionnaire;
|
this._gestionnaire = gestionnaire;
|
||||||
this._motSaisi = "";
|
this._motSaisi = "";
|
||||||
this._estBloque = false;
|
this._estBloque = false;
|
||||||
|
this._resultats = new Array<LettreResultat>();
|
||||||
|
|
||||||
|
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<Array<string>> {
|
||||||
|
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(
|
document.addEventListener(
|
||||||
"keypress",
|
"keypress",
|
||||||
((event: KeyboardEvent) => {
|
((event: KeyboardEvent) => {
|
||||||
|
@ -98,6 +175,7 @@ export default class Input {
|
||||||
|
|
||||||
public updateClavier(resultats: Array<LettreResultat>): void {
|
public updateClavier(resultats: Array<LettreResultat>): void {
|
||||||
if (this._estBloque) return;
|
if (this._estBloque) return;
|
||||||
|
this._resultats = resultats; // On sauvegarde au cas où on doit redessiner tout le clavier
|
||||||
let statutLettres: { [lettre: string]: LettreStatut } = {};
|
let statutLettres: { [lettre: string]: LettreStatut } = {};
|
||||||
// console.log(statutLettres);
|
// console.log(statutLettres);
|
||||||
for (let resultat of resultats) {
|
for (let resultat of resultats) {
|
||||||
|
@ -148,7 +226,6 @@ export default class Input {
|
||||||
touche.classList.add("lettre-non-trouve");
|
touche.classList.add("lettre-non-trouve");
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
break;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue