From 59baf373dbb1e90614e9bd141d8476ea7b94003a Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Sun, 27 Mar 2022 19:23:40 -0400
Subject: [PATCH] More chat changes

---
 .../room/widgets/chat/ChatWidgetView.tsx      | 46 +++++++++++++++----
 .../widgets/chat/common/ChatBubbleMessage.ts  |  3 +-
 .../widgets/chat/common/DoChatsOverlap.ts     |  4 +-
 3 files changed, 41 insertions(+), 12 deletions(-)

diff --git a/src/components/room/widgets/chat/ChatWidgetView.tsx b/src/components/room/widgets/chat/ChatWidgetView.tsx
index 10ca89f5..bf9d8a9e 100644
--- a/src/components/room/widgets/chat/ChatWidgetView.tsx
+++ b/src/components/room/widgets/chat/ChatWidgetView.tsx
@@ -9,26 +9,50 @@ import { DoChatsOverlap } from './common/DoChatsOverlap';
 
 export const ChatWidgetView: FC<{}> = props =>
 {
-    const [chatSettings, setChatSettings] = useState<RoomChatSettings>(null);
+    const [ chatSettings, setChatSettings ] = useState<RoomChatSettings>(null);
     const [ chatMessages, setChatMessages ] = useState<ChatBubbleMessage[]>([]);
     const { roomSession = null, eventDispatcher = null, widgetHandler = null } = useRoomContext();
     const elementRef = useRef<HTMLDivElement>();
 
     const removeHiddenChats = useCallback(() =>
     {
-        if(!chatMessages.length) return;
+        setChatMessages(prevValue =>
+            {
+                if(prevValue)
+                {
+                    const newMessages = prevValue.filter(chat => ((chat.top > (-(chat.height) * 2))));
 
-        const newMessages = chatMessages.filter(chat => ((chat.top > (-(chat.height) * 2))));
+                    if(newMessages.length !== prevValue.length) return newMessages;
+                }
 
-        if(newMessages.length !== chatMessages.length) setChatMessages(newMessages);
-    }, [ chatMessages ]);
+                return prevValue;
+            })
+    }, []);
 
     const moveAllChatsUp = useCallback((amount: number) =>
     {
-        chatMessages.forEach(chat => (chat.top -= amount));
+        setChatMessages(prevValue =>
+            {
+                if(prevValue)
+                {
+                    prevValue.forEach(chat =>
+                        {
+                            if(chat.skipMovement)
+                            {
+                                chat.skipMovement = false;
+            
+                                return;
+                            }
+            
+                            chat.top -= amount;
+                        });
+                }
+
+                return prevValue;
+            });
 
         removeHiddenChats();
-    }, [ chatMessages, removeHiddenChats ]);
+    }, [ removeHiddenChats ]);
 
     const checkOverlappingChats = useCallback((chat: ChatBubbleMessage, moved: number, tempChats: ChatBubbleMessage[]) => 
     {
@@ -42,7 +66,7 @@ export const ChatWidgetView: FC<{}> = props =>
 
             if(!collides || (chat === collides) || (tempChats.indexOf(collides) >= 0) || ((collides.top - moved) >= (chat.top + chat.height))) continue;
 
-            if(DoChatsOverlap(chat, collides, -moved))
+            if(DoChatsOverlap(chat, collides, -moved, 4))
             {
                 const amount = Math.abs((collides.top + collides.height) - chat.top);
 
@@ -50,6 +74,8 @@ export const ChatWidgetView: FC<{}> = props =>
 
                 collides.top -= amount;
 
+                collides.skipMovement = true;
+
                 checkOverlappingChats(collides, amount, tempChats);
             }
         }
@@ -59,6 +85,8 @@ export const ChatWidgetView: FC<{}> = props =>
     {
         if(chatSettings.mode === RoomChatSettings.CHAT_MODE_FREE_FLOW)
         {
+            chat.skipMovement = true;
+
             checkOverlappingChats(chat, 0, [ chat ]);
 
             removeHiddenChats();
@@ -162,7 +190,7 @@ export const ChatWidgetView: FC<{}> = props =>
         {
             if(interval) clearInterval(interval);
         }
-    }, [ chatMessages, moveAllChatsUp, getScrollSpeed ]);
+    }, [ moveAllChatsUp, getScrollSpeed ]);
 
     useEffect(() =>
     {
diff --git a/src/components/room/widgets/chat/common/ChatBubbleMessage.ts b/src/components/room/widgets/chat/common/ChatBubbleMessage.ts
index 8846d3ca..cef0ff27 100644
--- a/src/components/room/widgets/chat/common/ChatBubbleMessage.ts
+++ b/src/components/room/widgets/chat/common/ChatBubbleMessage.ts
@@ -9,6 +9,7 @@ export class ChatBubbleMessage
     public height: number = 0;
     public elementRef: HTMLDivElement = null;
     public visible: boolean = false;
+    public skipMovement: boolean = false;
 
     private _top: number = 0;
     private _left: number = 0;
@@ -26,7 +27,7 @@ export class ChatBubbleMessage
         public imageUrl: string = null,
         public color: string = null
     ) 
-{
+    {
         this.id = ++ChatBubbleMessage.BUBBLE_COUNTER;
     }
 
diff --git a/src/components/room/widgets/chat/common/DoChatsOverlap.ts b/src/components/room/widgets/chat/common/DoChatsOverlap.ts
index 1b7a5ca0..092ce5db 100644
--- a/src/components/room/widgets/chat/common/DoChatsOverlap.ts
+++ b/src/components/room/widgets/chat/common/DoChatsOverlap.ts
@@ -1,7 +1,7 @@
 import { ChatBubbleMessage } from './ChatBubbleMessage';
 
-export const DoChatsOverlap = (a: ChatBubbleMessage, b: ChatBubbleMessage, additionalBTop: number) =>
+export const DoChatsOverlap = (a: ChatBubbleMessage, b: ChatBubbleMessage, additionalBTop: number, padding: number = 0) =>
 {
-    return !(((a.left + a.width) < b.left) || (a.left > (b.left + b.width)) || ((a.top + a.height) < (b.top + additionalBTop)) || (a.top > ((b.top + additionalBTop) + b.height)));
+    return !((((a.left + padding) + a.width) < (b.left + padding)) || ((a.left + padding) > ((b.left + padding) + b.width)) || ((a.top + a.height) < (b.top + additionalBTop)) || (a.top > ((b.top + additionalBTop) + b.height)));
 }
       
\ No newline at end of file