feat: devweb - Add inviting notification

2026-05-13 17:11:49 +00:00 · 2024-06-12 15:32:06 +02:00
parent ce73807662
commit 2184320d53
6 changed files with 78 additions and 27 deletions
@@ -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>
@@ -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>
@@ -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>
@@ -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);
@@ -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 = "<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.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);
 };
@@ -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"));