monorepo/visions/ui/src/App.tsx

67 lines
2.1 KiB
TypeScript

import React, { useEffect, useState } from 'react';
import './App.css';
import { Client } from './client';
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import { DesignPage } from './views/Design/Design';
import { GmView } from './views/GmView/GmView';
import { WebsocketProvider } from './components/WebsocketProvider';
import { PlayerView } from './views/PlayerView/PlayerView';
import { Admin } from './views/Admin/Admin';
import Candela from './plugins/Candela';
const TEST_CHARSHEET_UUID = "12df9c09-1f2f-4147-8eda-a97bd2a7a803";
interface AppProps {
client: Client;
}
const CandelaCharsheet = ({ client }: { client: Client }) => {
let [sheet, setSheet] = useState(undefined);
useEffect(
() => { client.charsheet(TEST_CHARSHEET_UUID).then((c) => setSheet(c)); },
[client, setSheet]
);
return sheet ? <Candela.CharsheetElement sheet={sheet} /> : <div> </div>
}
const App = ({ client }: AppProps) => {
console.log("rendering app");
const [websocketUrl, setWebsocketUrl] = useState<string | undefined>(undefined);
useEffect(() => {
client.registerWebsocket().then((url) => setWebsocketUrl(url))
}, [client]);
let router =
createBrowserRouter([
{
path: "/gm",
element: websocketUrl ? <WebsocketProvider websocketUrl={websocketUrl}> <GmView client={client} /> </WebsocketProvider> : <div> </div>
},
{
path: "/admin",
element: <Admin client={client} />
},
{
path: "/",
element: websocketUrl ? <WebsocketProvider websocketUrl={websocketUrl}> <PlayerView client={client} /> </WebsocketProvider> : <div> </div>
},
{
path: "/candela",
element: <CandelaCharsheet client={client} />
},
{
path: "/design",
element: <DesignPage />
}
]);
return (
<div className="App">
<RouterProvider router={router} />
</div>
);
}
export default App;