mirror of
https://github.com/billsonnn/nitro-react.git
synced 2025-01-19 05:46:27 +01:00
Update loading
This commit is contained in:
parent
162c69dc50
commit
4877e1b8a5
27
src/App.tsx
27
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 { 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())
|
||||||
{
|
{
|
||||||
|
@ -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 {
|
||||||
|
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user