From 3c071f68cd247714379eacc8dbe92f17ad3ddadb Mon Sep 17 00:00:00 2001
From: dvorakchen <dvorakchen@outlook.com>
Date: Thu, 4 Jul 2024 15:15:11 +0800
Subject: [PATCH] feat: message tip

---
 .../Shared/Components/Chat/Default.cshtml     | 14 ++++++-----
 .../wwwroot/scripts/chat.js                   | 25 ++++++++++++++++---
 2 files changed, 29 insertions(+), 10 deletions(-)

diff --git a/src/Aiursoft.ChessServer/Views/Shared/Components/Chat/Default.cshtml b/src/Aiursoft.ChessServer/Views/Shared/Components/Chat/Default.cshtml
index 31c4a1f..c0d0568 100644
--- a/src/Aiursoft.ChessServer/Views/Shared/Components/Chat/Default.cshtml
+++ b/src/Aiursoft.ChessServer/Views/Shared/Components/Chat/Default.cshtml
@@ -1,6 +1,13 @@
 @model Aiursoft.ChessServer.Views.Shared.Components.Chat.ChatModel
 
-<div id="chat" class="w-100">
+<div id="chat" class="w-100 position-relative">
+    <div class="position-absolute d-flex justify-content-center w-100">
+        <div class="btn-group btn-group-sm" id="newMessageTip" role="group" hidden=true aria-label="Basic example">
+            <span type="button" class="btn btn-small btn-success shadow" disabled></span>
+            <button type="button" class="btn btn-small btn-success shadow" data-close><i
+                    class="fa-solid fa-x"></i></button>
+        </div>
+    </div>
     <div class="container overflow-y-scroll scrollbar-width-none aspect-1-1" id="messages-box"></div>
 
     <form class="input-group input-group-sm my-2" id="chatSendForm">
@@ -8,11 +15,6 @@
         <button class="btn btn-primary btn-sm" type="submit" style="border-radius: 0 10px 10px 0;">Send</button>
     </form>
 
-    <script type="module">
-
-
-    </script>
-
     <template id="messageFromOpponent">
         <div class="row justify-content-start">
             <div class="d-flex flex-column align-items-start">
diff --git a/src/Aiursoft.ChessServer/wwwroot/scripts/chat.js b/src/Aiursoft.ChessServer/wwwroot/scripts/chat.js
index 5c3935b..8f9f4d1 100644
--- a/src/Aiursoft.ChessServer/wwwroot/scripts/chat.js
+++ b/src/Aiursoft.ChessServer/wwwroot/scripts/chat.js
@@ -2,11 +2,16 @@
   const messagesBox = document.getElementById("messages-box");
   const inputMessage = document.getElementById("inputMessage");
   const chatSendForm = document.getElementById("chatSendForm");
+  const messageTip = document.getElementById("newMessageTip");
   const wsScheme = window.location.protocol === "https:" ? "wss://" : "ws://";
   const socket = new WebSocket(
     `${wsScheme}${window.location.host}/chats/${gameId}.ws?playerId=${playerId}`
   );
 
+  messageTip.querySelector("[data-close]").addEventListener("click", () => {
+    messageTip.setAttribute("hidden", true);
+  });
+
   chatSendForm.onsubmit = function sendNewMessage(e) {
     e.preventDefault();
     let msg = inputMessage.value;
@@ -34,13 +39,23 @@
   function appendOpponentNewMessage(message, senderNickname) {
     let template = document.getElementById("messageFromOpponent");
 
-    appendNewMessage(message, senderNickname, template);
+    let msg = appendNewMessage(message, senderNickname, template);
+
+    // appears new message tpi
+    const MEDIUM_BREAKPOINT = 768;
+    if (
+      window.innerWidth < MEDIUM_BREAKPOINT &&
+      msg.getBoundingClientRect().bottom > window.innerHeight
+    ) {
+      messageTip.children[0].textContent = `${senderNickname}: ${message}`;
+      messageTip.removeAttribute("hidden");
+    }
 
     scrollToNewestMessage();
   }
 
   function appendNewMessage(message, senderNickname, template) {
-    let t = template.content;
+    let t = template.content.cloneNode(true);
     let txt = t.querySelector("[data-message]");
     txt.textContent = message;
     let nickname = t.querySelector("[data-message-from]");
@@ -55,8 +70,10 @@
 
     nickname.textContent = lastSender === senderNickname ? "" : senderNickname;
 
-    let clone = document.importNode(t, true);
-    messagesBox.appendChild(clone);
+    const msgEle = t.children[0];
+    messagesBox.appendChild(msgEle);
+
+    return msgEle;
   }
 
   socket.onmessage = function (event) {