First commit

.editorconfig

@@ -0,0 +1,16 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 4
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

.vscode/settings.json

@@ -0,0 +1,16 @@
+{
+    "typescript.tsdk": "node_modules\\typescript\\lib",
+    "typescript.preferences.importModuleSpecifier": "relative",
+    "typescript.preferences.quoteStyle": "single",
+    "typescript.format.placeOpenBraceOnNewLineForControlBlocks": true,
+    "typescript.format.placeOpenBraceOnNewLineForFunctions": true,
+    "editor.codeActionsOnSave": {
+        "source.fixAll": true,
+        "source.organizeImports": true,
+    },
+    "emmet.showExpandedAbbreviation": "never",
+	"git.ignoreLimitWarning": true,
+    "files.eol": "\n",
+    "files.insertFinalNewline": true,
+    "files.trimFinalNewlines": true
+}

package.json

@@ -10,13 +10,18 @@
     "@types/node": "^12.20.7",
     "@types/react": "^17.0.3",
     "@types/react-dom": "^17.0.3",
+    "nitro-renderer": "file:../nitro-renderer",
+    "node-sass": "^5.0.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-redux": "^7.2.3",
     "react-scripts": "4.0.3",
+    "redux": "^4.0.5",
     "typescript": "^4.2.4",
     "web-vitals": "^1.1.1"
   },
   "scripts": {
+    "postinstall": "node ./webpack-patcher.js",
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
@@ -26,7 +31,12 @@
     "extends": [
       "react-app",
       "react-app/jest"
-    ]
+    ],
+    "rules": {
+      "no-switch-case-fall-through": [
+        "off"
+      ]
+    }
   },
   "browserslist": {
     "production": [

public/index.html

@@ -39,5 +39,11 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
+    <script>
+      var NitroConfig = {
+          configurationUrl: '/configuration.json',
+          sso: (new URLSearchParams(window.location.search).get('sso') || null)
+      };
+    </script>
   </body>
 </html>

src/App.css

@@ -1,38 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

src/App.test.tsx

@@ -1,9 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});

src/App.tsx

@@ -1,26 +1,137 @@
-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+import { ConfigurationEvent, NitroEvent } from 'nitro-renderer';
+import { NitroCommunicationDemoEvent } from 'nitro-renderer/src/nitro/communication/demo/NitroCommunicationDemoEvent';
+import { LegacyExternalInterface } from 'nitro-renderer/src/nitro/externalInterface/LegacyExternalInterface';
+import { NitroLocalizationEvent } from 'nitro-renderer/src/nitro/localization/NitroLocalizationEvent';
+import { Nitro } from 'nitro-renderer/src/nitro/Nitro';
+import { RoomEngineEvent } from 'nitro-renderer/src/nitro/room/events/RoomEngineEvent';
+import { WebGL } from 'nitro-renderer/src/nitro/utils/WebGL';
+import { useState } from 'react';
+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';
+import { LoadingView } from './views/loading/LoadingView';
+import { MainView } from './views/main/MainView';
 
-function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
+export function App(): JSX.Element
+{
+    const [ isReady, setIsReady ]   = useState(false);
+    const [ isError, setIsError ]   = useState(false);
+    const [ message, setMessage ]   = useState('Getting Ready');
+
+    //@ts-ignore
+    if(!NitroConfig) throw new Error('NitroConfig is not defined!');
+
+    if(!Nitro.instance) Nitro.bootstrap();
+
+    function getPreloadAssetUrls(): string[]
+    {
+        const urls: string[] = [];
+
+        const assetUrls = Nitro.instance.getConfiguration<string[]>('preload.assets.urls');
+
+        if(assetUrls && assetUrls.length)
+        {
+            for(const url of assetUrls)
+            {
+                urls.push(Nitro.instance.core.configuration.interpolate(url));
+            }
+        }
+
+        return urls;
+    }
+
+    const handler = (event: NitroEvent) =>
+    {
+        switch(event.type)
+        {
+            case ConfigurationEvent.LOADED:
+                Nitro.instance.localization.init();
+                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');
+
+                setTimeout(() => window.location.reload(), 1500);
+                return;
+			case NitroCommunicationDemoEvent.CONNECTION_HANDSHAKING:
+				return;
+			case NitroCommunicationDemoEvent.CONNECTION_HANDSHAKE_FAILED:
+                setIsError(true);
+                setMessage('Handshake Failed');
+				return;
+			case NitroCommunicationDemoEvent.CONNECTION_AUTHENTICATED:
+                setMessage('Finishing Up');
+
+                Nitro.instance.init();
+				return;
+			case NitroCommunicationDemoEvent.CONNECTION_ERROR:
+                setIsError(true);
+                setMessage('Connection Error');
+				return;
+			case NitroCommunicationDemoEvent.CONNECTION_CLOSED:
+                if(Nitro.instance.roomEngine) Nitro.instance.roomEngine.dispose();
+
+                setIsError(true);
+                setMessage('Connection Error');
+
+                LegacyExternalInterface.call('disconnect', -1, 'client.init.handshake.fail');
+                return;
+            case RoomEngineEvent.ENGINE_INITIALIZED:
+                setIsReady(true);
+                return;
+            case NitroLocalizationEvent.LOADED:
+                Nitro.instance.core.asset.downloadAssets(getPreloadAssetUrls(), (status: boolean) =>
+                {
+                    if(status)
+                    {
+                        setMessage('Connecting');
+                        
+                        Nitro.instance.communication.init();
+                    }
+                    else
+                    {
+                        setIsError(true);
+                        setMessage('Assets Failed');
+                    }
+                });
+                return;
+        }
+    };
+
+    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));
+
+        return;
+    }
+
+    Nitro.instance.core.configuration.init();
+    
+    return (
+        <div>
+            { (!isReady || isError) && <LoadingView isError={ isError } message={ message } /> }
+            { (isReady && !isError) && <MainView /> }
+        </div>
+    );
 }
-
-export default App;