nitro-react/src/App.tsx

137 lines
5.3 KiB
TypeScript
Raw Normal View History

2021-08-13 08:56:26 +02:00
import { ConfigurationEvent, LegacyExternalInterface, Nitro, NitroCommunicationDemoEvent, NitroEvent, NitroLocalizationEvent, NitroVersion, RoomEngineEvent, WebGL } from '@nitrots/nitro-renderer';
2021-06-24 09:58:43 +02:00
import { FC, useCallback, useState } from 'react';
2021-07-22 07:09:31 +02:00
import { GetCommunication, GetConfiguration, GetNitroInstance } from './api';
2021-04-14 20:24:24 +02:00
import { useConfigurationEvent } from './hooks/events/core/configuration/configuration-event';
import { useLocalizationEvent } from './hooks/events/nitro/localization/localization-event';
import { dispatchMainEvent, useMainEvent } from './hooks/events/nitro/main-event';
import { useRoomEngineEvent } from './hooks/events/nitro/room/room-engine-event';
2021-09-13 18:29:04 +02:00
import { TransitionAnimation, TransitionAnimationTypes } from './layout';
2021-04-14 20:24:24 +02:00
import { LoadingView } from './views/loading/LoadingView';
import { MainView } from './views/main/MainView';
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);
const [ message, setMessage ] = useState('Getting Ready');
2021-04-14 20:24:24 +02:00
//@ts-ignore
if(!NitroConfig) throw new Error('NitroConfig is not defined!');
2021-08-13 08:56:26 +02:00
if(!GetNitroInstance())
{
NitroVersion.UI_VERSION = '2.0.0';
Nitro.bootstrap();
}
2021-04-14 20:24:24 +02:00
2021-06-24 09:58:43 +02:00
const getPreloadAssetUrls = useCallback(() =>
2021-04-14 20:24:24 +02:00
{
const urls: string[] = [];
2021-05-05 00:47:36 +02:00
const assetUrls = GetConfiguration<string[]>('preload.assets.urls');
2021-04-14 20:24:24 +02:00
if(assetUrls && assetUrls.length)
{
2021-07-22 07:09:31 +02:00
for(const url of assetUrls) urls.push(GetNitroInstance().core.configuration.interpolate(url));
2021-04-14 20:24:24 +02:00
}
return urls;
2021-06-23 10:05:23 +02:00
}, []);
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();
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:
return;
case NitroCommunicationDemoEvent.CONNECTION_HANDSHAKE_FAILED:
setIsError(true);
setMessage('Handshake Failed');
2021-04-14 20:24:24 +02:00
return;
case NitroCommunicationDemoEvent.CONNECTION_AUTHENTICATED:
setMessage('Finishing Up');
2021-07-22 07:09:31 +02:00
GetNitroInstance().init();
2021-04-14 20:24:24 +02:00
return;
case NitroCommunicationDemoEvent.CONNECTION_ERROR:
setIsError(true);
setMessage('Connection Error');
return;
case NitroCommunicationDemoEvent.CONNECTION_CLOSED:
2021-07-22 07:09:31 +02:00
if(GetNitroInstance().roomEngine) GetNitroInstance().roomEngine.dispose();
2021-04-14 20:24:24 +02:00
setIsError(true);
setMessage('Connection Error');
LegacyExternalInterface.call('disconnect', -1, 'client.init.handshake.fail');
return;
case RoomEngineEvent.ENGINE_INITIALIZED:
setIsReady(true);
return;
case NitroLocalizationEvent.LOADED:
2021-07-22 07:09:31 +02:00
GetNitroInstance().core.asset.downloadAssets(getPreloadAssetUrls(), (status: boolean) =>
2021-04-14 20:24:24 +02:00
{
if(status)
{
setMessage('Connecting');
2021-07-22 07:09:31 +02:00
GetCommunication().init();
2021-04-14 20:24:24 +02:00
}
else
{
setIsError(true);
setMessage('Assets Failed');
}
});
return;
}
2021-06-30 17:53:05 +02:00
}, [ getPreloadAssetUrls ]);
2021-04-14 20:24:24 +02: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);
if(!WebGL.isWebGLAvailable())
{
dispatchMainEvent(new NitroEvent(Nitro.WEBGL_UNAVAILABLE));
}
2021-04-16 05:44:54 +02:00
else
{
2021-07-22 07:09:31 +02:00
GetNitroInstance().core.configuration.init();
2021-04-16 05:44:54 +02:00
}
2021-04-14 20:24:24 +02:00
return (
2021-09-24 10:49:20 +02:00
<div className="nitro-app overflow-hidden">
2021-09-18 10:31:08 +02:00
<div id="nitro-alerts-container" />
{ (!isReady || isError) && <LoadingView isError={ isError } message={ message } /> }
2021-09-30 09:46:58 +02:00
<TransitionAnimation type={ TransitionAnimationTypes.FADE_IN } inProp={ (isReady && !isError) }>
2021-09-13 18:29:04 +02:00
<MainView />
</TransitionAnimation>
2021-04-14 20:24:24 +02:00
</div>
);
}