diff --git a/public/jeu.css b/public/jeu.css index ee92990..0946620 100644 --- a/public/jeu.css +++ b/public/jeu.css @@ -353,6 +353,7 @@ h1 { display: flex; flex-direction: column; gap: 0.5em; + text-align: start; } #config-liste { diff --git a/ts/configurationPanel.ts b/ts/configurationPanel.ts index 34e18be..0742627 100644 --- a/ts/configurationPanel.ts +++ b/ts/configurationPanel.ts @@ -129,7 +129,30 @@ export default class ConfigurationPanel { ) ); - contenu.appendChild(this.genererZoneExportSauvegarde()); + contenu.appendChild( + this.genererConfigItem( + "Retour haptique (si votre navigateur est compatique)", + [ + { value: false.toString(), label: "Non" }, + { value: true.toString(), label: "Oui" }, + ], + (config.haptique ?? Configuration.Default.haptique).toString(), + (event: Event) => { + event.stopPropagation(); + let haptique = (event.target as HTMLSelectElement).value === true.toString(); + + Sauvegardeur.sauvegarderConfig({ + ...(Sauvegardeur.chargerConfig() ?? Configuration.Default), + haptique, + }); + + // On redessine le clavier pour la prise en compte de l'option + if (this._input) this._input.dessinerClavier(config.disposition ?? Configuration.Default.disposition); + } + ) + ); + + if (Sauvegardeur.chargerSauvegardeStats()) contenu.appendChild(this.genererZoneExportSauvegarde()); this._panelManager.setContenuHtmlElement(titre, contenu); this._panelManager.setClasses(["config-panel"]); diff --git a/ts/entites/configuration.ts b/ts/entites/configuration.ts index 41748f4..7acc803 100644 --- a/ts/entites/configuration.ts +++ b/ts/entites/configuration.ts @@ -10,6 +10,7 @@ export default class Configuration { volumeSon: VolumeSon.Normal, disposition: ClavierDisposition.Azerty, theme: Theme.Sombre, + haptique: false, }; hasAudio: boolean = false; @@ -18,4 +19,5 @@ export default class Configuration { volumeSon: VolumeSon = VolumeSon.Normal; disposition: ClavierDisposition = ClavierDisposition.Azerty; theme: Theme = Theme.Sombre; + haptique: boolean = false; } diff --git a/ts/input.ts b/ts/input.ts index 780d59f..c759faa 100644 --- a/ts/input.ts +++ b/ts/input.ts @@ -4,6 +4,7 @@ import { LettreStatut } from "./entites/lettreStatut"; import { ClavierDisposition } from "./entites/clavierDisposition"; import Configuration from "./entites/configuration"; import Dictionnaire from "./dictionnaire"; +import Sauvegardeur from "./sauvegardeur"; export enum ContexteBloquage { ValidationMot, @@ -18,8 +19,9 @@ export default class Input { private _longueurMot: number; private _motSaisi: string; - private _estBloque: Array; // TODO : Faire un dictionnaire pour savoir qui bloque, pour que si c'est bloqué par finDePartie, et que la fermeture de panel essaye de débloquer, ça ne fasse rien + private _estBloque: Array; private _resultats: Array>; + private _haptiqueActive: boolean; public constructor(gestionnaire: Gestionnaire, configuration: Configuration, longueurMot: number, premiereLettre: string) { this._grille = document.getElementById("grille") as HTMLElement; @@ -30,6 +32,7 @@ export default class Input { this._motSaisi = ""; this._estBloque = new Array(); this._resultats = new Array>(); + this._haptiqueActive = configuration.haptique ?? Configuration.Default.haptique; this.ajouterEvenementClavierPhysique(); @@ -73,6 +76,7 @@ export default class Input { this._inputArea.appendChild(ligneDiv); } + this._haptiqueActive = Sauvegardeur.chargerConfig()?.haptique ?? Configuration.Default.haptique; this.ajouterEvenementClavierVirtuel(); this.remettrePropositions(); } @@ -112,6 +116,7 @@ export default class Input { event.stopPropagation(); let div = event.currentTarget; if (!div) return; + if (this._haptiqueActive && window.navigator.vibrate) window.navigator.vibrate(75); let lettre = (div as HTMLElement).dataset["lettre"]; if (lettre === undefined) { return;