SH-77 Added mention window for chat (#54)

* added players suggestions * updated scroll styles
Porhay · May 20, 2024 · e9c370f · e9c370f
1 parent 07003fe
commit e9c370f
Show file tree

Hide file tree

Showing 15 changed files with 743 additions and 522 deletions.
diff --git a/apps/shelter-client/src/components/Chat.tsx b/apps/shelter-client/src/components/Chat.tsx
@@ -12,6 +12,7 @@ interface IState {
   messages: Message[];
   newMessage: string;
   isResizing: boolean;
+  isPlayersSuggested: boolean;
   chatHeight: number;
   chatWidth: number;
   startX?: number;
@@ -28,9 +29,11 @@ interface Message {
 const Chat: FC = () => {
   const { sm } = useSocketManager();
   const user = useSelector((state: RootState) => state.user);
+  const lobby = useSelector((state: RootState) => state.lobby);
   const chatRef = useRef<HTMLDivElement>(null);
   const messageTextRef = useRef<HTMLDivElement>(null);
   const resizeRef = useRef<HTMLDivElement>(null);
+  const chatInputRef = useRef<HTMLInputElement>(null);
 
   // LOCAL STATE
   const updateState = (newState: Partial<IState>): void =>
@@ -39,6 +42,7 @@ const Chat: FC = () => {
     messages: [],
     newMessage: '',
     isResizing: false,
+    isPlayersSuggested: false,
     chatHeight: 54,
     chatWidth: 20,
   });
@@ -112,6 +116,21 @@ const Chat: FC = () => {
     updateState({ isResizing: false });
   };
 
+  const handleInputChange = (e: any) => {
+    if (e.target.value === '@') {
+      updateState({ isPlayersSuggested: true });
+    } else {
+      updateState({ isPlayersSuggested: false });
+    }
+    updateState({ newMessage: e.target.value });
+  };
+
+  const handleSuggestedPlayerClick = (e: any) => {
+    updateState({ isPlayersSuggested: false });
+    updateState({ newMessage: `@${e.target.innerText}, ` });
+    chatInputRef.current?.focus();
+  };
+
   useEffect(() => {
     window.addEventListener('mousemove', resize);
     window.addEventListener('mouseup', stopResizing);
@@ -156,16 +175,33 @@ const Chat: FC = () => {
           </div>
         ))}
       </div>
-      <div className="input-container">
-        <input
-          autoComplete="off"
-          spellCheck="false"
-          type="text"
-          placeholder="Type your message..."
-          value={state.newMessage}
-          onChange={(e) => updateState({ newMessage: e.target.value })}
-          onKeyDown={(e) => handleKeyDown(e, handleSendMessage)}
-        />
+      <div className="input-wrapper">
+        <div className="input-container">
+          {state.isPlayersSuggested && (
+            <div className="suggested-player-wrapper">
+              {lobby.players.map((player: any, index: number) => {
+                return (
+                  <div
+                    className="suggested-player"
+                    onClick={handleSuggestedPlayerClick}
+                  >
+                    <p>{player.displayName}</p>
+                  </div>
+                );
+              })}
+            </div>
+          )}
+          <input
+            autoComplete="off"
+            spellCheck="false"
+            type="text"
+            placeholder="Type your message..."
+            value={state.newMessage}
+            onChange={handleInputChange}
+            onKeyDown={(e) => handleKeyDown(e, handleSendMessage)}
+            ref={chatInputRef}
+          />
+        </div>
         <button onClick={handleSendMessage}>Send</button>
       </div>
     </div>

diff --git a/apps/shelter-client/src/styles/ActivityLogs.scss b/apps/shelter-client/src/styles/ActivityLogs.scss
@@ -1,5 +1,4 @@
 .activity-logs-wraper {
-    overflow-y: scroll;
     height: 38vh;
 }
 

diff --git a/apps/shelter-client/src/styles/Chat.scss b/apps/shelter-client/src/styles/Chat.scss
@@ -1,3 +1,5 @@
+@import './utils/constants.scss';
+
 .chat-container {
   display: flex;
   justify-content: center;
@@ -109,35 +111,43 @@
     }
   }
 
-  .input-container {
+  .input-wrapper {
     display: flex;
-    justify-content: center;
-    align-items: center;
+    justify-content: space-between;
     width: 95%;
     margin-bottom: 10px;
 
     input {
       display: flex;
       width: 100%;
+      width: -moz-available;
+      width: -webkit-fill-available;
+      width: fill-available;
       justify-content: center;
       align-items: center;
       padding: 8px;
       border: 1px solid #ccc;
       border-radius: 4px;
-      margin-right: 8px;
+      outline: none;
     }
 
     button {
       padding: 8px 16px;
-      background-color: #4caf50;
-      color: #fff;
+      background-color: $dark_sunset_color;
+      color: #000;
       border: none;
       border-radius: 4px;
       cursor: pointer;
     }
   }
 }
 
+.input-container {
+  position: relative;
+  margin-right: 8px;
+  width: 100%;
+}
+
 .messages-container::-webkit-scrollbar {
   width: 12px;
   background-color: transparent;
@@ -153,3 +163,23 @@
 .messages-container::-webkit-scrollbar-button {
   display: none;
 }
+
+.suggested-player-wrapper {
+  position: absolute;
+  bottom:   35px;
+  width: 100%;
+  color: #fff;
+  background-color: #000000d5;
+  border-radius: 3px;
+  margin-bottom: 5px;
+
+  .suggested-player {
+    border-radius: 3px;
+    padding: 5px 10px;
+    cursor: pointer;
+
+    &:hover {
+      background-color: #7c7b7bd4;
+    }
+  }
+}
diff --git a/apps/shelter-client/src/styles/Main.scss b/apps/shelter-client/src/styles/Main.scss
@@ -1,3 +1,5 @@
+@import './utils/constants.scss';
+
 .main-page-container {
   display: flex;
   flex-direction: column;
@@ -13,6 +15,9 @@
   }
 
   .main-content {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
     height: 100vh;
 
     .all-rooms-container {
@@ -76,7 +81,7 @@
     }
 
     &:hover {
-      background-color: #faaa63ca;
+      background-color: $dark_sunset_color;
 
       .reload-icon {
         transform: rotate(180deg);
@@ -88,7 +93,7 @@
     width: 30%;
     font-size: 16px;
     padding: 8px 4px;
-    background-color: #faaa63ca;
+    background-color: $dark_sunset_color;
     color: #3c1f07d9;
     border: none;
     border-radius: 4px;
@@ -104,7 +109,6 @@
   }
 }
 
-
 .rooms-list {
   .rooms-list-loader {
     display: flex;
@@ -138,6 +142,7 @@
 }
 
 .scroll-down {
+  margin-bottom: 10%;
   opacity: .7;
 
   p {

diff --git a/apps/shelter-client/src/styles/ModalWindow.scss b/apps/shelter-client/src/styles/ModalWindow.scss
@@ -1,3 +1,5 @@
+@import './utils/constants.scss';
+
 .modal-window-container {
     position: absolute;
     width: 100%;
@@ -36,7 +38,7 @@
     .close::after,
     .close::before {
         content: '';
-        background-color: #ffc28cca;
+        background-color: $sunset_color;
         height: 20px;
         width: 2px;
         position: absolute;

diff --git a/apps/shelter-client/src/styles/NotFound.scss b/apps/shelter-client/src/styles/NotFound.scss
@@ -1,12 +1,12 @@
 .not-found-page-container {
-    display: flex;
-    justify-content: center;
-    color: #ffffff;
-    margin: 14vh 0 0 0;
-    padding: 0;
-    
-    pre {
-        background-color: rgba(0, 0, 0, 0.5);
-        padding: 40px;
-    }
-}
+  display: flex;
+  justify-content: center;
+  color: #ffffff;
+  margin: 14vh 0 0 0;
+  padding: 0;
+
+  pre {
+    background-color: rgba(0, 0, 0, 0.5);
+    padding: 40px;
+  }
+}