diff --git a/public/jeu.css b/public/jeu.css index e2e5c96..c8b8128 100644 --- a/public/jeu.css +++ b/public/jeu.css @@ -147,7 +147,7 @@ h1 { #panel-area { display: none; - font-size: 24px; + font-size: 20px; } #input-area { @@ -274,6 +274,10 @@ h1 { min-height: 50px; } +#panel-fenetre-notification-area { + position: absolute; +} + #notification-label, #panel-fenetre-notification-label { font-size: 22px; diff --git a/ts/finDePartiePanel.ts b/ts/finDePartiePanel.ts index 3f1d56b..47cd1fc 100644 --- a/ts/finDePartiePanel.ts +++ b/ts/finDePartiePanel.ts @@ -123,10 +123,10 @@ export default class FinDePartiePanel { }) ) .then(() => { - NotificationMessage.ajouterNotificationPanel("Résumé copié dans le presse-papier."); + NotificationMessage.ajouterNotificationPanel("Résumé copié dans le presse-papier.", resumeBouton); }) .catch((raison) => { - NotificationMessage.ajouterNotificationPanel("Votre navigateur n'est pas compatible."); + NotificationMessage.ajouterNotificationPanel("Votre navigateur n'est pas compatible.", resumeBouton); }); }); } diff --git a/ts/notificationMessage.ts b/ts/notificationMessage.ts index 7d63c81..f79e53f 100644 --- a/ts/notificationMessage.ts +++ b/ts/notificationMessage.ts @@ -9,8 +9,11 @@ export default class NotificationMessage { this.ajouterNotificationDiv(this._notificationArea, this._notificationLabel, message); } - public static ajouterNotificationPanel(message: string): void { + public static ajouterNotificationPanel(message: string, origine: HTMLElement): void { this.ajouterNotificationDiv(this._notificationPanelArea, this._notificationPanelLabel, message); + const { top: topParent, left: leftParent } = origine.getBoundingClientRect(); + this._notificationPanelArea.style.top = `${topParent + 30}px`; + this._notificationPanelArea.style.left = `${leftParent - this._notificationPanelArea.getBoundingClientRect().width / 2}px`; } private static ajouterNotificationDiv(divArea: HTMLElement, divLabel: HTMLElement, message: string): void {