Chat updates

src/views/room/handlers/RoomWidgetChatInputHandler.ts

@@ -176,6 +176,12 @@ export class RoomWidgetChatInputHandler extends RoomWidgetHandler
 
                 break;
             }
+            case RoomWidgetChatSelectAvatarMessage.MESSAGE_SELECT_AVATAR: {
+                const selectedEvent = (message as RoomWidgetChatSelectAvatarMessage);
+
+                GetRoomEngine().setSelectedAvatar(selectedEvent.roomId, selectedEvent.objectId);
+                break;
+            }
         }
 
         return null;

src/views/room/widgets/chat/ChatWidgetView.tsx

@@ -3,13 +3,14 @@ import { FC, useCallback, useEffect, useRef, useState } from 'react';
 import { CreateEventDispatcherHook, useRoomEngineEvent } from '../../../../hooks/events';
 import { useRoomContext } from '../../context/RoomContext';
 import { RoomWidgetUpdateChatEvent } from '../../events';
+import { RoomWidgetChatSelectAvatarMessage, RoomWidgetRoomObjectMessage } from '../../messages';
 import { ChatWidgetMessageView } from './message/ChatWidgetMessageView';
 import { ChatBubbleMessage } from './utils/ChatBubbleMessage';
 
 export const ChatWidgetView: FC<{}> = props =>
 {
     const [ chatMessages, setChatMessages ] = useState<ChatBubbleMessage[]>([]);
-    const { roomSession = null, eventDispatcher = null } = useRoomContext();
+    const { roomSession = null, eventDispatcher = null, widgetHandler = null } = useRoomContext();
     const elementRef = useRef<HTMLDivElement>();
 
     const removeHiddenChats = useCallback(() =>
@@ -63,6 +64,9 @@ export const ChatWidgetView: FC<{}> = props =>
     const onRoomWidgetUpdateChatEvent = useCallback((event: RoomWidgetUpdateChatEvent) =>
     {
         const chatMessage = new ChatBubbleMessage(
+            event.userId,
+            event.userCategory,
+            event.roomId,
             event.text,
             event.userName,
             new NitroPoint(event.userX, event.userY),
@@ -92,6 +96,12 @@ export const ChatWidgetView: FC<{}> = props =>
 
     useRoomEngineEvent(RoomDragEvent.ROOM_DRAG, onRoomDragEvent);
 
+    const onChatClicked = useCallback((chat: ChatBubbleMessage) =>
+    {
+        widgetHandler.processWidgetMessage(new RoomWidgetRoomObjectMessage(RoomWidgetRoomObjectMessage.GET_OBJECT_INFO, chat.senderId, chat.senderCategory));
+        widgetHandler.processWidgetMessage(new RoomWidgetChatSelectAvatarMessage(RoomWidgetChatSelectAvatarMessage.MESSAGE_SELECT_AVATAR, chat.senderId, chat.username, chat.roomId));
+    }, [ widgetHandler ]);
+
     useEffect(() =>
     {
         const interval = setInterval(() => moveAllChatsUp(15), 4500);
@@ -106,7 +116,7 @@ export const ChatWidgetView: FC<{}> = props =>
         <div ref={ elementRef } className="nitro-chat-widget">
             { chatMessages.map(chat =>
                 {
-                    return <ChatWidgetMessageView key={ chat.id } chat={ chat } makeRoom={ makeRoom } />
+                    return <ChatWidgetMessageView key={ chat.id } chat={ chat } makeRoom={ makeRoom } onChatClicked={ onChatClicked } />
                 })}
         </div>
     );

src/views/room/widgets/chat/message/ChatWidgetMessageView.scss

@@ -41,6 +41,11 @@
     // -webkit-animation-name: bounceIn; 
     // animation-name: bounceIn;
 
+    &:hover,
+    &:active {
+        pointer-events: none;
+    }
+
     .user-container-bg {
         position: absolute;
         top: -1px;

src/views/room/widgets/chat/message/ChatWidgetMessageView.tsx

@@ -1,49 +1,20 @@
 import { FC, MouseEvent, useCallback, useEffect, useRef, useState } from 'react';
+import { useRoomContext } from '../../../context/RoomContext';
 import { ChatWidgetMessageViewProps } from './ChatWidgetMessageView.types';
 
 export const ChatWidgetMessageView: FC<ChatWidgetMessageViewProps> = props =>
 {
-    const { chat = null, makeRoom = null } = props;
+    const { chat = null, makeRoom = null, onChatClicked = null } = props;
     const [ isVisible, setIsVisible ] = useState(false);
-    const [ messageParts, setMessageParts ] = useState<{text: string, className?: string, style?: any, onClick?: () => void}[]>(null);
+    const { widgetHandler = null } = useRoomContext();
     const elementRef = useRef<HTMLDivElement>();
 
-    const onClick = useCallback((event: MouseEvent) =>
+    const onMouseDown = useCallback((event: MouseEvent<HTMLDivElement>) =>
     {
+        if(event.shiftKey) return;
 
-    }, []);
+        onChatClicked(chat);
-
+    }, [ chat, onChatClicked ]);
-    // useEffect(() =>
-    // {
-    //     if(messageParts) return;
-
-    //     const userNameMention = '@' + GetSessionDataManager().userName;
-
-    //     const matches = [...chat.text.matchAll(new RegExp(userNameMention + '\\b', 'gi'))];
-
-    //     if(matches.length > 0)
-    //     {
-    //         const prevText = chat.text.substr(0, matches[0].index);
-    //         const postText = chat.text.substring(matches[0].index + userNameMention.length, chat.text.length);
-
-    //         setMessageParts(
-    //             [
-    //                 { text: prevText },
-    //                 { text: userNameMention, className: 'chat-mention', onClick: () => {alert('I clicked in the mention')}},
-    //                 { text: postText }
-    //             ]
-    //         );
-    //     }
-    //     else
-    //     {
-    //         setMessageParts(
-    //             [
-    //                 { text: chat.text }
-    //             ]
-    //         );
-    //     }
-        
-    // }, [ chat ]);
 
     useEffect(() =>
     {
@@ -89,20 +60,15 @@ export const ChatWidgetMessageView: FC<ChatWidgetMessageViewProps> = props =>
     }, [ chat.visible ]);
 
     return (
-        <div ref={ elementRef } className="bubble-container" style={ { visibility: (isVisible ? 'visible' : 'hidden') } }>
+        <div ref={ elementRef } className="bubble-container" style={ { visibility: (isVisible ? 'visible' : 'hidden') } } onMouseDown={ onMouseDown }>
             { (chat.styleId === 0) && <div className="user-container-bg" style={ { backgroundColor: chat.color } } /> }
-            <div className={ 'chat-bubble bubble-' + chat.styleId + ' type-' + chat.type } onClick={ onClick }>
+            <div className={ 'chat-bubble bubble-' + chat.styleId + ' type-' + chat.type }>
                 <div className="user-container">
                     { (chat.imageUrl && (chat.imageUrl !== '')) && <div className="user-image" style={ { backgroundImage: 'url(' + chat.imageUrl + ')' } } /> }
                 </div>
                 <div className="chat-content">
                     <b className="username mr-1" dangerouslySetInnerHTML={ {__html: `${ chat.username }: ` } } />
                     <span className="message">{ chat.text }</span>
-                    {/* {
-                        messageParts && messageParts.map((part, index) =>
-                            {
-                                return <span key={ index } className={ part.className } style={ part.style } onClick={ part.onClick }>{ part.text }</span>
-                            }) */}
                 </div>
                 <div className="pointer"></div>
             </div>

src/views/room/widgets/chat/message/ChatWidgetMessageView.types.ts

@@ -4,4 +4,5 @@ export interface ChatWidgetMessageViewProps
 {
     chat: ChatBubbleMessage;
     makeRoom: (chat: ChatBubbleMessage) => void;
+    onChatClicked: (chat: ChatBubbleMessage) => void;
 }

src/views/room/widgets/chat/utils/ChatBubbleMessage.ts

@@ -14,6 +14,9 @@ export class ChatBubbleMessage
     private _left: number = 0;
     
     constructor(
+        public senderId: number = -1,
+        public senderCategory: number = -1,
+        public roomId: number = -1,
         public text: string = '',
         public username: string = '',
         public location: INitroPoint = null,