mirror of
https://framagit.org/JonathanMM/sutom.git
synced 2024-04-28 12:12:55 +02:00
Close #33: Possibilité de changer la disposition du clavier
This commit is contained in:
JonathanMM
parent
37edf6ed08
commit
c757067833
|
|
@ -57,43 +57,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div id="grille">Chargement de la grille en cours…</div>
|
||||
<div id="input-area">
|
||||
<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 id="input-area"></div>
|
||||
<div style="display: none">
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
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";
|
||||
|
||||
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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
});
|
||||
|
|
|
|||
81
ts/input.ts
81
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<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._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<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(
|
||||
"keypress",
|
||||
((event: KeyboardEvent) => {
|
||||
|
|
@ -98,6 +175,7 @@ export default class Input {
|
|||
|
||||
public updateClavier(resultats: Array<LettreResultat>): 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue