nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2025-01-18 21:36:27 +01:00
Code Issues Packages Projects Releases Wiki Activity

Update loading

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/App.tsx
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 { 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())
{

16
src/components/loading/LoadingView.scss
View File

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

31
src/components/loading/LoadingView.tsx
View File

@ -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(() =>
{
@ -20,35 +19,27 @@ 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>
);
}