diff --git a/public/index.html b/public/index.html index 05c4712..7919c48 100644 --- a/public/index.html +++ b/public/index.html @@ -53,6 +53,7 @@ +
 
diff --git a/public/jeu.css b/public/jeu.css index 61bb1b1..d14fbc3 100644 --- a/public/jeu.css +++ b/public/jeu.css @@ -210,7 +210,8 @@ h1 { color: var(--couleur-police); } -#notification { +#notification, +#panel-fenetre-notification { opacity: 0; transition: opacity linear 1s; } diff --git a/ts/finDePartiePanel.ts b/ts/finDePartiePanel.ts index 944768a..4b2db77 100644 --- a/ts/finDePartiePanel.ts +++ b/ts/finDePartiePanel.ts @@ -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 += - '
Parties :
' + + '

Statistiques

Parties :
' + `
${stats.partiesGagnees}/${stats.partiesJouees}
` + "
" + `
1/6 :
${stats.repartition[1]}
` + diff --git a/ts/notificationMessage.ts b/ts/notificationMessage.ts index bcc08d5..b34f36e 100644 --- a/ts/notificationMessage.ts +++ b/ts/notificationMessage.ts @@ -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