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

.vscode/settings.json

@@ -9,7 +9,6 @@
         "source.fixAll.sortJSON": false,
         "source.organizeImports": true
     },
-    "emmet.showExpandedAbbreviation": "never",
 	"git.ignoreLimitWarning": true,
     "files.eol": "\n",
     "files.insertFinalNewline": true,

src/App.tsx

@@ -11,6 +11,7 @@ export const App: FC<{}> = props =>
     const [ isReady, setIsReady ] = useState(false);
     const [ isError, setIsError ] = useState(false);
     const [message, setMessage] = useState('Getting Ready');
+    const [percent, setPercent] = useState(0);
 
     //@ts-ignore
     if(!NitroConfig) throw new Error('NitroConfig is not defined!');
@@ -34,12 +35,18 @@ export const App: FC<{}> = props =>
         return urls;
     }, []);
 
+    const loadPercent = useCallback(() =>
+    {
+        setPercent(percent + 16.66);
+    }, [setPercent,percent]);
+
     const handler = useCallback((event: NitroEvent) =>
     {
         switch(event.type)
         {
             case ConfigurationEvent.LOADED:
                 GetNitroInstance().localization.init();
+                loadPercent();
                 return;
             case ConfigurationEvent.FAILED:
                 setIsError(true);
@@ -56,6 +63,7 @@ export const App: FC<{}> = props =>
                 setTimeout(() => window.location.reload(), 1500);
                 return;
             case NitroCommunicationDemoEvent.CONNECTION_HANDSHAKING:
+                loadPercent();
 				return;
 			case NitroCommunicationDemoEvent.CONNECTION_HANDSHAKE_FAILED:
                 setIsError(true);
@@ -63,6 +71,7 @@ export const App: FC<{}> = props =>
 				return;
 			case NitroCommunicationDemoEvent.CONNECTION_AUTHENTICATED:
                 setMessage('Finishing Up');
+                loadPercent();
 
                 GetAvatarRenderManager().init();
 
@@ -82,9 +91,14 @@ export const App: FC<{}> = props =>
                 return;
             case AvatarRenderEvent.AVATAR_RENDER_READY:
                 GetNitroInstance().init();
+                loadPercent();
                 return;
             case RoomEngineEvent.ENGINE_INITIALIZED:
+                loadPercent();
+                setTimeout(() =>
+                { 
                     setIsReady(true);
+                }, 200)
                 return;
             case NitroLocalizationEvent.LOADED:
                 GetNitroInstance().core.asset.downloadAssets(getPreloadAssetUrls(), (status: boolean) =>
@@ -94,6 +108,8 @@ export const App: FC<{}> = props =>
                         setMessage('Connecting');
                         
                         GetCommunication().init();
+
+                        loadPercent();
                     }
                     else
                     {
@@ -103,7 +119,7 @@ export const App: FC<{}> = props =>
                 });
                 return;
         }
-    }, [ getPreloadAssetUrls ]);
+    }, [ getPreloadAssetUrls,loadPercent ]);
 
     UseMainEvent(Nitro.WEBGL_UNAVAILABLE, handler);
     UseMainEvent(Nitro.WEBGL_CONTEXT_LOST, handler);
@@ -130,7 +146,7 @@ export const App: FC<{}> = props =>
     return (
         <Base fit overflow="hidden">
             { (!isReady || isError) &&
-                <LoadingView isError={ isError } message={ message } /> }
+                <LoadingView isError={isError} message={message} percent={ percent } /> }
             <TransitionAnimation type={ TransitionAnimationTypes.FADE_IN } inProp={ (isReady && !isError) }>
                 <MainView />
             </TransitionAnimation>

src/common/card/NitroCardView.scss

@@ -83,11 +83,12 @@ $nitro-card-tabs-height: 33px;
                 color: $white;
                 text-shadow: 0px 4px 4px rgba($black, 0.25);
                 @include font-size($h5-font-size);
+                min-height: 21px;
             }
 
             .nitro-card-header-close {
                 cursor: pointer;
-                padding: 0px 1px;
+                padding: 0px 2px;
                 line-height: 1;
                 @include font-size($h7-font-size);
                 border-radius: $border-radius;

src/common/draggable-window/DraggableWindow.tsx

@@ -182,6 +182,10 @@ export const DraggableWindow: FC<DraggableWindowProps> = props =>
                 element.style.top = `calc(50vh - ${ (element.offsetHeight / 2) }px)`;
                 element.style.left = `calc(50vw - ${ (element.offsetWidth / 2) }px)`;
                 break;
+            case DraggableWindowPosition.TOP_LEFT:
+                element.style.top = '50px';
+                element.style.left = '50px';
+                break;
         }
 
         if(uniqueKey !== null)

src/common/draggable-window/DraggableWindowPosition.ts

@@ -2,5 +2,6 @@ export class DraggableWindowPosition
 {
     public static CENTER: string = 'DWP_CENTER';
     public static TOP_CENTER: string = 'DWP_TOP_CENTER';
+    public static TOP_LEFT: string = 'DWP_TOP_LEFT';
     public static NOTHING: string = 'DWP_NOTHING';
 }

src/components/chat-history/ChatHistoryView.tsx

@@ -127,7 +127,7 @@ export const ChatHistoryView: FC<{}> = props =>
         <ChatHistoryContextProvider value={ { chatHistoryState, roomHistoryState } }>
             <ChatHistoryMessageHandler />
             { isVisible &&
-                <NitroCardView uniqueKey="chat-history" className="nitro-chat-history">
+                <NitroCardView uniqueKey="chat-history" className="nitro-chat-history" theme="primary-slim">
                     <NitroCardHeaderView headerText={ LocalizeText('room.chathistory.button.text') } onCloseClick={ event => setIsVisible(false) }/>
                     <NitroCardContentView>
                         <AutoSizer defaultWidth={ 300 } defaultHeight={ 200 } onResize={ onResize }>

src/components/loading/LoadingView.scss

@@ -1,6 +1,6 @@
 .nitro-loading {
     position: relative;
-    background: linear-gradient(to bottom, $white, 15%, $primary);
+    background: $primary;
 
     .connecting-duck {
         position: absolute;
@@ -66,6 +66,34 @@
         background: url('../../assets/images/nitro/nitro-light.svg') no-repeat center;
         z-index: -1;
     }
+
+    .nitro-loading-bar {
+        border:1px solid white;
+        padding:3px;
+        height:30px;
+        border-radius: 8px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+
+        &::before {
+            content:'';
+            position: absolute;
+            inset: 0;
+            margin:3px;
+            border-radius: 4px;
+            background:darken($primary,15);
+            z-index: 0;
+        }
+
+        .nitro-loading-bar-inner {
+            height:100%;
+            z-index: 4;
+            border-radius: 4px;
+            transition: all 1s;
+            background: repeating-linear-gradient($tertiary, $tertiary 50%, $quaternary 50%, $quaternary 100%);
+        }
+    }
 }
 
 @keyframes connecting-duck {

src/components/loading/LoadingView.tsx

@@ -6,11 +6,12 @@ interface LoadingViewProps
 {
     isError: boolean;
     message: string;
+    percent: number;
 }
 
 export const LoadingView: FC<LoadingViewProps> = props =>
 {
-    const { isError = false, message = '' } = props;
+    const { isError = false, message = '', percent = 0 } = props;
     const [ loadingShowing, setLoadingShowing ] = useState(false);
 
     useEffect(() =>
@@ -28,10 +29,26 @@ export const LoadingView: FC<LoadingViewProps> = props =>
     }, []);
     
     return (
-        <Column fit center position="relative" className="nitro-loading">
+        <Column position="relative" className="nitro-loading h-100">
+            <div className="container h-100">
+                <div className="row h-100 justify-content-center">
                     <Base className="connecting-duck" />
-            { isError && (message && message.length) &&
+                    <div className="col-6 align-self-end text-center py-4">
-                <Base className="m-auto bottom-3 fs-4 text-shadow" position="absolute">{ message }</Base> }
+                        { isError && (message && message.length) ?
+                            <Base className="fs-4 text-shadow">{message}</Base>
+                            :
+                            <>
+                                <Base className="fs-4 text-shadow">{percent.toFixed()}%</Base>
+                                <div className="nitro-loading-bar mt-4">
+                                    <div className="nitro-loading-bar-inner" style={{ 'width': `${ percent }%` }}/>
+                                </div>   
+                            </>
+                        }
+                        
+                    </div>
+                </div>
+            </div>
+            
         </Column>
     );
 }

src/components/mod-tools/ModToolsView.tsx

@@ -2,7 +2,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { RoomEngineObjectEvent, RoomObjectCategory } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useReducer, useState } from 'react';
 import { GetRoomSession } from '../../api';
-import { Button, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../common';
+import { Button, DraggableWindowPosition, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../common';
 import { ModToolsEvent, ModToolsOpenRoomChatlogEvent, ModToolsOpenRoomInfoEvent, ModToolsOpenUserInfoEvent } from '../../events';
 import { DispatchUiEvent, UseRoomEngineEvent, UseUiEvent } from '../../hooks';
 import { ISelectedUser } from './common/ISelectedUser';
@@ -185,7 +185,7 @@ export const ModToolsView: FC<{}> = props =>
         <ModToolsContextProvider value={ { modToolsState, dispatchModToolsState } }>
             <ModToolsMessageHandler />
             { isVisible &&
-                <NitroCardView uniqueKey="mod-tools" className="nitro-mod-tools">
+                <NitroCardView uniqueKey="mod-tools" className="nitro-mod-tools" windowPosition={ DraggableWindowPosition.TOP_LEFT } theme="primary-slim" >
                     <NitroCardHeaderView headerText={ 'Mod Tools' } onCloseClick={ event => setIsVisible(false) } />
                     <NitroCardContentView className="text-black" gap={ 1 }>
                         <Button gap={ 1 } onClick={ event => handleClick('toggle_room') } disabled={ !currentRoomId }>

src/components/mod-tools/views/tickets/CfhChatlogView.tsx

@@ -28,6 +28,7 @@ export const CfhChatlogView: FC<CfhChatlogViewProps> = props =>
         if(!parser || parser.data.issueId !== issueId) return;
 
         setChatlogData(parser.data);
+        console.log(parser.data)
     }, [issueId]);
 
     UseMessageEventHook(CfhChatlogEvent, onCfhChatlogEvent);

src/components/navigator/views/search-result/NavigatorSearchResultView.tsx

@@ -63,7 +63,7 @@ export const NavigatorSearchResultView: FC<NavigatorSearchResultViewProps> = pro
                     <FontAwesomeIcon icon={ isExtended ? 'minus' : 'plus' } className="text-secondary" />
                     <Text>{ LocalizeText(getResultTitle()) }</Text>
                 </Flex>
-                <FontAwesomeIcon icon={ ((displayMode === NavigatorSearchResultViewDisplayMode.LIST) ? 'bars' : (displayMode >= NavigatorSearchResultViewDisplayMode.THUMBNAILS) ? 'th' : null) } className="text-secondary" onClick={ toggleDisplayMode } />
+                <FontAwesomeIcon icon={ ((displayMode === NavigatorSearchResultViewDisplayMode.LIST) ? 'th' : (displayMode >= NavigatorSearchResultViewDisplayMode.THUMBNAILS) ? 'bars' : null) } className="text-secondary" onClick={ toggleDisplayMode } />
             </Flex>
             { isExtended &&
                 <Grid columnCount={ (gridHasTwoColumns ? 2 : 1) } className={ 'navigator-grid' + (gridHasTwoColumns ? ' two-columns' : '') } gap={ 0 }>

src/components/room/widgets/furniture/external-image/FurnitureExternalImageView.tsx

@@ -36,7 +36,7 @@ export const FurnitureExternalImageView: FC<{}> = props =>
     if((objectId === -1) || !photoData) return null;
     
     return (
-        <NitroCardView className="nitro-external-image-widget">
+        <NitroCardView className="nitro-external-image-widget" theme="primary-slim">
             <NitroCardHeaderView headerText={ '' } onCloseClick={ close } />
             <NitroCardContentView>
                 <Flex center className="picture-preview border border-black" style={ photoData.w ? { backgroundImage: 'url(' + photoData.w + ')' } : {} }>