mirror of
https://github.com/billsonnn/nitro-react.git
synced 2025-01-31 02:12:36 +01:00
Update loading
This commit is contained in:
parent
abf11af448
commit
40e67afb7f
57
src/App.tsx
57
src/App.tsx
@ -1,4 +1,4 @@
|
|||||||
import { GetAvatarRenderManager, GetCommunication, GetConfiguration, GetLocalizationManager, GetRoomEngine, GetRoomSessionManager, GetSessionDataManager, GetSoundManager, GetStage, GetTicker, HabboWebTools, LegacyExternalInterface, LoadGameUrlEvent, NitroLogger, NitroVersion, PrepareRenderer } from '@nitrots/nitro-renderer';
|
import { GetAssetManager, GetAvatarRenderManager, GetCommunication, GetConfiguration, GetLocalizationManager, GetRoomEngine, GetRoomSessionManager, GetSessionDataManager, GetSoundManager, GetStage, GetTicker, HabboWebTools, LegacyExternalInterface, LoadGameUrlEvent, NitroLogger, NitroVersion, PrepareRenderer } from '@nitrots/nitro-renderer';
|
||||||
import { FC, useEffect, useState } from 'react';
|
import { FC, useEffect, useState } from 'react';
|
||||||
import { GetUIVersion } from './api';
|
import { GetUIVersion } from './api';
|
||||||
import { Base } from './common';
|
import { Base } from './common';
|
||||||
@ -11,8 +11,15 @@ NitroVersion.UI_VERSION = GetUIVersion();
|
|||||||
export const App: FC<{}> = props =>
|
export const App: FC<{}> = props =>
|
||||||
{
|
{
|
||||||
const [ isReady, setIsReady ] = useState(false);
|
const [ isReady, setIsReady ] = useState(false);
|
||||||
const [ message, setMessage ] = useState('Getting Ready');
|
|
||||||
const [ imageRendering, setImageRendering ] = useState<boolean>(true);
|
useMessageEvent<LoadGameUrlEvent>(LoadGameUrlEvent, event =>
|
||||||
|
{
|
||||||
|
const parser = event.getParser();
|
||||||
|
|
||||||
|
if(!parser) return;
|
||||||
|
|
||||||
|
LegacyExternalInterface.callGame('showGame', parser.url);
|
||||||
|
});
|
||||||
|
|
||||||
useEffect(() =>
|
useEffect(() =>
|
||||||
{
|
{
|
||||||
@ -41,12 +48,20 @@ export const App: FC<{}> = props =>
|
|||||||
NitroLogger.LOG_ERROR = GetConfiguration().getValue<boolean>('system.log.error', false);
|
NitroLogger.LOG_ERROR = GetConfiguration().getValue<boolean>('system.log.error', false);
|
||||||
NitroLogger.LOG_EVENTS = GetConfiguration().getValue<boolean>('system.log.events', false);
|
NitroLogger.LOG_EVENTS = GetConfiguration().getValue<boolean>('system.log.events', false);
|
||||||
NitroLogger.LOG_PACKETS = GetConfiguration().getValue<boolean>('system.log.packets', false);
|
NitroLogger.LOG_PACKETS = GetConfiguration().getValue<boolean>('system.log.packets', false);
|
||||||
|
|
||||||
await GetLocalizationManager().init();
|
const assetUrls = GetConfiguration().getValue<string[]>('preload.assets.urls').map(url => GetConfiguration().interpolate(url)) ?? [];
|
||||||
await GetAvatarRenderManager().init();
|
|
||||||
await GetSoundManager().init();
|
await Promise.all(
|
||||||
await GetSessionDataManager().init();
|
[
|
||||||
await GetRoomSessionManager().init();
|
GetAssetManager().downloadAssets(assetUrls),
|
||||||
|
GetLocalizationManager().init(),
|
||||||
|
GetAvatarRenderManager().init(),
|
||||||
|
GetSoundManager().init(),
|
||||||
|
GetSessionDataManager().init(),
|
||||||
|
GetRoomSessionManager().init()
|
||||||
|
]
|
||||||
|
);
|
||||||
|
|
||||||
await GetRoomEngine().init();
|
await GetRoomEngine().init();
|
||||||
await GetCommunication().init();
|
await GetCommunication().init();
|
||||||
|
|
||||||
@ -69,34 +84,14 @@ export const App: FC<{}> = props =>
|
|||||||
NitroLogger.error(err);
|
NitroLogger.error(err);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const resize = (event: UIEvent) => setImageRendering(!(window.devicePixelRatio % 1));
|
|
||||||
|
|
||||||
window.addEventListener('resize', resize);
|
|
||||||
|
|
||||||
resize(null);
|
|
||||||
|
|
||||||
prepare(window.innerWidth, window.innerHeight);
|
prepare(window.innerWidth, window.innerHeight);
|
||||||
|
|
||||||
return () =>
|
|
||||||
{
|
|
||||||
window.removeEventListener('resize', resize);
|
|
||||||
}
|
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
useMessageEvent<LoadGameUrlEvent>(LoadGameUrlEvent, event =>
|
|
||||||
{
|
|
||||||
const parser = event.getParser();
|
|
||||||
|
|
||||||
if(!parser) return;
|
|
||||||
|
|
||||||
LegacyExternalInterface.callGame('showGame', parser.url);
|
|
||||||
});
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Base fit overflow="hidden" className={ imageRendering && 'image-rendering-pixelated' }>
|
<Base fit overflow="hidden" className={ !(window.devicePixelRatio % 1) && 'image-rendering-pixelated' }>
|
||||||
{ !isReady &&
|
{ !isReady &&
|
||||||
<LoadingView isError={ false } message={ message } percent={ 0 } showPercent={ false } /> }
|
<LoadingView /> }
|
||||||
{ isReady && <MainView /> }
|
{ isReady && <MainView /> }
|
||||||
<Base id="draggable-windows-container" />
|
<Base id="draggable-windows-container" />
|
||||||
</Base>
|
</Base>
|
||||||
|
@ -1,34 +1,19 @@
|
|||||||
import { FC } from 'react';
|
import { FC } from 'react';
|
||||||
import { Base, Column, LayoutProgressBar, Text } from '../../common';
|
import { Base, Column } from '../../common';
|
||||||
|
|
||||||
interface LoadingViewProps
|
interface LoadingViewProps
|
||||||
{
|
{
|
||||||
isError: boolean;
|
|
||||||
message: string;
|
|
||||||
percent: number;
|
|
||||||
showPercent?: boolean;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export const LoadingView: FC<LoadingViewProps> = props =>
|
export const LoadingView: FC<LoadingViewProps> = props =>
|
||||||
{
|
{
|
||||||
const { isError = false, message = '', percent = 0, showPercent = true } = props;
|
const {} = props;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Column fullHeight position="relative" className="nitro-loading">
|
<Column fullHeight position="relative" className="nitro-loading">
|
||||||
<Base fullHeight className="container h-100">
|
<Base fullHeight className="container h-100">
|
||||||
<Column fullHeight alignItems="center" justifyContent="end">
|
<Column fullHeight alignItems="center" justifyContent="end">
|
||||||
<Base className="connecting-duck" />
|
<Base className="connecting-duck" />
|
||||||
{ showPercent && <Column size={ 6 } className="text-center py-4">
|
|
||||||
{ isError && (message && message.length) ?
|
|
||||||
<Base className="fs-4 text-shadow">{ message }</Base>
|
|
||||||
:
|
|
||||||
<>
|
|
||||||
<Text fontSize={ 4 } variant="white" className="text-shadow">{ percent.toFixed() }%</Text>
|
|
||||||
<LayoutProgressBar progress={ percent } className="mt-2 large" />
|
|
||||||
</>
|
|
||||||
}
|
|
||||||
|
|
||||||
</Column> }
|
|
||||||
</Column>
|
</Column>
|
||||||
</Base>
|
</Base>
|
||||||
</Column>
|
</Column>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user