nitro-react/src/App.tsx

156 lines
6.1 KiB
TypeScript
Raw Normal View History

2022-03-15 10:59:51 +01:00
import { ConfigurationEvent, HabboWebTools, LegacyExternalInterface, Nitro, NitroCommunicationDemoEvent, NitroEvent, NitroLocalizationEvent, NitroVersion, RoomEngineEvent, WebGL } from '@nitrots/nitro-renderer';
2022-04-08 07:39:35 +02:00
import { FC, useCallback, useEffect, useState } from 'react';
2022-03-21 08:57:00 +01:00
import { GetCommunication, GetConfiguration, GetNitroInstance, GetUIVersion } from './api';
2022-03-03 08:23:01 +01:00
import { Base, TransitionAnimation, TransitionAnimationTypes } from './common';
2022-02-21 19:34:12 +01:00
import { LoadingView } from './components/loading/LoadingView';
2022-02-21 19:39:07 +01:00
import { MainView } from './components/main/MainView';
2022-03-15 10:59:51 +01:00
import { DispatchUiEvent, UseConfigurationEvent, UseLocalizationEvent, UseMainEvent, UseRoomEngineEvent } from './hooks';
2022-03-28 04:11:39 +02:00
import IntervalWebWorker from './workers/IntervalWebWorker';
import { WorkerBuilder } from './workers/WorkerBuilder';
2021-04-14 20:24:24 +02:00
2022-03-21 08:57:00 +01:00
NitroVersion.UI_VERSION = GetUIVersion();
2021-06-23 10:05:23 +02:00
export const App: FC<{}> = props =>
2021-04-14 20:24:24 +02:00
{
2021-09-30 04:32:52 +02:00
const [ isReady, setIsReady ] = useState(false);
const [ isError, setIsError ] = useState(false);
2022-04-01 19:33:08 +02:00
const [ message, setMessage ] = useState('Getting Ready');
const [ percent, setPercent ] = useState(0);
2022-04-08 07:39:35 +02:00
const [ imageRendering, setImageRendering ] = useState<boolean>(true);
2021-04-14 20:24:24 +02:00
2022-03-28 04:11:39 +02:00
if(!GetNitroInstance())
{
2022-04-08 07:39:35 +02:00
//@ts-ignore
if(!NitroConfig) throw new Error('NitroConfig is not defined!');
2022-03-28 04:11:39 +02:00
Nitro.bootstrap();
const worker = new WorkerBuilder(IntervalWebWorker);
Nitro.instance.setWorker(worker);
}
2021-04-14 20:24:24 +02:00
2021-04-15 08:49:56 +02:00
const handler = useCallback((event: NitroEvent) =>
2021-04-14 20:24:24 +02:00
{
switch(event.type)
{
case ConfigurationEvent.LOADED:
2021-07-22 07:09:31 +02:00
GetNitroInstance().localization.init();
2022-04-08 07:39:35 +02:00
setPercent(prevValue => (prevValue + 20));
2021-04-14 20:24:24 +02:00
return;
case ConfigurationEvent.FAILED:
setIsError(true);
setMessage('Configuration Failed');
return;
case Nitro.WEBGL_UNAVAILABLE:
setIsError(true);
setMessage('WebGL Required');
return;
case Nitro.WEBGL_CONTEXT_LOST:
setIsError(true);
setMessage('WebGL Context Lost - Reloading');
2021-04-14 20:24:24 +02:00
setTimeout(() => window.location.reload(), 1500);
return;
case NitroCommunicationDemoEvent.CONNECTION_HANDSHAKING:
2022-04-08 07:39:35 +02:00
setPercent(prevValue => (prevValue + 20));
2022-04-01 19:33:08 +02:00
return;
case NitroCommunicationDemoEvent.CONNECTION_HANDSHAKE_FAILED:
setIsError(true);
setMessage('Handshake Failed');
2022-04-01 19:33:08 +02:00
return;
case NitroCommunicationDemoEvent.CONNECTION_AUTHENTICATED:
2022-04-08 07:39:35 +02:00
setPercent(prevValue => (prevValue + 20));
2021-04-14 20:24:24 +02:00
2022-03-15 10:59:51 +01:00
GetNitroInstance().init();
2022-01-11 08:32:38 +01:00
if(LegacyExternalInterface.available) LegacyExternalInterface.call('legacyTrack', 'authentication', 'authok', []);
2022-04-01 19:33:08 +02:00
return;
case NitroCommunicationDemoEvent.CONNECTION_ERROR:
2021-04-14 20:24:24 +02:00
setIsError(true);
setMessage('Connection Error');
2022-04-01 19:33:08 +02:00
return;
case NitroCommunicationDemoEvent.CONNECTION_CLOSED:
2022-04-08 07:39:35 +02:00
//if(GetNitroInstance().roomEngine) GetNitroInstance().roomEngine.dispose();
2022-03-15 18:34:34 +01:00
//setIsError(true);
2021-04-14 20:24:24 +02:00
setMessage('Connection Error');
2022-01-11 08:32:38 +01:00
HabboWebTools.send(-1, 'client.init.handshake.fail');
2021-04-14 20:24:24 +02:00
return;
case RoomEngineEvent.ENGINE_INITIALIZED:
2022-04-08 07:39:35 +02:00
setPercent(prevValue => (prevValue + 20));
2022-03-15 10:59:51 +01:00
2022-03-15 18:34:34 +01:00
setTimeout(() => setIsReady(true), 300);
2021-04-14 20:24:24 +02:00
return;
2022-04-08 07:39:35 +02:00
case NitroLocalizationEvent.LOADED: {
const assetUrls = GetConfiguration<string[]>('preload.assets.urls');
const urls: string[] = [];
if(assetUrls && assetUrls.length) for(const url of assetUrls) urls.push(GetNitroInstance().core.configuration.interpolate(url));
GetNitroInstance().core.asset.downloadAssets(urls, (status: boolean) =>
2021-04-14 20:24:24 +02:00
{
if(status)
{
2021-07-22 07:09:31 +02:00
GetCommunication().init();
2022-04-08 07:39:35 +02:00
setPercent(prevValue => (prevValue + 20))
2021-04-14 20:24:24 +02:00
}
else
{
setIsError(true);
setMessage('Assets Failed');
}
});
return;
2022-04-08 07:39:35 +02:00
}
2021-04-14 20:24:24 +02:00
}
2022-04-08 07:39:35 +02:00
}, []);
2021-04-14 20:24:24 +02:00
2022-03-03 10:11:31 +01:00
UseMainEvent(Nitro.WEBGL_UNAVAILABLE, handler);
UseMainEvent(Nitro.WEBGL_CONTEXT_LOST, handler);
UseMainEvent(NitroCommunicationDemoEvent.CONNECTION_HANDSHAKING, handler);
UseMainEvent(NitroCommunicationDemoEvent.CONNECTION_HANDSHAKE_FAILED, handler);
UseMainEvent(NitroCommunicationDemoEvent.CONNECTION_AUTHENTICATED, handler);
UseMainEvent(NitroCommunicationDemoEvent.CONNECTION_ERROR, handler);
UseMainEvent(NitroCommunicationDemoEvent.CONNECTION_CLOSED, handler);
UseRoomEngineEvent(RoomEngineEvent.ENGINE_INITIALIZED, handler);
UseLocalizationEvent(NitroLocalizationEvent.LOADED, handler);
UseConfigurationEvent(ConfigurationEvent.LOADED, handler);
UseConfigurationEvent(ConfigurationEvent.FAILED, handler);
2021-04-14 20:24:24 +02:00
2022-04-08 07:39:35 +02:00
useEffect(() =>
2021-04-14 20:24:24 +02:00
{
2022-04-08 07:39:35 +02:00
if(!WebGL.isWebGLAvailable())
{
DispatchUiEvent(new NitroEvent(Nitro.WEBGL_UNAVAILABLE));
}
else
{
GetNitroInstance().core.configuration.init();
}
const resize = (event: UIEvent) => setImageRendering(!(window.devicePixelRatio % 1));
window.addEventListener('resize', resize);
resize(null);
return () =>
{
window.removeEventListener('resize', resize);
}
}, []);
2021-04-14 20:24:24 +02:00
return (
2022-04-08 07:39:35 +02:00
<Base fit overflow="hidden" className={ imageRendering && 'image-rendering-pixelated' }>
2022-02-22 17:08:27 +01:00
{ (!isReady || isError) &&
2022-04-04 02:52:34 +02:00
<LoadingView isError={ isError } message={ message } percent={ percent } /> }
2022-03-15 18:34:34 +01:00
<TransitionAnimation type={ TransitionAnimationTypes.FADE_IN } inProp={ (isReady) }>
2021-09-13 18:29:04 +02:00
<MainView />
</TransitionAnimation>
2022-02-22 17:08:27 +01:00
<Base id="draggable-windows-container" />
</Base>
2021-04-14 20:24:24 +02:00
);
}