feat: devweb - Add inviting notification

S2/DevWeb/Projet/src/main/webapp/WEB-INF/pages/profile.jsp

@@ -8,7 +8,6 @@
 
 <layout:base title="${translator.translate('profile_title')}">
     <jsp:attribute name="head">
-        <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/form.css"/>
         <script defer type="module" src="${pageContext.request.contextPath}/static/js/form/profile.js"></script>
     </jsp:attribute>
     <jsp:body>

S2/DevWeb/Projet/src/main/webapp/WEB-INF/tags/layouts/base.tag

@@ -19,6 +19,7 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.0/css/bulma.min.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
     <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/global.css">
+    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/notification.css">
     <script defer type="module" src="${pageContext.request.contextPath}/static/js/navbar.js"></script>
     <script defer type="module" src="${pageContext.request.contextPath}/static/js/notification/error.js"></script>
     <script defer type="module" src="${pageContext.request.contextPath}/static/js/notification/success.js"></script>

S2/DevWeb/Projet/src/main/webapp/WEB-INF/tags/layouts/form.tag

@@ -8,7 +8,6 @@
 
 <layout:base title="${title}">
     <jsp:attribute name="head">
-        <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/form.css"/>
         <jsp:invoke fragment="script"/>
     </jsp:attribute>
     <jsp:body>

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);
     }
-}
+}

S2/DevWeb/Projet/src/main/webapp/static/js/notification/invite.js

@@ -1,31 +1,68 @@
-export function onInvite(invite) {
+export function onInvite(from, contextPath, game_id) {
-  // Animations des champs
+  const languageSelector = document.getElementById('language-select');
-  inputs.forEach(input => {
+
-    input.classList.add("is-info");
+  //Translatables variables
-    input.style.animation = "shake 0.5s ease-in-out"
+  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 = "<i class='fas fa-exclamation-triangle'></i>";
+  notificationIcon.innerHTML = "<i class='fa-solid fa-envelope fa-beat-fade' style='color: #74C0FC;'></i>";
 
+  const notificationSubtitle = document.createElement("div");
+  notificationSubtitle.classList.add("subtitle", "is-6");
   const notificationMessage = document.createElement("p");
-  notificationMessage.classList.add("subtitle", "is-6");
+  notificationMessage.classList.add("is-6");
-  notificationMessage.innerHTML = invite.message;
+  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);
 };

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 ;
+  onInvite(from.username, contextPath, game_id)
-  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;
-  }
 })
 ws.onError((error) => console.error(error));
 ws.onClose(() => console.log("Disconnected from the server"));