Merge branch 'main' of https://github.com/billsonnn/nitro-react

src/views/navigator/NavigatorView.tsx

@@ -140,7 +140,7 @@ export function NavigatorView(props: NavigatorViewProps): JSX.Element
                         </button>
                     </div>
                     <NavigatorTabsView topLevelContext={ topLevelContext } topLevelContexts={ topLevelContexts } setTopLevelContext={ setTopLevelContext } />
-                    <TransitionAnimation className="d-flex px-3 pb-3" type={ TransitionAnimationTypes.FADE_IN } inProp={ (!isSearching && !!searchResults) } timeout={ 300 }>
+                    <TransitionAnimation className="d-flex px-3 pb-3" type={ TransitionAnimationTypes.FADE_IN } inProp={ (!isSearching && !!searchResults) } timeout={ 200 }>
                         <NavigatorResultListsView resultLists={ searchResults } />
                     </TransitionAnimation>
                 </div>

src/views/navigator/lock/NavigatorLockView.tsx

@@ -15,7 +15,6 @@ export function NavigatorLockView(props: NavigatorLockViewProps): JSX.Element
     }
 
     return (
-        <>
         <DraggableWindow handle=".drag-handler">
             <div className="nitro-navigator-lock d-flex flex-column bg-primary border border-black shadow rounded position-absolute">
                 <div className="drag-handler d-flex justify-content-between align-items-center px-3 pt-3">
@@ -32,7 +31,6 @@ export function NavigatorLockView(props: NavigatorLockViewProps): JSX.Element
                     </> }
                 </div>
             </div>
-            </DraggableWindow>
+        </DraggableWindow>
-        </>
     );
 }

src/views/navigator/result-lists/result-list/result/NavigatorResultView.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import { RoomDataParser } from 'nitro-renderer';
-import React from 'react';
+import React, { useContext } from 'react';
 import { NavigatorContext } from '../../../NavigatorView';
 import { NavigatorResultViewProps } from './NavigatorResultView.types';
 
@@ -8,6 +8,8 @@ export function NavigatorResultView(props: NavigatorResultViewProps): JSX.Elemen
 {
     const { result = null } = props;
 
+    const navigatorContext = useContext(NavigatorContext);
+
     function getUserCounterColor(): string
     {
         const num: number = (100 * (result.userCount / result.maxUserCount));
@@ -37,28 +39,24 @@ export function NavigatorResultView(props: NavigatorResultViewProps): JSX.Elemen
     }
 
     return (
-        <NavigatorContext.Consumer>
+        <div className="d-flex flex-column justify-content-center align-items-center nitro-navigator-result" onClick={ () => navigatorContext.onTryVisitRoom(result) }>
-        { navigatorContext => {
+            <div className="d-flex justify-content-between w-100 px-2 py-1">
-            return <div className="d-flex flex-column justify-content-center align-items-center nitro-navigator-result" onClick={ () => navigatorContext.onTryVisitRoom(result) }>
+                <div className="d-flex justify-content-center flex-grow-1 overflow-hidden">
-                        <div className="d-flex justify-content-between w-100 px-2 py-1">
+                    <div className={ "d-flex justify-content-center align-items-center badge text-center " + getUserCounterColor() }>
-                            <div className="d-flex justify-content-center flex-grow-1 overflow-hidden">
+                        <i className="fas fa-user mr-1 small"></i> { result.userCount }
-                                <div className={ "d-flex justify-content-center align-items-center badge text-center " + getUserCounterColor() }>
-                                    <i className="fas fa-user mr-1 small"></i> { result.userCount }
-                                </div>
-                                <div className="d-flex flex-column justify-content-center align-items-start flex-grow-1 px-2 overflow-hidden">
-                                    <span className="d-block text-truncate" style={ { maxWidth: '95%' } }>{ result.roomName }</span>
-                                </div>
-                            </div>
-                            <div className="d-flex flex-row-reverse align-items-center">
-                                <i className="fas fa-info-circle small" onClick={ openInfo }></i>
-                                { result.habboGroupId > 0 && <i className="fas fa-users mr-2 small"></i> }
-                                { result.doorMode !== RoomDataParser.OPEN_STATE && 
-                                    <i className={ "mr-2 fas small" + classNames( {'fa-lock': result.doorMode === RoomDataParser.DOORBELL_STATE, 'fa-key': result.doorMode === RoomDataParser.PASSWORD_STATE })}></i>
-                                }
-                            </div>
-                        </div>
                     </div>
-        }}
+                    <div className="d-flex flex-column justify-content-center align-items-start flex-grow-1 px-2 overflow-hidden">
-        </NavigatorContext.Consumer>
+                        <span className="d-block text-truncate" style={ { maxWidth: '95%' } }>{ result.roomName }</span>
+                    </div>
+                </div>
+                <div className="d-flex flex-row-reverse align-items-center">
+                    <i className="fas fa-info-circle small" onClick={ openInfo }></i>
+                    { result.habboGroupId > 0 && <i className="fas fa-users mr-2 small"></i> }
+                    { result.doorMode !== RoomDataParser.OPEN_STATE && 
+                        <i className={ 'mr-2 fas small ' + classNames( {'fa-lock': result.doorMode === RoomDataParser.DOORBELL_STATE, 'fa-key': result.doorMode === RoomDataParser.PASSWORD_STATE })}></i>
+                    }
+                </div>
+            </div>
+        </div>
     );
 }

src/views/room/RoomView.tsx

@@ -6,6 +6,7 @@ import { WindowResizeEvent } from '../../api/nitro/room/DispatchResizeEvent';
 import { DispatchTouchEvent } from '../../api/nitro/room/DispatchTouchEvent';
 import { GetRoomEngine } from '../../api/nitro/room/GetRoomEngine';
 import { RoomViewProps } from './RoomView.types';
+import { ChatWidgetsView } from './widgets/chat/ChatWidgetsView';
 import { FurnitureWidgetsView } from './widgets/furniture/FurnitureWidgetsView';
 
 export function RoomView(props: RoomViewProps): JSX.Element
@@ -85,7 +86,10 @@ export function RoomView(props: RoomViewProps): JSX.Element
             { roomSession && <div id="room-view" className="nitro-room-container"></div> }
             { roomSession && events && roomCanvas &&
                 createPortal(props.children, document.getElementById('room-view').appendChild(roomCanvas)) &&
-                <FurnitureWidgetsView events={ events } /> }
+                <>
+                    <FurnitureWidgetsView events={ events } />
+                    <ChatWidgetsView />
+                </> }
         </div>
     );
 }

src/views/room/widgets/Widgets.scss

@@ -1 +1,2 @@
+@import './chat/ChatWidgetsView';
 @import './furniture/FurnitureWidgets';

src/views/room/widgets/chat/ChatWidgetsView.scss

@@ -0,0 +1,5 @@
+.nitro-chat-widget {
+    pointer-events: none;
+}
+
+@import './form/ChatFormWidgetView';

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

@@ -0,0 +1,15 @@
+import { ChatWidgetsViewProps } from './ChatWidgetsView.types';
+import { ChatFormWidgetView } from './form/ChatFormWidgetView';
+import { ChatMessagesWidgetView } from './messages/ChatMessagesWidgetView';
+
+export function ChatWidgetsView(props: ChatWidgetsViewProps): JSX.Element
+{
+    const {} = props;
+
+    return (
+        <div className="nitro-chat-widget">
+            <ChatMessagesWidgetView />
+            <ChatFormWidgetView />
+        </div>
+    );
+}

src/views/room/widgets/chat/ChatWidgetsView.types.ts

@@ -0,0 +1,3 @@
+
+export interface ChatWidgetsViewProps
+{}

src/views/room/widgets/chat/form/ChatFormWidgetView.scss

@@ -0,0 +1,17 @@
+.nitro-chat-form-input {
+    display: inline-grid;
+    vertical-align: top;
+    align-items: center;
+    position: relative;
+    height: 100%;
+    padding: 0 10px;
+    pointer-events: all;
+
+    input {
+        width: auto;
+        height: 45px;
+        border-radius: 10px;
+        border: 1px solid rgb(0, 0, 0);
+        background: #EDEDED;
+    }
+}

src/views/room/widgets/chat/form/ChatFormWidgetView.tsx

@@ -0,0 +1,15 @@
+import { LocalizeText } from '../../../../../utils/LocalizeText';
+import { ChatFormWidgetViewProps } from './ChatFormWidgetView.types';
+
+export function ChatFormWidgetView(props: ChatFormWidgetViewProps): JSX.Element
+{
+    const {} = props;
+
+    return (
+        <div className="nitro-chat-form fixed-bottom mb-4 d-flex justify-content-center">
+            <div className="nitro-chat-form-input">
+                <input type="text" className="form-control" placeholder={ LocalizeText('widgets.chatinput.default') } />
+            </div>
+        </div>
+    );
+}

src/views/room/widgets/chat/form/ChatFormWidgetView.types.tsx

@@ -0,0 +1,2 @@
+export interface ChatFormWidgetViewProps
+{}

src/views/room/widgets/chat/messages/ChatMessagesWidgetView.tsx

@@ -0,0 +1,10 @@
+import { ChatMessagesWidgetViewProps } from './ChatMessagesWidgetView.types';
+
+export function ChatMessagesWidgetView(props: ChatMessagesWidgetViewProps): JSX.Element
+{
+    const {} = props;
+
+    return (
+        <></>
+    );
+}

src/views/room/widgets/chat/messages/ChatMessagesWidgetView.types.ts

@@ -0,0 +1,2 @@
+export interface ChatMessagesWidgetViewProps
+{}

src/views/room/widgets/chat/messages/message/ChatMessageWidgetView.tsx

@@ -0,0 +1,10 @@
+import { ChatMessageWidgetViewProps } from './ChatMessageWidgetView.types';
+
+export function ChatMessageWidgetView(props: ChatMessageWidgetViewProps): JSX.Element
+{
+    const {} = props;
+
+    return (
+        <></>
+    );
+}

src/views/room/widgets/chat/messages/message/ChatMessageWidgetView.types.ts

@@ -0,0 +1,2 @@
+export interface ChatMessageWidgetViewProps
+{}