diff --git a/S2/DevWeb/Projet/src/main/webapp/WEB-INF/pages/profile.jsp b/S2/DevWeb/Projet/src/main/webapp/WEB-INF/pages/profile.jsp index f9ac6d9..f310052 100644 --- a/S2/DevWeb/Projet/src/main/webapp/WEB-INF/pages/profile.jsp +++ b/S2/DevWeb/Projet/src/main/webapp/WEB-INF/pages/profile.jsp @@ -8,7 +8,6 @@ - diff --git a/S2/DevWeb/Projet/src/main/webapp/WEB-INF/tags/layouts/base.tag b/S2/DevWeb/Projet/src/main/webapp/WEB-INF/tags/layouts/base.tag index 6906518..4aa0ea6 100644 --- a/S2/DevWeb/Projet/src/main/webapp/WEB-INF/tags/layouts/base.tag +++ b/S2/DevWeb/Projet/src/main/webapp/WEB-INF/tags/layouts/base.tag @@ -19,6 +19,7 @@ + diff --git a/S2/DevWeb/Projet/src/main/webapp/WEB-INF/tags/layouts/form.tag b/S2/DevWeb/Projet/src/main/webapp/WEB-INF/tags/layouts/form.tag index 2fab926..8bd70ec 100644 --- a/S2/DevWeb/Projet/src/main/webapp/WEB-INF/tags/layouts/form.tag +++ b/S2/DevWeb/Projet/src/main/webapp/WEB-INF/tags/layouts/form.tag @@ -8,7 +8,6 @@ - diff --git a/S2/DevWeb/Projet/src/main/webapp/static/css/form.css b/S2/DevWeb/Projet/src/main/webapp/static/css/notification.css similarity index 61% rename from S2/DevWeb/Projet/src/main/webapp/static/css/form.css rename to S2/DevWeb/Projet/src/main/webapp/static/css/notification.css index 228d62b..cdf306f 100644 --- a/S2/DevWeb/Projet/src/main/webapp/static/css/form.css +++ b/S2/DevWeb/Projet/src/main/webapp/static/css/notification.css @@ -6,7 +6,18 @@ transform: translateY(100%); opacity: 0; - animation: toast 5s ease forwards; + animation: toast 5s ease forwards +} + +.invite-notification { + position: absolute; + bottom: 0; + right: 0; + margin: 1em !important; + + transform: translateY(100%); + opacity: 0; + animation: toast-invite 5s ease forwards } @keyframes toast { @@ -28,6 +39,17 @@ } } +@keyframes toast-invite { + 0% { + opacity: 0; + transform: translateY(100%); + } + 5%, 100% { + opacity: 1; + transform: translateY(0); + } +} + @keyframes shake { 0%, 100% { transform: translateX(0); @@ -38,4 +60,4 @@ 20%, 40%, 60%, 80% { transform: translateX(5px); } -} \ No newline at end of file +} diff --git a/S2/DevWeb/Projet/src/main/webapp/static/js/notification/invite.js b/S2/DevWeb/Projet/src/main/webapp/static/js/notification/invite.js index 54b72ad..7050268 100644 --- a/S2/DevWeb/Projet/src/main/webapp/static/js/notification/invite.js +++ b/S2/DevWeb/Projet/src/main/webapp/static/js/notification/invite.js @@ -1,31 +1,68 @@ -export function onInvite(invite) { - // Animations des champs - inputs.forEach(input => { - input.classList.add("is-info"); - input.style.animation = "shake 0.5s ease-in-out" - }); +export function onInvite(from, contextPath, game_id) { + const languageSelector = document.getElementById('language-select'); + + //Translatables variables + let inviteTitle; + let inviteMsg; + let acceptButtonLabel; + let declineButtonLabel; + console.log(from) + if (languageSelector.value === "EN") { + inviteTitle = "Invitation from " + from + " !"; + inviteMsg = from + " invited you to join his game"; + acceptButtonLabel = "Accept"; + declineButtonLabel = "Decline"; + } else { + inviteTitle = "Invitation de " + from + " !"; + inviteMsg = from + " vous a invité à rejoindre sa partie"; + acceptButtonLabel = "Accepter"; + declineButtonLabel = "Refuser"; + } // Notification const notification = document.createElement("div"); - notification.classList.add("notification", "is-danger"); + notification.classList.add("notification", "invite-notification", "is-info", "is-light"); const notificationTitle = document.createElement("p"); notificationTitle.classList.add("title", "is-6"); - notificationTitle.innerHTML = "Erreur"; + notificationTitle.innerHTML = inviteTitle; const notificationIcon = document.createElement("span"); notificationIcon.classList.add("icon"); - notificationIcon.innerHTML = ""; + notificationIcon.innerHTML = ""; + const notificationSubtitle = document.createElement("div"); + notificationSubtitle.classList.add("subtitle", "is-6"); const notificationMessage = document.createElement("p"); - notificationMessage.classList.add("subtitle", "is-6"); - notificationMessage.innerHTML = invite.message; + notificationMessage.classList.add("is-6"); + notificationMessage.innerHTML = inviteMsg; + + const buttons = document.createElement("div"); + buttons.classList.add("buttons", "is-flex", "is-flex-direction-row"); + + const acceptButton = document.createElement("a"); + acceptButton.classList.add("button", "is-success"); + acceptButton.textContent = acceptButtonLabel; + acceptButton.addEventListener("click", () => { + window.location.href = contextPath + "game?id=" + game_id; + }); + + const declineButton = document.createElement("a"); + declineButton.classList.add("button", "is-danger"); + declineButton.textContent = declineButtonLabel; + declineButton.addEventListener("click", () => { + notification.remove(); + }); + + buttons.appendChild(acceptButton); + buttons.appendChild(declineButton); + notificationSubtitle.appendChild(notificationMessage); + notificationSubtitle.appendChild(buttons); notificationTitle.appendChild(notificationIcon); notification.appendChild(notificationTitle); - notification.appendChild(notificationMessage); + notification.appendChild(notificationSubtitle); + notification.appendChild(buttons); document.body.appendChild(notification); - // Retirer la notification et les animations après 5 secondes - setTimeout(() => notification.remove(), 5010); }; diff --git a/S2/DevWeb/Projet/src/main/webapp/static/js/websockets/connected-users-websocket.js b/S2/DevWeb/Projet/src/main/webapp/static/js/websockets/connected-users-websocket.js index e5eec4d..571f52e 100644 --- a/S2/DevWeb/Projet/src/main/webapp/static/js/websockets/connected-users-websocket.js +++ b/S2/DevWeb/Projet/src/main/webapp/static/js/websockets/connected-users-websocket.js @@ -1,4 +1,5 @@ import WebsocketToolkit from "../WebsocketToolkit.js"; +import {onInvite} from "../notification/invite.js"; let users = []; const languageSelector = document.getElementById('language-select'); @@ -61,15 +62,7 @@ ws.onMessage("removeUser", (data) => { }); ws.onMessage("invite", (data) => { const {from, to, game_id} = data; - let inviteMsg ; - if (languageSelector.value === "EN") { - inviteMsg = from.username + " invited you to join his game"; - } else { - inviteMsg = from.username + " vous a invité à rejoindre sa partie"; - } - if (confirm(from.username + inviteMsg)) { - window.location.href = contextPath+"game?id=" + game_id; - } + onInvite(from.username, contextPath, game_id) }) ws.onError((error) => console.error(error)); ws.onClose(() => console.log("Disconnected from the server"));