Update more components

This commit is contained in:
Bill 2022-02-21 13:34:12 -05:00
parent 0b04525c31
commit 38f6dc19a6
10 changed files with 44 additions and 60 deletions

View File

@ -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 =>

View File

@ -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';

View File

@ -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>
);
}

View File

@ -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>
);
}

View File

@ -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";

View File

@ -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>
);
}

View File

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

View File

@ -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 =>

View File

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