deblan/sutom
deblan/sutom
1
0
Fork 0
mirror of https://framagit.org/JonathanMM/sutom.git synced 2024-04-26 11:30:44 +02:00
Code Issues Projects Releases Wiki Activity

Affichage de la notification dans le panel

Browse source
This commit is contained in:
JonathanMM 2022-01-31 19:29:33 +01:00
parent a8bf4a10a7
commit 335b42256f
4 changed files with 20 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
public/index.html
View file

@ -53,6 +53,7 @@
</a>
</div>
</div>
<div id="panel-fenetre-notification"> </div>
<div id="panel-fenetre-contenu"></div>
</div>
</div>

3
public/jeu.css
View file

@ -210,7 +210,8 @@ h1 {
color: var(--couleur-police);
}
#notification {
#notification,
#panel-fenetre-notification {
opacity: 0;
transition: opacity linear 1s;
}

8
ts/finDePartiePanel.ts
View file

@ -58,16 +58,16 @@ export default class FinDePartiePanel {
resumeBouton.addEventListener("click", (event) => {
event.stopPropagation();
if (!navigator.clipboard) {
NotificationMessage.ajouterNotification("Votre navigateur n'est pas compatible");
NotificationMessage.ajouterNotificationPanel("Votre navigateur n'est pas compatible");
}
navigator.clipboard
.writeText(this._resumeTexte + "\n\nhttps://sutom.nocle.fr")
.then(() => {
NotificationMessage.ajouterNotification("Résumé copié dans le presse papier");
NotificationMessage.ajouterNotificationPanel("Résumé copié dans le presse papier");
})
.catch((raison) => {
NotificationMessage.ajouterNotification("Votre navigateur n'est pas compatible");
NotificationMessage.ajouterNotificationPanel("Votre navigateur n'est pas compatible");
});
});
}
@ -103,7 +103,7 @@ export default class FinDePartiePanel {
let stats = Sauvegardeur.chargerSauvegardeStats();
if (stats) {
contenu +=
'<div class="stats-area"><div class="stats-ligne"><div class="stats-cellule">Parties :</div>' +
'<p>Statistiques</p><div class="stats-area"><div class="stats-ligne"><div class="stats-cellule">Parties :</div>' +
`<div class="stats-cellule">${stats.partiesGagnees}/${stats.partiesJouees}</div>` +
"</div>" +
`<div class="stats-ligne"><div class="stats-cellule">1/6 :</div><div class="stats-cellule">${stats.repartition[1]}</div></div>` +

17
ts/notificationMessage.ts
View file

@ -1,19 +1,28 @@
export default class NotificationMessage {
private static _notificationArea: HTMLElement = document.getElementById("notification") as HTMLElement;
private static _notificationPanelArea: HTMLElement = document.getElementById("panel-fenetre-notification") as HTMLElement;
private static _currentTimeout: NodeJS.Timeout | undefined;
public static ajouterNotification(message: string): void {
this.ajouterNotificationDiv(this._notificationArea, message);
}
public static ajouterNotificationPanel(message: string): void {
this.ajouterNotificationDiv(this._notificationPanelArea, message);
}
private static ajouterNotificationDiv(div: HTMLElement, message: string): void {
if (this._currentTimeout) {
clearTimeout(this._currentTimeout);
this._currentTimeout = undefined;
}
this._notificationArea.innerHTML = message;
this._notificationArea.style.opacity = "1";
div.innerHTML = message;
div.style.opacity = "1";
this._currentTimeout = setTimeout(
(() => {
this._notificationArea.style.opacity = "0";
div.style.opacity = "0";
this._currentTimeout = setTimeout(
(() => {
this._notificationArea.innerHTML = " ";
div.innerHTML = " ";
this._currentTimeout = undefined;
}).bind(this),
1000