Update loading

This commit is contained in:
Bill 2022-03-15 05:59:51 -04:00
parent 162c69dc50
commit 4877e1b8a5
3 changed files with 23 additions and 51 deletions

View File

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

View File

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

View File

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