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

src/App.scss

@@ -96,4 +96,3 @@ $nitro-calendar-height: 400px;
 
 @import './common';
 @import './components';
-@import "./views/Styles";

src/App.tsx

@@ -1,10 +1,10 @@
-import { AvatarRenderEvent, ConfigurationEvent, HabboWebTools, LegacyExternalInterface, Nitro, NitroCommunicationDemoEvent, NitroEvent, NitroLocalizationEvent, NitroVersion, RoomEngineEvent, WebGL } from '@nitrots/nitro-renderer';
+import { ConfigurationEvent, HabboWebTools, LegacyExternalInterface, Nitro, NitroCommunicationDemoEvent, NitroEvent, NitroLocalizationEvent, NitroVersion, RoomEngineEvent, WebGL } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useState } from 'react';
-import { GetAvatarRenderManager, GetCommunication, GetConfiguration, GetNitroInstance } from './api';
+import { GetCommunication, GetConfiguration, GetNitroInstance } from './api';
 import { Base, TransitionAnimation, TransitionAnimationTypes } from './common';
 import { LoadingView } from './components/loading/LoadingView';
 import { MainView } from './components/main/MainView';
-import { DispatchUiEvent, UseAvatarEvent, UseConfigurationEvent, UseLocalizationEvent, UseMainEvent, UseRoomEngineEvent } from './hooks';
+import { DispatchUiEvent, UseConfigurationEvent, UseLocalizationEvent, UseMainEvent, UseRoomEngineEvent } from './hooks';
 
 export const App: FC<{}> = props =>
 {
@@ -35,10 +35,7 @@ export const App: FC<{}> = props =>
         return urls;
     }, []);
 
-    const loadPercent = useCallback(() =>
-    {
-        setPercent(percent + 16.66);
-    }, [setPercent,percent]);
+    const loadPercent = useCallback(() => setPercent(prevValue => (prevValue + 16.66)), []);
 
     const handler = useCallback((event: NitroEvent) =>
     {
@@ -70,10 +67,9 @@ export const App: FC<{}> = props =>
                 setMessage('Handshake Failed');
 				return;
 			case NitroCommunicationDemoEvent.CONNECTION_AUTHENTICATED:
-                setMessage('Finishing Up');
                 loadPercent();
 
-                GetAvatarRenderManager().init();
+                GetNitroInstance().init();
 
                 if(LegacyExternalInterface.available) LegacyExternalInterface.call('legacyTrack', 'authentication', 'authok', []);
 				return;
@@ -89,24 +85,16 @@ export const App: FC<{}> = props =>
 
                 HabboWebTools.send(-1, 'client.init.handshake.fail');
                 return;
-            case AvatarRenderEvent.AVATAR_RENDER_READY:
-                GetNitroInstance().init();
-                loadPercent();
-                return;
             case RoomEngineEvent.ENGINE_INITIALIZED:
                 loadPercent();
-                setTimeout(() =>
-                { 
-                    setIsReady(true);
-                }, 200)
+
+                setTimeout(() => setIsReady(true), 200);
                 return;
             case NitroLocalizationEvent.LOADED:
                 GetNitroInstance().core.asset.downloadAssets(getPreloadAssetUrls(), (status: boolean) =>
                 {
                     if(status)
                     {
-                        setMessage('Connecting');
-                        
                         GetCommunication().init();
 
                         loadPercent();
@@ -132,7 +120,6 @@ export const App: FC<{}> = props =>
     UseLocalizationEvent(NitroLocalizationEvent.LOADED, handler);
     UseConfigurationEvent(ConfigurationEvent.LOADED, handler);
     UseConfigurationEvent(ConfigurationEvent.FAILED, handler);
-    UseAvatarEvent(AvatarRenderEvent.AVATAR_RENDER_READY, handler);
 
     if(!WebGL.isWebGLAvailable())
     {

src/components/hc-center/HcCenterView.tsx

@@ -5,8 +5,8 @@ import { AddEventLinkTracker, CreateLinkEvent, GetConfiguration, LocalizeText, R
 import { Base, Button, Column, Flex, LayoutAvatarImageView, LayoutBadgeImageView, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../common';
 import { HcCenterEvent } from '../../events';
 import { UseMessageEventHook, UseUiEvent } from '../../hooks';
-import { BadgeResolver } from './util/BadgeResolver';
-import { ClubStatus } from './util/ClubStatus';
+import { BadgeResolver } from './common/BadgeResolver';
+import { ClubStatus } from './common/ClubStatus';
 
 
 export const HcCenterView: FC<{}> = props =>

src/components/index.scss

@@ -8,7 +8,9 @@
 @import './friends/FriendsView';
 @import './groups/GroupView';
 @import './guide-tool/GuideToolView';
+@import './hc-center/HcCenterView';
 @import './help/HelpView';
+@import './hotel-view/HotelView';
 @import './inventory/InventoryView';
 @import './loading/LoadingView';
 @import './mod-tools/ModToolsView';

src/components/loading/LoadingView.scss

@@ -54,17 +54,11 @@
         }
     }
 
-    .logo {
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        margin: auto;
-        right: 0;
-        left: 0;
-        width: 35%;
-        height: 35%;
-        background: url('../../assets/images/nitro/nitro-light.svg') no-repeat center;
-        z-index: -1;
+    .nitro-logo {
+        width: 47px;
+        height: 65px;
+        background: transparent url('https://assets.nitrodev.co/logos/react-loader.png') no-repeat center;
+        z-index: 1;
     }
 
     .nitro-loading-bar {

src/components/loading/LoadingView.tsx

@@ -1,6 +1,6 @@
-import { FC, useEffect, useState } from 'react';
+import { FC, useEffect } from 'react';
 import { NotificationUtilities } from '../../api';
-import { Base, Column } from '../../common';
+import { Base, Column, Text } from '../../common';
 
 interface LoadingViewProps
 {
@@ -12,7 +12,6 @@ interface LoadingViewProps
 export const LoadingView: FC<LoadingViewProps> = props =>
 {
     const { isError = false, message = '', percent = 0 } = props;
-    const [ loadingShowing, setLoadingShowing ] = useState(false);
 
     useEffect(() =>
     {
@@ -21,34 +20,26 @@ export const LoadingView: FC<LoadingViewProps> = props =>
         NotificationUtilities.simpleAlert(message, null, null, null, 'Connection Error');
     }, [ isError, message ]);
     
-    useEffect(() =>
-    {
-        const timeout = setTimeout(() => setLoadingShowing(true), 500);
-
-        return () => clearTimeout(timeout);
-    }, []);
-    
     return (
-        <Column position="relative" className="nitro-loading h-100">
-            <div className="container h-100">
-                <div className="row h-100 justify-content-center">
+        <Column fullHeight position="relative" className="nitro-loading">
+            <Base fullHeight className="container h-100">
+                <Column fullHeight alignItems="center" justifyContent="end">
                     <Base className="connecting-duck" />
-                    <div className="col-6 align-self-end text-center py-4">
+                    <Column size={ 6 } className="text-center py-4">
                         { 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">
+                                <Text fontSize={ 4 } variant="white" className="text-shadow">{ percent.toFixed() }%</Text>
+                                <div className="nitro-loading-bar mt-2">
                                     <div className="nitro-loading-bar-inner" style={{ 'width': `${ percent }%` }}/>
                                 </div>   
                             </>
                         }
                         
-                    </div>
-                </div>
-            </div>
-            
+                    </Column>
+                </Column>
+            </Base>
         </Column>
     );
 }

src/components/main/MainView.tsx

@@ -3,8 +3,6 @@ import { FC, useCallback, useEffect, useState } from 'react';
 import { AddEventLinkTracker, GetCommunication, RemoveLinkEventTracker } from '../../api';
 import { Base, TransitionAnimation, TransitionAnimationTypes } from '../../common';
 import { UseRoomSessionManagerEvent } from '../../hooks';
-import { HcCenterView } from '../../views/hc-center/HcCenterView';
-import { HotelView } from '../../views/hotel-view/HotelView';
 import { AchievementsView } from '../achievements/AchievementsView';
 import { AvatarEditorView } from '../avatar-editor/AvatarEditorView';
 import { CameraWidgetView } from '../camera/CameraWidgetView';
@@ -15,7 +13,9 @@ import { FloorplanEditorView } from '../floorplan-editor/FloorplanEditorView';
 import { FriendsView } from '../friends/FriendsView';
 import { GroupsView } from '../groups/GroupsView';
 import { GuideToolView } from '../guide-tool/GuideToolView';
+import { HcCenterView } from '../hc-center/HcCenterView';
 import { HelpView } from '../help/HelpView';
+import { HotelView } from '../hotel-view/HotelView';
 import { InventoryView } from '../inventory/InventoryView';
 import { ModToolsView } from '../mod-tools/ModToolsView';
 import { NavigatorView } from '../navigator/NavigatorView';

src/views/Styles.scss

@@ -1,2 +0,0 @@
-@import "./hotel-view/HotelView";
-@import "./hc-center/HcCenterView.scss";