Update more components

src/App.tsx

@@ -1,12 +1,12 @@
 import { ConfigurationEvent, HabboWebTools, LegacyExternalInterface, Nitro, NitroCommunicationDemoEvent, NitroEvent, NitroLocalizationEvent, NitroVersion, RoomEngineEvent, WebGL } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useState } from 'react';
 import { GetCommunication, GetConfiguration, GetNitroInstance } from './api';
+import { LoadingView } from './components/loading/LoadingView';
 import { useConfigurationEvent } from './hooks/events/core/configuration/configuration-event';
 import { useLocalizationEvent } from './hooks/events/nitro/localization/localization-event';
 import { dispatchMainEvent, useMainEvent } from './hooks/events/nitro/main-event';
 import { useRoomEngineEvent } from './hooks/events/nitro/room/room-engine-event';
 import { TransitionAnimation, TransitionAnimationTypes } from './layout';
-import { LoadingView } from './views/loading/LoadingView';
 import { MainView } from './views/main/MainView';
 
 export const App: FC<{}> = props =>

src/components/index.scss

@@ -6,6 +6,7 @@
 @import './groups/GroupView';
 @import './help/HelpView';
 @import './inventory/InventoryView';
+@import './loading/LoadingView';
 @import './mod-tools/ModToolsView';
 @import './navigator/NavigatorView';
 @import './purse/PurseView';

src/components/loading/LoadingView.tsx

@@ -0,0 +1,37 @@
+import { FC, useEffect, useState } from 'react';
+import { Base, Column } from '../../common';
+import { NotificationUtilities } from '../../views/notification-center/common/NotificationUtilities';
+
+interface LoadingViewProps
+{
+    isError: boolean;
+    message: string;
+}
+
+export const LoadingView: FC<LoadingViewProps> = props =>
+{
+    const { isError = false, message = '' } = props;
+    const [ loadingShowing, setLoadingShowing ] = useState(false);
+
+    useEffect(() =>
+    {
+        if(!isError) return;
+
+        NotificationUtilities.simpleAlert(message, null, null, null, 'Connection Error');
+    }, [ isError, message ]);
+
+    useEffect(() =>
+    {
+        const timeout = setTimeout(() => setLoadingShowing(true), 500);
+
+        return () => clearTimeout(timeout);
+    }, []);
+    
+    return (
+        <Column fit center position="relative" className="nitro-loading">
+            <Base className="connecting-duck" />
+            { isError && (message && message.length) &&
+                <Base className="m-auto bottom-3 fs-4 text-shadow" position="absolute">{ message }</Base> }
+        </Column>
+    );
+}

src/components/room-host/RoomHostView.tsx

@@ -1,10 +1,11 @@
 import { IRoomSession, RoomEngineEvent, RoomId, RoomSessionEvent } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useState } from 'react';
 import { GetRoomSession, SetActiveRoomId, StartRoomSession } from '../../api';
+import { Base } from '../../common';
 import { useRoomEngineEvent } from '../../hooks/events/nitro/room/room-engine-event';
 import { useRoomSessionManagerEvent } from '../../hooks/events/nitro/session/room-session-manager-event';
 import { TransitionAnimation, TransitionAnimationTypes } from '../../layout';
-import { RoomView } from '../room/RoomView';
+import { RoomView } from '../../views/room/RoomView';
 
 export const RoomHostView: FC<{}> = props =>
 {
@@ -51,9 +52,9 @@ export const RoomHostView: FC<{}> = props =>
 
     return (
         <TransitionAnimation type={ TransitionAnimationTypes.FADE_IN } inProp={ !!roomSession } timeout={ 300 }>
-            <div className="nitro-room-host w-100 h-100">
+            <Base fit>
                 <RoomView roomSession={ roomSession } />
-            </div>
+            </Base>
         </TransitionAnimation>
     );
 }

src/views/Styles.scss

@@ -1,11 +1,9 @@
 @import "./shared/Shared";
 @import "./friends/FriendsView";
 @import "./hotel-view/HotelView";
-@import "./loading/LoadingView";
 @import "./main/MainView";
 @import "./notification-center/NotificationCenterView";
 @import "./room/RoomView";
-@import "./room-host/RoomHostView";
 @import "./floorplan-editor/FloorplanEditorView";
 @import "./nitropedia/NitropediaView";
 @import "./hc-center/HcCenterView.scss";

src/views/loading/LoadingView.tsx

@@ -1,45 +0,0 @@
-import { FC, useEffect, useState } from 'react';
-import { NitroLayoutFlexColumn } from '../../layout';
-import { NitroLayoutBase } from '../../layout/base';
-import { NotificationUtilities } from '../notification-center/common/NotificationUtilities';
-import { LoadingViewProps } from './LoadingView.types';
-
-export const LoadingView: FC<LoadingViewProps> = props =>
-{
-    const { isError = false, message = '' } = props;
-    const [ loadingShowing, setLoadingShowing ] = useState(false);
-
-    useEffect(() =>
-    {
-        if(!isError) return;
-
-        NotificationUtilities.simpleAlert(message, null, null, null, 'Connection Error');
-    }, [ isError, message ]);
-
-    useEffect(() =>
-    {
-        const timeout = setTimeout(() =>
-        {
-            setLoadingShowing(true);
-        }, 500);
-
-        return () =>
-        {
-            clearTimeout(timeout);
-        }
-    }, []);
-    
-    return (
-        <NitroLayoutFlexColumn className='position-relative nitro-loading justify-content-center align-items-center w-100 h-100'>
-            <NitroLayoutBase className="connecting-duck" />
-            {/* <TransitionAnimation className="loading-area" type={ TransitionAnimationTypes.FADE_IN } inProp={ loadingShowing }>
-                <NitroLayoutBase className="connecting-duck" />
-            </TransitionAnimation> */}
-            {/* <TransitionAnimation className="loading-area" type={ TransitionAnimationTypes.FADE_IN } inProp={ !loadingShowing } timeout={ 500 }>
-                <NitroLayoutBase position="absolute" className="logo" />
-            </TransitionAnimation> */}
-            { isError && (message && message.length) &&
-                <NitroLayoutBase className="m-auto bottom-3 fs-4 text-shadow" position="absolute">{ message }</NitroLayoutBase> }
-        </NitroLayoutFlexColumn>
-    );
-}

src/views/loading/LoadingView.types.ts

@@ -1,5 +0,0 @@
-export interface LoadingViewProps
-{
-    isError: boolean;
-    message: string;
-}

src/views/main/MainView.tsx

@@ -12,6 +12,7 @@ import { InventoryView } from '../../components/inventory/InventoryView';
 import { ModToolsView } from '../../components/mod-tools/ModToolsView';
 import { NavigatorView } from '../../components/navigator/NavigatorView';
 import { RightSideView } from '../../components/right-side/RightSideView';
+import { RoomHostView } from '../../components/room-host/RoomHostView';
 import { ToolbarView } from '../../components/toolbar/ToolbarView';
 import { UserProfileView } from '../../components/user-profile/UserProfileView';
 import { UserSettingsView } from '../../components/user-settings/UserSettingsView';
@@ -24,7 +25,6 @@ import { FriendsView } from '../friends/FriendsView';
 import { HcCenterView } from '../hc-center/HcCenterView';
 import { HotelView } from '../hotel-view/HotelView';
 import { NitropediaView } from '../nitropedia/NitropediaView';
-import { RoomHostView } from '../room-host/RoomHostView';
 import { MainViewProps } from './MainView.types';
 
 export const MainView: FC<MainViewProps> = props =>

src/views/room-host/RoomHostView.scss

@@ -1,3 +0,0 @@
-.nitro-room-host {
-
-}